{"id":11,"date":"2026-09-08T08:23:14","date_gmt":"2026-09-08T08:23:14","guid":{"rendered":"https:\/\/laminasmile.com\/?page_id=11"},"modified":"2026-09-20T09:45:10","modified_gmt":"2026-09-20T09:45:10","slug":"homepage","status":"publish","type":"page","link":"https:\/\/laminasmile.com\/fr\/","title":{"rendered":"Homepage"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n \r\n Lamina Clinic \u2014 Section 1 Hero v7<\/title>\r\n <meta name=\"description\" content=\"Premium split hero for Lamina Clinic Hair Restoration and Dental Aesthetics.\" \/>\r\n\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Manrope:wght@400;500;600&display=swap\" rel=\"stylesheet\">\r\n\r\n <style>\r\n :root{\r\n --aubergine:#2B142F;\r\n --plum:#5F2468;\r\n --orchid:#94709A;\r\n --lilac:#C5B2C8;\r\n --ivory:#F7F2EA;\r\n --champagne:#D8C4A1;\r\n --ink:#171317;\r\n --stone:#E8E1E4;\r\n --ease-lux:cubic-bezier(.16,.70,.18,1);\r\n --ease-soft:cubic-bezier(.22,.61,.36,1);\r\n --side-pad:clamp(26px,5vw,92px);\r\n }\r\n\r\n *{box-sizing:border-box}\r\n html{background:var(--aubergine);scroll-behavior:auto}\r\n body{\r\n margin:0;\r\n background:var(--ivory);\r\n color:var(--ivory);\r\n font-family:\"Manrope\",system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;\r\n -webkit-font-smoothing:antialiased;\r\n text-rendering:optimizeLegibility;\r\n overflow-x:hidden;\r\n }\r\n a{color:inherit;text-decoration:none}\r\n img{display:block;max-width:100%}\r\n\r\n .hero{\r\n position:relative;\r\n min-height:100svh;\r\n overflow:hidden;\r\n isolation:isolate;\r\n background:var(--aubergine);\r\n }\r\n\r\n \/* restrained ambience: very slow, almost imperceptible *\/\r\n .hero-ambient{\r\n position:absolute;\r\n inset:-12%;\r\n z-index:1;\r\n pointer-events:none;\r\n opacity:.42;\r\n background:\r\n radial-gradient(38% 32% at 50% 16%, rgba(247,242,234,.12), transparent 68%),\r\n radial-gradient(32% 28% at 49% 80%, rgba(197,178,200,.09), transparent 72%);\r\n transform:translate3d(0,0,0) scale(1.02);\r\n animation:ambient 18s ease-in-out infinite alternate;\r\n }\r\n @keyframes ambient{\r\n to{transform:translate3d(1.1%,-.8%,0) scale(1.045)}\r\n }\r\n\r\n .hero-header{\r\n position:absolute;\r\n z-index:40;\r\n inset:0 0 auto 0;\r\n min-height:84px;\r\n padding:22px clamp(22px,4vw,72px);\r\n display:grid;\r\n grid-template-columns:1fr auto 1fr;\r\n align-items:center;\r\n gap:16px;\r\n }\r\n .header-left,.header-right{\r\n font-size:11px;\r\n line-height:1;\r\n letter-spacing:.16em;\r\n text-transform:uppercase;\r\n color:rgba(247,242,234,.76);\r\n }\r\n .header-left{justify-self:start}\r\n .header-right{justify-self:end;display:flex;align-items:center;gap:22px}\r\n .header-link{position:relative;padding:8px 0}\r\n .header-link::after{\r\n content:\"\";\r\n position:absolute;\r\n left:0;right:100%;bottom:2px;height:1px;\r\n background:var(--champagne);\r\n transition:right 1.05s var(--ease-lux);\r\n }\r\n .header-link:hover::after,.header-link:focus-visible::after{right:0}\r\n\r\n .brand{grid-column:2;display:flex;align-items:center;justify-content:center;min-width:190px}\r\n .brand img{width:min(180px,28vw);height:auto;object-fit:contain;filter:drop-shadow(0 8px 22px rgba(23,19,23,.12))}\r\n .brand-fallback{display:flex;align-items:center;gap:10px;letter-spacing:.23em;text-transform:uppercase;font-size:12px;font-weight:600}\r\n .brand-fallback__mark{\r\n width:36px;aspect-ratio:1;border:1px solid rgba(216,196,161,.58);border-radius:50%;\r\n display:grid;place-items:center;font-family:\"Cormorant Garamond\",serif;font-size:22px;font-style:italic;\r\n color:var(--champagne);background:rgba(247,242,234,.05)\r\n }\r\n\r\n \/* IMPORTANT: panels stay geometrically fixed 50\/50. No hover-boundary movement = no shake. *\/\r\n .split{position:absolute;inset:0;z-index:5;display:grid;grid-template-columns:1fr 1fr}\r\n .panel{position:relative;min-width:0;overflow:hidden;isolation:isolate;outline:none;cursor:pointer}\r\n .panel:focus-visible{box-shadow:inset 0 0 0 2px rgba(216,196,161,.72)}\r\n\r\n \/* original palette restored *\/\r\n .panel-bg{position:absolute;inset:0;z-index:-10}\r\n .panel--dental .panel-bg{\r\n background:\r\n radial-gradient(80% 70% at 24% 34%, rgba(247,242,234,.24), transparent 55%),\r\n radial-gradient(48% 55% at 68% 38%, rgba(197,178,200,.22), transparent 62%),\r\n linear-gradient(145deg,#7a497d 0%,#5f2468 46%,#2b142f 100%);\r\n }\r\n .panel--hair .panel-bg{\r\n background:\r\n radial-gradient(70% 65% at 72% 24%, rgba(148,112,154,.18), transparent 56%),\r\n linear-gradient(150deg,#432047 0%,#2b142f 56%,#171317 100%);\r\n }\r\n\r\n .panel-shade{\r\n position:absolute;inset:0;z-index:-5;pointer-events:none;\r\n transition:opacity 1.45s var(--ease-lux), background 1.45s var(--ease-lux), filter 1.45s var(--ease-lux)\r\n }\r\n .panel--dental .panel-shade{\r\n background:\r\n linear-gradient(90deg, rgba(43,20,47,.20) 0%, rgba(43,20,47,.08) 50%, rgba(43,20,47,.34) 100%),\r\n linear-gradient(0deg, rgba(23,19,23,.38), transparent 56%);\r\n }\r\n .panel--hair .panel-shade{\r\n background:\r\n linear-gradient(270deg, rgba(23,19,23,.20) 0%, rgba(43,20,47,.08) 50%, rgba(23,19,23,.42) 100%),\r\n linear-gradient(0deg, rgba(23,19,23,.44), transparent 56%);\r\n }\r\n\r\n .figure-wrap{position:absolute;inset:0;z-index:-7;pointer-events:none;overflow:hidden}\r\n .figure{\r\n position:absolute;\r\n bottom:0;\r\n width:min(72%,620px);\r\n max-height:91%;\r\n height:auto;\r\n object-fit:contain;\r\n object-position:bottom center;\r\n transform:translate3d(0,0,0) scale(1);\r\n transform-origin:50% 100%;\r\n filter:blur(0px) drop-shadow(0 22px 45px rgba(23,19,23,.26));\r\n opacity:1;\r\n transition:transform 1.65s var(--ease-lux), filter 1.55s var(--ease-lux), opacity 1.4s var(--ease-lux);\r\n will-change:transform,filter;\r\n }\r\n .panel--dental .figure{left:-2%; width:min(80%,700px); max-height:92%}\r\n .panel--hair .figure{right:1%; width:min(66%,560px); max-height:89%}\r\n\r\n \/* soft optical bloom behind subjects *\/\r\n .subject-bloom{\r\n position:absolute;\r\n z-index:-8;\r\n width:58%;\r\n aspect-ratio:1;\r\n bottom:8%;\r\n border-radius:50%;\r\n filter:blur(46px);\r\n opacity:.24;\r\n transition:opacity 1.7s var(--ease-lux), transform 1.8s var(--ease-lux);\r\n pointer-events:none;\r\n }\r\n .panel--dental .subject-bloom{left:2%;background:radial-gradient(circle,rgba(247,242,234,.52),rgba(197,178,200,.18) 45%,transparent 72%)}\r\n .panel--hair .subject-bloom{right:2%;background:radial-gradient(circle,rgba(216,196,161,.22),rgba(148,112,154,.16) 44%,transparent 72%)}\r\n\r\n \/* restrained metallic sheen:\r\n dim, slow and silky \u2014 no bright white flash *\/\r\n .water-sheen{\r\n position:absolute;\r\n z-index:-4;\r\n inset:-24%;\r\n pointer-events:none;\r\n opacity:0;\r\n filter:blur(28px);\r\n transform:translate3d(-34%,10%,0) rotate(-11deg) scale(.88);\r\n background:\r\n linear-gradient(\r\n 108deg,\r\n transparent 0%,\r\n transparent 36%,\r\n rgba(216,196,161,.035) 43%,\r\n rgba(197,178,200,.075) 48%,\r\n rgba(247,242,234,.095) 50%,\r\n rgba(197,178,200,.065) 53%,\r\n rgba(95,36,104,.035) 58%,\r\n transparent 66%,\r\n transparent 100%\r\n );\r\n mix-blend-mode:soft-light;\r\n will-change:transform,opacity;\r\n }\r\n\r\n .panel:hover .water-sheen,\r\n .panel:focus-visible .water-sheen{\r\n animation:metalSheenHover 3.35s cubic-bezier(.22,.61,.36,1) both;\r\n }\r\n\r\n @keyframes metalSheenHover{\r\n 0%{\r\n opacity:0;\r\n transform:translate3d(-34%,10%,0) rotate(-11deg) scale(.88);\r\n }\r\n 18%{\r\n opacity:.035;\r\n }\r\n 42%{\r\n opacity:.16;\r\n }\r\n 68%{\r\n opacity:.11;\r\n }\r\n 88%{\r\n opacity:.035;\r\n }\r\n 100%{\r\n opacity:0;\r\n transform:translate3d(34%,-5%,0) rotate(-4deg) scale(1.08);\r\n }\r\n }\r\n\r\n\r\n \/* ALL copy is visible by default. Nothing waits for remote images or JS. *\/\r\n .panel-content{\r\n position:absolute;\r\n inset:auto 0 clamp(54px,8vh,102px) 0;\r\n z-index:12;\r\n padding-inline:var(--side-pad);\r\n opacity:1;\r\n filter:blur(0);\r\n transform:translate3d(0,0,0);\r\n transition:transform 1.35s var(--ease-lux),filter 1.35s var(--ease-lux),opacity 1.35s var(--ease-lux);\r\n animation:textSettle 1.85s .18s var(--ease-lux) both;\r\n }\r\n @keyframes textSettle{\r\n 0%{opacity:.05;filter:blur(10px);transform:translate3d(0,16px,0)}\r\n 100%{opacity:1;filter:blur(0);transform:translate3d(0,0,0)}\r\n }\r\n .panel--dental .panel-content{left:auto; right:clamp(34px,4.5vw,76px); width:min(42%,360px); padding-inline:0; text-align:left}\r\n .panel--hair .panel-content{left:clamp(34px,4.5vw,76px); right:auto; width:min(40%,360px); padding-inline:0; text-align:left; display:flex; flex-direction:column; align-items:flex-start}\r\n\r\n .eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:16px;color:rgba(247,242,234,.76);letter-spacing:.22em;text-transform:uppercase;font-size:10px;font-weight:600}\r\n .eyebrow::before{content:\"\";width:34px;height:1px;background:rgba(216,196,161,.72);flex:0 0 auto}\r\n .panel--hair .eyebrow{flex-direction:row}\r\n\r\n .headline{margin:0;max-width:7.8ch;font-family:\"Cormorant Garamond\",Georgia,serif;font-size:clamp(58px,6.4vw,112px);line-height:.82;font-weight:400;letter-spacing:-.045em;text-wrap:balance;color:var(--ivory);text-shadow:0 4px 20px rgba(23,19,23,.16)}\r\n .headline em{font-style:italic;font-weight:400;color:var(--champagne)}\r\n .sub{max-width:40ch;margin:24px 0 0;color:rgba(247,242,234,.84);line-height:1.7;font-size:clamp(12px,1vw,15px);text-shadow:0 2px 14px rgba(23,19,23,.14)}\r\n\r\n .treatment-list{\r\n display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:25px;\r\n color:rgba(247,242,234,.86);font-size:9px;line-height:1;letter-spacing:.17em;text-transform:uppercase;\r\n opacity:.88;filter:blur(0);transform:translateY(0);\r\n transition:opacity 1.3s var(--ease-lux),filter 1.3s var(--ease-lux)\r\n }\r\n .panel--hair .treatment-list{justify-content:flex-start}\r\n\r\n .enter-link{margin-top:30px;width:max-content;display:inline-flex;align-items:center;gap:14px;color:var(--ivory);text-transform:uppercase;letter-spacing:.18em;font-size:10px;font-weight:600;text-shadow:0 2px 10px rgba(23,19,23,.12)}\r\n .enter-link__disc{\r\n width:42px;height:42px;border-radius:50%;border:1px solid rgba(216,196,161,.48);display:grid;place-items:center;\r\n background:rgba(247,242,234,.04);transition:background 1.25s var(--ease-lux),color 1.25s var(--ease-lux),border-color 1.25s var(--ease-lux)\r\n }\r\n\r\n \/* Stable hover: selected side becomes clearer, other side recedes. No panel resizing. *\/\r\n .split:hover .panel:not(:hover) .figure{filter:blur(1.6px) drop-shadow(0 18px 36px rgba(23,19,23,.18));opacity:.84}\r\n .split:hover .panel:not(:hover) .panel-shade{opacity:1;background:rgba(43,20,47,.28);filter:none}\r\n .split:hover .panel:not(:hover) .panel-content{opacity:.86;filter:blur(.4px)}\r\n .split:hover .panel:not(:hover) .headline{color:rgba(247,242,234,.92)}\r\n .split:hover .panel:not(:hover) .sub,.split:hover .panel:not(:hover) .treatment-list,.split:hover .panel:not(:hover) .enter-link,.split:hover .panel:not(:hover) .eyebrow{color:rgba(247,242,234,.80)}\r\n\r\n .panel:hover .figure,.panel:focus-visible .figure{transform:translate3d(0,-3px,0) scale(1.014);filter:blur(0) drop-shadow(0 26px 50px rgba(23,19,23,.30))}\r\n .panel:hover .subject-bloom,.panel:focus-visible .subject-bloom{opacity:.34;transform:scale(1.055)}\r\n .panel:hover .panel-content,.panel:focus-visible .panel-content{transform:translate3d(0,-4px,0)}\r\n .panel:hover .treatment-list,.panel:focus-visible .treatment-list{opacity:1}\r\n .panel:hover .enter-link__disc,.panel:focus-visible .enter-link__disc{background:var(--champagne);color:var(--aubergine);border-color:var(--champagne)}\r\n .panel:hover .headline,.panel:focus-visible .headline,.panel:hover .sub,.panel:focus-visible .sub,.panel:hover .treatment-list,.panel:focus-visible .treatment-list,.panel:hover .enter-link,.panel:focus-visible .enter-link,.panel:hover .eyebrow,.panel:focus-visible .eyebrow{color:var(--ivory)}\r\n .panel:hover .eyebrow,.panel:focus-visible .eyebrow{opacity:1}\r\n\r\n\r\n \/* Quiet fluid seam between the two worlds.\r\n No metallic\/golden divider: the seam is pearl\/lilac and intentionally low-contrast. *\/\r\n .curve{\r\n position:absolute;\r\n z-index:20;\r\n top:-2%;\r\n bottom:-2%;\r\n left:50%;\r\n width:42px;\r\n transform:translateX(-50%);\r\n pointer-events:none;\r\n opacity:.62;\r\n transition:opacity 1.6s var(--ease-lux), filter 1.6s var(--ease-lux);\r\n filter:drop-shadow(0 0 12px rgba(197,178,200,.08));\r\n }\r\n .curve::before{\r\n content:\"\";\r\n position:absolute;\r\n top:1%;\r\n bottom:1%;\r\n left:50%;\r\n width:18px;\r\n transform:translateX(-50%);\r\n background:linear-gradient(90deg,transparent,rgba(247,242,234,.035),rgba(197,178,200,.06),rgba(247,242,234,.025),transparent);\r\n filter:blur(7px);\r\n opacity:.58;\r\n }\r\n .curve svg{width:100%;height:100%;overflow:visible;display:block}\r\n .curve .seam-soft{fill:none;stroke:rgba(197,178,200,.20);stroke-width:2.6;vector-effect:non-scaling-stroke;filter:blur(2px)}\r\n .curve .seam-line{fill:none;stroke:rgba(247,242,234,.34);stroke-width:.72;vector-effect:non-scaling-stroke}\r\n .split:hover + .curve{opacity:.72;filter:drop-shadow(0 0 16px rgba(197,178,200,.10))}\r\n\r\n .curve-mobile{display:none}\r\n\r\n .scroll-cue{position:absolute;z-index:22;bottom:28px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(247,242,234,.46);display:flex;align-items:center;gap:12px}\r\n .scroll-cue::before{content:\"\";display:block;width:44px;height:1px;background:rgba(247,242,234,.26)}\r\n\r\n \/* click transition: blur out + soft liquid membrane + deliberate scroll *\/\r\n .click-veil{\r\n position:absolute;z-index:32;inset:-20%;pointer-events:none;opacity:0;filter:blur(18px);\r\n transform:translate3d(-18%,14%,0) scale(.78) rotate(-8deg);\r\n background:radial-gradient(ellipse at 42% 50%,rgba(247,242,234,.90) 0 10%,rgba(197,178,200,.58) 24%,rgba(95,36,104,.46) 42%,rgba(43,20,47,.12) 63%,transparent 73%);\r\n mix-blend-mode:screen\r\n }\r\n .hero.is-transitioning .click-veil{animation:clickWater 1.95s var(--ease-lux) both}\r\n @keyframes clickWater{\r\n 0%{opacity:0;transform:translate3d(-18%,14%,0) scale(.78) rotate(-8deg)}\r\n 28%{opacity:.70}\r\n 65%{opacity:.34}\r\n 100%{opacity:0;transform:translate3d(38%,-10%,0) scale(1.55) rotate(4deg)}\r\n }\r\n .hero.is-transitioning .panel-content,.hero.is-transitioning .hero-header,.hero.is-transitioning .curve,.hero.is-transitioning .curve-mobile,.hero.is-transitioning .scroll-cue{\r\n opacity:.16;filter:blur(11px);transition:opacity .9s var(--ease-lux),filter .9s var(--ease-lux)\r\n }\r\n .hero.is-transitioning .figure{filter:blur(5px) drop-shadow(0 18px 34px rgba(23,19,23,.18));transform:scale(1.01);transition:filter 1s var(--ease-lux),transform 1s var(--ease-lux)}\r\n\r\n .load-curtain{\r\n position:absolute;z-index:80;inset:0;pointer-events:none;\r\n background:radial-gradient(75% 66% at 50% 55%,rgba(95,36,104,.84),rgba(43,20,47,.98) 70%),var(--aubergine);\r\n transform-origin:50% 0;animation:curtain 1.9s .05s var(--ease-lux) forwards\r\n }\r\n @keyframes curtain{0%{opacity:1;transform:scaleY(1)}58%{opacity:.98}100%{opacity:0;transform:scaleY(.02)}}\r\n\r\n @media (max-width:900px){\r\n .headline{font-size:clamp(48px,6.5vw,84px)}\r\n .figure{width:min(76%,530px)}\r\n }\r\n\r\n @media (max-width:800px){\r\n \/* MOBILE IS ART-DIRECTED, NOT A SHRUNK DESKTOP LAYOUT. *\/\r\n .hero{\r\n min-height:100svh;\r\n }\r\n\r\n .hero-header{\r\n min-height:68px;\r\n padding:15px 16px;\r\n grid-template-columns:1fr auto 1fr;\r\n }\r\n .header-left{display:none}\r\n .header-right{gap:10px}\r\n .header-right .header-link:first-child{display:none}\r\n .header-right{font-size:10px;letter-spacing:.14em}\r\n .brand{min-width:0}\r\n .brand img{width:min(132px,38vw)}\r\n .brand-fallback{font-size:11px}\r\n .brand-fallback__mark{width:33px;font-size:19px}\r\n\r\n \/* Keep both choices visible in the first viewport. *\/\r\n .split{\r\n grid-template-columns:1fr;\r\n grid-template-rows:1fr 1fr;\r\n }\r\n\r\n .panel{\r\n min-height:0;\r\n overflow:hidden;\r\n }\r\n\r\n \/* Mobile subjects are intentionally pushed to opposite outer edges\r\n to reserve a clean typographic column inside each half. *\/\r\n .figure{\r\n bottom:0;\r\n max-height:91%;\r\n height:auto;\r\n filter:blur(0) drop-shadow(0 14px 28px rgba(23,19,23,.22));\r\n }\r\n .panel--dental .figure{\r\n left:-13%;\r\n right:auto;\r\n width:min(72%,340px);\r\n max-height:91%;\r\n }\r\n .panel--hair .figure{\r\n right:-9%;\r\n left:auto;\r\n width:min(67%,320px);\r\n max-height:91%;\r\n }\r\n\r\n .subject-bloom{\r\n width:56%;\r\n bottom:10%;\r\n filter:blur(34px);\r\n opacity:.18;\r\n }\r\n .panel--dental .subject-bloom{left:-4%}\r\n .panel--hair .subject-bloom{right:-2%}\r\n\r\n \/* Two clean mirrored text columns. Dental = right, Hair = left. *\/\r\n .panel-content{\r\n top:50%;\r\n bottom:auto;\r\n width:47%;\r\n padding:0;\r\n transform:translateY(-44%);\r\n animation:none;\r\n transition:opacity 1.15s var(--ease-lux),filter 1.15s var(--ease-lux);\r\n }\r\n .panel--dental .panel-content{\r\n left:auto;\r\n right:16px;\r\n width:47%;\r\n text-align:left;\r\n }\r\n .panel--hair .panel-content{\r\n left:18px;\r\n right:auto;\r\n width:47%;\r\n text-align:left;\r\n align-items:flex-start;\r\n }\r\n\r\n .eyebrow{\r\n gap:8px;\r\n margin-bottom:8px;\r\n font-size:8px;\r\n line-height:1.25;\r\n letter-spacing:.16em;\r\n }\r\n .eyebrow::before{width:22px}\r\n .panel--hair .eyebrow{flex-direction:row}\r\n\r\n .headline{\r\n font-size:clamp(37px,10.2vw,48px);\r\n line-height:.80;\r\n letter-spacing:-.05em;\r\n max-width:6.1ch;\r\n text-shadow:0 3px 15px rgba(23,19,23,.18);\r\n }\r\n\r\n .sub{display:none}\r\n\r\n .treatment-list{\r\n margin-top:12px;\r\n gap:5px 9px;\r\n max-width:100%;\r\n opacity:.90;\r\n font-size:7px;\r\n line-height:1.35;\r\n letter-spacing:.12em;\r\n }\r\n .panel--hair .treatment-list{justify-content:flex-start}\r\n\r\n .enter-link{\r\n margin-top:13px;\r\n gap:8px;\r\n font-size:8px;\r\n letter-spacing:.13em;\r\n }\r\n .enter-link__disc{\r\n width:31px;\r\n height:31px;\r\n font-size:10px;\r\n }\r\n\r\n\r\n \/* Mobile uses its own horizontal seam instead of rotating\/compressing the desktop SVG. *\/\r\n .curve{display:none}\r\n .curve-mobile{\r\n display:block;\r\n position:absolute;\r\n z-index:20;\r\n left:-2%;\r\n top:50%;\r\n width:104%;\r\n height:54px;\r\n transform:translateY(-50%);\r\n pointer-events:none;\r\n opacity:.56;\r\n filter:drop-shadow(0 0 10px rgba(197,178,200,.07));\r\n }\r\n .curve-mobile::before{\r\n content:\"\";\r\n position:absolute;\r\n left:1.5%;\r\n right:1.5%;\r\n top:50%;\r\n height:16px;\r\n transform:translateY(-50%);\r\n background:linear-gradient(180deg,transparent,rgba(247,242,234,.03),rgba(197,178,200,.05),rgba(247,242,234,.02),transparent);\r\n filter:blur(6px);\r\n }\r\n .curve-mobile svg{width:100%;height:100%;display:block;overflow:visible}\r\n .curve-mobile .seam-soft{fill:none;stroke:rgba(197,178,200,.18);stroke-width:2.2;vector-effect:non-scaling-stroke;filter:blur(2px)}\r\n .curve-mobile .seam-line{fill:none;stroke:rgba(247,242,234,.30);stroke-width:.66;vector-effect:non-scaling-stroke}\r\n .scroll-cue{display:none}\r\n\r\n \/* Hover effects are disabled on touch-sized layouts; no accidental faded state. *\/\r\n .split:hover .panel:not(:hover) .figure{\r\n filter:blur(0) drop-shadow(0 14px 28px rgba(23,19,23,.22));\r\n opacity:1;\r\n }\r\n .split:hover .panel:not(:hover) .panel-content{opacity:1;filter:blur(0)}\r\n .split:hover .panel:not(:hover) .panel-shade{opacity:1;filter:none}\r\n .split:hover .panel:not(:hover) .headline{color:var(--ivory)}\r\n .split:hover .panel:not(:hover) .sub,\r\n .split:hover .panel:not(:hover) .treatment-list,\r\n .split:hover .panel:not(:hover) .enter-link,\r\n .split:hover .panel:not(:hover) .eyebrow{color:inherit}\r\n\r\n .panel:hover .figure,\r\n .panel:focus-visible .figure{transform:none}\r\n .panel:hover .panel-content,\r\n .panel:focus-visible .panel-content{transform:translateY(-44%)}\r\n .water-sheen{display:none}\r\n }\r\n\r\n @media (max-width:430px){\r\n .hero-header{padding:13px 12px}\r\n .brand img{width:min(118px,37vw)}\r\n\r\n .panel--dental .figure{\r\n left:-17%;\r\n width:76%;\r\n }\r\n .panel--hair .figure{\r\n right:-13%;\r\n width:71%;\r\n }\r\n\r\n .panel--dental .panel-content{right:12px;width:49%}\r\n .panel--hair .panel-content{left:14px;width:49%}\r\n\r\n .headline{\r\n font-size:clamp(34px,9.8vw,42px);\r\n max-width:6.25ch;\r\n }\r\n .eyebrow{font-size:7.5px}\r\n .treatment-list{font-size:6.7px;gap:4px 8px}\r\n .enter-link{font-size:7.6px}\r\n .enter-link__disc{width:29px;height:29px}\r\n }\r\n\r\n @media (prefers-reduced-motion:reduce){\r\n *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}\r\n .water-sheen{display:none}.hero-ambient{animation:none}\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <section class=\"hero\" id=\"top\" aria-label=\"Lamina Clinic treatment areas\">\r\n <div class=\"hero-ambient\" aria-hidden=\"true\"><\/div>\r\n <div class=\"load-curtain\" aria-hidden=\"true\"><\/div>\r\n\r\n <header class=\"hero-header\">\r\n <div class=\"header-left\">Istanbul \u00b7 T\u00fcrkiye<\/div>\r\n <a class=\"brand\" href=\"#top\" aria-label=\"Lamina Clinic home\">\r\n <img fetchpriority=\"high\" decoding=\"async\" src=\"assets\/lamina-logo-light.png\" width=\"420\" height=\"140\" alt=\"Lamina Clinic\" onerror=\"this.style.display='none';this.nextElementSibling.style.display='flex';\" \/>\r\n <span class=\"brand-fallback\" style=\"display:none;\"><span class=\"brand-fallback__mark\">L<\/span><span>Lamina<\/span><\/span>\r\n <\/a>\r\n <nav class=\"header-right\" aria-label=\"Primary\">\r\n <a class=\"header-link\" href=\"#consultation\">Consultation<\/a>\r\n <a class=\"header-link\" href=\"#\" lang=\"en\">EN<\/a>\r\n <\/nav>\r\n <\/header>\r\n\r\n <div class=\"split\" id=\"splitHero\">\r\n <a class=\"panel panel--dental\" href=\"#lamina-service-track\" data-target=\"lamina-service-track\" aria-label=\"Explore Dental Aesthetics\" onclick=\"return window.laminaHeroGoToServiceTrack ? window.laminaHeroGoToServiceTrack(event) : false;\">\r\n <div class=\"panel-bg\"><\/div>\r\n <div class=\"panel-shade\"><\/div>\r\n <div class=\"subject-bloom\"><\/div>\r\n <div class=\"water-sheen\"><\/div>\r\n <div class=\"figure-wrap\" aria-hidden=\"true\">\r\n <img fetchpriority=\"high\" class=\"figure\"\r\n src=\"https:\/\/yellowgreen-woodcock-240696.hostingersite.com\/wp-content\/uploads\/2026\/09\/smiling-woman-posing-with-hands-near-face-2026-03-27-01-44-11-utc-scaled.webp\"\r\n width=\"1707\" height=\"2560\" alt=\"\" loading=\"eager\" decoding=\"async\" fetchpriority=\"high\" \/>\r\n <\/div>\r\n <div class=\"panel-content\">\r\n <div class=\"eyebrow\"><span>Dental Aesthetics<\/span><\/div>\r\n <h1 class=\"headline\">A smile, <em>refined.<\/em><\/h1>\r\n <p class=\"sub\">Personalised dental aesthetics shaped around proportion, expression and natural confidence.<\/p>\r\n <div class=\"treatment-list\"><span>Veneers<\/span><span>Implants<\/span><span>Smile Design<\/span><span>Zirconium<\/span><\/div>\r\n <span class=\"enter-link\">Explore dental <span class=\"enter-link__disc\" aria-hidden=\"true\">\u2198<\/span><\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <a class=\"panel panel--hair\" href=\"#lamina-service-track\" data-target=\"lamina-service-track\" aria-label=\"Explore Hair Restoration\" onclick=\"return window.laminaHeroGoToServiceTrack ? window.laminaHeroGoToServiceTrack(event) : false;\">\r\n <div class=\"panel-bg\"><\/div>\r\n <div class=\"panel-shade\"><\/div>\r\n <div class=\"subject-bloom\"><\/div>\r\n <div class=\"water-sheen\"><\/div>\r\n <div class=\"figure-wrap\" aria-hidden=\"true\">\r\n <img fetchpriority=\"high\" class=\"figure\"\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/smiling-man-in-a-blue-shirt-posing-2026-03-25-03-58-07-utc-scaled-e1788953885406.webp\"\r\n width=\"1707\" height=\"2560\" alt=\"\" loading=\"eager\" decoding=\"async\" fetchpriority=\"high\" \/>\r\n <\/div>\r\n <div class=\"panel-content\">\r\n <div class=\"eyebrow\"><span>Hair Restoration<\/span><\/div>\r\n <h2 class=\"headline\">Restore <em>naturally.<\/em><\/h2>\r\n <p class=\"sub\">A considered approach to hair restoration, from medical assessment to natural-looking design.<\/p>\r\n <div class=\"treatment-list\"><span>DHI<\/span><span>Sapphire FUE<\/span><span>FUE<\/span><\/div>\r\n <span class=\"enter-link\">Explore hair <span class=\"enter-link__disc\" aria-hidden=\"true\">\u2199<\/span><\/span>\r\n <\/div>\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"curve\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 42 1000\" preserveAspectRatio=\"none\">\r\n <path class=\"seam-soft\" d=\"M21,-20 C15,145 28,308 20,500 C13,690 28,845 21,1020\"\/>\r\n <path class=\"seam-line\" d=\"M21,-20 C15,145 28,308 20,500 C13,690 28,845 21,1020\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"curve-mobile\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 1000 54\" preserveAspectRatio=\"none\">\r\n <path class=\"seam-soft\" d=\"M-20,28 C160,18 328,38 500,27 C676,16 838,37 1020,27\"\/>\r\n <path class=\"seam-line\" d=\"M-20,28 C160,18 328,38 500,27 C676,16 838,37 1020,27\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"scroll-cue\" aria-hidden=\"true\">Choose your path<\/div>\r\n <\/section>\r\n\r\n <script>\r\n (()=>{\r\n const hero=document.querySelector('.hero');\r\n if(!hero)return;\r\n\r\n let raf=null;\r\n let cleanupTimer=null;\r\n\r\n const ease=t=>\r\n t<.5\r\n ? 8*t*t*t*t\r\n : 1-Math.pow(-2*t+2,4)\/2;\r\n\r\n const currentY=()=>(\r\n window.scrollY ||\r\n window.pageYOffset ||\r\n document.documentElement.scrollTop ||\r\n 0\r\n );\r\n\r\n function luxuryScrollTo(targetY,duration=1650){\r\n const startY=currentY();\r\n const distance=targetY-startY;\r\n const started=performance.now();\r\n\r\n if(raf){\r\n cancelAnimationFrame(raf);\r\n raf=null;\r\n }\r\n\r\n const tick=now=>{\r\n const progress=Math.min(\r\n Math.max((now-started)\/duration,0),\r\n 1\r\n );\r\n\r\n window.scrollTo(\r\n 0,\r\n startY + distance * ease(progress)\r\n );\r\n\r\n if(progress<1){\r\n raf=requestAnimationFrame(tick);\r\n }else{\r\n raf=null;\r\n }\r\n };\r\n\r\n raf=requestAnimationFrame(tick);\r\n }\r\n\r\n function goToServiceTrack(event){\r\n if(event){\r\n event.preventDefault();\r\n event.stopPropagation();\r\n event.stopImmediatePropagation?.();\r\n }\r\n\r\n const target=document.getElementById('lamina-service-track');\r\n if(!target)return false;\r\n\r\n hero.classList.add('is-transitioning');\r\n\r\n \/*\r\n Re-measure at the moment of navigation so Elementor\/layout\r\n changes cannot give us a stale destination.\r\n *\/\r\n requestAnimationFrame(()=>{\r\n requestAnimationFrame(()=>{\r\n const targetY=\r\n target.getBoundingClientRect().top +\r\n currentY();\r\n\r\n luxuryScrollTo(targetY,1650);\r\n });\r\n });\r\n\r\n clearTimeout(cleanupTimer);\r\n cleanupTimer=setTimeout(()=>{\r\n hero.classList.remove('is-transitioning');\r\n },1800);\r\n\r\n return false;\r\n }\r\n\r\n \/*\r\n Capture phase prevents Elementor\/theme\/native anchor handling\r\n from performing an instant #hash jump first.\r\n *\/\r\n hero.addEventListener(\r\n 'click',\r\n event=>{\r\n const panel=event.target.closest('.panel[data-target]');\r\n if(!panel || !hero.contains(panel))return;\r\n goToServiceTrack(event);\r\n },\r\n true\r\n );\r\n\r\n window.laminaHeroGoToServiceTrack=goToServiceTrack;\r\n })();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e908d63 e-con-full e-flex e-con e-parent\" data-id=\"e908d63\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f1ee7b6 elementor-widget elementor-widget-html\" data-id=\"f1ee7b6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\r\nLAMINA CLINIC \u2014 SECTION 02\r\nINTERNATIONAL CARE \u2014 THE CARE INDEX\r\nProduction-oriented implementation from the supplied master brief.\r\n\r\nFactual capabilities used:\r\n01 Personalised Planning\r\n02 International Patient Support\r\n03 VIP Transfer\r\n04 Partner Hotel Options\r\n05 Multilingual Support\r\n\r\nNo statistics, borrowed accreditations, hotel logos, unverified\r\nlanguages, guarantees, partner claims, or decorative photography.\r\n========================================================= -->\r\n\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500&family=Manrope:wght@400;500;600&display=swap');\r\n\r\n#lamina-care-index{\r\n --lci-ivory:#F7F2EA;\r\n --lci-ivory-soft:#F2EBE8;\r\n --lci-stone:#E8E1E4;\r\n --lci-aubergine:#2B142F;\r\n --lci-plum:#5F2468;\r\n --lci-orchid:#94709A;\r\n --lci-lilac:#C5B2C8;\r\n --lci-champagne:#D8C4A1;\r\n --lci-ease:cubic-bezier(.16,.70,.18,1);\r\n\r\n position:relative;\r\n width:100%;\r\n overflow:hidden;\r\n color:var(--lci-aubergine);\r\n\r\n background:\r\n radial-gradient(\r\n 70% 54% at 94% 0%,\r\n rgba(216,196,161,.07),\r\n transparent 74%\r\n ),\r\n linear-gradient(\r\n 180deg,\r\n var(--lci-ivory) 0%,\r\n #F5EFE9 100%\r\n );\r\n\r\n font-family:\"Manrope\",system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;\r\n}\r\n\r\n#lamina-care-index *,\r\n#lamina-care-index *::before,\r\n#lamina-care-index *::after{\r\n box-sizing:border-box;\r\n}\r\n\r\n#lamina-care-index ::selection{\r\n background:var(--lci-plum);\r\n color:var(--lci-ivory);\r\n}\r\n\r\n.lci__shell{\r\n width:min(100%,1580px);\r\n margin-inline:auto;\r\n padding:\r\n clamp(68px,7.4vh,100px)\r\n clamp(20px,4.2vw,72px)\r\n clamp(70px,7.7vh,106px);\r\n}\r\n\r\n\/* =========================================================\r\n HEADER\r\n ========================================================= *\/\r\n\r\n.lci__header{\r\n display:grid;\r\n grid-template-columns:minmax(0,.60fr) minmax(290px,.40fr);\r\n gap:clamp(52px,7.8vw,128px);\r\n align-items:end;\r\n margin-block-end:clamp(50px,6.6vh,76px);\r\n}\r\n\r\n.lci__eyebrow{\r\n margin:0 0 16px;\r\n color:rgba(95,36,104,.86);\r\n font-size:clamp(11px,.72vw,13px);\r\n line-height:1.2;\r\n font-weight:600;\r\n letter-spacing:.17em;\r\n text-transform:uppercase;\r\n}\r\n\r\n#lamina-care-index .lci__title{\r\n margin:0 !important;\r\n max-width:9.3ch;\r\n font-family:\"Cormorant Garamond\",Georgia,serif !important;\r\n font-size:clamp(62px,6vw,108px) !important;\r\n line-height:.90 !important;\r\n font-weight:400 !important;\r\n letter-spacing:-.048em !important;\r\n text-transform:none !important;\r\n text-decoration:none !important;\r\n text-shadow:none !important;\r\n background:transparent !important;\r\n}\r\n\r\n#lamina-care-index .lci__title-line{\r\n display:block;\r\n font-family:\"Cormorant Garamond\",Georgia,serif !important;\r\n font-size:inherit !important;\r\n line-height:inherit !important;\r\n font-weight:400 !important;\r\n letter-spacing:inherit !important;\r\n text-transform:none !important;\r\n text-decoration:none !important;\r\n text-shadow:none !important;\r\n background:transparent !important;\r\n}\r\n\r\n#lamina-care-index .lci__title-line--roman{\r\n color:var(--lci-aubergine) !important;\r\n -webkit-text-fill-color:var(--lci-aubergine) !important;\r\n font-style:normal !important;\r\n}\r\n\r\n#lamina-care-index .lci__title-line--italic{\r\n color:var(--lci-orchid) !important;\r\n -webkit-text-fill-color:var(--lci-orchid) !important;\r\n font-style:italic !important;\r\n}\r\n\r\n.lci__intro{\r\n position:relative;\r\n z-index:2;\r\n margin:0 0 clamp(6px,1vh,12px);\r\n max-width:39ch;\r\n color:#3D2241 !important;\r\n -webkit-text-fill-color:#3D2241 !important;\r\n font-size:clamp(16px,1.02vw,18px);\r\n line-height:1.72;\r\n opacity:1;\r\n mix-blend-mode:normal;\r\n text-shadow:none;\r\n}\r\n\r\n\/* Contrast hardening: keep header copy readable even when theme\/Elementor\r\n injects global paragraph or text-fill styles. *\/\r\n#lamina-care-index .lci__intro,\r\n#lamina-care-index .lci__intro *{\r\n color:#3D2241 !important;\r\n -webkit-text-fill-color:#3D2241 !important;\r\n background-color:transparent !important;\r\n}\r\n\r\n\/* =========================================================\r\n FIVE-PART CARE INDEX\r\n One continuous information canvas \u2014 not cards.\r\n ========================================================= *\/\r\n\r\n.lci__index{\r\n position:relative;\r\n display:grid;\r\n grid-template-columns:repeat(5,minmax(0,1fr));\r\n border-block:\r\n 1px solid rgba(43,20,47,.11);\r\n}\r\n\r\n\/* One shared tonal field only. Constant geometry; translate only. *\/\r\n.lci__focus-field{\r\n position:absolute;\r\n z-index:0;\r\n inset-block:14px;\r\n inset-inline-start:0;\r\n inline-size:20%;\r\n opacity:0;\r\n pointer-events:none;\r\n\r\n background:rgba(95,36,104,.045);\r\n\r\n transform:\r\n translate3d(\r\n var(--lci-focus-x,0px),\r\n 0,\r\n 0\r\n );\r\n\r\n transition:\r\n transform .76s var(--lci-ease),\r\n opacity .60s ease;\r\n}\r\n\r\n.lci__item{\r\n position:relative;\r\n z-index:1;\r\n min-width:0;\r\n padding:\r\n clamp(28px,3.1vh,40px)\r\n clamp(18px,1.7vw,28px)\r\n clamp(32px,3.8vh,47px);\r\n\r\n background:transparent;\r\n}\r\n\r\n.lci__item + .lci__item::before{\r\n content:\"\";\r\n position:absolute;\r\n inset-block:22px;\r\n inset-inline-start:0;\r\n inline-size:1px;\r\n background:rgba(43,20,47,.12);\r\n}\r\n\r\n.lci__item-inner{\r\n display:flex;\r\n min-height:clamp(232px,27vh,316px);\r\n flex-direction:column;\r\n}\r\n\r\n.lci__number{\r\n display:block;\r\n margin-block-end:clamp(32px,4vh,52px);\r\n color:rgba(95,36,104,.64);\r\n font-size:clamp(11px,.69vw,12px);\r\n line-height:1;\r\n font-weight:600;\r\n letter-spacing:.15em;\r\n transition:\r\n color .34s ease,\r\n opacity .34s ease;\r\n}\r\n\r\n.lci__item-title{\r\n margin:0;\r\n max-width:16ch;\r\n color:rgba(43,20,47,.80);\r\n font-size:clamp(15px,1.02vw,18px);\r\n line-height:1.34;\r\n font-weight:600;\r\n letter-spacing:.065em;\r\n text-transform:uppercase;\r\n transition:\r\n color .34s ease,\r\n opacity .34s ease;\r\n}\r\n\r\n.lci__description{\r\n margin:auto 0 0;\r\n padding-block-start:clamp(33px,4vh,50px);\r\n max-width:25ch;\r\n color:rgba(43,20,47,.62);\r\n font-size:clamp(14.5px,.92vw,16px);\r\n line-height:1.62;\r\n transition:\r\n color .34s ease,\r\n opacity .34s ease;\r\n}\r\n\r\n\/* Desktop fine-pointer focus treatment.\r\n Geometry never changes. No text movement. *\/\r\n@media (hover:hover) and (pointer:fine) and (min-width:1180px){\r\n\r\n .lci__index.has-focus .lci__item:not(.is-focused) .lci__number{\r\n color:rgba(95,36,104,.44);\r\n }\r\n\r\n .lci__index.has-focus .lci__item:not(.is-focused) .lci__item-title{\r\n color:rgba(43,20,47,.60);\r\n }\r\n\r\n .lci__index.has-focus .lci__item:not(.is-focused) .lci__description{\r\n color:rgba(43,20,47,.48);\r\n }\r\n\r\n .lci__item.is-focused .lci__number{\r\n color:var(--lci-plum);\r\n }\r\n\r\n .lci__item.is-focused .lci__item-title{\r\n color:var(--lci-aubergine);\r\n }\r\n\r\n .lci__item.is-focused .lci__description{\r\n color:rgba(43,20,47,.77);\r\n }\r\n\r\n}\r\n\r\n\/* =========================================================\r\n ENTRANCE COMPOSITION ENHANCEMENT\r\n Content remains visible without JS.\r\n ========================================================= *\/\r\n\r\n#lamina-care-index.has-entry-enhancement .lci__entry{\r\n --lci-entry-opacity:1;\r\n --lci-entry-y:0px;\r\n\r\n opacity:var(--lci-entry-opacity);\r\n transform:translate3d(0,var(--lci-entry-y),0);\r\n}\r\n\r\n#lamina-care-index.has-entry-enhancement .lci__item::before{\r\n transform:scaleY(var(--lci-separator-scale,1));\r\n transform-origin:50% 100%;\r\n}\r\n\r\n\/* =========================================================\r\n REUSABLE LAMINA FOCUS-DEPTH LAYERS\r\n\r\n ONE-WAY SCROLL DEPTH:\r\n - current content: sharp\r\n - upcoming content: sharp\r\n - already-passed content above the reading zone: softens gradually\r\n - scrolling back down restores sharpness\r\n\r\n Mobile remains exempt from scroll-driven blur.\r\n ========================================================= *\/\r\n\r\n#lamina-care-index [data-focus-layer]{\r\n --lci-depth-blur:0px;\r\n --lci-depth-opacity:1;\r\n --lci-depth-y:0px;\r\n\r\n filter:blur(var(--lci-depth-blur));\r\n opacity:var(--lci-depth-opacity);\r\n translate:0 var(--lci-depth-y);\r\n}\r\n\r\n\/* While the pointer is actively using a still-relevant item,\r\n that item remains sharp. *\/\r\n#lamina-care-index[data-lci-pointer-active=\"true\"]\r\n.lci__item.is-focused [data-focus-layer]{\r\n filter:none !important;\r\n opacity:1 !important;\r\n translate:0 0 !important;\r\n}\r\n\r\n\/* =========================================================\r\n TABLET \u2014 deliberate 3 + 2 editorial grid\r\n ========================================================= *\/\r\n\r\n@media (min-width:761px) and (max-width:1179px){\r\n\r\n .lci__header{\r\n grid-template-columns:minmax(0,.58fr) minmax(260px,.42fr);\r\n gap:44px;\r\n }\r\n\r\n .lci__index{\r\n grid-template-columns:repeat(6,minmax(0,1fr));\r\n }\r\n\r\n .lci__item{\r\n grid-column:span 2;\r\n }\r\n\r\n .lci__item:nth-of-type(4){\r\n grid-column:1 \/ span 3;\r\n border-block-start:1px solid rgba(43,20,47,.11);\r\n }\r\n\r\n .lci__item:nth-of-type(5){\r\n grid-column:4 \/ span 3;\r\n border-block-start:1px solid rgba(43,20,47,.11);\r\n }\r\n\r\n .lci__item:nth-of-type(4)::before{\r\n display:none;\r\n }\r\n\r\n .lci__focus-field{\r\n display:none;\r\n }\r\n\r\n}\r\n\r\n\/* =========================================================\r\n MOBILE \u2014 five full editorial rows\r\n ========================================================= *\/\r\n\r\n@media (max-width:760px){\r\n\r\n .lci__shell{\r\n padding:70px 20px 78px;\r\n }\r\n\r\n .lci__header{\r\n display:block;\r\n margin-block-end:40px;\r\n }\r\n\r\n #lamina-care-index .lci__title{\r\n max-width:8.5ch;\r\n font-size:clamp(48px,14vw,68px) !important;\r\n line-height:.91 !important;\r\n }\r\n\r\n .lci__intro{\r\n margin-block-start:24px;\r\n max-width:35ch;\r\n font-size:15px;\r\n line-height:1.66;\r\n }\r\n\r\n .lci__index{\r\n display:block;\r\n border-block:\r\n 1px solid rgba(43,20,47,.12);\r\n }\r\n\r\n .lci__focus-field{\r\n display:none;\r\n }\r\n\r\n .lci__item{\r\n padding:27px 2px 30px;\r\n }\r\n\r\n .lci__item + .lci__item{\r\n border-block-start:1px solid rgba(43,20,47,.12);\r\n }\r\n\r\n .lci__item + .lci__item::before{\r\n display:none;\r\n }\r\n\r\n .lci__item-inner{\r\n min-height:0;\r\n }\r\n\r\n .lci__number{\r\n margin-block-end:17px;\r\n font-size:11px;\r\n }\r\n\r\n .lci__item-title{\r\n max-width:24ch;\r\n font-size:14px;\r\n line-height:1.32;\r\n }\r\n\r\n .lci__description{\r\n margin-block-start:17px;\r\n padding-block-start:0;\r\n max-width:36ch;\r\n font-size:14px;\r\n line-height:1.62;\r\n }\r\n\r\n \/* Locked mobile rule: never apply scroll-position blur. *\/\r\n #lamina-care-index [data-focus-layer]{\r\n --lci-depth-blur:0px !important;\r\n --lci-depth-opacity:1 !important;\r\n --lci-depth-y:0px !important;\r\n filter:none !important;\r\n opacity:1 !important;\r\n translate:0 0 !important;\r\n }\r\n\r\n}\r\n\r\n\/* =========================================================\r\n REDUCED MOTION\r\n ========================================================= *\/\r\n\r\n@media (prefers-reduced-motion:reduce){\r\n\r\n #lamina-care-index [data-focus-layer]{\r\n filter:none !important;\r\n translate:0 0 !important;\r\n }\r\n\r\n #lamina-care-index.has-entry-enhancement .lci__entry{\r\n transform:none !important;\r\n }\r\n\r\n .lci__focus-field,\r\n .lci__number,\r\n .lci__item-title,\r\n .lci__description{\r\n transition:none !important;\r\n }\r\n\r\n}\r\n<\/style>\r\n\r\n\r\n<section\r\n id=\"lamina-care-index\"\r\n aria-labelledby=\"lamina-care-index-title\"\r\n data-lamina-focus-section\r\n data-lamina-exit-focus\r\n data-focus-profile=\"international-care\"\r\n>\r\n\r\n <div class=\"lci__shell\">\r\n\r\n <header class=\"lci__header\">\r\n\r\n <div>\r\n\r\n <p\r\n class=\"lci__eyebrow lci__entry\"\r\n data-focus-layer=\"heading\"\r\n data-entry-order=\"0\"\r\n >\r\n INTERNATIONAL CARE\r\n <\/p>\r\n\r\n <h2\r\n class=\"lci__title\"\r\n id=\"lamina-care-index-title\"\r\n >\r\n <span\r\n class=\"lci__title-line lci__title-line--roman lci__entry\"\r\n data-focus-layer=\"heading\"\r\n data-entry-order=\"1\"\r\n >\r\n Care that starts\r\n <\/span>\r\n\r\n <span\r\n class=\"lci__title-line lci__title-line--italic lci__entry\"\r\n data-focus-layer=\"heading\"\r\n data-entry-order=\"2\"\r\n >\r\n before you arrive.\r\n <\/span>\r\n <\/h2>\r\n\r\n <\/div>\r\n\r\n\r\n <p\r\n class=\"lci__intro lci__entry\"\r\n data-focus-layer=\"copy\"\r\n data-entry-order=\"3\"\r\n >\r\n Personalised planning, international-patient assistance, VIP transfer,\r\n partner hotel options and multilingual support\u2014coordinated around your\r\n visit to Istanbul.\r\n <\/p>\r\n\r\n <\/header>\r\n\r\n\r\n <div\r\n class=\"lci__index\"\r\n data-care-index\r\n aria-label=\"International care capabilities\"\r\n >\r\n\r\n <div\r\n class=\"lci__focus-field\"\r\n aria-hidden=\"true\"\r\n ><\/div>\r\n\r\n\r\n <article\r\n class=\"lci__item lci__entry\"\r\n data-care-item\r\n data-entry-order=\"4\"\r\n >\r\n <div\r\n class=\"lci__item-inner\"\r\n data-focus-layer=\"metadata\"\r\n >\r\n <span class=\"lci__number\">01<\/span>\r\n\r\n <h3 class=\"lci__item-title\">\r\n Personalised<br>\r\n Planning\r\n <\/h3>\r\n\r\n <p class=\"lci__description\">\r\n Your case is considered individually so the next steps can be planned around your treatment needs.\r\n <\/p>\r\n <\/div>\r\n <\/article>\r\n\r\n\r\n <article\r\n class=\"lci__item lci__entry\"\r\n data-care-item\r\n data-entry-order=\"5\"\r\n >\r\n <div\r\n class=\"lci__item-inner\"\r\n data-focus-layer=\"metadata\"\r\n >\r\n <span class=\"lci__number\">02<\/span>\r\n\r\n <h3 class=\"lci__item-title\">\r\n International<br>\r\n Patient Support\r\n <\/h3>\r\n\r\n <p class=\"lci__description\">\r\n Support for coordinating the practical steps around travelling to Istanbul for treatment.\r\n <\/p>\r\n <\/div>\r\n <\/article>\r\n\r\n\r\n <article\r\n class=\"lci__item lci__entry\"\r\n data-care-item\r\n data-entry-order=\"6\"\r\n >\r\n <div\r\n class=\"lci__item-inner\"\r\n data-focus-layer=\"metadata\"\r\n >\r\n <span class=\"lci__number\">03<\/span>\r\n\r\n <h3 class=\"lci__item-title\">\r\n VIP<br>\r\n Transfer\r\n <\/h3>\r\n\r\n <p class=\"lci__description\">\r\n Transfer coordination between the airport, your accommodation and the clinic where applicable.\r\n <\/p>\r\n <\/div>\r\n <\/article>\r\n\r\n\r\n <article\r\n class=\"lci__item lci__entry\"\r\n data-care-item\r\n data-entry-order=\"7\"\r\n >\r\n <div\r\n class=\"lci__item-inner\"\r\n data-focus-layer=\"media\"\r\n >\r\n <span class=\"lci__number\">04<\/span>\r\n\r\n <h3 class=\"lci__item-title\">\r\n Partner Hotel<br>\r\n Options\r\n <\/h3>\r\n\r\n <p class=\"lci__description\">\r\n Accommodation options through Lamina\u2019s partner hotel network in Istanbul.\r\n <\/p>\r\n <\/div>\r\n <\/article>\r\n\r\n\r\n <article\r\n class=\"lci__item lci__entry\"\r\n data-care-item\r\n data-entry-order=\"8\"\r\n >\r\n <div\r\n class=\"lci__item-inner\"\r\n data-focus-layer=\"media\"\r\n >\r\n <span class=\"lci__number\">05<\/span>\r\n\r\n <h3 class=\"lci__item-title\">\r\n Multilingual<br>\r\n Support\r\n <\/h3>\r\n\r\n <p class=\"lci__description\">\r\n Communication support designed to make the treatment journey clearer for international patients.\r\n <\/p>\r\n <\/div>\r\n <\/article>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<script>\r\n(() => {\r\n\r\n const root =\r\n document.getElementById(\r\n 'lamina-care-index'\r\n );\r\n\r\n\r\n if (\r\n !root ||\r\n root.dataset.careIndexReady ===\r\n 'true'\r\n ) return;\r\n\r\n\r\n root.dataset.careIndexReady =\r\n 'true';\r\n\r\n\r\n const index =\r\n root.querySelector(\r\n '[data-care-index]'\r\n );\r\n\r\n\r\n const items =\r\n [\r\n ...root.querySelectorAll(\r\n '[data-care-item]'\r\n )\r\n ];\r\n\r\n\r\n const focusField =\r\n root.querySelector(\r\n '.lci__focus-field'\r\n );\r\n\r\n\r\n const entryElements =\r\n [\r\n ...root.querySelectorAll(\r\n '[data-entry-order]'\r\n )\r\n ];\r\n\r\n\r\n if (\r\n !index ||\r\n !items.length\r\n ) return;\r\n\r\n\r\n const finePointer =\r\n window.matchMedia(\r\n '(hover:hover) and (pointer:fine)'\r\n );\r\n\r\n\r\n const reducedMotion =\r\n window.matchMedia(\r\n '(prefers-reduced-motion: reduce)'\r\n );\r\n\r\n\r\n \/* =======================================================\r\n DESKTOP MOVING FOCUS FIELD\r\n ======================================================= *\/\r\n\r\n function clearFocusField(){\r\n\r\n index.classList.remove(\r\n 'has-focus'\r\n );\r\n\r\n\r\n items.forEach(\r\n item =>\r\n item.classList.remove(\r\n 'is-focused'\r\n )\r\n );\r\n\r\n\r\n delete root.dataset.lciPointerActive;\r\n\r\n\r\n if (\r\n focusField\r\n ){\r\n\r\n focusField.style.opacity =\r\n '0';\r\n\r\n }\r\n\r\n }\r\n\r\n\r\n function focusItem(\r\n item\r\n ){\r\n\r\n if (\r\n !finePointer.matches ||\r\n window.innerWidth <\r\n 1180\r\n ) return;\r\n\r\n\r\n const indexRect =\r\n index.getBoundingClientRect();\r\n\r\n\r\n const itemRect =\r\n item.getBoundingClientRect();\r\n\r\n\r\n \/*\r\n Actual geometry is used so the focus field also behaves\r\n correctly in RTL layouts.\r\n *\/\r\n const x =\r\n itemRect.left -\r\n indexRect.left;\r\n\r\n\r\n root.dataset.lciPointerActive =\r\n 'true';\r\n\r\n\r\n index.classList.add(\r\n 'has-focus'\r\n );\r\n\r\n\r\n items.forEach(\r\n candidate => {\r\n\r\n candidate.classList.toggle(\r\n 'is-focused',\r\n candidate ===\r\n item\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n if (\r\n focusField\r\n ){\r\n\r\n focusField.style.setProperty(\r\n '--lci-focus-x',\r\n x.toFixed(\r\n 2\r\n ) +\r\n 'px'\r\n );\r\n\r\n\r\n focusField.style.opacity =\r\n '1';\r\n\r\n }\r\n\r\n }\r\n\r\n\r\n items.forEach(\r\n item => {\r\n\r\n item.addEventListener(\r\n 'pointerenter',\r\n () => {\r\n\r\n focusItem(\r\n item\r\n );\r\n\r\n },\r\n {\r\n passive:true\r\n }\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n index.addEventListener(\r\n 'pointerleave',\r\n clearFocusField,\r\n {\r\n passive:true\r\n }\r\n );\r\n\r\n\r\n \/* =======================================================\r\n ENTRY COMPOSITION\r\n Progressive enhancement only \u2014 content starts readable.\r\n ======================================================= *\/\r\n\r\n function prepareEntry(){\r\n\r\n if (\r\n reducedMotion.matches\r\n ) return;\r\n\r\n\r\n root.classList.add(\r\n 'has-entry-enhancement'\r\n );\r\n\r\n\r\n entryElements.forEach(\r\n element => {\r\n\r\n element.style.setProperty(\r\n '--lci-entry-opacity',\r\n '0'\r\n );\r\n\r\n\r\n element.style.setProperty(\r\n '--lci-entry-y',\r\n '10px'\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n items.forEach(\r\n item => {\r\n\r\n item.style.setProperty(\r\n '--lci-separator-scale',\r\n '0'\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n function resolveEntry(){\r\n\r\n entryElements.forEach(\r\n element => {\r\n\r\n const order =\r\n Number(\r\n element.dataset.entryOrder ||\r\n 0\r\n );\r\n\r\n\r\n element.animate(\r\n [\r\n {\r\n opacity:0,\r\n transform:'translate3d(0,10px,0)'\r\n },\r\n {\r\n opacity:1,\r\n transform:'translate3d(0,0,0)'\r\n }\r\n ],\r\n {\r\n duration:\r\n 880 +\r\n Math.min(\r\n order,\r\n 8\r\n ) *\r\n 42,\r\n delay:\r\n order *\r\n 58,\r\n easing:\r\n 'cubic-bezier(.16,.70,.18,1)',\r\n fill:'forwards'\r\n }\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n items.forEach(\r\n (\r\n item,\r\n index\r\n ) => {\r\n\r\n window.setTimeout(\r\n () => {\r\n\r\n item.style.setProperty(\r\n '--lci-separator-scale',\r\n '1'\r\n );\r\n\r\n },\r\n 210 +\r\n index *\r\n 62\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n prepareEntry();\r\n\r\n\r\n if (\r\n root.classList.contains(\r\n 'has-entry-enhancement'\r\n ) &&\r\n 'IntersectionObserver' in window\r\n ){\r\n\r\n const entryObserver =\r\n new IntersectionObserver(\r\n entries => {\r\n\r\n entries.forEach(\r\n entry => {\r\n\r\n if (\r\n !entry.isIntersecting\r\n ) return;\r\n\r\n\r\n resolveEntry();\r\n\r\n\r\n entryObserver.disconnect();\r\n\r\n }\r\n );\r\n\r\n },\r\n {\r\n rootMargin:'0px 0px -12% 0px',\r\n threshold:.14\r\n }\r\n );\r\n\r\n\r\n entryObserver.observe(\r\n root\r\n );\r\n\r\n }else if(\r\n root.classList.contains(\r\n 'has-entry-enhancement'\r\n )\r\n ){\r\n\r\n resolveEntry();\r\n\r\n }\r\n\r\n\r\n \/* =======================================================\r\n PROJECT-WIDE LAMINA FOCUS-DEPTH CONTROLLER\r\n Reusable singleton contract:\r\n registerProfile(name, config)\r\n register(section)\r\n requestUpdate()\r\n remeasure()\r\n ======================================================= *\/\r\n\r\n if (\r\n !window.LaminaFocusDepth ||\r\n typeof window.LaminaFocusDepth.registerProfile !==\r\n 'function'\r\n ){\r\n\r\n window.LaminaFocusDepth =\r\n (() => {\r\n\r\n const states =\r\n new Set();\r\n\r\n\r\n const profiles =\r\n new Map();\r\n\r\n\r\n const reducedQuery =\r\n window.matchMedia(\r\n '(prefers-reduced-motion: reduce)'\r\n );\r\n\r\n\r\n let ticking =\r\n false;\r\n\r\n\r\n let previousScrollY =\r\n window.scrollY;\r\n\r\n\r\n let direction =\r\n 0;\r\n\r\n\r\n const directionThreshold =\r\n 3;\r\n\r\n\r\n function clamp(\r\n value,\r\n min,\r\n max\r\n ){\r\n\r\n return Math.min(\r\n max,\r\n Math.max(\r\n min,\r\n value\r\n )\r\n );\r\n\r\n }\r\n\r\n\r\n function smootherstep(\r\n value\r\n ){\r\n\r\n const t =\r\n clamp(\r\n value,\r\n 0,\r\n 1\r\n );\r\n\r\n\r\n return (\r\n t *\r\n t *\r\n t *\r\n (\r\n t *\r\n (\r\n t *\r\n 6 -\r\n 15\r\n ) +\r\n 10\r\n )\r\n );\r\n\r\n }\r\n\r\n\r\n function registerProfile(\r\n name,\r\n config\r\n ){\r\n\r\n if (\r\n !name ||\r\n !config\r\n ) return;\r\n\r\n\r\n profiles.set(\r\n name,\r\n config\r\n );\r\n\r\n }\r\n\r\n\r\n function measure(\r\n state\r\n ){\r\n\r\n const sectionRect =\r\n state.section.getBoundingClientRect();\r\n\r\n\r\n state.layers =\r\n [\r\n ...state.section.querySelectorAll(\r\n '[data-focus-layer]'\r\n )\r\n ].map(\r\n element => {\r\n\r\n const rect =\r\n element.getBoundingClientRect();\r\n\r\n\r\n return {\r\n element,\r\n type:\r\n element.dataset.focusLayer ||\r\n 'copy',\r\n centerOffset:\r\n rect.top -\r\n sectionRect.top +\r\n rect.height *\r\n .5\r\n };\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n function applyLayer(\r\n item,\r\n passedProgress,\r\n layerConfig,\r\n reduced\r\n ){\r\n\r\n \/*\r\n Only already-passed content is allowed to soften.\r\n Upcoming and current content always pass 0 here and stay sharp.\r\n *\/\r\n const depth =\r\n clamp(\r\n passedProgress,\r\n 0,\r\n 1\r\n );\r\n\r\n\r\n let blur =\r\n layerConfig.exitBlur *\r\n depth;\r\n\r\n\r\n let opacity =\r\n 1 -\r\n (\r\n 1 -\r\n layerConfig.opacityMin\r\n ) *\r\n depth;\r\n\r\n\r\n let shift =\r\n layerConfig.exitShift *\r\n depth;\r\n\r\n\r\n if (\r\n reduced\r\n ){\r\n\r\n blur = 0;\r\n opacity = 1;\r\n shift = 0;\r\n\r\n }\r\n\r\n\r\n item.element.style.setProperty(\r\n '--lci-depth-blur',\r\n blur.toFixed(2) + 'px'\r\n );\r\n\r\n\r\n item.element.style.setProperty(\r\n '--lci-depth-opacity',\r\n opacity.toFixed(3)\r\n );\r\n\r\n\r\n item.element.style.setProperty(\r\n '--lci-depth-y',\r\n shift.toFixed(2) + 'px'\r\n );\r\n\r\n }\r\n\r\n\r\n function updateSection(\r\n state,\r\n viewportHeight,\r\n compact\r\n ){\r\n\r\n \/*\r\n Locked mobile behavior:\r\n no viewport\/distance\/passed-content blur on compact screens.\r\n *\/\r\n if (compact){\r\n\r\n state.layers.forEach(\r\n item => {\r\n\r\n item.element.style.setProperty(\r\n '--lci-depth-blur',\r\n '0px'\r\n );\r\n\r\n item.element.style.setProperty(\r\n '--lci-depth-opacity',\r\n '1'\r\n );\r\n\r\n item.element.style.setProperty(\r\n '--lci-depth-y',\r\n '0px'\r\n );\r\n\r\n }\r\n );\r\n\r\n return;\r\n }\r\n\r\n\r\n if (\r\n !state.near\r\n ) return;\r\n\r\n\r\n const profile =\r\n profiles.get(\r\n state.profileName\r\n );\r\n\r\n\r\n if (\r\n !profile\r\n ) return;\r\n\r\n\r\n const config =\r\n profile.desktop;\r\n\r\n\r\n const sectionRect =\r\n state.section.getBoundingClientRect();\r\n\r\n\r\n \/*\r\n Reading line. Content at or below this line is current\/upcoming\r\n and must remain perfectly sharp.\r\n *\/\r\n const focalTop =\r\n viewportHeight *\r\n config.focalTop;\r\n\r\n\r\n \/*\r\n The farther above this region content moves, the more it softens.\r\n *\/\r\n const exitFar =\r\n viewportHeight *\r\n config.exitFar;\r\n\r\n\r\n state.layers.forEach(\r\n item => {\r\n\r\n const layerConfig =\r\n config[\r\n item.type\r\n ] ||\r\n config.copy;\r\n\r\n\r\n const centerY =\r\n sectionRect.top +\r\n item.centerOffset;\r\n\r\n\r\n \/*\r\n ONE-WAY DEPTH:\r\n centerY >= focalTop -> 0 -> SHARP\r\n centerY < focalTop -> gradually blur as it is scrolled past\r\n\r\n Because progress comes directly from position, scrolling back\r\n restores the element to sharpness automatically.\r\n *\/\r\n const passedProgress =\r\n centerY <\r\n focalTop\r\n ? smootherstep(\r\n (\r\n focalTop -\r\n centerY\r\n ) \/\r\n Math.max(\r\n 1,\r\n focalTop -\r\n exitFar\r\n )\r\n )\r\n : 0;\r\n\r\n\r\n applyLayer(\r\n item,\r\n passedProgress,\r\n layerConfig,\r\n reducedQuery.matches\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n function update(){\r\n\r\n ticking =\r\n false;\r\n\r\n\r\n const currentY =\r\n window.scrollY;\r\n\r\n\r\n const delta =\r\n currentY -\r\n previousScrollY;\r\n\r\n\r\n if (\r\n delta >\r\n directionThreshold\r\n ){\r\n\r\n direction =\r\n 1;\r\n\r\n }else if(\r\n delta <\r\n -directionThreshold\r\n ){\r\n\r\n direction =\r\n -1;\r\n\r\n }\r\n\r\n\r\n previousScrollY =\r\n currentY;\r\n\r\n\r\n const viewportHeight =\r\n Math.max(\r\n 1,\r\n window.innerHeight ||\r\n document.documentElement.clientHeight\r\n );\r\n\r\n\r\n const compact =\r\n window.innerWidth <=\r\n 760;\r\n\r\n\r\n states.forEach(\r\n state => {\r\n\r\n state.direction =\r\n direction;\r\n\r\n\r\n updateSection(\r\n state,\r\n viewportHeight,\r\n compact\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n function requestUpdate(){\r\n\r\n if (\r\n ticking\r\n ) return;\r\n\r\n\r\n ticking =\r\n true;\r\n\r\n\r\n requestAnimationFrame(\r\n update\r\n );\r\n\r\n }\r\n\r\n\r\n const intersectionObserver =\r\n 'IntersectionObserver' in window\r\n ? new IntersectionObserver(\r\n entries => {\r\n\r\n entries.forEach(\r\n entry => {\r\n\r\n const state =\r\n entry.target.__laminaFocusDepthState;\r\n\r\n\r\n if (\r\n !state\r\n ) return;\r\n\r\n\r\n state.near =\r\n entry.isIntersecting;\r\n\r\n\r\n if (\r\n state.near\r\n ){\r\n\r\n measure(\r\n state\r\n );\r\n\r\n\r\n requestUpdate();\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n },\r\n {\r\n rootMargin:'100% 0px 100% 0px',\r\n threshold:0\r\n }\r\n )\r\n : null;\r\n\r\n\r\n const resizeObserver =\r\n 'ResizeObserver' in window\r\n ? new ResizeObserver(\r\n entries => {\r\n\r\n entries.forEach(\r\n entry => {\r\n\r\n const state =\r\n entry.target.__laminaFocusDepthState;\r\n\r\n\r\n if (\r\n state\r\n ){\r\n\r\n measure(\r\n state\r\n );\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n\r\n requestUpdate();\r\n\r\n }\r\n )\r\n : null;\r\n\r\n\r\n function register(\r\n section\r\n ){\r\n\r\n if (\r\n !section ||\r\n section.__laminaFocusDepthState\r\n ) return;\r\n\r\n\r\n const state =\r\n {\r\n section,\r\n profileName:\r\n section.dataset.focusProfile ||\r\n 'default',\r\n near:true,\r\n direction:0,\r\n layers:[]\r\n };\r\n\r\n\r\n section.__laminaFocusDepthState =\r\n state;\r\n\r\n\r\n states.add(\r\n state\r\n );\r\n\r\n\r\n measure(\r\n state\r\n );\r\n\r\n\r\n intersectionObserver?.observe(\r\n section\r\n );\r\n\r\n\r\n resizeObserver?.observe(\r\n section\r\n );\r\n\r\n\r\n requestUpdate();\r\n\r\n }\r\n\r\n\r\n function remeasure(){\r\n\r\n states.forEach(\r\n state => {\r\n\r\n measure(\r\n state\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n requestUpdate();\r\n\r\n }\r\n\r\n\r\n window.addEventListener(\r\n 'scroll',\r\n requestUpdate,\r\n {\r\n passive:true\r\n }\r\n );\r\n\r\n\r\n let resizeTimer =\r\n null;\r\n\r\n\r\n window.addEventListener(\r\n 'resize',\r\n () => {\r\n\r\n window.clearTimeout(\r\n resizeTimer\r\n );\r\n\r\n\r\n resizeTimer =\r\n window.setTimeout(\r\n remeasure,\r\n 120\r\n );\r\n\r\n },\r\n {\r\n passive:true\r\n }\r\n );\r\n\r\n\r\n return {\r\n registerProfile,\r\n register,\r\n requestUpdate,\r\n remeasure\r\n };\r\n\r\n })();\r\n\r\n }\r\n\r\n\r\n window.LaminaFocusDepth.registerProfile(\r\n 'international-care',\r\n {\r\n\r\n desktop:{\r\n focalTop:.20,\r\n focalBottom:.72,\r\n entryFar:.90,\r\n exitFar:-.15,\r\n\r\n heading:{\r\n entryBlur:0,\r\n exitBlur:3.8,\r\n opacityMin:.82,\r\n entryShift:0,\r\n exitShift:-2\r\n },\r\n\r\n copy:{\r\n entryBlur:0,\r\n exitBlur:2.6,\r\n opacityMin:.87,\r\n entryShift:0,\r\n exitShift:-1\r\n },\r\n\r\n ui:{\r\n entryBlur:0,\r\n exitBlur:1.7,\r\n opacityMin:.91,\r\n entryShift:0,\r\n exitShift:0\r\n },\r\n\r\n metadata:{\r\n entryBlur:0,\r\n exitBlur:2.1,\r\n opacityMin:.88,\r\n entryShift:0,\r\n exitShift:-1\r\n },\r\n\r\n media:{\r\n entryBlur:0,\r\n exitBlur:1.8,\r\n opacityMin:.89,\r\n entryShift:0,\r\n exitShift:-1\r\n }\r\n\r\n },\r\n\r\n mobile:{\r\n \/* Intentionally neutral: compact screens bypass scroll depth. *\/\r\n focalTop:0,\r\n focalBottom:1,\r\n entryFar:1,\r\n exitFar:0,\r\n\r\n heading:{\r\n entryBlur:0,\r\n exitBlur:0,\r\n opacityMin:1,\r\n entryShift:0,\r\n exitShift:0\r\n },\r\n\r\n copy:{\r\n entryBlur:0,\r\n exitBlur:0,\r\n opacityMin:1,\r\n entryShift:0,\r\n exitShift:0\r\n },\r\n\r\n ui:{\r\n entryBlur:0,\r\n exitBlur:0,\r\n opacityMin:1,\r\n entryShift:0,\r\n exitShift:0\r\n },\r\n\r\n metadata:{\r\n entryBlur:0,\r\n exitBlur:0,\r\n opacityMin:1,\r\n entryShift:0,\r\n exitShift:0\r\n },\r\n\r\n media:{\r\n entryBlur:0,\r\n exitBlur:0,\r\n opacityMin:1,\r\n entryShift:0,\r\n exitShift:0\r\n }\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n\r\n window.LaminaFocusDepth.register(\r\n root\r\n );\r\n\r\n\r\n \/* =======================================================\r\n RESIZE \/ RTL \/ BREAKPOINT RE-MEASURE\r\n ======================================================= *\/\r\n\r\n let localResizeTimer =\r\n null;\r\n\r\n\r\n window.addEventListener(\r\n 'resize',\r\n () => {\r\n\r\n window.clearTimeout(\r\n localResizeTimer\r\n );\r\n\r\n\r\n localResizeTimer =\r\n window.setTimeout(\r\n () => {\r\n\r\n clearFocusField();\r\n\r\n\r\n window.LaminaFocusDepth?.remeasure?.();\r\n\r\n },\r\n 130\r\n );\r\n\r\n },\r\n {\r\n passive:true\r\n }\r\n );\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ca63f3b elementor-widget elementor-widget-html\" data-id=\"ca63f3b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n<style id=\"lamina-form-choice-mobile-alignment\">\n@media(max-width:767px){\nbody.elementor-page-11 #lamina-case-submission .s09__choice{box-sizing:border-box!important;width:100%!important;min-width:0!important;padding:22px 20px 23px!important;align-items:flex-start!important;justify-content:center!important;overflow:hidden!important;text-align:left!important;}\nbody.elementor-page-11 #lamina-case-submission .s09__choice-name{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important;padding:0!important;font-size:clamp(28px,8.2vw,31px)!important;line-height:1.08!important;letter-spacing:-.015em!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important;}\nbody.elementor-page-11 #lamina-case-submission .s09__choice-copy{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;margin:10px 0 0!important;padding:0!important;line-height:1.5!important;white-space:normal!important;overflow-wrap:anywhere!important;}\n}\n<\/style>\n<style id=\"lamina-faq-state-finish\">\n@media(max-width:767px){body.elementor-page-11 #lamina-decision-faq .df__faq-row:not(.is-open) .df__question-button:hover .df__disclosure,body.elementor-page-11 #lamina-decision-faq .df__faq-row:not(.is-open) .df__question-button:focus-visible .df__disclosure{background:rgba(255,255,255,.92)!important;border-color:rgba(59,13,44,.42)!important;}body.elementor-page-11 #lamina-decision-faq .df__faq-row .df__question-button .df__disclosure::before{background:transparent!important;background-color:transparent!important;background-image:none!important;box-shadow:none!important;}body.elementor-page-11 #lamina-decision-faq .df__faq-row.is-open .df__question-button .df__disclosure{background:rgba(59,13,44,.96)!important;border-color:#3b0d2c!important;}body.elementor-page-11 #lamina-decision-faq .df__faq-row.is-open .df__question-button .df__disclosure::before{background:transparent!important;background-color:transparent!important;border-color:#fff!important;transform:translate(-50%,-38%) rotate(225deg)!important;}}\n<\/style>\n<style id=\"lamina-faq-chevron-finish\">\n@media(max-width:767px){body.elementor-page-11 #lamina-decision-faq .df__disclosure::before{background-color:transparent!important;background-image:none!important;box-shadow:none!important;}body.elementor-page-11 #lamina-decision-faq .df__faq-row.is-open .df__disclosure::before{background-color:transparent!important;background-image:none!important;}}\n<\/style>\n<style id=\"lamina-faq-mobile-polish\">\n@media(max-width:767px){\n#lamina-decision-faq .df__faq-list,#lamina-decision-faq .df__faq-row{min-width:0!important;max-width:100%!important;}\n#lamina-decision-faq .df__question-button{grid-template-columns:minmax(0,1fr) 36px!important;grid-template-areas:\"number control\" \"question control\"!important;column-gap:18px!important;row-gap:10px!important;align-items:center!important;width:100%!important;min-width:0!important;padding:22px 0 23px!important;overflow:visible!important;text-align:left!important;}\n#lamina-decision-faq .df__number{grid-area:number!important;width:auto!important;min-width:0!important;}\n#lamina-decision-faq .df__question-text{grid-area:question!important;width:auto!important;max-width:none!important;min-width:0!important;white-space:normal!important;overflow:visible!important;overflow-wrap:anywhere!important;word-break:normal!important;font-size:clamp(23px,7.2vw,28px)!important;line-height:1.08!important;letter-spacing:-.018em!important;padding-right:2px!important;text-align:left!important;}\n#lamina-decision-faq .df__disclosure{grid-area:control!important;align-self:center!important;justify-self:end!important;width:34px!important;height:34px!important;border:1px solid rgba(59,13,44,.24)!important;border-radius:999px!important;background:rgba(255,255,255,.64)!important;box-shadow:0 8px 24px rgba(59,13,44,.08)!important;position:relative!important;transition:background-color .25s ease,border-color .25s ease,transform .25s ease!important;}\n#lamina-decision-faq .df__disclosure::before{content:\"\"!important;display:block!important;width:8px!important;height:8px!important;border:0!important;border-right:1.5px solid #3b0d2c!important;border-bottom:1.5px solid #3b0d2c!important;background:none!important;position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-62%) rotate(45deg)!important;transform-origin:center!important;transition:transform .25s ease!important;}\n#lamina-decision-faq .df__disclosure::after{content:none!important;display:none!important;}\n#lamina-decision-faq .df__faq-row.is-open .df__disclosure{background:rgba(59,13,44,.96)!important;border-color:#3b0d2c!important;box-shadow:0 10px 28px rgba(59,13,44,.18)!important;}\n#lamina-decision-faq .df__faq-row.is-open .df__disclosure::before{border-color:#fff!important;transform:translate(-50%,-38%) rotate(225deg)!important;}\n#lamina-decision-faq .df__question-button:focus-visible{outline:2px solid #a86186!important;outline-offset:6px!important;border-radius:2px!important;}\n}\n<\/style>\n<style id=\"lamina-phone-blur-hard-stop\">\n@media(max-width:767px){\n#lamina-care-index [data-focus-layer],\n#lamina-service-track .lc-st__intro-head,\n#lamina-service-track .lc-st__tiles,\n#lamina-service-track .lc-st__service .lc-st__visual,\n#lamina-service-track .lc-st__service .lc-st__content,\n#lamina-real-cases .lc-case__exit-blur,\n#lamina-doctor-gallery [data-focus-layer],\n#lamina-treatment-path-tree [data-exit-layer],\n#lamina-istanbul-stay [data-lis-depth],\n#lamina-decision-faq [data-df-depth],\n#lamina-case-submission [data-s09-depth]{\nfilter:none!important;\ntranslate:none!important;\nwill-change:auto!important;\n}\n}\n<\/style>\n<!-- LAMINA HOMEPAGE PHONE QA REPAIR \u2014 2026-09-10 -->\n<style id=\"lamina-homepage-phone-repair\">\n@media (max-width:767px){\n html,\n body{\n max-width:100%;\n }\n\n body.elementor-page-11{\n overflow-x:clip;\n }\n\n body.elementor-page-11 .e-con,\n body.elementor-page-11 .elementor-widget-html{\n min-width:0 !important;\n max-width:100% !important;\n }\n\n #top,\n #lamina-care-index,\n #lamina-service-track,\n #lamina-real-cases,\n #lamina-doctor-gallery,\n #lamina-treatment-path-tree,\n #lamina-istanbul-stay,\n #lamina-decision-faq,\n #lamina-case-submission{\n width:100%;\n max-width:100%;\n min-width:0;\n --e-global-color-accent:#5F2468 !important;\n }\n\n #top img,\n #lamina-care-index img,\n #lamina-service-track img,\n #lamina-real-cases img,\n #lamina-doctor-gallery img,\n #lamina-treatment-path-tree img,\n #lamina-istanbul-stay img,\n #lamina-decision-faq img,\n #lamina-case-submission img,\n #top video,\n #lamina-service-track video,\n #lamina-case-submission video,\n #lamina-case-submission iframe{\n display:block;\n max-width:100%;\n }\n\n #lamina-real-cases{\n overflow-x:clip !important;\n }\n\n #lamina-real-cases .lc-case__stage,\n #lamina-real-cases .lc-case__stage-inner,\n #lamina-real-cases .lc-case__layout,\n #lamina-real-cases .lc-case__visual{\n width:100% !important;\n max-width:100% !important;\n min-width:0 !important;\n }\n\n #lamina-real-cases .lc-case__layout{\n display:block !important;\n }\n\n #lamina-real-cases .lc-case__visual{\n flex:none !important;\n overflow:hidden !important;\n }\n\n #lamina-real-cases .lc-case__case-list{\n display:flex !important;\n width:100% !important;\n max-width:100% !important;\n min-width:0 !important;\n overflow-x:auto !important;\n overflow-y:hidden !important;\n overscroll-behavior-inline:contain;\n -webkit-overflow-scrolling:touch;\n touch-action:pan-x pan-y;\n }\n\n #lamina-real-cases .lc-case__card{\n max-width:calc(100vw - 40px);\n }\n\n #lamina-doctor-gallery .ldg__shell,\n #lamina-doctor-gallery .ldg__bleed,\n #lamina-doctor-gallery .ldg__ribbon-stage,\n #lamina-doctor-gallery .ldg__viewport{\n min-width:0 !important;\n max-width:100% !important;\n }\n\n #lamina-doctor-gallery .ldg__bleed{\n width:calc(100% - 40px) !important;\n margin-inline:20px !important;\n }\n\n #lamina-doctor-gallery .ldg__viewport{\n width:100% !important;\n margin-inline:0 !important;\n overflow:hidden !important;\n }\n\n #lamina-care-index [data-focus-layer]{\n --lci-depth-blur:0px !important;\n --lci-depth-opacity:1 !important;\n --lci-depth-y:0px !important;\n }\n\n #lamina-service-track .lc-st__intro-head,\n #lamina-service-track .lc-st__tiles,\n #lamina-service-track .lc-st__service .lc-st__visual,\n #lamina-service-track .lc-st__service .lc-st__content{\n --lc-mobile-depth-blur:0px !important;\n --lc-mobile-depth-opacity:1 !important;\n --lc-mobile-depth-y:0px !important;\n }\n\n #lamina-real-cases .lc-case__exit-blur{\n --lc-section-exit-blur:0px !important;\n }\n\n #lamina-doctor-gallery [data-focus-layer]{\n --lamina-focus-blur:0px !important;\n --lamina-focus-opacity:1 !important;\n --lamina-focus-y:0px !important;\n }\n\n #lamina-treatment-path-tree [data-exit-layer]{\n --pt-entry-blur:0px !important;\n --pt-passed-blur:0px !important;\n --pt-passed-opacity:1 !important;\n }\n\n #lamina-istanbul-stay [data-lis-depth]{\n --lis-entry-blur:0px !important;\n --lis-passed-blur:0px !important;\n --lis-depth-opacity:1 !important;\n }\n\n #lamina-decision-faq [data-df-depth]{\n --df-entry-blur:0px !important;\n --df-passed-blur:0px !important;\n --df-depth-opacity:1 !important;\n }\n\n #lamina-case-submission [data-s09-depth]{\n --s09-entry-blur:0px !important;\n --s09-passed-blur:0px !important;\n --s09-depth-opacity:1 !important;\n }\n\n #lamina-service-track a:focus-visible,\n #lamina-service-track button:focus-visible,\n #lamina-real-cases a:focus-visible,\n #lamina-real-cases button:focus-visible,\n #lamina-doctor-gallery a:focus-visible,\n #lamina-doctor-gallery button:focus-visible,\n #lamina-treatment-path-tree a:focus-visible,\n #lamina-treatment-path-tree button:focus-visible,\n #lamina-istanbul-stay a:focus-visible,\n #lamina-istanbul-stay button:focus-visible,\n #lamina-decision-faq a:focus-visible,\n #lamina-decision-faq button:focus-visible,\n #lamina-case-submission a:focus-visible,\n #lamina-case-submission button:focus-visible,\n #lamina-case-submission input:focus-visible,\n #lamina-case-submission select:focus-visible,\n #lamina-case-submission textarea:focus-visible{\n outline-color:#94709A !important;\n text-decoration-color:#94709A !important;\n }\n\n #lamina-case-submission input[type=\"checkbox\"],\n #lamina-case-submission input[type=\"radio\"]{\n accent-color:#5F2468;\n }\n}\n<\/style>\n\n<style id=\"lamina-phone-repair-footprint\">body:not(.elementor-editor-active) .elementor-element-ca63f3b{display:none !important}<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fb6fce4 e-con-full e-flex e-con e-parent\" data-id=\"fb6fce4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fcb304d elementor-widget elementor-widget-html\" data-id=\"fcb304d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\r\nLAMINA CLINIC \u2014 SECTION 03\r\nSERVICES \u2014 DESKTOP MASTER TRACK + PHONE EDITORIAL FLOW\r\n\r\nThis implementation is written from scratch around one simple method:\r\n\r\n- A tall master wrapper creates the scroll distance.\r\n- A 100svh sticky camera pins itself only AFTER the section reaches\r\n the top of the viewport.\r\n- Six full-viewport slides are stacked inside that camera.\r\n- Page scroll progress through the master wrapper selects the active slide.\r\n- The active slide change triggers a fixed-duration blur\/crossfade.\r\n- The animation is NOT continuously tied to the user's wheel delta.\r\n Once a threshold is crossed, the transition finishes on its own.\r\n- The opening selector is slide 00.\r\n- Five service slides follow it.\r\n- Clicking one of the five selector images jumps directly to the chosen\r\n service segment behind a short neutral blur veil.\r\n- Phone uses a separate normal-flow editorial experience with no sticky camera.\r\n\r\nReplace all sample image paths with real clinic-approved photography.\r\n\r\nExpected assets:\r\nhttps:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/hair-scaled.webp\r\nhttps:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/beard-scaled.webp\r\nhttps:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/smile-scaled.webp\r\nhttps:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/crown-scaled.webp\r\nhttps:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/dental-implant-model-with-glove-in-medical-setting-2026-03-27-01-40-41-utc-scaled.webp\r\n========================================================= -->\r\n\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=Manrope:wght@400;500;600&display=swap');\r\n\r\n#lamina-service-track{\r\n --aubergine:#2B142F;\r\n --aubergine-deep:#150717;\r\n --plum:#5F2468;\r\n --plum-deep:#32123A;\r\n --plum-accent:#7A3F86;\r\n --orchid:#94709A;\r\n --lilac:#C5B2C8;\r\n --ivory:#F7F2EA;\r\n --champagne:#D8C4A1;\r\n --ink:#171317;\r\n\r\n --motion:cubic-bezier(.22,1,.36,1);\r\n --panel-time:1.28s;\r\n\r\n --e-global-color-accent:#5F2468 !important;\r\n --e-global-color-primary:#2B142F !important;\r\n --e-global-color-secondary:#94709A !important;\r\n --e-global-color-text:#171317 !important;\r\n\r\n position:relative;\r\n width:100%;\r\n\r\n \/*\r\n Six slides inside a 100svh sticky camera.\r\n The extra master height is the actual narrative scroll distance.\r\n *\/\r\n height:610vh;\r\n\r\n background:var(--aubergine-deep);\r\n\r\n font-family:\"Manrope\",system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;\r\n}\r\n\r\n#lamina-service-track *,\r\n#lamina-service-track *::before,\r\n#lamina-service-track *::after{\r\n box-sizing:border-box;\r\n}\r\n\r\n#lamina-service-track button,\r\n#lamina-service-track a{\r\n font:inherit;\r\n}\r\n\r\n#lamina-service-track button:hover,\r\n#lamina-service-track button:focus,\r\n#lamina-service-track button:focus-visible,\r\n#lamina-service-track a:hover,\r\n#lamina-service-track a:focus,\r\n#lamina-service-track a:focus-visible{\r\n color:inherit !important;\r\n outline-color:var(--plum) !important;\r\n}\r\n\r\n#lamina-service-track ::selection{\r\n background:var(--plum);\r\n color:var(--ivory);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n STICKY CAMERA\r\n This is the core behavior:\r\n it does not pin until the section itself reaches the viewport top.\r\n ========================================================= *\/\r\n\r\n.lc-st__camera{\r\n position:sticky;\r\n top:0;\r\n\r\n width:100%;\r\n height:100vh;\r\n height:100svh;\r\n\r\n overflow:hidden;\r\n isolation:isolate;\r\n\r\n background:var(--aubergine-deep);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n STACKED SLIDES\r\n ========================================================= *\/\r\n\r\n.lc-st__slide{\r\n position:absolute;\r\n inset:0;\r\n\r\n width:100%;\r\n height:100%;\r\n\r\n opacity:0;\r\n visibility:hidden;\r\n\r\n \/*\r\n Heavy dreamy transition lives here.\r\n Both image and text are inside the SAME filtered slide.\r\n *\/\r\n filter:blur(24px);\r\n\r\n transform:\r\n translate3d(0,10px,0)\r\n scale(1.012);\r\n\r\n pointer-events:none;\r\n\r\n backface-visibility:hidden;\r\n -webkit-backface-visibility:hidden;\r\n\r\n contain:paint;\r\n\r\n will-change:\r\n opacity,\r\n filter,\r\n transform;\r\n\r\n transition:\r\n opacity var(--panel-time) var(--motion),\r\n filter calc(var(--panel-time) + .12s) var(--motion),\r\n transform calc(var(--panel-time) + .08s) var(--motion),\r\n visibility 0s linear calc(var(--panel-time) + .12s);\r\n\r\n z-index:1;\r\n}\r\n\r\n.lc-st__slide.is-active{\r\n opacity:1;\r\n visibility:visible;\r\n\r\n filter:blur(0);\r\n\r\n transform:\r\n translate3d(0,0,0)\r\n scale(1);\r\n\r\n pointer-events:auto;\r\n\r\n transition-delay:0s;\r\n\r\n z-index:5;\r\n}\r\n\r\n\r\n\/*\r\n During a class swap the old slide needs time to blur away.\r\n Keeping every non-active slide visible for the CSS transition duration\r\n is what gives us a complete crossfade instead of an instant cut.\r\n*\/\r\n.lc-st__slide.is-transitioning-out{\r\n visibility:visible;\r\n z-index:4;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n PANEL 01 \u2014 NORMAL SCROLL \/ SERVICE SELECTOR\r\n ========================================================= *\/\r\n\r\n.lc-st__intro{\r\n position:absolute;\r\n inset:0;\r\n z-index:3;\r\n\r\n min-height:100svh;\r\n height:100svh;\r\n\r\n padding:\r\n clamp(94px,10vh,132px)\r\n clamp(24px,5.4vw,96px)\r\n clamp(72px,8vh,100px);\r\n\r\n display:flex;\r\n flex-direction:column;\r\n justify-content:center;\r\n\r\n color:var(--ivory);\r\n\r\n background:\r\n radial-gradient(\r\n 58% 44% at 92% 6%,\r\n rgba(148,112,154,.16),\r\n transparent 70%\r\n ),\r\n radial-gradient(\r\n 42% 36% at 8% 92%,\r\n rgba(95,36,104,.18),\r\n transparent 72%\r\n ),\r\n linear-gradient(\r\n 145deg,\r\n #2B142F 0%,\r\n #35183B 48%,\r\n #241027 100%\r\n );\r\n}\r\n\r\n.lc-st__intro-inner{\r\n width:min(100%,1600px);\r\n margin:0 auto;\r\n}\r\n\r\n.lc-st__intro-head{\r\n display:grid;\r\n grid-template-columns:minmax(0,1fr) minmax(300px,.56fr);\r\n gap:clamp(44px,6vw,108px);\r\n align-items:end;\r\n\r\n margin-bottom:clamp(38px,5vh,62px);\r\n}\r\n\r\n.lc-st__eyebrow{\r\n margin:0 0 16px;\r\n\r\n color:rgba(216,196,161,.78);\r\n\r\n font-size:9px;\r\n line-height:1;\r\n font-weight:600;\r\n letter-spacing:.21em;\r\n text-transform:uppercase;\r\n}\r\n\r\n.lc-st__intro-title{\r\n margin:0;\r\n max-width:9ch;\r\n\r\n color:var(--ivory);\r\n\r\n font-family:\"Cormorant Garamond\",Georgia,serif;\r\n font-size:clamp(64px,5.8vw,108px);\r\n line-height:.84;\r\n font-weight:400;\r\n letter-spacing:-.052em;\r\n}\r\n\r\n.lc-st__intro-title em{\r\n color:var(--lilac);\r\n font-style:italic;\r\n font-weight:400;\r\n}\r\n\r\n.lc-st__intro-copy{\r\n margin:0 0 8px;\r\n max-width:38ch;\r\n\r\n color:rgba(23,19,23,.66);\r\n\r\n font-size:clamp(14px,1vw,17px);\r\n line-height:1.72;\r\n}\r\n\r\n\r\n\/* five-image editorial strip *\/\r\n\r\n.lc-st__tiles{\r\n display:grid;\r\n grid-template-columns:1.18fr .92fr .92fr .92fr 1.18fr;\r\n gap:clamp(8px,.9vw,16px);\r\n\r\n height:clamp(330px,42vh,470px);\r\n}\r\n\r\n.lc-st__tile{\r\n --tile-shift:0px;\r\n\r\n position:relative;\r\n overflow:hidden;\r\n\r\n appearance:none;\r\n border:0 !important;\r\n border-radius:0 !important;\r\n\r\n width:100%;\r\n min-width:0;\r\n height:100%;\r\n\r\n padding:0;\r\n\r\n color:var(--ivory) !important;\r\n background:var(--dusty-lilac,#C5B2C8) !important;\r\n\r\n text-align:left;\r\n cursor:pointer;\r\n\r\n \/*\r\n The stagger is part of the static composition.\r\n Hover NEVER changes card geometry.\r\n *\/\r\n transform:translateY(var(--tile-shift));\r\n\r\n box-shadow:\r\n inset 0 0 0 1px rgba(43,20,47,.06);\r\n\r\n transition:\r\n box-shadow .65s ease;\r\n}\r\n\r\n.lc-st__tile:nth-child(2){\r\n --tile-shift:20px;\r\n}\r\n\r\n.lc-st__tile:nth-child(4){\r\n --tile-shift:20px;\r\n}\r\n\r\n.lc-st__tile-media,\r\n.lc-st__tile-media img{\r\n position:absolute;\r\n inset:0;\r\n\r\n width:100%;\r\n height:100%;\r\n}\r\n\r\n.lc-st__tile-media{\r\n background:\r\n linear-gradient(\r\n 145deg,\r\n #E8E1E4 0%,\r\n #C5B2C8 48%,\r\n #94709A 100%\r\n );\r\n\r\n overflow:hidden;\r\n\r\n will-change:transform;\r\n transform:translate3d(0,0,0);\r\n\r\n transition:\r\n transform 1.9s cubic-bezier(.22,1,.36,1);\r\n}\r\n\r\n.lc-st__tile-media img{\r\n object-fit:cover;\r\n object-position:var(--tile-image-position,50% 50%);\r\n\r\n filter:\r\n saturate(.90)\r\n contrast(.99)\r\n brightness(.92);\r\n\r\n transform:\r\n scale(1.015)\r\n translate3d(0,0,0);\r\n\r\n \/*\r\n First-panel hover must be visible and smooth.\r\n *\/\r\n transform-origin:center center;\r\n will-change:transform,filter;\r\n\r\n transition:\r\n transform 1.9s cubic-bezier(.22,1,.36,1),\r\n filter 1.6s ease;\r\n}\r\n\r\n.lc-st__tile::after{\r\n content:\"\";\r\n\r\n position:absolute;\r\n z-index:1;\r\n inset:0;\r\n\r\n background:\r\n linear-gradient(\r\n 180deg,\r\n rgba(43,20,47,.02) 20%,\r\n rgba(43,20,47,.10) 57%,\r\n rgba(43,20,47,.62) 100%\r\n );\r\n\r\n opacity:1;\r\n\r\n pointer-events:none;\r\n\r\n transition:\r\n opacity 1.35s ease;\r\n}\r\n\r\n\/*\r\n Removed permanently.\r\n No blooming blobs, blur patches, moving light shapes or hover veils.\r\n*\/\r\n.lc-st__tile-shade{\r\n display:none !important;\r\n}\r\n\r\n.lc-st__tile-copy{\r\n position:absolute;\r\n z-index:3;\r\n\r\n left:clamp(16px,1.5vw,24px);\r\n right:clamp(16px,1.5vw,24px);\r\n bottom:clamp(16px,1.6vw,24px);\r\n\r\n pointer-events:none;\r\n}\r\n\r\n.lc-st__tile-index{\r\n display:block;\r\n\r\n margin-bottom:9px;\r\n\r\n color:rgba(247,242,234,.68);\r\n\r\n font-size:7px;\r\n line-height:1;\r\n font-weight:600;\r\n letter-spacing:.15em;\r\n text-transform:uppercase;\r\n}\r\n\r\n.lc-st__tile-name{\r\n display:block;\r\n\r\n max-width:11ch;\r\n\r\n color:var(--ivory);\r\n\r\n font-family:\"Cormorant Garamond\",Georgia,serif;\r\n font-size:clamp(25px,2vw,36px);\r\n line-height:.92;\r\n font-weight:500;\r\n letter-spacing:-.03em;\r\n}\r\n\r\n.lc-st__tile-open{\r\n display:block;\r\n\r\n margin-top:13px;\r\n\r\n color:rgba(247,242,234,.72);\r\n\r\n font-size:8px;\r\n line-height:1;\r\n font-weight:600;\r\n letter-spacing:.13em;\r\n text-transform:uppercase;\r\n\r\n transition:\r\n color 1.20s ease;\r\n}\r\n\r\n@media (hover:hover){\r\n\r\n \/*\r\n STRICT SITE-WIDE INTERACTION DIRECTION:\r\n no jumping cards, no moving text, no blobs.\r\n Only a restrained image push-in and tonal lift.\r\n *\/\r\n .lc-st__tile:hover .lc-st__tile-media,\r\n .lc-st__tile:focus-visible .lc-st__tile-media{\r\n transform:none;\r\n }\r\n\r\n .lc-st__tile:hover .lc-st__tile-media img,\r\n .lc-st__tile:focus-visible .lc-st__tile-media img{\r\n transform:\r\n scale(1.09)\r\n translate3d(0,-1.2%,0);\r\n\r\n filter:\r\n saturate(1.03)\r\n contrast(1.01)\r\n brightness(1);\r\n }\r\n\r\n .lc-st__tile:hover::after,\r\n .lc-st__tile:focus-visible::after{\r\n opacity:.82;\r\n }\r\n\r\n .lc-st__tile:hover .lc-st__tile-open,\r\n .lc-st__tile:focus-visible .lc-st__tile-open{\r\n color:var(--champagne);\r\n }\r\n\r\n .lc-st__tile:focus-visible{\r\n outline:1px solid rgba(122,63,134,.76) !important;\r\n outline-offset:-1px;\r\n }\r\n\r\n}\r\n\r\n\r\n\r\n\r\n\/* First-panel image hover fallback for embedded\/Elementor previews. *\/\r\n#lamina-service-track .lc-st__tile:hover .lc-st__tile-media,\r\n#lamina-service-track .lc-st__tile:focus-visible .lc-st__tile-media{\r\n transform:none;\r\n}\r\n\r\n#lamina-service-track .lc-st__tile:hover .lc-st__tile-media img,\r\n#lamina-service-track .lc-st__tile:focus-visible .lc-st__tile-media img{\r\n transform:\r\n scale(1.09)\r\n translate3d(0,-1.2%,0);\r\n\r\n filter:\r\n saturate(1.03)\r\n contrast(1.01)\r\n brightness(1);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n SERVICE SLIDES\r\n ========================================================= *\/\r\n\r\n.lc-st__service{\r\n display:grid;\r\n grid-template-columns:minmax(0,1.18fr) minmax(340px,.82fr);\r\n\r\n background:var(--aubergine-deep);\r\n}\r\n\r\n\r\n\/* image half *\/\r\n\r\n.lc-st__visual{\r\n position:relative;\r\n overflow:hidden;\r\n\r\n min-width:0;\r\n\r\n background:\r\n linear-gradient(\r\n 145deg,\r\n #150717,\r\n #25102A\r\n );\r\n}\r\n\r\n.lc-st__visual img{\r\n position:absolute;\r\n inset:0;\r\n\r\n width:100%;\r\n height:100%;\r\n\r\n object-fit:cover;\r\n object-position:var(--panel-image-position,50% 50%);\r\n\r\n filter:\r\n saturate(.91)\r\n brightness(.86)\r\n contrast(1.02);\r\n\r\n transform:scale(1.025);\r\n\r\n transition:\r\n transform 6.5s cubic-bezier(.2,.6,.2,1),\r\n filter 1.1s ease;\r\n\r\n pointer-events:none;\r\n user-select:none;\r\n}\r\n\r\n.lc-st__slide.is-active .lc-st__visual img{\r\n transform:scale(1.075);\r\n\r\n filter:\r\n saturate(1)\r\n brightness(.94)\r\n contrast(1.02);\r\n}\r\n\r\n.lc-st__visual::after{\r\n content:\"\";\r\n\r\n position:absolute;\r\n z-index:1;\r\n inset:0;\r\n\r\n background:\r\n linear-gradient(\r\n 90deg,\r\n rgba(13,5,15,.18) 0%,\r\n rgba(21,7,23,.04) 56%,\r\n rgba(50,18,58,.46) 100%\r\n );\r\n\r\n pointer-events:none;\r\n}\r\n\r\n\r\n\/* text half *\/\r\n\r\n.lc-st__content{\r\n position:relative;\r\n\r\n padding:\r\n clamp(72px,8.5vh,108px)\r\n clamp(34px,4.2vw,74px);\r\n\r\n display:flex;\r\n flex-direction:column;\r\n justify-content:center;\r\n\r\n color:var(--ink);\r\n\r\n background:\r\n radial-gradient(\r\n 78% 62% at 95% 4%,\r\n rgba(216,196,161,.18),\r\n transparent 64%\r\n ),\r\n radial-gradient(\r\n 54% 50% at 4% 96%,\r\n rgba(197,178,200,.11),\r\n transparent 72%\r\n ),\r\n linear-gradient(\r\n 145deg,\r\n #F7F2EA 0%,\r\n #F4EEE6 58%,\r\n #EFE5D7 100%\r\n );\r\n\r\n box-shadow:\r\n inset 28px 0 64px rgba(43,20,47,.045);\r\n}\r\n\r\n.lc-st__panel-number{\r\n margin:0 0 19px;\r\n\r\n color:rgba(95,36,104,.72);\r\n\r\n font-size:8px;\r\n line-height:1;\r\n font-weight:600;\r\n letter-spacing:.18em;\r\n text-transform:uppercase;\r\n}\r\n\r\n.lc-st__panel-title{\r\n margin:0;\r\n\r\n max-width:8.2ch;\r\n\r\n color:var(--aubergine);\r\n\r\n font-family:\"Cormorant Garamond\",Georgia,serif;\r\n font-size:clamp(58px,5vw,96px);\r\n line-height:.84;\r\n font-weight:400;\r\n letter-spacing:-.05em;\r\n}\r\n\r\n.lc-st__panel-title em{\r\n color:#7A3F86;\r\n\r\n font-style:italic;\r\n font-weight:400;\r\n}\r\n\r\n.lc-st__panel-desc{\r\n margin:\r\n clamp(25px,3vh,34px)\r\n 0\r\n 0;\r\n\r\n max-width:38ch;\r\n\r\n color:rgba(247,242,234,.72);\r\n\r\n font-size:clamp(13px,.94vw,16px);\r\n line-height:1.72;\r\n}\r\n\r\n.lc-st__services{\r\n margin-top:clamp(28px,3.5vh,42px);\r\n\r\n display:grid;\r\n grid-template-columns:repeat(2,minmax(0,1fr));\r\n\r\n border-top:1px solid rgba(216,196,161,.62);\r\n}\r\n\r\n.lc-st__service-name{\r\n min-width:0;\r\n\r\n padding:\r\n 12px\r\n 10px\r\n 12px\r\n 0;\r\n\r\n border-bottom:1px solid rgba(216,196,161,.48);\r\n\r\n color:rgba(43,20,47,.78);\r\n\r\n font-size:8px;\r\n line-height:1.45;\r\n font-weight:500;\r\n letter-spacing:.07em;\r\n text-transform:uppercase;\r\n}\r\n\r\n.lc-st__service-name:nth-child(2n){\r\n padding-left:10px;\r\n border-left:1px solid rgba(216,196,161,.48);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n TRANSITION DETAIL\r\n Only small text children receive staggered movement.\r\n The heavy blur stays on the WHOLE slide.\r\n ========================================================= *\/\r\n\r\n.lc-st__service .lc-st__content > *{\r\n opacity:0;\r\n\r\n transform:translate3d(0,18px,0);\r\n\r\n transition:\r\n opacity .62s ease,\r\n transform .86s var(--motion);\r\n}\r\n\r\n.lc-st__service.is-active .lc-st__content > *{\r\n opacity:1;\r\n\r\n transform:translate3d(0,0,0);\r\n}\r\n\r\n.lc-st__service.is-active .lc-st__content > :nth-child(1){\r\n transition-delay:.12s;\r\n}\r\n\r\n.lc-st__service.is-active .lc-st__content > :nth-child(2){\r\n transition-delay:.18s;\r\n}\r\n\r\n.lc-st__service.is-active .lc-st__content > :nth-child(3){\r\n transition-delay:.25s;\r\n}\r\n\r\n.lc-st__service.is-active .lc-st__content > :nth-child(4){\r\n transition-delay:.32s;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n PROGRESS\r\n ========================================================= *\/\r\n\r\n.lc-st__progress{\r\n position:absolute;\r\n z-index:30;\r\n\r\n right:clamp(16px,2vw,30px);\r\n top:50%;\r\n\r\n display:grid;\r\n gap:9px;\r\n\r\n transform:translateY(-50%);\r\n\r\n pointer-events:none;\r\n}\r\n\r\n.lc-st__dot{\r\n width:5px;\r\n height:24px;\r\n\r\n border-radius:999px;\r\n\r\n background:rgba(216,196,161,.34);\r\n\r\n transform:scaleY(.22);\r\n\r\n transition:\r\n transform .46s var(--motion),\r\n background-color .36s ease;\r\n}\r\n\r\n.lc-st__dot.is-active{\r\n transform:scaleY(1);\r\n\r\n background:var(--plum);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n DIRECT-CLICK BLUR VEIL\r\n ========================================================= *\/\r\n\r\n.lc-st__jumpveil{\r\n position:fixed;\r\n z-index:99999;\r\n inset:0;\r\n\r\n pointer-events:none;\r\n\r\n opacity:0;\r\n visibility:hidden;\r\n\r\n background:rgba(23,19,23,.07);\r\n\r\n backdrop-filter:blur(0);\r\n -webkit-backdrop-filter:blur(0);\r\n\r\n transition:\r\n opacity .40s var(--motion),\r\n backdrop-filter .52s var(--motion),\r\n -webkit-backdrop-filter .52s var(--motion),\r\n visibility 0s linear .62s;\r\n}\r\n\r\n.lc-st__jumpveil.is-active{\r\n opacity:1;\r\n visibility:visible;\r\n\r\n backdrop-filter:blur(24px);\r\n -webkit-backdrop-filter:blur(24px);\r\n\r\n transition:\r\n opacity .40s var(--motion),\r\n backdrop-filter .52s var(--motion),\r\n -webkit-backdrop-filter .52s var(--motion),\r\n visibility 0s;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n TABLET\r\n Desktop master-track behavior remains intact.\r\n ========================================================= *\/\r\n\r\n@media (max-width:1024px) and (min-width:701px){\r\n #lamina-service-track{height:590vh;}\r\n .lc-st__service{grid-template-columns:1fr 1fr;}\r\n .lc-st__content{padding:68px clamp(28px,4vw,44px);}\r\n}\r\n\r\n\/* =========================================================\r\n V19 \u2014 PHONE-ONLY REBUILD\r\n COMPLETELY DIFFERENT MOBILE EXPERIENCE\r\n\r\n No 560vh master track.\r\n No sticky 100svh camera.\r\n No slide replacement.\r\n No jump veil.\r\n\r\n Phone becomes a normal editorial document:\r\n intro + horizontal chooser + five service chapters.\r\n ========================================================= *\/\r\n\r\n@media (max-width:700px){\r\n #lamina-service-track{\r\n height:auto !important;\r\n min-height:0;\r\n overflow:visible;\r\n background:#F7F2EA;\r\n }\r\n\r\n .lc-st__camera{\r\n position:relative !important;\r\n top:auto !important;\r\n width:100%;\r\n height:auto !important;\r\n overflow:visible !important;\r\n background:transparent;\r\n }\r\n\r\n .lc-st__slide,\r\n .lc-st__slide.is-active,\r\n .lc-st__slide.is-transitioning-out{\r\n position:relative !important;\r\n inset:auto !important;\r\n width:100%;\r\n height:auto !important;\r\n min-height:0;\r\n opacity:1 !important;\r\n visibility:visible !important;\r\n filter:none !important;\r\n transform:none !important;\r\n pointer-events:auto !important;\r\n transition:none !important;\r\n contain:none;\r\n will-change:auto;\r\n }\r\n\r\n \/* ---------- intro ---------- *\/\r\n .lc-st__intro{\r\n position:relative;\r\n inset:auto;\r\n min-height:100svh;\r\n height:auto;\r\n padding:max(82px,calc(62px + env(safe-area-inset-top))) 18px 46px;\r\n display:block;\r\n color:var(--lc-ivory);\r\n background:\r\n radial-gradient(78% 54% at 96% 2%,rgba(148,112,154,.19),transparent 66%),\r\n radial-gradient(65% 48% at 0% 92%,rgba(95,36,104,.24),transparent 72%),\r\n linear-gradient(155deg,#3A183F 0%,#2B142F 54%,#211023 100%) !important;\r\n }\r\n\r\n .lc-st__intro-inner{width:100%;margin:0;}\r\n .lc-st__intro-head{display:block;margin:0 0 34px;}\r\n .lc-st__eyebrow{margin-bottom:14px;font-size:11px !important;line-height:1.2 !important;letter-spacing:.16em !important;}\r\n .lc-st__intro-title{max-width:7.8ch;font-size:clamp(54px,15.4vw,70px);line-height:.88;letter-spacing:-.05em;}\r\n .lc-st__intro-copy{margin:22px 0 0;max-width:34ch;color:rgba(247,242,234,.72) !important;font-size:15px !important;line-height:1.62 !important;}\r\n\r\n \/* horizontal treatment chooser \u2014 intentionally shows the next card *\/\r\n .lc-st__tiles{\r\n display:grid;\r\n grid-auto-flow:column;\r\n grid-template-columns:none;\r\n grid-auto-columns:min(78vw,330px);\r\n gap:14px;\r\n width:calc(100% + 18px);\r\n height:auto;\r\n margin-right:-18px;\r\n padding:2px 18px 16px 0;\r\n overflow-x:auto;\r\n overflow-y:hidden;\r\n scroll-snap-type:x proximity;\r\n scroll-padding-left:0;\r\n overscroll-behavior-x:contain;\r\n -webkit-overflow-scrolling:touch;\r\n scrollbar-width:none;\r\n touch-action:pan-x pan-y;\r\n }\r\n .lc-st__tiles::-webkit-scrollbar{display:none;}\r\n\r\n .lc-st__tile,\r\n .lc-st__tile:nth-child(2),\r\n .lc-st__tile:nth-child(4){\r\n --tile-shift:0px;\r\n position:relative;\r\n width:100%;\r\n height:clamp(390px,53svh,480px);\r\n transform:none !important;\r\n scroll-snap-align:start;\r\n border-radius:10px !important;\r\n box-shadow:inset 0 0 0 1px rgba(247,242,234,.09),0 18px 44px rgba(15,5,17,.17) !important;\r\n }\r\n\r\n .lc-st__tile-media,\r\n #lamina-service-track .lc-st__tile:hover .lc-st__tile-media,\r\n #lamina-service-track .lc-st__tile:focus-visible .lc-st__tile-media{transform:none !important;transition:none;}\r\n\r\n .lc-st__tile-media img,\r\n #lamina-service-track .lc-st__tile:hover .lc-st__tile-media img,\r\n #lamina-service-track .lc-st__tile:focus-visible .lc-st__tile-media img{\r\n transform:scale(1.035) !important;\r\n filter:saturate(.96) contrast(1) brightness(.93) !important;\r\n transition:none;\r\n }\r\n\r\n .lc-st__tile-copy{left:18px;right:18px;bottom:18px;}\r\n .lc-st__tile-index{margin-bottom:8px;font-size:10.5px !important;line-height:1.15 !important;}\r\n .lc-st__tile-name{max-width:9.5ch;font-size:clamp(31px,9.5vw,40px) !important;line-height:.95 !important;}\r\n .lc-st__tile-open{margin-top:12px;font-size:10.5px !important;}\r\n\r\n \/* ---------- service chapters ---------- *\/\r\n .lc-st__service{\r\n display:block !important;\r\n min-height:0;\r\n padding:0 0 34px;\r\n background:#F7F2EA !important;\r\n border-top:1px solid rgba(95,36,104,.10);\r\n }\r\n\r\n .lc-st__visual{\r\n position:relative !important;\r\n inset:auto !important;\r\n width:100%;\r\n height:clamp(360px,54svh,520px);\r\n overflow:hidden;\r\n background:linear-gradient(145deg,#171317,#2B142F) !important;\r\n }\r\n\r\n .lc-st__visual img{\r\n position:absolute;\r\n inset:0;\r\n width:100%;\r\n height:100%;\r\n object-fit:cover;\r\n transform:scale(1.035);\r\n filter:saturate(.96) brightness(.90) contrast(1.01);\r\n transition:transform 1.2s var(--motion),filter .9s ease;\r\n }\r\n\r\n .lc-st__service.is-mobile-current .lc-st__visual img{\r\n transform:scale(1.065);\r\n filter:saturate(1) brightness(.95) contrast(1.01);\r\n }\r\n\r\n .lc-st__visual::after{\r\n background:linear-gradient(180deg,rgba(23,19,23,.03) 0%,rgba(43,20,47,.05) 58%,rgba(43,20,47,.44) 100%) !important;\r\n }\r\n\r\n .lc-st__content{\r\n position:relative !important;\r\n inset:auto !important;\r\n z-index:3;\r\n width:calc(100% - 24px);\r\n margin:-30px 12px 0;\r\n padding:29px 18px 26px;\r\n display:block;\r\n overflow:visible;\r\n color:var(--lc-ink) !important;\r\n background:\r\n radial-gradient(86% 54% at 100% 0%,rgba(216,196,161,.14),transparent 66%),\r\n linear-gradient(145deg,#F7F2EA 0%,#F4ECE2 100%) !important;\r\n box-shadow:0 -16px 42px rgba(43,20,47,.08) !important;\r\n }\r\n\r\n .lc-st__service .lc-st__content > *,\r\n .lc-st__service.is-active .lc-st__content > *{\r\n opacity:1 !important;\r\n transform:none !important;\r\n transition:none !important;\r\n }\r\n\r\n .lc-st__panel-number{margin:0 0 11px;font-size:11px !important;line-height:1.2 !important;letter-spacing:.14em !important;}\r\n .lc-st__panel-title{max-width:8.2ch;font-size:clamp(47px,13.8vw,61px);line-height:.86;}\r\n .lc-st__panel-desc{margin-top:19px;max-width:34ch;color:rgba(23,19,23,.70) !important;font-size:15px !important;line-height:1.60 !important;}\r\n\r\n .lc-st__services{margin-top:23px;display:block;border-top:1px solid rgba(216,196,161,.78) !important;}\r\n .lc-st__service-name,\r\n .lc-st__service-name:nth-child(2n){\r\n display:block;\r\n min-height:0;\r\n padding:12px 0 !important;\r\n border-left:0 !important;\r\n border-bottom:1px solid rgba(216,196,161,.56) !important;\r\n color:rgba(43,20,47,.82) !important;\r\n font-size:12.5px !important;\r\n line-height:1.42 !important;\r\n letter-spacing:.045em !important;\r\n }\r\n\r\n .lc-st__progress,.lc-st__jumpveil{display:none !important;}\r\n\r\n \/*\r\n PERMANENT LAMINA MOBILE RULE:\r\n no scrolling \/ exit \/ distance blur on phone.\r\n *\/\r\n .lc-st__intro-head,\r\n .lc-st__tiles,\r\n .lc-st__service .lc-st__visual,\r\n .lc-st__service .lc-st__content{\r\n filter:none !important;\r\n opacity:1 !important;\r\n translate:none !important;\r\n }\r\n}\r\n\r\n@media (max-width:390px){\r\n .lc-st__intro{padding-left:16px;padding-right:16px;}\r\n .lc-st__tiles{width:calc(100% + 16px);margin-right:-16px;padding-right:16px;grid-auto-columns:min(82vw,312px);}\r\n .lc-st__tile{height:clamp(372px,51svh,452px);}\r\n .lc-st__content{width:calc(100% - 20px);margin-left:10px;margin-right:10px;padding-left:16px;padding-right:16px;}\r\n .lc-st__panel-title{font-size:clamp(44px,13.2vw,56px);}\r\n}\r\n\r\n\/* =========================================================\r\n REDUCED MOTION\r\n ========================================================= *\/\r\n\r\n@media (prefers-reduced-motion:reduce){\r\n\r\n #lamina-service-track{\r\n height:auto;\r\n }\r\n\r\n .lc-st__camera{\r\n position:relative;\r\n\r\n height:auto;\r\n\r\n overflow:visible;\r\n }\r\n\r\n .lc-st__slide{\r\n position:relative;\r\n\r\n min-height:100svh;\r\n\r\n opacity:1 !important;\r\n visibility:visible !important;\r\n\r\n filter:none !important;\r\n transform:none !important;\r\n\r\n pointer-events:auto !important;\r\n\r\n transition:none !important;\r\n }\r\n\r\n .lc-st__service .lc-st__content > *{\r\n opacity:1 !important;\r\n transform:none !important;\r\n transition:none !important;\r\n }\r\n\r\n .lc-st__progress,\r\n .lc-st__jumpveil{\r\n display:none !important;\r\n }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n V17 \u2014 FINAL LAMINA COLOR SYSTEM\r\n Scoped overrides only. No layout, motion, scroll or JS changes.\r\n ========================================================= *\/\r\n\r\n#lamina-service-track{\r\n --lc-aubergine:#2B142F;\r\n --lc-plum:#5F2468;\r\n --lc-title-purple:#7A3F86;\r\n --lc-orchid:#94709A;\r\n --lc-lilac:#C5B2C8;\r\n --lc-ivory:#F7F2EA;\r\n --lc-champagne:#D8C4A1;\r\n --lc-ink:#171317;\r\n --lc-stone:#E8E1E4;\r\n}\r\n\r\n\r\n\/* ---------- FIRST PANEL ---------- *\/\r\n\r\n#lamina-service-track .lc-st__intro{\r\n color:var(--lc-ivory);\r\n\r\n background:\r\n radial-gradient(\r\n 50% 42% at 88% 8%,\r\n rgba(148,112,154,.16),\r\n transparent 72%\r\n ),\r\n radial-gradient(\r\n 42% 34% at 10% 92%,\r\n rgba(216,196,161,.08),\r\n transparent 74%\r\n ),\r\n linear-gradient(\r\n 145deg,\r\n #3A183F 0%,\r\n #2B142F 54%,\r\n #241027 100%\r\n ) !important;\r\n}\r\n\r\n#lamina-service-track .lc-st__eyebrow{\r\n color:var(--lc-champagne) !important;\r\n}\r\n\r\n#lamina-service-track .lc-st__intro-title{\r\n color:var(--lc-ivory) !important;\r\n}\r\n\r\n#lamina-service-track .lc-st__intro-title em{\r\n color:var(--lc-lilac) !important;\r\n}\r\n\r\n#lamina-service-track .lc-st__intro-copy{\r\n color:rgba(247,242,234,.72) !important;\r\n}\r\n\r\n\r\n\/* first-panel image cards \/ placeholders *\/\r\n\r\n#lamina-service-track .lc-st__tile{\r\n color:var(--lc-ivory) !important;\r\n background:var(--lc-stone) !important;\r\n box-shadow:\r\n inset 0 0 0 1px rgba(247,242,234,.08) !important;\r\n}\r\n\r\n#lamina-service-track .lc-st__tile-media{\r\n background:\r\n linear-gradient(\r\n 145deg,\r\n #E8E1E4 0%,\r\n #C5B2C8 48%,\r\n #94709A 100%\r\n ) !important;\r\n}\r\n\r\n#lamina-service-track .lc-st__tile::after{\r\n background:\r\n linear-gradient(\r\n 180deg,\r\n rgba(43,20,47,.02) 18%,\r\n rgba(43,20,47,.10) 54%,\r\n rgba(43,20,47,.68) 100%\r\n ) !important;\r\n}\r\n\r\n#lamina-service-track .lc-st__tile-index{\r\n color:var(--lc-champagne) !important;\r\n}\r\n\r\n#lamina-service-track .lc-st__tile-name{\r\n color:var(--lc-ivory) !important;\r\n}\r\n\r\n#lamina-service-track .lc-st__tile-open{\r\n color:rgba(247,242,234,.68) !important;\r\n}\r\n\r\n#lamina-service-track .lc-st__tile:hover .lc-st__tile-open,\r\n#lamina-service-track .lc-st__tile:focus-visible .lc-st__tile-open{\r\n color:var(--lc-champagne) !important;\r\n}\r\n\r\n\r\n\/* ---------- SERVICE PANELS ---------- *\/\r\n\r\n\/* left\/image side *\/\r\n\r\n#lamina-service-track .lc-st__service{\r\n background:var(--lc-aubergine) !important;\r\n}\r\n\r\n#lamina-service-track .lc-st__visual{\r\n background:\r\n linear-gradient(\r\n 145deg,\r\n #171317 0%,\r\n #241027 50%,\r\n #2B142F 100%\r\n ) !important;\r\n}\r\n\r\n#lamina-service-track .lc-st__visual::after{\r\n background:\r\n linear-gradient(\r\n 90deg,\r\n rgba(23,19,23,.18) 0%,\r\n rgba(43,20,47,.05) 56%,\r\n rgba(43,20,47,.42) 100%\r\n ) !important;\r\n}\r\n\r\n\r\n\/* right\/content side *\/\r\n\r\n#lamina-service-track .lc-st__content{\r\n color:var(--lc-ink) !important;\r\n\r\n background:\r\n radial-gradient(\r\n 72% 58% at 94% 4%,\r\n rgba(216,196,161,.14),\r\n transparent 64%\r\n ),\r\n radial-gradient(\r\n 52% 46% at 6% 96%,\r\n rgba(197,178,200,.10),\r\n transparent 72%\r\n ),\r\n linear-gradient(\r\n 145deg,\r\n #F7F2EA 0%,\r\n #F6F0E8 64%,\r\n #F1E7DA 100%\r\n ) !important;\r\n\r\n box-shadow:\r\n inset 28px 0 64px rgba(43,20,47,.035) !important;\r\n}\r\n\r\n#lamina-service-track .lc-st__panel-number{\r\n color:var(--lc-plum) !important;\r\n}\r\n\r\n#lamina-service-track .lc-st__panel-title{\r\n color:var(--lc-ink) !important;\r\n}\r\n\r\n#lamina-service-track .lc-st__panel-title em{\r\n color:var(--lc-title-purple) !important;\r\n}\r\n\r\n#lamina-service-track .lc-st__panel-desc{\r\n color:rgba(23,19,23,.68) !important;\r\n}\r\n\r\n#lamina-service-track .lc-st__services{\r\n border-top-color:rgba(216,196,161,.74) !important;\r\n}\r\n\r\n#lamina-service-track .lc-st__service-name{\r\n color:rgba(43,20,47,.82) !important;\r\n border-bottom-color:rgba(216,196,161,.56) !important;\r\n}\r\n\r\n#lamina-service-track .lc-st__service-name:nth-child(2n){\r\n border-left-color:rgba(216,196,161,.56) !important;\r\n}\r\n\r\n\r\n\/* progress *\/\r\n\r\n#lamina-service-track .lc-st__dot{\r\n background:rgba(148,112,154,.34) !important;\r\n}\r\n\r\n#lamina-service-track .lc-st__dot.is-active{\r\n background:var(--lc-plum) !important;\r\n}\r\n\r\n\r\n\/* direct-jump transition stays neutral, never purple *\/\r\n\r\n#lamina-service-track .lc-st__jumpveil{\r\n background:rgba(23,19,23,.07) !important;\r\n}\r\n\r\n\r\n\/* mobile color system follows the same Lamina palette *\/\r\n@media (max-width:700px){\r\n #lamina-service-track .lc-st__content{color:var(--lc-ink) !important;}\r\n #lamina-service-track .lc-st__panel-title{color:var(--lc-ink) !important;}\r\n #lamina-service-track .lc-st__panel-title em{color:var(--lc-title-purple) !important;}\r\n #lamina-service-track .lc-st__panel-desc{color:rgba(23,19,23,.70) !important;}\r\n}\r\n\r\n\/* =========================================================\r\n V18 \u2014 READABILITY TYPOGRAPHY PASS\r\n General Lamina rule:\r\n - no decorative\/UI text below ~11px\r\n - body\/supporting copy stays comfortably readable\r\n - mobile text is never compressed into tiny 7\u20139px labels\r\n ========================================================= *\/\r\n\r\n\/* First-panel supporting text *\/\r\n#lamina-service-track .lc-st__eyebrow{\r\n font-size:clamp(11px,.72vw,13px) !important;\r\n line-height:1.2 !important;\r\n letter-spacing:.17em !important;\r\n}\r\n\r\n#lamina-service-track .lc-st__intro-copy{\r\n font-size:clamp(16px,1.05vw,18px) !important;\r\n line-height:1.72 !important;\r\n}\r\n\r\n\/* First-panel image-card text *\/\r\n#lamina-service-track .lc-st__tile-index{\r\n font-size:clamp(10px,.68vw,12px) !important;\r\n line-height:1.15 !important;\r\n letter-spacing:.12em !important;\r\n}\r\n\r\n#lamina-service-track .lc-st__tile-name{\r\n font-size:clamp(27px,2.05vw,38px) !important;\r\n line-height:.96 !important;\r\n}\r\n\r\n#lamina-service-track .lc-st__tile-open{\r\n font-size:clamp(10px,.68vw,12px) !important;\r\n line-height:1.2 !important;\r\n letter-spacing:.11em !important;\r\n}\r\n\r\n\/* Service-panel metadata + body *\/\r\n#lamina-service-track .lc-st__panel-number{\r\n font-size:clamp(11px,.72vw,13px) !important;\r\n line-height:1.2 !important;\r\n letter-spacing:.15em !important;\r\n}\r\n\r\n#lamina-service-track .lc-st__panel-desc{\r\n font-size:clamp(16px,1.02vw,18px) !important;\r\n line-height:1.68 !important;\r\n}\r\n\r\n#lamina-service-track .lc-st__service-name{\r\n font-size:clamp(11px,.76vw,13px) !important;\r\n line-height:1.45 !important;\r\n letter-spacing:.055em !important;\r\n}\r\n\r\n\/* Tablet *\/\r\n@media (max-width:1024px){\r\n\r\n #lamina-service-track .lc-st__eyebrow{\r\n font-size:11px !important;\r\n }\r\n\r\n #lamina-service-track .lc-st__intro-copy{\r\n font-size:16px !important;\r\n }\r\n\r\n #lamina-service-track .lc-st__tile-index,\r\n #lamina-service-track .lc-st__tile-open{\r\n font-size:10px !important;\r\n }\r\n\r\n #lamina-service-track .lc-st__panel-number{\r\n font-size:11px !important;\r\n }\r\n\r\n #lamina-service-track .lc-st__panel-desc{\r\n font-size:16px !important;\r\n }\r\n\r\n #lamina-service-track .lc-st__service-name{\r\n font-size:11px !important;\r\n }\r\n\r\n}\r\n\r\n\/* Mobile \u2014 explicit readability floor for the rebuilt phone layout *\/\r\n@media (max-width:700px){\r\n #lamina-service-track .lc-st__eyebrow{font-size:11px !important;line-height:1.25 !important;}\r\n #lamina-service-track .lc-st__intro-copy{font-size:15px !important;line-height:1.62 !important;}\r\n #lamina-service-track .lc-st__tile-index,#lamina-service-track .lc-st__tile-open{font-size:10.5px !important;}\r\n #lamina-service-track .lc-st__tile-name{font-size:clamp(31px,9.5vw,40px) !important;line-height:.95 !important;}\r\n #lamina-service-track .lc-st__panel-number{font-size:11px !important;}\r\n #lamina-service-track .lc-st__panel-desc{font-size:15px !important;line-height:1.60 !important;}\r\n #lamina-service-track .lc-st__service-name{font-size:12.5px !important;line-height:1.42 !important;}\r\n}\r\n<\/style>\r\n\r\n\r\n<section\r\n id=\"lamina-service-track\"\r\n aria-label=\"Lamina treatment services\"\r\n>\r\n\r\n\r\n <div class=\"lc-st__camera\">\r\n\r\n\r\n <!-- ===================================================\r\n SLIDE 00 \u2014 SERVICE SELECTOR\r\n =================================================== -->\r\n\r\n <article\r\n class=\"lc-st__slide lc-st__intro is-active\"\r\n data-slide=\"0\"\r\n aria-hidden=\"false\"\r\n >\r\n\r\n <div class=\"lc-st__intro-inner\">\r\n\r\n <header class=\"lc-st__intro-head\">\r\n\r\n <div>\r\n\r\n <p class=\"lc-st__eyebrow\">\r\n Hair \u00b7 Dental \u00b7 Istanbul\r\n <\/p>\r\n\r\n <h2 class=\"lc-st__intro-title\">\r\n Choose what\r\n <em>matters to you.<\/em>\r\n <\/h2>\r\n\r\n <\/div>\r\n\r\n <p class=\"lc-st__intro-copy\">\r\n Explore Lamina by treatment area. Scroll naturally to continue,\r\n or choose a service below to move directly into its treatment panel.\r\n <\/p>\r\n\r\n <\/header>\r\n\r\n\r\n <div\r\n class=\"lc-st__tiles\"\r\n aria-label=\"Choose a treatment area\"\r\n >\r\n\r\n <button\r\n class=\"lc-st__tile\"\r\n type=\"button\"\r\n data-target-slide=\"1\" style=\"--tile-image-position:50% 24%;\"\r\n aria-label=\"Open Hair Restoration\"\r\n >\r\n <span class=\"lc-st__tile-media\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/hair-scaled.webp\"\r\n alt=\"\"\r\n aria-hidden=\"true\"\r\n onerror=\"this.style.display='none'\"\r\n >\r\n <\/span>\r\n\r\n <span class=\"lc-st__tile-shade\" aria-hidden=\"true\"><\/span>\r\n\r\n <span class=\"lc-st__tile-copy\">\r\n <span class=\"lc-st__tile-index\">01 \u00b7 Hair<\/span>\r\n <strong class=\"lc-st__tile-name\">Hair Restoration<\/strong>\r\n <span class=\"lc-st__tile-open\">Explore \u2192<\/span>\r\n <\/span>\r\n <\/button>\r\n\r\n\r\n <button\r\n class=\"lc-st__tile\"\r\n type=\"button\"\r\n data-target-slide=\"2\" style=\"--tile-image-position:50% 28%;\"\r\n aria-label=\"Open Brow and Beard Restoration\"\r\n >\r\n <span class=\"lc-st__tile-media\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/confident-young-man-with-well-groomed-beard-posing-2026-05-21-18-30-12-utc-scaled.webp\"\r\n alt=\"\"\r\n aria-hidden=\"true\"\r\n onerror=\"this.style.display='none'\"\r\n >\r\n <\/span>\r\n\r\n <span class=\"lc-st__tile-shade\" aria-hidden=\"true\"><\/span>\r\n\r\n <span class=\"lc-st__tile-copy\">\r\n <span class=\"lc-st__tile-index\">02 \u00b7 Hair<\/span>\r\n <strong class=\"lc-st__tile-name\">Brow & Beard<\/strong>\r\n <span class=\"lc-st__tile-open\">Explore \u2192<\/span>\r\n <\/span>\r\n <\/button>\r\n\r\n\r\n <button\r\n class=\"lc-st__tile\"\r\n type=\"button\"\r\n data-target-slide=\"3\" style=\"--tile-image-position:50% 42%;\"\r\n aria-label=\"Open Smile Aesthetics\"\r\n >\r\n <span class=\"lc-st__tile-media\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/smile-scaled.webp\"\r\n alt=\"\"\r\n aria-hidden=\"true\"\r\n onerror=\"this.style.display='none'\"\r\n >\r\n <\/span>\r\n\r\n <span class=\"lc-st__tile-shade\" aria-hidden=\"true\"><\/span>\r\n\r\n <span class=\"lc-st__tile-copy\">\r\n <span class=\"lc-st__tile-index\">03 \u00b7 Dental<\/span>\r\n <strong class=\"lc-st__tile-name\">Smile Design<\/strong>\r\n <span class=\"lc-st__tile-open\">Explore \u2192<\/span>\r\n <\/span>\r\n <\/button>\r\n\r\n\r\n <button\r\n class=\"lc-st__tile\"\r\n type=\"button\"\r\n data-target-slide=\"4\" style=\"--tile-image-position:50% 50%;\"\r\n aria-label=\"Open Crowns and Dental Care\"\r\n >\r\n <span class=\"lc-st__tile-media\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/crown-scaled.webp\"\r\n alt=\"\"\r\n aria-hidden=\"true\"\r\n onerror=\"this.style.display='none'\"\r\n >\r\n <\/span>\r\n\r\n <span class=\"lc-st__tile-shade\" aria-hidden=\"true\"><\/span>\r\n\r\n <span class=\"lc-st__tile-copy\">\r\n <span class=\"lc-st__tile-index\">04 \u00b7 Dental<\/span>\r\n <strong class=\"lc-st__tile-name\">Crowns & Care<\/strong>\r\n <span class=\"lc-st__tile-open\">Explore \u2192<\/span>\r\n <\/span>\r\n <\/button>\r\n\r\n\r\n <button\r\n class=\"lc-st__tile\"\r\n type=\"button\"\r\n data-target-slide=\"5\" style=\"--tile-image-position:50% 50%;\"\r\n aria-label=\"Open Dental Implants\"\r\n >\r\n <span class=\"lc-st__tile-media\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/dental-implant-model-with-glove-in-medical-setting-2026-03-27-01-40-41-utc-scaled.webp\"\r\n alt=\"\"\r\n aria-hidden=\"true\"\r\n onerror=\"this.style.display='none'\"\r\n >\r\n <\/span>\r\n\r\n <span class=\"lc-st__tile-shade\" aria-hidden=\"true\"><\/span>\r\n\r\n <span class=\"lc-st__tile-copy\">\r\n <span class=\"lc-st__tile-index\">05 \u00b7 Dental<\/span>\r\n <strong class=\"lc-st__tile-name\">Dental Implants<\/strong>\r\n <span class=\"lc-st__tile-open\">Explore \u2192<\/span>\r\n <\/span>\r\n <\/button>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/article>\r\n\r\n\r\n <!-- ===================================================\r\n SLIDE 01 \u2014 HAIR RESTORATION\r\n =================================================== -->\r\n\r\n <article\r\n class=\"lc-st__slide lc-st__service\"\r\n data-slide=\"1\" style=\"--panel-image-position:50% 30%;\"\r\n aria-hidden=\"true\"\r\n >\r\n\r\n <div class=\"lc-st__visual\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/hair-scaled.webp\"\r\n alt=\"\"\r\n aria-hidden=\"true\"\r\n onerror=\"this.style.display='none'\"\r\n >\r\n <\/div>\r\n\r\n\r\n <div class=\"lc-st__content\">\r\n\r\n <p class=\"lc-st__panel-number\">\r\n 01 \/ 05 \u00b7 Hair\r\n <\/p>\r\n\r\n\r\n <h3 class=\"lc-st__panel-title\">\r\n Hair <em>Restoration.<\/em>\r\n <\/h3>\r\n\r\n\r\n <p class=\"lc-st__panel-desc\">\r\n Hair-transplant techniques selected around donor area,\r\n hair characteristics, treatment goals and medical assessment.\r\n <\/p>\r\n\r\n\r\n <div class=\"lc-st__services\">\r\n <span class=\"lc-st__service-name\">Sapphire FUE<\/span>\r\n <span class=\"lc-st__service-name\">DHI<\/span>\r\n <span class=\"lc-st__service-name\">FUE<\/span>\r\n <span class=\"lc-st__service-name\">Unshaven Hair Transplant<\/span>\r\n <span class=\"lc-st__service-name\">Female Hair Transplant<\/span>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/article>\r\n\r\n\r\n\r\n <!-- ===================================================\r\n SLIDE 02 \u2014 BROW & BEARD\r\n =================================================== -->\r\n\r\n <article\r\n class=\"lc-st__slide lc-st__service\"\r\n data-slide=\"2\" style=\"--panel-image-position:50% 34%;\"\r\n aria-hidden=\"true\"\r\n >\r\n\r\n <div class=\"lc-st__visual\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/confident-young-man-with-well-groomed-beard-posing-2026-05-21-18-30-12-utc-scaled.webp\"\r\n alt=\"\"\r\n aria-hidden=\"true\"\r\n onerror=\"this.style.display='none'\"\r\n >\r\n <\/div>\r\n\r\n\r\n <div class=\"lc-st__content\">\r\n\r\n <p class=\"lc-st__panel-number\">\r\n 02 \/ 05 \u00b7 Hair\r\n <\/p>\r\n\r\n\r\n <h3 class=\"lc-st__panel-title\">\r\n Brow & <em>Beard.<\/em>\r\n <\/h3>\r\n\r\n\r\n <p class=\"lc-st__panel-desc\">\r\n Focused restoration for facial-hair areas where direction,\r\n shape and density require detailed planning.\r\n <\/p>\r\n\r\n\r\n <div class=\"lc-st__services\">\r\n <span class=\"lc-st__service-name\">Eyebrow Transplant<\/span>\r\n <span class=\"lc-st__service-name\">Beard Transplant<\/span>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/article>\r\n\r\n\r\n\r\n <!-- ===================================================\r\n SLIDE 03 \u2014 SMILE AESTHETICS\r\n =================================================== -->\r\n\r\n <article\r\n class=\"lc-st__slide lc-st__service\"\r\n data-slide=\"3\" style=\"--panel-image-position:50% 45%;\"\r\n aria-hidden=\"true\"\r\n >\r\n\r\n <div class=\"lc-st__visual\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/smile-scaled.webp\"\r\n alt=\"\"\r\n aria-hidden=\"true\"\r\n onerror=\"this.style.display='none'\"\r\n >\r\n <\/div>\r\n\r\n\r\n <div class=\"lc-st__content\">\r\n\r\n <p class=\"lc-st__panel-number\">\r\n 03 \/ 05 \u00b7 Dental\r\n <\/p>\r\n\r\n\r\n <h3 class=\"lc-st__panel-title\">\r\n Smile <em>Aesthetics.<\/em>\r\n <\/h3>\r\n\r\n\r\n <p class=\"lc-st__panel-desc\">\r\n Cosmetic dental treatments focused on tooth shape,\r\n shade and overall smile proportion.\r\n <\/p>\r\n\r\n\r\n <div class=\"lc-st__services\">\r\n <span class=\"lc-st__service-name\">Digital Smile Design<\/span>\r\n <span class=\"lc-st__service-name\">Hollywood Smile<\/span>\r\n <span class=\"lc-st__service-name\">Emax Veneers<\/span>\r\n <span class=\"lc-st__service-name\">Lamine Veneers<\/span>\r\n <span class=\"lc-st__service-name\">Porcelain Veneers<\/span>\r\n <span class=\"lc-st__service-name\">Teeth Whitening<\/span>\r\n <span class=\"lc-st__service-name\">Gum Contouring<\/span>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/article>\r\n\r\n\r\n\r\n <!-- ===================================================\r\n SLIDE 04 \u2014 CROWNS & DENTAL CARE\r\n =================================================== -->\r\n\r\n <article\r\n class=\"lc-st__slide lc-st__service\"\r\n data-slide=\"4\" style=\"--panel-image-position:50% 50%;\"\r\n aria-hidden=\"true\"\r\n >\r\n\r\n <div class=\"lc-st__visual\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/crown-scaled.webp\"\r\n alt=\"\"\r\n aria-hidden=\"true\"\r\n onerror=\"this.style.display='none'\"\r\n >\r\n <\/div>\r\n\r\n\r\n <div class=\"lc-st__content\">\r\n\r\n <p class=\"lc-st__panel-number\">\r\n 04 \/ 05 \u00b7 Dental\r\n <\/p>\r\n\r\n\r\n <h3 class=\"lc-st__panel-title\">\r\n Crowns & <em>Dental Care.<\/em>\r\n <\/h3>\r\n\r\n\r\n <p class=\"lc-st__panel-desc\">\r\n Restorative options selected according to tooth condition,\r\n structure and the wider treatment plan.\r\n <\/p>\r\n\r\n\r\n <div class=\"lc-st__services\">\r\n <span class=\"lc-st__service-name\">Zirconium Crowns<\/span>\r\n <span class=\"lc-st__service-name\">Dental Crowns<\/span>\r\n <span class=\"lc-st__service-name\">Endodontics<\/span>\r\n <span class=\"lc-st__service-name\">Root Canal<\/span>\r\n <span class=\"lc-st__service-name\">Periodontology<\/span>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/article>\r\n\r\n\r\n\r\n <!-- ===================================================\r\n SLIDE 05 \u2014 IMPLANT DENTISTRY\r\n =================================================== -->\r\n\r\n <article\r\n class=\"lc-st__slide lc-st__service\"\r\n data-slide=\"5\" style=\"--panel-image-position:50% 50%;\"\r\n aria-hidden=\"true\"\r\n >\r\n\r\n <div class=\"lc-st__visual\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/dental-implant-model-with-glove-in-medical-setting-2026-03-27-01-40-41-utc-scaled.webp\"\r\n alt=\"\"\r\n aria-hidden=\"true\"\r\n onerror=\"this.style.display='none'\"\r\n >\r\n <\/div>\r\n\r\n\r\n <div class=\"lc-st__content\">\r\n\r\n <p class=\"lc-st__panel-number\">\r\n 05 \/ 05 \u00b7 Dental\r\n <\/p>\r\n\r\n\r\n <h3 class=\"lc-st__panel-title\">\r\n Implant <em>Dentistry.<\/em>\r\n <\/h3>\r\n\r\n\r\n <p class=\"lc-st__panel-desc\">\r\n Implant-based options for individual, multiple or full-arch\r\n tooth replacement after appropriate clinical assessment.\r\n <\/p>\r\n\r\n\r\n <div class=\"lc-st__services\">\r\n <span class=\"lc-st__service-name\">Dental Implant<\/span>\r\n <span class=\"lc-st__service-name\">All-on-4<\/span>\r\n <span class=\"lc-st__service-name\">All-on-6<\/span>\r\n <span class=\"lc-st__service-name\">Same Day Teeth<\/span>\r\n <span class=\"lc-st__service-name\">Custom Implants<\/span>\r\n <span class=\"lc-st__service-name\">Zygomatic Implants<\/span>\r\n <span class=\"lc-st__service-name\">Toronto Dental Systems<\/span>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/article>\r\n\r\n\r\n\r\n <!-- progress -->\r\n <div class=\"lc-st__progress\" aria-hidden=\"true\">\r\n <span class=\"lc-st__dot is-active\"><\/span>\r\n <span class=\"lc-st__dot\"><\/span>\r\n <span class=\"lc-st__dot\"><\/span>\r\n <span class=\"lc-st__dot\"><\/span>\r\n <span class=\"lc-st__dot\"><\/span>\r\n <span class=\"lc-st__dot\"><\/span>\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n <div\r\n class=\"lc-st__jumpveil\"\r\n aria-hidden=\"true\"\r\n ><\/div>\r\n\r\n\r\n<\/section>\r\n\r\n\r\n<!-- =========================================================\r\nNEXT SECTION: BEFORE & AFTER\r\n========================================================= -->\r\n\r\n\r\n<noscript>\r\n<style>\r\n#lamina-service-track{\r\n height:auto !important;\r\n}\r\n#lamina-service-track .lc-st__camera{\r\n position:relative !important;\r\n height:auto !important;\r\n overflow:visible !important;\r\n}\r\n#lamina-service-track .lc-st__slide{\r\n position:relative !important;\r\n min-height:100vh !important;\r\n opacity:1 !important;\r\n visibility:visible !important;\r\n filter:none !important;\r\n transform:none !important;\r\n pointer-events:auto !important;\r\n}\r\n#lamina-service-track .lc-st__progress,\r\n#lamina-service-track .lc-st__jumpveil{\r\n display:none !important;\r\n}\r\n<\/style>\r\n<\/noscript>\r\n\r\n\r\n<script>\r\n(() => {\r\n\r\n const wrapper =\r\n document.getElementById(\r\n 'lamina-service-track'\r\n );\r\n\r\n\r\n if (\r\n !wrapper ||\r\n wrapper.dataset.laminaTrackReady === 'true'\r\n ) return;\r\n\r\n\r\n wrapper.dataset.laminaTrackReady =\r\n 'true';\r\n\r\n\r\n const slides =\r\n [\r\n ...wrapper.querySelectorAll(\r\n '.lc-st__slide'\r\n )\r\n ];\r\n\r\n\r\n const tiles =\r\n [\r\n ...wrapper.querySelectorAll(\r\n '[data-target-slide]'\r\n )\r\n ];\r\n\r\n\r\n const dots =\r\n [\r\n ...wrapper.querySelectorAll(\r\n '.lc-st__dot'\r\n )\r\n ];\r\n\r\n\r\n const jumpVeil =\r\n wrapper.querySelector(\r\n '.lc-st__jumpveil'\r\n );\r\n\r\n\r\n const reducedMotion =\r\n window.matchMedia(\r\n '(prefers-reduced-motion: reduce)'\r\n ).matches;\r\n\r\n\r\n const phoneQuery =\r\n window.matchMedia(\r\n '(max-width: 700px)'\r\n );\r\n\r\n\r\n let phoneMode =\r\n phoneQuery.matches;\r\n\r\n\r\n if (\r\n !slides.length\r\n ) return;\r\n\r\n\r\n let activeIndex =\r\n 0;\r\n\r\n\r\n let ticking =\r\n false;\r\n\r\n\r\n let transitionTimer =\r\n null;\r\n\r\n\r\n \/*\r\n Same geometry model as the supplied reference:\r\n - wrapper's top relative to viewport\r\n - total scrollable distance = wrapper height - viewport height\r\n *\/\r\n \/*\r\n Mobile scroll-depth blur intentionally disabled project-wide.\r\n Existing call sites remain stable through this no-op.\r\n *\/\r\n function updateMobileDepth(){\r\n return;\r\n }\r\n\r\n\r\n function syncPhoneSlides(){\r\n if (!phoneMode) return;\r\n\r\n slides.forEach((slide,index) => {\r\n slide.classList.remove('is-transitioning-out');\r\n slide.setAttribute('aria-hidden','false');\r\n if ('inert' in slide) slide.inert=false;\r\n if (index>0) slide.classList.remove('is-active');\r\n });\r\n }\r\n\r\n\r\n function updatePhoneCurrentChapter(){\r\n if (!phoneMode) return;\r\n\r\n const vh = window.innerHeight || document.documentElement.clientHeight;\r\n const focal = vh*.44;\r\n let bestIndex=0;\r\n let bestDistance=Infinity;\r\n\r\n slides.forEach((slide,index) => {\r\n const rect=slide.getBoundingClientRect();\r\n const distance=Math.abs((rect.top+Math.min(rect.height,vh)*.35)-focal);\r\n if (distance<bestDistance){bestDistance=distance;bestIndex=index;}\r\n });\r\n\r\n activeIndex=bestIndex;\r\n slides.forEach((slide,index)=>slide.classList.toggle('is-mobile-current',index===bestIndex));\r\n updateMobileDepth();\r\n }\r\n\r\n\r\n function metrics(){\r\n\r\n const rect =\r\n wrapper.getBoundingClientRect();\r\n\r\n\r\n const viewportHeight =\r\n window.innerHeight ||\r\n document.documentElement.clientHeight;\r\n\r\n\r\n return {\r\n rect,\r\n distance:\r\n Math.max(\r\n 1,\r\n rect.height -\r\n viewportHeight\r\n ),\r\n top:\r\n window.scrollY +\r\n rect.top\r\n };\r\n\r\n }\r\n\r\n\r\n function setActiveSlide(\r\n index,\r\n force = false\r\n ){\r\n\r\n const safeIndex =\r\n Math.max(\r\n 0,\r\n Math.min(\r\n slides.length - 1,\r\n index\r\n )\r\n );\r\n\r\n\r\n if (phoneMode){\r\n activeIndex=safeIndex;\r\n syncPhoneSlides();\r\n slides.forEach((slide,slideIndex)=>slide.classList.toggle('is-mobile-current',slideIndex===safeIndex));\r\n updateMobileDepth();\r\n return;\r\n }\r\n\r\n\r\n if (\r\n !force &&\r\n safeIndex === activeIndex\r\n ) return;\r\n\r\n\r\n const previous =\r\n slides[activeIndex];\r\n\r\n\r\n const next =\r\n slides[safeIndex];\r\n\r\n\r\n window.clearTimeout(\r\n transitionTimer\r\n );\r\n\r\n\r\n if (\r\n previous &&\r\n previous !== next\r\n ){\r\n\r\n previous.classList.add(\r\n 'is-transitioning-out'\r\n );\r\n\r\n }\r\n\r\n\r\n activeIndex =\r\n safeIndex;\r\n\r\n\r\n slides.forEach(\r\n (\r\n slide,\r\n slideIndex\r\n ) => {\r\n\r\n const active =\r\n slideIndex ===\r\n safeIndex;\r\n\r\n\r\n slide.classList.toggle(\r\n 'is-active',\r\n active\r\n );\r\n\r\n\r\n slide.setAttribute(\r\n 'aria-hidden',\r\n active\r\n ? 'false'\r\n : 'true'\r\n );\r\n\r\n\r\n if (\r\n 'inert' in slide\r\n ){\r\n\r\n slide.inert =\r\n !active;\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n\r\n dots.forEach(\r\n (\r\n dot,\r\n dotIndex\r\n ) => {\r\n\r\n dot.classList.toggle(\r\n 'is-active',\r\n dotIndex ===\r\n safeIndex\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n transitionTimer =\r\n window.setTimeout(\r\n () => {\r\n\r\n slides.forEach(\r\n slide => {\r\n\r\n slide.classList.remove(\r\n 'is-transitioning-out'\r\n );\r\n\r\n }\r\n );\r\n\r\n },\r\n reducedMotion\r\n ? 20\r\n : 1500\r\n );\r\n\r\n }\r\n\r\n\r\n \/*\r\n CORE SCROLL MAPPING.\r\n\r\n Important detail:\r\n while the wrapper is still ENTERING the viewport,\r\n rect.top is positive, therefore progress is negative and clamps to 0.\r\n\r\n The intro slide cannot advance until rect.top reaches 0 \u2014\r\n meaning the sticky 100svh camera has first reached its fully centered,\r\n pinned position.\r\n *\/\r\n function update(){\r\n\r\n ticking =\r\n false;\r\n\r\n\r\n if (phoneMode){\r\n updatePhoneCurrentChapter();\r\n return;\r\n }\r\n\r\n\r\n const {\r\n rect,\r\n distance\r\n } =\r\n metrics();\r\n\r\n\r\n let progress =\r\n -rect.top \/\r\n distance;\r\n\r\n\r\n progress =\r\n Math.max(\r\n 0,\r\n Math.min(\r\n 1,\r\n progress\r\n )\r\n );\r\n\r\n\r\n const index =\r\n Math.min(\r\n slides.length - 1,\r\n Math.floor(\r\n progress *\r\n slides.length\r\n )\r\n );\r\n\r\n\r\n setActiveSlide(\r\n index\r\n );\r\n\r\n }\r\n\r\n\r\n function requestUpdate(){\r\n\r\n if (\r\n ticking\r\n ) return;\r\n\r\n\r\n ticking =\r\n true;\r\n\r\n\r\n window.requestAnimationFrame(\r\n update\r\n );\r\n\r\n }\r\n\r\n\r\n \/*\r\n Direct selector click:\r\n calculate the center of the target slide's scroll segment using\r\n the same master-track geometry.\r\n\r\n The page position changes underneath a neutral blur veil, so the\r\n user sees one direct dreamy transition instead of watching all\r\n intermediate slides flash past.\r\n *\/\r\n function jumpToSlide(\r\n index\r\n ){\r\n\r\n const safeIndex =\r\n Math.max(\r\n 0,\r\n Math.min(\r\n slides.length - 1,\r\n Number(index)\r\n )\r\n );\r\n\r\n\r\n if (phoneMode){\r\n const targetSlide=slides[safeIndex];\r\n if (targetSlide){\r\n targetSlide.scrollIntoView({\r\n behavior:reducedMotion ? 'auto' : 'smooth',\r\n block:'start'\r\n });\r\n }\r\n return;\r\n }\r\n\r\n\r\n const {\r\n distance,\r\n top\r\n } =\r\n metrics();\r\n\r\n\r\n const targetProgress =\r\n (\r\n safeIndex +\r\n .5\r\n ) \/\r\n slides.length;\r\n\r\n\r\n const targetY =\r\n top +\r\n targetProgress *\r\n distance;\r\n\r\n\r\n if (\r\n reducedMotion\r\n ){\r\n\r\n window.scrollTo({\r\n top:targetY,\r\n behavior:'auto'\r\n });\r\n\r\n\r\n setActiveSlide(\r\n safeIndex,\r\n true\r\n );\r\n\r\n\r\n return;\r\n }\r\n\r\n\r\n jumpVeil.classList.add(\r\n 'is-active'\r\n );\r\n\r\n\r\n window.setTimeout(\r\n () => {\r\n\r\n \/*\r\n Instant reposition while the page is optically blurred.\r\n *\/\r\n window.scrollTo({\r\n top:targetY,\r\n behavior:'auto'\r\n });\r\n\r\n\r\n setActiveSlide(\r\n safeIndex,\r\n true\r\n );\r\n\r\n\r\n window.requestAnimationFrame(\r\n () => {\r\n\r\n window.requestAnimationFrame(\r\n () => {\r\n\r\n jumpVeil.classList.remove(\r\n 'is-active'\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n );\r\n\r\n },\r\n 440\r\n );\r\n\r\n }\r\n\r\n\r\n tiles.forEach(\r\n tile => {\r\n\r\n tile.addEventListener(\r\n 'click',\r\n () => {\r\n\r\n jumpToSlide(\r\n tile.dataset.targetSlide\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n window.addEventListener(\r\n 'scroll',\r\n requestUpdate,\r\n {\r\n passive:true\r\n }\r\n );\r\n\r\n\r\n window.addEventListener(\r\n 'resize',\r\n requestUpdate\r\n );\r\n\r\n\r\n const syncResponsiveMode=()=>{\r\n const nextPhoneMode=phoneQuery.matches;\r\n\r\n if (nextPhoneMode===phoneMode){\r\n requestUpdate();\r\n return;\r\n }\r\n\r\n phoneMode=nextPhoneMode;\r\n\r\n if (phoneMode){\r\n syncPhoneSlides();\r\n }else{\r\n slides.forEach(slide=>{\r\n slide.classList.remove('is-mobile-current');\r\n });\r\n }\r\n\r\n requestUpdate();\r\n };\r\n\r\n\r\n if (phoneQuery.addEventListener){\r\n phoneQuery.addEventListener('change',syncResponsiveMode);\r\n }else{\r\n phoneQuery.addListener(syncResponsiveMode);\r\n }\r\n\r\n\r\n if (phoneMode) syncPhoneSlides();\r\n\r\n\r\n setActiveSlide(\r\n 0,\r\n true\r\n );\r\n\r\n\r\n requestUpdate();\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6884ca6 e-con-full e-flex e-con e-parent\" data-id=\"6884ca6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a486b4b elementor-widget elementor-widget-html\" data-id=\"a486b4b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\r\nLAMINA CLINIC \u2014 SECTION 04\r\nREAL CASES \/ BEFORE & AFTER\r\nV6 \u2014 DESKTOP PRESERVED + MOBILE CASE REEL + DISTANT EXIT FOCUS\r\n\r\nReplace placeholder images and metadata only with clinic-approved,\r\nconsented and verified case material.\r\n========================================================= -->\r\n\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=Manrope:wght@400;500;600&display=swap');\r\n\r\n#lamina-real-cases{\r\n --aubergine:#2B142F;\r\n --plum:#5F2468;\r\n --title-purple:#7A3F86;\r\n --orchid:#94709A;\r\n --lilac:#C5B2C8;\r\n --ivory:#F7F2EA;\r\n --ivory-2:#F1EAE5;\r\n --stone:#E8E1E4;\r\n --champagne:#D8C4A1;\r\n --ink:#171317;\r\n --ease:cubic-bezier(.16,.70,.18,1);\r\n\r\n position:relative;\r\n width:100%;\r\n background:\r\n radial-gradient(70% 46% at 94% 3%,rgba(216,196,161,.10),transparent 70%),\r\n linear-gradient(180deg,#F7F2EA 0%,#F5EFE8 100%);\r\n color:var(--aubergine);\r\n font-family:\"Manrope\",system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;\r\n}\r\n\r\n#lamina-real-cases *,\r\n#lamina-real-cases *::before,\r\n#lamina-real-cases *::after{box-sizing:border-box}\r\n\r\n#lamina-real-cases button{font:inherit}\r\n#lamina-real-cases ::selection{background:var(--plum);color:var(--ivory)}\r\n\r\n.lc-case__mobile-intro{display:none}\r\n\r\n\/* Mobile-only grouped case rails must never render on desktop. *\/\r\n#lamina-real-cases .lc-case__mobile-groups{\r\n display:none!important;\r\n}\r\n\r\n@media (min-width:1025px){\r\n #lamina-real-cases .lc-case__mobile-groups{\r\n display:none!important;\r\n visibility:hidden!important;\r\n position:absolute!important;\r\n width:0!important;\r\n height:0!important;\r\n overflow:hidden!important;\r\n pointer-events:none!important;\r\n }\r\n}\r\n\r\n\r\n.lc-case__stage{\r\n width:min(100%,1600px);\r\n margin:0 auto;\r\n padding:110px clamp(24px,5.5vw,96px);\r\n}\r\n\r\n.lc-case__layout{\r\n display:grid;\r\n grid-template-columns:minmax(0,.40fr) minmax(0,.60fr);\r\n gap:clamp(48px,6vw,110px);\r\n align-items:start;\r\n}\r\n\r\n.lc-case__editorial{max-width:530px}\r\n\r\n.lc-case__eyebrow{\r\n margin:0 0 18px;\r\n color:var(--plum);\r\n font-size:9px;\r\n line-height:1;\r\n font-weight:600;\r\n letter-spacing:.20em;\r\n text-transform:uppercase;\r\n}\r\n\r\n.lc-case__title{\r\n margin:0;\r\n max-width:8.5ch;\r\n color:var(--aubergine);\r\n font-family:\"Cormorant Garamond\",Georgia,serif;\r\n font-size:clamp(62px,5.5vw,102px);\r\n line-height:.86;\r\n font-weight:400;\r\n letter-spacing:-.052em;\r\n}\r\n\r\n.lc-case__title em{\r\n color:var(--title-purple);\r\n font-style:italic;\r\n font-weight:400;\r\n}\r\n\r\n.lc-case__lead{\r\n margin:clamp(27px,3vh,36px) 0 0;\r\n max-width:43ch;\r\n color:rgba(23,19,23,.68);\r\n font-size:clamp(14px,1vw,17px);\r\n line-height:1.76;\r\n}\r\n\r\n.lc-case__disclaimer{\r\n margin:22px 0 0;\r\n max-width:47ch;\r\n color:rgba(43,20,47,.48);\r\n font-size:10px;\r\n line-height:1.65;\r\n}\r\n\r\n.lc-case__filters{\r\n display:flex;\r\n align-items:center;\r\n gap:22px;\r\n margin-top:clamp(30px,4vh,44px);\r\n}\r\n\r\n.lc-case__filter{\r\n position:relative;\r\n appearance:none;\r\n padding:4px 0 8px;\r\n border:0;\r\n background:none;\r\n color:rgba(43,20,47,.46);\r\n font-size:9px;\r\n line-height:1;\r\n font-weight:600;\r\n letter-spacing:.14em;\r\n text-transform:uppercase;\r\n cursor:pointer;\r\n transition:color .45s ease;\r\n}\r\n\r\n.lc-case__filter::after{\r\n content:\"\";\r\n position:absolute;\r\n left:0;right:0;bottom:0;\r\n height:1px;\r\n background:var(--plum);\r\n transform:scaleX(0);\r\n transform-origin:0 50%;\r\n transition:transform .55s var(--ease);\r\n}\r\n\r\n.lc-case__filter.is-active{color:var(--plum)}\r\n.lc-case__filter.is-active::after{transform:scaleX(1)}\r\n.lc-case__filter:focus-visible{outline:1px solid rgba(95,36,104,.48);outline-offset:5px}\r\n\r\n\/* Hard override against Elementor\/global pink hover states. *\/\r\n#lamina-real-cases .lc-case__filter{\r\n color:rgba(43,20,47,.46) !important;\r\n background:transparent !important;\r\n border-color:transparent !important;\r\n box-shadow:none !important;\r\n}\r\n\r\n#lamina-real-cases .lc-case__filter:hover,\r\n#lamina-real-cases .lc-case__filter:focus,\r\n#lamina-real-cases .lc-case__filter:focus-visible,\r\n#lamina-real-cases .lc-case__filter:active{\r\n color:var(--plum) !important;\r\n background:transparent !important;\r\n border-color:transparent !important;\r\n box-shadow:none !important;\r\n}\r\n\r\n#lamina-real-cases .lc-case__filter.is-active{\r\n color:var(--plum) !important;\r\n}\r\n\r\n.lc-case__meta-shell{\r\n margin-top:clamp(40px,5vh,60px);\r\n padding-top:20px;\r\n border-top:1px solid rgba(216,196,161,.72);\r\n}\r\n\r\n.lc-case__meta{\r\n min-height:112px;\r\n transition:\r\n opacity .76s var(--ease),\r\n transform .82s var(--ease);\r\n}\r\n\r\n.lc-case__meta.is-changing{\r\n opacity:.12;\r\n transform:translate3d(0,6px,0);\r\n}\r\n\r\n.lc-case__meta-top{\r\n display:flex;\r\n align-items:center;\r\n justify-content:space-between;\r\n gap:18px;\r\n margin-bottom:14px;\r\n}\r\n\r\n.lc-case__meta-category,\r\n.lc-case__meta-count{\r\n color:var(--plum);\r\n font-size:8px;\r\n line-height:1;\r\n font-weight:600;\r\n letter-spacing:.14em;\r\n text-transform:uppercase;\r\n}\r\n\r\n.lc-case__meta-treatment{\r\n margin:0;\r\n color:var(--aubergine);\r\n font-family:\"Cormorant Garamond\",Georgia,serif;\r\n font-size:clamp(28px,2.2vw,40px);\r\n line-height:1;\r\n font-weight:500;\r\n letter-spacing:-.025em;\r\n}\r\n\r\n.lc-case__meta-follow{\r\n margin:9px 0 0;\r\n color:rgba(23,19,23,.55);\r\n font-size:10px;\r\n line-height:1.5;\r\n}\r\n\r\n.lc-case__visual{min-width:0}\r\n.lc-case__case-list{display:grid;gap:26px}\r\n\r\n.lc-case__card{\r\n position:relative;\r\n width:100%;\r\n padding:clamp(14px,1.3vw,20px);\r\n border:1px solid rgba(43,20,47,.055);\r\n border-radius:24px;\r\n background:\r\n linear-gradient(145deg,rgba(255,255,255,.46),rgba(232,225,228,.74)),\r\n var(--ivory-2);\r\n box-shadow:\r\n 0 22px 60px rgba(43,20,47,.07),\r\n 0 2px 8px rgba(43,20,47,.025);\r\n transform-origin:center center;\r\n}\r\n\r\n.lc-case__comparison{\r\n display:grid;\r\n grid-template-columns:1fr 1fr;\r\n gap:10px;\r\n}\r\n\r\n\/*\r\n Combined \/ single-frame case media:\r\n use when the supplied clinic image already contains the comparison\r\n inside one file, or when a single approved case image is supplied.\r\n Never split or fabricate a before\/after pair.\r\n*\/\r\n.lc-case__card[data-layout=\"combined\"] .lc-case__comparison{\r\n grid-template-columns:1fr;\r\n}\r\n\r\n.lc-case__photo.is-combined{\r\n aspect-ratio:auto;\r\n background:transparent;\r\n}\r\n\r\n.lc-case__photo.is-combined img{\r\n display:block;\r\n width:100%;\r\n max-width:100%;\r\n height:auto;\r\n object-fit:contain;\r\n object-position:center;\r\n}\r\n\r\n\r\n.lc-case__photo{\r\n position:relative;\r\n overflow:hidden;\r\n min-width:0;\r\n aspect-ratio:4\/5;\r\n border-radius:16px;\r\n background:linear-gradient(145deg,#E8E1E4,#F1EAE5 55%,#C5B2C8);\r\n}\r\n\r\n.lc-case__photo img{\r\n width:100%;\r\n height:100%;\r\n display:block;\r\n object-fit:cover;\r\n object-position:center;\r\n}\r\n\r\n.lc-case__photo.is-missing::before{\r\n content:\"Clinic-approved case image\";\r\n position:absolute;\r\n inset:0;\r\n display:grid;\r\n place-items:center;\r\n padding:24px;\r\n color:rgba(43,20,47,.42);\r\n font-size:9px;\r\n font-weight:600;\r\n letter-spacing:.10em;\r\n text-align:center;\r\n text-transform:uppercase;\r\n}\r\n\r\n.lc-case__photo-label{\r\n position:absolute;\r\n z-index:2;\r\n left:12px;\r\n bottom:12px;\r\n padding:7px 9px;\r\n background:rgba(247,242,234,.90);\r\n color:var(--aubergine);\r\n font-size:7px;\r\n line-height:1;\r\n font-weight:600;\r\n letter-spacing:.14em;\r\n text-transform:uppercase;\r\n}\r\n\r\n.lc-case__card-foot{\r\n display:flex;\r\n align-items:center;\r\n justify-content:space-between;\r\n gap:18px;\r\n padding:15px 3px 2px;\r\n}\r\n\r\n.lc-case__card-type{\r\n color:var(--plum);\r\n font-size:8px;\r\n line-height:1;\r\n font-weight:600;\r\n letter-spacing:.13em;\r\n text-transform:uppercase;\r\n}\r\n\r\n.lc-case__card-code{\r\n color:rgba(43,20,47,.40);\r\n font-size:8px;\r\n line-height:1;\r\n font-weight:600;\r\n letter-spacing:.11em;\r\n text-transform:uppercase;\r\n}\r\n\r\n\r\n.lc-case__mobile-progress{\r\n display:none;\r\n}\r\n\r\n.lc-case__mobile-progress-track{\r\n position:relative;\r\n width:100%;\r\n height:1px;\r\n overflow:hidden;\r\n background:rgba(43,20,47,.14);\r\n}\r\n\r\n.lc-case__mobile-progress-fill{\r\n position:absolute;\r\n inset:0;\r\n background:var(--plum);\r\n transform:scaleX(var(--mobile-progress,0));\r\n transform-origin:0 50%;\r\n will-change:transform;\r\n}\r\n\r\n\/* Enhanced scrollytelling *\/\r\n#lamina-real-cases.is-enhanced{min-height:100vh}\r\n\r\n#lamina-real-cases.is-enhanced .lc-case__stage{\r\n position:sticky;\r\n top:0;\r\n width:100%;\r\n max-width:none;\r\n height:100vh;\r\n height:100svh;\r\n margin:0;\r\n padding:clamp(72px,7.5vh,100px) clamp(24px,5.5vw,96px);\r\n display:flex;\r\n align-items:center;\r\n overflow:hidden;\r\n}\r\n\r\n#lamina-real-cases.is-enhanced .lc-case__stage-inner{\r\n width:min(100%,1600px);\r\n margin:0 auto;\r\n transition:\r\n opacity .55s ease,\r\n transform .72s var(--ease),\r\n filter .55s ease;\r\n}\r\n\r\n#lamina-real-cases.is-enhanced .lc-case__layout{\r\n grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);\r\n height:min(780px,84svh);\r\n align-items:stretch;\r\n}\r\n\r\n#lamina-real-cases.is-enhanced .lc-case__editorial{\r\n display:flex;\r\n flex-direction:column;\r\n justify-content:center;\r\n}\r\n\r\n#lamina-real-cases.is-enhanced .lc-case__visual{\r\n position:relative;\r\n height:100%;\r\n overflow:hidden;\r\n}\r\n\r\n#lamina-real-cases.is-enhanced .lc-case__case-list{\r\n position:absolute;\r\n inset:0;\r\n display:block;\r\n}\r\n\r\n#lamina-real-cases.is-enhanced .lc-case__card{\r\n --case-blur:0px;\r\n\r\n position:absolute;\r\n left:50%;\r\n top:50%;\r\n width:min(56%,520px);\r\n margin:0;\r\n transform:translate3d(-50%,-50%,0) scale(1);\r\n opacity:0;\r\n filter:none;\r\n pointer-events:none;\r\n will-change:transform,opacity;\r\n backface-visibility:hidden;\r\n -webkit-backface-visibility:hidden;\r\n}\r\n\r\n#lamina-real-cases.is-enhanced .lc-case__card > .lc-case__comparison,\r\n#lamina-real-cases.is-enhanced .lc-case__card > .lc-case__card-foot{\r\n filter:blur(var(--case-blur));\r\n will-change:filter;\r\n transform:translateZ(0);\r\n}\r\n\r\n#lamina-real-cases.is-enhanced .lc-case__card.is-interactive{pointer-events:auto}\r\n\r\n#lamina-real-cases.is-enhanced .lc-case__visual{\r\n transition:\r\n opacity .32s ease;\r\n}\r\n\r\n#lamina-real-cases.is-enhanced .lc-case__stage.is-filtering .lc-case__visual{\r\n opacity:.28;\r\n}\r\n\r\n#lamina-real-cases.is-enhanced .lc-case__stage.is-entry .lc-case__stage-inner{\r\n opacity:.96;\r\n transform:translate3d(0,4px,0);\r\n}\r\n\r\n#lamina-real-cases.is-enhanced .lc-case__stage.is-exit .lc-case__stage-inner{\r\n opacity:1;\r\n transform:none;\r\n}\r\n\r\n\/* =========================================================\r\n V6 \u2014 MOBILE \/ COMPACT TABLET CASE REEL\r\n Normal vertical page flow + native horizontal case browsing.\r\n Desktop scrollytelling remains unchanged above 1024px.\r\n ========================================================= *\/\r\n\r\n@media (max-width:1024px){\r\n\r\n \/*\r\n Avoid the old mixed-dimension source reel flashing before\r\n the mobile grouping controller initializes.\r\n *\/\r\n #lamina-real-cases:not(.is-mobile-reel) .lc-case__case-list{\r\n visibility:hidden;\r\n }\r\n\r\n \/* Permanent Lamina mobile rule: no scroll-driven \/ exit blur. *\/\r\n #lamina-real-cases .lc-case__exit-blur{\r\n --lc-section-exit-blur:0px !important;\r\n filter:none !important;\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel{\r\n height:auto !important;\r\n min-height:0 !important;\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel .lc-case__mobile-intro{\r\n display:block;\r\n padding:\r\n clamp(70px,8vh,86px)\r\n clamp(20px,4.2vw,42px)\r\n 38px;\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel .lc-case__desktop-intro{\r\n display:none;\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel .lc-case__mobile-intro .lc-case__title{\r\n max-width:8.3ch;\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel .lc-case__mobile-intro .lc-case__lead{\r\n margin-top:22px;\r\n max-width:36ch;\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel .lc-case__mobile-intro .lc-case__disclaimer{\r\n margin-top:18px;\r\n max-width:44ch;\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel .lc-case__filters{\r\n margin-top:24px;\r\n gap:20px;\r\n flex-wrap:nowrap;\r\n\r\n overflow-x:auto;\r\n overscroll-behavior-inline:contain;\r\n scrollbar-width:none;\r\n\r\n margin-inline:\r\n calc(-1 * clamp(20px,4.2vw,42px));\r\n\r\n padding-inline:\r\n clamp(20px,4.2vw,42px);\r\n\r\n -webkit-overflow-scrolling:touch;\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel .lc-case__filters::-webkit-scrollbar{\r\n display:none;\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel .lc-case__filter{\r\n flex:0 0 auto;\r\n min-height:44px;\r\n padding:0 0 7px;\r\n display:inline-flex;\r\n align-items:center;\r\n white-space:nowrap;\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel .lc-case__stage{\r\n position:relative !important;\r\n top:auto !important;\r\n width:100%;\r\n max-width:none;\r\n height:auto !important;\r\n min-height:0 !important;\r\n margin:0;\r\n padding:0 0 clamp(54px,7vh,76px);\r\n display:block;\r\n overflow:visible;\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel .lc-case__stage-inner{\r\n width:100%;\r\n height:auto !important;\r\n margin:0;\r\n transform:none;\r\n opacity:1;\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel .lc-case__layout{\r\n display:flex;\r\n flex-direction:column;\r\n height:auto !important;\r\n gap:0;\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel .lc-case__visual{\r\n order:1;\r\n position:relative;\r\n height:auto !important;\r\n min-height:0;\r\n overflow:visible;\r\n transition:opacity .20s ease;\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel .lc-case__stage.is-filtering .lc-case__visual{\r\n opacity:.56;\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel .lc-case__editorial{\r\n order:2;\r\n width:100%;\r\n max-width:none;\r\n margin:0;\r\n padding-inline:\r\n clamp(\r\n 20px,\r\n 4.2vw,\r\n 42px\r\n );\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel .lc-case__case-list{\r\n --reel-pad:\r\n max(\r\n clamp(20px,4.2vw,42px),\r\n env(safe-area-inset-left)\r\n );\r\n\r\n position:relative !important;\r\n inset:auto !important;\r\n\r\n display:flex !important;\r\n align-items:flex-start;\r\n gap:14px;\r\n\r\n width:100%;\r\n overflow-x:auto;\r\n overflow-y:visible;\r\n\r\n padding:\r\n 8px\r\n var(--reel-pad)\r\n 22px;\r\n\r\n scroll-padding-inline-start:var(--reel-pad);\r\n scroll-snap-type:x mandatory;\r\n\r\n overscroll-behavior-inline:contain;\r\n scrollbar-width:none;\r\n -webkit-overflow-scrolling:touch;\r\n\r\n \/*\r\n Native gesture arbitration:\r\n horizontal motion browses cases;\r\n vertical movement continues the page.\r\n *\/\r\n touch-action:pan-x pan-y;\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel .lc-case__case-list::-webkit-scrollbar{\r\n display:none;\r\n }\r\n\r\n \/*\r\n MOBILE CASE GROUPING:\r\n Hair \/ Beard \/ Brows stay together.\r\n Dental stays in a completely separate reel because the\r\n supplied media proportions are materially different.\r\n *\/\r\n #lamina-real-cases.is-mobile-reel .lc-case__case-list{\r\n display:none !important;\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel .lc-case__mobile-groups{\r\n display:block!important;\r\n width:100%;\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel .lc-case__mobile-group{\r\n width:100%;\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel\r\n .lc-case__mobile-group + .lc-case__mobile-group{\r\n margin-top:24px;\r\n padding-top:24px;\r\n border-top:1px solid rgba(216,196,161,.48);\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel\r\n .lc-case__mobile-group.is-mobile-group-hidden{\r\n display:none !important;\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel .lc-case__mobile-group-head{\r\n display:flex;\r\n align-items:flex-end;\r\n justify-content:space-between;\r\n gap:14px;\r\n\r\n padding-inline:\r\n clamp(\r\n 20px,\r\n 4.2vw,\r\n 42px\r\n );\r\n\r\n margin-bottom:12px;\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel .lc-case__mobile-group-kicker{\r\n display:block;\r\n margin-bottom:7px;\r\n\r\n color:rgba(95,36,104,.62);\r\n -webkit-text-fill-color:rgba(95,36,104,.62);\r\n\r\n font-size:10px;\r\n line-height:1;\r\n font-weight:600;\r\n letter-spacing:.13em;\r\n text-transform:uppercase;\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel .lc-case__mobile-group-title{\r\n margin:0;\r\n\r\n max-width:16ch;\r\n\r\n color:var(--aubergine);\r\n -webkit-text-fill-color:var(--aubergine);\r\n\r\n font-family:\"Cormorant Garamond\",Georgia,serif;\r\n font-size:clamp(27px,5.2vw,35px);\r\n line-height:.98;\r\n font-weight:400;\r\n letter-spacing:-.028em;\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel .lc-case__mobile-group-count{\r\n flex:0 0 auto;\r\n padding-bottom:3px;\r\n\r\n color:rgba(43,20,47,.42);\r\n -webkit-text-fill-color:rgba(43,20,47,.42);\r\n\r\n font-size:10px;\r\n line-height:1;\r\n font-weight:600;\r\n letter-spacing:.10em;\r\n text-transform:uppercase;\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel .lc-case__mobile-group-reel{\r\n --reel-pad:\r\n max(\r\n clamp(20px,4.2vw,42px),\r\n env(safe-area-inset-left)\r\n );\r\n\r\n display:flex;\r\n align-items:flex-start;\r\n gap:14px;\r\n\r\n width:100%;\r\n\r\n overflow-x:auto;\r\n overflow-y:visible;\r\n\r\n padding:\r\n 4px\r\n var(--reel-pad)\r\n 18px;\r\n\r\n scroll-padding-inline-start:var(--reel-pad);\r\n scroll-snap-type:x mandatory;\r\n\r\n overscroll-behavior-inline:contain;\r\n scrollbar-width:none;\r\n -webkit-overflow-scrolling:touch;\r\n\r\n touch-action:pan-x pan-y;\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel\r\n .lc-case__mobile-group-reel::-webkit-scrollbar{\r\n display:none;\r\n }\r\n\r\n \/*\r\n Restoration collages are tall\/portrait.\r\n Keep them in their own narrower reel.\r\n *\/\r\n #lamina-real-cases.is-mobile-reel\r\n .lc-case__mobile-group--restoration\r\n .lc-case__card{\r\n flex:0 0 clamp(205px,61vw,255px);\r\n }\r\n\r\n \/*\r\n Hair \/ Beard \/ Brows use portrait collage media.\r\n Reserve the media box before the image loads and keep it\r\n intact even if a source fails, so the card can never\r\n collapse down to only its footer.\r\n *\/\r\n #lamina-real-cases.is-mobile-reel\r\n .lc-case__mobile-group--restoration\r\n .lc-case__photo.is-combined{\r\n position:relative;\r\n aspect-ratio:4 \/ 5 !important;\r\n min-height:0;\r\n overflow:hidden;\r\n background:\r\n linear-gradient(\r\n 145deg,\r\n #E8E1E4 0%,\r\n #F5EFE9 58%,\r\n #DED2DA 100%\r\n );\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel\r\n .lc-case__mobile-group--restoration\r\n .lc-case__photo.is-combined img{\r\n position:absolute;\r\n inset:0;\r\n\r\n display:block;\r\n\r\n width:100% !important;\r\n height:100% !important;\r\n\r\n max-width:none;\r\n\r\n object-fit:contain !important;\r\n object-position:center !important;\r\n\r\n background:transparent;\r\n }\r\n\r\n \/*\r\n Beard source media is slightly taller and carries spare space at the top.\r\n Keep the exact same 4:5 restoration frame as Hair \/ Brows, but anchor the\r\n beard image to the bottom and let the unused upper area be the cropped side.\r\n This keeps the full beard \/ lower face visible without making its card taller.\r\n *\/\r\n #lamina-real-cases.is-mobile-reel\r\n .lc-case__mobile-group--restoration\r\n .lc-case__card[data-case-id=\"beard-01\"]\r\n .lc-case__photo.is-combined img{\r\n object-fit:cover !important;\r\n object-position:center bottom !important;\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel\r\n .lc-case__mobile-group--restoration\r\n .lc-case__photo.is-combined.is-missing::before{\r\n content:\"Case image unavailable\";\r\n\r\n position:absolute;\r\n inset:0;\r\n\r\n display:grid;\r\n place-items:center;\r\n\r\n padding:24px;\r\n\r\n color:rgba(43,20,47,.46);\r\n\r\n font-family:\"Manrope\",sans-serif;\r\n font-size:10px;\r\n line-height:1.45;\r\n font-weight:600;\r\n letter-spacing:.10em;\r\n text-align:center;\r\n text-transform:uppercase;\r\n }\r\n\r\n \/*\r\n Dental cases use a different supplied geometry.\r\n Give them a slightly wider dedicated rail instead of\r\n forcing them beside the portrait restoration assets.\r\n *\/\r\n #lamina-real-cases.is-mobile-reel\r\n .lc-case__mobile-group--dental\r\n .lc-case__card{\r\n flex:0 0 clamp(230px,70vw,300px);\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel\r\n .lc-case__mobile-group-reel\r\n .lc-case__card{\r\n scroll-snap-align:start;\r\n scroll-snap-stop:normal;\r\n }\r\n\r\n\r\n #lamina-real-cases.is-mobile-reel .lc-case__card{\r\n --case-blur:0px;\r\n\r\n position:relative !important;\r\n left:auto !important;\r\n top:auto !important;\r\n\r\n flex:0 0 clamp(210px,64vw,260px);\r\n width:auto !important;\r\n margin:0;\r\n\r\n scroll-snap-align:start;\r\n scroll-snap-stop:normal;\r\n\r\n padding:8px;\r\n border-radius:18px;\r\n\r\n opacity:.80;\r\n transform:scale(.99);\r\n transform-origin:center center;\r\n\r\n pointer-events:auto !important;\r\n\r\n box-shadow:\r\n 0 16px 38px rgba(43,20,47,.055),\r\n 0 2px 7px rgba(43,20,47,.02);\r\n\r\n transition:\r\n opacity .28s ease,\r\n transform .34s var(--ease);\r\n\r\n will-change:auto;\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel .lc-case__card.is-mobile-active{\r\n opacity:1;\r\n transform:scale(1);\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel .lc-case__card.is-mobile-hidden{\r\n display:none !important;\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel .lc-case__card > .lc-case__comparison,\r\n #lamina-real-cases.is-mobile-reel .lc-case__card > .lc-case__card-foot{\r\n filter:none !important;\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel .lc-case__comparison{\r\n gap:7px;\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel .lc-case__photo{\r\n border-radius:13px;\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel\r\n .lc-case__card[data-mobile-layout=\"stacked\"]\r\n .lc-case__comparison{\r\n grid-template-columns:1fr;\r\n }\r\n\r\n \/*\r\n Hair \/ beard \/ eyebrow source assets use their supplied single-frame geometry.\r\n Preserve the supplied image geometry instead of forcing a fabricated comparison crop.\r\n *\/\r\n #lamina-real-cases.is-mobile-reel\r\n .lc-case__card[data-mobile-layout=\"stacked\"]\r\n .lc-case__photo{\r\n aspect-ratio:4 \/ 3;\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel\r\n .lc-case__card[data-mobile-layout=\"side\"]\r\n .lc-case__comparison{\r\n grid-template-columns:1fr 1fr;\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel\r\n .lc-case__card[data-mobile-layout=\"side\"]\r\n .lc-case__photo{\r\n aspect-ratio:4 \/ 5;\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel\r\n .lc-case__card[data-mobile-layout=\"combined\"]\r\n .lc-case__comparison{\r\n grid-template-columns:1fr;\r\n }\r\n\r\n \/*\r\n Only Dental keeps its source-driven combined-image height.\r\n Restoration cards must stay on the shared 4:5 mobile frame above; applying\r\n height:auto here was the rule that allowed taller Beard media to overflow\r\n that fixed frame and lose the lower part of the image.\r\n *\/\r\n #lamina-real-cases.is-mobile-reel\r\n .lc-case__mobile-group--dental\r\n .lc-case__card[data-mobile-layout=\"combined\"]\r\n .lc-case__photo{\r\n aspect-ratio:auto;\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel\r\n .lc-case__mobile-group--dental\r\n .lc-case__card[data-mobile-layout=\"combined\"]\r\n .lc-case__photo img{\r\n display:block;\r\n width:100%;\r\n max-width:100%;\r\n height:auto;\r\n object-fit:contain;\r\n object-position:center;\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel .lc-case__photo img{\r\n object-position:\r\n var(\r\n --mobile-object-position,\r\n center\r\n );\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel .lc-case__card-foot{\r\n padding:11px 3px 1px;\r\n }\r\n\r\n \/*\r\n Grouped mobile reels already have their own heading + count.\r\n Do not render the old desktop-style case metadata block here,\r\n otherwise every category gets two titles and two counts.\r\n *\/\r\n #lamina-real-cases.is-mobile-reel .lc-case__meta-shell{\r\n display:none !important;\r\n margin:0 !important;\r\n padding:0 !important;\r\n border:0 !important;\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel .lc-case__mobile-progress{\r\n display:none !important;\r\n margin:0 !important;\r\n padding:0 !important;\r\n }\r\n\r\n}\r\n\r\n\/* Compact tablets use a wider reel: roughly 1.7\u20132.2 cases visible. *\/\r\n@media (min-width:768px) and (max-width:1024px){\r\n\r\n #lamina-real-cases.is-mobile-reel .lc-case__mobile-intro{\r\n padding-bottom:42px;\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel\r\n .lc-case__mobile-group--restoration\r\n .lc-case__card{\r\n flex-basis:clamp(250px,34vw,330px);\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel\r\n .lc-case__mobile-group--dental\r\n .lc-case__card{\r\n flex-basis:clamp(290px,40vw,380px);\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel .lc-case__case-list{\r\n gap:16px;\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel .lc-case__editorial{\r\n padding-inline:\r\n clamp(28px,4.2vw,48px);\r\n }\r\n\r\n}\r\n\r\n\/* Phone-specific art direction. *\/\r\n@media (max-width:767px){\r\n\r\n #lamina-real-cases.is-mobile-reel .lc-case__mobile-intro{\r\n padding:68px 20px 32px;\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel .lc-case__mobile-intro .lc-case__title{\r\n max-width:8.2ch;\r\n font-size:clamp(50px,14vw,66px);\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel .lc-case__mobile-intro .lc-case__lead{\r\n margin-top:22px;\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel .lc-case__filters{\r\n margin-inline:-20px;\r\n padding-inline:20px;\r\n gap:18px;\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel .lc-case__case-list{\r\n --reel-pad:\r\n max(\r\n 20px,\r\n env(safe-area-inset-left)\r\n );\r\n\r\n gap:14px;\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel .lc-case__editorial{\r\n padding-inline:20px;\r\n }\r\n\r\n}\r\n\r\n\/* Short landscape screens keep the reel in normal flow.\r\n Reduce visual width rather than forcing portrait proportions. *\/\r\n@media (max-width:1024px) and (max-height:520px) and (orientation:landscape){\r\n\r\n #lamina-real-cases.is-mobile-reel\r\n .lc-case__mobile-group--restoration\r\n .lc-case__card{\r\n flex-basis:clamp(190px,28vw,250px);\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel\r\n .lc-case__mobile-group--dental\r\n .lc-case__card{\r\n flex-basis:clamp(220px,34vw,290px);\r\n }\r\n\r\n}\r\n\r\n@media (prefers-reduced-motion:reduce) and (min-width:1025px){\r\n\r\n #lamina-real-cases{\r\n height:auto !important;\r\n }\r\n\r\n #lamina-real-cases .lc-case__stage{\r\n position:relative !important;\r\n top:auto !important;\r\n height:auto !important;\r\n min-height:0 !important;\r\n overflow:visible !important;\r\n }\r\n\r\n #lamina-real-cases .lc-case__layout{\r\n display:block !important;\r\n height:auto !important;\r\n }\r\n\r\n #lamina-real-cases .lc-case__desktop-intro{\r\n display:block !important;\r\n margin-bottom:38px;\r\n }\r\n\r\n #lamina-real-cases .lc-case__visual{\r\n height:auto !important;\r\n overflow:visible !important;\r\n }\r\n\r\n #lamina-real-cases .lc-case__case-list{\r\n position:relative !important;\r\n inset:auto !important;\r\n display:grid !important;\r\n gap:22px !important;\r\n }\r\n\r\n #lamina-real-cases .lc-case__card{\r\n position:relative !important;\r\n left:auto !important;\r\n top:auto !important;\r\n width:100% !important;\r\n opacity:1 !important;\r\n filter:none !important;\r\n transform:none !important;\r\n pointer-events:auto !important;\r\n }\r\n\r\n #lamina-real-cases .lc-case__card > .lc-case__comparison,\r\n #lamina-real-cases .lc-case__card > .lc-case__card-foot{\r\n filter:none !important;\r\n }\r\n\r\n #lamina-real-cases .lc-case__meta-shell{\r\n display:none !important;\r\n }\r\n\r\n}\r\n\r\n@media (prefers-reduced-motion:reduce) and (max-width:1024px){\r\n\r\n #lamina-real-cases.is-mobile-reel .lc-case__card,\r\n #lamina-real-cases.is-mobile-reel .lc-case__meta,\r\n #lamina-real-cases .lc-case__exit-blur{\r\n transition:none !important;\r\n filter:none !important;\r\n }\r\n\r\n #lamina-real-cases.is-mobile-reel .lc-case__card{\r\n transform:none !important;\r\n }\r\n\r\n}\r\n\r\n\/* =========================================================\r\n V4 \u2014 READABLE TYPOGRAPHY PASS\r\n General Lamina rule:\r\n - no important UI \/ metadata text at tiny 7\u20139px sizes\r\n - body\/supporting copy stays comfortably readable\r\n - mobile receives its own readability floor\r\n ========================================================= *\/\r\n\r\n\/* Section intro *\/\r\n#lamina-real-cases .lc-case__eyebrow{\r\n font-size:clamp(11px,.72vw,13px) !important;\r\n line-height:1.2 !important;\r\n letter-spacing:.17em !important;\r\n}\r\n\r\n#lamina-real-cases .lc-case__lead{\r\n font-size:clamp(16px,1.02vw,18px) !important;\r\n line-height:1.72 !important;\r\n}\r\n\r\n#lamina-real-cases .lc-case__disclaimer{\r\n font-size:clamp(12px,.78vw,13px) !important;\r\n line-height:1.62 !important;\r\n}\r\n\r\n\/* Filters *\/\r\n#lamina-real-cases .lc-case__filter{\r\n font-size:clamp(11px,.72vw,12px) !important;\r\n line-height:1.15 !important;\r\n letter-spacing:.11em !important;\r\n}\r\n\r\n\/* Dynamic metadata *\/\r\n#lamina-real-cases .lc-case__meta-category,\r\n#lamina-real-cases .lc-case__meta-count{\r\n font-size:clamp(11px,.72vw,12px) !important;\r\n line-height:1.15 !important;\r\n letter-spacing:.11em !important;\r\n}\r\n\r\n#lamina-real-cases .lc-case__meta-treatment{\r\n font-size:clamp(31px,2.25vw,42px) !important;\r\n line-height:1.02 !important;\r\n}\r\n\r\n#lamina-real-cases .lc-case__meta-follow{\r\n font-size:clamp(12px,.78vw,13px) !important;\r\n line-height:1.55 !important;\r\n}\r\n\r\n\/* Case cards *\/\r\n#lamina-real-cases .lc-case__photo.is-missing::before{\r\n font-size:11px !important;\r\n line-height:1.45 !important;\r\n letter-spacing:.08em !important;\r\n}\r\n\r\n#lamina-real-cases .lc-case__photo-label{\r\n font-size:10px !important;\r\n line-height:1.1 !important;\r\n letter-spacing:.11em !important;\r\n}\r\n\r\n#lamina-real-cases .lc-case__card-type,\r\n#lamina-real-cases .lc-case__card-code{\r\n font-size:10.5px !important;\r\n line-height:1.15 !important;\r\n letter-spacing:.09em !important;\r\n}\r\n\r\n\/* Tablet *\/\r\n@media (max-width:1024px){\r\n\r\n #lamina-real-cases .lc-case__lead{\r\n font-size:16px !important;\r\n }\r\n\r\n #lamina-real-cases .lc-case__disclaimer{\r\n font-size:12px !important;\r\n }\r\n\r\n #lamina-real-cases .lc-case__filter,\r\n #lamina-real-cases .lc-case__meta-category,\r\n #lamina-real-cases .lc-case__meta-count{\r\n font-size:11px !important;\r\n }\r\n\r\n #lamina-real-cases .lc-case__meta-follow{\r\n font-size:12px !important;\r\n }\r\n\r\n #lamina-real-cases .lc-case__photo-label{\r\n font-size:10px !important;\r\n }\r\n\r\n #lamina-real-cases .lc-case__card-type,\r\n #lamina-real-cases .lc-case__card-code{\r\n font-size:10px !important;\r\n }\r\n\r\n}\r\n\r\n\/* Mobile \u2014 explicit readability floor *\/\r\n@media (max-width:760px){\r\n\r\n #lamina-real-cases .lc-case__eyebrow{\r\n font-size:11px !important;\r\n line-height:1.2 !important;\r\n }\r\n\r\n #lamina-real-cases .lc-case__lead{\r\n font-size:15px !important;\r\n line-height:1.64 !important;\r\n }\r\n\r\n #lamina-real-cases .lc-case__disclaimer{\r\n font-size:12px !important;\r\n line-height:1.58 !important;\r\n }\r\n\r\n #lamina-real-cases .lc-case__filter{\r\n font-size:11px !important;\r\n line-height:1.15 !important;\r\n }\r\n\r\n #lamina-real-cases .lc-case__meta-category,\r\n #lamina-real-cases .lc-case__meta-count{\r\n font-size:10.5px !important;\r\n line-height:1.15 !important;\r\n }\r\n\r\n #lamina-real-cases.is-enhanced .lc-case__meta-treatment{\r\n font-size:31px !important;\r\n line-height:1.02 !important;\r\n }\r\n\r\n #lamina-real-cases .lc-case__meta-follow{\r\n font-size:11.5px !important;\r\n line-height:1.5 !important;\r\n }\r\n\r\n #lamina-real-cases .lc-case__photo-label{\r\n font-size:10px !important;\r\n }\r\n\r\n #lamina-real-cases .lc-case__card-type,\r\n #lamina-real-cases .lc-case__card-code{\r\n font-size:10px !important;\r\n line-height:1.15 !important;\r\n }\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n V5 \u2014 LAMINA SOFT DISTANT-ONLY ONE-WAY BLUR\r\n Permanent site language:\r\n - downward scroll only\r\n - nearby\/current\/incoming content stays sharp\r\n - blur begins only when content is far into the upper viewport\r\n - no opacity fade\r\n - desktop max \u2248 2.35px\r\n - mobile max \u2248 1.45px\r\n ========================================================= *\/\r\n\r\n.lc-case__title-line{\r\n display:block;\r\n}\r\n\r\n#lamina-real-cases .lc-case__exit-blur{\r\n --lc-section-exit-blur:0px;\r\n filter:blur(var(--lc-section-exit-blur));\r\n transform-origin:center center;\r\n}\r\n\r\n#lamina-real-cases .lc-case__exit-blur:focus-within{\r\n filter:none !important;\r\n}\r\n\r\n\r\n<\/style>\r\n\r\n<section id=\"lamina-real-cases\" aria-labelledby=\"lamina-real-cases-title\">\r\n\r\n <div class=\"lc-case__mobile-intro\">\r\n <p class=\"lc-case__eyebrow lc-case__exit-blur\" data-exit-layer=\"eyebrow\">REAL CASES<\/p>\r\n\r\n <h2 class=\"lc-case__title\" id=\"lamina-real-cases-title-mobile\">\r\n <span class=\"lc-case__title-line lc-case__exit-blur\" data-exit-layer=\"headline\">Results are personal.<\/span>\r\n <span class=\"lc-case__title-line lc-case__exit-blur\" data-exit-layer=\"headline\"><em>The details matter.<\/em><\/span>\r\n <\/h2>\r\n\r\n <p class=\"lc-case__lead lc-case__exit-blur\" data-exit-layer=\"copy\">\r\n Explore selected treatment cases across hair, beard and eyebrow restoration, alongside dental aesthetics.\r\n Each case reflects an individual treatment plan, starting point and follow-up period.\r\n <\/p>\r\n\r\n <p class=\"lc-case__disclaimer lc-case__exit-blur\" data-exit-layer=\"ui\">\r\n Individual outcomes vary. Treatment suitability and expected outcomes can only be assessed following clinical evaluation.\r\n <\/p>\r\n\r\n <div class=\"lc-case__filters lc-case__exit-blur\" data-exit-layer=\"ui\" data-filter-group=\"mobile\" aria-label=\"Filter real cases\">\r\n <button class=\"lc-case__filter is-active\" type=\"button\" data-filter=\"all\" aria-pressed=\"true\">All<\/button>\r\n <button class=\"lc-case__filter\" type=\"button\" data-filter=\"hair\" aria-pressed=\"false\">Hair<\/button>\r\n <button class=\"lc-case__filter\" type=\"button\" data-filter=\"beard\" aria-pressed=\"false\">Beard<\/button>\r\n <button class=\"lc-case__filter\" type=\"button\" data-filter=\"brows\" aria-pressed=\"false\">Eyebrows<\/button>\r\n <button class=\"lc-case__filter\" type=\"button\" data-filter=\"dental\" aria-pressed=\"false\">Dental<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"lc-case__stage\">\r\n <div class=\"lc-case__stage-inner\">\r\n <div class=\"lc-case__layout\">\r\n\r\n <aside class=\"lc-case__editorial\">\r\n <div class=\"lc-case__desktop-intro\">\r\n <p class=\"lc-case__eyebrow lc-case__exit-blur\" data-exit-layer=\"eyebrow\">04 \u2014 REAL CASES<\/p>\r\n\r\n <h2 class=\"lc-case__title\" id=\"lamina-real-cases-title\">\r\n <span class=\"lc-case__title-line lc-case__exit-blur\" data-exit-layer=\"headline\">Results are personal.<\/span>\r\n <span class=\"lc-case__title-line lc-case__exit-blur\" data-exit-layer=\"headline\"><em>The details matter.<\/em><\/span>\r\n <\/h2>\r\n\r\n <p class=\"lc-case__lead lc-case__exit-blur\" data-exit-layer=\"copy\">\r\n Explore selected treatment cases across hair, beard and eyebrow restoration, alongside dental aesthetics.\r\n Each case reflects an individual treatment plan, starting point and follow-up period.\r\n <\/p>\r\n\r\n <p class=\"lc-case__disclaimer lc-case__exit-blur\" data-exit-layer=\"ui\">\r\n Individual outcomes vary. Treatment suitability and expected outcomes can only be assessed following clinical evaluation.\r\n <\/p>\r\n\r\n <div class=\"lc-case__filters lc-case__exit-blur\" data-exit-layer=\"ui\" data-filter-group=\"desktop\" aria-label=\"Filter real cases\">\r\n <button class=\"lc-case__filter is-active\" type=\"button\" data-filter=\"all\" aria-pressed=\"true\">All<\/button>\r\n <button class=\"lc-case__filter\" type=\"button\" data-filter=\"hair\" aria-pressed=\"false\">Hair<\/button>\r\n <button class=\"lc-case__filter\" type=\"button\" data-filter=\"beard\" aria-pressed=\"false\">Beard<\/button>\r\n <button class=\"lc-case__filter\" type=\"button\" data-filter=\"brows\" aria-pressed=\"false\">Eyebrows<\/button>\r\n <button class=\"lc-case__filter\" type=\"button\" data-filter=\"dental\" aria-pressed=\"false\">Dental<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"lc-case__meta-shell lc-case__exit-blur\" data-exit-layer=\"metadata\" aria-live=\"polite\">\r\n <div class=\"lc-case__meta\">\r\n <div class=\"lc-case__meta-top\">\r\n <span class=\"lc-case__meta-category\">Hair Restoration<\/span>\r\n <span class=\"lc-case__meta-count\">01 \/ 15<\/span>\r\n <\/div>\r\n\r\n <h3 class=\"lc-case__meta-treatment\">Hair restoration case<\/h3>\r\n\r\n <p class=\"lc-case__meta-follow\">\r\n Verified follow-up details to be supplied by Lamina Clinic.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div\r\n class=\"lc-case__mobile-progress lc-case__exit-blur\"\r\n data-exit-layer=\"ui\"\r\n aria-hidden=\"true\"\r\n >\r\n <div class=\"lc-case__mobile-progress-track\">\r\n <span class=\"lc-case__mobile-progress-fill\"><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/aside>\r\n\r\n <div class=\"lc-case__visual lc-case__exit-blur\" data-exit-layer=\"media\">\r\n <div class=\"lc-case__case-list\" role=\"region\" tabindex=\"0\" aria-label=\"Real treatment cases. Swipe horizontally to browse.\">\r\n\r\n <article class=\"lc-case__card\" data-case-id=\"hair-01\" data-category=\"hair\" data-layout=\"combined\" aria-label=\"Hair Restoration case 01\">\r\n <div class=\"lc-case__comparison\">\r\n <figure class=\"lc-case__photo is-combined\">\r\n <img\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/hair7.webp\"\r\n alt=\"Clinic-supplied hair restoration case 1\"\r\n loading=\"lazy\"\r\n decoding=\"async\"\r\n data-fallback-src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/Hair7.webp\"\r\n onerror=\"if(!this.dataset.fallbackTried&&this.dataset.fallbackSrc){this.dataset.fallbackTried='1';this.src=this.dataset.fallbackSrc;}else{this.parentElement.classList.add('is-missing');this.remove();}\"\r\n >\r\n <\/figure>\r\n <\/div>\r\n <footer class=\"lc-case__card-foot\">\r\n <span class=\"lc-case__card-type\">Hair Restoration<\/span>\r\n <span class=\"lc-case__card-code\">Case 01<\/span>\r\n <\/footer>\r\n <\/article>\r\n\r\n <article class=\"lc-case__card\" data-case-id=\"hair-02\" data-category=\"hair\" data-layout=\"combined\" aria-label=\"Hair Restoration case 02\">\r\n <div class=\"lc-case__comparison\">\r\n <figure class=\"lc-case__photo is-combined\">\r\n <img\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/hair6.webp\"\r\n alt=\"Clinic-supplied hair restoration case 2\"\r\n loading=\"lazy\"\r\n decoding=\"async\"\r\n data-fallback-src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/Hair6.webp\"\r\n onerror=\"if(!this.dataset.fallbackTried&&this.dataset.fallbackSrc){this.dataset.fallbackTried='1';this.src=this.dataset.fallbackSrc;}else{this.parentElement.classList.add('is-missing');this.remove();}\"\r\n >\r\n <\/figure>\r\n <\/div>\r\n <footer class=\"lc-case__card-foot\">\r\n <span class=\"lc-case__card-type\">Hair Restoration<\/span>\r\n <span class=\"lc-case__card-code\">Case 02<\/span>\r\n <\/footer>\r\n <\/article>\r\n\r\n <article class=\"lc-case__card\" data-case-id=\"hair-03\" data-category=\"hair\" data-layout=\"combined\" aria-label=\"Hair Restoration case 03\">\r\n <div class=\"lc-case__comparison\">\r\n <figure class=\"lc-case__photo is-combined\">\r\n <img\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/hair5.webp\"\r\n alt=\"Clinic-supplied hair restoration case 3\"\r\n loading=\"lazy\"\r\n decoding=\"async\"\r\n data-fallback-src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/Hair5.webp\"\r\n onerror=\"if(!this.dataset.fallbackTried&&this.dataset.fallbackSrc){this.dataset.fallbackTried='1';this.src=this.dataset.fallbackSrc;}else{this.parentElement.classList.add('is-missing');this.remove();}\"\r\n >\r\n <\/figure>\r\n <\/div>\r\n <footer class=\"lc-case__card-foot\">\r\n <span class=\"lc-case__card-type\">Hair Restoration<\/span>\r\n <span class=\"lc-case__card-code\">Case 03<\/span>\r\n <\/footer>\r\n <\/article>\r\n\r\n <article class=\"lc-case__card\" data-case-id=\"hair-04\" data-category=\"hair\" data-layout=\"combined\" aria-label=\"Hair Restoration case 04\">\r\n <div class=\"lc-case__comparison\">\r\n <figure class=\"lc-case__photo is-combined\">\r\n <img\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/hair4.webp\"\r\n alt=\"Clinic-supplied hair restoration case 4\"\r\n loading=\"lazy\"\r\n decoding=\"async\"\r\n data-fallback-src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/Hair4.webp\"\r\n onerror=\"if(!this.dataset.fallbackTried&&this.dataset.fallbackSrc){this.dataset.fallbackTried='1';this.src=this.dataset.fallbackSrc;}else{this.parentElement.classList.add('is-missing');this.remove();}\"\r\n >\r\n <\/figure>\r\n <\/div>\r\n <footer class=\"lc-case__card-foot\">\r\n <span class=\"lc-case__card-type\">Hair Restoration<\/span>\r\n <span class=\"lc-case__card-code\">Case 04<\/span>\r\n <\/footer>\r\n <\/article>\r\n\r\n <article class=\"lc-case__card\" data-case-id=\"hair-05\" data-category=\"hair\" data-layout=\"combined\" aria-label=\"Hair Restoration case 05\">\r\n <div class=\"lc-case__comparison\">\r\n <figure class=\"lc-case__photo is-combined\">\r\n <img\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/hair3.webp\"\r\n alt=\"Clinic-supplied hair restoration case 5\"\r\n loading=\"lazy\"\r\n decoding=\"async\"\r\n data-fallback-src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/Hair3.webp\"\r\n onerror=\"if(!this.dataset.fallbackTried&&this.dataset.fallbackSrc){this.dataset.fallbackTried='1';this.src=this.dataset.fallbackSrc;}else{this.parentElement.classList.add('is-missing');this.remove();}\"\r\n >\r\n <\/figure>\r\n <\/div>\r\n <footer class=\"lc-case__card-foot\">\r\n <span class=\"lc-case__card-type\">Hair Restoration<\/span>\r\n <span class=\"lc-case__card-code\">Case 05<\/span>\r\n <\/footer>\r\n <\/article>\r\n\r\n <article class=\"lc-case__card\" data-case-id=\"hair-06\" data-category=\"hair\" data-layout=\"combined\" aria-label=\"Hair Restoration case 06\">\r\n <div class=\"lc-case__comparison\">\r\n <figure class=\"lc-case__photo is-combined\">\r\n <img\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/hair2.webp\"\r\n alt=\"Clinic-supplied hair restoration case 6\"\r\n loading=\"lazy\"\r\n decoding=\"async\"\r\n data-fallback-src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/Hair2.webp\"\r\n onerror=\"if(!this.dataset.fallbackTried&&this.dataset.fallbackSrc){this.dataset.fallbackTried='1';this.src=this.dataset.fallbackSrc;}else{this.parentElement.classList.add('is-missing');this.remove();}\"\r\n >\r\n <\/figure>\r\n <\/div>\r\n <footer class=\"lc-case__card-foot\">\r\n <span class=\"lc-case__card-type\">Hair Restoration<\/span>\r\n <span class=\"lc-case__card-code\">Case 06<\/span>\r\n <\/footer>\r\n <\/article>\r\n\r\n <article class=\"lc-case__card\" data-case-id=\"hair-07\" data-category=\"hair\" data-layout=\"combined\" aria-label=\"Hair Restoration case 07\">\r\n <div class=\"lc-case__comparison\">\r\n <figure class=\"lc-case__photo is-combined\">\r\n <img\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/hair1.webp\"\r\n alt=\"Clinic-supplied hair restoration case 7\"\r\n loading=\"lazy\"\r\n decoding=\"async\"\r\n data-fallback-src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/Hair-1.webp\"\r\n onerror=\"if(!this.dataset.fallbackTried&&this.dataset.fallbackSrc){this.dataset.fallbackTried='1';this.src=this.dataset.fallbackSrc;}else{this.parentElement.classList.add('is-missing');this.remove();}\"\r\n >\r\n <\/figure>\r\n <\/div>\r\n <footer class=\"lc-case__card-foot\">\r\n <span class=\"lc-case__card-type\">Hair Restoration<\/span>\r\n <span class=\"lc-case__card-code\">Case 07<\/span>\r\n <\/footer>\r\n <\/article>\r\n\r\n <article class=\"lc-case__card\" data-case-id=\"beard-01\" data-category=\"beard\" data-layout=\"combined\" aria-label=\"Beard Restoration case 01\">\r\n <div class=\"lc-case__comparison\">\r\n <figure class=\"lc-case__photo is-combined\">\r\n <img\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/beard-1.webp\"\r\n alt=\"Clinic-supplied beard restoration case 1\"\r\n loading=\"lazy\"\r\n decoding=\"async\"\r\n data-fallback-src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/lamina_smile_beard_transplant_collage_framed.webp\"\r\n onerror=\"if(!this.dataset.fallbackTried&&this.dataset.fallbackSrc){this.dataset.fallbackTried='1';this.src=this.dataset.fallbackSrc;}else{this.parentElement.classList.add('is-missing');this.remove();}\"\r\n >\r\n <\/figure>\r\n <\/div>\r\n <footer class=\"lc-case__card-foot\">\r\n <span class=\"lc-case__card-type\">Beard Restoration<\/span>\r\n <span class=\"lc-case__card-code\">Case 01<\/span>\r\n <\/footer>\r\n <\/article>\r\n\r\n <article class=\"lc-case__card\" data-case-id=\"brows-01\" data-category=\"brows\" data-layout=\"combined\" aria-label=\"Eyebrow Restoration case 01\">\r\n <div class=\"lc-case__comparison\">\r\n <figure class=\"lc-case__photo is-combined\">\r\n <img\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/brow2.webp\"\r\n alt=\"Clinic-supplied eyebrow restoration case 1\"\r\n loading=\"lazy\"\r\n decoding=\"async\"\r\n data-fallback-src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/brows2.webp\"\r\n onerror=\"if(!this.dataset.fallbackTried&&this.dataset.fallbackSrc){this.dataset.fallbackTried='1';this.src=this.dataset.fallbackSrc;}else{this.parentElement.classList.add('is-missing');this.remove();}\"\r\n >\r\n <\/figure>\r\n <\/div>\r\n <footer class=\"lc-case__card-foot\">\r\n <span class=\"lc-case__card-type\">Eyebrow Restoration<\/span>\r\n <span class=\"lc-case__card-code\">Case 01<\/span>\r\n <\/footer>\r\n <\/article>\r\n\r\n <article class=\"lc-case__card\" data-case-id=\"brows-02\" data-category=\"brows\" data-layout=\"combined\" aria-label=\"Eyebrow Restoration case 02\">\r\n <div class=\"lc-case__comparison\">\r\n <figure class=\"lc-case__photo is-combined\">\r\n <img\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/brow.webp\"\r\n alt=\"Clinic-supplied eyebrow restoration case 2\"\r\n loading=\"lazy\"\r\n decoding=\"async\"\r\n data-fallback-src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/brows1.webp\"\r\n onerror=\"if(!this.dataset.fallbackTried&&this.dataset.fallbackSrc){this.dataset.fallbackTried='1';this.src=this.dataset.fallbackSrc;}else{this.parentElement.classList.add('is-missing');this.remove();}\"\r\n >\r\n <\/figure>\r\n <\/div>\r\n <footer class=\"lc-case__card-foot\">\r\n <span class=\"lc-case__card-type\">Eyebrow Restoration<\/span>\r\n <span class=\"lc-case__card-code\">Case 02<\/span>\r\n <\/footer>\r\n <\/article>\r\n\r\n <article class=\"lc-case__card\" data-case-id=\"dental-01\" data-category=\"dental\" data-layout=\"combined\" aria-label=\"Dental Aesthetics case 01\">\r\n <div class=\"lc-case__comparison\">\r\n <figure class=\"lc-case__photo is-combined\">\r\n <img\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/WhatsApp-Image-2026-09-14-at-11.07.51-AM-4.jpeg\"\r\n alt=\"Clinic-supplied dental aesthetics case 1\"\r\n loading=\"lazy\"\r\n decoding=\"async\"\r\n onerror=\"this.parentElement.classList.add('is-missing');this.remove();\"\r\n >\r\n <\/figure>\r\n <\/div>\r\n <footer class=\"lc-case__card-foot\">\r\n <span class=\"lc-case__card-type\">Dental Aesthetics<\/span>\r\n <span class=\"lc-case__card-code\">Case 01<\/span>\r\n <\/footer>\r\n <\/article>\r\n\r\n <article class=\"lc-case__card\" data-case-id=\"dental-02\" data-category=\"dental\" data-layout=\"combined\" aria-label=\"Dental Aesthetics case 02\">\r\n <div class=\"lc-case__comparison\">\r\n <figure class=\"lc-case__photo is-combined\">\r\n <img\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/WhatsApp-Image-2026-09-14-at-11.07.51-AM.jpeg\"\r\n alt=\"Clinic-supplied dental aesthetics case 2\"\r\n loading=\"lazy\"\r\n decoding=\"async\"\r\n onerror=\"this.parentElement.classList.add('is-missing');this.remove();\"\r\n >\r\n <\/figure>\r\n <\/div>\r\n <footer class=\"lc-case__card-foot\">\r\n <span class=\"lc-case__card-type\">Dental Aesthetics<\/span>\r\n <span class=\"lc-case__card-code\">Case 02<\/span>\r\n <\/footer>\r\n <\/article>\r\n\r\n <article class=\"lc-case__card\" data-case-id=\"dental-03\" data-category=\"dental\" data-layout=\"combined\" aria-label=\"Dental Aesthetics case 03\">\r\n <div class=\"lc-case__comparison\">\r\n <figure class=\"lc-case__photo is-combined\">\r\n <img\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/WhatsApp-Image-2026-09-14-at-11.07.52-AM-1.jpeg\"\r\n alt=\"Clinic-supplied dental aesthetics case 3\"\r\n loading=\"lazy\"\r\n decoding=\"async\"\r\n onerror=\"this.parentElement.classList.add('is-missing');this.remove();\"\r\n >\r\n <\/figure>\r\n <\/div>\r\n <footer class=\"lc-case__card-foot\">\r\n <span class=\"lc-case__card-type\">Dental Aesthetics<\/span>\r\n <span class=\"lc-case__card-code\">Case 03<\/span>\r\n <\/footer>\r\n <\/article>\r\n\r\n <article class=\"lc-case__card\" data-case-id=\"dental-04\" data-category=\"dental\" data-layout=\"combined\" aria-label=\"Dental Aesthetics case 04\">\r\n <div class=\"lc-case__comparison\">\r\n <figure class=\"lc-case__photo is-combined\">\r\n <img\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/WhatsApp-Image-2026-09-14-at-11.07.51-AM-3.jpeg\"\r\n alt=\"Clinic-supplied dental aesthetics case 4\"\r\n loading=\"lazy\"\r\n decoding=\"async\"\r\n onerror=\"this.parentElement.classList.add('is-missing');this.remove();\"\r\n >\r\n <\/figure>\r\n <\/div>\r\n <footer class=\"lc-case__card-foot\">\r\n <span class=\"lc-case__card-type\">Dental Aesthetics<\/span>\r\n <span class=\"lc-case__card-code\">Case 04<\/span>\r\n <\/footer>\r\n <\/article>\r\n\r\n <article class=\"lc-case__card\" data-case-id=\"dental-05\" data-category=\"dental\" data-layout=\"combined\" aria-label=\"Dental Aesthetics case 05\">\r\n <div class=\"lc-case__comparison\">\r\n <figure class=\"lc-case__photo is-combined\">\r\n <img\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/WhatsApp-Image-2026-09-14-at-11.07.53-AM-1.jpeg\"\r\n alt=\"Clinic-supplied dental aesthetics case 5\"\r\n loading=\"lazy\"\r\n decoding=\"async\"\r\n onerror=\"this.parentElement.classList.add('is-missing');this.remove();\"\r\n >\r\n <\/figure>\r\n <\/div>\r\n <footer class=\"lc-case__card-foot\">\r\n <span class=\"lc-case__card-type\">Dental Aesthetics<\/span>\r\n <span class=\"lc-case__card-code\">Case 05<\/span>\r\n <\/footer>\r\n <\/article>\r\n <\/div>\r\n\r\n <div\r\n class=\"lc-case__mobile-groups\"\r\n data-mobile-groups\r\n aria-label=\"Grouped real treatment cases\"\r\n >\r\n <section\r\n class=\"lc-case__mobile-group lc-case__mobile-group--restoration\"\r\n data-mobile-group=\"restoration\"\r\n aria-labelledby=\"lc-mobile-restoration-title\"\r\n >\r\n <div class=\"lc-case__mobile-group-head\">\r\n <div>\r\n <span class=\"lc-case__mobile-group-kicker\">RESTORATION CASES<\/span>\r\n <h3\r\n class=\"lc-case__mobile-group-title\"\r\n id=\"lc-mobile-restoration-title\"\r\n data-mobile-group-title=\"restoration\"\r\n >\r\n Hair \u00b7 Beard \u00b7 Brows\r\n <\/h3>\r\n <\/div>\r\n\r\n <span\r\n class=\"lc-case__mobile-group-count\"\r\n data-mobile-group-count=\"restoration\"\r\n >\r\n 10 CASES\r\n <\/span>\r\n <\/div>\r\n\r\n <div\r\n class=\"lc-case__mobile-group-reel\"\r\n data-mobile-group-reel=\"restoration\"\r\n role=\"region\"\r\n tabindex=\"0\"\r\n aria-label=\"Hair, beard and eyebrow treatment cases. Swipe horizontally to browse.\"\r\n ><\/div>\r\n <\/section>\r\n\r\n <section\r\n class=\"lc-case__mobile-group lc-case__mobile-group--dental\"\r\n data-mobile-group=\"dental\"\r\n aria-labelledby=\"lc-mobile-dental-title\"\r\n >\r\n <div class=\"lc-case__mobile-group-head\">\r\n <div>\r\n <span class=\"lc-case__mobile-group-kicker\">DENTAL CASES<\/span>\r\n <h3\r\n class=\"lc-case__mobile-group-title\"\r\n id=\"lc-mobile-dental-title\"\r\n data-mobile-group-title=\"dental\"\r\n >\r\n Dental Aesthetics\r\n <\/h3>\r\n <\/div>\r\n\r\n <span\r\n class=\"lc-case__mobile-group-count\"\r\n data-mobile-group-count=\"dental\"\r\n >\r\n 05 CASES\r\n <\/span>\r\n <\/div>\r\n\r\n <div\r\n class=\"lc-case__mobile-group-reel\"\r\n data-mobile-group-reel=\"dental\"\r\n role=\"region\"\r\n tabindex=\"0\"\r\n aria-label=\"Dental aesthetics cases. Swipe horizontally to browse.\"\r\n ><\/div>\r\n <\/section>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n<script>\r\n(() => {\r\n\r\n const root =\r\n document.getElementById(\r\n 'lamina-real-cases'\r\n );\r\n\r\n\r\n if (\r\n !root ||\r\n root.dataset.realCasesReady ===\r\n 'true'\r\n ) return;\r\n\r\n\r\n root.dataset.realCasesReady =\r\n 'true';\r\n\r\n\r\n \/* =======================================================\r\n SHARED DOM \/ DATA\r\n ======================================================= *\/\r\n\r\n const stage =\r\n root.querySelector(\r\n '.lc-case__stage'\r\n );\r\n\r\n\r\n const caseList =\r\n root.querySelector(\r\n '.lc-case__case-list'\r\n );\r\n\r\n\r\n const cards =\r\n [\r\n ...root.querySelectorAll(\r\n '.lc-case__card'\r\n )\r\n ];\r\n\r\n\r\n const mobileGroups =\r\n root.querySelector(\r\n '[data-mobile-groups]'\r\n );\r\n\r\n\r\n const mobileRestorationGroup =\r\n root.querySelector(\r\n '[data-mobile-group=\"restoration\"]'\r\n );\r\n\r\n\r\n const mobileDentalGroup =\r\n root.querySelector(\r\n '[data-mobile-group=\"dental\"]'\r\n );\r\n\r\n\r\n const mobileRestorationReel =\r\n root.querySelector(\r\n '[data-mobile-group-reel=\"restoration\"]'\r\n );\r\n\r\n\r\n const mobileDentalReel =\r\n root.querySelector(\r\n '[data-mobile-group-reel=\"dental\"]'\r\n );\r\n\r\n\r\n const mobileRestorationTitle =\r\n root.querySelector(\r\n '[data-mobile-group-title=\"restoration\"]'\r\n );\r\n\r\n\r\n const mobileRestorationCount =\r\n root.querySelector(\r\n '[data-mobile-group-count=\"restoration\"]'\r\n );\r\n\r\n\r\n const mobileDentalCount =\r\n root.querySelector(\r\n '[data-mobile-group-count=\"dental\"]'\r\n );\r\n\r\n\r\n const mobileReels =\r\n [\r\n mobileRestorationReel,\r\n mobileDentalReel\r\n ].filter(\r\n Boolean\r\n );\r\n\r\n\r\n const filterButtons =\r\n [\r\n ...root.querySelectorAll(\r\n '.lc-case__filter'\r\n )\r\n ];\r\n\r\n\r\n const meta =\r\n root.querySelector(\r\n '.lc-case__meta'\r\n );\r\n\r\n\r\n const metaCategory =\r\n root.querySelector(\r\n '.lc-case__meta-category'\r\n );\r\n\r\n\r\n const metaCount =\r\n root.querySelector(\r\n '.lc-case__meta-count'\r\n );\r\n\r\n\r\n const metaTreatment =\r\n root.querySelector(\r\n '.lc-case__meta-treatment'\r\n );\r\n\r\n\r\n const metaFollow =\r\n root.querySelector(\r\n '.lc-case__meta-follow'\r\n );\r\n\r\n\r\n const mobileProgressFill =\r\n root.querySelector(\r\n '.lc-case__mobile-progress-fill'\r\n );\r\n\r\n\r\n const reducedMotion =\r\n window.matchMedia(\r\n '(prefers-reduced-motion: reduce)'\r\n );\r\n\r\n\r\n const mobileModeQuery =\r\n window.matchMedia(\r\n '(max-width:1024px)'\r\n );\r\n\r\n\r\n const caseData =\r\n [\r\n {\r\n caseId:'hair-01',\r\n category:'hair',\r\n categoryLabel:'Hair Restoration',\r\n treatment:'Hair restoration case',\r\n followUp:null,\r\n layout:'combined',\r\n mobileLayout:'combined',\r\n beforePositionMobile:null,\r\n afterPositionMobile:null\r\n },\r\n\r\n {\r\n caseId:'hair-02',\r\n category:'hair',\r\n categoryLabel:'Hair Restoration',\r\n treatment:'Hair restoration case',\r\n followUp:null,\r\n layout:'combined',\r\n mobileLayout:'combined',\r\n beforePositionMobile:null,\r\n afterPositionMobile:null\r\n },\r\n\r\n {\r\n caseId:'hair-03',\r\n category:'hair',\r\n categoryLabel:'Hair Restoration',\r\n treatment:'Hair restoration case',\r\n followUp:null,\r\n layout:'combined',\r\n mobileLayout:'combined',\r\n beforePositionMobile:null,\r\n afterPositionMobile:null\r\n },\r\n\r\n {\r\n caseId:'hair-04',\r\n category:'hair',\r\n categoryLabel:'Hair Restoration',\r\n treatment:'Hair restoration case',\r\n followUp:null,\r\n layout:'combined',\r\n mobileLayout:'combined',\r\n beforePositionMobile:null,\r\n afterPositionMobile:null\r\n },\r\n\r\n {\r\n caseId:'hair-05',\r\n category:'hair',\r\n categoryLabel:'Hair Restoration',\r\n treatment:'Hair restoration case',\r\n followUp:null,\r\n layout:'combined',\r\n mobileLayout:'combined',\r\n beforePositionMobile:null,\r\n afterPositionMobile:null\r\n },\r\n\r\n {\r\n caseId:'hair-06',\r\n category:'hair',\r\n categoryLabel:'Hair Restoration',\r\n treatment:'Hair restoration case',\r\n followUp:null,\r\n layout:'combined',\r\n mobileLayout:'combined',\r\n beforePositionMobile:null,\r\n afterPositionMobile:null\r\n },\r\n\r\n {\r\n caseId:'hair-07',\r\n category:'hair',\r\n categoryLabel:'Hair Restoration',\r\n treatment:'Hair restoration case',\r\n followUp:null,\r\n layout:'combined',\r\n mobileLayout:'combined',\r\n beforePositionMobile:null,\r\n afterPositionMobile:null\r\n },\r\n\r\n {\r\n caseId:'beard-01',\r\n category:'beard',\r\n categoryLabel:'Beard Restoration',\r\n treatment:'Beard restoration case',\r\n followUp:null,\r\n layout:'combined',\r\n mobileLayout:'combined',\r\n beforePositionMobile:null,\r\n afterPositionMobile:null\r\n },\r\n\r\n {\r\n caseId:'brows-01',\r\n category:'brows',\r\n categoryLabel:'Eyebrow Restoration',\r\n treatment:'Eyebrow restoration case',\r\n followUp:null,\r\n layout:'combined',\r\n mobileLayout:'combined',\r\n beforePositionMobile:null,\r\n afterPositionMobile:null\r\n },\r\n\r\n {\r\n caseId:'brows-02',\r\n category:'brows',\r\n categoryLabel:'Eyebrow Restoration',\r\n treatment:'Eyebrow restoration case',\r\n followUp:null,\r\n layout:'combined',\r\n mobileLayout:'combined',\r\n beforePositionMobile:null,\r\n afterPositionMobile:null\r\n },\r\n\r\n {\r\n caseId:'dental-01',\r\n category:'dental',\r\n categoryLabel:'Dental Aesthetics',\r\n treatment:'Dental aesthetics case',\r\n followUp:null,\r\n layout:'combined',\r\n mobileLayout:'combined',\r\n beforePositionMobile:null,\r\n afterPositionMobile:null\r\n },\r\n\r\n {\r\n caseId:'dental-02',\r\n category:'dental',\r\n categoryLabel:'Dental Aesthetics',\r\n treatment:'Dental aesthetics case',\r\n followUp:null,\r\n layout:'combined',\r\n mobileLayout:'combined',\r\n beforePositionMobile:null,\r\n afterPositionMobile:null\r\n },\r\n\r\n {\r\n caseId:'dental-03',\r\n category:'dental',\r\n categoryLabel:'Dental Aesthetics',\r\n treatment:'Dental aesthetics case',\r\n followUp:null,\r\n layout:'combined',\r\n mobileLayout:'combined',\r\n beforePositionMobile:null,\r\n afterPositionMobile:null\r\n },\r\n\r\n {\r\n caseId:'dental-04',\r\n category:'dental',\r\n categoryLabel:'Dental Aesthetics',\r\n treatment:'Dental aesthetics case',\r\n followUp:null,\r\n layout:'combined',\r\n mobileLayout:'combined',\r\n beforePositionMobile:null,\r\n afterPositionMobile:null\r\n },\r\n\r\n {\r\n caseId:'dental-05',\r\n category:'dental',\r\n categoryLabel:'Dental Aesthetics',\r\n treatment:'Dental aesthetics case',\r\n followUp:null,\r\n layout:'combined',\r\n mobileLayout:'combined',\r\n beforePositionMobile:null,\r\n afterPositionMobile:null\r\n }\r\n ];\r\n\r\n\r\n if (\r\n !stage ||\r\n !caseList ||\r\n !cards.length\r\n ) return;\r\n\r\n\r\n const cardById =\r\n new Map(\r\n cards.map(\r\n card => [\r\n card.dataset.caseId,\r\n card\r\n ]\r\n )\r\n );\r\n\r\n\r\n let activeFilter =\r\n 'all';\r\n\r\n\r\n let visibleCases =\r\n caseData.slice();\r\n\r\n\r\n let activeCaseId =\r\n caseData[0].caseId;\r\n\r\n\r\n let activeMetaIndex =\r\n -1;\r\n\r\n\r\n let metaTimer =\r\n null;\r\n\r\n\r\n let filterTimer =\r\n null;\r\n\r\n\r\n let mode =\r\n null;\r\n\r\n\r\n let sectionNear =\r\n true;\r\n\r\n\r\n function clamp(\r\n value,\r\n min,\r\n max\r\n ){\r\n\r\n return Math.min(\r\n max,\r\n Math.max(\r\n min,\r\n value\r\n )\r\n );\r\n\r\n }\r\n\r\n\r\n function lerp(\r\n a,\r\n b,\r\n t\r\n ){\r\n\r\n return (\r\n a +\r\n (\r\n b -\r\n a\r\n ) *\r\n t\r\n );\r\n\r\n }\r\n\r\n\r\n function visibleIndexForId(\r\n caseId\r\n ){\r\n\r\n return visibleCases.findIndex(\r\n item =>\r\n item.caseId ===\r\n caseId\r\n );\r\n\r\n }\r\n\r\n\r\n function caseForId(\r\n caseId\r\n ){\r\n\r\n return caseData.find(\r\n item =>\r\n item.caseId ===\r\n caseId\r\n );\r\n\r\n }\r\n\r\n\r\n function syncFilterButtons(){\r\n\r\n filterButtons.forEach(\r\n button => {\r\n\r\n const active =\r\n button.dataset.filter ===\r\n activeFilter;\r\n\r\n\r\n button.classList.toggle(\r\n 'is-active',\r\n active\r\n );\r\n\r\n\r\n button.setAttribute(\r\n 'aria-pressed',\r\n active\r\n ? 'true'\r\n : 'false'\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n function setMobileProgress(\r\n index\r\n ){\r\n\r\n if (\r\n !mobileProgressFill\r\n ) return;\r\n\r\n\r\n const denominator =\r\n Math.max(\r\n 1,\r\n visibleCases.length -\r\n 1\r\n );\r\n\r\n\r\n const progress =\r\n visibleCases.length <=\r\n 1\r\n ? 1\r\n : clamp(\r\n index \/\r\n denominator,\r\n 0,\r\n 1\r\n );\r\n\r\n\r\n mobileProgressFill.style.setProperty(\r\n '--mobile-progress',\r\n progress.toFixed(\r\n 4\r\n )\r\n );\r\n\r\n }\r\n\r\n\r\n function commitMetadata(\r\n index\r\n ){\r\n\r\n const current =\r\n visibleCases[\r\n index\r\n ];\r\n\r\n\r\n if (\r\n !current ||\r\n !meta\r\n ) return;\r\n\r\n\r\n activeMetaIndex =\r\n index;\r\n\r\n\r\n if (\r\n metaCategory\r\n ){\r\n\r\n metaCategory.textContent =\r\n current.categoryLabel;\r\n\r\n }\r\n\r\n\r\n if (\r\n metaCount\r\n ){\r\n\r\n metaCount.textContent =\r\n String(\r\n index +\r\n 1\r\n ).padStart(\r\n 2,\r\n '0'\r\n ) +\r\n ' \/ ' +\r\n String(\r\n visibleCases.length\r\n ).padStart(\r\n 2,\r\n '0'\r\n );\r\n\r\n }\r\n\r\n\r\n if (\r\n metaTreatment\r\n ){\r\n\r\n metaTreatment.textContent =\r\n current.treatment;\r\n\r\n }\r\n\r\n\r\n if (\r\n metaFollow\r\n ){\r\n\r\n metaFollow.textContent =\r\n current.followUp ||\r\n 'Verified follow-up details to be supplied by Lamina Clinic.';\r\n\r\n }\r\n\r\n\r\n setMobileProgress(\r\n index\r\n );\r\n\r\n }\r\n\r\n\r\n function setMetadata(\r\n index,\r\n immediate =\r\n false\r\n ){\r\n\r\n if (\r\n index ===\r\n activeMetaIndex &&\r\n !immediate\r\n ) return;\r\n\r\n\r\n const current =\r\n visibleCases[\r\n index\r\n ];\r\n\r\n\r\n if (\r\n !current ||\r\n !meta\r\n ) return;\r\n\r\n\r\n window.clearTimeout(\r\n metaTimer\r\n );\r\n\r\n\r\n if (\r\n immediate ||\r\n reducedMotion.matches\r\n ){\r\n\r\n meta.classList.remove(\r\n 'is-changing'\r\n );\r\n\r\n\r\n commitMetadata(\r\n index\r\n );\r\n\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n meta.classList.add(\r\n 'is-changing'\r\n );\r\n\r\n\r\n metaTimer =\r\n window.setTimeout(\r\n () => {\r\n\r\n commitMetadata(\r\n index\r\n );\r\n\r\n\r\n requestAnimationFrame(\r\n () => {\r\n\r\n meta.classList.remove(\r\n 'is-changing'\r\n );\r\n\r\n }\r\n );\r\n\r\n },\r\n mode ===\r\n 'mobile'\r\n ? 165\r\n : 190\r\n );\r\n\r\n }\r\n\r\n\r\n \/* =======================================================\r\n EXIT FOCUS \u2014 ONE VERTICAL-SCROLL CONTROLLER\r\n Mobile reel logic never drives this.\r\n ======================================================= *\/\r\n\r\n const exitTargets =\r\n [\r\n ...root.querySelectorAll(\r\n '[data-exit-layer]'\r\n )\r\n ];\r\n\r\n\r\n let exitMetrics =\r\n [];\r\n\r\n\r\n let exitTicking =\r\n false;\r\n\r\n\r\n let previousWindowY =\r\n window.scrollY;\r\n\r\n\r\n let scrollDirection =\r\n 0;\r\n\r\n\r\n const exitProgressByElement =\r\n new WeakMap();\r\n\r\n\r\n function exitConfigFor(\r\n type,\r\n compact\r\n ){\r\n\r\n const desktop =\r\n {\r\n eyebrow:{\r\n start:.24,\r\n full:-.10,\r\n blur:2.35\r\n },\r\n headline:{\r\n start:.22,\r\n full:-.12,\r\n blur:2.35\r\n },\r\n copy:{\r\n start:.18,\r\n full:-.15,\r\n blur:2.05\r\n },\r\n ui:{\r\n start:.14,\r\n full:-.17,\r\n blur:1.65\r\n },\r\n metadata:{\r\n start:.10,\r\n full:-.20,\r\n blur:1.55\r\n },\r\n media:{\r\n start:.055,\r\n full:-.24,\r\n blur:1.75\r\n }\r\n };\r\n\r\n\r\n const mobile =\r\n {\r\n eyebrow:{\r\n start:0,\r\n full:0,\r\n blur:0\r\n },\r\n headline:{\r\n start:0,\r\n full:0,\r\n blur:0\r\n },\r\n copy:{\r\n start:0,\r\n full:0,\r\n blur:0\r\n },\r\n ui:{\r\n start:0,\r\n full:0,\r\n blur:0\r\n },\r\n metadata:{\r\n start:0,\r\n full:0,\r\n blur:0\r\n },\r\n media:{\r\n start:0,\r\n full:0,\r\n blur:0\r\n }\r\n };\r\n\r\n\r\n const set =\r\n compact\r\n ? mobile\r\n : desktop;\r\n\r\n\r\n return (\r\n set[\r\n type\r\n ] ||\r\n set.copy\r\n );\r\n\r\n }\r\n\r\n\r\n function smootherstep(\r\n value\r\n ){\r\n\r\n const t =\r\n clamp(\r\n value,\r\n 0,\r\n 1\r\n );\r\n\r\n\r\n return (\r\n t *\r\n t *\r\n t *\r\n (\r\n t *\r\n (\r\n t *\r\n 6 -\r\n 15\r\n ) +\r\n 10\r\n )\r\n );\r\n\r\n }\r\n\r\n\r\n function measureExitFocus(){\r\n\r\n const currentY =\r\n window.scrollY;\r\n\r\n\r\n const stageRect =\r\n stage.getBoundingClientRect();\r\n\r\n\r\n const desktopSticky =\r\n mode ===\r\n 'desktop';\r\n\r\n\r\n exitMetrics =\r\n exitTargets.map(\r\n element => {\r\n\r\n const rect =\r\n element.getBoundingClientRect();\r\n\r\n\r\n const insideStage =\r\n desktopSticky &&\r\n stage.contains(\r\n element\r\n );\r\n\r\n\r\n return {\r\n element,\r\n type:\r\n element.dataset.exitLayer ||\r\n 'copy',\r\n insideStage,\r\n stageCenterOffset:\r\n insideStage\r\n ? (\r\n rect.top -\r\n stageRect.top +\r\n rect.height *\r\n .5\r\n )\r\n : 0,\r\n documentCenterY:\r\n insideStage\r\n ? 0\r\n : (\r\n currentY +\r\n rect.top +\r\n rect.height *\r\n .5\r\n )\r\n };\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n function clearExitFocus(){\r\n\r\n exitTargets.forEach(\r\n element => {\r\n\r\n exitProgressByElement.set(\r\n element,\r\n 0\r\n );\r\n\r\n\r\n element.style.setProperty(\r\n '--lc-section-exit-blur',\r\n '0px'\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n function renderExitFocus(){\r\n\r\n exitTicking =\r\n false;\r\n\r\n\r\n if (\r\n reducedMotion.matches ||\r\n !sectionNear\r\n ){\r\n\r\n clearExitFocus();\r\n return;\r\n\r\n }\r\n\r\n\r\n const currentY =\r\n window.scrollY;\r\n\r\n\r\n const delta =\r\n currentY -\r\n previousWindowY;\r\n\r\n\r\n if (\r\n delta >\r\n 2\r\n ){\r\n\r\n scrollDirection =\r\n 1;\r\n\r\n }else if(\r\n delta <\r\n -2\r\n ){\r\n\r\n scrollDirection =\r\n -1;\r\n\r\n }\r\n\r\n\r\n previousWindowY =\r\n currentY;\r\n\r\n\r\n const viewportHeight =\r\n Math.max(\r\n 1,\r\n window.innerHeight ||\r\n document.documentElement.clientHeight\r\n );\r\n\r\n\r\n const compact =\r\n mode ===\r\n 'mobile';\r\n\r\n\r\n const stageTop =\r\n mode ===\r\n 'desktop'\r\n ? stage.getBoundingClientRect().top\r\n : 0;\r\n\r\n\r\n const holdMedia =\r\n root.dataset.mobileReelTouch ===\r\n 'true';\r\n\r\n\r\n exitMetrics.forEach(\r\n item => {\r\n\r\n const config =\r\n exitConfigFor(\r\n item.type,\r\n compact\r\n );\r\n\r\n\r\n const focused =\r\n item.element.matches(\r\n ':focus-within'\r\n );\r\n\r\n\r\n if (\r\n focused ||\r\n (\r\n holdMedia &&\r\n item.type ===\r\n 'media'\r\n )\r\n ){\r\n\r\n exitProgressByElement.set(\r\n item.element,\r\n 0\r\n );\r\n\r\n\r\n item.element.style.setProperty(\r\n '--lc-section-exit-blur',\r\n '0px'\r\n );\r\n\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n const centerY =\r\n item.insideStage\r\n ? (\r\n stageTop +\r\n item.stageCenterOffset\r\n )\r\n : (\r\n item.documentCenterY -\r\n currentY\r\n );\r\n\r\n\r\n const startY =\r\n viewportHeight *\r\n config.start;\r\n\r\n\r\n const fullY =\r\n viewportHeight *\r\n config.full;\r\n\r\n\r\n const geometric =\r\n centerY <\r\n startY\r\n ? smootherstep(\r\n (\r\n startY -\r\n centerY\r\n ) \/\r\n Math.max(\r\n 1,\r\n startY -\r\n fullY\r\n )\r\n )\r\n : 0;\r\n\r\n\r\n const previous =\r\n exitProgressByElement.get(\r\n item.element\r\n ) ||\r\n 0;\r\n\r\n\r\n let target =\r\n previous;\r\n\r\n\r\n if (\r\n scrollDirection >\r\n 0\r\n ){\r\n\r\n \/*\r\n Scrolling DOWN:\r\n leaving content may become softer.\r\n *\/\r\n target =\r\n geometric;\r\n\r\n }else if(\r\n scrollDirection <\r\n 0\r\n ){\r\n\r\n \/*\r\n Scrolling UP:\r\n returning content immediately begins refocusing;\r\n it can never become softer from stale down-scroll state.\r\n *\/\r\n target =\r\n Math.min(\r\n previous,\r\n geometric\r\n );\r\n\r\n }else if(\r\n previous ===\r\n 0\r\n ){\r\n\r\n \/*\r\n Initial page load \/ resize:\r\n avoid unexpectedly blurring content before direction exists.\r\n *\/\r\n target =\r\n 0;\r\n\r\n }\r\n\r\n\r\n exitProgressByElement.set(\r\n item.element,\r\n target\r\n );\r\n\r\n\r\n item.element.style.setProperty(\r\n '--lc-section-exit-blur',\r\n (\r\n config.blur *\r\n target\r\n ).toFixed(\r\n 2\r\n ) +\r\n 'px'\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n function requestExitFocus(){\r\n\r\n if (\r\n exitTicking\r\n ) return;\r\n\r\n\r\n exitTicking =\r\n true;\r\n\r\n\r\n requestAnimationFrame(\r\n renderExitFocus\r\n );\r\n\r\n }\r\n\r\n\r\n \/* =======================================================\r\n DESKTOP CONTROLLER \u2014 ORIGINAL CASE-WHEEL BEHAVIOR\r\n ======================================================= *\/\r\n\r\n let desktopTicking =\r\n false;\r\n\r\n\r\n let desktopSectionTop =\r\n 0;\r\n\r\n\r\n let viewportHeight =\r\n Math.max(\r\n 1,\r\n window.innerHeight\r\n );\r\n\r\n\r\n let entryDistance =\r\n viewportHeight *\r\n .42;\r\n\r\n\r\n let caseDistance =\r\n viewportHeight *\r\n .78;\r\n\r\n\r\n let exitDistance =\r\n viewportHeight *\r\n .72;\r\n\r\n\r\n let scrollDistance =\r\n 1;\r\n\r\n\r\n let caseStart =\r\n 0;\r\n\r\n\r\n let caseEnd =\r\n 0;\r\n\r\n\r\n function cardState(\r\n delta\r\n ){\r\n\r\n const distance =\r\n Math.abs(\r\n delta\r\n );\r\n\r\n\r\n const isOlderAbove =\r\n delta <\r\n 0;\r\n\r\n\r\n if (\r\n distance >=\r\n 2.55\r\n ){\r\n\r\n return {\r\n y:\r\n delta >\r\n 0\r\n ? 112\r\n : -112,\r\n scale:.64,\r\n opacity:0,\r\n blur:\r\n isOlderAbove\r\n ? 2.35\r\n : 0,\r\n interactive:false\r\n };\r\n\r\n }\r\n\r\n\r\n if (\r\n distance >=\r\n 1\r\n ){\r\n\r\n const t =\r\n clamp(\r\n distance -\r\n 1,\r\n 0,\r\n 1\r\n );\r\n\r\n\r\n return {\r\n y:\r\n Math.sign(\r\n delta\r\n ) *\r\n lerp(\r\n 60,\r\n 101,\r\n t\r\n ),\r\n scale:\r\n lerp(\r\n .80,\r\n .67,\r\n t\r\n ),\r\n opacity:\r\n lerp(\r\n .38,\r\n .11,\r\n t\r\n ),\r\n blur:\r\n isOlderAbove\r\n ? lerp(\r\n 1.05,\r\n 2.35,\r\n t\r\n )\r\n : 0,\r\n interactive:false\r\n };\r\n\r\n }\r\n\r\n\r\n const blurProgress =\r\n isOlderAbove &&\r\n distance >\r\n .58\r\n ? clamp(\r\n (\r\n distance -\r\n .58\r\n ) \/\r\n .42,\r\n 0,\r\n 1\r\n )\r\n : 0;\r\n\r\n\r\n const easedBlur =\r\n smootherstep(\r\n blurProgress\r\n );\r\n\r\n\r\n return {\r\n y:\r\n delta *\r\n 60,\r\n scale:\r\n lerp(\r\n 1,\r\n .80,\r\n distance\r\n ),\r\n opacity:\r\n lerp(\r\n 1,\r\n .38,\r\n distance\r\n ),\r\n blur:\r\n isOlderAbove\r\n ? 1.05 *\r\n easedBlur\r\n : 0,\r\n interactive:\r\n distance <\r\n .34\r\n };\r\n\r\n }\r\n\r\n\r\n function measureDesktop(){\r\n\r\n viewportHeight =\r\n Math.max(\r\n 1,\r\n window.innerHeight ||\r\n document.documentElement.clientHeight\r\n );\r\n\r\n\r\n entryDistance =\r\n viewportHeight *\r\n .42;\r\n\r\n\r\n caseDistance =\r\n viewportHeight *\r\n .78;\r\n\r\n\r\n exitDistance =\r\n viewportHeight *\r\n .72;\r\n\r\n\r\n const progression =\r\n Math.max(\r\n 0,\r\n visibleCases.length -\r\n 1\r\n ) *\r\n caseDistance;\r\n\r\n\r\n scrollDistance =\r\n entryDistance +\r\n progression +\r\n exitDistance;\r\n\r\n\r\n root.style.height =\r\n (\r\n viewportHeight +\r\n scrollDistance\r\n ) +\r\n 'px';\r\n\r\n\r\n const rect =\r\n root.getBoundingClientRect();\r\n\r\n\r\n desktopSectionTop =\r\n window.scrollY +\r\n rect.top;\r\n\r\n\r\n caseStart =\r\n entryDistance;\r\n\r\n\r\n caseEnd =\r\n entryDistance +\r\n progression;\r\n\r\n\r\n measureExitFocus();\r\n\r\n }\r\n\r\n\r\n function renderDesktop(){\r\n\r\n desktopTicking =\r\n false;\r\n\r\n\r\n if (\r\n mode !==\r\n 'desktop' ||\r\n !sectionNear\r\n ) return;\r\n\r\n\r\n const localScroll =\r\n clamp(\r\n window.scrollY -\r\n desktopSectionTop,\r\n 0,\r\n scrollDistance\r\n );\r\n\r\n\r\n const entryProgress =\r\n clamp(\r\n localScroll \/\r\n Math.max(\r\n 1,\r\n entryDistance\r\n ),\r\n 0,\r\n 1\r\n );\r\n\r\n\r\n const exitProgress =\r\n caseEnd <=\r\n 0\r\n ? 0\r\n : clamp(\r\n (\r\n localScroll -\r\n caseEnd\r\n ) \/\r\n Math.max(\r\n 1,\r\n exitDistance\r\n ),\r\n 0,\r\n 1\r\n );\r\n\r\n\r\n stage.classList.toggle(\r\n 'is-entry',\r\n entryProgress <\r\n .98\r\n );\r\n\r\n\r\n stage.classList.toggle(\r\n 'is-exit',\r\n exitProgress >\r\n .02\r\n );\r\n\r\n\r\n let casePosition =\r\n 0;\r\n\r\n\r\n if (\r\n visibleCases.length >\r\n 1\r\n ){\r\n\r\n casePosition =\r\n clamp(\r\n (\r\n localScroll -\r\n caseStart\r\n ) \/\r\n caseDistance,\r\n 0,\r\n visibleCases.length -\r\n 1\r\n );\r\n\r\n }\r\n\r\n\r\n cards.forEach(\r\n card => {\r\n\r\n const dataIndex =\r\n visibleCases.findIndex(\r\n item =>\r\n item.caseId ===\r\n card.dataset.caseId\r\n );\r\n\r\n\r\n if (\r\n dataIndex <\r\n 0\r\n ){\r\n\r\n card.style.opacity =\r\n '0';\r\n\r\n\r\n card.style.pointerEvents =\r\n 'none';\r\n\r\n\r\n card.style.setProperty(\r\n '--case-blur',\r\n '0px'\r\n );\r\n\r\n\r\n card.setAttribute(\r\n 'aria-hidden',\r\n 'true'\r\n );\r\n\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n const delta =\r\n dataIndex -\r\n casePosition;\r\n\r\n\r\n const state =\r\n cardState(\r\n delta\r\n );\r\n\r\n\r\n card.style.transform =\r\n 'translate3d(-50%,calc(-50% + ' +\r\n state.y.toFixed(\r\n 3\r\n ) +\r\n '%),0) scale(' +\r\n state.scale.toFixed(\r\n 4\r\n ) +\r\n ')';\r\n\r\n\r\n card.style.opacity =\r\n state.opacity.toFixed(\r\n 4\r\n );\r\n\r\n\r\n card.style.setProperty(\r\n '--case-blur',\r\n Math.min(\r\n state.blur,\r\n 2.35\r\n ).toFixed(\r\n 2\r\n ) +\r\n 'px'\r\n );\r\n\r\n\r\n card.style.zIndex =\r\n String(\r\n Math.max(\r\n 1,\r\n 100 -\r\n Math.round(\r\n Math.abs(\r\n delta\r\n ) *\r\n 20\r\n )\r\n )\r\n );\r\n\r\n\r\n card.classList.toggle(\r\n 'is-interactive',\r\n state.interactive\r\n );\r\n\r\n\r\n card.setAttribute(\r\n 'aria-hidden',\r\n state.opacity <\r\n .08\r\n ? 'true'\r\n : 'false'\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n const nearest =\r\n clamp(\r\n Math.round(\r\n casePosition\r\n ),\r\n 0,\r\n Math.max(\r\n 0,\r\n visibleCases.length -\r\n 1\r\n )\r\n );\r\n\r\n\r\n const nearestCase =\r\n visibleCases[\r\n nearest\r\n ];\r\n\r\n\r\n if (\r\n nearestCase\r\n ){\r\n\r\n activeCaseId =\r\n nearestCase.caseId;\r\n\r\n }\r\n\r\n\r\n setMetadata(\r\n nearest\r\n );\r\n\r\n }\r\n\r\n\r\n function requestDesktopRender(){\r\n\r\n if (\r\n desktopTicking ||\r\n mode !==\r\n 'desktop'\r\n ) return;\r\n\r\n\r\n desktopTicking =\r\n true;\r\n\r\n\r\n requestAnimationFrame(\r\n renderDesktop\r\n );\r\n\r\n }\r\n\r\n\r\n function clearDesktopCardInlineState(){\r\n\r\n cards.forEach(\r\n card => {\r\n\r\n card.style.removeProperty(\r\n 'transform'\r\n );\r\n\r\n\r\n card.style.removeProperty(\r\n 'opacity'\r\n );\r\n\r\n\r\n card.style.removeProperty(\r\n 'pointer-events'\r\n );\r\n\r\n\r\n card.style.removeProperty(\r\n 'z-index'\r\n );\r\n\r\n\r\n card.style.setProperty(\r\n '--case-blur',\r\n '0px'\r\n );\r\n\r\n\r\n card.classList.remove(\r\n 'is-interactive'\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n function initDesktop(\r\n preserveCase =\r\n true\r\n ){\r\n\r\n mode =\r\n 'desktop';\r\n\r\n\r\n root.classList.remove(\r\n 'is-mobile-reel'\r\n );\r\n\r\n\r\n root.classList.add(\r\n 'is-enhanced'\r\n );\r\n\r\n\r\n root.setAttribute(\r\n 'aria-labelledby',\r\n 'lamina-real-cases-title'\r\n );\r\n\r\n\r\n cards.forEach(\r\n card => {\r\n\r\n card.classList.remove(\r\n 'is-mobile-active',\r\n 'is-mobile-hidden'\r\n );\r\n\r\n\r\n card.removeAttribute(\r\n 'data-mobile-layout'\r\n );\r\n\r\n\r\n card.style.removeProperty(\r\n '--mobile-object-position'\r\n );\r\n\r\n\r\n card.style.removeProperty(\r\n 'display'\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n measureDesktop();\r\n\r\n\r\n if (\r\n preserveCase &&\r\n visibleCases.length\r\n ){\r\n\r\n const index =\r\n Math.max(\r\n 0,\r\n visibleIndexForId(\r\n activeCaseId\r\n )\r\n );\r\n\r\n\r\n const rootRect =\r\n root.getBoundingClientRect();\r\n\r\n\r\n const sectionVisible =\r\n rootRect.bottom >\r\n 0 &&\r\n rootRect.top <\r\n viewportHeight;\r\n\r\n\r\n if (\r\n sectionVisible\r\n ){\r\n\r\n window.scrollTo(\r\n {\r\n top:\r\n desktopSectionTop +\r\n caseStart +\r\n index *\r\n caseDistance +\r\n 1,\r\n behavior:'auto'\r\n }\r\n );\r\n\r\n }\r\n\r\n }\r\n\r\n\r\n renderDesktop();\r\n\r\n\r\n measureExitFocus();\r\n\r\n\r\n requestExitFocus();\r\n\r\n }\r\n\r\n\r\n function destroyDesktop(){\r\n\r\n root.classList.remove(\r\n 'is-enhanced'\r\n );\r\n\r\n\r\n root.style.height =\r\n '';\r\n\r\n\r\n stage.classList.remove(\r\n 'is-entry',\r\n 'is-exit',\r\n 'is-filtering'\r\n );\r\n\r\n\r\n clearDesktopCardInlineState();\r\n\r\n }\r\n\r\n\r\n \/* =======================================================\r\n MOBILE \/ COMPACT TABLET CONTROLLER \u2014 GROUPED CASE REELS\r\n Hair \/ Beard \/ Brows and Dental never share the same reel.\r\n ======================================================= *\/\r\n\r\n let mobileScrollTicking =\r\n false;\r\n\r\n\r\n let mobileActiveIndex =\r\n 0;\r\n\r\n\r\n let mobilePointerHeld =\r\n false;\r\n\r\n\r\n let mobileListenersBound =\r\n false;\r\n\r\n\r\n const mobileReelTicking =\r\n new WeakMap();\r\n\r\n\r\n function mobileGroupForCategory(\r\n category\r\n ){\r\n\r\n return category ===\r\n 'dental'\r\n ? 'dental'\r\n : 'restoration';\r\n\r\n }\r\n\r\n\r\n function mobileReelForCategory(\r\n category\r\n ){\r\n\r\n return category ===\r\n 'dental'\r\n ? mobileDentalReel\r\n : mobileRestorationReel;\r\n\r\n }\r\n\r\n\r\n function moveCardsIntoMobileGroups(){\r\n\r\n if (\r\n !mobileGroups ||\r\n !mobileRestorationReel ||\r\n !mobileDentalReel\r\n ) return;\r\n\r\n\r\n caseData.forEach(\r\n item => {\r\n\r\n const card =\r\n cardById.get(\r\n item.caseId\r\n );\r\n\r\n\r\n if (\r\n !card\r\n ) return;\r\n\r\n\r\n const reel =\r\n mobileReelForCategory(\r\n item.category\r\n );\r\n\r\n\r\n reel?.appendChild(\r\n card\r\n );\r\n\r\n\r\n \/*\r\n The case cards begin inside the desktop source list.\r\n After moving them into a visible compact reel, make\r\n sure native lazy-loading does not leave a visible\r\n restoration card waiting indefinitely.\r\n *\/\r\n if (\r\n item.category !==\r\n 'dental'\r\n ){\r\n\r\n card.querySelectorAll(\r\n '.lc-case__photo img'\r\n ).forEach(\r\n image => {\r\n\r\n image.loading =\r\n 'eager';\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n function restoreCardsToDesktopList(){\r\n\r\n caseData.forEach(\r\n item => {\r\n\r\n const card =\r\n cardById.get(\r\n item.caseId\r\n );\r\n\r\n\r\n if (\r\n card\r\n ){\r\n\r\n caseList.appendChild(\r\n card\r\n );\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n function applyMobileCardPresentation(){\r\n\r\n cards.forEach(\r\n card => {\r\n\r\n const data =\r\n caseForId(\r\n card.dataset.caseId\r\n );\r\n\r\n\r\n if (\r\n !data\r\n ) return;\r\n\r\n\r\n card.dataset.mobileLayout =\r\n data.mobileLayout ||\r\n data.layout ||\r\n 'combined';\r\n\r\n\r\n card.querySelectorAll(\r\n '.lc-case__photo img'\r\n ).forEach(\r\n (\r\n image,\r\n index\r\n ) => {\r\n\r\n const position =\r\n index ===\r\n 0\r\n ? data.beforePositionMobile\r\n : data.afterPositionMobile;\r\n\r\n\r\n if (\r\n position\r\n ){\r\n\r\n image.style.setProperty(\r\n '--mobile-object-position',\r\n position\r\n );\r\n\r\n }else{\r\n\r\n image.style.removeProperty(\r\n '--mobile-object-position'\r\n );\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n function updateMobileGroupHeadings(){\r\n\r\n if (\r\n mobileRestorationTitle\r\n ){\r\n\r\n const titles =\r\n {\r\n all:'Hair \u00b7 Beard \u00b7 Brows',\r\n hair:'Hair Restoration',\r\n beard:'Beard Restoration',\r\n brows:'Eyebrow Restoration'\r\n };\r\n\r\n\r\n mobileRestorationTitle.textContent =\r\n titles[\r\n activeFilter\r\n ] ||\r\n 'Hair \u00b7 Beard \u00b7 Brows';\r\n\r\n }\r\n\r\n\r\n const restorationCount =\r\n visibleCases.filter(\r\n item =>\r\n item.category !==\r\n 'dental'\r\n ).length;\r\n\r\n\r\n const dentalCount =\r\n visibleCases.filter(\r\n item =>\r\n item.category ===\r\n 'dental'\r\n ).length;\r\n\r\n\r\n if (\r\n mobileRestorationCount\r\n ){\r\n\r\n mobileRestorationCount.textContent =\r\n String(\r\n restorationCount\r\n ).padStart(\r\n 2,\r\n '0'\r\n ) +\r\n (\r\n restorationCount ===\r\n 1\r\n ? ' CASE'\r\n : ' CASES'\r\n );\r\n\r\n }\r\n\r\n\r\n if (\r\n mobileDentalCount\r\n ){\r\n\r\n mobileDentalCount.textContent =\r\n String(\r\n dentalCount\r\n ).padStart(\r\n 2,\r\n '0'\r\n ) +\r\n (\r\n dentalCount ===\r\n 1\r\n ? ' CASE'\r\n : ' CASES'\r\n );\r\n\r\n }\r\n\r\n }\r\n\r\n\r\n function applyMobileVisibility(){\r\n\r\n const visibleIds =\r\n new Set(\r\n visibleCases.map(\r\n item =>\r\n item.caseId\r\n )\r\n );\r\n\r\n\r\n let restorationVisible =\r\n false;\r\n\r\n\r\n let dentalVisible =\r\n false;\r\n\r\n\r\n cards.forEach(\r\n card => {\r\n\r\n const data =\r\n caseForId(\r\n card.dataset.caseId\r\n );\r\n\r\n\r\n const visible =\r\n visibleIds.has(\r\n card.dataset.caseId\r\n );\r\n\r\n\r\n card.classList.toggle(\r\n 'is-mobile-hidden',\r\n !visible\r\n );\r\n\r\n\r\n card.setAttribute(\r\n 'aria-hidden',\r\n visible\r\n ? 'false'\r\n : 'true'\r\n );\r\n\r\n\r\n if (\r\n visible &&\r\n data\r\n ){\r\n\r\n if (\r\n data.category ===\r\n 'dental'\r\n ){\r\n\r\n dentalVisible =\r\n true;\r\n\r\n }else{\r\n\r\n restorationVisible =\r\n true;\r\n\r\n }\r\n\r\n }\r\n\r\n\r\n if (\r\n !visible\r\n ){\r\n\r\n card.classList.remove(\r\n 'is-mobile-active'\r\n );\r\n\r\n\r\n card.removeAttribute(\r\n 'aria-current'\r\n );\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n\r\n mobileRestorationGroup?.classList.toggle(\r\n 'is-mobile-group-hidden',\r\n !restorationVisible\r\n );\r\n\r\n\r\n mobileDentalGroup?.classList.toggle(\r\n 'is-mobile-group-hidden',\r\n !dentalVisible\r\n );\r\n\r\n\r\n updateMobileGroupHeadings();\r\n\r\n }\r\n\r\n\r\n function visibleCardsInReel(\r\n reel\r\n ){\r\n\r\n if (\r\n !reel\r\n ) return [];\r\n\r\n\r\n return [\r\n ...reel.querySelectorAll(\r\n '.lc-case__card:not(.is-mobile-hidden)'\r\n )\r\n ];\r\n\r\n }\r\n\r\n\r\n function reelPadding(\r\n reel\r\n ){\r\n\r\n if (\r\n !reel\r\n ) return 0;\r\n\r\n\r\n const style =\r\n window.getComputedStyle(\r\n reel\r\n );\r\n\r\n\r\n return (\r\n parseFloat(\r\n style.paddingInlineStart ||\r\n style.paddingLeft ||\r\n '0'\r\n ) ||\r\n 0\r\n );\r\n\r\n }\r\n\r\n\r\n function nearestCardInMobileReel(\r\n reel\r\n ){\r\n\r\n const reelCards =\r\n visibleCardsInReel(\r\n reel\r\n );\r\n\r\n\r\n if (\r\n !reelCards.length\r\n ) return null;\r\n\r\n\r\n const current =\r\n reel.scrollLeft;\r\n\r\n\r\n const padding =\r\n reelPadding(\r\n reel\r\n );\r\n\r\n\r\n let nearest =\r\n reelCards[0];\r\n\r\n\r\n let nearestDistance =\r\n Infinity;\r\n\r\n\r\n reelCards.forEach(\r\n card => {\r\n\r\n const left =\r\n Math.max(\r\n 0,\r\n card.offsetLeft -\r\n padding\r\n );\r\n\r\n\r\n const distance =\r\n Math.abs(\r\n current -\r\n left\r\n );\r\n\r\n\r\n if (\r\n distance <\r\n nearestDistance\r\n ){\r\n\r\n nearestDistance =\r\n distance;\r\n\r\n\r\n nearest =\r\n card;\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n\r\n return nearest;\r\n\r\n }\r\n\r\n\r\n function setMobileActiveByCard(\r\n card,\r\n immediateMeta =\r\n false\r\n ){\r\n\r\n if (\r\n !card\r\n ) return;\r\n\r\n\r\n const index =\r\n visibleIndexForId(\r\n card.dataset.caseId\r\n );\r\n\r\n\r\n if (\r\n index <\r\n 0\r\n ) return;\r\n\r\n\r\n mobileActiveIndex =\r\n index;\r\n\r\n\r\n activeCaseId =\r\n card.dataset.caseId;\r\n\r\n\r\n cards.forEach(\r\n item => {\r\n\r\n const active =\r\n item.dataset.caseId ===\r\n activeCaseId;\r\n\r\n\r\n item.classList.toggle(\r\n 'is-mobile-active',\r\n active\r\n );\r\n\r\n\r\n if (\r\n active\r\n ){\r\n\r\n item.setAttribute(\r\n 'aria-current',\r\n 'true'\r\n );\r\n\r\n }else{\r\n\r\n item.removeAttribute(\r\n 'aria-current'\r\n );\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n\r\n \/*\r\n Mobile grouped reels use their own heading\/count UI.\r\n The old case metadata panel is intentionally hidden.\r\n *\/\r\n\r\n }\r\n\r\n\r\n function renderMobileReel(\r\n reel\r\n ){\r\n\r\n if (\r\n mode !==\r\n 'mobile' ||\r\n !reel\r\n ) return;\r\n\r\n\r\n const nearest =\r\n nearestCardInMobileReel(\r\n reel\r\n );\r\n\r\n\r\n if (\r\n nearest\r\n ){\r\n\r\n setMobileActiveByCard(\r\n nearest\r\n );\r\n\r\n }\r\n\r\n }\r\n\r\n\r\n function requestMobileReelRender(\r\n reel\r\n ){\r\n\r\n if (\r\n !reel ||\r\n mobileReelTicking.get(\r\n reel\r\n )\r\n ) return;\r\n\r\n\r\n mobileReelTicking.set(\r\n reel,\r\n true\r\n );\r\n\r\n\r\n requestAnimationFrame(\r\n () => {\r\n\r\n mobileReelTicking.set(\r\n reel,\r\n false\r\n );\r\n\r\n\r\n renderMobileReel(\r\n reel\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n function scrollCardIntoMobileReel(\r\n card,\r\n behavior =\r\n 'auto'\r\n ){\r\n\r\n if (\r\n !card\r\n ) return;\r\n\r\n\r\n const reel =\r\n card.closest(\r\n '[data-mobile-group-reel]'\r\n );\r\n\r\n\r\n if (\r\n !reel\r\n ) return;\r\n\r\n\r\n const padding =\r\n reelPadding(\r\n reel\r\n );\r\n\r\n\r\n const left =\r\n Math.max(\r\n 0,\r\n card.offsetLeft -\r\n padding\r\n );\r\n\r\n\r\n reel.scrollTo(\r\n {\r\n left,\r\n behavior:\r\n reducedMotion.matches\r\n ? 'auto'\r\n : behavior\r\n }\r\n );\r\n\r\n\r\n setMobileActiveByCard(\r\n card,\r\n behavior ===\r\n 'auto'\r\n );\r\n\r\n }\r\n\r\n\r\n function scrollMobileToIndex(\r\n index,\r\n behavior =\r\n 'auto'\r\n ){\r\n\r\n const safeIndex =\r\n clamp(\r\n index,\r\n 0,\r\n Math.max(\r\n 0,\r\n visibleCases.length -\r\n 1\r\n )\r\n );\r\n\r\n\r\n const current =\r\n visibleCases[\r\n safeIndex\r\n ];\r\n\r\n\r\n if (\r\n !current\r\n ) return;\r\n\r\n\r\n const card =\r\n cardById.get(\r\n current.caseId\r\n );\r\n\r\n\r\n scrollCardIntoMobileReel(\r\n card,\r\n behavior\r\n );\r\n\r\n }\r\n\r\n\r\n function handleMobileKeydown(\r\n event\r\n ){\r\n\r\n if (\r\n mode !==\r\n 'mobile'\r\n ) return;\r\n\r\n\r\n const reel =\r\n event.currentTarget;\r\n\r\n\r\n const reelCards =\r\n visibleCardsInReel(\r\n reel\r\n );\r\n\r\n\r\n if (\r\n !reelCards.length\r\n ) return;\r\n\r\n\r\n const current =\r\n nearestCardInMobileReel(\r\n reel\r\n );\r\n\r\n\r\n let localIndex =\r\n Math.max(\r\n 0,\r\n reelCards.indexOf(\r\n current\r\n )\r\n );\r\n\r\n\r\n if (\r\n event.key ===\r\n 'ArrowRight'\r\n ){\r\n\r\n localIndex +=\r\n 1;\r\n\r\n }else if(\r\n event.key ===\r\n 'ArrowLeft'\r\n ){\r\n\r\n localIndex -=\r\n 1;\r\n\r\n }else if(\r\n event.key ===\r\n 'Home'\r\n ){\r\n\r\n localIndex =\r\n 0;\r\n\r\n }else if(\r\n event.key ===\r\n 'End'\r\n ){\r\n\r\n localIndex =\r\n reelCards.length -\r\n 1;\r\n\r\n }else{\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n event.preventDefault();\r\n\r\n\r\n localIndex =\r\n clamp(\r\n localIndex,\r\n 0,\r\n reelCards.length -\r\n 1\r\n );\r\n\r\n\r\n scrollCardIntoMobileReel(\r\n reelCards[\r\n localIndex\r\n ],\r\n 'smooth'\r\n );\r\n\r\n }\r\n\r\n\r\n function beginMobileTouch(){\r\n\r\n if (\r\n mode !==\r\n 'mobile'\r\n ) return;\r\n\r\n\r\n mobilePointerHeld =\r\n true;\r\n\r\n\r\n root.dataset.mobileReelTouch =\r\n 'true';\r\n\r\n\r\n requestExitFocus();\r\n\r\n }\r\n\r\n\r\n function endMobileTouch(){\r\n\r\n if (\r\n !mobilePointerHeld\r\n ) return;\r\n\r\n\r\n mobilePointerHeld =\r\n false;\r\n\r\n\r\n delete root.dataset.mobileReelTouch;\r\n\r\n\r\n requestExitFocus();\r\n\r\n }\r\n\r\n\r\n function bindMobileReelListeners(){\r\n\r\n if (\r\n mobileListenersBound\r\n ) return;\r\n\r\n\r\n mobileListenersBound =\r\n true;\r\n\r\n\r\n mobileReels.forEach(\r\n reel => {\r\n\r\n reel.addEventListener(\r\n 'scroll',\r\n () => {\r\n\r\n requestMobileReelRender(\r\n reel\r\n );\r\n\r\n },\r\n {\r\n passive:true\r\n }\r\n );\r\n\r\n\r\n reel.addEventListener(\r\n 'keydown',\r\n handleMobileKeydown\r\n );\r\n\r\n\r\n reel.addEventListener(\r\n 'pointerdown',\r\n beginMobileTouch,\r\n {\r\n passive:true\r\n }\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n window.addEventListener(\r\n 'pointerup',\r\n endMobileTouch,\r\n {\r\n passive:true\r\n }\r\n );\r\n\r\n\r\n window.addEventListener(\r\n 'pointercancel',\r\n endMobileTouch,\r\n {\r\n passive:true\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n function initMobile(\r\n preserveCase =\r\n true\r\n ){\r\n\r\n mode =\r\n 'mobile';\r\n\r\n\r\n root.classList.remove(\r\n 'is-enhanced'\r\n );\r\n\r\n\r\n root.classList.add(\r\n 'is-mobile-reel'\r\n );\r\n\r\n\r\n root.style.height =\r\n '';\r\n\r\n\r\n root.setAttribute(\r\n 'aria-labelledby',\r\n 'lamina-real-cases-title-mobile'\r\n );\r\n\r\n\r\n stage.classList.remove(\r\n 'is-entry',\r\n 'is-exit'\r\n );\r\n\r\n\r\n clearDesktopCardInlineState();\r\n\r\n\r\n moveCardsIntoMobileGroups();\r\n\r\n\r\n applyMobileCardPresentation();\r\n\r\n\r\n applyMobileVisibility();\r\n\r\n\r\n bindMobileReelListeners();\r\n\r\n\r\n requestAnimationFrame(\r\n () => {\r\n\r\n let targetIndex =\r\n preserveCase\r\n ? visibleIndexForId(\r\n activeCaseId\r\n )\r\n : 0;\r\n\r\n\r\n if (\r\n targetIndex <\r\n 0\r\n ){\r\n\r\n targetIndex =\r\n 0;\r\n\r\n }\r\n\r\n\r\n scrollMobileToIndex(\r\n targetIndex,\r\n 'auto'\r\n );\r\n\r\n\r\n measureExitFocus();\r\n\r\n\r\n requestExitFocus();\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n function destroyMobile(){\r\n\r\n delete root.dataset.mobileReelTouch;\r\n\r\n\r\n root.classList.remove(\r\n 'is-mobile-reel'\r\n );\r\n\r\n\r\n root.style.height =\r\n '';\r\n\r\n\r\n cards.forEach(\r\n card => {\r\n\r\n card.classList.remove(\r\n 'is-mobile-active',\r\n 'is-mobile-hidden'\r\n );\r\n\r\n\r\n card.removeAttribute(\r\n 'aria-current'\r\n );\r\n\r\n\r\n card.removeAttribute(\r\n 'data-mobile-layout'\r\n );\r\n\r\n\r\n card.style.removeProperty(\r\n 'display'\r\n );\r\n\r\n\r\n card.querySelectorAll(\r\n '.lc-case__photo img'\r\n ).forEach(\r\n image => {\r\n\r\n image.style.removeProperty(\r\n '--mobile-object-position'\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n restoreCardsToDesktopList();\r\n\r\n }\r\n\r\n\r\n \/* =======================================================\r\n REDUCED-MOTION DESKTOP STATIC MODE\r\n ======================================================= *\/\r\n\r\n function initStaticDesktop(){\r\n\r\n mode =\r\n 'static';\r\n\r\n\r\n destroyDesktop();\r\n\r\n\r\n root.setAttribute(\r\n 'aria-labelledby',\r\n 'lamina-real-cases-title'\r\n );\r\n\r\n\r\n const visibleIds =\r\n new Set(\r\n visibleCases.map(\r\n item =>\r\n item.caseId\r\n )\r\n );\r\n\r\n\r\n cards.forEach(\r\n card => {\r\n\r\n const visible =\r\n visibleIds.has(\r\n card.dataset.caseId\r\n );\r\n\r\n\r\n card.style.display =\r\n visible\r\n ? ''\r\n : 'none';\r\n\r\n\r\n card.setAttribute(\r\n 'aria-hidden',\r\n visible\r\n ? 'false'\r\n : 'true'\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n const index =\r\n Math.max(\r\n 0,\r\n visibleIndexForId(\r\n activeCaseId\r\n )\r\n );\r\n\r\n\r\n setMetadata(\r\n index,\r\n true\r\n );\r\n\r\n\r\n clearExitFocus();\r\n\r\n }\r\n\r\n\r\n function destroyStaticDesktop(){\r\n\r\n cards.forEach(\r\n card => {\r\n\r\n card.style.removeProperty(\r\n 'display'\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n \/* =======================================================\r\n SHARED FILTER CONTROLLER\r\n ======================================================= *\/\r\n\r\n function applyFilter(\r\n filter\r\n ){\r\n\r\n if (\r\n filter ===\r\n activeFilter\r\n ) return;\r\n\r\n\r\n const nextCases =\r\n caseData.filter(\r\n item =>\r\n filter ===\r\n 'all' ||\r\n item.category ===\r\n filter\r\n );\r\n\r\n\r\n if (\r\n !nextCases.length\r\n ) return;\r\n\r\n\r\n window.clearTimeout(\r\n filterTimer\r\n );\r\n\r\n\r\n const previousCaseId =\r\n activeCaseId;\r\n\r\n\r\n activeFilter =\r\n filter;\r\n\r\n\r\n visibleCases =\r\n nextCases;\r\n\r\n\r\n syncFilterButtons();\r\n\r\n\r\n activeMetaIndex =\r\n -1;\r\n\r\n\r\n \/*\r\n MOBILE:\r\n vertical page position is never touched.\r\n The reel softens briefly, data is switched in place,\r\n then horizontal position resets\/preserves inside the reel only.\r\n *\/\r\n if (\r\n mode ===\r\n 'mobile'\r\n ){\r\n\r\n stage.classList.add(\r\n 'is-filtering'\r\n );\r\n\r\n\r\n const preservedIndex =\r\n visibleIndexForId(\r\n previousCaseId\r\n );\r\n\r\n\r\n const targetIndex =\r\n preservedIndex >=\r\n 0\r\n ? preservedIndex\r\n : 0;\r\n\r\n\r\n filterTimer =\r\n window.setTimeout(\r\n () => {\r\n\r\n activeCaseId =\r\n visibleCases[\r\n targetIndex\r\n ].caseId;\r\n\r\n\r\n applyMobileVisibility();\r\n\r\n\r\n requestAnimationFrame(\r\n () => {\r\n\r\n scrollMobileToIndex(\r\n targetIndex,\r\n 'auto'\r\n );\r\n\r\n\r\n requestAnimationFrame(\r\n () => {\r\n\r\n stage.classList.remove(\r\n 'is-filtering'\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n );\r\n\r\n },\r\n 150\r\n );\r\n\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n \/*\r\n DESKTOP:\r\n preserve the existing scrollytelling behavior.\r\n Filtering re-measures the sticky progression and returns to\r\n the first case in the selected filtered set.\r\n *\/\r\n activeCaseId =\r\n visibleCases[0].caseId;\r\n\r\n\r\n if (\r\n mode ===\r\n 'desktop'\r\n ){\r\n\r\n stage.classList.add(\r\n 'is-filtering'\r\n );\r\n\r\n\r\n filterTimer =\r\n window.setTimeout(\r\n () => {\r\n\r\n measureDesktop();\r\n\r\n\r\n window.scrollTo(\r\n {\r\n top:\r\n desktopSectionTop +\r\n caseStart +\r\n 1,\r\n behavior:'auto'\r\n }\r\n );\r\n\r\n\r\n renderDesktop();\r\n\r\n\r\n requestAnimationFrame(\r\n () => {\r\n\r\n requestAnimationFrame(\r\n () => {\r\n\r\n stage.classList.remove(\r\n 'is-filtering'\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n );\r\n\r\n },\r\n 180\r\n );\r\n\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n initStaticDesktop();\r\n\r\n }\r\n\r\n\r\n filterButtons.forEach(\r\n button => {\r\n\r\n button.addEventListener(\r\n 'click',\r\n () => {\r\n\r\n applyFilter(\r\n button.dataset.filter ||\r\n 'all'\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n \/* =======================================================\r\n MODE MANAGER \u2014 EXACTLY ONE NAVIGATION ENGINE\r\n ======================================================= *\/\r\n\r\n function resolveMode(){\r\n\r\n if (\r\n mobileModeQuery.matches\r\n ){\r\n\r\n return 'mobile';\r\n\r\n }\r\n\r\n\r\n if (\r\n reducedMotion.matches\r\n ){\r\n\r\n return 'static';\r\n\r\n }\r\n\r\n\r\n return 'desktop';\r\n\r\n }\r\n\r\n\r\n function switchMode(){\r\n\r\n const nextMode =\r\n resolveMode();\r\n\r\n\r\n if (\r\n nextMode ===\r\n mode\r\n ){\r\n\r\n if (\r\n nextMode ===\r\n 'desktop'\r\n ){\r\n\r\n measureDesktop();\r\n\r\n\r\n requestDesktopRender();\r\n\r\n }else if(\r\n nextMode ===\r\n 'mobile'\r\n ){\r\n\r\n applyMobileCardPresentation();\r\n\r\n\r\n applyMobileVisibility();\r\n\r\n\r\n requestAnimationFrame(\r\n () => {\r\n\r\n const preserved =\r\n Math.max(\r\n 0,\r\n visibleIndexForId(\r\n activeCaseId\r\n )\r\n );\r\n\r\n\r\n scrollMobileToIndex(\r\n preserved,\r\n 'auto'\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n measureExitFocus();\r\n\r\n\r\n requestExitFocus();\r\n\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n const preserveCase =\r\n Boolean(\r\n activeCaseId\r\n );\r\n\r\n\r\n if (\r\n mode ===\r\n 'desktop'\r\n ){\r\n\r\n destroyDesktop();\r\n\r\n }else if(\r\n mode ===\r\n 'mobile'\r\n ){\r\n\r\n destroyMobile();\r\n\r\n }else if(\r\n mode ===\r\n 'static'\r\n ){\r\n\r\n destroyStaticDesktop();\r\n\r\n }\r\n\r\n\r\n if (\r\n nextMode ===\r\n 'mobile'\r\n ){\r\n\r\n initMobile(\r\n preserveCase\r\n );\r\n\r\n }else if(\r\n nextMode ===\r\n 'desktop'\r\n ){\r\n\r\n initDesktop(\r\n preserveCase\r\n );\r\n\r\n }else{\r\n\r\n initStaticDesktop();\r\n\r\n }\r\n\r\n\r\n syncFilterButtons();\r\n\r\n }\r\n\r\n\r\n \/* =======================================================\r\n SHARED OBSERVERS \/ WINDOW SCROLL\r\n ======================================================= *\/\r\n\r\n if (\r\n 'IntersectionObserver' in window\r\n ){\r\n\r\n const sectionObserver =\r\n new IntersectionObserver(\r\n entries => {\r\n\r\n entries.forEach(\r\n entry => {\r\n\r\n sectionNear =\r\n entry.isIntersecting;\r\n\r\n\r\n if (\r\n sectionNear\r\n ){\r\n\r\n measureExitFocus();\r\n\r\n\r\n requestExitFocus();\r\n\r\n\r\n if (\r\n mode ===\r\n 'desktop'\r\n ){\r\n\r\n requestDesktopRender();\r\n\r\n }\r\n\r\n }else{\r\n\r\n clearExitFocus();\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n },\r\n {\r\n rootMargin:'140px 0px 140px 0px',\r\n threshold:0\r\n }\r\n );\r\n\r\n\r\n sectionObserver.observe(\r\n root\r\n );\r\n\r\n }\r\n\r\n\r\n \/*\r\n One vertical window-scroll path:\r\n - desktop mode additionally renders the desktop case wheel;\r\n - mobile mode only updates exit-focus depth.\r\n *\/\r\n window.addEventListener(\r\n 'scroll',\r\n () => {\r\n\r\n requestExitFocus();\r\n\r\n\r\n if (\r\n mode ===\r\n 'desktop'\r\n ){\r\n\r\n requestDesktopRender();\r\n\r\n }\r\n\r\n },\r\n {\r\n passive:true\r\n }\r\n );\r\n\r\n\r\n let resizeTimer =\r\n null;\r\n\r\n\r\n window.addEventListener(\r\n 'resize',\r\n () => {\r\n\r\n window.clearTimeout(\r\n resizeTimer\r\n );\r\n\r\n\r\n resizeTimer =\r\n window.setTimeout(\r\n () => {\r\n\r\n switchMode();\r\n\r\n },\r\n 120\r\n );\r\n\r\n },\r\n {\r\n passive:true\r\n }\r\n );\r\n\r\n\r\n mobileModeQuery.addEventListener?.(\r\n 'change',\r\n switchMode\r\n );\r\n\r\n\r\n reducedMotion.addEventListener?.(\r\n 'change',\r\n switchMode\r\n );\r\n\r\n\r\n \/* =======================================================\r\n BELOW-FOLD NEIGHBOR PREPARATION\r\n ======================================================= *\/\r\n\r\n if (\r\n 'IntersectionObserver' in window\r\n ){\r\n\r\n const preloadObserver =\r\n new IntersectionObserver(\r\n entries => {\r\n\r\n entries.forEach(\r\n entry => {\r\n\r\n if (\r\n !entry.isIntersecting\r\n ) return;\r\n\r\n\r\n visibleCases\r\n .slice(\r\n 0,\r\n 3\r\n )\r\n .forEach(\r\n item => {\r\n\r\n const card =\r\n cardById.get(\r\n item.caseId\r\n );\r\n\r\n\r\n card?.querySelectorAll(\r\n 'img'\r\n ).forEach(\r\n image => {\r\n\r\n \/*\r\n Do not invent responsive asset URLs.\r\n When real srcset variants are generated,\r\n they can be added directly to the markup.\r\n *\/\r\n image.loading =\r\n 'eager';\r\n\r\n\r\n image.decode?.().catch(\r\n () => {}\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n preloadObserver.disconnect();\r\n\r\n }\r\n );\r\n\r\n },\r\n {\r\n rootMargin:'760px 0px 760px 0px',\r\n threshold:0\r\n }\r\n );\r\n\r\n\r\n preloadObserver.observe(\r\n root\r\n );\r\n\r\n }\r\n\r\n\r\n \/* =======================================================\r\n INITIALIZE\r\n ======================================================= *\/\r\n\r\n syncFilterButtons();\r\n\r\n\r\n switchMode();\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-14bb824 e-con-full e-flex e-con e-parent\" data-id=\"14bb824\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d2d41eb elementor-widget elementor-widget-html\" data-id=\"d2d41eb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\r\nLAMINA CLINIC \u2014 SECTION 05\r\nMEDICAL TEAM \u2014 KINETIC PORTRAIT RIBBON\r\nV6 \u2014 LAMINA TITLE SYSTEM \/ ACTUAL OPTICAL TITLE FIX\r\n\r\nKeeps the existing dark editorial visual direction.\r\nChanges the gallery interaction from carousel-like navigation to:\r\nDIRECT DRAG + FLICK MOMENTUM + MAGNETIC SETTLE +\r\nVELOCITY-REACTIVE INNER IMAGE MOTION + PROXIMITY FOCUS + RESTRAINED OFF-FOCUS CARD BLUR.\r\n\r\nGLOBAL LAMINA FOCUS-DEPTH RULE:\r\nUPCOMING CONTENT: SOFT -> SHARP\r\nLEAVING CONTENT: SHARP -> SOFT\r\n\r\nPROTOTYPE CONTENT:\r\n- Doctor names and current source roles are provisional.\r\n- Replace placeholder portrait paths with clinic-approved originals.\r\n- Dr. Mohammed Issa's source label \"Surgeries\" is NOT used as a title.\r\n========================================================= -->\r\n\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=Manrope:wght@400;500;600&display=swap');\r\n\r\n#lamina-doctor-gallery{\r\n --aubergine:#2B142F;\r\n --aubergine-2:#241128;\r\n --aubergine-3:#311635;\r\n --aubergine-4:#381B3D;\r\n --plum:#5F2468;\r\n --orchid:#94709A;\r\n --lilac:#C5B2C8;\r\n --ivory:#F7F2EA;\r\n --ease:cubic-bezier(.16,.70,.18,1);\r\n --soft:cubic-bezier(.22,1,.36,1);\r\n\r\n \/*\r\n LAMINA PROJECT RULE:\r\n Elementor's global accent must never leak into custom sections.\r\n *\/\r\n --e-global-color-primary:#2B142F;\r\n --e-global-color-secondary:#94709A;\r\n --e-global-color-text:#F7F2EA;\r\n --e-global-color-accent:#5F2468;\r\n\r\n position:relative;\r\n width:100%;\r\n overflow:hidden;\r\n\r\n background:\r\n radial-gradient(52% 42% at 90% 8%,rgba(148,112,154,.08),transparent 72%),\r\n radial-gradient(42% 36% at 8% 90%,rgba(95,36,104,.10),transparent 74%),\r\n linear-gradient(145deg,#311635 0%,#2B142F 54%,#241128 100%);\r\n\r\n color:var(--ivory);\r\n font-family:\"Manrope\",system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;\r\n}\r\n\r\n#lamina-doctor-gallery *,\r\n#lamina-doctor-gallery *::before,\r\n#lamina-doctor-gallery *::after{\r\n box-sizing:border-box;\r\n}\r\n\r\n#lamina-doctor-gallery a,\r\n#lamina-doctor-gallery button{\r\n font:inherit;\r\n}\r\n\r\n#lamina-doctor-gallery ::selection{\r\n background:var(--plum);\r\n color:var(--ivory);\r\n}\r\n\r\n.ldg__shell{\r\n width:min(100%,1640px);\r\n margin:0 auto;\r\n padding:\r\n clamp(82px,8.5vh,118px)\r\n clamp(24px,4.2vw,78px)\r\n clamp(92px,10vh,132px);\r\n}\r\n\r\n\/* =========================================================\r\n HEADER\r\n ========================================================= *\/\r\n\r\n.ldg__head{\r\n display:grid;\r\n grid-template-columns:minmax(0,.62fr) minmax(280px,.38fr);\r\n gap:clamp(48px,7vw,116px);\r\n align-items:end;\r\n min-height:clamp(220px,29vh,320px);\r\n margin-bottom:clamp(40px,5vh,62px);\r\n}\r\n\r\n.ldg__eyebrow{\r\n margin:0 0 16px;\r\n color:var(--lilac);\r\n font-size:clamp(11px,.72vw,13px);\r\n line-height:1.2;\r\n font-weight:600;\r\n letter-spacing:.17em;\r\n text-transform:uppercase;\r\n}\r\n\r\n.ldg__title{\r\n margin:0;\r\n\r\n \/*\r\n Hard optical correction:\r\n - pull the first line left enough to eliminate the fake gutter\r\n - tighten the upright stack\r\n - bring the accent phrase much closer to the main block\r\n *\/\r\n width:min(100%,8.78ch);\r\n max-width:none;\r\n overflow:visible;\r\n\r\n color:var(--ivory);\r\n\r\n font-family:\"Cormorant Garamond\",Georgia,serif;\r\n font-size:clamp(72px,7vw,128px);\r\n line-height:1;\r\n font-weight:400;\r\n letter-spacing:-.050em;\r\n\r\n text-wrap:balance;\r\n}\r\n\r\n.ldg__title-line{\r\n display:block;\r\n position:relative;\r\n width:max-content;\r\n max-width:100%;\r\n\r\n line-height:.845;\r\n\r\n padding-block:\r\n 0\r\n .030em;\r\n\r\n margin:0;\r\n\r\n overflow:visible;\r\n}\r\n\r\n\/* Remove the apparent dead space before \u201cThe\u201d. *\/\r\n.ldg__title-line:first-child{\r\n margin-inline-start:-.092em;\r\n}\r\n\r\n.ldg__title-line:nth-child(2){\r\n margin-inline-start:-.018em;\r\n}\r\n\r\n.ldg__title-line + .ldg__title-line{\r\n margin-top:-.112em;\r\n}\r\n\r\n.ldg__title-line--accent{\r\n \/*\r\n Accent should read as the continuation of the title,\r\n not as a separated block.\r\n *\/\r\n margin-top:-.006em !important;\r\n\r\n padding-block:\r\n 0\r\n .056em;\r\n\r\n color:#A77DAE;\r\n\r\n font-style:italic;\r\n font-weight:400;\r\n letter-spacing:-.034em;\r\n line-height:.885;\r\n}\r\n\r\n\/*\r\n Keep slight italic overhang protection,\r\n but not enough to create a fake left gutter.\r\n*\/\r\n.ldg__title-line--accent{\r\n padding-inline:\r\n 0\r\n .034em;\r\n\r\n margin-inline-start:-.040em;\r\n}\r\n\r\n.ldg__intro{\r\n margin:0 0 10px;\r\n max-width:36ch;\r\n color:rgba(247,242,234,.68);\r\n font-size:clamp(16px,1.02vw,18px);\r\n line-height:1.68;\r\n}\r\n\r\n.ldg__micro{\r\n margin:18px 0 0;\r\n color:rgba(197,178,200,.72);\r\n font-size:11px;\r\n line-height:1.2;\r\n font-weight:600;\r\n letter-spacing:.13em;\r\n text-transform:uppercase;\r\n}\r\n\r\n\/* =========================================================\r\n ORIENTATION \/ PROGRESS\r\n No arrows. Informational only.\r\n ========================================================= *\/\r\n\r\n.ldg__orientation{\r\n display:grid;\r\n grid-template-columns:auto minmax(150px,300px) auto;\r\n gap:18px;\r\n align-items:center;\r\n margin-bottom:18px;\r\n}\r\n\r\n.ldg__count{\r\n color:rgba(247,242,234,.78);\r\n font-size:12px;\r\n line-height:1;\r\n font-weight:600;\r\n letter-spacing:.12em;\r\n white-space:nowrap;\r\n}\r\n\r\n.ldg__progress{\r\n position:relative;\r\n width:100%;\r\n height:1px;\r\n overflow:hidden;\r\n background:rgba(247,242,234,.14);\r\n}\r\n\r\n.ldg__progress-fill{\r\n position:absolute;\r\n inset:0;\r\n background:rgba(197,178,200,.86);\r\n transform:scaleX(0);\r\n transform-origin:0 50%;\r\n will-change:transform;\r\n}\r\n\r\n.ldg__drag-cue{\r\n color:rgba(197,178,200,.56);\r\n font-size:11px;\r\n line-height:1;\r\n font-weight:600;\r\n letter-spacing:.12em;\r\n text-transform:uppercase;\r\n white-space:nowrap;\r\n}\r\n\r\n\/* =========================================================\r\n KINETIC PORTRAIT RIBBON\r\n ========================================================= *\/\r\n\r\n.ldg__bleed{\r\n margin-right:calc(50% - 50vw);\r\n}\r\n\r\n.ldg__viewport{\r\n position:relative;\r\n width:100%;\r\n overflow:hidden;\r\n\r\n cursor:grab;\r\n touch-action:pan-y;\r\n overscroll-behavior-x:contain;\r\n\r\n outline:none;\r\n}\r\n\r\n.ldg__viewport.is-dragging{\r\n cursor:grabbing;\r\n}\r\n\r\n.ldg__viewport:focus-visible{\r\n outline:1px solid rgba(197,178,200,.36);\r\n outline-offset:6px;\r\n}\r\n\r\n.ldg__ribbon{\r\n display:flex;\r\n align-items:flex-start;\r\n gap:clamp(22px,1.7vw,30px);\r\n width:max-content;\r\n\r\n padding-right:max(24px,calc(50vw - 50%));\r\n\r\n transform:translate3d(0,0,0);\r\n will-change:transform;\r\n}\r\n\r\n.ldg__doctor{\r\n --focus:0;\r\n --doctor-opacity:.50;\r\n --doctor-scale:.94;\r\n --doctor-blur:2.4px;\r\n --name-opacity:.52;\r\n --meta-opacity:.56;\r\n --img-x:0px;\r\n --img-scale:1.035;\r\n\r\n flex:0 0 clamp(250px,20.5vw,350px);\r\n min-width:0;\r\n\r\n opacity:var(--doctor-opacity);\r\n filter:blur(var(--doctor-blur));\r\n transform:scale(var(--doctor-scale));\r\n transform-origin:center top;\r\n\r\n transition:\r\n opacity .32s linear,\r\n filter .40s var(--ease),\r\n transform .46s var(--soft);\r\n}\r\n\r\n.ldg__doctor.is-nearest{\r\n --doctor-opacity:1;\r\n --doctor-scale:1.08;\r\n --doctor-blur:0px;\r\n --name-opacity:1;\r\n --meta-opacity:1;\r\n\r\n position:relative;\r\n z-index:4;\r\n\r\n pointer-events:auto;\r\n}\r\n\r\n.ldg__portrait{\r\n position:relative;\r\n overflow:hidden;\r\n\r\n width:100%;\r\n height:clamp(390px,47vh,520px);\r\n border-radius:10px;\r\n\r\n background:\r\n radial-gradient(58% 46% at 50% 30%,rgba(148,112,154,.16),transparent 68%),\r\n linear-gradient(145deg,#381B3D,#241128);\r\n}\r\n\r\n.ldg__portrait img{\r\n position:absolute;\r\n left:-2.5%;\r\n top:-2.5%;\r\n\r\n width:105%;\r\n height:105%;\r\n\r\n display:block;\r\n object-fit:cover;\r\n object-position:var(--doctor-pos,50% 18%);\r\n\r\n transform:\r\n translate3d(var(--img-x),0,0)\r\n scale(var(--img-scale));\r\n\r\n filter:\r\n saturate(var(--img-saturation,1))\r\n contrast(1)\r\n brightness(var(--img-brightness,.98));\r\n\r\n transition:\r\n transform .28s var(--ease),\r\n filter .30s ease;\r\n\r\n will-change:transform;\r\n user-select:none;\r\n pointer-events:none;\r\n}\r\n\r\n.ldg__portrait::after{\r\n content:\"\";\r\n position:absolute;\r\n inset:0;\r\n pointer-events:none;\r\n\r\n background:\r\n linear-gradient(\r\n 180deg,\r\n rgba(43,20,47,.08),\r\n rgba(43,20,47,.02) 56%,\r\n rgba(43,20,47,.18)\r\n );\r\n\r\n opacity:var(--overlay-opacity,.56);\r\n transition:opacity .28s ease;\r\n}\r\n\r\n.ldg__portrait.is-missing::before{\r\n content:\"Clinic-approved doctor portrait\";\r\n position:absolute;\r\n z-index:2;\r\n inset:0;\r\n\r\n display:grid;\r\n place-items:center;\r\n padding:28px;\r\n\r\n color:rgba(247,242,234,.48);\r\n font-size:12px;\r\n line-height:1.5;\r\n font-weight:600;\r\n letter-spacing:.10em;\r\n text-transform:uppercase;\r\n text-align:center;\r\n}\r\n\r\n#lamina-doctor-gallery:not(.is-ribbon-moving) .ldg__doctor:hover,\r\n#lamina-doctor-gallery.is-ribbon-moving .ldg__doctor:hover{\r\n --img-scale:1.035;\r\n}\r\n\r\n.ldg__doctor-info{\r\n padding:17px 1px 0;\r\n}\r\n\r\n.ldg__doctor-meta{\r\n opacity:var(--meta-opacity);\r\n transition:opacity .28s linear;\r\n}\r\n\r\n.ldg__index{\r\n display:block;\r\n margin-bottom:8px;\r\n color:var(--lilac);\r\n font-size:11px;\r\n line-height:1;\r\n font-weight:600;\r\n letter-spacing:.13em;\r\n}\r\n\r\n.ldg__name{\r\n margin:0;\r\n\r\n color:var(--ivory);\r\n opacity:var(--name-opacity);\r\n\r\n font-family:\"Cormorant Garamond\",Georgia,serif;\r\n font-size:clamp(31px,2.5vw,42px);\r\n line-height:.98;\r\n font-weight:500;\r\n letter-spacing:-.025em;\r\n\r\n transition:opacity .28s linear;\r\n}\r\n\r\n.ldg__category{\r\n margin:9px 0 0;\r\n color:rgba(197,178,200,.82);\r\n font-size:11px;\r\n line-height:1.25;\r\n font-weight:600;\r\n letter-spacing:.11em;\r\n text-transform:uppercase;\r\n}\r\n\r\n.ldg__role{\r\n margin:6px 0 0;\r\n min-height:1.45em;\r\n color:rgba(247,242,234,.68);\r\n font-size:13px;\r\n line-height:1.45;\r\n}\r\n\r\n.ldg__proof{\r\n margin:8px 0 0;\r\n min-height:1.5em;\r\n color:rgba(247,242,234,.46);\r\n font-size:12px;\r\n line-height:1.5;\r\n}\r\n\r\n.ldg__profile{\r\n position:relative;\r\n display:inline-flex;\r\n align-items:center;\r\n gap:7px;\r\n\r\n margin-top:15px;\r\n\r\n color:rgba(247,242,234,.64);\r\n font-size:11px;\r\n line-height:1.2;\r\n font-weight:600;\r\n letter-spacing:.10em;\r\n text-transform:uppercase;\r\n text-decoration:none;\r\n\r\n transition:\r\n color .42s ease,\r\n opacity .42s ease;\r\n}\r\n\r\n.ldg__profile .ldg__arrow{\r\n transition:transform .5s var(--ease);\r\n}\r\n\r\n.ldg__profile,\r\n.ldg__profile:visited{\r\n color:rgba(247,242,234,.64) !important;\r\n background:transparent !important;\r\n}\r\n\r\n.ldg__profile:hover,\r\n.ldg__profile:focus,\r\n.ldg__profile:focus-visible,\r\n.ldg__profile:active{\r\n color:#F7F2EA !important;\r\n background:transparent !important;\r\n}\r\n\r\n.ldg__profile:hover .ldg__arrow,\r\n.ldg__profile:focus-visible .ldg__arrow{\r\n transform:none;\r\n}\r\n\r\n.ldg__profile:focus-visible{\r\n outline:1px solid rgba(197,178,200,.48);\r\n outline-offset:6px;\r\n}\r\n\r\n\/* =========================================================\r\n PROJECT-WIDE LAMINA FOCUS-DEPTH UTILITY\r\n Entrance: soft -> sharp.\r\n Exit: sharp -> soft.\r\n ========================================================= *\/\r\n\r\n#lamina-doctor-gallery [data-focus-layer]{\r\n --lamina-focus-blur:0px;\r\n --lamina-focus-opacity:1;\r\n --lamina-focus-y:0px;\r\n\r\n filter:blur(var(--lamina-focus-blur));\r\n opacity:var(--lamina-focus-opacity);\r\n\r\n \/*\r\n This transform is deliberately applied only to bounded focus layers,\r\n never the ribbon or doctor-card positioning transform.\r\n *\/\r\n translate:0 var(--lamina-focus-y);\r\n}\r\n\r\n#lamina-doctor-gallery [data-focus-layer=\"ui\"]:focus-visible,\r\n#lamina-doctor-gallery [data-focus-layer=\"ui\"]:focus-within{\r\n filter:none !important;\r\n opacity:1 !important;\r\n translate:0 0 !important;\r\n}\r\n\r\n#lamina-doctor-gallery[data-lamina-focus-media-hold=\"true\"] [data-focus-layer=\"media\"],\r\n#lamina-doctor-gallery[data-lamina-focus-media-hold=\"true\"] [data-focus-layer=\"metadata\"]{\r\n filter:none !important;\r\n opacity:1 !important;\r\n translate:0 0 !important;\r\n}\r\n\r\n\r\n\r\n.ldg__ribbon-stage{\r\n position:relative;\r\n}\r\n\r\n.ldg__nav{\r\n position:absolute;\r\n top:clamp(150px,18vw,240px);\r\n z-index:18;\r\n\r\n width:54px;\r\n height:54px;\r\n\r\n display:grid;\r\n place-items:center;\r\n\r\n border:1px solid rgba(247,242,234,.42) !important;\r\n border-radius:999px;\r\n\r\n background:rgba(43,20,47,.88) !important;\r\n color:#F7F2EA !important;\r\n\r\n box-shadow:\r\n 0 14px 34px rgba(0,0,0,.28),\r\n inset 0 0 0 1px rgba(247,242,234,.055);\r\n\r\n cursor:pointer;\r\n appearance:none !important;\r\n -webkit-appearance:none !important;\r\n\r\n opacity:.96;\r\n\r\n transition:\r\n background-color .42s ease,\r\n border-color .42s ease,\r\n color .42s ease,\r\n opacity .32s ease,\r\n transform .42s var(--ease),\r\n box-shadow .42s ease;\r\n}\r\n\r\n.ldg__nav--prev{\r\n left:clamp(8px,1.2vw,18px);\r\n}\r\n\r\n.ldg__nav--next{\r\n right:clamp(8px,1.2vw,18px);\r\n}\r\n\r\n.ldg__nav:hover,\r\n.ldg__nav:focus,\r\n.ldg__nav:focus-visible,\r\n.ldg__nav:active{\r\n background:rgba(95,36,104,.94) !important;\r\n border-color:rgba(247,242,234,.68) !important;\r\n color:#F7F2EA !important;\r\n\r\n box-shadow:\r\n 0 16px 38px rgba(0,0,0,.32),\r\n inset 0 0 0 1px rgba(247,242,234,.08) !important;\r\n\r\n transform:none;\r\n outline:none !important;\r\n}\r\n\r\n.ldg__nav:focus-visible{\r\n outline:2px solid rgba(197,178,200,.82) !important;\r\n outline-offset:4px !important;\r\n}\r\n\r\n.ldg__nav[disabled]{\r\n opacity:.34;\r\n cursor:default;\r\n}\r\n\r\n.ldg__nav svg{\r\n width:18px;\r\n height:18px;\r\n display:block;\r\n stroke:currentColor;\r\n stroke-width:2.15;\r\n fill:none;\r\n overflow:visible;\r\n}\r\n\r\n\/* Elementor-safe navigation geometry *\/\r\n#lamina-doctor-gallery .ldg__nav{\r\n padding:0!important;\r\n text-indent:0!important;\r\n}\r\n\r\n#lamina-doctor-gallery .ldg__nav::after{\r\n content:none!important;\r\n display:none!important;\r\n}\r\n\r\n@media (min-width:761px) and (max-width:1180px){\r\n\r\n .ldg__title{\r\n width:min(100%,8.62ch);\r\n font-size:clamp(68px,8vw,104px);\r\n }\r\n\r\n .ldg__title-line{\r\n line-height:.85;\r\n padding-block:\r\n 0\r\n .036em;\r\n }\r\n\r\n .ldg__title-line:first-child{\r\n margin-inline-start:-.078em;\r\n }\r\n\r\n .ldg__title-line:nth-child(2){\r\n margin-inline-start:-.014em;\r\n }\r\n\r\n .ldg__title-line + .ldg__title-line{\r\n margin-top:-.100em;\r\n }\r\n\r\n .ldg__title-line--accent{\r\n margin-top:0 !important;\r\n padding-block:\r\n 0\r\n .064em;\r\n margin-inline-start:-.034em;\r\n }\r\n\r\n}\r\n\r\n@media (max-width:760px){\r\n\r\n \/*\r\n Mobile navigation belongs at the SIDES of the focused portrait.\r\n The stage starts at the portrait itself, so centering against the\r\n known portrait height keeps both buttons optically aligned.\r\n *\/\r\n .ldg__ribbon-stage{\r\n --mobile-portrait-height:clamp(380px,45svh,490px);\r\n\r\n padding-top:0;\r\n }\r\n\r\n .ldg__portrait{\r\n height:var(--mobile-portrait-height);\r\n }\r\n\r\n .ldg__nav{\r\n top:calc(var(--mobile-portrait-height) * .5);\r\n\r\n width:42px;\r\n height:42px;\r\n min-width:42px;\r\n min-height:42px;\r\n\r\n padding:0!important;\r\n\r\n display:grid;\r\n place-items:center;\r\n\r\n border:1px solid rgba(247,242,234,.42)!important;\r\n border-radius:50%!important;\r\n\r\n background:rgba(43,20,47,.84)!important;\r\n\r\n color:#F7F2EA!important;\r\n -webkit-text-fill-color:#F7F2EA!important;\r\n\r\n box-shadow:\r\n 0 10px 26px rgba(0,0,0,.24)!important;\r\n\r\n transform:translateY(-50%)!important;\r\n\r\n line-height:1!important;\r\n }\r\n\r\n \/*\r\n Position the circles at the actual outer edges of the portrait.\r\n Because the focused portrait occupies ~72vw, these controls\r\n lightly overlap its left\/right edges instead of covering the face.\r\n *\/\r\n .ldg__nav--prev{\r\n left:4px;\r\n right:auto;\r\n }\r\n\r\n .ldg__nav--next{\r\n left:auto;\r\n right:4px;\r\n }\r\n\r\n \/*\r\n Hide the source SVG and draw the chevron ourselves.\r\n This removes the optical imbalance from the original path.\r\n *\/\r\n .ldg__nav svg{\r\n display:none!important;\r\n }\r\n\r\n .ldg__nav::before{\r\n content:\"\";\r\n\r\n display:block;\r\n\r\n width:9px;\r\n height:9px;\r\n\r\n border-top:1.8px solid currentColor;\r\n border-right:1.8px solid currentColor;\r\n\r\n transform-origin:center;\r\n }\r\n\r\n .ldg__nav--prev::before{\r\n transform:rotate(-135deg);\r\n margin-left:3px;\r\n }\r\n\r\n .ldg__nav--next::before{\r\n transform:rotate(45deg);\r\n margin-right:3px;\r\n }\r\n\r\n \/*\r\n One clean control ring only.\r\n No second oval\/double outline after tapping.\r\n *\/\r\n .ldg__nav:hover,\r\n .ldg__nav:focus,\r\n .ldg__nav:focus-visible,\r\n .ldg__nav:active{\r\n background:rgba(95,36,104,.92)!important;\r\n border-color:rgba(247,242,234,.62)!important;\r\n\r\n color:#F7F2EA!important;\r\n -webkit-text-fill-color:#F7F2EA!important;\r\n\r\n outline:0!important;\r\n\r\n box-shadow:\r\n 0 10px 26px rgba(0,0,0,.26)!important;\r\n\r\n transform:translateY(-50%)!important;\r\n }\r\n\r\n}\r\n\r\n\/* =========================================================\r\n MOBILE\r\n ========================================================= *\/\r\n\r\n@media (max-width:760px){\r\n\r\n .ldg__shell{\r\n padding:72px 20px 84px;\r\n }\r\n\r\n .ldg__head{\r\n display:block;\r\n min-height:0;\r\n margin-bottom:36px;\r\n }\r\n\r\n .ldg__title{\r\n width:min(100%,7.84ch);\r\n max-width:none;\r\n overflow:visible;\r\n\r\n font-size:clamp(58px,15.8vw,76px);\r\n line-height:1;\r\n letter-spacing:-.046em;\r\n }\r\n\r\n .ldg__title-line{\r\n line-height:.86;\r\n\r\n padding-block:\r\n 0\r\n .040em;\r\n }\r\n\r\n .ldg__title-line:first-child{\r\n margin-inline-start:-.072em;\r\n }\r\n\r\n .ldg__title-line:nth-child(2){\r\n margin-inline-start:-.012em;\r\n }\r\n\r\n .ldg__title-line + .ldg__title-line{\r\n margin-top:-.090em;\r\n }\r\n\r\n .ldg__title-line--accent{\r\n margin-top:0 !important;\r\n\r\n padding-block:\r\n 0\r\n .070em;\r\n\r\n padding-inline:\r\n 0\r\n .040em;\r\n\r\n letter-spacing:-.032em;\r\n line-height:.89;\r\n margin-inline-start:-.032em;\r\n }\r\n\r\n .ldg__intro{\r\n margin-top:22px;\r\n font-size:15px;\r\n line-height:1.62;\r\n max-width:34ch;\r\n }\r\n\r\n .ldg__orientation{\r\n grid-template-columns:auto minmax(100px,1fr);\r\n gap:16px;\r\n margin-bottom:14px;\r\n }\r\n\r\n .ldg__drag-cue{\r\n display:none;\r\n }\r\n\r\n .ldg__count{\r\n font-size:11px;\r\n }\r\n\r\n .ldg__ribbon{\r\n gap:14px;\r\n padding-right:22vw;\r\n }\r\n\r\n .ldg__doctor{\r\n flex-basis:72vw;\r\n }\r\n\r\n .ldg__portrait{\r\n height:var(--mobile-portrait-height);\r\n }\r\n\r\n \/*\r\n Safe text inset: the focused card still grows slightly, but its\r\n editorial text can never sit flush against the clipped viewport edge.\r\n *\/\r\n .ldg__doctor-info{\r\n padding:\r\n 16px\r\n 10px\r\n 0;\r\n }\r\n\r\n .ldg__doctor-meta,\r\n .ldg__name,\r\n .ldg__category,\r\n .ldg__role,\r\n .ldg__proof,\r\n .ldg__profile{\r\n max-width:100%;\r\n }\r\n\r\n .ldg__name{\r\n overflow-wrap:normal;\r\n }\r\n\r\n .ldg__category,\r\n .ldg__role,\r\n .ldg__proof{\r\n white-space:normal;\r\n }\r\n\r\n .ldg__index{\r\n font-size:11px;\r\n }\r\n\r\n .ldg__name{\r\n font-size:clamp(30px,8.3vw,38px);\r\n line-height:1.02;\r\n }\r\n\r\n .ldg__category{\r\n font-size:11px;\r\n }\r\n\r\n .ldg__role{\r\n font-size:13px;\r\n }\r\n\r\n .ldg__proof{\r\n font-size:12px;\r\n }\r\n\r\n .ldg__profile{\r\n font-size:11px;\r\n }\r\n\r\n}\r\n\r\n@media (max-width:420px){\r\n\r\n .ldg__ribbon-stage{\r\n --mobile-portrait-height:clamp(365px,44svh,465px);\r\n padding-top:0;\r\n }\r\n\r\n .ldg__nav{\r\n top:calc(var(--mobile-portrait-height) * .5);\r\n\r\n width:40px;\r\n height:40px;\r\n min-width:40px;\r\n min-height:40px;\r\n }\r\n\r\n .ldg__nav--prev{\r\n left:3px;\r\n right:auto;\r\n }\r\n\r\n .ldg__nav--next{\r\n left:auto;\r\n right:3px;\r\n }\r\n\r\n .ldg__doctor{\r\n flex-basis:70vw;\r\n }\r\n\r\n .ldg__doctor-info{\r\n padding-inline:9px;\r\n }\r\n\r\n .ldg__name{\r\n font-size:clamp(29px,8vw,35px);\r\n }\r\n\r\n .ldg__title{\r\n width:min(100%,7.72ch);\r\n font-size:clamp(54px,15.3vw,66px);\r\n }\r\n\r\n .ldg__title-line:first-child{\r\n margin-inline-start:-.064em;\r\n }\r\n\r\n .ldg__title-line:nth-child(2){\r\n margin-inline-start:-.010em;\r\n }\r\n\r\n .ldg__title-line + .ldg__title-line{\r\n margin-top:-.080em;\r\n }\r\n\r\n .ldg__title-line--accent{\r\n margin-top:0 !important;\r\n margin-inline-start:-.030em;\r\n }\r\n\r\n}\r\n\r\n\/* =========================================================\r\n REDUCED MOTION\r\n ========================================================= *\/\r\n\r\n@media (prefers-reduced-motion:reduce){\r\n\r\n #lamina-doctor-gallery [data-focus-layer]{\r\n filter:none !important;\r\n translate:0 0 !important;\r\n }\r\n\r\n #lamina-doctor-gallery .ldg__doctor,\r\n #lamina-doctor-gallery .ldg__portrait img,\r\n #lamina-doctor-gallery .ldg__doctor-meta,\r\n #lamina-doctor-gallery .ldg__name{\r\n transition:none !important;\r\n }\r\n\r\n}\r\n<\/style>\r\n\r\n\r\n<section\r\n id=\"lamina-doctor-gallery\"\r\n aria-labelledby=\"lamina-doctor-gallery-title\"\r\n data-lamina-focus-section\r\n data-focus-profile=\"medical-team\"\r\n>\r\n\r\n <div class=\"ldg__shell\">\r\n\r\n <header class=\"ldg__head\">\r\n\r\n <div>\r\n <p\r\n class=\"ldg__eyebrow\"\r\n data-focus-layer=\"heading\"\r\n >\r\n MEDICAL TEAM\r\n <\/p>\r\n\r\n <h2\r\n class=\"ldg__title\"\r\n id=\"lamina-doctor-gallery-title\"\r\n >\r\n <span class=\"ldg__title-line\" data-focus-layer=\"heading\">The people<\/span>\r\n <span class=\"ldg__title-line\" data-focus-layer=\"heading\">behind<\/span>\r\n <span class=\"ldg__title-line ldg__title-line--accent\" data-focus-layer=\"heading\">your care.<\/span>\r\n <\/h2>\r\n <\/div>\r\n\r\n <div>\r\n <p\r\n class=\"ldg__intro\"\r\n data-focus-layer=\"copy\"\r\n >\r\n Explore the medical professionals behind Lamina\u2019s hair restoration and dental care.\r\n <\/p>\r\n\r\n <p\r\n class=\"ldg__micro\"\r\n data-focus-layer=\"ui\"\r\n >\r\n Istanbul \u00b7 Medical Team\r\n <\/p>\r\n <\/div>\r\n\r\n <\/header>\r\n\r\n\r\n <div\r\n class=\"ldg__orientation\"\r\n data-focus-layer=\"ui\"\r\n >\r\n\r\n <span\r\n class=\"ldg__count\"\r\n aria-live=\"polite\"\r\n >\r\n 01 \/ 05\r\n <\/span>\r\n\r\n <div\r\n class=\"ldg__progress\"\r\n aria-hidden=\"true\"\r\n >\r\n <span class=\"ldg__progress-fill\"><\/span>\r\n <\/div>\r\n\r\n <span\r\n class=\"ldg__drag-cue\"\r\n aria-hidden=\"true\"\r\n >\r\n Drag \/ Swipe\r\n <\/span>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"ldg__bleed\">\r\n\r\n <div class=\"ldg__ribbon-stage\">\r\n\r\n <button\r\n class=\"ldg__nav ldg__nav--prev\"\r\n type=\"button\"\r\n aria-label=\"Show previous doctor\"\r\n data-nav=\"prev\"\r\n >\r\n <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\r\n <path d=\"M11.75 4.75L6.5 10l5.25 5.25\"><\/path>\r\n <\/svg>\r\n <\/button>\r\n\r\n <button\r\n class=\"ldg__nav ldg__nav--next\"\r\n type=\"button\"\r\n aria-label=\"Show next doctor\"\r\n data-nav=\"next\"\r\n >\r\n <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\r\n <path d=\"M8.25 4.75L13.5 10l-5.25 5.25\"><\/path>\r\n <\/svg>\r\n <\/button>\r\n\r\n <div\r\n class=\"ldg__viewport\"\r\n role=\"region\"\r\n aria-label=\"Lamina Clinic medical team. Drag horizontally to explore doctors.\"\r\n tabindex=\"0\"\r\n >\r\n\r\n <div class=\"ldg__ribbon\">\r\n\r\n\r\n <article\r\n class=\"ldg__doctor is-nearest\"\r\n data-index=\"0\"\r\n data-parallax-strength=\".70\"\r\n data-position-desktop=\"50% 18%\"\r\n data-position-tablet=\"50% 16%\"\r\n data-position-mobile=\"50% 14%\"\r\n >\r\n\r\n <figure\r\n class=\"ldg__portrait\"\r\n data-focus-layer=\"media\"\r\n >\r\n <img\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/serkan.png\"\r\n loading=\"eager\"\r\n decoding=\"async\"\r\n alt=\"Dr. Serkan at Lamina Clinic\"\r\n onerror=\"this.parentElement.classList.add('is-missing');this.remove();\"\r\n >\r\n <\/figure>\r\n\r\n <div class=\"ldg__doctor-info\">\r\n\r\n <div\r\n class=\"ldg__doctor-meta\"\r\n data-focus-layer=\"metadata\"\r\n >\r\n <span class=\"ldg__index\">01<\/span>\r\n <h3 class=\"ldg__name\">Dr. Serkan<\/h3>\r\n <p class=\"ldg__category\">Hair Restoration<\/p>\r\n <p class=\"ldg__role\">Hair Transplant<\/p>\r\n <p class=\"ldg__proof\">One verified professional fact may appear here once confirmed.<\/p>\r\n <\/div>\r\n\r\n <a\r\n class=\"ldg__profile\"\r\n data-focus-layer=\"ui\"\r\n href=\"#\"\r\n data-placeholder-link\r\n >\r\n View profile <span class=\"ldg__arrow\" aria-hidden=\"true\">\u2192<\/span>\r\n <\/a>\r\n\r\n <\/div>\r\n\r\n <\/article>\r\n\r\n\r\n <article\r\n class=\"ldg__doctor\"\r\n data-index=\"1\"\r\n data-parallax-strength=\"1\"\r\n data-position-desktop=\"50% 17%\"\r\n data-position-tablet=\"50% 15%\"\r\n data-position-mobile=\"50% 13%\"\r\n >\r\n\r\n <figure\r\n class=\"ldg__portrait\"\r\n data-focus-layer=\"media\"\r\n >\r\n <img\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/leyla.png\"\r\n loading=\"eager\"\r\n decoding=\"async\"\r\n alt=\"Dr. Leyla Hasaneyn at Lamina Clinic\"\r\n onerror=\"this.parentElement.classList.add('is-missing');this.remove();\"\r\n >\r\n <\/figure>\r\n\r\n <div class=\"ldg__doctor-info\">\r\n\r\n <div\r\n class=\"ldg__doctor-meta\"\r\n data-focus-layer=\"metadata\"\r\n >\r\n <span class=\"ldg__index\">02<\/span>\r\n <h3 class=\"ldg__name\">Dr. Leyla Hasaneyn<\/h3>\r\n <p class=\"ldg__category\">Dental Aesthetics<\/p>\r\n <p class=\"ldg__role\">Registered Dentist<\/p>\r\n <p class=\"ldg__proof\">One verified professional fact may appear here once confirmed.<\/p>\r\n <\/div>\r\n\r\n <a\r\n class=\"ldg__profile\"\r\n data-focus-layer=\"ui\"\r\n href=\"#\"\r\n data-placeholder-link\r\n >\r\n View profile <span class=\"ldg__arrow\" aria-hidden=\"true\">\u2192<\/span>\r\n <\/a>\r\n\r\n <\/div>\r\n\r\n <\/article>\r\n\r\n\r\n <article\r\n class=\"ldg__doctor\"\r\n data-index=\"2\"\r\n data-parallax-strength=\".90\"\r\n data-position-desktop=\"50% 17%\"\r\n data-position-tablet=\"50% 15%\"\r\n data-position-mobile=\"50% 13%\"\r\n >\r\n\r\n <figure\r\n class=\"ldg__portrait\"\r\n data-focus-layer=\"media\"\r\n >\r\n <img\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/uvys.png\"\r\n loading=\"eager\"\r\n decoding=\"async\"\r\n alt=\"Dr. Uyeys Koyara at Lamina Clinic\"\r\n onerror=\"this.parentElement.classList.add('is-missing');this.remove();\"\r\n >\r\n <\/figure>\r\n\r\n <div class=\"ldg__doctor-info\">\r\n\r\n <div\r\n class=\"ldg__doctor-meta\"\r\n data-focus-layer=\"metadata\"\r\n >\r\n <span class=\"ldg__index\">03<\/span>\r\n <h3 class=\"ldg__name\">Dr. Uyeys Koyara<\/h3>\r\n <p class=\"ldg__category\">Dental Aesthetics<\/p>\r\n <p class=\"ldg__role\">Registered Dentist<\/p>\r\n <p class=\"ldg__proof\">One verified professional fact may appear here once confirmed.<\/p>\r\n <\/div>\r\n\r\n <a\r\n class=\"ldg__profile\"\r\n data-focus-layer=\"ui\"\r\n href=\"#\"\r\n data-placeholder-link\r\n >\r\n View profile <span class=\"ldg__arrow\" aria-hidden=\"true\">\u2192<\/span>\r\n <\/a>\r\n\r\n <\/div>\r\n\r\n <\/article>\r\n\r\n\r\n <article\r\n class=\"ldg__doctor\"\r\n data-index=\"3\"\r\n data-parallax-strength=\".80\"\r\n data-position-desktop=\"50% 17%\"\r\n data-position-tablet=\"50% 15%\"\r\n data-position-mobile=\"50% 13%\"\r\n >\r\n\r\n <figure\r\n class=\"ldg__portrait\"\r\n data-focus-layer=\"media\"\r\n >\r\n <img\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/Lin.png\"\r\n loading=\"eager\"\r\n decoding=\"async\"\r\n alt=\"Dr. Lin MAKKi at Lamina Clinic\"\r\n onerror=\"this.parentElement.classList.add('is-missing');this.remove();\"\r\n >\r\n <\/figure>\r\n\r\n <div class=\"ldg__doctor-info\">\r\n\r\n <div\r\n class=\"ldg__doctor-meta\"\r\n data-focus-layer=\"metadata\"\r\n >\r\n <span class=\"ldg__index\">04<\/span>\r\n <h3 class=\"ldg__name\">Dr. Lin MAKKi<\/h3>\r\n <p class=\"ldg__category\">Dental Aesthetics<\/p>\r\n <p class=\"ldg__role\">Registered Dentist<\/p>\r\n <p class=\"ldg__proof\">One verified professional fact may appear here once confirmed.<\/p>\r\n <\/div>\r\n\r\n <a\r\n class=\"ldg__profile\"\r\n data-focus-layer=\"ui\"\r\n href=\"#\"\r\n data-placeholder-link\r\n >\r\n View profile <span class=\"ldg__arrow\" aria-hidden=\"true\">\u2192<\/span>\r\n <\/a>\r\n\r\n <\/div>\r\n\r\n <\/article>\r\n\r\n\r\n <article\r\n class=\"ldg__doctor\"\r\n data-index=\"4\"\r\n data-parallax-strength=\".45\"\r\n data-position-desktop=\"52% 18%\"\r\n data-position-tablet=\"52% 16%\"\r\n data-position-mobile=\"52% 14%\"\r\n >\r\n\r\n <figure\r\n class=\"ldg__portrait\"\r\n data-focus-layer=\"media\"\r\n >\r\n <img\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/mohammed.png\"\r\n loading=\"lazy\"\r\n decoding=\"async\"\r\n alt=\"Dr. Mohammed Issa at Lamina Clinic\"\r\n onerror=\"this.parentElement.classList.add('is-missing');this.remove();\"\r\n >\r\n <\/figure>\r\n\r\n <div class=\"ldg__doctor-info\">\r\n\r\n <div\r\n class=\"ldg__doctor-meta\"\r\n data-focus-layer=\"metadata\"\r\n >\r\n <span class=\"ldg__index\">05<\/span>\r\n <h3 class=\"ldg__name\">Dr. Mohammed Issa<\/h3>\r\n <p class=\"ldg__category\">Role to be confirmed<\/p>\r\n <p class=\"ldg__role\">Professional title pending verification<\/p>\r\n <p class=\"ldg__proof\">One verified professional fact may appear here once confirmed.<\/p>\r\n <\/div>\r\n\r\n <a\r\n class=\"ldg__profile\"\r\n data-focus-layer=\"ui\"\r\n href=\"#\"\r\n data-placeholder-link\r\n >\r\n View profile <span class=\"ldg__arrow\" aria-hidden=\"true\">\u2192<\/span>\r\n <\/a>\r\n\r\n <\/div>\r\n\r\n <\/article>\r\n\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<script>\r\n(() => {\r\n\r\n const root =\r\n document.getElementById(\r\n 'lamina-doctor-gallery'\r\n );\r\n\r\n\r\n if (\r\n !root ||\r\n root.dataset.kineticRibbonReady ===\r\n 'true'\r\n ) return;\r\n\r\n\r\n root.dataset.kineticRibbonReady =\r\n 'true';\r\n\r\n\r\n const viewport =\r\n root.querySelector(\r\n '.ldg__viewport'\r\n );\r\n\r\n\r\n const ribbon =\r\n root.querySelector(\r\n '.ldg__ribbon'\r\n );\r\n\r\n\r\n const cards =\r\n [\r\n ...root.querySelectorAll(\r\n '.ldg__doctor'\r\n )\r\n ];\r\n\r\n\r\n const count =\r\n root.querySelector(\r\n '.ldg__count'\r\n );\r\n\r\n\r\n const progressFill =\r\n root.querySelector(\r\n '.ldg__progress-fill'\r\n );\r\n\r\n\r\n const prevButton =\r\n root.querySelector(\r\n '[data-nav=\"prev\"]'\r\n );\r\n\r\n\r\n const nextButton =\r\n root.querySelector(\r\n '[data-nav=\"next\"]'\r\n );\r\n\r\n\r\n const reducedMotion =\r\n window.matchMedia(\r\n '(prefers-reduced-motion: reduce)'\r\n );\r\n\r\n\r\n if (\r\n !viewport ||\r\n !ribbon ||\r\n cards.length !== 5\r\n ) return;\r\n\r\n\r\n \/* =======================================================\r\n DOCTOR CROP NORMALIZATION\r\n ======================================================= *\/\r\n\r\n function viewportMode(){\r\n\r\n if (\r\n window.innerWidth <= 760\r\n ) return 'mobile';\r\n\r\n\r\n if (\r\n window.innerWidth <= 1080\r\n ) return 'tablet';\r\n\r\n\r\n return 'desktop';\r\n\r\n }\r\n\r\n\r\n function applyPortraitPositions(){\r\n\r\n const mode =\r\n viewportMode();\r\n\r\n\r\n cards.forEach(\r\n card => {\r\n\r\n const position =\r\n mode ===\r\n 'mobile'\r\n ? card.dataset.positionMobile\r\n : mode ===\r\n 'tablet'\r\n ? card.dataset.positionTablet\r\n : card.dataset.positionDesktop;\r\n\r\n\r\n card.style.setProperty(\r\n '--doctor-pos',\r\n position ||\r\n '50% 18%'\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n \/* =======================================================\r\n PROJECT-WIDE LAMINA FOCUS-DEPTH CONTROLLER\r\n One singleton for entrance + exit focus across future sections.\r\n ======================================================= *\/\r\n\r\n if (\r\n !window.LaminaFocusDepth\r\n ){\r\n\r\n window.LaminaFocusDepth =\r\n (() => {\r\n\r\n const sectionStates =\r\n new Set();\r\n\r\n\r\n const reducedQuery =\r\n window.matchMedia(\r\n '(prefers-reduced-motion: reduce)'\r\n );\r\n\r\n\r\n let ticking =\r\n false;\r\n\r\n\r\n let previousScrollY =\r\n window.scrollY;\r\n\r\n\r\n let direction =\r\n 0;\r\n\r\n\r\n const directionThreshold =\r\n 3;\r\n\r\n\r\n const desktop =\r\n {\r\n focalTop:.20,\r\n focalBottom:.72,\r\n entryFar:.93,\r\n exitFar:-.14,\r\n\r\n heading:{\r\n entryBlur:5,\r\n exitBlur:4.4,\r\n opacityMin:.78,\r\n entryShift:6,\r\n exitShift:-3\r\n },\r\n\r\n copy:{\r\n entryBlur:3.5,\r\n exitBlur:3.2,\r\n opacityMin:.84,\r\n entryShift:5,\r\n exitShift:-2\r\n },\r\n\r\n ui:{\r\n entryBlur:2,\r\n exitBlur:2.1,\r\n opacityMin:.86,\r\n entryShift:3,\r\n exitShift:-1\r\n },\r\n\r\n metadata:{\r\n entryBlur:2.5,\r\n exitBlur:2.5,\r\n opacityMin:.84,\r\n entryShift:4,\r\n exitShift:-2\r\n },\r\n\r\n media:{\r\n entryBlur:3,\r\n exitBlur:3.4,\r\n opacityMin:.80,\r\n entryShift:5,\r\n exitShift:-2\r\n }\r\n };\r\n\r\n\r\n const mobile =\r\n {\r\n focalTop:.12,\r\n focalBottom:.80,\r\n entryFar:.96,\r\n exitFar:-.16,\r\n\r\n heading:{\r\n entryBlur:0,\r\n exitBlur:0,\r\n opacityMin:1,\r\n entryShift:0,\r\n exitShift:0\r\n },\r\n\r\n copy:{\r\n entryBlur:0,\r\n exitBlur:0,\r\n opacityMin:1,\r\n entryShift:0,\r\n exitShift:0\r\n },\r\n\r\n ui:{\r\n entryBlur:0,\r\n exitBlur:0,\r\n opacityMin:1,\r\n entryShift:0,\r\n exitShift:0\r\n },\r\n\r\n metadata:{\r\n entryBlur:0,\r\n exitBlur:0,\r\n opacityMin:1,\r\n entryShift:0,\r\n exitShift:0\r\n },\r\n\r\n media:{\r\n entryBlur:0,\r\n exitBlur:0,\r\n opacityMin:1,\r\n entryShift:0,\r\n exitShift:0\r\n }\r\n };\r\n\r\n\r\n function clamp(\r\n value,\r\n min,\r\n max\r\n ){\r\n\r\n return Math.min(\r\n max,\r\n Math.max(\r\n min,\r\n value\r\n )\r\n );\r\n\r\n }\r\n\r\n\r\n function smootherstep(\r\n value\r\n ){\r\n\r\n const t =\r\n clamp(\r\n value,\r\n 0,\r\n 1\r\n );\r\n\r\n\r\n return (\r\n t *\r\n t *\r\n t *\r\n (\r\n t *\r\n (\r\n t *\r\n 6 -\r\n 15\r\n ) +\r\n 10\r\n )\r\n );\r\n\r\n }\r\n\r\n\r\n function measure(\r\n state\r\n ){\r\n\r\n const sectionRect =\r\n state.section.getBoundingClientRect();\r\n\r\n\r\n state.layers =\r\n [\r\n ...state.section.querySelectorAll(\r\n '[data-focus-layer]'\r\n )\r\n ].map(\r\n element => {\r\n\r\n const rect =\r\n element.getBoundingClientRect();\r\n\r\n\r\n return {\r\n element,\r\n type:\r\n element.dataset.focusLayer ||\r\n 'copy',\r\n centerOffset:\r\n rect.top -\r\n sectionRect.top +\r\n rect.height *\r\n .5\r\n };\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n function applyLayer(\r\n item,\r\n entryProgress,\r\n exitProgress,\r\n config,\r\n reduced\r\n ){\r\n\r\n const depth =\r\n Math.max(\r\n entryProgress,\r\n exitProgress\r\n );\r\n\r\n\r\n let blur =\r\n entryProgress >=\r\n exitProgress\r\n ? (\r\n config.entryBlur *\r\n entryProgress\r\n )\r\n : (\r\n config.exitBlur *\r\n exitProgress\r\n );\r\n\r\n\r\n let opacity =\r\n 1 -\r\n (\r\n 1 -\r\n config.opacityMin\r\n ) *\r\n depth;\r\n\r\n\r\n let shift =\r\n entryProgress >=\r\n exitProgress\r\n ? (\r\n config.entryShift *\r\n entryProgress\r\n )\r\n : (\r\n config.exitShift *\r\n exitProgress\r\n );\r\n\r\n\r\n if (\r\n reduced\r\n ){\r\n\r\n blur =\r\n 0;\r\n\r\n\r\n shift =\r\n 0;\r\n\r\n\r\n opacity =\r\n 1 -\r\n .15 *\r\n depth;\r\n\r\n }\r\n\r\n\r\n item.element.style.setProperty(\r\n '--lamina-focus-blur',\r\n blur.toFixed(\r\n 2\r\n ) +\r\n 'px'\r\n );\r\n\r\n\r\n item.element.style.setProperty(\r\n '--lamina-focus-opacity',\r\n opacity.toFixed(\r\n 3\r\n )\r\n );\r\n\r\n\r\n item.element.style.setProperty(\r\n '--lamina-focus-y',\r\n shift.toFixed(\r\n 2\r\n ) +\r\n 'px'\r\n );\r\n\r\n }\r\n\r\n\r\n function updateSection(\r\n state,\r\n viewportHeight,\r\n compact\r\n ){\r\n\r\n if (\r\n !state.near\r\n ) return;\r\n\r\n\r\n const sectionRect =\r\n state.section.getBoundingClientRect();\r\n\r\n\r\n const config =\r\n compact\r\n ? mobile\r\n : desktop;\r\n\r\n\r\n const focalTop =\r\n viewportHeight *\r\n config.focalTop;\r\n\r\n\r\n const focalBottom =\r\n viewportHeight *\r\n config.focalBottom;\r\n\r\n\r\n const entryFar =\r\n viewportHeight *\r\n config.entryFar;\r\n\r\n\r\n const exitFar =\r\n viewportHeight *\r\n config.exitFar;\r\n\r\n\r\n const holdMedia =\r\n state.section.dataset.laminaFocusMediaHold ===\r\n 'true';\r\n\r\n\r\n state.layers.forEach(\r\n item => {\r\n\r\n const layerConfig =\r\n config[\r\n item.type\r\n ] ||\r\n config.copy;\r\n\r\n\r\n const focused =\r\n item.element.matches(\r\n ':focus-visible'\r\n ) ||\r\n item.element.matches(\r\n ':focus-within'\r\n );\r\n\r\n\r\n if (\r\n focused ||\r\n (\r\n holdMedia &&\r\n (\r\n item.type ===\r\n 'media' ||\r\n item.type ===\r\n 'metadata'\r\n )\r\n )\r\n ){\r\n\r\n applyLayer(\r\n item,\r\n 0,\r\n 0,\r\n layerConfig,\r\n reducedQuery.matches\r\n );\r\n\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n const centerY =\r\n sectionRect.top +\r\n item.centerOffset;\r\n\r\n\r\n \/*\r\n UPCOMING \/ BELOW:\r\n meaningful blur exists only below the lower focal boundary.\r\n *\/\r\n const entryProgress =\r\n centerY >\r\n focalBottom\r\n ? smootherstep(\r\n (\r\n centerY -\r\n focalBottom\r\n ) \/\r\n Math.max(\r\n 1,\r\n entryFar -\r\n focalBottom\r\n )\r\n )\r\n : 0;\r\n\r\n\r\n \/*\r\n PASSED \/ ABOVE:\r\n blur begins only after content has moved above the upper\r\n focal boundary. This is the existing Lamina exit-focus rule.\r\n *\/\r\n const exitProgress =\r\n centerY <\r\n focalTop\r\n ? smootherstep(\r\n (\r\n focalTop -\r\n centerY\r\n ) \/\r\n Math.max(\r\n 1,\r\n focalTop -\r\n exitFar\r\n )\r\n )\r\n : 0;\r\n\r\n\r\n applyLayer(\r\n item,\r\n entryProgress,\r\n exitProgress,\r\n layerConfig,\r\n reducedQuery.matches\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n function update(){\r\n\r\n ticking =\r\n false;\r\n\r\n\r\n const currentScrollY =\r\n window.scrollY;\r\n\r\n\r\n const delta =\r\n currentScrollY -\r\n previousScrollY;\r\n\r\n\r\n if (\r\n delta >\r\n directionThreshold\r\n ){\r\n\r\n direction =\r\n 1;\r\n\r\n }else if(\r\n delta <\r\n -directionThreshold\r\n ){\r\n\r\n direction =\r\n -1;\r\n\r\n }\r\n\r\n\r\n previousScrollY =\r\n currentScrollY;\r\n\r\n\r\n const viewportHeight =\r\n Math.max(\r\n 1,\r\n window.innerHeight ||\r\n document.documentElement.clientHeight\r\n );\r\n\r\n\r\n const compact =\r\n window.innerWidth <=\r\n 760;\r\n\r\n\r\n sectionStates.forEach(\r\n state => {\r\n\r\n state.direction =\r\n direction;\r\n\r\n\r\n updateSection(\r\n state,\r\n viewportHeight,\r\n compact\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n function requestUpdate(){\r\n\r\n if (\r\n ticking\r\n ) return;\r\n\r\n\r\n ticking =\r\n true;\r\n\r\n\r\n requestAnimationFrame(\r\n update\r\n );\r\n\r\n }\r\n\r\n\r\n const intersectionObserver =\r\n 'IntersectionObserver' in window\r\n ? new IntersectionObserver(\r\n entries => {\r\n\r\n entries.forEach(\r\n entry => {\r\n\r\n const state =\r\n entry.target.__laminaFocusDepthState;\r\n\r\n\r\n if (\r\n !state\r\n ) return;\r\n\r\n\r\n state.near =\r\n entry.isIntersecting;\r\n\r\n\r\n if (\r\n state.near\r\n ){\r\n\r\n measure(\r\n state\r\n );\r\n\r\n\r\n requestUpdate();\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n },\r\n {\r\n rootMargin:'110% 0px 110% 0px',\r\n threshold:0\r\n }\r\n )\r\n : null;\r\n\r\n\r\n const resizeObserver =\r\n 'ResizeObserver' in window\r\n ? new ResizeObserver(\r\n entries => {\r\n\r\n entries.forEach(\r\n entry => {\r\n\r\n const state =\r\n entry.target.__laminaFocusDepthState;\r\n\r\n\r\n if (\r\n state\r\n ){\r\n\r\n measure(\r\n state\r\n );\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n\r\n requestUpdate();\r\n\r\n }\r\n )\r\n : null;\r\n\r\n\r\n function register(\r\n section\r\n ){\r\n\r\n if (\r\n !section ||\r\n section.__laminaFocusDepthState\r\n ) return;\r\n\r\n\r\n const state =\r\n {\r\n section,\r\n near:true,\r\n direction:0,\r\n layers:[]\r\n };\r\n\r\n\r\n section.__laminaFocusDepthState =\r\n state;\r\n\r\n\r\n sectionStates.add(\r\n state\r\n );\r\n\r\n\r\n measure(\r\n state\r\n );\r\n\r\n\r\n intersectionObserver?.observe(\r\n section\r\n );\r\n\r\n\r\n resizeObserver?.observe(\r\n section\r\n );\r\n\r\n\r\n requestUpdate();\r\n\r\n }\r\n\r\n\r\n function remeasure(){\r\n\r\n sectionStates.forEach(\r\n state => {\r\n\r\n measure(\r\n state\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n requestUpdate();\r\n\r\n }\r\n\r\n\r\n window.addEventListener(\r\n 'scroll',\r\n requestUpdate,\r\n {\r\n passive:true\r\n }\r\n );\r\n\r\n\r\n let resizeTimer =\r\n null;\r\n\r\n\r\n window.addEventListener(\r\n 'resize',\r\n () => {\r\n\r\n window.clearTimeout(\r\n resizeTimer\r\n );\r\n\r\n\r\n resizeTimer =\r\n window.setTimeout(\r\n remeasure,\r\n 120\r\n );\r\n\r\n },\r\n {\r\n passive:true\r\n }\r\n );\r\n\r\n\r\n return {\r\n register,\r\n requestUpdate,\r\n remeasure\r\n };\r\n\r\n })();\r\n\r\n }\r\n\r\n\r\n window.LaminaFocusDepth.register(\r\n root\r\n );\r\n\r\n\r\n \/* =======================================================\r\n KINETIC RIBBON STATE\r\n ======================================================= *\/\r\n\r\n let anchors =\r\n [];\r\n\r\n\r\n let minX =\r\n 0;\r\n\r\n\r\n let maxX =\r\n 0;\r\n\r\n\r\n let focalX =\r\n 0;\r\n\r\n\r\n let currentX =\r\n 0;\r\n\r\n\r\n let nearestIndex =\r\n 0;\r\n\r\n\r\n let previousMotionX =\r\n 0;\r\n\r\n\r\n let smoothedVelocity =\r\n 0;\r\n\r\n\r\n let motionFrame =\r\n 0;\r\n\r\n\r\n let motionActive =\r\n false;\r\n\r\n\r\n let gsapInstance =\r\n null;\r\n\r\n\r\n let draggableInstance =\r\n null;\r\n\r\n\r\n let usingGsap =\r\n false;\r\n\r\n\r\n let suppressClickUntil =\r\n 0;\r\n\r\n\r\n let pointerStartX =\r\n 0;\r\n\r\n\r\n let pointerStartY =\r\n 0;\r\n\r\n\r\n let pointerMoved =\r\n false;\r\n\r\n\r\n let wheelSettleTimer =\r\n null;\r\n\r\n\r\n let fallbackTweenFrame =\r\n 0;\r\n\r\n\r\n function clamp(\r\n value,\r\n min,\r\n max\r\n ){\r\n\r\n return Math.min(\r\n max,\r\n Math.max(\r\n min,\r\n value\r\n )\r\n );\r\n\r\n }\r\n\r\n\r\n function lerp(\r\n a,\r\n b,\r\n t\r\n ){\r\n\r\n return (\r\n a +\r\n (\r\n b -\r\n a\r\n ) *\r\n t\r\n );\r\n\r\n }\r\n\r\n\r\n function nearestAnchorIndex(\r\n value\r\n ){\r\n\r\n let bestIndex =\r\n 0;\r\n\r\n\r\n let bestDistance =\r\n Infinity;\r\n\r\n\r\n anchors.forEach(\r\n (\r\n anchor,\r\n index\r\n ) => {\r\n\r\n const distance =\r\n Math.abs(\r\n value -\r\n anchor\r\n );\r\n\r\n\r\n if (\r\n distance <\r\n bestDistance\r\n ){\r\n\r\n bestDistance =\r\n distance;\r\n\r\n\r\n bestIndex =\r\n index;\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n\r\n return bestIndex;\r\n\r\n }\r\n\r\n\r\n function nearestAnchorValue(\r\n value\r\n ){\r\n\r\n return (\r\n anchors[\r\n nearestAnchorIndex(\r\n value\r\n )\r\n ] ??\r\n 0\r\n );\r\n\r\n }\r\n\r\n\r\n function readRibbonX(){\r\n\r\n if (\r\n usingGsap &&\r\n gsapInstance\r\n ){\r\n\r\n return Number(\r\n gsapInstance.getProperty(\r\n ribbon,\r\n 'x'\r\n )\r\n ) || 0;\r\n\r\n }\r\n\r\n\r\n return currentX;\r\n\r\n }\r\n\r\n\r\n function updateNavState(){\r\n\r\n if (\r\n !prevButton ||\r\n !nextButton\r\n ) return;\r\n\r\n\r\n prevButton.disabled =\r\n nearestIndex <= 0;\r\n\r\n\r\n nextButton.disabled =\r\n nearestIndex >= cards.length - 1;\r\n\r\n }\r\n\r\n\r\n function writeRibbonX(\r\n value\r\n ){\r\n\r\n currentX =\r\n clamp(\r\n value,\r\n minX,\r\n maxX\r\n );\r\n\r\n\r\n if (\r\n usingGsap &&\r\n gsapInstance\r\n ){\r\n\r\n gsapInstance.set(\r\n ribbon,\r\n {\r\n x:currentX\r\n }\r\n );\r\n\r\n }else{\r\n\r\n ribbon.style.transform =\r\n 'translate3d(' +\r\n currentX.toFixed(\r\n 3\r\n ) +\r\n 'px,0,0)';\r\n\r\n }\r\n\r\n }\r\n\r\n\r\n function measureGeometry(\r\n preserveIndex =\r\n true\r\n ){\r\n\r\n const oldIndex =\r\n nearestIndex;\r\n\r\n\r\n const viewportWidth =\r\n Math.max(\r\n 1,\r\n viewport.clientWidth\r\n );\r\n\r\n\r\n const compact =\r\n window.innerWidth <=\r\n 760;\r\n\r\n\r\n const firstCardWidth =\r\n cards[0]?.offsetWidth ||\r\n 320;\r\n\r\n\r\n const editorialStartGutter =\r\n clamp(\r\n viewportWidth *\r\n .022,\r\n 24,\r\n 42\r\n );\r\n\r\n\r\n focalX =\r\n compact\r\n ? viewportWidth * .54\r\n : firstCardWidth * .5 +\r\n editorialStartGutter;\r\n\r\n\r\n anchors =\r\n cards.map(\r\n card => {\r\n\r\n return (\r\n focalX -\r\n (\r\n card.offsetLeft +\r\n card.offsetWidth *\r\n .5\r\n )\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n maxX =\r\n anchors[0];\r\n\r\n\r\n minX =\r\n anchors[\r\n anchors.length -\r\n 1\r\n ];\r\n\r\n\r\n const targetIndex =\r\n preserveIndex\r\n ? clamp(\r\n oldIndex,\r\n 0,\r\n cards.length -\r\n 1\r\n )\r\n : 0;\r\n\r\n\r\n const target =\r\n anchors[\r\n targetIndex\r\n ];\r\n\r\n\r\n writeRibbonX(\r\n target\r\n );\r\n\r\n\r\n previousMotionX =\r\n currentX;\r\n\r\n\r\n updateVisualState(\r\n true\r\n );\r\n\r\n\r\n draggableInstance?.applyBounds?.(\r\n {\r\n minX,\r\n maxX\r\n }\r\n );\r\n\r\n\r\n draggableInstance?.update?.(\r\n true\r\n );\r\n\r\n\r\n window.LaminaFocusDepth?.remeasure?.();\r\n\r\n }\r\n\r\n\r\n function startMotion(){\r\n\r\n if (\r\n motionActive\r\n ) return;\r\n\r\n\r\n motionActive =\r\n true;\r\n\r\n\r\n root.classList.add(\r\n 'is-ribbon-moving'\r\n );\r\n\r\n\r\n previousMotionX =\r\n readRibbonX();\r\n\r\n\r\n motionFrame =\r\n requestAnimationFrame(\r\n motionLoop\r\n );\r\n\r\n }\r\n\r\n\r\n function endMotion(){\r\n\r\n motionActive =\r\n false;\r\n\r\n\r\n cancelAnimationFrame(\r\n motionFrame\r\n );\r\n\r\n\r\n motionFrame =\r\n 0;\r\n\r\n\r\n smoothedVelocity =\r\n 0;\r\n\r\n\r\n cards.forEach(\r\n card => {\r\n\r\n card.style.setProperty(\r\n '--img-x',\r\n '0px'\r\n );\r\n\r\n\r\n card.style.setProperty(\r\n '--img-saturation',\r\n '1'\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n root.classList.remove(\r\n 'is-ribbon-moving'\r\n );\r\n\r\n\r\n delete root.dataset.laminaFocusMediaHold;\r\n\r\n\r\n window.LaminaFocusDepth?.requestUpdate?.();\r\n\r\n\r\n updateVisualState(\r\n true\r\n );\r\n\r\n }\r\n\r\n\r\n function motionLoop(){\r\n\r\n if (\r\n !motionActive\r\n ) return;\r\n\r\n\r\n currentX =\r\n readRibbonX();\r\n\r\n\r\n const rawVelocity =\r\n currentX -\r\n previousMotionX;\r\n\r\n\r\n previousMotionX =\r\n currentX;\r\n\r\n\r\n smoothedVelocity =\r\n lerp(\r\n smoothedVelocity,\r\n rawVelocity,\r\n .16\r\n );\r\n\r\n\r\n if (\r\n Math.abs(\r\n smoothedVelocity\r\n ) <\r\n .015\r\n ){\r\n\r\n smoothedVelocity =\r\n 0;\r\n\r\n }\r\n\r\n\r\n updateVisualState(\r\n false\r\n );\r\n\r\n\r\n motionFrame =\r\n requestAnimationFrame(\r\n motionLoop\r\n );\r\n\r\n }\r\n\r\n\r\n function updateVisualState(\r\n forceStill\r\n ){\r\n\r\n const viewportRect =\r\n viewport.getBoundingClientRect();\r\n\r\n\r\n const compact =\r\n window.innerWidth <=\r\n 760;\r\n\r\n\r\n const focusRange =\r\n Math.max(\r\n compact\r\n ? 230\r\n : 300,\r\n viewportRect.width *\r\n (\r\n compact\r\n ? .62\r\n : .48\r\n )\r\n );\r\n\r\n\r\n const velocityReference =\r\n compact\r\n ? 18\r\n : 24;\r\n\r\n\r\n const normalizedVelocity =\r\n forceStill\r\n ? 0\r\n : clamp(\r\n smoothedVelocity \/\r\n velocityReference,\r\n -1,\r\n 1\r\n );\r\n\r\n\r\n let bestIndex =\r\n 0;\r\n\r\n\r\n let bestDistance =\r\n Infinity;\r\n\r\n\r\n cards.forEach(\r\n (\r\n card,\r\n index\r\n ) => {\r\n\r\n const center =\r\n currentX +\r\n card.offsetLeft +\r\n card.offsetWidth *\r\n .5;\r\n\r\n\r\n const distance =\r\n Math.abs(\r\n center -\r\n focalX\r\n );\r\n\r\n\r\n if (\r\n distance <\r\n bestDistance\r\n ){\r\n\r\n bestDistance =\r\n distance;\r\n\r\n\r\n bestIndex =\r\n index;\r\n\r\n }\r\n\r\n\r\n const proximity =\r\n clamp(\r\n 1 -\r\n distance \/\r\n focusRange,\r\n 0,\r\n 1\r\n );\r\n\r\n\r\n const opacity =\r\n .48 +\r\n proximity *\r\n .52;\r\n\r\n\r\n const scale =\r\n compact\r\n ? (\r\n .96 +\r\n proximity *\r\n .075\r\n )\r\n : (\r\n .94 +\r\n proximity *\r\n .14\r\n );\r\n\r\n\r\n const doctorBlur =\r\n (\r\n compact\r\n ? 1.25\r\n : 2.2\r\n ) *\r\n Math.pow(\r\n 1 -\r\n proximity,\r\n 1.18\r\n );\r\n\r\n\r\n const nameOpacity =\r\n .48 +\r\n proximity *\r\n .52;\r\n\r\n\r\n const metaOpacity =\r\n .52 +\r\n proximity *\r\n .48;\r\n\r\n\r\n const overlayOpacity =\r\n .62 -\r\n proximity *\r\n .34;\r\n\r\n\r\n card.style.setProperty(\r\n '--focus',\r\n proximity.toFixed(\r\n 4\r\n )\r\n );\r\n\r\n\r\n card.style.setProperty(\r\n '--doctor-opacity',\r\n opacity.toFixed(\r\n 3\r\n )\r\n );\r\n\r\n\r\n card.style.setProperty(\r\n '--doctor-scale',\r\n scale.toFixed(\r\n 4\r\n )\r\n );\r\n\r\n\r\n card.style.setProperty(\r\n '--doctor-blur',\r\n doctorBlur.toFixed(\r\n 2\r\n ) +\r\n 'px'\r\n );\r\n\r\n\r\n card.style.setProperty(\r\n '--name-opacity',\r\n nameOpacity.toFixed(\r\n 3\r\n )\r\n );\r\n\r\n\r\n card.style.setProperty(\r\n '--meta-opacity',\r\n metaOpacity.toFixed(\r\n 3\r\n )\r\n );\r\n\r\n\r\n card.style.setProperty(\r\n '--overlay-opacity',\r\n overlayOpacity.toFixed(\r\n 3\r\n )\r\n );\r\n\r\n\r\n const strength =\r\n Number(\r\n card.dataset.parallaxStrength ||\r\n 1\r\n );\r\n\r\n\r\n const maxParallax =\r\n (\r\n compact\r\n ? 6\r\n : 12\r\n ) *\r\n strength;\r\n\r\n\r\n const imageOffset =\r\n -normalizedVelocity *\r\n maxParallax;\r\n\r\n\r\n const imageScale =\r\n 1.035 +\r\n Math.abs(\r\n normalizedVelocity\r\n ) *\r\n .004;\r\n\r\n\r\n const saturation =\r\n 1 -\r\n Math.abs(\r\n normalizedVelocity\r\n ) *\r\n .045;\r\n\r\n\r\n card.style.setProperty(\r\n '--img-x',\r\n imageOffset.toFixed(\r\n 2\r\n ) +\r\n 'px'\r\n );\r\n\r\n\r\n card.style.setProperty(\r\n '--img-scale',\r\n imageScale.toFixed(\r\n 4\r\n )\r\n );\r\n\r\n\r\n card.style.setProperty(\r\n '--img-saturation',\r\n saturation.toFixed(\r\n 3\r\n )\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n nearestIndex =\r\n bestIndex;\r\n\r\n\r\n cards.forEach(\r\n (\r\n card,\r\n index\r\n ) => {\r\n\r\n card.classList.toggle(\r\n 'is-nearest',\r\n index ===\r\n nearestIndex\r\n );\r\n\r\n\r\n card.setAttribute(\r\n 'aria-current',\r\n index ===\r\n nearestIndex\r\n ? 'true'\r\n : 'false'\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n if (\r\n count\r\n ){\r\n\r\n count.textContent =\r\n String(\r\n nearestIndex +\r\n 1\r\n ).padStart(\r\n 2,\r\n '0'\r\n ) +\r\n ' \/ ' +\r\n String(\r\n cards.length\r\n ).padStart(\r\n 2,\r\n '0'\r\n );\r\n\r\n }\r\n\r\n\r\n const denominator =\r\n maxX -\r\n minX;\r\n\r\n\r\n const progress =\r\n denominator ===\r\n 0\r\n ? 0\r\n : clamp(\r\n (\r\n maxX -\r\n currentX\r\n ) \/\r\n denominator,\r\n 0,\r\n 1\r\n );\r\n\r\n\r\n if (\r\n progressFill\r\n ){\r\n\r\n progressFill.style.transform =\r\n 'scaleX(' +\r\n progress.toFixed(\r\n 4\r\n ) +\r\n ')';\r\n\r\n }\r\n\r\n\r\n updateNavState();\r\n\r\n }\r\n\r\n\r\n \/* =======================================================\r\n GSAP LOADING \/ REUSE\r\n Reuse existing global GSAP if present.\r\n Load only missing pieces when necessary.\r\n ======================================================= *\/\r\n\r\n function loadScriptOnce(\r\n src,\r\n test\r\n ){\r\n\r\n if (\r\n test()\r\n ){\r\n\r\n return Promise.resolve(\r\n true\r\n );\r\n\r\n }\r\n\r\n\r\n const existing =\r\n [\r\n ...document.scripts\r\n ].find(\r\n script =>\r\n script.src ===\r\n src\r\n );\r\n\r\n\r\n if (\r\n existing\r\n ){\r\n\r\n return new Promise(\r\n resolve => {\r\n\r\n existing.addEventListener(\r\n 'load',\r\n () => resolve(\r\n test()\r\n ),\r\n {\r\n once:true\r\n }\r\n );\r\n\r\n\r\n existing.addEventListener(\r\n 'error',\r\n () => resolve(\r\n false\r\n ),\r\n {\r\n once:true\r\n }\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n return new Promise(\r\n resolve => {\r\n\r\n const script =\r\n document.createElement(\r\n 'script'\r\n );\r\n\r\n\r\n script.src =\r\n src;\r\n\r\n\r\n script.async =\r\n true;\r\n\r\n\r\n script.onload =\r\n () => resolve(\r\n test()\r\n );\r\n\r\n\r\n script.onerror =\r\n () => resolve(\r\n false\r\n );\r\n\r\n\r\n document.head.appendChild(\r\n script\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n async function ensureKineticGsap(){\r\n\r\n let gsapReady =\r\n Boolean(\r\n window.gsap\r\n );\r\n\r\n\r\n if (\r\n !gsapReady\r\n ){\r\n\r\n gsapReady =\r\n await loadScriptOnce(\r\n 'https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.13.0\/dist\/gsap.min.js',\r\n () => Boolean(\r\n window.gsap\r\n )\r\n );\r\n\r\n }\r\n\r\n\r\n if (\r\n !gsapReady\r\n ){\r\n\r\n return false;\r\n\r\n }\r\n\r\n\r\n const version =\r\n window.gsap.version ||\r\n '3.13.0';\r\n\r\n\r\n let draggableReady =\r\n Boolean(\r\n window.Draggable\r\n );\r\n\r\n\r\n if (\r\n !draggableReady\r\n ){\r\n\r\n draggableReady =\r\n await loadScriptOnce(\r\n 'https:\/\/cdn.jsdelivr.net\/npm\/gsap@' +\r\n version +\r\n '\/dist\/Draggable.min.js',\r\n () => Boolean(\r\n window.Draggable\r\n )\r\n );\r\n\r\n }\r\n\r\n\r\n let inertiaReady =\r\n Boolean(\r\n window.InertiaPlugin\r\n );\r\n\r\n\r\n if (\r\n !inertiaReady\r\n ){\r\n\r\n inertiaReady =\r\n await loadScriptOnce(\r\n 'https:\/\/cdn.jsdelivr.net\/npm\/gsap@' +\r\n version +\r\n '\/dist\/InertiaPlugin.min.js',\r\n () => Boolean(\r\n window.InertiaPlugin\r\n )\r\n );\r\n\r\n }\r\n\r\n\r\n if (\r\n !draggableReady ||\r\n !inertiaReady\r\n ){\r\n\r\n return false;\r\n\r\n }\r\n\r\n\r\n window.gsap.registerPlugin(\r\n window.Draggable,\r\n window.InertiaPlugin\r\n );\r\n\r\n\r\n return true;\r\n\r\n }\r\n\r\n\r\n \/* =======================================================\r\n GSAP DRAGGABLE ENGINE\r\n ======================================================= *\/\r\n\r\n function killGsapMotion(){\r\n\r\n if (\r\n !usingGsap ||\r\n !gsapInstance\r\n ) return;\r\n\r\n\r\n gsapInstance.killTweensOf(\r\n ribbon\r\n );\r\n\r\n\r\n draggableInstance?.tween?.kill?.();\r\n\r\n }\r\n\r\n\r\n function focusDoctorGsap(\r\n index\r\n ){\r\n\r\n const safeIndex =\r\n clamp(\r\n index,\r\n 0,\r\n cards.length -\r\n 1\r\n );\r\n\r\n\r\n killGsapMotion();\r\n\r\n\r\n const target =\r\n anchors[\r\n safeIndex\r\n ];\r\n\r\n\r\n const distance =\r\n Math.abs(\r\n readRibbonX() -\r\n target\r\n );\r\n\r\n\r\n const duration =\r\n clamp(\r\n .70 +\r\n distance \/\r\n 1600,\r\n .70,\r\n .95\r\n );\r\n\r\n\r\n startMotion();\r\n\r\n\r\n gsapInstance.to(\r\n ribbon,\r\n {\r\n x:target,\r\n duration:\r\n reducedMotion.matches\r\n ? .01\r\n : duration,\r\n ease:'power3.inOut',\r\n overwrite:'auto',\r\n\r\n onUpdate(){\r\n\r\n currentX =\r\n readRibbonX();\r\n\r\n\r\n draggableInstance?.update?.(\r\n true\r\n );\r\n\r\n },\r\n\r\n onComplete(){\r\n\r\n currentX =\r\n target;\r\n\r\n\r\n draggableInstance?.update?.(\r\n true\r\n );\r\n\r\n\r\n endMotion();\r\n\r\n }\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n function initGsapDraggable(){\r\n\r\n gsapInstance =\r\n window.gsap;\r\n\r\n\r\n usingGsap =\r\n true;\r\n\r\n\r\n writeRibbonX(\r\n anchors[\r\n nearestIndex\r\n ]\r\n );\r\n\r\n\r\n const draggable =\r\n window.Draggable.create(\r\n ribbon,\r\n {\r\n type:'x',\r\n\r\n bounds:{\r\n minX,\r\n maxX\r\n },\r\n\r\n edgeResistance:.88,\r\n\r\n inertia:\r\n reducedMotion.matches\r\n ? false\r\n : true,\r\n\r\n allowNativeTouchScrolling:true,\r\n\r\n dragClickables:false,\r\n\r\n cursor:'grab',\r\n\r\n activeCursor:'grabbing',\r\n\r\n minimumMovement:3,\r\n\r\n snap:{\r\n x(\r\n endValue\r\n ){\r\n\r\n return nearestAnchorValue(\r\n endValue\r\n );\r\n\r\n }\r\n },\r\n\r\n onPress(){\r\n\r\n killGsapMotion();\r\n\r\n\r\n pointerMoved =\r\n false;\r\n\r\n\r\n pointerStartX =\r\n this.pointerX ||\r\n 0;\r\n\r\n\r\n pointerStartY =\r\n this.pointerY ||\r\n 0;\r\n\r\n\r\n root.dataset.laminaFocusMediaHold =\r\n 'true';\r\n\r\n\r\n viewport.classList.add(\r\n 'is-dragging'\r\n );\r\n\r\n\r\n startMotion();\r\n\r\n\r\n window.LaminaFocusDepth?.requestUpdate?.();\r\n\r\n },\r\n\r\n onDragStart(){\r\n\r\n pointerMoved =\r\n true;\r\n\r\n },\r\n\r\n onDrag(){\r\n\r\n currentX =\r\n this.x;\r\n\r\n\r\n const dx =\r\n Math.abs(\r\n (\r\n this.pointerX ||\r\n 0\r\n ) -\r\n pointerStartX\r\n );\r\n\r\n\r\n const dy =\r\n Math.abs(\r\n (\r\n this.pointerY ||\r\n 0\r\n ) -\r\n pointerStartY\r\n );\r\n\r\n\r\n if (\r\n dx >\r\n 6 ||\r\n dy >\r\n 6\r\n ){\r\n\r\n pointerMoved =\r\n true;\r\n\r\n }\r\n\r\n },\r\n\r\n onRelease(){\r\n\r\n viewport.classList.remove(\r\n 'is-dragging'\r\n );\r\n\r\n\r\n if (\r\n pointerMoved\r\n ){\r\n\r\n suppressClickUntil =\r\n performance.now() +\r\n 260;\r\n\r\n }\r\n\r\n\r\n if (\r\n reducedMotion.matches\r\n ){\r\n\r\n focusDoctorGsap(\r\n nearestAnchorIndex(\r\n this.x\r\n )\r\n );\r\n\r\n }\r\n\r\n },\r\n\r\n onThrowUpdate(){\r\n\r\n currentX =\r\n this.x;\r\n\r\n\r\n startMotion();\r\n\r\n },\r\n\r\n onThrowComplete(){\r\n\r\n currentX =\r\n this.x;\r\n\r\n\r\n const settledIndex =\r\n nearestAnchorIndex(\r\n currentX\r\n );\r\n\r\n\r\n const exact =\r\n anchors[\r\n settledIndex\r\n ];\r\n\r\n\r\n gsapInstance.set(\r\n ribbon,\r\n {\r\n x:exact\r\n }\r\n );\r\n\r\n\r\n currentX =\r\n exact;\r\n\r\n\r\n this.update(\r\n true\r\n );\r\n\r\n\r\n endMotion();\r\n\r\n }\r\n }\r\n )[\r\n 0\r\n ];\r\n\r\n\r\n draggableInstance =\r\n draggable;\r\n\r\n\r\n updateVisualState(\r\n true\r\n );\r\n\r\n }\r\n\r\n\r\n \/* =======================================================\r\n NATIVE FALLBACK ENGINE\r\n Used only if GSAP \/ plugins cannot load.\r\n ======================================================= *\/\r\n\r\n let fallbackDragging =\r\n false;\r\n\r\n\r\n let fallbackPointerId =\r\n null;\r\n\r\n\r\n let fallbackStartPointerX =\r\n 0;\r\n\r\n\r\n let fallbackStartPointerY =\r\n 0;\r\n\r\n\r\n let fallbackStartX =\r\n 0;\r\n\r\n\r\n let fallbackLastPointerX =\r\n 0;\r\n\r\n\r\n let fallbackLastTime =\r\n 0;\r\n\r\n\r\n let fallbackVelocity =\r\n 0;\r\n\r\n\r\n function stopFallbackTween(){\r\n\r\n cancelAnimationFrame(\r\n fallbackTweenFrame\r\n );\r\n\r\n\r\n fallbackTweenFrame =\r\n 0;\r\n\r\n }\r\n\r\n\r\n function animateFallbackTo(\r\n target,\r\n duration =\r\n 760\r\n ){\r\n\r\n stopFallbackTween();\r\n\r\n\r\n const start =\r\n currentX;\r\n\r\n\r\n const distance =\r\n target -\r\n start;\r\n\r\n\r\n const startTime =\r\n performance.now();\r\n\r\n\r\n startMotion();\r\n\r\n\r\n function frame(\r\n now\r\n ){\r\n\r\n const t =\r\n clamp(\r\n (\r\n now -\r\n startTime\r\n ) \/\r\n duration,\r\n 0,\r\n 1\r\n );\r\n\r\n\r\n const eased =\r\n t <\r\n .5\r\n ? 4 *\r\n t *\r\n t *\r\n t\r\n : 1 -\r\n Math.pow(\r\n -2 *\r\n t +\r\n 2,\r\n 3\r\n ) \/\r\n 2;\r\n\r\n\r\n writeRibbonX(\r\n start +\r\n distance *\r\n eased\r\n );\r\n\r\n\r\n if (\r\n t <\r\n 1\r\n ){\r\n\r\n fallbackTweenFrame =\r\n requestAnimationFrame(\r\n frame\r\n );\r\n\r\n }else{\r\n\r\n writeRibbonX(\r\n target\r\n );\r\n\r\n\r\n endMotion();\r\n\r\n }\r\n\r\n }\r\n\r\n\r\n fallbackTweenFrame =\r\n requestAnimationFrame(\r\n frame\r\n );\r\n\r\n }\r\n\r\n\r\n function fallbackFocusDoctor(\r\n index\r\n ){\r\n\r\n const safeIndex =\r\n clamp(\r\n index,\r\n 0,\r\n cards.length -\r\n 1\r\n );\r\n\r\n\r\n animateFallbackTo(\r\n anchors[\r\n safeIndex\r\n ],\r\n reducedMotion.matches\r\n ? 1\r\n : 780\r\n );\r\n\r\n }\r\n\r\n\r\n function resistedX(\r\n value\r\n ){\r\n\r\n if (\r\n value >\r\n maxX\r\n ){\r\n\r\n return (\r\n maxX +\r\n (\r\n value -\r\n maxX\r\n ) *\r\n .12\r\n );\r\n\r\n }\r\n\r\n\r\n if (\r\n value <\r\n minX\r\n ){\r\n\r\n return (\r\n minX +\r\n (\r\n value -\r\n minX\r\n ) *\r\n .12\r\n );\r\n\r\n }\r\n\r\n\r\n return value;\r\n\r\n }\r\n\r\n\r\n function initFallbackDrag(){\r\n\r\n viewport.addEventListener(\r\n 'pointerdown',\r\n event => {\r\n\r\n if (\r\n event.button !==\r\n undefined &&\r\n event.button !==\r\n 0\r\n ) return;\r\n\r\n\r\n if (\r\n event.target.closest(\r\n 'a,button'\r\n )\r\n ) return;\r\n\r\n\r\n stopFallbackTween();\r\n\r\n\r\n fallbackDragging =\r\n true;\r\n\r\n\r\n fallbackPointerId =\r\n event.pointerId;\r\n\r\n\r\n fallbackStartPointerX =\r\n event.clientX;\r\n\r\n\r\n fallbackStartPointerY =\r\n event.clientY;\r\n\r\n\r\n fallbackStartX =\r\n currentX;\r\n\r\n\r\n fallbackLastPointerX =\r\n event.clientX;\r\n\r\n\r\n fallbackLastTime =\r\n performance.now();\r\n\r\n\r\n fallbackVelocity =\r\n 0;\r\n\r\n\r\n pointerMoved =\r\n false;\r\n\r\n\r\n root.dataset.laminaFocusMediaHold =\r\n 'true';\r\n\r\n\r\n viewport.classList.add(\r\n 'is-dragging'\r\n );\r\n\r\n\r\n viewport.setPointerCapture?.(\r\n event.pointerId\r\n );\r\n\r\n\r\n startMotion();\r\n\r\n\r\n window.LaminaFocusDepth?.requestUpdate?.();\r\n\r\n }\r\n );\r\n\r\n\r\n viewport.addEventListener(\r\n 'pointermove',\r\n event => {\r\n\r\n if (\r\n !fallbackDragging ||\r\n event.pointerId !==\r\n fallbackPointerId\r\n ) return;\r\n\r\n\r\n const dx =\r\n event.clientX -\r\n fallbackStartPointerX;\r\n\r\n\r\n const dy =\r\n event.clientY -\r\n fallbackStartPointerY;\r\n\r\n\r\n if (\r\n !pointerMoved &&\r\n Math.abs(\r\n dy\r\n ) >\r\n Math.abs(\r\n dx\r\n ) +\r\n 5\r\n ){\r\n\r\n \/*\r\n Vertical gesture wins. Never trap page scroll.\r\n *\/\r\n fallbackDragging =\r\n false;\r\n\r\n\r\n viewport.classList.remove(\r\n 'is-dragging'\r\n );\r\n\r\n\r\n delete root.dataset.laminaFocusMediaHold;\r\n\r\n\r\n endMotion();\r\n\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n if (\r\n Math.abs(\r\n dx\r\n ) >\r\n 5\r\n ){\r\n\r\n pointerMoved =\r\n true;\r\n\r\n }\r\n\r\n\r\n if (\r\n !pointerMoved\r\n ) return;\r\n\r\n\r\n const now =\r\n performance.now();\r\n\r\n\r\n const dt =\r\n Math.max(\r\n 1,\r\n now -\r\n fallbackLastTime\r\n );\r\n\r\n\r\n fallbackVelocity =\r\n (\r\n event.clientX -\r\n fallbackLastPointerX\r\n ) \/\r\n dt;\r\n\r\n\r\n fallbackLastPointerX =\r\n event.clientX;\r\n\r\n\r\n fallbackLastTime =\r\n now;\r\n\r\n\r\n writeRibbonX(\r\n resistedX(\r\n fallbackStartX +\r\n dx\r\n )\r\n );\r\n\r\n },\r\n {\r\n passive:true\r\n }\r\n );\r\n\r\n\r\n function releaseFallback(\r\n event\r\n ){\r\n\r\n if (\r\n !fallbackDragging ||\r\n event.pointerId !==\r\n fallbackPointerId\r\n ) return;\r\n\r\n\r\n fallbackDragging =\r\n false;\r\n\r\n\r\n viewport.classList.remove(\r\n 'is-dragging'\r\n );\r\n\r\n\r\n viewport.releasePointerCapture?.(\r\n event.pointerId\r\n );\r\n\r\n\r\n if (\r\n pointerMoved\r\n ){\r\n\r\n suppressClickUntil =\r\n performance.now() +\r\n 260;\r\n\r\n }\r\n\r\n\r\n \/*\r\n Restrained momentum prediction.\r\n Heavy enough to feel physical; capped so small flicks do not\r\n shoot across all five doctors.\r\n *\/\r\n const projected =\r\n clamp(\r\n currentX +\r\n fallbackVelocity *\r\n (\r\n reducedMotion.matches\r\n ? 0\r\n : 260\r\n ),\r\n minX,\r\n maxX\r\n );\r\n\r\n\r\n const target =\r\n nearestAnchorValue(\r\n projected\r\n );\r\n\r\n\r\n animateFallbackTo(\r\n target,\r\n reducedMotion.matches\r\n ? 1\r\n : clamp(\r\n 620 +\r\n Math.abs(\r\n target -\r\n currentX\r\n ) *\r\n .28,\r\n 620,\r\n 1100\r\n )\r\n );\r\n\r\n }\r\n\r\n\r\n viewport.addEventListener(\r\n 'pointerup',\r\n releaseFallback\r\n );\r\n\r\n\r\n viewport.addEventListener(\r\n 'pointercancel',\r\n releaseFallback\r\n );\r\n\r\n }\r\n\r\n\r\n \/* =======================================================\r\n HORIZONTAL TRACKPAD SUPPORT\r\n Only horizontal-dominant gestures are handled.\r\n Normal vertical wheel movement is never intercepted.\r\n ======================================================= *\/\r\n\r\n viewport.addEventListener(\r\n 'wheel',\r\n event => {\r\n\r\n if (\r\n Math.abs(\r\n event.deltaX\r\n ) <=\r\n Math.abs(\r\n event.deltaY\r\n ) *\r\n 1.15\r\n ){\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n \/*\r\n This prevents only the horizontal browser pan.\r\n Vertical wheel scrolling remains untouched.\r\n *\/\r\n event.preventDefault();\r\n\r\n\r\n if (\r\n usingGsap\r\n ){\r\n\r\n killGsapMotion();\r\n\r\n }else{\r\n\r\n stopFallbackTween();\r\n\r\n }\r\n\r\n\r\n root.dataset.laminaFocusMediaHold =\r\n 'true';\r\n\r\n\r\n startMotion();\r\n\r\n\r\n const nextX =\r\n clamp(\r\n readRibbonX() -\r\n event.deltaX,\r\n minX,\r\n maxX\r\n );\r\n\r\n\r\n writeRibbonX(\r\n nextX\r\n );\r\n\r\n\r\n draggableInstance?.update?.(\r\n true\r\n );\r\n\r\n\r\n window.clearTimeout(\r\n wheelSettleTimer\r\n );\r\n\r\n\r\n wheelSettleTimer =\r\n window.setTimeout(\r\n () => {\r\n\r\n const targetIndex =\r\n nearestAnchorIndex(\r\n readRibbonX()\r\n );\r\n\r\n\r\n if (\r\n usingGsap\r\n ){\r\n\r\n focusDoctorGsap(\r\n targetIndex\r\n );\r\n\r\n }else{\r\n\r\n fallbackFocusDoctor(\r\n targetIndex\r\n );\r\n\r\n }\r\n\r\n },\r\n 110\r\n );\r\n\r\n },\r\n {\r\n passive:false\r\n }\r\n );\r\n\r\n\r\n \/* =======================================================\r\n CLICK-TO-FOCUS\r\n ======================================================= *\/\r\n\r\n cards.forEach(\r\n (\r\n card,\r\n index\r\n ) => {\r\n\r\n card.addEventListener(\r\n 'click',\r\n event => {\r\n\r\n if (\r\n event.target.closest(\r\n 'a,button'\r\n )\r\n ) return;\r\n\r\n\r\n if (\r\n performance.now() <\r\n suppressClickUntil\r\n ) return;\r\n\r\n\r\n if (\r\n usingGsap\r\n ){\r\n\r\n focusDoctorGsap(\r\n index\r\n );\r\n\r\n }else{\r\n\r\n fallbackFocusDoctor(\r\n index\r\n );\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n \/* =======================================================\r\n SIDE ARROWS \u2014 secondary navigation only\r\n ======================================================= *\/\r\n\r\n prevButton?.addEventListener(\r\n 'click',\r\n () => {\r\n\r\n const target =\r\n clamp(\r\n nearestIndex - 1,\r\n 0,\r\n cards.length - 1\r\n );\r\n\r\n\r\n if (\r\n usingGsap\r\n ){\r\n\r\n focusDoctorGsap(\r\n target\r\n );\r\n\r\n }else{\r\n\r\n fallbackFocusDoctor(\r\n target\r\n );\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n\r\n nextButton?.addEventListener(\r\n 'click',\r\n () => {\r\n\r\n const target =\r\n clamp(\r\n nearestIndex + 1,\r\n 0,\r\n cards.length - 1\r\n );\r\n\r\n\r\n if (\r\n usingGsap\r\n ){\r\n\r\n focusDoctorGsap(\r\n target\r\n );\r\n\r\n }else{\r\n\r\n fallbackFocusDoctor(\r\n target\r\n );\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n\r\n \/* =======================================================\r\n KEYBOARD\r\n ======================================================= *\/\r\n\r\n viewport.addEventListener(\r\n 'keydown',\r\n event => {\r\n\r\n let target =\r\n null;\r\n\r\n\r\n if (\r\n event.key ===\r\n 'ArrowRight'\r\n ){\r\n\r\n target =\r\n nearestIndex +\r\n 1;\r\n\r\n }else if(\r\n event.key ===\r\n 'ArrowLeft'\r\n ){\r\n\r\n target =\r\n nearestIndex -\r\n 1;\r\n\r\n }else if(\r\n event.key ===\r\n 'Home'\r\n ){\r\n\r\n target =\r\n 0;\r\n\r\n }else if(\r\n event.key ===\r\n 'End'\r\n ){\r\n\r\n target =\r\n cards.length -\r\n 1;\r\n\r\n }else{\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n event.preventDefault();\r\n\r\n\r\n const safe =\r\n clamp(\r\n target,\r\n 0,\r\n cards.length -\r\n 1\r\n );\r\n\r\n\r\n if (\r\n usingGsap\r\n ){\r\n\r\n focusDoctorGsap(\r\n safe\r\n );\r\n\r\n }else{\r\n\r\n fallbackFocusDoctor(\r\n safe\r\n );\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n\r\n \/* =======================================================\r\n PROFILE PLACEHOLDERS\r\n ======================================================= *\/\r\n\r\n [\r\n ...root.querySelectorAll(\r\n '[data-placeholder-link]'\r\n )\r\n ].forEach(\r\n link => {\r\n\r\n link.addEventListener(\r\n 'click',\r\n event => {\r\n\r\n if (\r\n link.getAttribute(\r\n 'href'\r\n ) ===\r\n '#'\r\n ){\r\n\r\n event.preventDefault();\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n \/* =======================================================\r\n APPROACH PRELOAD\r\n ======================================================= *\/\r\n\r\n if (\r\n 'IntersectionObserver' in window\r\n ){\r\n\r\n const preloadObserver =\r\n new IntersectionObserver(\r\n entries => {\r\n\r\n entries.forEach(\r\n entry => {\r\n\r\n if (\r\n !entry.isIntersecting\r\n ) return;\r\n\r\n\r\n cards\r\n .slice(\r\n 0,\r\n 4\r\n )\r\n .forEach(\r\n card => {\r\n\r\n const img =\r\n card.querySelector(\r\n 'img'\r\n );\r\n\r\n\r\n if (\r\n img &&\r\n img.loading ===\r\n 'lazy'\r\n ){\r\n\r\n img.loading =\r\n 'eager';\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n\r\n preloadObserver.disconnect();\r\n\r\n }\r\n );\r\n\r\n },\r\n {\r\n rootMargin:'900px 0px 900px 0px',\r\n threshold:0\r\n }\r\n );\r\n\r\n\r\n preloadObserver.observe(\r\n root\r\n );\r\n\r\n }\r\n\r\n\r\n \/* =======================================================\r\n RESIZE \/ BREAKPOINT RE-MEASURE\r\n Preserve current doctor identity.\r\n ======================================================= *\/\r\n\r\n let resizeTimer =\r\n null;\r\n\r\n\r\n window.addEventListener(\r\n 'resize',\r\n () => {\r\n\r\n window.clearTimeout(\r\n resizeTimer\r\n );\r\n\r\n\r\n resizeTimer =\r\n window.setTimeout(\r\n () => {\r\n\r\n if (\r\n usingGsap\r\n ){\r\n\r\n killGsapMotion();\r\n\r\n }else{\r\n\r\n stopFallbackTween();\r\n\r\n }\r\n\r\n\r\n applyPortraitPositions();\r\n\r\n\r\n measureGeometry(\r\n true\r\n );\r\n\r\n\r\n window.LaminaFocusDepth?.remeasure?.();\r\n\r\n },\r\n 130\r\n );\r\n\r\n },\r\n {\r\n passive:true\r\n }\r\n );\r\n\r\n\r\n \/* =======================================================\r\n INITIALIZE\r\n ======================================================= *\/\r\n\r\n async function init(){\r\n\r\n applyPortraitPositions();\r\n\r\n\r\n \/*\r\n Wait one frame so fonts \/ responsive layout have valid geometry.\r\n Intrinsic image dimensions already reserve space.\r\n *\/\r\n await new Promise(\r\n resolve =>\r\n requestAnimationFrame(\r\n () =>\r\n requestAnimationFrame(\r\n resolve\r\n )\r\n )\r\n );\r\n\r\n\r\n measureGeometry(\r\n false\r\n );\r\n\r\n\r\n updateVisualState(\r\n true\r\n );\r\n\r\n\r\n updateNavState();\r\n\r\n\r\n const gsapReady =\r\n await ensureKineticGsap();\r\n\r\n\r\n if (\r\n gsapReady\r\n ){\r\n\r\n initGsapDraggable();\r\n\r\n }else{\r\n\r\n usingGsap =\r\n false;\r\n\r\n\r\n initFallbackDrag();\r\n\r\n }\r\n\r\n\r\n \/*\r\n Keep the first doctor locked to its real editorial anchor.\r\n *\/\r\n if (\r\n usingGsap\r\n ){\r\n\r\n gsapInstance.set(\r\n ribbon,\r\n {\r\n x:anchors[0]\r\n }\r\n );\r\n\r\n\r\n draggableInstance?.update?.(\r\n true\r\n );\r\n\r\n }else{\r\n\r\n writeRibbonX(\r\n anchors[0]\r\n );\r\n\r\n }\r\n\r\n\r\n currentX =\r\n anchors[0];\r\n\r\n\r\n nearestIndex =\r\n 0;\r\n\r\n\r\n previousMotionX =\r\n currentX;\r\n\r\n\r\n updateVisualState(\r\n true\r\n );\r\n\r\n\r\n window.LaminaFocusDepth?.remeasure?.();\r\n\r\n }\r\n\r\n\r\n init();\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-555dc83 e-con-full e-flex e-con e-parent\" data-id=\"555dc83\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9660cb1 elementor-widget elementor-widget-html\" data-id=\"9660cb1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\r\nLAMINA CLINIC \u2014 SECTION 06\r\nTREATMENT PLANNING\r\nCOMPLETE REBUILD FROM ZERO\r\nCONCEPT: THE TREATMENT PATH TREE\r\nV9: WIDER TREE \/ LARGER CLINICAL MEDIA\r\n\r\nCore idea:\r\nONE ORGANIZED TREATMENT JOURNEY.\r\nTHE TREE DRAWS ITSELF INTO PLACE ON ENTRANCE.\r\n\r\nProduction note:\r\nMedia regions below are intentionally neutral placeholders.\r\nReplace only with Lamina-approved, anonymised clinical assets.\r\nNo borrowed clinic media, patient identifiers, active QR codes,\r\nfabricated clinical metrics, or fake software interfaces.\r\n========================================================= -->\r\n\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500&family=Manrope:wght@400;500;600&display=swap');\r\n\r\n#lamina-treatment-path-tree{\r\n --pt-ivory:#F7F2EA;\r\n --pt-ivory-2:#F3ECE8;\r\n --pt-ivory-3:#EEE7E7;\r\n --pt-stone:#E8E1E4;\r\n --pt-aubergine:#2B142F;\r\n --pt-plum:#5F2468;\r\n --pt-orchid:#94709A;\r\n --pt-lilac:#C5B2C8;\r\n --pt-champagne:#D8C4A1;\r\n --pt-line:rgba(95,36,104,.23);\r\n --pt-rule:rgba(43,20,47,.10);\r\n --pt-ease:cubic-bezier(.16,.70,.18,1);\r\n\r\n \/*\r\n Shared geometric stage.\r\n Intro, selector and Tree now resolve around the same true center axis.\r\n *\/\r\n --pt-stage-width:1480px;\r\n\r\n position:relative;\r\n width:100%;\r\n overflow:hidden;\r\n\r\n background:var(--pt-ivory);\r\n color:var(--pt-aubergine);\r\n\r\n font-family:\"Manrope\",system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;\r\n\r\n -webkit-tap-highlight-color:rgba(95,36,104,.08);\r\n}\r\n\r\n#lamina-treatment-path-tree *,\r\n#lamina-treatment-path-tree *::before,\r\n#lamina-treatment-path-tree *::after{\r\n box-sizing:border-box;\r\n}\r\n\r\n#lamina-treatment-path-tree ::selection{\r\n background:var(--pt-plum);\r\n color:var(--pt-ivory);\r\n}\r\n\r\n\/* =========================================================\r\n PERMANENT LAMINA \/ ELEMENTOR COLOR PROTECTION\r\n Brand-sensitive interactive states only.\r\n ========================================================= *\/\r\n\r\n#lamina-treatment-path-tree a,\r\n#lamina-treatment-path-tree a:link,\r\n#lamina-treatment-path-tree a:visited,\r\n#lamina-treatment-path-tree a:hover,\r\n#lamina-treatment-path-tree a:focus,\r\n#lamina-treatment-path-tree a:focus-visible,\r\n#lamina-treatment-path-tree a:active,\r\n#lamina-treatment-path-tree button,\r\n#lamina-treatment-path-tree button:hover,\r\n#lamina-treatment-path-tree button:focus,\r\n#lamina-treatment-path-tree button:focus-visible,\r\n#lamina-treatment-path-tree button:active{\r\n color:var(--pt-aubergine) !important;\r\n text-decoration-color:var(--pt-plum) !important;\r\n}\r\n\r\n#lamina-treatment-path-tree .pt__path,\r\n#lamina-treatment-path-tree .pt__path:hover,\r\n#lamina-treatment-path-tree .pt__path:focus,\r\n#lamina-treatment-path-tree .pt__path:focus-visible,\r\n#lamina-treatment-path-tree .pt__path:active{\r\n background-color:transparent !important;\r\n border-color:transparent !important;\r\n box-shadow:none !important;\r\n}\r\n\r\n#lamina-treatment-path-tree .pt__path[aria-pressed=\"false\"],\r\n#lamina-treatment-path-tree .pt__path[aria-pressed=\"false\"]:hover,\r\n#lamina-treatment-path-tree .pt__path[aria-pressed=\"false\"]:focus,\r\n#lamina-treatment-path-tree .pt__path[aria-pressed=\"false\"]:focus-visible,\r\n#lamina-treatment-path-tree .pt__path[aria-pressed=\"false\"]:active{\r\n color:var(--pt-orchid) !important;\r\n}\r\n\r\n#lamina-treatment-path-tree .pt__path[aria-pressed=\"true\"],\r\n#lamina-treatment-path-tree .pt__path[aria-pressed=\"true\"]:hover,\r\n#lamina-treatment-path-tree .pt__path[aria-pressed=\"true\"]:focus,\r\n#lamina-treatment-path-tree .pt__path[aria-pressed=\"true\"]:focus-visible,\r\n#lamina-treatment-path-tree .pt__path[aria-pressed=\"true\"]:active{\r\n color:var(--pt-aubergine) !important;\r\n}\r\n\r\n#lamina-treatment-path-tree .pt__path::after{\r\n background-color:var(--pt-plum) !important;\r\n}\r\n\r\n#lamina-treatment-path-tree .pt__cta,\r\n#lamina-treatment-path-tree .pt__cta:link,\r\n#lamina-treatment-path-tree .pt__cta:visited,\r\n#lamina-treatment-path-tree .pt__cta:hover,\r\n#lamina-treatment-path-tree .pt__cta:focus,\r\n#lamina-treatment-path-tree .pt__cta:focus-visible,\r\n#lamina-treatment-path-tree .pt__cta:active{\r\n color:var(--pt-aubergine) !important;\r\n background:transparent !important;\r\n border-color:transparent !important;\r\n box-shadow:none !important;\r\n}\r\n\r\n#lamina-treatment-path-tree .pt__path:focus-visible,\r\n#lamina-treatment-path-tree .pt__cta:focus-visible{\r\n outline-color:rgba(95,36,104,.44) !important;\r\n}\r\n\r\n\/* =========================================================\r\n SECTION \/ INTRO\r\n Normal document flow. No sticky\/pinning.\r\n ========================================================= *\/\r\n\r\n.pt__inner{\r\n width:min(100%,1680px);\r\n margin-inline:auto;\r\n\r\n padding:\r\n clamp(72px,8vh,102px)\r\n clamp(22px,3vw,58px)\r\n clamp(96px,10vh,136px);\r\n}\r\n\r\n.pt__intro{\r\n width:min(100%,var(--pt-stage-width));\r\n margin-inline:auto;\r\n\r\n display:grid;\r\n grid-template-columns:repeat(2,minmax(0,1fr));\r\n gap:0;\r\n align-items:center;\r\n}\r\n\r\n.pt__intro-left,\r\n.pt__intro-right{\r\n min-width:0;\r\n width:100%;\r\n}\r\n\r\n\/*\r\n Optical centering:\r\n each intro block is centered inside one half of the exact same stage\r\n used by the Tree. This removes the previous left-heavy composition.\r\n*\/\r\n.pt__intro-left{\r\n max-width:590px;\r\n justify-self:center;\r\n}\r\n\r\n.pt__intro-right{\r\n max-width:470px;\r\n justify-self:center;\r\n align-self:center;\r\n padding-inline-start:0;\r\n}\r\n\r\n.pt__eyebrow{\r\n margin:0 0 18px;\r\n\r\n color:rgba(95,36,104,.84);\r\n\r\n font-size:clamp(11px,.72vw,13px);\r\n line-height:1.2;\r\n font-weight:600;\r\n letter-spacing:.17em;\r\n text-transform:uppercase;\r\n}\r\n\r\n.pt__title{\r\n margin:0;\r\n\r\n max-width:11.4ch;\r\n overflow:visible;\r\n\r\n color:var(--pt-aubergine);\r\n\r\n font-family:\"Cormorant Garamond\",Georgia,serif;\r\n font-size:clamp(62px,5vw,88px);\r\n line-height:1;\r\n font-weight:400;\r\n letter-spacing:-.046em;\r\n}\r\n\r\n.pt__title-mask{\r\n display:block;\r\n overflow:visible;\r\n padding-bottom:.085em;\r\n}\r\n\r\n.pt__title-mask + .pt__title-mask{\r\n margin-top:-.055em;\r\n}\r\n\r\n.pt__title-line{\r\n display:block;\r\n width:max-content;\r\n max-width:100%;\r\n\r\n line-height:.90;\r\n\r\n will-change:transform, opacity, filter;\r\n}\r\n\r\n.pt__title-line--accent{\r\n margin-top:.045em;\r\n\r\n padding-inline-end:.05em;\r\n padding-bottom:.08em;\r\n\r\n color:#94709A;\r\n\r\n font-style:italic;\r\n font-weight:400;\r\n letter-spacing:-.038em;\r\n line-height:.92;\r\n}\r\n\r\n.pt__support{\r\n margin:0;\r\n\r\n max-width:36ch;\r\n\r\n color:rgba(43,20,47,.64);\r\n\r\n font-size:clamp(16px,1.02vw,18px);\r\n line-height:1.76;\r\n}\r\n\r\n\/* =========================================================\r\n SELECTOR \u2014 BETWEEN INTRO AND TREE\r\n ========================================================= *\/\r\n\r\n.pt__selector-wrap{\r\n width:min(100%,var(--pt-stage-width));\r\n margin-inline:auto;\r\n\r\n display:flex;\r\n justify-content:center;\r\n\r\n margin-top:clamp(36px,4.8vh,58px);\r\n}\r\n\r\n.pt__selector{\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n gap:clamp(52px,7vw,106px);\r\n\r\n padding-inline:10px;\r\n}\r\n\r\n.pt__path{\r\n position:relative;\r\n\r\n display:inline-flex;\r\n align-items:center;\r\n justify-content:center;\r\n\r\n min-height:44px;\r\n padding:0 0 10px;\r\n\r\n border:0;\r\n border-radius:0;\r\n\r\n background:transparent;\r\n color:var(--pt-orchid);\r\n\r\n font-size:clamp(12px,.82vw,14px);\r\n line-height:1.2;\r\n font-weight:600;\r\n letter-spacing:.11em;\r\n text-transform:uppercase;\r\n\r\n cursor:pointer;\r\n\r\n transition:\r\n color .34s ease,\r\n opacity .34s ease;\r\n}\r\n\r\n.pt__path::after{\r\n content:\"\";\r\n\r\n position:absolute;\r\n\r\n inset-inline-start:50%;\r\n inset-block-end:0;\r\n\r\n width:clamp(28px,2.8vw,42px);\r\n height:1px;\r\n\r\n background:var(--pt-plum);\r\n\r\n transform:\r\n translateX(-50%)\r\n scaleX(0);\r\n\r\n transform-origin:50% 50%;\r\n\r\n transition:\r\n transform .50s var(--pt-ease);\r\n}\r\n\r\n[dir=\"rtl\"] .pt__path::after{\r\n transform:\r\n translateX(50%)\r\n scaleX(0);\r\n}\r\n\r\n.pt__path[aria-pressed=\"true\"]::after{\r\n transform:\r\n translateX(-50%)\r\n scaleX(1);\r\n}\r\n\r\n[dir=\"rtl\"] .pt__path[aria-pressed=\"true\"]::after{\r\n transform:\r\n translateX(50%)\r\n scaleX(1);\r\n}\r\n\r\n.pt__path:focus-visible{\r\n outline:1px solid rgba(95,36,104,.38);\r\n outline-offset:6px;\r\n}\r\n\r\n\/* =========================================================\r\n TREE\r\n ========================================================= *\/\r\n\r\n.pt__tree{\r\n position:relative;\r\n\r\n width:min(100%,var(--pt-stage-width));\r\n margin:\r\n clamp(56px,6.6vh,82px)\r\n auto\r\n 0;\r\n\r\n padding:\r\n 18px\r\n 0\r\n 8px;\r\n}\r\n\r\n.pt__tree::before{\r\n content:\"\";\r\n\r\n position:absolute;\r\n inset:\r\n 0\r\n 0\r\n auto\r\n 0;\r\n\r\n height:1px;\r\n background:linear-gradient(\r\n 90deg,\r\n rgba(95,36,104,0),\r\n rgba(95,36,104,.10) 18%,\r\n rgba(95,36,104,.06) 82%,\r\n rgba(95,36,104,0)\r\n );\r\n\r\n pointer-events:none;\r\n}\r\n\r\n\/* Desktop central spine. *\/\r\n.pt__spine{\r\n position:absolute;\r\n z-index:1;\r\n\r\n inset-block:18px 18px;\r\n inset-inline-start:50%;\r\n\r\n width:1px;\r\n margin-inline-start:-.5px;\r\n\r\n background:rgba(95,36,104,.14);\r\n\r\n transform-origin:50% 0;\r\n pointer-events:none;\r\n will-change:transform, opacity;\r\n overflow:visible;\r\n}\r\n\r\n.pt__spine::after{\r\n content:\"\";\r\n\r\n position:absolute;\r\n inset:0;\r\n\r\n background:linear-gradient(\r\n 180deg,\r\n rgba(216,196,161,.96) 0%,\r\n rgba(149,112,154,.92) 32%,\r\n rgba(95,36,104,.98) 100%\r\n );\r\n\r\n transform-origin:50% 0;\r\n transform:scaleY(var(--pt-spine-progress,0));\r\n\r\n box-shadow:\r\n 0 0 10px rgba(149,112,154,.18),\r\n 0 0 16px rgba(216,196,161,.08);\r\n\r\n will-change:transform;\r\n}\r\n\r\n.pt__step{\r\n --pt-branch-length:98px;\r\n\r\n position:relative;\r\n z-index:2;\r\n\r\n display:grid;\r\n grid-template-columns:minmax(0,1fr) 128px minmax(0,1fr);\r\n align-items:center;\r\n\r\n min-height:clamp(188px,22vh,236px);\r\n\r\n isolation:isolate;\r\n}\r\n\r\n.pt__step + .pt__step{\r\n margin-top:clamp(22px,3vh,34px);\r\n}\r\n\r\n.pt__step--visual{\r\n min-height:clamp(320px,36vh,410px);\r\n}\r\n\r\n.pt__step-content{\r\n position:relative;\r\n z-index:3;\r\n\r\n width:min(100%,540px);\r\n\r\n padding-block:18px;\r\n\r\n transition:\r\n opacity .28s ease,\r\n transform .58s var(--pt-ease),\r\n filter .52s ease;\r\n will-change:transform, opacity, filter;\r\n}\r\n\r\n.pt__step--left .pt__step-content{\r\n grid-column:1;\r\n justify-self:end;\r\n\r\n padding-inline-end:clamp(20px,2.2vw,38px);\r\n\r\n text-align:start;\r\n}\r\n\r\n.pt__step--right .pt__step-content{\r\n grid-column:3;\r\n justify-self:start;\r\n\r\n padding-inline-start:clamp(20px,2.2vw,38px);\r\n\r\n text-align:start;\r\n}\r\n\r\n\/* Straight branch. *\/\r\n.pt__branch{\r\n position:absolute;\r\n z-index:2;\r\n\r\n inset-block-start:50%;\r\n\r\n width:var(--pt-branch-length);\r\n height:1px;\r\n\r\n background:var(--pt-line);\r\n\r\n transform-origin:0 50%;\r\n pointer-events:none;\r\n}\r\n\r\n.pt__step--left .pt__branch{\r\n inset-inline-end:50%;\r\n\r\n transform-origin:100% 50%;\r\n}\r\n\r\n.pt__step--right .pt__branch{\r\n inset-inline-start:50%;\r\n\r\n transform-origin:0 50%;\r\n}\r\n\r\n\/* Tiny node. *\/\r\n.pt__node{\r\n position:absolute;\r\n z-index:4;\r\n\r\n inset-inline-start:50%;\r\n inset-block-start:50%;\r\n\r\n width:8px;\r\n height:8px;\r\n\r\n border:\r\n 1px solid rgba(95,36,104,.56);\r\n border-radius:50%;\r\n\r\n background:var(--pt-ivory);\r\n\r\n transform:translate(-50%,-50%);\r\n\r\n box-shadow:\r\n 0 0 0 3px rgba(247,242,234,.92);\r\n\r\n pointer-events:none;\r\n}\r\n\r\n[dir=\"rtl\"] .pt__node{\r\n transform:translate(50%,-50%);\r\n}\r\n\r\n.pt__branch,\r\n.pt__node,\r\n.pt__media,\r\n.pt__share-thumb{\r\n transition:\r\n opacity .34s ease,\r\n filter .52s ease,\r\n border-color .34s ease,\r\n box-shadow .42s ease,\r\n background-color .34s ease;\r\n}\r\n\r\n.pt__step:hover .pt__branch,\r\n.pt__step:focus-within .pt__branch{\r\n background:rgba(95,36,104,.34);\r\n}\r\n\r\n.pt__step:hover .pt__node,\r\n.pt__step:focus-within .pt__node{\r\n background:var(--pt-plum);\r\n border-color:var(--pt-plum);\r\n\r\n box-shadow:\r\n 0 0 0 3px rgba(247,242,234,.96),\r\n 0 0 0 5px rgba(95,36,104,.10);\r\n}\r\n\r\n.pt__step:hover .pt__media,\r\n.pt__step:hover .pt__share-thumb,\r\n.pt__step:focus-within .pt__media,\r\n.pt__step:focus-within .pt__share-thumb{\r\n border-color:rgba(95,36,104,.12);\r\n box-shadow:0 20px 48px rgba(43,20,47,.042);\r\n}\r\n\r\n.pt__step:hover,\r\n.pt__step:focus-within{\r\n --pt-passed-blur:0px !important;\r\n --pt-passed-opacity:1 !important;\r\n}\r\n\r\n\/* Mobile segmented spine support; hidden on desktop. *\/\r\n.pt__mobile-spine{\r\n display:none;\r\n}\r\n\r\n\/* =========================================================\r\n STEP TYPOGRAPHY\r\n ========================================================= *\/\r\n\r\n.pt__step-kicker{\r\n display:block;\r\n\r\n color:rgba(95,36,104,.72);\r\n\r\n font-size:clamp(10.5px,.68vw,12px);\r\n line-height:1.2;\r\n font-weight:600;\r\n letter-spacing:.14em;\r\n text-transform:uppercase;\r\n}\r\n\r\n.pt__step-title{\r\n margin:10px 0 0;\r\n\r\n max-width:12.8ch;\r\n\r\n color:var(--pt-aubergine);\r\n\r\n font-family:\"Cormorant Garamond\",Georgia,serif;\r\n font-size:clamp(30px,2.5vw,42px);\r\n line-height:.98;\r\n font-weight:500;\r\n letter-spacing:-.026em;\r\n}\r\n\r\n.pt__step-copy{\r\n margin:13px 0 0;\r\n\r\n max-width:36ch;\r\n\r\n color:rgba(43,20,47,.61);\r\n\r\n font-size:clamp(13.5px,.86vw,15px);\r\n line-height:1.60;\r\n}\r\n\r\n\/* =========================================================\r\n MEDIA \u2014 only where the story needs it\r\n ========================================================= *\/\r\n\r\n.pt__media{\r\n position:relative;\r\n\r\n overflow:hidden;\r\n\r\n margin-top:18px;\r\n\r\n border:\r\n 1px solid rgba(43,20,47,.07);\r\n border-radius:10px;\r\n\r\n background:\r\n linear-gradient(\r\n 145deg,\r\n rgba(232,225,228,.74),\r\n rgba(247,242,234,.94)\r\n );\r\n\r\n box-shadow:\r\n 0 14px 44px rgba(43,20,47,.026);\r\n}\r\n\r\n.pt__media::before{\r\n content:\"\";\r\n\r\n position:absolute;\r\n\r\n inset:11%;\r\n\r\n border:\r\n 1px solid rgba(95,36,104,.085);\r\n}\r\n\r\n\r\n.pt__share-media{\r\n display:grid;\r\n grid-template-columns:repeat(2,minmax(0,1fr));\r\n gap:8px;\r\n\r\n margin-top:16px;\r\n}\r\n\r\n.pt__share-thumb{\r\n position:relative;\r\n\r\n aspect-ratio:4 \/ 3;\r\n\r\n overflow:hidden;\r\n\r\n border:\r\n 1px solid rgba(43,20,47,.07);\r\n border-radius:9px;\r\n\r\n background:\r\n linear-gradient(\r\n 145deg,\r\n rgba(232,225,228,.78),\r\n rgba(247,242,234,.94)\r\n );\r\n}\r\n\r\n.pt__share-thumb::before{\r\n content:\"\";\r\n\r\n position:absolute;\r\n\r\n inset:14%;\r\n\r\n border:\r\n 1px solid rgba(95,36,104,.08);\r\n}\r\n\r\n\r\n.pt__plan-media{\r\n min-height:260px;\r\n}\r\n\r\n.pt__visual-media{\r\n min-height:385px;\r\n\r\n background:\r\n linear-gradient(\r\n 145deg,\r\n rgba(197,178,200,.20),\r\n rgba(247,242,234,.72)\r\n );\r\n}\r\n\r\n.pt__visual-media::after{\r\n content:\"\";\r\n\r\n position:absolute;\r\n\r\n inset:\r\n 21%\r\n 18%;\r\n\r\n border:\r\n 1px solid rgba(43,20,47,.075);\r\n}\r\n\r\n\/* =========================================================\r\n APPROVED LAMINA MEDIA ASSETS\r\n Dental uses *.1 files; Hair Restoration uses straight-number files.\r\n Both pathway assets stay mounted so switching is immediate.\r\n ========================================================= *\/\r\n\r\n.pt__asset{\r\n position:absolute;\r\n z-index:1;\r\n inset:0;\r\n width:100%;\r\n height:100%;\r\n display:block;\r\n object-fit:cover;\r\n object-position:center;\r\n opacity:0;\r\n transform:scale(1.002);\r\n transition:opacity .34s ease;\r\n}\r\n\r\n#lamina-treatment-path-tree[data-active-path=\"dental\"]\r\n[data-path-media=\"dental\"],\r\n#lamina-treatment-path-tree[data-active-path=\"hair\"]\r\n[data-path-media=\"hair\"]{\r\n opacity:1;\r\n}\r\n\r\n.pt__share-thumb::before,\r\n.pt__media::before,\r\n.pt__visual-media::after{\r\n z-index:2;\r\n pointer-events:none;\r\n}\r\n\r\n\r\n\/* Step 03 is the largest visual moment. *\/\r\n.pt__step--visual .pt__step-content{\r\n width:min(100%,650px);\r\n}\r\n\r\n.pt__step--visual .pt__step-title{\r\n max-width:13.5ch;\r\n}\r\n\r\n\/* Step 04 is typography-led. *\/\r\n.pt__step--confirm .pt__step-content{\r\n padding-block:28px;\r\n}\r\n\r\n.pt__step--confirm .pt__step-title{\r\n max-width:12.8ch;\r\n font-size:clamp(32px,2.55vw,44px);\r\n}\r\n\r\n\/* =========================================================\r\n BELOW TREE \u2014 CLARIFICATION \/ CTA\r\n ========================================================= *\/\r\n\r\n.pt__closing{\r\n width:min(100%,1180px);\r\n margin:\r\n clamp(58px,7vh,84px)\r\n auto\r\n 0;\r\n\r\n padding-top:24px;\r\n\r\n border-top:\r\n 1px solid var(--pt-rule);\r\n\r\n display:grid;\r\n grid-template-columns:minmax(0,.68fr) minmax(220px,.32fr);\r\n gap:clamp(32px,5vw,72px);\r\n align-items:start;\r\n}\r\n\r\n.pt__clarification{\r\n margin:0;\r\n\r\n max-width:64ch;\r\n\r\n color:rgba(43,20,47,.56);\r\n\r\n font-size:clamp(12.5px,.78vw,13px);\r\n line-height:1.62;\r\n}\r\n\r\n.pt__cta-wrap{\r\n text-align:end;\r\n}\r\n\r\n.pt__cta{\r\n position:relative;\r\n\r\n display:inline-flex;\r\n align-items:center;\r\n gap:10px;\r\n\r\n min-height:44px;\r\n padding:4px 0;\r\n\r\n color:var(--pt-aubergine);\r\n\r\n font-size:clamp(11px,.74vw,12px);\r\n line-height:1.2;\r\n font-weight:600;\r\n letter-spacing:.10em;\r\n text-transform:uppercase;\r\n text-decoration:none;\r\n}\r\n\r\n.pt__cta::after{\r\n content:\"\";\r\n\r\n position:absolute;\r\n\r\n inset-inline:0;\r\n inset-block-end:2px;\r\n\r\n height:1px;\r\n\r\n background:rgba(95,36,104,.44);\r\n\r\n transform:scaleX(.52);\r\n transform-origin:0 50%;\r\n\r\n transition:\r\n transform .52s var(--pt-ease),\r\n background .36s ease;\r\n}\r\n\r\n[dir=\"rtl\"] .pt__cta::after{\r\n transform-origin:100% 50%;\r\n}\r\n\r\n.pt__cta:hover::after,\r\n.pt__cta:focus-visible::after{\r\n transform:scaleX(1);\r\n background:var(--pt-plum);\r\n}\r\n\r\n.pt__cta:focus-visible{\r\n outline:1px solid rgba(95,36,104,.38);\r\n outline-offset:5px;\r\n}\r\n\r\n\/* =========================================================\r\n PATH SWITCH\r\n Skeleton stays. Only content\/media cross-transition.\r\n ========================================================= *\/\r\n\r\n.pt__dynamic{\r\n transition:\r\n opacity .22s ease,\r\n transform .48s var(--pt-ease),\r\n clip-path .48s var(--pt-ease);\r\n}\r\n\r\n#lamina-treatment-path-tree.is-path-switching .pt__dynamic{\r\n opacity:.12;\r\n transform:translate3d(0,4px,0);\r\n}\r\n\r\n#lamina-treatment-path-tree.is-path-switching .pt__media,\r\n#lamina-treatment-path-tree.is-path-switching .pt__share-media{\r\n clip-path:inset(5% 0 0 0);\r\n}\r\n\r\n\/* =========================================================\r\n DESKTOP SIGNATURE ENTRANCE\r\n The tree draws once. Then complete stillness.\r\n ========================================================= *\/\r\n\r\n\/* Intro *\/\r\n#lamina-treatment-path-tree.has-desktop-entry .pt__eyebrow{\r\n opacity:0;\r\n transform:translate3d(0,10px,0);\r\n --pt-entry-blur:3px;\r\n}\r\n\r\n#lamina-treatment-path-tree.has-desktop-entry .pt__title-line{\r\n opacity:0;\r\n transform:translate3d(0,104%,0);\r\n --pt-entry-blur:4.5px;\r\n}\r\n\r\n#lamina-treatment-path-tree.has-desktop-entry .pt__support,\r\n#lamina-treatment-path-tree.has-desktop-entry .pt__selector-wrap{\r\n opacity:0;\r\n transform:translate3d(0,12px,0);\r\n --pt-entry-blur:4px;\r\n}\r\n\r\n\/* Tree skeleton\/content *\/\r\n#lamina-treatment-path-tree.has-desktop-entry .pt__spine{\r\n opacity:.28;\r\n transform:scaleY(0);\r\n}\r\n\r\n#lamina-treatment-path-tree.has-desktop-entry .pt__spine::after{\r\n opacity:0;\r\n}\r\n\r\n#lamina-treatment-path-tree.has-desktop-entry .pt__branch{\r\n opacity:.25;\r\n transform:scaleX(0);\r\n}\r\n\r\n#lamina-treatment-path-tree.has-desktop-entry .pt__node{\r\n opacity:0;\r\n transform:\r\n translate(-50%,-50%)\r\n scale(.56);\r\n filter:blur(1.2px);\r\n}\r\n\r\n[dir=\"rtl\"] #lamina-treatment-path-tree.has-desktop-entry .pt__node{\r\n transform:\r\n translate(50%,-50%)\r\n scale(.56);\r\n}\r\n\r\n#lamina-treatment-path-tree.has-desktop-entry .pt__step-content{\r\n opacity:0;\r\n transform:translate3d(0,14px,0);\r\n filter:blur(4px);\r\n}\r\n\r\n#lamina-treatment-path-tree.has-desktop-entry .pt__media,\r\n#lamina-treatment-path-tree.has-desktop-entry .pt__share-media{\r\n clip-path:inset(10% 0 10% 0);\r\n opacity:.26;\r\n filter:blur(4.5px);\r\n}\r\n\r\n\/* Intro entrance *\/\r\n#lamina-treatment-path-tree.has-desktop-entry.is-desktop-entered .pt__eyebrow{\r\n opacity:1;\r\n transform:none;\r\n --pt-entry-blur:0px;\r\n\r\n transition:\r\n opacity .50s var(--pt-ease) .03s,\r\n transform .58s var(--pt-ease) .03s,\r\n filter .54s ease .03s;\r\n}\r\n\r\n#lamina-treatment-path-tree.has-desktop-entry.is-desktop-entered .pt__title-line{\r\n opacity:1;\r\n transform:none;\r\n --pt-entry-blur:0px;\r\n\r\n transition:\r\n opacity .70s var(--pt-ease),\r\n transform .86s cubic-bezier(.12,.82,.18,1),\r\n filter .60s ease;\r\n}\r\n\r\n#lamina-treatment-path-tree.has-desktop-entry.is-desktop-entered\r\n.pt__title-mask:nth-child(1) .pt__title-line{\r\n transition-delay:.06s;\r\n}\r\n\r\n#lamina-treatment-path-tree.has-desktop-entry.is-desktop-entered\r\n.pt__title-mask:nth-child(2) .pt__title-line{\r\n transition-delay:.16s;\r\n}\r\n\r\n#lamina-treatment-path-tree.has-desktop-entry.is-desktop-entered .pt__support{\r\n opacity:1;\r\n transform:none;\r\n --pt-entry-blur:0px;\r\n\r\n transition:\r\n opacity .62s var(--pt-ease) .22s,\r\n transform .66s var(--pt-ease) .22s,\r\n filter .62s ease .22s;\r\n}\r\n\r\n#lamina-treatment-path-tree.has-desktop-entry.is-desktop-entered .pt__selector-wrap{\r\n opacity:1;\r\n transform:none;\r\n --pt-entry-blur:0px;\r\n\r\n transition:\r\n opacity .60s var(--pt-ease) .28s,\r\n transform .64s var(--pt-ease) .28s,\r\n filter .58s ease .28s;\r\n}\r\n\r\n\/* Spine *\/\r\n#lamina-treatment-path-tree.has-desktop-entry.is-desktop-entered .pt__spine{\r\n opacity:1;\r\n transform:scaleY(1);\r\n\r\n transition:\r\n transform 1.00s cubic-bezier(.18,.82,.20,1) .36s,\r\n opacity .40s ease .36s;\r\n}\r\n\r\n#lamina-treatment-path-tree.has-desktop-entry.is-desktop-entered .pt__spine::after{\r\n opacity:1;\r\n transition:\r\n opacity .44s ease .72s;\r\n}\r\n\r\n\/* Branch \/ node \/ content timing. *\/\r\n#lamina-treatment-path-tree.has-desktop-entry.is-desktop-entered .pt__step{\r\n --pt-enter-delay:.54s;\r\n}\r\n\r\n#lamina-treatment-path-tree.has-desktop-entry.is-desktop-entered .pt__step:nth-of-type(2){\r\n --pt-enter-delay:.70s;\r\n}\r\n\r\n#lamina-treatment-path-tree.has-desktop-entry.is-desktop-entered .pt__step:nth-of-type(3){\r\n --pt-enter-delay:.86s;\r\n}\r\n\r\n#lamina-treatment-path-tree.has-desktop-entry.is-desktop-entered .pt__step:nth-of-type(4){\r\n --pt-enter-delay:1.02s;\r\n}\r\n\r\n#lamina-treatment-path-tree.has-desktop-entry.is-desktop-entered .pt__branch{\r\n opacity:1;\r\n transform:scaleX(1);\r\n\r\n transition:\r\n transform .46s cubic-bezier(.16,.78,.18,1)\r\n var(--pt-enter-delay),\r\n opacity .34s ease\r\n var(--pt-enter-delay);\r\n}\r\n\r\n#lamina-treatment-path-tree.has-desktop-entry.is-desktop-entered .pt__node{\r\n opacity:1;\r\n transform:\r\n translate(-50%,-50%)\r\n scale(1);\r\n filter:blur(0);\r\n\r\n transition:\r\n opacity .34s ease\r\n calc(var(--pt-enter-delay) + .08s),\r\n transform .42s cubic-bezier(.18,.84,.18,1)\r\n calc(var(--pt-enter-delay) + .08s),\r\n filter .34s ease\r\n calc(var(--pt-enter-delay) + .08s);\r\n}\r\n\r\n[dir=\"rtl\"] #lamina-treatment-path-tree.has-desktop-entry.is-desktop-entered .pt__node{\r\n transform:\r\n translate(50%,-50%)\r\n scale(1);\r\n}\r\n\r\n#lamina-treatment-path-tree.has-desktop-entry.is-desktop-entered .pt__step-content{\r\n opacity:1;\r\n transform:none;\r\n filter:blur(0);\r\n\r\n transition:\r\n opacity .60s var(--pt-ease)\r\n calc(var(--pt-enter-delay) + .14s),\r\n transform .68s var(--pt-ease)\r\n calc(var(--pt-enter-delay) + .14s),\r\n filter .56s ease\r\n calc(var(--pt-enter-delay) + .14s);\r\n}\r\n\r\n#lamina-treatment-path-tree.has-desktop-entry.is-desktop-entered .pt__media,\r\n#lamina-treatment-path-tree.has-desktop-entry.is-desktop-entered .pt__share-media{\r\n clip-path:inset(0);\r\n opacity:1;\r\n filter:blur(0);\r\n\r\n transition:\r\n clip-path .72s var(--pt-ease)\r\n calc(var(--pt-enter-delay) + .18s),\r\n opacity .48s ease\r\n calc(var(--pt-enter-delay) + .18s),\r\n filter .56s ease\r\n calc(var(--pt-enter-delay) + .18s);\r\n}\r\n\r\n\/*\r\n JS removes has-desktop-entry after ~2.25s.\r\n No drift, parallax, pulse or breathing remains.\r\n*\/\r\n\r\n\/* =========================================================\r\n TABLET\r\n ========================================================= *\/\r\n\r\n@media (min-width:768px) and (max-width:1099px){\r\n\r\n .pt__inner{\r\n padding-block:72px 104px;\r\n }\r\n\r\n .pt__intro{\r\n width:min(100%,var(--pt-stage-width));\r\n grid-template-columns:repeat(2,minmax(0,1fr));\r\n gap:0;\r\n align-items:center;\r\n }\r\n\r\n .pt__intro-left{\r\n max-width:500px;\r\n justify-self:center;\r\n }\r\n\r\n .pt__intro-right{\r\n max-width:400px;\r\n justify-self:center;\r\n align-self:center;\r\n padding-inline-start:0;\r\n }\r\n\r\n .pt__tree{\r\n width:min(100%,1040px);\r\n margin-top:58px;\r\n }\r\n\r\n .pt__step{\r\n --pt-branch-length:76px;\r\n grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr);\r\n }\r\n\r\n .pt__step-content{\r\n width:min(100%,420px);\r\n }\r\n\r\n .pt__step--visual .pt__step-content{\r\n width:min(100%,510px);\r\n }\r\n\r\n .pt__plan-media{\r\n min-height:240px;\r\n }\r\n\r\n .pt__visual-media{\r\n min-height:340px;\r\n }\r\n\r\n}\r\n\r\n\/* =========================================================\r\n MOBILE \u2014 SINGLE-SIDED TREATMENT TREE\r\n Spine left, content right, natural page flow.\r\n ========================================================= *\/\r\n\r\n@media (max-width:767px){\r\n\r\n .pt__inner{\r\n padding:\r\n 58px\r\n 20px\r\n 78px;\r\n }\r\n\r\n .pt__intro{\r\n display:block;\r\n width:100%;\r\n }\r\n\r\n .pt__intro-left,\r\n .pt__intro-right{\r\n width:100%;\r\n max-width:none;\r\n justify-self:auto;\r\n }\r\n\r\n .pt__intro-right{\r\n align-self:auto;\r\n padding-inline-start:0;\r\n }\r\n\r\n .pt__eyebrow{\r\n margin-bottom:13px;\r\n font-size:11px;\r\n }\r\n\r\n .pt__title{\r\n max-width:10.6ch;\r\n\r\n font-size:clamp(48px,13.8vw,60px);\r\n line-height:1;\r\n }\r\n\r\n .pt__title-mask{\r\n padding-bottom:.095em;\r\n }\r\n\r\n .pt__title-mask + .pt__title-mask{\r\n margin-top:-.045em;\r\n }\r\n\r\n .pt__title-line{\r\n line-height:.91;\r\n }\r\n\r\n .pt__title-line--accent{\r\n margin-top:.04em;\r\n padding-bottom:.10em;\r\n line-height:.93;\r\n }\r\n\r\n .pt__support{\r\n margin-top:20px;\r\n\r\n max-width:35ch;\r\n\r\n font-size:15px;\r\n line-height:1.66;\r\n }\r\n\r\n .pt__selector-wrap{\r\n justify-content:flex-start;\r\n\r\n margin-top:24px;\r\n }\r\n\r\n .pt__selector{\r\n width:100%;\r\n\r\n justify-content:flex-start;\r\n gap:26px;\r\n\r\n padding-inline:0;\r\n }\r\n\r\n .pt__path{\r\n min-height:44px;\r\n\r\n font-size:11px;\r\n }\r\n\r\n .pt__tree{\r\n width:100%;\r\n margin-top:30px;\r\n\r\n padding-block:0;\r\n }\r\n\r\n \/* Hide full desktop spine. Segments create one continuous mobile spine. *\/\r\n .pt__spine{\r\n display:none;\r\n }\r\n\r\n .pt__step{\r\n --pt-mobile-spine-x:28px;\r\n --pt-mobile-content-x:58px;\r\n --pt-mobile-branch:24px;\r\n\r\n position:relative;\r\n\r\n display:block;\r\n\r\n min-height:0;\r\n\r\n padding-inline-start:var(--pt-mobile-content-x);\r\n padding-block:20px 28px;\r\n }\r\n\r\n .pt__step + .pt__step{\r\n margin-top:0;\r\n }\r\n\r\n .pt__step--visual{\r\n min-height:0;\r\n }\r\n\r\n .pt__step-content,\r\n .pt__step--left .pt__step-content,\r\n .pt__step--right .pt__step-content{\r\n width:100%;\r\n max-width:none;\r\n\r\n padding:0;\r\n\r\n text-align:start;\r\n\r\n justify-self:auto;\r\n }\r\n\r\n \/* Continuous segmented mobile spine. *\/\r\n .pt__mobile-spine{\r\n position:absolute;\r\n z-index:1;\r\n\r\n display:block;\r\n\r\n inset-inline-start:var(--pt-mobile-spine-x);\r\n inset-block-start:0;\r\n\r\n width:1px;\r\n height:100%;\r\n\r\n background:var(--pt-line);\r\n\r\n transform-origin:50% 0;\r\n }\r\n\r\n .pt__step:first-of-type .pt__mobile-spine{\r\n inset-block-start:50%;\r\n height:50%;\r\n }\r\n\r\n .pt__step:last-of-type .pt__mobile-spine{\r\n height:50%;\r\n }\r\n\r\n .pt__branch,\r\n .pt__step--left .pt__branch,\r\n .pt__step--right .pt__branch{\r\n inset-inline-start:var(--pt-mobile-spine-x);\r\n inset-inline-end:auto;\r\n\r\n inset-block-start:50%;\r\n\r\n width:var(--pt-mobile-branch);\r\n\r\n transform-origin:0 50%;\r\n }\r\n\r\n .pt__node,\r\n [dir=\"rtl\"] .pt__node{\r\n inset-inline-start:var(--pt-mobile-spine-x);\r\n inset-block-start:50%;\r\n\r\n transform:\r\n translate(-50%,-50%);\r\n }\r\n\r\n [dir=\"rtl\"] .pt__node{\r\n transform:\r\n translate(50%,-50%);\r\n }\r\n\r\n .pt__step-kicker{\r\n font-size:10.5px;\r\n }\r\n\r\n .pt__step-title,\r\n .pt__step--confirm .pt__step-title{\r\n max-width:14ch;\r\n\r\n font-size:clamp(29px,8.8vw,38px);\r\n line-height:.98;\r\n }\r\n\r\n .pt__step-copy{\r\n max-width:34ch;\r\n\r\n font-size:14.5px;\r\n line-height:1.58;\r\n }\r\n\r\n .pt__share-media{\r\n gap:8px;\r\n margin-top:12px;\r\n margin-bottom:0;\r\n }\r\n\r\n .pt__plan-media{\r\n min-height:0;\r\n aspect-ratio:4 \/ 3;\r\n }\r\n\r\n .pt__visual-media{\r\n min-height:0;\r\n aspect-ratio:4 \/ 3;\r\n }\r\n\r\n \/* Mobile media should read as clean imagery, not nested decorative boxes. *\/\r\n .pt__media,\r\n .pt__share-thumb{\r\n border:0;\r\n box-shadow:none;\r\n background:transparent;\r\n }\r\n\r\n .pt__media::before,\r\n .pt__share-thumb::before,\r\n .pt__visual-media::after{\r\n display:none;\r\n }\r\n\r\n .pt__media{\r\n margin-top:12px;\r\n margin-bottom:0;\r\n }\r\n\r\n .pt__step-content > .pt__media:last-child,\r\n .pt__step-content > .pt__share-media:last-child{\r\n margin-bottom:0;\r\n }\r\n\r\n .pt__step--visual .pt__step-content{\r\n width:100%;\r\n }\r\n\r\n .pt__step--confirm .pt__step-content{\r\n padding-block:0;\r\n }\r\n\r\n .pt__closing{\r\n display:block;\r\n\r\n margin-top:34px;\r\n padding-top:20px;\r\n }\r\n\r\n .pt__clarification{\r\n max-width:36ch;\r\n\r\n font-size:12.5px;\r\n line-height:1.56;\r\n }\r\n\r\n .pt__cta-wrap{\r\n margin-top:18px;\r\n\r\n text-align:start;\r\n }\r\n\r\n .pt__cta{\r\n min-height:44px;\r\n\r\n font-size:11px;\r\n }\r\n\r\n \/* Mobile intro prep. *\/\r\n #lamina-treatment-path-tree.has-mobile-entry .pt__eyebrow{\r\n opacity:0;\r\n transform:translate3d(0,7px,0);\r\n }\r\n\r\n #lamina-treatment-path-tree.has-mobile-entry .pt__title-line{\r\n opacity:.24;\r\n transform:translate3d(0,88%,0);\r\n --pt-entry-blur:.5px;\r\n }\r\n\r\n #lamina-treatment-path-tree.has-mobile-entry .pt__support,\r\n #lamina-treatment-path-tree.has-mobile-entry .pt__selector-wrap{\r\n opacity:0;\r\n transform:translate3d(0,7px,0);\r\n }\r\n\r\n #lamina-treatment-path-tree.has-mobile-entry.is-mobile-intro-entered .pt__eyebrow,\r\n #lamina-treatment-path-tree.has-mobile-entry.is-mobile-intro-entered .pt__support,\r\n #lamina-treatment-path-tree.has-mobile-entry.is-mobile-intro-entered .pt__selector-wrap{\r\n opacity:1;\r\n transform:none;\r\n\r\n transition:\r\n opacity .52s var(--pt-ease),\r\n transform .52s var(--pt-ease);\r\n }\r\n\r\n #lamina-treatment-path-tree.has-mobile-entry.is-mobile-intro-entered .pt__support{\r\n transition-delay:.14s;\r\n }\r\n\r\n #lamina-treatment-path-tree.has-mobile-entry.is-mobile-intro-entered .pt__selector-wrap{\r\n transition-delay:.22s;\r\n }\r\n\r\n #lamina-treatment-path-tree.has-mobile-entry.is-mobile-intro-entered .pt__title-line{\r\n opacity:1;\r\n transform:none;\r\n --pt-entry-blur:0px;\r\n\r\n transition:\r\n opacity .58s var(--pt-ease),\r\n transform .64s var(--pt-ease),\r\n filter .38s ease;\r\n }\r\n\r\n #lamina-treatment-path-tree.has-mobile-entry.is-mobile-intro-entered\r\n .pt__title-mask:nth-child(1) .pt__title-line{\r\n transition-delay:.04s;\r\n }\r\n\r\n #lamina-treatment-path-tree.has-mobile-entry.is-mobile-intro-entered\r\n .pt__title-mask:nth-child(2) .pt__title-line{\r\n transition-delay:.12s;\r\n }\r\n\r\n \/* Per-step mobile prep. *\/\r\n #lamina-treatment-path-tree.has-mobile-entry .pt__step[data-mobile-ready=\"false\"] .pt__mobile-spine{\r\n transform:scaleY(0);\r\n }\r\n\r\n #lamina-treatment-path-tree.has-mobile-entry .pt__step[data-mobile-ready=\"false\"] .pt__branch{\r\n transform:scaleX(0);\r\n }\r\n\r\n #lamina-treatment-path-tree.has-mobile-entry .pt__step[data-mobile-ready=\"false\"] .pt__node{\r\n opacity:0;\r\n transform:\r\n translate(-50%,-50%)\r\n scale(.65);\r\n }\r\n\r\n [dir=\"rtl\"] #lamina-treatment-path-tree.has-mobile-entry .pt__step[data-mobile-ready=\"false\"] .pt__node{\r\n transform:\r\n translate(50%,-50%)\r\n scale(.65);\r\n }\r\n\r\n #lamina-treatment-path-tree.has-mobile-entry .pt__step[data-mobile-ready=\"false\"] .pt__step-content{\r\n opacity:.10;\r\n transform:translate3d(0,10px,0);\r\n }\r\n\r\n #lamina-treatment-path-tree.has-mobile-entry .pt__step[data-mobile-ready=\"false\"] .pt__media,\r\n #lamina-treatment-path-tree.has-mobile-entry .pt__step[data-mobile-ready=\"false\"] .pt__share-media{\r\n opacity:.30;\r\n clip-path:inset(7% 0 7% 0);\r\n }\r\n\r\n #lamina-treatment-path-tree.has-mobile-entry .pt__step[data-mobile-ready=\"true\"] .pt__mobile-spine{\r\n transform:scaleY(1);\r\n\r\n transition:\r\n transform .52s var(--pt-ease);\r\n }\r\n\r\n #lamina-treatment-path-tree.has-mobile-entry .pt__step[data-mobile-ready=\"true\"] .pt__branch{\r\n transform:scaleX(1);\r\n\r\n transition:\r\n transform .36s var(--pt-ease) .08s;\r\n }\r\n\r\n #lamina-treatment-path-tree.has-mobile-entry .pt__step[data-mobile-ready=\"true\"] .pt__node{\r\n opacity:1;\r\n transform:\r\n translate(-50%,-50%)\r\n scale(1);\r\n\r\n transition:\r\n opacity .30s ease .14s,\r\n transform .34s var(--pt-ease) .14s;\r\n }\r\n\r\n [dir=\"rtl\"] #lamina-treatment-path-tree.has-mobile-entry .pt__step[data-mobile-ready=\"true\"] .pt__node{\r\n transform:\r\n translate(50%,-50%)\r\n scale(1);\r\n }\r\n\r\n #lamina-treatment-path-tree.has-mobile-entry .pt__step[data-mobile-ready=\"true\"] .pt__step-content{\r\n opacity:1;\r\n transform:none;\r\n\r\n transition:\r\n opacity .48s var(--pt-ease) .18s,\r\n transform .52s var(--pt-ease) .18s;\r\n }\r\n\r\n #lamina-treatment-path-tree.has-mobile-entry .pt__step[data-mobile-ready=\"true\"] .pt__media,\r\n #lamina-treatment-path-tree.has-mobile-entry .pt__step[data-mobile-ready=\"true\"] .pt__share-media{\r\n opacity:1;\r\n clip-path:inset(0);\r\n\r\n transition:\r\n opacity .44s ease .22s,\r\n clip-path .52s var(--pt-ease) .22s;\r\n }\r\n\r\n \/* Permanent Lamina mobile rule: no scroll-driven passed-content blur. *\/\r\n #lamina-treatment-path-tree [data-exit-layer]{\r\n --pt-passed-blur:0px !important;\r\n --pt-passed-opacity:1 !important;\r\n }\r\n\r\n}\r\n\r\n\/* =========================================================\r\n SHORT LANDSCAPE MOBILE\r\n ========================================================= *\/\r\n\r\n@media (max-width:767px) and (orientation:landscape) and (max-height:520px){\r\n\r\n .pt__inner{\r\n padding-block:46px 62px;\r\n }\r\n\r\n .pt__title{\r\n font-size:44px;\r\n max-width:9ch;\r\n }\r\n\r\n .pt__support{\r\n font-size:14px;\r\n }\r\n\r\n .pt__step{\r\n padding-block:18px 24px;\r\n }\r\n\r\n .pt__visual-media{\r\n min-height:0;\r\n aspect-ratio:4 \/ 3;\r\n }\r\n\r\n}\r\n\r\n\/* =========================================================\r\n LAMINA PASSED-CONTENT DEPTH\r\n\r\n Current and upcoming content stays sharp.\r\n Only content that has been scrolled past \/ moved above the reading\r\n zone receives a small amount of distance-based blur.\r\n\r\n Scrolling back automatically removes that blur because the effect\r\n is calculated from current viewport geometry, not scroll direction.\r\n ========================================================= *\/\r\n\r\n#lamina-treatment-path-tree [data-exit-layer]{\r\n --pt-entry-blur:0px;\r\n --pt-passed-blur:0px;\r\n --pt-passed-opacity:1;\r\n\r\n filter:\r\n blur(\r\n calc(\r\n var(--pt-entry-blur) +\r\n var(--pt-passed-blur)\r\n )\r\n );\r\n\r\n opacity:var(--pt-passed-opacity);\r\n\r\n will-change:filter, opacity;\r\n}\r\n\r\n#lamina-treatment-path-tree [data-exit-layer]:hover,\r\n#lamina-treatment-path-tree [data-exit-layer]:focus-within{\r\n --pt-passed-blur:0px !important;\r\n --pt-passed-opacity:1 !important;\r\n}\r\n\r\n#lamina-treatment-path-tree .pt__step:focus-within .pt__step-content,\r\n#lamina-treatment-path-tree .pt__step:focus-within .pt__media,\r\n#lamina-treatment-path-tree .pt__step:focus-within .pt__share-media{\r\n filter:none !important;\r\n opacity:1 !important;\r\n}\r\n\r\n\/* =========================================================\r\n REDUCED MOTION\r\n ========================================================= *\/\r\n\r\n@media (prefers-reduced-motion:reduce){\r\n\r\n #lamina-treatment-path-tree.has-desktop-entry .pt__eyebrow,\r\n #lamina-treatment-path-tree.has-desktop-entry .pt__title-line,\r\n #lamina-treatment-path-tree.has-desktop-entry .pt__support,\r\n #lamina-treatment-path-tree.has-desktop-entry .pt__selector-wrap,\r\n #lamina-treatment-path-tree.has-desktop-entry .pt__step-content,\r\n #lamina-treatment-path-tree.has-mobile-entry .pt__eyebrow,\r\n #lamina-treatment-path-tree.has-mobile-entry .pt__title-line,\r\n #lamina-treatment-path-tree.has-mobile-entry .pt__support,\r\n #lamina-treatment-path-tree.has-mobile-entry .pt__selector-wrap,\r\n #lamina-treatment-path-tree.has-mobile-entry .pt__step-content{\r\n opacity:1 !important;\r\n transform:none !important;\r\n filter:none !important;\r\n transition:none !important;\r\n }\r\n\r\n #lamina-treatment-path-tree.has-desktop-entry .pt__spine,\r\n #lamina-treatment-path-tree.has-desktop-entry .pt__branch,\r\n #lamina-treatment-path-tree.has-mobile-entry .pt__mobile-spine,\r\n #lamina-treatment-path-tree.has-mobile-entry .pt__branch{\r\n transform:none !important;\r\n transition:none !important;\r\n }\r\n\r\n #lamina-treatment-path-tree .pt__spine::after{\r\n transform:scaleY(1) !important;\r\n transition:none !important;\r\n }\r\n\r\n #lamina-treatment-path-tree.has-desktop-entry .pt__node,\r\n #lamina-treatment-path-tree.has-mobile-entry .pt__node,\r\n [dir=\"rtl\"] #lamina-treatment-path-tree.has-desktop-entry .pt__node,\r\n [dir=\"rtl\"] #lamina-treatment-path-tree.has-mobile-entry .pt__node{\r\n opacity:1 !important;\r\n transform:translate(-50%,-50%) !important;\r\n transition:none !important;\r\n }\r\n\r\n [dir=\"rtl\"] #lamina-treatment-path-tree.has-desktop-entry .pt__node,\r\n [dir=\"rtl\"] #lamina-treatment-path-tree.has-mobile-entry .pt__node{\r\n transform:translate(50%,-50%) !important;\r\n }\r\n\r\n #lamina-treatment-path-tree.has-desktop-entry .pt__media,\r\n #lamina-treatment-path-tree.has-desktop-entry .pt__share-media,\r\n #lamina-treatment-path-tree.has-mobile-entry .pt__media,\r\n #lamina-treatment-path-tree.has-mobile-entry .pt__share-media{\r\n opacity:1 !important;\r\n clip-path:none !important;\r\n transition:none !important;\r\n }\r\n\r\n #lamina-treatment-path-tree .pt__dynamic{\r\n transition:none !important;\r\n }\r\n\r\n #lamina-treatment-path-tree [data-exit-layer]{\r\n --pt-entry-blur:0px !important;\r\n --pt-passed-blur:0px !important;\r\n --pt-passed-opacity:1 !important;\r\n\r\n filter:none !important;\r\n opacity:1 !important;\r\n }\r\n\r\n}\r\n<\/style>\r\n\r\n\r\n<section\r\n id=\"lamina-treatment-path-tree\"\r\n aria-labelledby=\"lamina-treatment-path-tree-title\"\r\n data-lamina-focus-section\r\n>\r\n\r\n <div class=\"pt__inner\">\r\n\r\n\r\n <!-- =================================================\r\n INTRO\r\n ================================================= -->\r\n\r\n <div class=\"pt__intro\">\r\n\r\n <div class=\"pt__intro-left\">\r\n\r\n <p\r\n class=\"pt__eyebrow\"\r\n data-exit-layer=\"eyebrow\"\r\n >\r\n TREATMENT PLANNING\r\n <\/p>\r\n\r\n <h2\r\n class=\"pt__title\"\r\n id=\"lamina-treatment-path-tree-title\"\r\n >\r\n\r\n <span class=\"pt__title-mask\">\r\n <span\r\n class=\"pt__title-line\"\r\n data-exit-layer=\"headline\"\r\n >\r\n See the plan\r\n <\/span>\r\n <\/span>\r\n\r\n <span class=\"pt__title-mask\">\r\n <span\r\n class=\"pt__title-line pt__title-line--accent\"\r\n data-exit-layer=\"headline\"\r\n >\r\n before treatment begins.\r\n <\/span>\r\n <\/span>\r\n\r\n <\/h2>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"pt__intro-right\">\r\n\r\n <p\r\n class=\"pt__support\"\r\n data-exit-layer=\"copy\"\r\n >\r\n Your first assessment can begin before you travel. Share the relevant information, photos or X-rays, receive a personalised preliminary plan and, for suitable dental cases, explore digital treatment visualisation before your final clinical examination.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <!-- =================================================\r\n PATH SELECTOR\r\n ================================================= -->\r\n\r\n <div\r\n class=\"pt__selector-wrap\"\r\n data-exit-layer=\"ui\"\r\n >\r\n\r\n <div\r\n class=\"pt__selector\"\r\n role=\"group\"\r\n aria-label=\"Choose treatment planning pathway\"\r\n >\r\n\r\n <button\r\n class=\"pt__path\"\r\n type=\"button\"\r\n data-path=\"dental\"\r\n aria-pressed=\"true\"\r\n >\r\n Dental\r\n <\/button>\r\n\r\n <button\r\n class=\"pt__path\"\r\n type=\"button\"\r\n data-path=\"hair\"\r\n aria-pressed=\"false\"\r\n >\r\n Hair Restoration\r\n <\/button>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <!-- =================================================\r\n TREATMENT PATH TREE\r\n ================================================= -->\r\n\r\n <div\r\n class=\"pt__tree\"\r\n aria-live=\"polite\"\r\n >\r\n\r\n <div\r\n class=\"pt__spine\"\r\n aria-hidden=\"true\"\r\n ><\/div>\r\n\r\n\r\n <!-- STEP 01 -->\r\n\r\n <article\r\n class=\"pt__step pt__step--left\"\r\n data-step=\"1\"\r\n data-exit-layer=\"step\"\r\n >\r\n\r\n <span\r\n class=\"pt__mobile-spine\"\r\n aria-hidden=\"true\"\r\n ><\/span>\r\n\r\n <span\r\n class=\"pt__branch\"\r\n aria-hidden=\"true\"\r\n ><\/span>\r\n\r\n <span\r\n class=\"pt__node\"\r\n aria-hidden=\"true\"\r\n ><\/span>\r\n\r\n\r\n <div class=\"pt__step-content\">\r\n\r\n <div class=\"pt__dynamic\">\r\n\r\n <span class=\"pt__step-kicker\">\r\n 01 \u2014 SHARE YOUR CASE\r\n <\/span>\r\n\r\n <h3\r\n class=\"pt__step-title\"\r\n data-bind=\"step1Title\"\r\n >\r\n Begin with relevant information.\r\n <\/h3>\r\n\r\n <p\r\n class=\"pt__step-copy\"\r\n data-bind=\"step1Copy\"\r\n >\r\n Relevant photos and\/or existing X-rays can help begin the preliminary assessment.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n\r\n <div\r\n class=\"pt__share-media pt__dynamic\"\r\n aria-hidden=\"true\"\r\n >\r\n\r\n <div class=\"pt__share-thumb\">\r\n <img\r\n class=\"pt__asset\"\r\n data-path-media=\"dental\"\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/1.1.webp\"\r\n alt=\"\"\r\n loading=\"lazy\"\r\n decoding=\"async\"\r\n >\r\n <img\r\n class=\"pt__asset\"\r\n data-path-media=\"hair\"\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/1-scaled.webp\"\r\n alt=\"\"\r\n loading=\"lazy\"\r\n decoding=\"async\"\r\n >\r\n <\/div>\r\n\r\n <div class=\"pt__share-thumb\">\r\n <img\r\n class=\"pt__asset\"\r\n data-path-media=\"dental\"\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/2.1-scaled.webp\"\r\n alt=\"\"\r\n loading=\"lazy\"\r\n decoding=\"async\"\r\n >\r\n <img\r\n class=\"pt__asset\"\r\n data-path-media=\"hair\"\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/2.webp\"\r\n alt=\"\"\r\n loading=\"lazy\"\r\n decoding=\"async\"\r\n >\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/article>\r\n\r\n\r\n <!-- STEP 02 -->\r\n\r\n <article\r\n class=\"pt__step pt__step--right\"\r\n data-step=\"2\"\r\n data-exit-layer=\"step\"\r\n >\r\n\r\n <span\r\n class=\"pt__mobile-spine\"\r\n aria-hidden=\"true\"\r\n ><\/span>\r\n\r\n <span\r\n class=\"pt__branch\"\r\n aria-hidden=\"true\"\r\n ><\/span>\r\n\r\n <span\r\n class=\"pt__node\"\r\n aria-hidden=\"true\"\r\n ><\/span>\r\n\r\n\r\n <div class=\"pt__step-content\">\r\n\r\n <div class=\"pt__dynamic\">\r\n\r\n <span\r\n class=\"pt__step-kicker\"\r\n data-bind=\"step2Kicker\"\r\n >\r\n 02 \u2014 PRELIMINARY PLAN\r\n <\/span>\r\n\r\n <h3\r\n class=\"pt__step-title\"\r\n data-bind=\"step2Title\"\r\n >\r\n Turn information into a proposed direction.\r\n <\/h3>\r\n\r\n <p\r\n class=\"pt__step-copy\"\r\n data-bind=\"step2Copy\"\r\n >\r\n The case is reviewed and a personalised preliminary treatment plan can be prepared.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n\r\n <div\r\n class=\"pt__media pt__plan-media pt__dynamic\"\r\n aria-hidden=\"true\"\r\n >\r\n <img\r\n class=\"pt__asset\"\r\n data-path-media=\"dental\"\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/3.1-scaled.webp\"\r\n alt=\"\"\r\n loading=\"lazy\"\r\n decoding=\"async\"\r\n >\r\n <img\r\n class=\"pt__asset\"\r\n data-path-media=\"hair\"\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/3-scaled.webp\"\r\n alt=\"\"\r\n loading=\"lazy\"\r\n decoding=\"async\"\r\n >\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/article>\r\n\r\n\r\n <!-- STEP 03 -->\r\n\r\n <article\r\n class=\"pt__step pt__step--left pt__step--visual\"\r\n data-step=\"3\"\r\n data-exit-layer=\"step\"\r\n >\r\n\r\n <span\r\n class=\"pt__mobile-spine\"\r\n aria-hidden=\"true\"\r\n ><\/span>\r\n\r\n <span\r\n class=\"pt__branch\"\r\n aria-hidden=\"true\"\r\n ><\/span>\r\n\r\n <span\r\n class=\"pt__node\"\r\n aria-hidden=\"true\"\r\n ><\/span>\r\n\r\n\r\n <div class=\"pt__step-content\">\r\n\r\n <div class=\"pt__dynamic\">\r\n\r\n <span\r\n class=\"pt__step-kicker\"\r\n data-bind=\"step3Kicker\"\r\n >\r\n 03 \u2014 VISUALISE\r\n <\/span>\r\n\r\n <h3\r\n class=\"pt__step-title\"\r\n data-bind=\"step3Title\"\r\n >\r\n Understand the proposed treatment.\r\n <\/h3>\r\n\r\n <p\r\n class=\"pt__step-copy\"\r\n data-bind=\"step3Copy\"\r\n >\r\n Where appropriate, digital \/ 3D treatment visualisation can help explain the proposed dental treatment.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n\r\n <div\r\n class=\"pt__media pt__visual-media pt__dynamic\"\r\n aria-hidden=\"true\"\r\n >\r\n <img\r\n class=\"pt__asset\"\r\n data-path-media=\"dental\"\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/4.1-scaled.webp\"\r\n alt=\"\"\r\n loading=\"lazy\"\r\n decoding=\"async\"\r\n >\r\n <img\r\n class=\"pt__asset\"\r\n data-path-media=\"hair\"\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/4-scaled.webp\"\r\n alt=\"\"\r\n loading=\"lazy\"\r\n decoding=\"async\"\r\n >\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/article>\r\n\r\n\r\n <!-- STEP 04 -->\r\n\r\n <article\r\n class=\"pt__step pt__step--right pt__step--confirm\"\r\n data-step=\"4\"\r\n data-exit-layer=\"step\"\r\n >\r\n\r\n <span\r\n class=\"pt__mobile-spine\"\r\n aria-hidden=\"true\"\r\n ><\/span>\r\n\r\n <span\r\n class=\"pt__branch\"\r\n aria-hidden=\"true\"\r\n ><\/span>\r\n\r\n <span\r\n class=\"pt__node\"\r\n aria-hidden=\"true\"\r\n ><\/span>\r\n\r\n\r\n <div class=\"pt__step-content\">\r\n\r\n <div class=\"pt__dynamic\">\r\n\r\n <span class=\"pt__step-kicker\">\r\n 04 \u2014 IN-CLINIC CONFIRMATION\r\n <\/span>\r\n\r\n <h3\r\n class=\"pt__step-title\"\r\n data-bind=\"step4Title\"\r\n >\r\n Final confirmation happens in person.\r\n <\/h3>\r\n\r\n <p\r\n class=\"pt__step-copy\"\r\n data-bind=\"step4Copy\"\r\n >\r\n Your treatment plan is confirmed following the necessary clinical examination and updated diagnostics where required.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/article>\r\n\r\n <\/div>\r\n\r\n\r\n <!-- =================================================\r\n CLINICAL CLARIFICATION \/ CTA\r\n ================================================= -->\r\n\r\n <div class=\"pt__closing\">\r\n\r\n <p\r\n class=\"pt__clarification\"\r\n data-exit-layer=\"copy\"\r\n >\r\n Preliminary planning does not replace the required in-clinic examination. Your final treatment plan is confirmed by the clinical team after the appropriate assessment.\r\n <\/p>\r\n\r\n <div\r\n class=\"pt__cta-wrap\"\r\n data-exit-layer=\"ui\"\r\n >\r\n\r\n <a\r\n class=\"pt__cta\"\r\n href=\"#start-your-assessment\"\r\n >\r\n Start your assessment\r\n <span aria-hidden=\"true\">\u2192<\/span>\r\n <\/a>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<script>\r\n(() => {\r\n\r\n const root =\r\n document.getElementById(\r\n 'lamina-treatment-path-tree'\r\n );\r\n\r\n\r\n if (\r\n !root ||\r\n root.dataset.pathTreeReady ===\r\n 'true'\r\n ) return;\r\n\r\n\r\n root.dataset.pathTreeReady =\r\n 'true';\r\n\r\n\r\n root.dataset.activePath =\r\n 'dental';\r\n\r\n\r\n const desktopQuery =\r\n window.matchMedia(\r\n '(min-width:768px)'\r\n );\r\n\r\n\r\n const mobileQuery =\r\n window.matchMedia(\r\n '(max-width:767px)'\r\n );\r\n\r\n\r\n const reducedMotion =\r\n window.matchMedia(\r\n '(prefers-reduced-motion: reduce)'\r\n );\r\n\r\n\r\n const pathButtons =\r\n [\r\n ...root.querySelectorAll(\r\n '[data-path]'\r\n )\r\n ];\r\n\r\n\r\n const bindTargets =\r\n [\r\n ...root.querySelectorAll(\r\n '[data-bind]'\r\n )\r\n ];\r\n\r\n\r\n const steps =\r\n [\r\n ...root.querySelectorAll(\r\n '[data-step]'\r\n )\r\n ];\r\n\r\n\r\n const tree =\r\n root.querySelector(\r\n '.pt__tree'\r\n );\r\n\r\n\r\n const spine =\r\n root.querySelector(\r\n '.pt__spine'\r\n );\r\n\r\n\r\n function clamp(\r\n value,\r\n min,\r\n max\r\n ){\r\n\r\n return Math.min(\r\n max,\r\n Math.max(\r\n min,\r\n value\r\n )\r\n );\r\n\r\n }\r\n\r\n\r\n let spineTicking =\r\n false;\r\n\r\n\r\n function updateSpineFill(){\r\n\r\n spineTicking =\r\n false;\r\n\r\n\r\n if (\r\n !tree ||\r\n !spine\r\n ) return;\r\n\r\n\r\n if (\r\n !desktopQuery.matches\r\n ){\r\n\r\n spine.style.setProperty(\r\n '--pt-spine-progress',\r\n '1'\r\n );\r\n\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n const rect =\r\n tree.getBoundingClientRect();\r\n\r\n\r\n const vh =\r\n Math.max(\r\n 1,\r\n window.innerHeight ||\r\n document.documentElement.clientHeight\r\n );\r\n\r\n\r\n \/*\r\n Loading-like fill:\r\n starts once the tree moves meaningfully into view\r\n and completes close to the end of the tree journey.\r\n *\/\r\n const startLine =\r\n vh * 0.78;\r\n\r\n\r\n const totalDistance =\r\n rect.height +\r\n vh * 0.14;\r\n\r\n\r\n const travelled =\r\n startLine -\r\n rect.top;\r\n\r\n\r\n const progress =\r\n clamp(\r\n travelled \/\r\n Math.max(\r\n 1,\r\n totalDistance\r\n ),\r\n 0,\r\n 1\r\n );\r\n\r\n\r\n spine.style.setProperty(\r\n '--pt-spine-progress',\r\n progress.toFixed(\r\n 4\r\n )\r\n );\r\n\r\n }\r\n\r\n\r\n function requestSpineFillUpdate(){\r\n\r\n if (\r\n spineTicking\r\n ) return;\r\n\r\n\r\n spineTicking =\r\n true;\r\n\r\n\r\n requestAnimationFrame(\r\n updateSpineFill\r\n );\r\n\r\n }\r\n\r\n\r\n \/* =======================================================\r\n CONTENT MODEL\r\n Tree skeleton never changes.\r\n ======================================================= *\/\r\n\r\n const pathData =\r\n {\r\n\r\n dental:{\r\n step1Title:\r\n 'Begin with relevant information.',\r\n\r\n step1Copy:\r\n 'Relevant photos and\/or existing X-rays can help begin the preliminary assessment.',\r\n\r\n step1MediaA:\r\n 'Photo',\r\n\r\n step1MediaB:\r\n 'X-ray',\r\n\r\n step2Kicker:\r\n '02 \u2014 PRELIMINARY PLAN',\r\n\r\n step2Title:\r\n 'Turn information into a proposed direction.',\r\n\r\n step2Copy:\r\n 'The case is reviewed and a personalised preliminary treatment plan can be prepared.',\r\n\r\n step2Media:\r\n 'Preliminary treatment planning',\r\n\r\n step3Kicker:\r\n '03 \u2014 VISUALISE',\r\n\r\n step3Title:\r\n 'Understand the proposed treatment.',\r\n\r\n step3Copy:\r\n 'Where appropriate, digital \/ 3D treatment visualisation can help explain the proposed dental treatment.',\r\n\r\n step3Media:\r\n 'Digital treatment visualisation',\r\n\r\n step4Title:\r\n 'Final confirmation happens in person.',\r\n\r\n step4Copy:\r\n 'Your treatment plan is confirmed following the necessary clinical examination and updated diagnostics where required.'\r\n },\r\n\r\n\r\n hair:{\r\n step1Title:\r\n 'Start with the right views.',\r\n\r\n step1Copy:\r\n 'Relevant photographs and treatment information can help the clinical team begin understanding your case before travel.',\r\n\r\n step1MediaA:\r\n 'Scalp view',\r\n\r\n step1MediaB:\r\n 'Hair view',\r\n\r\n step2Kicker:\r\n '02 \u2014 CASE REVIEW',\r\n\r\n step2Title:\r\n 'Understand the starting point.',\r\n\r\n step2Copy:\r\n 'The supplied information is reviewed to better understand your concerns and treatment goals.',\r\n\r\n step2Media:\r\n 'Case review',\r\n\r\n step3Kicker:\r\n '03 \u2014 PRELIMINARY DIRECTION',\r\n\r\n step3Title:\r\n 'Shape the treatment direction.',\r\n\r\n step3Copy:\r\n 'A preliminary treatment direction can be discussed before you arrive.',\r\n\r\n step3Media:\r\n 'Hair planning \/ consultation',\r\n\r\n step4Title:\r\n 'Final planning happens in person.',\r\n\r\n step4Copy:\r\n 'The final treatment plan and design are confirmed following the required face-to-face clinical assessment.'\r\n }\r\n\r\n };\r\n\r\n\r\n let activePath =\r\n 'dental';\r\n\r\n\r\n let switchToken =\r\n 0;\r\n\r\n\r\n let switchTimerA =\r\n null;\r\n\r\n\r\n let switchTimerB =\r\n null;\r\n\r\n\r\n function setBoundContent(\r\n data\r\n ){\r\n\r\n bindTargets.forEach(\r\n target => {\r\n\r\n const key =\r\n target.dataset.bind;\r\n\r\n\r\n if (\r\n !(key in data)\r\n ) return;\r\n\r\n\r\n target.textContent =\r\n data[\r\n key\r\n ];\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n function setPath(\r\n nextPath\r\n ){\r\n\r\n if (\r\n !pathData[\r\n nextPath\r\n ] ||\r\n nextPath ===\r\n activePath\r\n ) return;\r\n\r\n\r\n activePath =\r\n nextPath;\r\n\r\n\r\n root.dataset.activePath =\r\n activePath;\r\n\r\n\r\n const token =\r\n ++switchToken;\r\n\r\n\r\n pathButtons.forEach(\r\n button => {\r\n\r\n button.setAttribute(\r\n 'aria-pressed',\r\n button.dataset.path ===\r\n activePath\r\n ? 'true'\r\n : 'false'\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n window.clearTimeout(\r\n switchTimerA\r\n );\r\n\r\n\r\n window.clearTimeout(\r\n switchTimerB\r\n );\r\n\r\n\r\n if (\r\n reducedMotion.matches\r\n ){\r\n\r\n root.classList.remove(\r\n 'is-path-switching'\r\n );\r\n\r\n\r\n setBoundContent(\r\n pathData[\r\n activePath\r\n ]\r\n );\r\n\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n \/*\r\n Skeleton remains fully assembled.\r\n Only content\/media transition.\r\n Current page position is untouched.\r\n Latest selection wins.\r\n *\/\r\n root.classList.add(\r\n 'is-path-switching'\r\n );\r\n\r\n\r\n switchTimerA =\r\n window.setTimeout(\r\n () => {\r\n\r\n if (\r\n token !==\r\n switchToken\r\n ) return;\r\n\r\n\r\n setBoundContent(\r\n pathData[\r\n activePath\r\n ]\r\n );\r\n\r\n\r\n root.classList.remove(\r\n 'is-path-switching'\r\n );\r\n\r\n },\r\n 145\r\n );\r\n\r\n\r\n switchTimerB =\r\n window.setTimeout(\r\n () => {\r\n\r\n if (\r\n token !==\r\n switchToken\r\n ) return;\r\n\r\n\r\n root.classList.remove(\r\n 'is-path-switching'\r\n );\r\n\r\n },\r\n 560\r\n );\r\n\r\n }\r\n\r\n\r\n pathButtons.forEach(\r\n button => {\r\n\r\n button.addEventListener(\r\n 'click',\r\n () => {\r\n\r\n setPath(\r\n button.dataset.path\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n \/* =======================================================\r\n DESKTOP \/ TABLET TREE ENTRANCE\r\n Plays once per page load.\r\n ======================================================= *\/\r\n\r\n let desktopEntrancePlayed =\r\n false;\r\n\r\n\r\n let desktopEntranceObserver =\r\n null;\r\n\r\n\r\n let desktopCleanupTimer =\r\n null;\r\n\r\n\r\n function cleanupDesktopEntrance(){\r\n\r\n window.clearTimeout(\r\n desktopCleanupTimer\r\n );\r\n\r\n\r\n desktopCleanupTimer =\r\n window.setTimeout(\r\n () => {\r\n\r\n \/*\r\n Remove all entrance-prep styles after completion.\r\n Tree becomes completely still.\r\n *\/\r\n root.classList.remove(\r\n 'has-desktop-entry'\r\n );\r\n\r\n },\r\n 2440\r\n );\r\n\r\n }\r\n\r\n\r\n function initDesktopEntrance(){\r\n\r\n desktopEntranceObserver?.disconnect();\r\n\r\n\r\n desktopEntranceObserver =\r\n null;\r\n\r\n\r\n if (\r\n !desktopQuery.matches ||\r\n reducedMotion.matches ||\r\n desktopEntrancePlayed ||\r\n !(\r\n 'IntersectionObserver' in window\r\n )\r\n ){\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n root.classList.add(\r\n 'has-desktop-entry'\r\n );\r\n\r\n\r\n desktopEntranceObserver =\r\n new IntersectionObserver(\r\n entries => {\r\n\r\n entries.forEach(\r\n entry => {\r\n\r\n if (\r\n !entry.isIntersecting\r\n ) return;\r\n\r\n\r\n desktopEntrancePlayed =\r\n true;\r\n\r\n\r\n requestAnimationFrame(\r\n () => {\r\n\r\n root.classList.add(\r\n 'is-desktop-entered'\r\n );\r\n\r\n\r\n cleanupDesktopEntrance();\r\n\r\n }\r\n );\r\n\r\n\r\n desktopEntranceObserver.disconnect();\r\n\r\n }\r\n );\r\n\r\n },\r\n {\r\n \/*\r\n Trigger while approximately 20% of the section has entered.\r\n *\/\r\n rootMargin:'0px 0px -20% 0px',\r\n threshold:.02\r\n }\r\n );\r\n\r\n\r\n desktopEntranceObserver.observe(\r\n root\r\n );\r\n\r\n }\r\n\r\n\r\n \/* =======================================================\r\n MOBILE ENTRANCE\r\n Intro once; steps enter individually as they approach.\r\n No continuous progress mapping.\r\n ======================================================= *\/\r\n\r\n let mobileIntroPlayed =\r\n false;\r\n\r\n\r\n let mobileIntroObserver =\r\n null;\r\n\r\n\r\n let mobileStepObserver =\r\n null;\r\n\r\n\r\n function revealAllMobileSteps(){\r\n\r\n steps.forEach(\r\n step => {\r\n\r\n step.dataset.mobileReady =\r\n 'true';\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n function initMobileEntrance(){\r\n\r\n mobileIntroObserver?.disconnect();\r\n mobileStepObserver?.disconnect();\r\n\r\n\r\n mobileIntroObserver =\r\n null;\r\n\r\n\r\n mobileStepObserver =\r\n null;\r\n\r\n\r\n root.classList.remove(\r\n 'has-mobile-entry'\r\n );\r\n\r\n\r\n if (\r\n !mobileQuery.matches ||\r\n reducedMotion.matches ||\r\n !(\r\n 'IntersectionObserver' in window\r\n )\r\n ){\r\n\r\n revealAllMobileSteps();\r\n\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n root.classList.add(\r\n 'has-mobile-entry'\r\n );\r\n\r\n\r\n if (\r\n !mobileIntroPlayed\r\n ){\r\n\r\n mobileIntroObserver =\r\n new IntersectionObserver(\r\n entries => {\r\n\r\n entries.forEach(\r\n entry => {\r\n\r\n if (\r\n !entry.isIntersecting\r\n ) return;\r\n\r\n\r\n mobileIntroPlayed =\r\n true;\r\n\r\n\r\n root.classList.add(\r\n 'is-mobile-intro-entered'\r\n );\r\n\r\n\r\n mobileIntroObserver.disconnect();\r\n\r\n }\r\n );\r\n\r\n },\r\n {\r\n rootMargin:'0px 0px -18% 0px',\r\n threshold:.02\r\n }\r\n );\r\n\r\n\r\n mobileIntroObserver.observe(\r\n root\r\n );\r\n\r\n }else{\r\n\r\n root.classList.add(\r\n 'is-mobile-intro-entered'\r\n );\r\n\r\n }\r\n\r\n\r\n \/*\r\n Existing entered steps stay entered across path changes.\r\n Upcoming steps animate once as they approach.\r\n *\/\r\n steps.forEach(\r\n step => {\r\n\r\n if (\r\n step.dataset.mobileReady !==\r\n 'true'\r\n ){\r\n\r\n step.dataset.mobileReady =\r\n 'false';\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n\r\n mobileStepObserver =\r\n new IntersectionObserver(\r\n entries => {\r\n\r\n entries.forEach(\r\n entry => {\r\n\r\n if (\r\n !entry.isIntersecting\r\n ) return;\r\n\r\n\r\n entry.target.dataset.mobileReady =\r\n 'true';\r\n\r\n\r\n mobileStepObserver.unobserve(\r\n entry.target\r\n );\r\n\r\n }\r\n );\r\n\r\n },\r\n {\r\n rootMargin:'0px 0px -18% 0px',\r\n threshold:.04\r\n }\r\n );\r\n\r\n\r\n steps.forEach(\r\n step => {\r\n\r\n if (\r\n step.dataset.mobileReady ===\r\n 'true'\r\n ) return;\r\n\r\n\r\n mobileStepObserver.observe(\r\n step\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n \/* =======================================================\r\n SECTION 06 \u2014 PASSED-CONTENT DEPTH\r\n\r\n This controller is intentionally scoped to this section so it\r\n cannot be skipped or overridden by a differently-versioned\r\n page-level LaminaFocusDepth singleton.\r\n\r\n Behavior:\r\n - upcoming content = sharp\r\n - current reading content = sharp\r\n - once content moves above the focal band, it starts softening\r\n - the farther it moves upward, the slightly stronger the blur\r\n - scrolling back reverses the geometry and restores sharpness\r\n\r\n The effect begins while the passed content is STILL VISIBLE.\r\n ======================================================= *\/\r\n\r\n const passedBlurLayers =\r\n [\r\n ...root.querySelectorAll(\r\n '[data-exit-layer]'\r\n )\r\n ];\r\n\r\n\r\n const passedBlurProfiles =\r\n {\r\n\r\n desktop:{\r\n\r\n eyebrow:{\r\n start:.42,\r\n full:.04,\r\n blur:1.8,\r\n opacityMin:.97\r\n },\r\n\r\n headline:{\r\n start:.44,\r\n full:.03,\r\n blur:2.2,\r\n opacityMin:.97\r\n },\r\n\r\n copy:{\r\n start:.40,\r\n full:.02,\r\n blur:1.65,\r\n opacityMin:.98\r\n },\r\n\r\n ui:{\r\n start:.37,\r\n full:.00,\r\n blur:1.25,\r\n opacityMin:.985\r\n },\r\n\r\n step:{\r\n \/*\r\n A tree step begins softening once its center rises above\r\n ~46% of the viewport \u2014 while it is still clearly visible.\r\n *\/\r\n start:.46,\r\n full:.02,\r\n blur:2.05,\r\n opacityMin:.98\r\n }\r\n\r\n },\r\n\r\n mobile:{\r\n\r\n eyebrow:{\r\n start:.39,\r\n full:.03,\r\n blur:1.45,\r\n opacityMin:.975\r\n },\r\n\r\n headline:{\r\n start:.41,\r\n full:.02,\r\n blur:1.75,\r\n opacityMin:.975\r\n },\r\n\r\n copy:{\r\n start:.37,\r\n full:.01,\r\n blur:1.25,\r\n opacityMin:.985\r\n },\r\n\r\n ui:{\r\n start:.34,\r\n full:0,\r\n blur:.95,\r\n opacityMin:.99\r\n },\r\n\r\n step:{\r\n start:.43,\r\n full:.01,\r\n blur:1.60,\r\n opacityMin:.985\r\n }\r\n\r\n }\r\n\r\n };\r\n\r\n\r\n let passedBlurTicking =\r\n false;\r\n\r\n\r\n let passedBlurNear =\r\n true;\r\n\r\n\r\n function passedBlurClamp(\r\n value,\r\n min,\r\n max\r\n ){\r\n\r\n return Math.min(\r\n max,\r\n Math.max(\r\n min,\r\n value\r\n )\r\n );\r\n\r\n }\r\n\r\n\r\n function passedBlurEase(\r\n value\r\n ){\r\n\r\n const t =\r\n passedBlurClamp(\r\n value,\r\n 0,\r\n 1\r\n );\r\n\r\n\r\n return (\r\n t *\r\n t *\r\n (\r\n 3 -\r\n 2 *\r\n t\r\n )\r\n );\r\n\r\n }\r\n\r\n\r\n function updatePassedBlur(){\r\n\r\n passedBlurTicking =\r\n false;\r\n\r\n\r\n if (\r\n !passedBlurNear\r\n ) return;\r\n\r\n\r\n const vh =\r\n Math.max(\r\n 1,\r\n window.innerHeight ||\r\n document.documentElement.clientHeight\r\n );\r\n\r\n\r\n const set =\r\n window.innerWidth <\r\n 768\r\n ? passedBlurProfiles.mobile\r\n : passedBlurProfiles.desktop;\r\n\r\n\r\n passedBlurLayers.forEach(\r\n element => {\r\n\r\n const type =\r\n element.dataset.exitLayer ||\r\n 'copy';\r\n\r\n\r\n const profile =\r\n set[\r\n type\r\n ] ||\r\n set.copy;\r\n\r\n\r\n const rect =\r\n element.getBoundingClientRect();\r\n\r\n\r\n const center =\r\n rect.top +\r\n rect.height *\r\n .5;\r\n\r\n\r\n const startY =\r\n vh *\r\n profile.start;\r\n\r\n\r\n const fullY =\r\n vh *\r\n profile.full;\r\n\r\n\r\n \/*\r\n Above startY = it has begun leaving the focal reading zone.\r\n At \/ below startY = perfectly sharp.\r\n *\/\r\n let progress =\r\n center <\r\n startY\r\n ? (\r\n startY -\r\n center\r\n ) \/\r\n Math.max(\r\n 1,\r\n startY -\r\n fullY\r\n )\r\n : 0;\r\n\r\n\r\n progress =\r\n passedBlurEase(\r\n progress\r\n );\r\n\r\n\r\n const interactive =\r\n element.matches(\r\n ':hover, :focus-within'\r\n );\r\n\r\n\r\n if (\r\n interactive\r\n ){\r\n\r\n progress =\r\n 0;\r\n\r\n }\r\n\r\n\r\n const blur =\r\n reducedMotion.matches\r\n ? 0\r\n : (\r\n profile.blur *\r\n progress\r\n );\r\n\r\n\r\n const opacity =\r\n reducedMotion.matches\r\n ? 1\r\n : (\r\n 1 -\r\n (\r\n 1 -\r\n profile.opacityMin\r\n ) *\r\n progress\r\n );\r\n\r\n\r\n element.style.setProperty(\r\n '--pt-passed-blur',\r\n blur.toFixed(\r\n 2\r\n ) +\r\n 'px'\r\n );\r\n\r\n\r\n element.style.setProperty(\r\n '--pt-passed-opacity',\r\n opacity.toFixed(\r\n 3\r\n )\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n function requestPassedBlurUpdate(){\r\n\r\n if (\r\n passedBlurTicking\r\n ) return;\r\n\r\n\r\n passedBlurTicking =\r\n true;\r\n\r\n\r\n requestAnimationFrame(\r\n updatePassedBlur\r\n );\r\n\r\n }\r\n\r\n\r\n const passedBlurObserver =\r\n 'IntersectionObserver' in window\r\n ? new IntersectionObserver(\r\n entries => {\r\n\r\n entries.forEach(\r\n entry => {\r\n\r\n passedBlurNear =\r\n entry.isIntersecting;\r\n\r\n\r\n if (\r\n passedBlurNear\r\n ){\r\n\r\n requestPassedBlurUpdate();\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n },\r\n {\r\n rootMargin:'110% 0px 110% 0px',\r\n threshold:0\r\n }\r\n )\r\n : null;\r\n\r\n\r\n passedBlurObserver?.observe(\r\n root\r\n );\r\n\r\n\r\n window.addEventListener(\r\n 'scroll',\r\n requestPassedBlurUpdate,\r\n {\r\n passive:true\r\n }\r\n );\r\n\r\n\r\n window.addEventListener(\r\n 'resize',\r\n requestPassedBlurUpdate,\r\n {\r\n passive:true\r\n }\r\n );\r\n\r\n\r\n \/* =======================================================\r\n MODE \/ MOTION MANAGEMENT\r\n ======================================================= *\/\r\n\r\n function resetEntranceClasses(){\r\n\r\n root.classList.remove(\r\n 'has-desktop-entry',\r\n 'is-desktop-entered',\r\n 'has-mobile-entry'\r\n );\r\n\r\n }\r\n\r\n\r\n function handleModeChange(){\r\n\r\n desktopEntranceObserver?.disconnect();\r\n mobileIntroObserver?.disconnect();\r\n mobileStepObserver?.disconnect();\r\n\r\n\r\n resetEntranceClasses();\r\n\r\n\r\n if (\r\n reducedMotion.matches\r\n ){\r\n\r\n revealAllMobileSteps();\r\n\r\n\r\n root.classList.add(\r\n 'is-mobile-intro-entered'\r\n );\r\n\r\n\r\n requestPassedBlurUpdate();\r\n\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n if (\r\n mobileQuery.matches\r\n ){\r\n\r\n initMobileEntrance();\r\n\r\n }else{\r\n\r\n initDesktopEntrance();\r\n\r\n }\r\n\r\n\r\n requestPassedBlurUpdate();\r\n requestSpineFillUpdate();\r\n\r\n }\r\n\r\n\r\n desktopQuery.addEventListener?.(\r\n 'change',\r\n handleModeChange\r\n );\r\n\r\n\r\n mobileQuery.addEventListener?.(\r\n 'change',\r\n handleModeChange\r\n );\r\n\r\n\r\n reducedMotion.addEventListener?.(\r\n 'change',\r\n handleModeChange\r\n );\r\n\r\n\r\n window.addEventListener(\r\n 'scroll',\r\n requestSpineFillUpdate,\r\n {\r\n passive:true\r\n }\r\n );\r\n\r\n\r\n window.addEventListener(\r\n 'resize',\r\n requestSpineFillUpdate,\r\n {\r\n passive:true\r\n }\r\n );\r\n\r\n\r\n \/* =======================================================\r\n INITIALIZE\r\n ======================================================= *\/\r\n\r\n setBoundContent(\r\n pathData.dental\r\n );\r\n\r\n\r\n if (\r\n reducedMotion.matches\r\n ){\r\n\r\n revealAllMobileSteps();\r\n\r\n }else if(\r\n mobileQuery.matches\r\n ){\r\n\r\n initMobileEntrance();\r\n\r\n }else{\r\n\r\n initDesktopEntrance();\r\n\r\n }\r\n\r\n\r\n requestSpineFillUpdate();\r\n requestPassedBlurUpdate();\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-63f3db3 e-con-full e-flex e-con e-parent\" data-id=\"63f3db3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-48a225e elementor-widget elementor-widget-html\" data-id=\"48a225e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\r\nLAMINA CLINIC \u2014 SECTION 07\r\nYOUR ISTANBUL STAY\r\nCONCEPT: THE ISTANBUL STAY INDEX\r\nV1 \u2014 DARK \/ IMAGE-LED \/ EDITORIAL \/ HOSPITALITY-INSPIRED\r\n\r\nLOCKED LAMINA RULES APPLIED:\r\n- two-part editorial title system\r\n- no Elementor pink\r\n- no sticky \/ no scroll hijack\r\n- no cards \/ no icons \/ no carousel\r\n- active hotel controls stay sharp\r\n- passed content softly blurs only after it is scrolled away\r\n- mobile is independently art-directed\r\n- no fake hotel facts or unverified branch details\r\n\r\nPRODUCTION NOTE:\r\nHotel names below are the working names supplied by Lamina.\r\nExact commercial names \/ branches must be verified before publication.\r\nLamina-approved hotel media supplied and mapped to the five current partner-stay entries.\r\n========================================================= -->\r\n\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=Manrope:wght@400;500;600&display=swap');\r\n\r\n#lamina-istanbul-stay{\r\n --lis-aubergine:#2B142F;\r\n --lis-aubergine-2:#241128;\r\n --lis-aubergine-3:#311635;\r\n --lis-aubergine-4:#341738;\r\n --lis-ink:#171317;\r\n --lis-ivory:#F7F2EA;\r\n --lis-lilac:#C5B2C8;\r\n --lis-orchid:#94709A;\r\n --lis-plum:#5F2468;\r\n --lis-champagne:#D8C4A1;\r\n --lis-rule:rgba(247,242,234,.13);\r\n --lis-rule-soft:rgba(247,242,234,.08);\r\n --lis-ease:cubic-bezier(.16,.70,.18,1);\r\n --lis-stage:1560px;\r\n\r\n --e-global-color-primary:#F7F2EA;\r\n --e-global-color-secondary:#94709A;\r\n --e-global-color-text:#F7F2EA;\r\n --e-global-color-accent:#5F2468;\r\n\r\n position:relative;\r\n width:100%;\r\n overflow:hidden;\r\n\r\n background:\r\n radial-gradient(48% 38% at 86% 10%,rgba(148,112,154,.07),transparent 74%),\r\n linear-gradient(150deg,var(--lis-aubergine-3) 0%,var(--lis-aubergine) 58%,var(--lis-aubergine-2) 100%);\r\n\r\n color:var(--lis-ivory);\r\n font-family:\"Manrope\",system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;\r\n\r\n -webkit-tap-highlight-color:rgba(95,36,104,.10);\r\n}\r\n\r\n#lamina-istanbul-stay *,\r\n#lamina-istanbul-stay *::before,\r\n#lamina-istanbul-stay *::after{\r\n box-sizing:border-box;\r\n}\r\n\r\n#lamina-istanbul-stay ::selection{\r\n background:var(--lis-plum);\r\n color:var(--lis-ivory);\r\n}\r\n\r\n\/* =========================================================\r\n ELEMENTOR \/ THEME COLOR PROTECTION\r\n ========================================================= *\/\r\n#lamina-istanbul-stay a,\r\n#lamina-istanbul-stay a:link,\r\n#lamina-istanbul-stay a:visited,\r\n#lamina-istanbul-stay a:hover,\r\n#lamina-istanbul-stay a:focus,\r\n#lamina-istanbul-stay a:focus-visible,\r\n#lamina-istanbul-stay a:active,\r\n#lamina-istanbul-stay button,\r\n#lamina-istanbul-stay button:hover,\r\n#lamina-istanbul-stay button:focus,\r\n#lamina-istanbul-stay button:focus-visible,\r\n#lamina-istanbul-stay button:active{\r\n font:inherit;\r\n text-decoration-color:var(--lis-plum) !important;\r\n}\r\n\r\n#lamina-istanbul-stay .lis__hotel-btn,\r\n#lamina-istanbul-stay .lis__hotel-btn:visited,\r\n#lamina-istanbul-stay .lis__hotel-btn:hover,\r\n#lamina-istanbul-stay .lis__hotel-btn:focus,\r\n#lamina-istanbul-stay .lis__hotel-btn:focus-visible,\r\n#lamina-istanbul-stay .lis__hotel-btn:active{\r\n background:transparent !important;\r\n border-color:transparent !important;\r\n box-shadow:none !important;\r\n}\r\n\r\n#lamina-istanbul-stay .lis__hotel-btn{\r\n color:rgba(247,242,234,.58) !important;\r\n}\r\n\r\n#lamina-istanbul-stay .lis__hotel-btn:hover{\r\n color:rgba(247,242,234,.58) !important;\r\n}\r\n\r\n#lamina-istanbul-stay .lis__hotel-btn:focus-visible{\r\n color:rgba(247,242,234,.86) !important;\r\n}\r\n\r\n#lamina-istanbul-stay .lis__hotel-btn[aria-pressed=\"true\"],\r\n#lamina-istanbul-stay .lis__hotel-btn[aria-pressed=\"true\"]:hover,\r\n#lamina-istanbul-stay .lis__hotel-btn[aria-pressed=\"true\"]:focus,\r\n#lamina-istanbul-stay .lis__hotel-btn[aria-pressed=\"true\"]:focus-visible,\r\n#lamina-istanbul-stay .lis__hotel-btn[aria-pressed=\"true\"]:active{\r\n color:var(--lis-ivory) !important;\r\n}\r\n\r\n#lamina-istanbul-stay .lis__hotel-btn:focus-visible{\r\n outline:1px solid rgba(197,178,200,.72) !important;\r\n outline-offset:5px !important;\r\n}\r\n\r\n#lamina-istanbul-stay .lis__hotel-btn::before,\r\n#lamina-istanbul-stay .lis__hotel-btn::after{\r\n background-color:var(--lis-plum) !important;\r\n}\r\n\r\n\/* =========================================================\r\n IMAGE LIGHTBOX \u2014 ELEMENTOR \/ THEME ISOLATED\r\n ========================================================= *\/\r\n\r\n#lamina-istanbul-stay .lis__visual-frame{\r\n cursor:zoom-in;\r\n}\r\n\r\n#lamina-istanbul-stay .lis__visual-frame:focus-visible{\r\n outline:1px solid rgba(216,196,161,.78) !important;\r\n outline-offset:5px !important;\r\n}\r\n\r\n\/*\r\n The lightbox is appended directly to <body> by this section's JS so\r\n it cannot be clipped by Elementor containers or this section's\r\n overflow:hidden.\r\n*\/\r\n#lamina-stay-lightbox,\r\n#lamina-stay-lightbox *,\r\n#lamina-stay-lightbox *::before,\r\n#lamina-stay-lightbox *::after{\r\n box-sizing:border-box;\r\n}\r\n\r\n#lamina-stay-lightbox{\r\n --lis-lb-bg:rgba(18,8,20,.94);\r\n --lis-lb-ivory:#F7F2EA;\r\n --lis-lb-orchid:#94709A;\r\n --lis-lb-champagne:#D8C4A1;\r\n\r\n position:fixed !important;\r\n inset:0 !important;\r\n z-index:2147483000 !important;\r\n\r\n display:grid !important;\r\n place-items:center !important;\r\n\r\n width:100vw !important;\r\n height:100dvh !important;\r\n max-width:100vw !important;\r\n max-height:100dvh !important;\r\n margin:0 !important;\r\n padding:clamp(18px,3vw,42px) !important;\r\n overflow:hidden !important;\r\n\r\n background:var(--lis-lb-bg) !important;\r\n border:0 !important;\r\n border-radius:0 !important;\r\n box-shadow:none !important;\r\n\r\n opacity:0;\r\n visibility:hidden;\r\n pointer-events:none;\r\n\r\n transition:\r\n opacity .26s ease,\r\n visibility .26s ease;\r\n\r\n -webkit-backdrop-filter:blur(8px);\r\n backdrop-filter:blur(8px);\r\n\r\n font-family:\"Manrope\",system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif !important;\r\n color:var(--lis-lb-ivory) !important;\r\n -webkit-tap-highlight-color:transparent;\r\n}\r\n\r\n#lamina-stay-lightbox.is-open{\r\n opacity:1;\r\n visibility:visible;\r\n pointer-events:auto;\r\n}\r\n\r\n#lamina-stay-lightbox .lis-lb__dialog{\r\n position:relative !important;\r\n\r\n display:flex !important;\r\n align-items:center !important;\r\n justify-content:center !important;\r\n\r\n \/*\r\n This is the image's absolute viewing box.\r\n It is always smaller than the viewport, leaving safe room for\r\n the close control and outer backdrop on every edge.\r\n *\/\r\n width:calc(100vw - 96px) !important;\r\n height:calc(100dvh - 120px) !important;\r\n max-width:1680px !important;\r\n max-height:1080px !important;\r\n min-width:0 !important;\r\n min-height:0 !important;\r\n\r\n margin:0 !important;\r\n padding:0 !important;\r\n\r\n background:transparent !important;\r\n border:0 !important;\r\n border-radius:0 !important;\r\n box-shadow:none !important;\r\n outline:0 !important;\r\n\r\n \/*\r\n Nothing is intentionally clipped here. The image itself is\r\n mathematically contained inside this box.\r\n *\/\r\n overflow:visible !important;\r\n}\r\n\r\n#lamina-stay-lightbox .lis-lb__image,\r\n#lamina-stay-lightbox .lis-lb__dialog > img.lis-lb__image{\r\n \/*\r\n LOCKED FULL-IMAGE RULE:\r\n fill the viewing box, then contain the original image inside it.\r\n This guarantees the complete image is visible at once.\r\n *\/\r\n display:block !important;\r\n\r\n width:100% !important;\r\n height:100% !important;\r\n min-width:0 !important;\r\n min-height:0 !important;\r\n max-width:100% !important;\r\n max-height:100% !important;\r\n\r\n margin:0 !important;\r\n padding:0 !important;\r\n\r\n object-fit:contain !important;\r\n object-position:50% 50% !important;\r\n\r\n aspect-ratio:auto !important;\r\n\r\n background:transparent !important;\r\n border:0 !important;\r\n border-radius:0 !important;\r\n box-shadow:none !important;\r\n\r\n transform:none !important;\r\n scale:1 !important;\r\n translate:none !important;\r\n clip-path:none !important;\r\n\r\n user-select:none !important;\r\n -webkit-user-drag:none !important;\r\n}\r\n\r\n#lamina-stay-lightbox .lis-lb__close,\r\n#lamina-stay-lightbox .lis-lb__close:link,\r\n#lamina-stay-lightbox .lis-lb__close:visited,\r\n#lamina-stay-lightbox .lis-lb__close:hover,\r\n#lamina-stay-lightbox .lis-lb__close:focus,\r\n#lamina-stay-lightbox .lis-lb__close:focus-visible,\r\n#lamina-stay-lightbox .lis-lb__close:active{\r\n position:fixed !important;\r\n inset-block-start:clamp(14px,2vw,28px) !important;\r\n inset-inline-end:clamp(14px,2vw,28px) !important;\r\n z-index:2 !important;\r\n\r\n display:grid !important;\r\n place-items:center !important;\r\n\r\n width:48px !important;\r\n height:48px !important;\r\n min-width:48px !important;\r\n min-height:48px !important;\r\n\r\n margin:0 !important;\r\n padding:0 !important;\r\n\r\n appearance:none !important;\r\n -webkit-appearance:none !important;\r\n\r\n background:rgba(247,242,234,.08) !important;\r\n color:var(--lis-lb-ivory) !important;\r\n -webkit-text-fill-color:var(--lis-lb-ivory) !important;\r\n\r\n border:1px solid rgba(247,242,234,.20) !important;\r\n border-radius:999px !important;\r\n box-shadow:none !important;\r\n outline:0 !important;\r\n\r\n font-family:\"Manrope\",sans-serif !important;\r\n font-size:0 !important;\r\n line-height:1 !important;\r\n font-weight:400 !important;\r\n text-decoration:none !important;\r\n text-shadow:none !important;\r\n\r\n cursor:pointer !important;\r\n\r\n transition:\r\n background-color .22s ease,\r\n border-color .22s ease,\r\n transform .22s ease !important;\r\n}\r\n\r\n#lamina-stay-lightbox .lis-lb__close:hover{\r\n background:rgba(148,112,154,.22) !important;\r\n border-color:rgba(216,196,161,.62) !important;\r\n transform:scale(1.035) !important;\r\n}\r\n\r\n#lamina-stay-lightbox .lis-lb__close:focus-visible{\r\n outline:2px solid var(--lis-lb-champagne) !important;\r\n outline-offset:4px !important;\r\n}\r\n\r\n#lamina-stay-lightbox .lis-lb__close::before,\r\n#lamina-stay-lightbox .lis-lb__close::after{\r\n content:\"\" !important;\r\n position:absolute !important;\r\n\r\n width:20px !important;\r\n height:1.5px !important;\r\n\r\n background:var(--lis-lb-ivory) !important;\r\n border:0 !important;\r\n border-radius:999px !important;\r\n\r\n transform-origin:center !important;\r\n}\r\n\r\n#lamina-stay-lightbox .lis-lb__close::before{\r\n transform:rotate(45deg) !important;\r\n}\r\n\r\n#lamina-stay-lightbox .lis-lb__close::after{\r\n transform:rotate(-45deg) !important;\r\n}\r\n\r\n#lamina-stay-lightbox .lis-lb__hint{\r\n position:fixed !important;\r\n inset-inline:0 !important;\r\n inset-block-end:clamp(14px,2vw,26px) !important;\r\n\r\n margin:0 !important;\r\n padding:0 70px !important;\r\n\r\n color:rgba(247,242,234,.60) !important;\r\n -webkit-text-fill-color:rgba(247,242,234,.60) !important;\r\n\r\n background:transparent !important;\r\n\r\n font-family:\"Manrope\",sans-serif !important;\r\n font-size:10px !important;\r\n line-height:1.4 !important;\r\n font-weight:600 !important;\r\n letter-spacing:.12em !important;\r\n text-transform:uppercase !important;\r\n text-align:center !important;\r\n text-decoration:none !important;\r\n text-shadow:none !important;\r\n\r\n pointer-events:none !important;\r\n}\r\n\r\nbody.lis-lightbox-open{\r\n overflow:hidden !important;\r\n}\r\n\r\n@media (max-width:899px){\r\n\r\n #lamina-stay-lightbox{\r\n padding:62px 14px 48px !important;\r\n -webkit-backdrop-filter:none;\r\n backdrop-filter:none;\r\n }\r\n\r\n #lamina-stay-lightbox .lis-lb__dialog{\r\n width:calc(100vw - 28px) !important;\r\n height:calc(100dvh - 128px) !important;\r\n max-width:calc(100vw - 28px) !important;\r\n max-height:calc(100dvh - 128px) !important;\r\n min-width:0 !important;\r\n min-height:0 !important;\r\n overflow:visible !important;\r\n }\r\n\r\n #lamina-stay-lightbox .lis-lb__image,\r\n #lamina-stay-lightbox .lis-lb__dialog > img.lis-lb__image{\r\n width:100% !important;\r\n height:100% !important;\r\n max-width:100% !important;\r\n max-height:100% !important;\r\n object-fit:contain !important;\r\n object-position:50% 50% !important;\r\n transform:none !important;\r\n clip-path:none !important;\r\n }\r\n\r\n #lamina-stay-lightbox .lis-lb__close,\r\n #lamina-stay-lightbox .lis-lb__close:hover,\r\n #lamina-stay-lightbox .lis-lb__close:focus,\r\n #lamina-stay-lightbox .lis-lb__close:focus-visible,\r\n #lamina-stay-lightbox .lis-lb__close:active{\r\n width:44px !important;\r\n height:44px !important;\r\n min-width:44px !important;\r\n min-height:44px !important;\r\n }\r\n\r\n #lamina-stay-lightbox .lis-lb__hint{\r\n inset-block-end:12px !important;\r\n padding-inline:54px !important;\r\n font-size:9px !important;\r\n }\r\n\r\n}\r\n\r\n@media (prefers-reduced-motion:reduce){\r\n\r\n #lamina-stay-lightbox,\r\n #lamina-stay-lightbox .lis-lb__close{\r\n transition:none !important;\r\n }\r\n\r\n}\r\n\r\n\/* =========================================================\r\n SHELL\r\n ========================================================= *\/\r\n.lis__shell{\r\n width:min(100%,1720px);\r\n margin-inline:auto;\r\n padding:\r\n clamp(78px,8.5vh,112px)\r\n clamp(22px,3.4vw,66px)\r\n clamp(94px,10vh,132px);\r\n}\r\n\r\n\/* =========================================================\r\n INTRO\r\n ========================================================= *\/\r\n.lis__intro{\r\n width:min(100%,var(--lis-stage));\r\n margin-inline:auto;\r\n\r\n display:grid;\r\n grid-template-columns:minmax(0,.56fr) minmax(280px,.34fr);\r\n justify-content:space-between;\r\n gap:clamp(72px,9vw,150px);\r\n align-items:end;\r\n\r\n margin-bottom:clamp(46px,5.5vh,68px);\r\n}\r\n\r\n.lis__eyebrow{\r\n margin:0 0 16px;\r\n\r\n color:rgba(197,178,200,.82);\r\n\r\n font-size:clamp(11px,.70vw,13px);\r\n line-height:1.2;\r\n font-weight:600;\r\n letter-spacing:.17em;\r\n text-transform:uppercase;\r\n}\r\n\r\n.lis__title{\r\n margin:0;\r\n max-width:8.8ch;\r\n overflow:visible;\r\n\r\n font-family:\"Cormorant Garamond\",Georgia,serif;\r\n font-size:clamp(68px,6vw,108px);\r\n line-height:1;\r\n font-weight:400;\r\n letter-spacing:-.050em;\r\n}\r\n\r\n.lis__title-line{\r\n display:block;\r\n width:max-content;\r\n max-width:100%;\r\n line-height:.88;\r\n}\r\n\r\n.lis__title-line + .lis__title-line{\r\n margin-top:-.045em;\r\n}\r\n\r\n.lis__title-line--accent{\r\n margin-top:.035em !important;\r\n padding-inline-end:.055em;\r\n padding-bottom:.075em;\r\n\r\n color:var(--lis-orchid);\r\n\r\n font-style:italic;\r\n letter-spacing:-.038em;\r\n line-height:.92;\r\n}\r\n\r\n.lis__support-wrap{\r\n max-width:42ch;\r\n justify-self:end;\r\n}\r\n\r\n.lis__support{\r\n margin:0;\r\n\r\n color:rgba(247,242,234,.76);\r\n\r\n font-size:clamp(15px,1vw,18px);\r\n line-height:1.72;\r\n}\r\n\r\n.lis__micro{\r\n margin:18px 0 0;\r\n\r\n color:rgba(197,178,200,.56);\r\n\r\n font-size:11px;\r\n line-height:1.2;\r\n font-weight:600;\r\n letter-spacing:.14em;\r\n text-transform:uppercase;\r\n}\r\n\r\n\/* =========================================================\r\n HOSPITALITY STAGE\r\n ========================================================= *\/\r\n.lis__stage{\r\n width:min(100%,var(--lis-stage));\r\n margin-inline:auto;\r\n\r\n display:grid;\r\n grid-template-columns:minmax(0,1fr) minmax(260px,24%);\r\n gap:clamp(30px,3.5vw,58px);\r\n align-items:stretch;\r\n}\r\n\r\n.lis__visual{\r\n position:relative;\r\n min-width:0;\r\n}\r\n\r\n.lis__visual-frame{\r\n position:relative;\r\n overflow:hidden;\r\n\r\n width:100%;\r\n aspect-ratio:1.72 \/ 1;\r\n min-height:clamp(430px,51vh,620px);\r\n max-height:650px;\r\n\r\n background:\r\n radial-gradient(70% 70% at 56% 36%,rgba(148,112,154,.16),transparent 68%),\r\n linear-gradient(145deg,#3B1C40 0%,#27132C 68%,#1F101F 100%);\r\n\r\n border:1px solid rgba(247,242,234,.055);\r\n}\r\n\r\n.lis__visual-frame::before{\r\n content:\"\";\r\n\r\n position:absolute;\r\n inset:0;\r\n z-index:1;\r\n\r\n pointer-events:none;\r\n\r\n background:\r\n linear-gradient(180deg,rgba(43,20,47,.02),rgba(43,20,47,.18));\r\n}\r\n\r\n.lis__image-layer{\r\n position:absolute;\r\n inset:0;\r\n\r\n width:100%;\r\n height:100%;\r\n\r\n opacity:0;\r\n\r\n clip-path:inset(0 0 8% 0);\r\n\r\n transform:scale(1.008);\r\n\r\n will-change:opacity, transform, clip-path;\r\n}\r\n\r\n.lis__image-layer.is-current{\r\n opacity:1;\r\n clip-path:inset(0);\r\n transform:scale(1);\r\n}\r\n\r\n.lis__image-layer img{\r\n width:100%;\r\n height:100%;\r\n display:block;\r\n\r\n object-fit:cover;\r\n object-position:var(--lis-object-position,50% 50%);\r\n\r\n user-select:none;\r\n pointer-events:none;\r\n}\r\n\r\n.lis__image-layer.is-fallback{\r\n display:grid;\r\n place-items:center;\r\n}\r\n\r\n.lis__fallback-inner{\r\n position:absolute;\r\n inset:11%;\r\n\r\n border:1px solid rgba(247,242,234,.08);\r\n}\r\n\r\n.lis__fallback-copy{\r\n position:relative;\r\n z-index:2;\r\n\r\n width:min(78%,560px);\r\n\r\n color:rgba(247,242,234,.42);\r\n\r\n text-align:center;\r\n}\r\n\r\n.lis__fallback-kicker{\r\n display:block;\r\n margin-bottom:12px;\r\n\r\n color:rgba(197,178,200,.62);\r\n\r\n font-size:11px;\r\n font-weight:600;\r\n letter-spacing:.14em;\r\n text-transform:uppercase;\r\n}\r\n\r\n.lis__fallback-title{\r\n display:block;\r\n\r\n font-family:\"Cormorant Garamond\",Georgia,serif;\r\n font-size:clamp(34px,3.2vw,52px);\r\n line-height:.98;\r\n font-weight:400;\r\n letter-spacing:-.03em;\r\n}\r\n\r\n.lis__caption{\r\n position:absolute;\r\n z-index:4;\r\n inset-inline-start:18px;\r\n inset-block-end:16px;\r\n\r\n max-width:68%;\r\n\r\n color:rgba(247,242,234,.84);\r\n\r\n font-size:11px;\r\n line-height:1.35;\r\n font-weight:600;\r\n letter-spacing:.12em;\r\n text-transform:uppercase;\r\n}\r\n\r\n.lis__caption span{\r\n color:rgba(197,178,200,.62);\r\n}\r\n\r\n\/* =========================================================\r\n HOTEL INDEX\r\n ========================================================= *\/\r\n.lis__index{\r\n display:flex;\r\n flex-direction:column;\r\n justify-content:stretch;\r\n min-width:0;\r\n}\r\n\r\n.lis__hotel-btn{\r\n position:relative;\r\n\r\n flex:1 1 0;\r\n\r\n display:grid;\r\n grid-template-columns:34px minmax(0,1fr);\r\n gap:14px;\r\n align-items:center;\r\n\r\n width:100%;\r\n min-height:68px;\r\n padding:\r\n clamp(15px,2.1vh,24px)\r\n 0;\r\n\r\n border:0;\r\n border-bottom:1px solid var(--lis-rule) !important;\r\n border-radius:0 !important;\r\n\r\n cursor:pointer;\r\n appearance:none;\r\n\r\n text-align:start;\r\n\r\n transition:\r\n color .42s ease,\r\n opacity .42s ease,\r\n border-color .42s ease;\r\n}\r\n\r\n.lis__hotel-btn:first-child{\r\n border-top:1px solid var(--lis-rule) !important;\r\n}\r\n\r\n.lis__hotel-btn::before{\r\n content:\"\";\r\n\r\n position:absolute;\r\n\r\n inset-inline-start:0;\r\n inset-block-start:50%;\r\n\r\n width:0;\r\n height:1px;\r\n\r\n opacity:0;\r\n\r\n transform:translateY(-50%);\r\n\r\n transition:\r\n width .50s var(--lis-ease),\r\n opacity .34s ease;\r\n}\r\n\r\n.lis__hotel-btn[aria-pressed=\"true\"]::before{\r\n width:24px;\r\n opacity:1;\r\n}\r\n\r\n.lis__hotel-btn[aria-pressed=\"true\"]{\r\n border-bottom-color:rgba(247,242,234,.23) !important;\r\n}\r\n\r\n.lis__hotel-no{\r\n color:rgba(197,178,200,.60);\r\n\r\n font-size:10.5px;\r\n line-height:1;\r\n font-weight:600;\r\n letter-spacing:.12em;\r\n\r\n transition:color .38s ease;\r\n}\r\n\r\n.lis__hotel-btn[aria-pressed=\"true\"] .lis__hotel-no{\r\n color:var(--lis-orchid);\r\n}\r\n\r\n.lis__hotel-name{\r\n font-family:\"Cormorant Garamond\",Georgia,serif;\r\n font-size:clamp(25px,1.9vw,33px);\r\n line-height:1;\r\n font-weight:400;\r\n letter-spacing:-.022em;\r\n}\r\n\r\n.lis__hotel-verify{\r\n display:block;\r\n margin-top:5px;\r\n\r\n color:rgba(197,178,200,.40);\r\n\r\n font-family:\"Manrope\",sans-serif;\r\n font-size:10px;\r\n line-height:1.25;\r\n font-weight:500;\r\n letter-spacing:.06em;\r\n text-transform:uppercase;\r\n}\r\n\r\n\/* =========================================================\r\n LOGISTICS STRIP\r\n ========================================================= *\/\r\n.lis__logistics{\r\n width:min(100%,var(--lis-stage));\r\n margin:\r\n clamp(46px,5.5vh,66px)\r\n auto\r\n 0;\r\n\r\n border-top:1px solid var(--lis-rule);\r\n border-bottom:1px solid var(--lis-rule);\r\n\r\n display:grid;\r\n grid-template-columns:repeat(3,minmax(0,1fr));\r\n}\r\n\r\n.lis__logistics-item{\r\n position:relative;\r\n padding:\r\n clamp(28px,3.8vh,42px)\r\n clamp(24px,2.8vw,42px)\r\n clamp(30px,4.1vh,46px);\r\n\r\n min-width:0;\r\n}\r\n\r\n.lis__logistics-item + .lis__logistics-item{\r\n border-inline-start:1px solid var(--lis-rule);\r\n}\r\n\r\n.lis__logistics-kicker{\r\n display:block;\r\n margin-bottom:14px;\r\n\r\n color:rgba(197,178,200,.62);\r\n\r\n font-size:clamp(11.5px,.78vw,13px);\r\n line-height:1.2;\r\n font-weight:600;\r\n letter-spacing:.135em;\r\n text-transform:uppercase;\r\n}\r\n\r\n.lis__logistics-title{\r\n margin:0;\r\n\r\n color:var(--lis-ivory);\r\n\r\n font-family:\"Cormorant Garamond\",Georgia,serif;\r\n font-size:clamp(28px,2.2vw,37px);\r\n line-height:.98;\r\n font-weight:400;\r\n letter-spacing:-.025em;\r\n}\r\n\r\n.lis__logistics-copy{\r\n margin:13px 0 0;\r\n\r\n max-width:42ch;\r\n\r\n color:rgba(247,242,234,.63);\r\n\r\n font-size:clamp(13px,.88vw,15px);\r\n line-height:1.62;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n INCLUDED EXPERIENCE \u2014 FIVE-FILM CINEMATIC LOOP\r\n ========================================================= *\/\r\n\r\n.lis__included{\r\n width:min(100%,var(--lis-stage));\r\n margin:clamp(88px,9.5vh,132px) auto 0;\r\n padding-top:clamp(58px,6.8vh,86px);\r\n border-top:1px solid var(--lis-rule);\r\n position:relative;\r\n}\r\n\r\n.lis__included::before{\r\n content:\"\";\r\n position:absolute;\r\n inset-inline:7%;\r\n top:16%;\r\n height:34%;\r\n pointer-events:none;\r\n background:\r\n radial-gradient(\r\n ellipse at center,\r\n rgba(148,112,154,.12) 0%,\r\n rgba(95,36,104,.055) 38%,\r\n transparent 74%\r\n );\r\n filter:blur(44px);\r\n}\r\n\r\n.lis__included-head{\r\n position:relative;\r\n z-index:2;\r\n\r\n display:grid;\r\n grid-template-columns:minmax(0,.56fr) minmax(300px,.32fr);\r\n justify-content:space-between;\r\n align-items:end;\r\n gap:clamp(62px,8vw,132px);\r\n\r\n margin-bottom:clamp(48px,6vh,74px);\r\n}\r\n\r\n.lis__included-kicker{\r\n margin:0 0 15px;\r\n\r\n color:rgba(197,178,200,.76)!important;\r\n -webkit-text-fill-color:rgba(197,178,200,.76)!important;\r\n\r\n font-family:\"Manrope\",sans-serif!important;\r\n font-size:clamp(11px,.70vw,13px)!important;\r\n line-height:1.2!important;\r\n font-weight:600!important;\r\n letter-spacing:.17em!important;\r\n text-transform:uppercase!important;\r\n}\r\n\r\n.lis__included-title{\r\n margin:0;\r\n max-width:8.5ch;\r\n\r\n color:var(--lis-ivory)!important;\r\n -webkit-text-fill-color:var(--lis-ivory)!important;\r\n\r\n font-family:\"Cormorant Garamond\",Georgia,serif!important;\r\n font-size:clamp(60px,5.4vw,98px)!important;\r\n line-height:.89!important;\r\n font-weight:400!important;\r\n letter-spacing:-.052em!important;\r\n}\r\n\r\n.lis__included-title em{\r\n display:block;\r\n margin-top:.015em;\r\n\r\n color:var(--lis-orchid)!important;\r\n -webkit-text-fill-color:var(--lis-orchid)!important;\r\n\r\n font-style:italic!important;\r\n font-weight:400!important;\r\n letter-spacing:-.038em!important;\r\n}\r\n\r\n.lis__included-copy{\r\n margin:0;\r\n max-width:40ch;\r\n\r\n color:rgba(247,242,234,.72)!important;\r\n -webkit-text-fill-color:rgba(247,242,234,.72)!important;\r\n\r\n font-family:\"Manrope\",sans-serif!important;\r\n font-size:clamp(14px,.98vw,17px)!important;\r\n line-height:1.74!important;\r\n}\r\n\r\n.lis__included-note{\r\n display:flex;\r\n flex-wrap:wrap;\r\n gap:7px 14px;\r\n margin-top:20px;\r\n\r\n color:var(--lis-champagne)!important;\r\n -webkit-text-fill-color:var(--lis-champagne)!important;\r\n\r\n font-family:\"Manrope\",sans-serif!important;\r\n font-size:10px!important;\r\n line-height:1.35!important;\r\n font-weight:600!important;\r\n letter-spacing:.12em!important;\r\n text-transform:uppercase!important;\r\n}\r\n\r\n.lis__included-note span{\r\n position:relative;\r\n}\r\n\r\n.lis__included-note span + span::before{\r\n content:\"\";\r\n position:absolute;\r\n left:-8px;\r\n top:50%;\r\n width:3px;\r\n height:3px;\r\n border-radius:999px;\r\n background:rgba(216,196,161,.60);\r\n transform:translateY(-50%);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n FIVE-FILM LOOP \u2014 CLEAN \/ FRAMELESS \/ MEDIA-FIRST\r\n ========================================================= *\/\r\n\r\n.lis__vehicle-gallery{\r\n position:relative;\r\n z-index:2;\r\n width:100%;\r\n}\r\n\r\n\/*\r\n Explicitly no decorative side treatment.\r\n No vintage wash, vignette, grain, tint or pseudo overlay.\r\n*\/\r\n.lis__vehicle-gallery::before,\r\n.lis__vehicle-gallery::after{\r\n content:none!important;\r\n display:none!important;\r\n}\r\n\r\n\r\n\/* ---------------------------------------------------------\r\n HEADER\r\n --------------------------------------------------------- *\/\r\n\r\n.lis__vehicle-gallery-head{\r\n display:flex;\r\n align-items:flex-end;\r\n justify-content:space-between;\r\n gap:28px;\r\n margin-bottom:18px;\r\n}\r\n\r\n.lis__vehicle-gallery-copy{\r\n max-width:46ch;\r\n}\r\n\r\n.lis__vehicle-gallery-kicker{\r\n display:block;\r\n margin-bottom:9px;\r\n\r\n color:rgba(216,196,161,.76)!important;\r\n -webkit-text-fill-color:rgba(216,196,161,.76)!important;\r\n\r\n font-family:\"Manrope\",sans-serif!important;\r\n font-size:9.5px!important;\r\n line-height:1!important;\r\n font-weight:600!important;\r\n letter-spacing:.15em!important;\r\n text-transform:uppercase!important;\r\n}\r\n\r\n.lis__vehicle-gallery-title{\r\n margin:0;\r\n\r\n color:var(--lis-ivory)!important;\r\n -webkit-text-fill-color:var(--lis-ivory)!important;\r\n\r\n font-family:\"Cormorant Garamond\",Georgia,serif!important;\r\n font-size:clamp(32px,3vw,50px)!important;\r\n line-height:.96!important;\r\n font-weight:400!important;\r\n letter-spacing:-.032em!important;\r\n}\r\n\r\n\r\n\/* ---------------------------------------------------------\r\n PAGE-EDGE ARROWS\r\n --------------------------------------------------------- *\/\r\n\r\n.lis__vehicle-loop-controls{\r\n position:absolute;\r\n z-index:20;\r\n\r\n left:50%;\r\n top:51%;\r\n\r\n width:100vw;\r\n\r\n display:flex;\r\n justify-content:space-between;\r\n\r\n padding-inline:clamp(16px,2.4vw,38px);\r\n\r\n transform:translate(-50%,-50%);\r\n\r\n pointer-events:none;\r\n}\r\n\r\n#lamina-istanbul-stay .lis__vehicle-loop-btn{\r\n position:relative;\r\n\r\n display:grid;\r\n place-items:center;\r\n\r\n width:42px;\r\n height:42px;\r\n min-width:42px;\r\n min-height:42px;\r\n\r\n padding:0!important;\r\n\r\n border:0!important;\r\n border-radius:999px!important;\r\n\r\n background:rgba(36,17,40,.50)!important;\r\n\r\n color:var(--lis-ivory)!important;\r\n -webkit-text-fill-color:var(--lis-ivory)!important;\r\n\r\n box-shadow:none!important;\r\n\r\n cursor:pointer;\r\n pointer-events:auto;\r\n\r\n -webkit-backdrop-filter:blur(8px);\r\n backdrop-filter:blur(8px);\r\n\r\n transition:\r\n background-color .24s ease,\r\n transform .24s ease!important;\r\n}\r\n\r\n#lamina-istanbul-stay .lis__vehicle-loop-btn:hover,\r\n#lamina-istanbul-stay .lis__vehicle-loop-btn:focus-visible{\r\n background:rgba(95,36,104,.70)!important;\r\n transform:scale(1.055);\r\n}\r\n\r\n#lamina-istanbul-stay .lis__vehicle-loop-btn:focus-visible{\r\n outline:1px solid rgba(216,196,161,.72)!important;\r\n outline-offset:3px!important;\r\n}\r\n\r\n.lis__vehicle-loop-btn::before{\r\n content:\"\";\r\n\r\n width:9px;\r\n height:9px;\r\n\r\n border-top:1.5px solid currentColor;\r\n border-right:1.5px solid currentColor;\r\n}\r\n\r\n.lis__vehicle-loop-btn[data-vehicle-prev]::before{\r\n transform:rotate(-135deg);\r\n margin-left:3px;\r\n}\r\n\r\n.lis__vehicle-loop-btn[data-vehicle-next]::before{\r\n transform:rotate(45deg);\r\n margin-right:3px;\r\n}\r\n\r\n\r\n\/* ---------------------------------------------------------\r\n DESKTOP STAGE\r\n --------------------------------------------------------- *\/\r\n\r\n.lis__vehicle-track{\r\n position:relative;\r\n\r\n display:block;\r\n\r\n width:100%;\r\n min-height:clamp(540px,63vw,730px);\r\n\r\n overflow:visible;\r\n\r\n transform:\r\n translate3d(\r\n var(--vehicle-drag-x,0px),\r\n 0,\r\n 0\r\n );\r\n\r\n transition:\r\n transform .44s cubic-bezier(.22,.72,.18,1);\r\n\r\n cursor:grab;\r\n user-select:none;\r\n}\r\n\r\n.lis__vehicle-track.is-mouse-dragging{\r\n cursor:grabbing;\r\n transition:none;\r\n}\r\n\r\n.lis__vehicle-card{\r\n position:absolute;\r\n\r\n left:50%;\r\n top:50%;\r\n\r\n width:17.6%;\r\n\r\n min-width:0;\r\n\r\n opacity:\r\n var(--vehicle-opacity,.48);\r\n\r\n transform:\r\n translate3d(\r\n calc(-50% + var(--vehicle-x,0%)),\r\n -50%,\r\n 0\r\n )\r\n scale(\r\n var(--vehicle-scale,.78)\r\n );\r\n\r\n transform-origin:center center;\r\n\r\n transition:\r\n transform .68s cubic-bezier(.22,.78,.18,1),\r\n opacity .42s ease;\r\n\r\n will-change:transform,opacity;\r\n\r\n cursor:pointer;\r\n\r\n \/*\r\n Structural element only.\r\n It must never become a visual box.\r\n *\/\r\n margin:0!important;\r\n padding:0!important;\r\n\r\n background:transparent!important;\r\n\r\n border:0!important;\r\n border-radius:0!important;\r\n\r\n outline:0!important;\r\n\r\n box-shadow:none!important;\r\n}\r\n\r\n.lis__vehicle-card.is-teleporting{\r\n transition:none!important;\r\n}\r\n\r\n.lis__vehicle-card.is-active{\r\n z-index:5;\r\n cursor:default;\r\n}\r\n\r\n.lis__vehicle-card.is-near{\r\n z-index:3;\r\n}\r\n\r\n.lis__vehicle-card.is-far{\r\n z-index:2;\r\n}\r\n\r\n\r\n\/*\r\n FIRST-PAINT FALLBACK\r\n These values match the JS slot map exactly, so the five\r\n portraits are correctly placed before JavaScript executes.\r\n*\/\r\n.lis__vehicle-card:nth-child(1){\r\n --vehicle-x:0%;\r\n --vehicle-scale:1.18;\r\n --vehicle-opacity:1;\r\n}\r\n\r\n.lis__vehicle-card:nth-child(2){\r\n --vehicle-x:118%;\r\n --vehicle-scale:.98;\r\n --vehicle-opacity:.78;\r\n}\r\n\r\n.lis__vehicle-card:nth-child(3){\r\n --vehicle-x:236%;\r\n --vehicle-scale:.78;\r\n --vehicle-opacity:.48;\r\n}\r\n\r\n.lis__vehicle-card:nth-child(4){\r\n --vehicle-x:-236%;\r\n --vehicle-scale:.78;\r\n --vehicle-opacity:.48;\r\n}\r\n\r\n.lis__vehicle-card:nth-child(5){\r\n --vehicle-x:-118%;\r\n --vehicle-scale:.98;\r\n --vehicle-opacity:.78;\r\n}\r\n\r\n\r\n\/* ---------------------------------------------------------\r\n MEDIA GEOMETRY\r\n The wrapper is invisible and exists only to crop the\r\n encoded dark rim visible inside the supplied video frame.\r\n --------------------------------------------------------- *\/\r\n\r\n.lis__vehicle-media,\r\n.lis__vehicle-card.is-active .lis__vehicle-media,\r\n.lis__vehicle-card.is-near .lis__vehicle-media,\r\n.lis__vehicle-card.is-far .lis__vehicle-media{\r\n position:relative;\r\n\r\n width:100%;\r\n aspect-ratio:9 \/ 16;\r\n\r\n margin:0!important;\r\n padding:0!important;\r\n\r\n overflow:hidden!important;\r\n\r\n background:transparent!important;\r\n\r\n border:0!important;\r\n outline:0!important;\r\n\r\n border-radius:22px!important;\r\n\r\n box-shadow:none!important;\r\n\r\n filter:none!important;\r\n}\r\n\r\n.lis__vehicle-media::before,\r\n.lis__vehicle-media::after{\r\n content:none!important;\r\n display:none!important;\r\n}\r\n\r\n\r\n\/* ---------------------------------------------------------\r\n VIDEO = THE VISIBLE PORTRAIT\r\n Slight overscan removes the actual dark rim visible in\r\n the supplied rendered frame. No CSS frame is drawn.\r\n --------------------------------------------------------- *\/\r\n\r\n.lis__vehicle-video,\r\n.lis__vehicle-card.is-active .lis__vehicle-video,\r\n.lis__vehicle-card.is-near .lis__vehicle-video,\r\n.lis__vehicle-card.is-far .lis__vehicle-video{\r\n position:absolute!important;\r\n\r\n left:50%!important;\r\n top:50%!important;\r\n\r\n display:block!important;\r\n\r\n width:106%!important;\r\n height:106%!important;\r\n\r\n max-width:none!important;\r\n max-height:none!important;\r\n\r\n margin:0!important;\r\n padding:0!important;\r\n\r\n object-fit:cover!important;\r\n object-position:center!important;\r\n\r\n transform:\r\n translate(-50%,-50%)!important;\r\n\r\n background:transparent!important;\r\n\r\n border:0!important;\r\n outline:0!important;\r\n\r\n border-radius:24px!important;\r\n\r\n box-shadow:none!important;\r\n}\r\n\r\n\/*\r\n Focus hierarchy only.\r\n No vintage tint, color wash, vignette or visible frame.\r\n*\/\r\n.lis__vehicle-card.is-far .lis__vehicle-video{\r\n filter:blur(3.6px)!important;\r\n}\r\n\r\n.lis__vehicle-card.is-near .lis__vehicle-video{\r\n filter:blur(1.8px)!important;\r\n}\r\n\r\n.lis__vehicle-card.is-active .lis__vehicle-video{\r\n filter:none!important;\r\n}\r\n\r\n\/* ---------------------------------------------------------\r\n FULLSCREEN CONTROL \u2014 ACTIVE VIDEO ONLY\r\n --------------------------------------------------------- *\/\r\n\r\n#lamina-istanbul-stay .lis__vehicle-fullscreen{\r\n position:absolute;\r\n z-index:8;\r\n\r\n top:10px;\r\n right:10px;\r\n\r\n display:grid;\r\n place-items:center;\r\n\r\n width:36px;\r\n height:36px;\r\n min-width:36px;\r\n min-height:36px;\r\n\r\n padding:0!important;\r\n\r\n border:0!important;\r\n border-radius:11px!important;\r\n\r\n background:rgba(24,10,27,.52)!important;\r\n\r\n color:var(--lis-ivory)!important;\r\n -webkit-text-fill-color:var(--lis-ivory)!important;\r\n\r\n box-shadow:none!important;\r\n\r\n cursor:pointer;\r\n\r\n -webkit-backdrop-filter:blur(8px);\r\n backdrop-filter:blur(8px);\r\n\r\n transition:\r\n background-color .22s ease,\r\n transform .22s ease!important;\r\n}\r\n\r\n#lamina-istanbul-stay .lis__vehicle-fullscreen:hover,\r\n#lamina-istanbul-stay .lis__vehicle-fullscreen:focus-visible{\r\n background:rgba(95,36,104,.74)!important;\r\n transform:scale(1.04);\r\n}\r\n\r\n#lamina-istanbul-stay .lis__vehicle-fullscreen:focus-visible{\r\n outline:1px solid rgba(216,196,161,.72)!important;\r\n outline-offset:3px!important;\r\n}\r\n\r\n.lis__vehicle-fullscreen svg{\r\n width:16px;\r\n height:16px;\r\n\r\n fill:none!important;\r\n stroke:currentColor!important;\r\n stroke-width:1.65;\r\n stroke-linecap:round;\r\n stroke-linejoin:round;\r\n}\r\n\r\n#lamina-istanbul-stay .lis__vehicle-card:not(.is-active) .lis__vehicle-fullscreen{\r\n display:none!important;\r\n}\r\n\r\n#lamina-istanbul-stay .lis__vehicle-card.is-active .lis__vehicle-fullscreen{\r\n display:grid!important;\r\n}\r\n\r\n\r\n\/* ---------------------------------------------------------\r\n FULLSCREEN CLOSE\r\n --------------------------------------------------------- *\/\r\n\r\n#lamina-istanbul-stay .lis__vehicle-fs-close{\r\n display:none;\r\n\r\n position:fixed;\r\n z-index:2147483647;\r\n\r\n top:max(18px,env(safe-area-inset-top));\r\n right:max(18px,env(safe-area-inset-right));\r\n\r\n width:48px;\r\n height:48px;\r\n min-width:48px;\r\n min-height:48px;\r\n\r\n padding:0!important;\r\n\r\n border:1px solid rgba(247,242,234,.22)!important;\r\n border-radius:999px!important;\r\n\r\n background:rgba(20,9,22,.66)!important;\r\n\r\n color:var(--lis-ivory)!important;\r\n -webkit-text-fill-color:var(--lis-ivory)!important;\r\n\r\n box-shadow:none!important;\r\n\r\n cursor:pointer;\r\n\r\n -webkit-backdrop-filter:blur(12px);\r\n backdrop-filter:blur(12px);\r\n}\r\n\r\n.lis__vehicle-fs-close::before,\r\n.lis__vehicle-fs-close::after{\r\n content:\"\";\r\n\r\n position:absolute;\r\n left:50%;\r\n top:50%;\r\n\r\n width:20px;\r\n height:1.5px;\r\n\r\n background:currentColor;\r\n\r\n transform-origin:center;\r\n}\r\n\r\n.lis__vehicle-fs-close::before{\r\n transform:translate(-50%,-50%) rotate(45deg);\r\n}\r\n\r\n.lis__vehicle-fs-close::after{\r\n transform:translate(-50%,-50%) rotate(-45deg);\r\n}\r\n\r\n\r\n\/* ---------------------------------------------------------\r\n CAPTIONS\r\n --------------------------------------------------------- *\/\r\n\r\n.lis__vehicle-foot{\r\n display:flex;\r\n align-items:flex-start;\r\n justify-content:space-between;\r\n gap:10px;\r\n\r\n padding:12px 2px 0;\r\n\r\n opacity:.58;\r\n\r\n transition:opacity .30s ease;\r\n}\r\n\r\n.lis__vehicle-card.is-near .lis__vehicle-foot{\r\n opacity:.76;\r\n}\r\n\r\n.lis__vehicle-card.is-active .lis__vehicle-foot{\r\n opacity:1;\r\n}\r\n\r\n.lis__vehicle-title{\r\n margin:0;\r\n\r\n color:var(--lis-ivory)!important;\r\n -webkit-text-fill-color:var(--lis-ivory)!important;\r\n\r\n font-family:\"Cormorant Garamond\",Georgia,serif!important;\r\n font-size:clamp(18px,1.5vw,27px)!important;\r\n line-height:.98!important;\r\n font-weight:400!important;\r\n letter-spacing:-.025em!important;\r\n}\r\n\r\n.lis__vehicle-meta{\r\n flex:0 0 auto;\r\n\r\n padding-top:3px;\r\n\r\n color:rgba(216,196,161,.58)!important;\r\n -webkit-text-fill-color:rgba(216,196,161,.58)!important;\r\n\r\n font-family:\"Manrope\",sans-serif!important;\r\n font-size:8.5px!important;\r\n line-height:1.2!important;\r\n font-weight:600!important;\r\n letter-spacing:.11em!important;\r\n text-transform:uppercase!important;\r\n}\r\n\r\n.lis__vehicle-statusline{\r\n display:flex;\r\n justify-content:center;\r\n align-items:center;\r\n gap:10px;\r\n\r\n margin-top:5px;\r\n\r\n color:rgba(197,178,200,.52)!important;\r\n -webkit-text-fill-color:rgba(197,178,200,.52)!important;\r\n\r\n font-family:\"Manrope\",sans-serif!important;\r\n font-size:9px!important;\r\n line-height:1.2!important;\r\n font-weight:600!important;\r\n letter-spacing:.12em!important;\r\n text-transform:uppercase!important;\r\n}\r\n\r\n.lis__vehicle-statusline::before{\r\n content:\"\";\r\n\r\n width:5px;\r\n height:5px;\r\n\r\n border-radius:999px;\r\n\r\n background:var(--lis-champagne);\r\n}\r\n\r\n\r\n\/* ---------------------------------------------------------\r\n FULLSCREEN\r\n --------------------------------------------------------- *\/\r\n\r\n.lis__vehicle-card:fullscreen,\r\n.lis__vehicle-card:-webkit-full-screen{\r\n display:grid!important;\r\n place-items:center!important;\r\n\r\n width:100vw!important;\r\n height:100vh!important;\r\n\r\n margin:0!important;\r\n padding:0!important;\r\n\r\n background:#000!important;\r\n\r\n border:0!important;\r\n border-radius:0!important;\r\n\r\n opacity:1!important;\r\n\r\n transform:none!important;\r\n}\r\n\r\n.lis__vehicle-card:fullscreen .lis__vehicle-media,\r\n.lis__vehicle-card:-webkit-full-screen .lis__vehicle-media{\r\n display:grid!important;\r\n place-items:center!important;\r\n\r\n width:100vw!important;\r\n height:100vh!important;\r\n\r\n margin:0!important;\r\n padding:0!important;\r\n\r\n background:#000!important;\r\n\r\n border:0!important;\r\n border-radius:0!important;\r\n\r\n box-shadow:none!important;\r\n}\r\n\r\n.lis__vehicle-card:fullscreen .lis__vehicle-video,\r\n.lis__vehicle-card:-webkit-full-screen .lis__vehicle-video{\r\n position:static!important;\r\n\r\n width:auto!important;\r\n height:100vh!important;\r\n\r\n max-width:100vw!important;\r\n max-height:100vh!important;\r\n\r\n aspect-ratio:auto!important;\r\n\r\n margin:0!important;\r\n\r\n object-fit:contain!important;\r\n object-position:center!important;\r\n\r\n transform:none!important;\r\n\r\n background:#000!important;\r\n\r\n border:0!important;\r\n border-radius:0!important;\r\n\r\n filter:none!important;\r\n box-shadow:none!important;\r\n}\r\n\r\n.lis__vehicle-card:fullscreen .lis__vehicle-fullscreen,\r\n.lis__vehicle-card:-webkit-full-screen .lis__vehicle-fullscreen,\r\n.lis__vehicle-card:fullscreen .lis__vehicle-foot,\r\n.lis__vehicle-card:-webkit-full-screen .lis__vehicle-foot{\r\n display:none!important;\r\n}\r\n\r\n.lis__vehicle-card:fullscreen .lis__vehicle-fs-close,\r\n.lis__vehicle-card:-webkit-full-screen .lis__vehicle-fs-close{\r\n display:grid!important;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n MOBILE \u2014 NORMAL SWIPE REEL\r\n ========================================================= *\/\r\n\r\n@media (max-width:899px){\r\n\r\n .lis__vehicle-loop-controls{\r\n display:none;\r\n }\r\n\r\n .lis__vehicle-track{\r\n display:flex;\r\n\r\n width:auto;\r\n min-height:0;\r\n\r\n gap:14px;\r\n\r\n margin-inline:-20px;\r\n\r\n padding:\r\n 8px\r\n 20px\r\n 20px;\r\n\r\n overflow-x:auto;\r\n overflow-y:visible;\r\n\r\n scroll-snap-type:x proximity;\r\n scroll-padding-inline:20px;\r\n scroll-behavior:smooth;\r\n\r\n overscroll-behavior-inline:contain;\r\n\r\n scrollbar-width:none;\r\n -webkit-overflow-scrolling:touch;\r\n\r\n touch-action:pan-x pan-y;\r\n\r\n cursor:auto;\r\n user-select:auto;\r\n\r\n transform:none!important;\r\n transition:none!important;\r\n }\r\n\r\n .lis__vehicle-track::-webkit-scrollbar{\r\n display:none;\r\n }\r\n\r\n .lis__vehicle-card,\r\n .lis__vehicle-card.is-near,\r\n .lis__vehicle-card.is-active,\r\n .lis__vehicle-card.is-far{\r\n position:relative!important;\r\n\r\n left:auto!important;\r\n top:auto!important;\r\n\r\n flex:0 0 min(76vw,330px);\r\n width:auto!important;\r\n\r\n opacity:1!important;\r\n\r\n transform:none!important;\r\n\r\n margin:0!important;\r\n padding:0!important;\r\n\r\n background:transparent!important;\r\n\r\n border:0!important;\r\n border-radius:0!important;\r\n\r\n box-shadow:none!important;\r\n\r\n scroll-snap-align:center;\r\n scroll-snap-stop:normal;\r\n\r\n cursor:default;\r\n }\r\n\r\n .lis__vehicle-media,\r\n .lis__vehicle-card.is-active .lis__vehicle-media,\r\n .lis__vehicle-card.is-near .lis__vehicle-media,\r\n .lis__vehicle-card.is-far .lis__vehicle-media{\r\n margin:0!important;\r\n padding:0!important;\r\n\r\n background:transparent!important;\r\n\r\n border:0!important;\r\n border-radius:0!important;\r\n\r\n box-shadow:none!important;\r\n }\r\n\r\n .lis__vehicle-video,\r\n .lis__vehicle-card.is-active .lis__vehicle-video,\r\n .lis__vehicle-card.is-near .lis__vehicle-video,\r\n .lis__vehicle-card.is-far .lis__vehicle-video{\r\n position:absolute!important;\r\n\r\n left:50%!important;\r\n top:50%!important;\r\n\r\n width:104%!important;\r\n height:104%!important;\r\n\r\n max-width:none!important;\r\n max-height:none!important;\r\n\r\n object-fit:cover!important;\r\n object-position:center!important;\r\n\r\n transform:translate(-50%,-50%)!important;\r\n\r\n filter:none!important;\r\n\r\n background:transparent!important;\r\n\r\n border:0!important;\r\n\r\n box-shadow:none!important;\r\n }\r\n\r\n .lis__vehicle-foot{\r\n opacity:1;\r\n }\r\n\r\n .lis__vehicle-statusline{\r\n justify-content:flex-start;\r\n margin-top:3px;\r\n }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n SMALL MOBILE\r\n ========================================================= *\/\r\n\r\n@media (max-width:420px){\r\n\r\n .lis__vehicle-track{\r\n margin-inline:-18px;\r\n\r\n padding-inline:18px;\r\n\r\n scroll-padding-inline:18px;\r\n }\r\n\r\n .lis__vehicle-card,\r\n .lis__vehicle-card.is-near,\r\n .lis__vehicle-card.is-active,\r\n .lis__vehicle-card.is-far{\r\n flex-basis:min(82vw,315px);\r\n }\r\n\r\n #lamina-istanbul-stay .lis__vehicle-fullscreen{\r\n width:36px;\r\n height:36px;\r\n min-width:36px;\r\n min-height:36px;\r\n }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n REDUCED MOTION\r\n ========================================================= *\/\r\n\r\n@media (prefers-reduced-motion:reduce){\r\n\r\n .lis__vehicle-card,\r\n .lis__vehicle-track,\r\n #lamina-istanbul-stay .lis__vehicle-loop-btn{\r\n transition:none!important;\r\n }\r\n\r\n}\r\n\r\n\/* =========================================================\r\n SERVICE EDITION \u2014 PATIENT JOURNEY STEPS\r\n ========================================================= *\/\r\n\r\n.lis__service-edition{\r\n position:relative;\r\n z-index:1;\r\n\r\n margin:0 0 clamp(68px,7.2vh,96px);\r\n padding:0 0 clamp(42px,5vh,60px);\r\n\r\n border-bottom:1px solid var(--lis-rule);\r\n}\r\n\r\n\r\n\/* ---------------------------------------------------------\r\n COMPACT INTRO\r\n One quiet heading, not another oversized hero.\r\n --------------------------------------------------------- *\/\r\n\r\n.lis__service-intro{\r\n display:grid;\r\n grid-template-columns:minmax(0,.48fr) minmax(300px,.34fr);\r\n justify-content:space-between;\r\n align-items:end;\r\n gap:clamp(38px,5vw,78px);\r\n\r\n margin:0 0 clamp(34px,4.2vh,48px);\r\n padding:0;\r\n\r\n border:0;\r\n border-radius:0;\r\n background:transparent;\r\n box-shadow:none;\r\n}\r\n\r\n.lis__service-intro-main{\r\n min-width:0;\r\n}\r\n\r\n.lis__service-intro-kicker{\r\n display:inline-flex;\r\n align-items:center;\r\n gap:10px;\r\n\r\n margin:0 0 12px;\r\n\r\n color:rgba(216,196,161,.82)!important;\r\n -webkit-text-fill-color:rgba(216,196,161,.82)!important;\r\n\r\n font-family:\"Manrope\",sans-serif!important;\r\n font-size:9.5px!important;\r\n line-height:1!important;\r\n font-weight:600!important;\r\n letter-spacing:.15em!important;\r\n text-transform:uppercase!important;\r\n}\r\n\r\n.lis__service-intro-kicker::before{\r\n content:\"\";\r\n\r\n width:34px;\r\n height:1px;\r\n\r\n background:rgba(216,196,161,.46);\r\n}\r\n\r\n.lis__service-intro-title{\r\n margin:0;\r\n max-width:18ch;\r\n\r\n color:var(--lis-ivory)!important;\r\n -webkit-text-fill-color:var(--lis-ivory)!important;\r\n\r\n font-family:\"Cormorant Garamond\",Georgia,serif!important;\r\n font-size:clamp(34px,3vw,50px)!important;\r\n line-height:.98!important;\r\n font-weight:400!important;\r\n letter-spacing:-.032em!important;\r\n}\r\n\r\n.lis__service-intro-side{\r\n min-width:0;\r\n}\r\n\r\n.lis__service-intro-copy{\r\n margin:0;\r\n max-width:42ch;\r\n\r\n color:rgba(247,242,234,.66)!important;\r\n -webkit-text-fill-color:rgba(247,242,234,.66)!important;\r\n\r\n font-family:\"Manrope\",sans-serif!important;\r\n font-size:clamp(13px,.9vw,15px)!important;\r\n line-height:1.70!important;\r\n}\r\n\r\n\/* Old chip row is not needed in the step design. *\/\r\n.lis__service-chiplist{\r\n display:none!important;\r\n}\r\n\r\n\r\n\/* ---------------------------------------------------------\r\n STEP RAIL\r\n Equal-sized compact media, clear 01 \u2192 04 sequence.\r\n --------------------------------------------------------- *\/\r\n\r\n.lis__service-grid{\r\n position:relative;\r\n\r\n display:grid;\r\n grid-template-columns:repeat(2,minmax(0,1fr));\r\n column-gap:clamp(30px,3vw,48px);\r\n row-gap:clamp(42px,5vh,62px);\r\n\r\n width:100%;\r\n}\r\n\r\n\/* 2x2 layout: no single line spanning unrelated rows *\/\r\n.lis__service-grid::before{\r\n content:none;\r\n display:none;\r\n}\r\n\r\n\r\n.lis__service-card{\r\n position:relative;\r\n\r\n display:grid;\r\n grid-template-columns:minmax(190px,40%) minmax(0,1fr);\r\n grid-template-rows:auto auto;\r\n column-gap:clamp(20px,2.2vw,32px);\r\n row-gap:16px;\r\n\r\n min-width:0;\r\n min-height:0;\r\n\r\n margin:0;\r\n padding:0 0 clamp(8px,1vw,14px);\r\n\r\n overflow:visible;\r\n\r\n border:0;\r\n border-radius:0;\r\n\r\n background:transparent;\r\n\r\n box-shadow:none;\r\n\r\n isolation:isolate;\r\n\r\n transition:\r\n transform .42s var(--lis-ease);\r\n}\r\n\r\n.lis__service-card:hover{\r\n transform:translateY(-4px);\r\n\r\n border-color:transparent;\r\n box-shadow:none;\r\n}\r\n\r\n\r\n\/* step node *\/\r\n.lis__service-topline{\r\n position:relative;\r\n z-index:3;\r\n\r\n grid-column:1 \/ -1;\r\n grid-row:1;\r\n\r\n display:flex;\r\n align-items:center;\r\n justify-content:space-between;\r\n gap:12px;\r\n\r\n width:100%;\r\n\r\n margin:0;\r\n padding:0 0 12px;\r\n\r\n border-bottom:1px solid rgba(247,242,234,.07);\r\n}\r\n\r\n.lis__service-number{\r\n position:relative;\r\n\r\n display:grid;\r\n place-items:center;\r\n\r\n flex:0 0 40px;\r\n\r\n width:40px;\r\n height:40px;\r\n\r\n border:1px solid rgba(216,196,161,.44);\r\n border-radius:999px;\r\n\r\n background:var(--lis-aubergine);\r\n\r\n color:var(--lis-champagne)!important;\r\n -webkit-text-fill-color:var(--lis-champagne)!important;\r\n\r\n font-family:\"Manrope\",sans-serif!important;\r\n font-size:11px!important;\r\n line-height:1!important;\r\n font-style:normal!important;\r\n font-weight:600!important;\r\n letter-spacing:.08em!important;\r\n\r\n transition:\r\n background-color .34s ease,\r\n border-color .34s ease,\r\n transform .34s var(--lis-ease);\r\n}\r\n\r\n.lis__service-card:hover .lis__service-number{\r\n background:var(--lis-plum);\r\n border-color:rgba(216,196,161,.72);\r\n transform:scale(1.04);\r\n}\r\n\r\n.lis__service-pill{\r\n display:inline-flex;\r\n align-items:center;\r\n justify-content:flex-end;\r\n\r\n margin:0;\r\n padding:0;\r\n\r\n border:0;\r\n border-radius:0;\r\n\r\n background:transparent;\r\n\r\n color:rgba(247,242,234,.48)!important;\r\n -webkit-text-fill-color:rgba(247,242,234,.48)!important;\r\n\r\n font-family:\"Manrope\",sans-serif!important;\r\n font-size:10px!important;\r\n line-height:1!important;\r\n font-weight:600!important;\r\n letter-spacing:.12em!important;\r\n text-transform:uppercase!important;\r\n}\r\n\r\n.lis__service-pill::before{\r\n display:none;\r\n}\r\n\r\n\r\n\/* ---------------------------------------------------------\r\n EQUAL MEDIA FRAMES\r\n All four are intentionally the same compact dimensions.\r\n --------------------------------------------------------- *\/\r\n\r\n.lis__service-media{\r\n position:relative;\r\n\r\n grid-column:1;\r\n grid-row:2;\r\n\r\n width:100%;\r\n height:clamp(152px,12vw,178px);\r\n min-height:0;\r\n aspect-ratio:auto;\r\n\r\n margin:0;\r\n padding:0;\r\n\r\n overflow:hidden;\r\n\r\n border:1px solid rgba(247,242,234,.08);\r\n border-radius:16px;\r\n\r\n background:rgba(247,242,234,.035);\r\n\r\n box-shadow:\r\n 0 14px 34px rgba(7,2,9,.10);\r\n\r\n isolation:isolate;\r\n}\r\n\r\n.lis__service-media::after{\r\n content:\"\";\r\n\r\n position:absolute;\r\n inset:0;\r\n z-index:2;\r\n\r\n background:\r\n linear-gradient(\r\n 180deg,\r\n rgba(20,9,22,.02) 0%,\r\n rgba(20,9,22,.06) 52%,\r\n rgba(20,9,22,.18) 100%\r\n );\r\n\r\n pointer-events:none;\r\n}\r\n\r\n.lis__service-media img{\r\n position:absolute;\r\n inset:0;\r\n\r\n display:block;\r\n\r\n width:100%;\r\n height:100%;\r\n\r\n object-fit:cover;\r\n object-position:center;\r\n\r\n transform:\r\n translate3d(\r\n 0,\r\n var(--service-image-y,0px),\r\n 0\r\n )\r\n scale(1.015);\r\n\r\n filter:\r\n saturate(.96)\r\n contrast(1.025);\r\n\r\n transition:\r\n transform .72s cubic-bezier(.16,.74,.18,1),\r\n filter .42s ease;\r\n}\r\n\r\n.lis__service-card:hover .lis__service-media img,\r\n.lis__service-card:focus-within .lis__service-media img{\r\n transform:\r\n translate3d(\r\n 0,\r\n var(--service-image-y,0px),\r\n 0\r\n )\r\n scale(1.055);\r\n\r\n filter:\r\n saturate(1.01)\r\n contrast(1.045);\r\n}\r\n\r\n\r\n\/* ---------------------------------------------------------\r\n STEP COPY\r\n --------------------------------------------------------- *\/\r\n\r\n.lis__service-body{\r\n grid-column:2;\r\n grid-row:2;\r\n\r\n display:flex;\r\n flex-direction:column;\r\n justify-content:center;\r\n align-items:flex-start;\r\n\r\n min-width:0;\r\n min-height:0;\r\n\r\n padding:2px 0;\r\n}\r\n\r\n.lis__service-kicker{\r\n display:block;\r\n\r\n margin:0 0 8px;\r\n\r\n color:rgba(216,196,161,.76)!important;\r\n -webkit-text-fill-color:rgba(216,196,161,.76)!important;\r\n\r\n font-family:\"Manrope\",sans-serif!important;\r\n font-size:11px!important;\r\n line-height:1.15!important;\r\n font-weight:600!important;\r\n letter-spacing:.14em!important;\r\n text-transform:uppercase!important;\r\n}\r\n\r\n.lis__service-title{\r\n margin:0;\r\n min-height:0;\r\n max-width:15ch;\r\n\r\n color:var(--lis-ivory)!important;\r\n -webkit-text-fill-color:var(--lis-ivory)!important;\r\n\r\n font-family:\"Cormorant Garamond\",Georgia,serif!important;\r\n font-size:clamp(25px,1.8vw,32px)!important;\r\n line-height:1!important;\r\n font-weight:400!important;\r\n letter-spacing:-.026em!important;\r\n}\r\n\r\n.lis__service-note{\r\n margin:11px 0 0;\r\n max-width:36ch;\r\n\r\n color:rgba(247,242,234,.58)!important;\r\n -webkit-text-fill-color:rgba(247,242,234,.58)!important;\r\n\r\n font-family:\"Manrope\",sans-serif!important;\r\n font-size:11.5px!important;\r\n line-height:1.58!important;\r\n}\r\n\r\n.lis__service-detail{\r\n margin:14px 0 0;\r\n padding:0;\r\n\r\n color:rgba(247,242,234,.44)!important;\r\n -webkit-text-fill-color:rgba(247,242,234,.44)!important;\r\n\r\n font-family:\"Manrope\",sans-serif!important;\r\n font-size:8.5px!important;\r\n line-height:1.35!important;\r\n font-weight:600!important;\r\n letter-spacing:.10em!important;\r\n text-transform:uppercase!important;\r\n}\r\n\r\n\r\n\/* ---------------------------------------------------------\r\n TABLET\r\n --------------------------------------------------------- *\/\r\n\r\n@media (min-width:900px) and (max-width:1180px){\r\n\r\n .lis__service-intro{\r\n grid-template-columns:minmax(0,1fr);\r\n gap:18px;\r\n }\r\n\r\n .lis__service-grid{\r\n grid-template-columns:repeat(2,minmax(0,1fr));\r\n column-gap:20px;\r\n row-gap:34px;\r\n }\r\n\r\n .lis__service-grid::before{\r\n display:none;\r\n }\r\n\r\n .lis__service-card{\r\n display:flex;\r\n flex-direction:column;\r\n gap:0;\r\n padding-top:0;\r\n }\r\n\r\n .lis__service-topline{\r\n margin-bottom:14px;\r\n }\r\n\r\n .lis__service-media{\r\n width:100%;\r\n height:150px;\r\n margin:0 0 16px;\r\n }\r\n\r\n .lis__service-body{\r\n display:flex;\r\n padding:0;\r\n }\r\n\r\n .lis__service-title{\r\n font-size:clamp(26px,2.8vw,34px)!important;\r\n }\r\n\r\n}\r\n\r\n\r\n\/* ---------------------------------------------------------\r\n MOBILE \u2014 VERTICAL JOURNEY\r\n Same image dimensions for every step.\r\n --------------------------------------------------------- *\/\r\n\r\n@media (max-width:899px){\r\n\r\n .lis__service-edition{\r\n margin:0 0 56px;\r\n padding:0 0 36px;\r\n }\r\n\r\n .lis__service-intro{\r\n display:block;\r\n\r\n margin-bottom:28px;\r\n }\r\n\r\n .lis__service-intro-title{\r\n max-width:15ch;\r\n font-size:clamp(31px,8.4vw,40px)!important;\r\n }\r\n\r\n .lis__service-intro-copy{\r\n max-width:36ch;\r\n margin-top:14px;\r\n }\r\n\r\n .lis__service-grid{\r\n display:block;\r\n }\r\n\r\n .lis__service-grid::before{\r\n display:none;\r\n }\r\n\r\n .lis__service-card{\r\n position:relative;\r\n\r\n display:grid;\r\n grid-template-columns:44px minmax(0,1fr);\r\n grid-template-rows:auto auto;\r\n column-gap:16px;\r\n row-gap:0;\r\n\r\n padding:0 0 28px;\r\n }\r\n\r\n .lis__service-card:last-child{\r\n padding-bottom:0;\r\n }\r\n\r\n \/* vertical connector *\/\r\n .lis__service-card:not(:last-child)::after{\r\n content:\"\";\r\n\r\n position:absolute;\r\n left:20px;\r\n top:41px;\r\n bottom:0;\r\n\r\n width:1px;\r\n\r\n background:\r\n linear-gradient(\r\n 180deg,\r\n rgba(216,196,161,.52),\r\n rgba(216,196,161,.12)\r\n );\r\n\r\n pointer-events:none;\r\n }\r\n\r\n .lis__service-topline{\r\n grid-column:1;\r\n grid-row:1 \/ span 2;\r\n\r\n display:block;\r\n\r\n margin:0;\r\n padding:0;\r\n\r\n border-bottom:0;\r\n }\r\n\r\n .lis__service-number{\r\n width:40px;\r\n height:40px;\r\n }\r\n\r\n .lis__service-pill{\r\n display:none;\r\n }\r\n\r\n .lis__service-media{\r\n grid-column:2;\r\n grid-row:1;\r\n\r\n width:100%;\r\n height:clamp(132px,34vw,156px);\r\n\r\n margin:0 0 14px;\r\n\r\n border-radius:14px;\r\n }\r\n\r\n .lis__service-body{\r\n grid-column:2;\r\n grid-row:2;\r\n\r\n padding:0;\r\n }\r\n\r\n .lis__service-title{\r\n max-width:16ch;\r\n font-size:clamp(27px,7.6vw,34px)!important;\r\n }\r\n\r\n .lis__service-note{\r\n max-width:none;\r\n }\r\n\r\n .lis__service-detail{\r\n margin-top:11px;\r\n }\r\n\r\n}\r\n\r\n\r\n@media (max-width:420px){\r\n\r\n .lis__service-card{\r\n grid-template-columns:40px minmax(0,1fr);\r\n column-gap:13px;\r\n padding-bottom:24px;\r\n }\r\n\r\n .lis__service-card:not(:last-child)::after{\r\n left:18px;\r\n }\r\n\r\n .lis__service-number{\r\n width:36px;\r\n height:36px;\r\n font-size:9px!important;\r\n }\r\n\r\n .lis__service-media{\r\n height:132px;\r\n }\r\n\r\n .lis__service-title{\r\n font-size:clamp(26px,7.8vw,32px)!important;\r\n }\r\n\r\n}\r\n\r\n\/* =========================================================\r\n TOP SUPPORT MOTION SYSTEM\r\n ========================================================= *\/\r\n\r\n\/*\r\n Initial reveal states are applied only after JS adds\r\n .has-service-motion. This prevents a flash of hidden content\r\n if JavaScript is delayed or unavailable.\r\n*\/\r\n#lamina-istanbul-stay.has-service-motion .lis__service-intro{\r\n opacity:0;\r\n transform:translate3d(0,24px,0);\r\n filter:blur(7px);\r\n}\r\n\r\n#lamina-istanbul-stay.has-service-motion .lis__service-intro-main{\r\n opacity:0;\r\n transform:translate3d(-18px,0,0);\r\n}\r\n\r\n#lamina-istanbul-stay.has-service-motion .lis__service-intro-side{\r\n opacity:0;\r\n transform:translate3d(18px,0,0);\r\n}\r\n\r\n#lamina-istanbul-stay.has-service-motion .lis__service-card{\r\n opacity:0;\r\n\r\n transform:\r\n translate3d(\r\n 0,\r\n calc(\r\n 30px +\r\n var(--service-scroll-y,0px)\r\n ),\r\n 0\r\n )\r\n scale(.992);\r\n\r\n filter:blur(6px);\r\n}\r\n\r\n\r\n\/* reveal *\/\r\n#lamina-istanbul-stay.has-service-motion.service-motion-ready .lis__service-intro{\r\n opacity:1;\r\n transform:translate3d(0,0,0);\r\n filter:blur(0);\r\n\r\n transition:\r\n opacity .72s cubic-bezier(.16,.74,.18,1),\r\n transform .86s cubic-bezier(.16,.74,.18,1),\r\n filter .74s ease;\r\n}\r\n\r\n#lamina-istanbul-stay.has-service-motion.service-motion-ready .lis__service-intro-main{\r\n opacity:1;\r\n transform:translate3d(0,0,0);\r\n\r\n transition:\r\n opacity .62s cubic-bezier(.16,.74,.18,1) .08s,\r\n transform .76s cubic-bezier(.16,.74,.18,1) .08s;\r\n}\r\n\r\n#lamina-istanbul-stay.has-service-motion.service-motion-ready .lis__service-intro-side{\r\n opacity:1;\r\n transform:translate3d(0,0,0);\r\n\r\n transition:\r\n opacity .62s cubic-bezier(.16,.74,.18,1) .16s,\r\n transform .76s cubic-bezier(.16,.74,.18,1) .16s;\r\n}\r\n\r\n#lamina-istanbul-stay.has-service-motion.service-motion-ready .lis__service-card{\r\n opacity:1;\r\n\r\n transform:\r\n translate3d(\r\n 0,\r\n var(--service-scroll-y,0px),\r\n 0\r\n )\r\n scale(1);\r\n\r\n filter:blur(0);\r\n\r\n transition:\r\n opacity .70s cubic-bezier(.16,.74,.18,1) var(--service-delay,0s),\r\n transform .88s cubic-bezier(.16,.74,.18,1) var(--service-delay,0s),\r\n filter .72s ease var(--service-delay,0s),\r\n border-color .34s ease,\r\n box-shadow .34s ease;\r\n}\r\n\r\n#lamina-istanbul-stay.has-service-motion.service-motion-ready\r\n.lis__service-card:nth-child(1){\r\n --service-delay:.10s;\r\n}\r\n\r\n#lamina-istanbul-stay.has-service-motion.service-motion-ready\r\n.lis__service-card:nth-child(2){\r\n --service-delay:.18s;\r\n}\r\n\r\n#lamina-istanbul-stay.has-service-motion.service-motion-ready\r\n.lis__service-card:nth-child(3){\r\n --service-delay:.26s;\r\n}\r\n\r\n#lamina-istanbul-stay.has-service-motion.service-motion-ready\r\n.lis__service-card:nth-child(4){\r\n --service-delay:.34s;\r\n}\r\n\r\n\r\n\/* polished hover *\/\r\n#lamina-istanbul-stay.service-motion-ready .lis__service-card{\r\n --service-hover-y:0px;\r\n}\r\n\r\n#lamina-istanbul-stay.service-motion-ready .lis__service-card:hover,\r\n#lamina-istanbul-stay.service-motion-ready .lis__service-card:focus-within{\r\n transform:\r\n translate3d(\r\n 0,\r\n calc(\r\n var(--service-scroll-y,0px) -\r\n 7px\r\n ),\r\n 0\r\n )\r\n scale(1.002);\r\n\r\n border-color:rgba(216,196,161,.22);\r\n\r\n box-shadow:\r\n 0 30px 70px rgba(7,2,9,.22),\r\n inset 0 1px 0 rgba(255,255,255,.045);\r\n}\r\n\r\n\r\n\/* image motion is independent from the card shell *\/\r\n.lis__service-media{\r\n --service-image-y:0px;\r\n}\r\n\r\n.lis__service-media img{\r\n transform:\r\n translate3d(\r\n 0,\r\n var(--service-image-y,0px),\r\n 0\r\n )\r\n scale(1.025);\r\n\r\n transition:\r\n transform .82s cubic-bezier(.16,.74,.18,1),\r\n filter .50s ease;\r\n}\r\n\r\n.lis__service-card:hover .lis__service-media img,\r\n.lis__service-card:focus-within .lis__service-media img{\r\n transform:\r\n translate3d(\r\n 0,\r\n var(--service-image-y,0px),\r\n 0\r\n )\r\n scale(1.065);\r\n\r\n filter:\r\n saturate(1.03)\r\n contrast(1.045);\r\n}\r\n\r\n\r\n\/* subtle line \/ chip feedback *\/\r\n.lis__service-pill,\r\n.lis__service-chip{\r\n transition:\r\n transform .34s cubic-bezier(.16,.74,.18,1),\r\n border-color .30s ease,\r\n background-color .30s ease,\r\n color .30s ease;\r\n}\r\n\r\n.lis__service-card:hover .lis__service-pill,\r\n.lis__service-card:focus-within .lis__service-pill{\r\n transform:translate3d(0,-2px,0);\r\n border-color:rgba(216,196,161,.30);\r\n background:rgba(216,196,161,.08);\r\n}\r\n\r\n.lis__service-chip:hover{\r\n transform:translate3d(0,-2px,0);\r\n border-color:rgba(216,196,161,.28);\r\n background:rgba(216,196,161,.08);\r\n}\r\n\r\n\r\n\/* text breathes very slightly on card hover *\/\r\n.lis__service-title,\r\n.lis__service-note,\r\n.lis__service-detail,\r\n.lis__service-number{\r\n transition:\r\n transform .46s cubic-bezier(.16,.74,.18,1),\r\n opacity .34s ease,\r\n color .34s ease;\r\n}\r\n\r\n.lis__service-card:hover .lis__service-title,\r\n.lis__service-card:focus-within .lis__service-title{\r\n transform:translate3d(0,-2px,0);\r\n}\r\n\r\n.lis__service-card:hover .lis__service-detail,\r\n.lis__service-card:focus-within .lis__service-detail{\r\n transform:translate3d(0,2px,0);\r\n}\r\n\r\n\r\n\/* desktop-only scroll drift *\/\r\n@media (min-width:900px){\r\n #lamina-istanbul-stay.service-scroll-active .lis__service-card{\r\n transform:\r\n translate3d(\r\n 0,\r\n var(--service-scroll-y,0px),\r\n 0\r\n )\r\n scale(1);\r\n }\r\n\r\n #lamina-istanbul-stay.service-scroll-active\r\n .lis__service-card:hover,\r\n #lamina-istanbul-stay.service-scroll-active\r\n .lis__service-card:focus-within{\r\n transform:\r\n translate3d(\r\n 0,\r\n calc(\r\n var(--service-scroll-y,0px) -\r\n 7px\r\n ),\r\n 0\r\n )\r\n scale(1.002);\r\n }\r\n}\r\n\r\n\r\n\/* mobile = entrance only; no scroll-driven movement *\/\r\n@media (max-width:899px){\r\n #lamina-istanbul-stay .lis__service-card,\r\n #lamina-istanbul-stay .lis__service-media{\r\n --service-scroll-y:0px!important;\r\n --service-image-y:0px!important;\r\n }\r\n\r\n #lamina-istanbul-stay.service-scroll-active .lis__service-card{\r\n transform:none;\r\n }\r\n\r\n #lamina-istanbul-stay.service-scroll-active\r\n .lis__service-card:hover,\r\n #lamina-istanbul-stay.service-scroll-active\r\n .lis__service-card:focus-within{\r\n transform:translate3d(0,-4px,0) scale(1.004);\r\n }\r\n}\r\n\r\n\r\n\/* reduced motion = fully static *\/\r\n@media (prefers-reduced-motion:reduce){\r\n #lamina-istanbul-stay.has-service-motion .lis__service-intro,\r\n #lamina-istanbul-stay.has-service-motion .lis__service-intro-main,\r\n #lamina-istanbul-stay.has-service-motion .lis__service-intro-side,\r\n #lamina-istanbul-stay.has-service-motion .lis__service-card{\r\n opacity:1!important;\r\n transform:none!important;\r\n filter:none!important;\r\n transition:none!important;\r\n }\r\n\r\n #lamina-istanbul-stay .lis__service-media img,\r\n #lamina-istanbul-stay .lis__service-pill,\r\n #lamina-istanbul-stay .lis__service-chip,\r\n #lamina-istanbul-stay .lis__service-title,\r\n #lamina-istanbul-stay .lis__service-note,\r\n #lamina-istanbul-stay .lis__service-detail,\r\n #lamina-istanbul-stay .lis__service-number{\r\n transform:none!important;\r\n transition:none!important;\r\n }\r\n}\r\n\r\n.lis__package-band{\r\n display:grid;\r\n grid-template-columns:auto minmax(0,1fr);\r\n gap:clamp(20px,2.4vw,34px);\r\n align-items:center;\r\n\r\n margin-top:clamp(38px,4.8vh,56px);\r\n padding:clamp(26px,3vw,36px) 0;\r\n\r\n border-top:1px solid var(--lis-rule);\r\n border-bottom:1px solid var(--lis-rule);\r\n}\r\n\r\n.lis__package-mark{\r\n color:var(--lis-champagne)!important;\r\n -webkit-text-fill-color:var(--lis-champagne)!important;\r\n\r\n font-family:\"Cormorant Garamond\",Georgia,serif!important;\r\n font-size:clamp(48px,4.4vw,72px)!important;\r\n line-height:.8!important;\r\n font-style:italic!important;\r\n font-weight:400!important;\r\n}\r\n\r\n.lis__package-copy{\r\n margin:0;\r\n max-width:72ch;\r\n\r\n color:rgba(247,242,234,.72)!important;\r\n -webkit-text-fill-color:rgba(247,242,234,.72)!important;\r\n\r\n font-family:\"Manrope\",sans-serif!important;\r\n font-size:clamp(13px,.9vw,15px)!important;\r\n line-height:1.64!important;\r\n}\r\n\r\n.lis__package-copy strong{\r\n color:var(--lis-ivory)!important;\r\n -webkit-text-fill-color:var(--lis-ivory)!important;\r\n font-weight:600!important;\r\n}\r\n\r\n@media (min-width:900px) and (max-width:1180px){\r\n .lis__service-intro{\r\n grid-template-columns:minmax(0,1fr);\r\n gap:18px;\r\n }\r\n\r\n .lis__service-grid{\r\n gap:16px;\r\n }\r\n\r\n .lis__service-body{\r\n padding:22px 22px 22px;\r\n }\r\n\r\n .lis__service-title{\r\n font-size:clamp(28px,3vw,36px)!important;\r\n }\r\n}\r\n\r\n\r\n\/* =========================================================\r\n TABLET\r\n ========================================================= *\/\r\n\r\n@media (min-width:900px) and (max-width:1180px){\r\n .lis__included-head{\r\n grid-template-columns:minmax(0,.56fr) minmax(300px,.36fr);\r\n gap:48px;\r\n }\r\n\r\n .lis__vehicle-track{\r\n gap:8px;\r\n }\r\n\r\n .lis__vehicle-title{\r\n font-size:clamp(17px,1.7vw,23px)!important;\r\n }\r\n\r\n .lis__vehicle-meta{\r\n display:none;\r\n }\r\n}\r\n\r\n\r\n\/* =========================================================\r\n MOBILE \u2014 NORMAL SWIPE REEL\r\n ========================================================= *\/\r\n\r\n@media (max-width:899px){\r\n .lis__included{\r\n margin-top:64px;\r\n padding-top:44px;\r\n }\r\n\r\n .lis__included::before{\r\n display:none;\r\n }\r\n\r\n .lis__included-head{\r\n display:block;\r\n margin-bottom:36px;\r\n }\r\n\r\n .lis__included-title{\r\n max-width:8ch;\r\n font-size:clamp(50px,13.5vw,66px)!important;\r\n }\r\n\r\n .lis__included-copy{\r\n max-width:36ch;\r\n margin-top:22px;\r\n font-size:15px!important;\r\n line-height:1.65!important;\r\n }\r\n\r\n .lis__vehicle-gallery-head{\r\n align-items:center;\r\n margin-bottom:16px;\r\n }\r\n\r\n .lis__vehicle-gallery-title{\r\n font-size:clamp(29px,8vw,38px)!important;\r\n }\r\n\r\n .lis__vehicle-loop-controls{\r\n display:none;\r\n }\r\n\r\n .lis__vehicle-gallery::before,\r\n .lis__vehicle-gallery::after{\r\n display:none;\r\n }\r\n\r\n .lis__vehicle-track{\r\n display:flex;\r\n\r\n width:auto;\r\n min-height:0;\r\n\r\n gap:14px;\r\n\r\n margin-inline:-20px;\r\n padding:\r\n 8px\r\n 20px\r\n 20px;\r\n\r\n overflow-x:auto;\r\n overflow-y:visible;\r\n\r\n scroll-snap-type:x proximity;\r\n scroll-padding-inline:20px;\r\n scroll-behavior:smooth;\r\n\r\n overscroll-behavior-inline:contain;\r\n\r\n scrollbar-width:none;\r\n -webkit-overflow-scrolling:touch;\r\n\r\n touch-action:pan-x pan-y;\r\n\r\n cursor:auto;\r\n user-select:auto;\r\n\r\n transform:none!important;\r\n transition:none!important;\r\n }\r\n\r\n .lis__vehicle-track::-webkit-scrollbar{\r\n display:none;\r\n }\r\n\r\n .lis__vehicle-card,\r\n .lis__vehicle-card.is-near,\r\n .lis__vehicle-card.is-active,\r\n .lis__vehicle-card.is-far{\r\n position:relative!important;\r\n\r\n left:auto!important;\r\n top:auto!important;\r\n\r\n order:initial!important;\r\n\r\n flex:0 0 min(76vw,330px);\r\n width:auto!important;\r\n\r\n opacity:1!important;\r\n\r\n transform:none!important;\r\n\r\n scroll-snap-align:center;\r\n scroll-snap-stop:normal;\r\n\r\n cursor:default;\r\n }\r\n\r\n .lis__vehicle-media,\r\n .lis__vehicle-card.is-active .lis__vehicle-media{\r\n border:0!important;\r\n border-radius:0!important;\r\n background:transparent!important;\r\n box-shadow:none!important;\r\n }\r\n\r\n .lis__vehicle-video,\r\n .lis__vehicle-card.is-near .lis__vehicle-video,\r\n .lis__vehicle-card.is-active .lis__vehicle-video,\r\n .lis__vehicle-card.is-far .lis__vehicle-video{\r\n filter:none!important;\r\n }\r\n\r\n .lis__vehicle-foot{\r\n opacity:1;\r\n }\r\n\r\n .lis__vehicle-statusline{\r\n justify-content:flex-start;\r\n margin-top:3px;\r\n }\r\n\r\n .lis__service-edition{\r\n margin:0 0 56px;\r\n padding:0 0 34px;\r\n }\r\n\r\n .lis__service-intro{\r\n grid-template-columns:1fr;\r\n gap:16px;\r\n\r\n margin-bottom:22px;\r\n padding:20px 18px 20px;\r\n\r\n border-radius:18px;\r\n }\r\n\r\n .lis__service-intro-title{\r\n max-width:14ch;\r\n font-size:clamp(28px,7.8vw,36px)!important;\r\n }\r\n\r\n .lis__service-intro-copy{\r\n max-width:none;\r\n }\r\n\r\n .lis__service-grid{\r\n grid-template-columns:1fr;\r\n gap:14px;\r\n }\r\n\r\n .lis__service-card{\r\n border-radius:22px;\r\n }\r\n\r\n .lis__service-media{\r\n aspect-ratio:16 \/ 11;\r\n }\r\n\r\n .lis__service-body{\r\n padding:22px 20px 22px;\r\n }\r\n\r\n .lis__service-topline{\r\n margin-bottom:16px;\r\n }\r\n\r\n .lis__service-title{\r\n min-height:0;\r\n max-width:15ch;\r\n font-size:clamp(28px,7.8vw,36px)!important;\r\n }\r\n\r\n .lis__service-note{\r\n max-width:none;\r\n }\r\n\r\n .lis__package-band{\r\n grid-template-columns:1fr;\r\n gap:14px;\r\n margin-top:30px;\r\n }\r\n\r\n .lis__package-mark{\r\n font-size:52px!important;\r\n }\r\n}\r\n\r\n@media (max-width:420px){\r\n .lis__vehicle-track{\r\n margin-inline:-18px;\r\n padding-inline:18px;\r\n scroll-padding-inline:18px;\r\n }\r\n\r\n .lis__vehicle-card,\r\n .lis__vehicle-card.is-near,\r\n .lis__vehicle-card.is-active{\r\n flex-basis:min(82vw,315px);\r\n }\r\n\r\n #lamina-istanbul-stay .lis__vehicle-fullscreen{\r\n width:36px;\r\n height:36px;\r\n min-width:36px;\r\n min-height:36px;\r\n }\r\n\r\n .lis__service-intro{\r\n padding:18px 16px 18px;\r\n }\r\n\r\n .lis__service-chiplist{\r\n gap:6px;\r\n }\r\n\r\n .lis__service-body{\r\n padding:20px 18px 20px;\r\n }\r\n\r\n .lis__service-title{\r\n font-size:clamp(27px,8vw,33px)!important;\r\n }\r\n\r\n .lis__service-number{\r\n font-size:30px!important;\r\n }\r\n}\r\n\r\n@media (prefers-reduced-motion:reduce){\r\n .lis__vehicle-card,\r\n .lis__vehicle-media,\r\n #lamina-istanbul-stay .lis__vehicle-loop-btn,\r\n #lamina-istanbul-stay .lis__vehicle-fullscreen{\r\n transition:none!important;\r\n }\r\n}\r\n\r\n\/* =========================================================\r\n ENTRY \/ FOCUS LAYERS\r\n ========================================================= *\/\r\n#lamina-istanbul-stay [data-lis-depth]{\r\n --lis-entry-blur:0px;\r\n --lis-passed-blur:0px;\r\n --lis-depth-opacity:1;\r\n\r\n filter:\r\n blur(\r\n calc(\r\n var(--lis-entry-blur) +\r\n var(--lis-passed-blur)\r\n )\r\n );\r\n\r\n opacity:var(--lis-depth-opacity);\r\n\r\n will-change:filter, opacity;\r\n}\r\n\r\n#lamina-istanbul-stay [data-lis-depth]:hover,\r\n#lamina-istanbul-stay [data-lis-depth]:focus-within{\r\n --lis-passed-blur:0px !important;\r\n --lis-depth-opacity:1 !important;\r\n}\r\n\r\n\/* =========================================================\r\n DESKTOP ENTRANCE \u2014 ONCE\r\n ========================================================= *\/\r\n#lamina-istanbul-stay.has-entry .lis__eyebrow{\r\n opacity:0;\r\n transform:translate3d(0,8px,0);\r\n --lis-entry-blur:2.8px;\r\n}\r\n\r\n#lamina-istanbul-stay.has-entry .lis__title-line{\r\n opacity:0;\r\n transform:translate3d(0,102%,0);\r\n --lis-entry-blur:4px;\r\n}\r\n\r\n#lamina-istanbul-stay.has-entry .lis__support-wrap{\r\n opacity:0;\r\n transform:translate3d(0,10px,0);\r\n --lis-entry-blur:3px;\r\n}\r\n\r\n#lamina-istanbul-stay.has-entry .lis__visual-frame{\r\n clip-path:inset(0 0 100% 0);\r\n}\r\n\r\n#lamina-istanbul-stay.has-entry .lis__visual-frame .lis__image-layer,\r\n#lamina-istanbul-stay.has-entry .lis__visual-frame .lis__fallback-copy,\r\n#lamina-istanbul-stay.has-entry .lis__visual-frame .lis__fallback-inner{\r\n transform:translate3d(0,14px,0) scale(1.012);\r\n}\r\n\r\n#lamina-istanbul-stay.has-entry .lis__hotel-btn{\r\n opacity:.15;\r\n transform:translate3d(0,10px,0);\r\n}\r\n\r\n#lamina-istanbul-stay.has-entry .lis__logistics{\r\n clip-path:inset(0 100% 0 0);\r\n}\r\n\r\n#lamina-istanbul-stay.has-entry .lis__logistics-item{\r\n opacity:0;\r\n transform:translate3d(0,8px,0);\r\n}\r\n\r\n#lamina-istanbul-stay.has-entry.is-entered .lis__eyebrow{\r\n opacity:1;\r\n transform:none;\r\n --lis-entry-blur:0px;\r\n\r\n transition:\r\n opacity .48s var(--lis-ease) .03s,\r\n transform .54s var(--lis-ease) .03s,\r\n filter .45s ease .03s;\r\n}\r\n\r\n#lamina-istanbul-stay.has-entry.is-entered .lis__title-line{\r\n opacity:1;\r\n transform:none;\r\n --lis-entry-blur:0px;\r\n\r\n transition:\r\n opacity .62s var(--lis-ease),\r\n transform .78s cubic-bezier(.12,.82,.18,1),\r\n filter .52s ease;\r\n}\r\n\r\n#lamina-istanbul-stay.has-entry.is-entered\r\n.lis__title-line:nth-child(1){\r\n transition-delay:.07s;\r\n}\r\n\r\n#lamina-istanbul-stay.has-entry.is-entered\r\n.lis__title-line:nth-child(2){\r\n transition-delay:.15s;\r\n}\r\n\r\n#lamina-istanbul-stay.has-entry.is-entered .lis__support-wrap{\r\n opacity:1;\r\n transform:none;\r\n --lis-entry-blur:0px;\r\n\r\n transition:\r\n opacity .56s var(--lis-ease) .20s,\r\n transform .60s var(--lis-ease) .20s,\r\n filter .50s ease .20s;\r\n}\r\n\r\n#lamina-istanbul-stay.has-entry.is-entered .lis__visual-frame{\r\n clip-path:inset(0);\r\n\r\n transition:\r\n clip-path 1.00s cubic-bezier(.16,.76,.20,1) .27s;\r\n}\r\n\r\n#lamina-istanbul-stay.has-entry.is-entered .lis__visual-frame .lis__image-layer,\r\n#lamina-istanbul-stay.has-entry.is-entered .lis__visual-frame .lis__fallback-copy,\r\n#lamina-istanbul-stay.has-entry.is-entered .lis__visual-frame .lis__fallback-inner{\r\n transform:none;\r\n\r\n transition:\r\n transform 1.00s cubic-bezier(.16,.76,.20,1) .27s;\r\n}\r\n\r\n#lamina-istanbul-stay.has-entry.is-entered .lis__hotel-btn{\r\n opacity:1;\r\n transform:none;\r\n\r\n transition:\r\n opacity .48s var(--lis-ease),\r\n transform .54s var(--lis-ease);\r\n}\r\n\r\n#lamina-istanbul-stay.has-entry.is-entered .lis__hotel-btn:nth-child(1){\r\n transition-delay:.48s;\r\n}\r\n\r\n#lamina-istanbul-stay.has-entry.is-entered .lis__hotel-btn:nth-child(2){\r\n transition-delay:.55s;\r\n}\r\n\r\n#lamina-istanbul-stay.has-entry.is-entered .lis__hotel-btn:nth-child(3){\r\n transition-delay:.62s;\r\n}\r\n\r\n#lamina-istanbul-stay.has-entry.is-entered .lis__hotel-btn:nth-child(4){\r\n transition-delay:.69s;\r\n}\r\n\r\n#lamina-istanbul-stay.has-entry.is-entered .lis__hotel-btn:nth-child(5){\r\n transition-delay:.76s;\r\n}\r\n\r\n#lamina-istanbul-stay.has-entry.is-entered .lis__logistics{\r\n clip-path:inset(0);\r\n\r\n transition:\r\n clip-path .62s var(--lis-ease) .78s;\r\n}\r\n\r\n#lamina-istanbul-stay.has-entry.is-entered .lis__logistics-item{\r\n opacity:1;\r\n transform:none;\r\n\r\n transition:\r\n opacity .50s var(--lis-ease),\r\n transform .54s var(--lis-ease);\r\n}\r\n\r\n#lamina-istanbul-stay.has-entry.is-entered .lis__logistics-item:nth-child(1){\r\n transition-delay:.84s;\r\n}\r\n#lamina-istanbul-stay.has-entry.is-entered .lis__logistics-item:nth-child(2){\r\n transition-delay:.91s;\r\n}\r\n#lamina-istanbul-stay.has-entry.is-entered .lis__logistics-item:nth-child(3){\r\n transition-delay:.98s;\r\n}\r\n\r\n\/* =========================================================\r\n IMAGE CHANGE\r\n ========================================================= *\/\r\n.lis__image-layer.is-transitioning-in{\r\n opacity:1;\r\n clip-path:inset(0);\r\n transform:scale(1);\r\n\r\n transition:\r\n opacity .64s ease,\r\n clip-path .70s var(--lis-ease),\r\n transform .72s var(--lis-ease);\r\n}\r\n\r\n.lis__image-layer.is-transitioning-out{\r\n opacity:0;\r\n clip-path:inset(0 0 5% 0);\r\n transform:scale(1.004);\r\n\r\n transition:\r\n opacity .58s ease,\r\n clip-path .62s var(--lis-ease),\r\n transform .62s var(--lis-ease);\r\n}\r\n\r\n\/* =========================================================\r\n TABLET\r\n ========================================================= *\/\r\n@media (min-width:900px) and (max-width:1180px){\r\n\r\n .lis__shell{\r\n padding-inline:30px;\r\n }\r\n\r\n .lis__intro{\r\n grid-template-columns:minmax(0,.54fr) minmax(300px,.38fr);\r\n gap:48px;\r\n }\r\n\r\n .lis__stage{\r\n grid-template-columns:minmax(0,1fr) minmax(245px,29%);\r\n gap:28px;\r\n }\r\n\r\n .lis__visual-frame{\r\n min-height:430px;\r\n }\r\n\r\n .lis__hotel-name{\r\n font-size:clamp(23px,2.4vw,29px);\r\n }\r\n\r\n}\r\n\r\n\/* =========================================================\r\n MOBILE \/ PORTRAIT TABLET \u2014 \u201cTHE STAY EDITION\u201d\r\n ========================================================= *\/\r\n@media (max-width:899px){\r\n\r\n \/*\r\n PERMANENT LAMINA MOBILE RULE:\r\n one-time entrance blur may remain;\r\n scrolling \/ passed-content blur is disabled.\r\n *\/\r\n #lamina-istanbul-stay [data-lis-depth]{\r\n --lis-passed-blur:0px !important;\r\n --lis-depth-opacity:1 !important;\r\n opacity:1 !important;\r\n }\r\n\r\n .lis__shell{\r\n padding:\r\n 66px\r\n 20px\r\n 84px;\r\n }\r\n\r\n .lis__intro{\r\n display:block;\r\n width:100%;\r\n margin-bottom:30px;\r\n }\r\n\r\n .lis__title{\r\n max-width:8ch;\r\n font-size:clamp(52px,14.2vw,66px);\r\n }\r\n\r\n .lis__title-line{\r\n line-height:.90;\r\n }\r\n\r\n .lis__title-line + .lis__title-line{\r\n margin-top:-.04em;\r\n }\r\n\r\n .lis__support-wrap{\r\n max-width:36ch;\r\n margin-top:20px;\r\n justify-self:auto;\r\n }\r\n\r\n .lis__support{\r\n font-size:15px;\r\n line-height:1.65;\r\n }\r\n\r\n .lis__micro{\r\n margin-top:15px;\r\n }\r\n\r\n .lis__stage{\r\n display:block;\r\n width:100%;\r\n }\r\n\r\n .lis__visual-frame{\r\n width:100%;\r\n\r\n aspect-ratio:5 \/ 6;\r\n min-height:0;\r\n max-height:none;\r\n }\r\n\r\n .lis__caption{\r\n inset-inline:14px;\r\n inset-block-end:13px;\r\n max-width:78%;\r\n }\r\n\r\n .lis__index{\r\n margin-top:20px;\r\n }\r\n\r\n .lis__hotel-btn{\r\n min-height:48px;\r\n padding:\r\n 12px\r\n 0;\r\n\r\n grid-template-columns:34px minmax(0,1fr);\r\n }\r\n\r\n .lis__hotel-name{\r\n font-size:clamp(24px,7vw,31px);\r\n }\r\n\r\n .lis__hotel-verify{\r\n font-size:10px;\r\n }\r\n\r\n .lis__logistics{\r\n display:block;\r\n\r\n width:100%;\r\n\r\n margin-top:34px;\r\n\r\n border-bottom:0;\r\n }\r\n\r\n .lis__logistics-item{\r\n padding:\r\n 25px\r\n 0\r\n 28px;\r\n }\r\n\r\n .lis__logistics-item + .lis__logistics-item{\r\n border-inline-start:0;\r\n border-top:1px solid var(--lis-rule);\r\n }\r\n\r\n .lis__logistics-title{\r\n font-size:clamp(29px,8vw,36px);\r\n }\r\n\r\n .lis__logistics-copy{\r\n font-size:14px;\r\n line-height:1.58;\r\n }\r\n\r\n \/*\r\n Mobile entrance:\r\n header + image first, index quickly follows.\r\n Lower logistics rows enter independently through IO.\r\n *\/\r\n #lamina-istanbul-stay.has-entry .lis__logistics{\r\n clip-path:none;\r\n }\r\n\r\n #lamina-istanbul-stay.has-entry .lis__logistics-item{\r\n opacity:1;\r\n transform:none;\r\n }\r\n\r\n #lamina-istanbul-stay.has-mobile-rows\r\n .lis__logistics-item[data-mobile-ready=\"false\"]{\r\n opacity:.10;\r\n transform:translate3d(0,8px,0);\r\n }\r\n\r\n #lamina-istanbul-stay.has-mobile-rows\r\n .lis__logistics-item[data-mobile-ready=\"true\"]{\r\n opacity:1;\r\n transform:none;\r\n\r\n transition:\r\n opacity .48s var(--lis-ease),\r\n transform .52s var(--lis-ease);\r\n }\r\n\r\n}\r\n\r\n\/* =========================================================\r\n SHORT DESKTOP\r\n ========================================================= *\/\r\n@media (min-width:900px) and (max-height:700px){\r\n\r\n .lis__shell{\r\n padding-block:62px 78px;\r\n }\r\n\r\n .lis__intro{\r\n margin-bottom:34px;\r\n }\r\n\r\n .lis__title{\r\n font-size:clamp(62px,5.4vw,88px);\r\n }\r\n\r\n .lis__visual-frame{\r\n min-height:370px;\r\n max-height:430px;\r\n }\r\n\r\n .lis__hotel-btn{\r\n min-height:58px;\r\n padding-block:11px;\r\n }\r\n\r\n .lis__hotel-name{\r\n font-size:clamp(22px,1.8vw,28px);\r\n }\r\n\r\n .lis__logistics{\r\n margin-top:36px;\r\n }\r\n\r\n .lis__logistics-item{\r\n padding-block:22px 26px;\r\n }\r\n\r\n}\r\n\r\n\/* =========================================================\r\n SMALL MOBILE\r\n ========================================================= *\/\r\n@media (max-width:420px){\r\n\r\n .lis__shell{\r\n padding-inline:18px;\r\n }\r\n\r\n .lis__title{\r\n max-width:7.7ch;\r\n font-size:clamp(50px,14vw,62px);\r\n }\r\n\r\n .lis__hotel-name{\r\n font-size:clamp(23px,6.8vw,29px);\r\n }\r\n\r\n}\r\n\r\n\/* =========================================================\r\n RTL\r\n ========================================================= *\/\r\n[dir=\"rtl\"] #lamina-istanbul-stay .lis__intro,\r\n[dir=\"rtl\"] #lamina-istanbul-stay .lis__stage,\r\n[dir=\"rtl\"] #lamina-istanbul-stay .lis__logistics{\r\n direction:rtl;\r\n}\r\n\r\n[dir=\"rtl\"] #lamina-istanbul-stay .lis__hotel-btn,\r\n[dir=\"rtl\"] #lamina-istanbul-stay .lis__support,\r\n[dir=\"rtl\"] #lamina-istanbul-stay .lis__logistics-item{\r\n text-align:start;\r\n}\r\n\r\n\/* =========================================================\r\n REDUCED MOTION\r\n ========================================================= *\/\r\n@media (prefers-reduced-motion:reduce){\r\n\r\n #lamina-istanbul-stay *,\r\n #lamina-istanbul-stay *::before,\r\n #lamina-istanbul-stay *::after{\r\n scroll-behavior:auto !important;\r\n }\r\n\r\n #lamina-istanbul-stay [data-lis-depth]{\r\n --lis-entry-blur:0px !important;\r\n --lis-passed-blur:0px !important;\r\n --lis-depth-opacity:1 !important;\r\n\r\n filter:none !important;\r\n opacity:1 !important;\r\n }\r\n\r\n #lamina-istanbul-stay.has-entry .lis__eyebrow,\r\n #lamina-istanbul-stay.has-entry .lis__title-line,\r\n #lamina-istanbul-stay.has-entry .lis__support-wrap,\r\n #lamina-istanbul-stay.has-entry .lis__hotel-btn,\r\n #lamina-istanbul-stay.has-entry .lis__logistics-item{\r\n opacity:1 !important;\r\n transform:none !important;\r\n transition:none !important;\r\n }\r\n\r\n #lamina-istanbul-stay.has-entry .lis__visual-frame,\r\n #lamina-istanbul-stay.has-entry .lis__logistics{\r\n clip-path:none !important;\r\n transition:none !important;\r\n }\r\n\r\n #lamina-istanbul-stay .lis__image-layer{\r\n transition:opacity .12s linear !important;\r\n transform:none !important;\r\n clip-path:none !important;\r\n }\r\n\r\n}\r\n<\/style>\r\n\r\n<section\r\n id=\"lamina-istanbul-stay\"\r\n aria-labelledby=\"lamina-istanbul-stay-title\"\r\n data-lamina-focus-section\r\n>\r\n\r\n <div class=\"lis__shell\">\r\n\r\n <header class=\"lis__intro\">\r\n\r\n <div>\r\n <p\r\n class=\"lis__eyebrow\"\r\n data-lis-depth=\"eyebrow\"\r\n >\r\n YOUR ISTANBUL STAY\r\n <\/p>\r\n\r\n <h2\r\n class=\"lis__title\"\r\n id=\"lamina-istanbul-stay-title\"\r\n >\r\n <span\r\n class=\"lis__title-line\"\r\n data-lis-depth=\"headline\"\r\n >\r\n Your stay,\r\n <\/span>\r\n\r\n <span\r\n class=\"lis__title-line lis__title-line--accent\"\r\n data-lis-depth=\"headline\"\r\n >\r\n considered.\r\n <\/span>\r\n <\/h2>\r\n <\/div>\r\n\r\n <div\r\n class=\"lis__support-wrap\"\r\n data-lis-depth=\"copy\"\r\n >\r\n <p class=\"lis__support\">\r\n From arrival to accommodation, private transportation and clinic visits, Lamina coordinates the practical parts of your Istanbul stay around your treatment.\r\n <\/p>\r\n\r\n <p class=\"lis__micro\">\r\n ARRIVAL \u00b7 STAY \u00b7 PRIVATE TRANSFER \u00b7 CLINIC\r\n <\/p>\r\n <\/div>\r\n\r\n <\/header>\r\n\r\n <div class=\"lis__service-edition\" data-lis-depth=\"copy\">\r\n\r\n <div class=\"lis__service-intro\">\r\n <div class=\"lis__service-intro-main\">\r\n <span class=\"lis__service-intro-kicker\">\r\n INCLUDED PATIENT JOURNEY\r\n <\/span>\r\n\r\n <h4 class=\"lis__service-intro-title\">\r\n From landing to clinic, the practical steps are already arranged.\r\n <\/h4>\r\n <\/div>\r\n\r\n <div class=\"lis__service-intro-side\">\r\n <p class=\"lis__service-intro-copy\">\r\n Your treatment journey is supported beyond the clinic itself. Lamina coordinates four practical parts of the stay so the experience feels clear from arrival onward.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n\r\n <div\r\n class=\"lis__service-grid\"\r\n data-lis-depth=\"media\"\r\n aria-label=\"Included patient journey steps\"\r\n >\r\n\r\n <article class=\"lis__service-card\">\r\n <div class=\"lis__service-topline\">\r\n <span class=\"lis__service-number\">01<\/span>\r\n <span class=\"lis__service-pill\">Included<\/span>\r\n <\/div>\r\n\r\n <figure class=\"lis__service-media\">\r\n <img\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/airport-scaled.webp\"\r\n alt=\"Airport reception arranged by Lamina\"\r\n loading=\"lazy\"\r\n decoding=\"async\"\r\n >\r\n <\/figure>\r\n\r\n <div class=\"lis__service-body\">\r\n <span class=\"lis__service-kicker\">Airport reception<\/span>\r\n\r\n <h5 class=\"lis__service-title\">\r\n Your arrival is already expected.\r\n <\/h5>\r\n\r\n <p class=\"lis__service-note\">\r\n Reception and first-transfer coordination connect your landing with the rest of the stay.\r\n <\/p>\r\n\r\n <p class=\"lis__service-detail\">\r\n Arrival coordination \u00b7 first transfer\r\n <\/p>\r\n <\/div>\r\n <\/article>\r\n\r\n\r\n <article class=\"lis__service-card\">\r\n <div class=\"lis__service-topline\">\r\n <span class=\"lis__service-number\">02<\/span>\r\n <span class=\"lis__service-pill\">Included<\/span>\r\n <\/div>\r\n\r\n <figure class=\"lis__service-media\">\r\n <img\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/hotel-room-key-in-door-of-room-2026-03-18-05-11-50-utc-scaled.webp\"\r\n alt=\"Hotel accommodation arranged as part of the Lamina stay\"\r\n loading=\"lazy\"\r\n decoding=\"async\"\r\n >\r\n <\/figure>\r\n\r\n <div class=\"lis__service-body\">\r\n <span class=\"lis__service-kicker\">Hotel accommodation<\/span>\r\n\r\n <h5 class=\"lis__service-title\">\r\n Your stay is prepared around treatment.\r\n <\/h5>\r\n\r\n <p class=\"lis__service-note\">\r\n Partner accommodation is coordinated around the practical rhythm of your treatment visit.\r\n <\/p>\r\n\r\n <p class=\"lis__service-detail\">\r\n Partner stay \u00b7 coordinated booking\r\n <\/p>\r\n <\/div>\r\n <\/article>\r\n\r\n\r\n <article class=\"lis__service-card\">\r\n <div class=\"lis__service-topline\">\r\n <span class=\"lis__service-number\">03<\/span>\r\n <span class=\"lis__service-pill\">Included<\/span>\r\n <\/div>\r\n\r\n <figure class=\"lis__service-media\">\r\n <img\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/Translator-scaled.webp\"\r\n alt=\"Private translator support\"\r\n loading=\"lazy\"\r\n decoding=\"async\"\r\n >\r\n <\/figure>\r\n\r\n <div class=\"lis__service-body\">\r\n <span class=\"lis__service-kicker\">Private translator<\/span>\r\n\r\n <h5 class=\"lis__service-title\">\r\n Communication stays clear and personal.\r\n <\/h5>\r\n\r\n <p class=\"lis__service-note\">\r\n Translator support helps make consultations and important practical moments easier to follow.\r\n <\/p>\r\n\r\n <p class=\"lis__service-detail\">\r\n Consultation support \u00b7 patient guidance\r\n <\/p>\r\n <\/div>\r\n <\/article>\r\n\r\n\r\n <article class=\"lis__service-card\">\r\n <div class=\"lis__service-topline\">\r\n <span class=\"lis__service-number\">04<\/span>\r\n <span class=\"lis__service-pill\">Included<\/span>\r\n <\/div>\r\n\r\n <figure class=\"lis__service-media\">\r\n <img\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/transportation.webp\"\r\n alt=\"VIP transportation arranged for patients\"\r\n loading=\"lazy\"\r\n decoding=\"async\"\r\n >\r\n <\/figure>\r\n\r\n <div class=\"lis__service-body\">\r\n <span class=\"lis__service-kicker\">VIP transportation<\/span>\r\n\r\n <h5 class=\"lis__service-title\">\r\n Every important transfer stays coordinated.\r\n <\/h5>\r\n\r\n <p class=\"lis__service-note\">\r\n Private transportation connects the airport, hotel and clinic around your treatment schedule.\r\n <\/p>\r\n\r\n <p class=\"lis__service-detail\">\r\n Airport \u00b7 hotel \u00b7 clinic transport\r\n <\/p>\r\n <\/div>\r\n <\/article>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"lis__stage\">\r\n\r\n <div\r\n class=\"lis__visual\"\r\n data-lis-depth=\"media\"\r\n >\r\n\r\n <div\r\n class=\"lis__visual-frame\"\r\n aria-live=\"polite\"\r\n role=\"button\"\r\n tabindex=\"0\"\r\n aria-label=\"Open current hotel image in full view\"\r\n aria-haspopup=\"dialog\"\r\n >\r\n\r\n <div\r\n class=\"lis__image-layer is-current\"\r\n data-image-layer=\"current\"\r\n >\r\n <img\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/ramada_by_wyndham_istanbul_alibeykoy-scaled.jpg\"\r\n alt=\"Ramada Alibeyk\u00f6y partner-stay property\"\r\n loading=\"lazy\"\r\n decoding=\"async\"\r\n style=\"--lis-object-position:50% 50%;\"\r\n >\r\n <\/div>\r\n\r\n <div\r\n class=\"lis__image-layer\"\r\n data-image-layer=\"incoming\"\r\n ><\/div>\r\n\r\n <p class=\"lis__caption\">\r\n <span>PARTNER STAY<\/span>\r\n <br>\r\n <strong data-active-hotel-name>Ramada Alibeyk\u00f6y<\/strong>\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div\r\n class=\"lis__index\"\r\n role=\"group\"\r\n aria-label=\"Lamina partner hotel options\"\r\n data-lis-depth=\"ui\"\r\n >\r\n\r\n <button\r\n class=\"lis__hotel-btn\"\r\n type=\"button\"\r\n data-hotel-index=\"0\"\r\n aria-pressed=\"true\"\r\n >\r\n <span class=\"lis__hotel-no\">01<\/span>\r\n <span>\r\n <span class=\"lis__hotel-name\">Ramada Alibeyk\u00f6y<\/span>\r\n <span class=\"lis__hotel-verify\">Working name \u00b7 verify property<\/span>\r\n <\/span>\r\n <\/button>\r\n\r\n <button\r\n class=\"lis__hotel-btn\"\r\n type=\"button\"\r\n data-hotel-index=\"1\"\r\n aria-pressed=\"false\"\r\n >\r\n <span class=\"lis__hotel-no\">02<\/span>\r\n <span>\r\n <span class=\"lis__hotel-name\">Rixos Hotel<\/span>\r\n <span class=\"lis__hotel-verify\">Working name \u00b7 verify property<\/span>\r\n <\/span>\r\n <\/button>\r\n\r\n <button\r\n class=\"lis__hotel-btn\"\r\n type=\"button\"\r\n data-hotel-index=\"2\"\r\n aria-pressed=\"false\"\r\n >\r\n <span class=\"lis__hotel-no\">03<\/span>\r\n <span>\r\n <span class=\"lis__hotel-name\">Taksim Gonen Hotel<\/span>\r\n <span class=\"lis__hotel-verify\">Working name \u00b7 verify property<\/span>\r\n <\/span>\r\n <\/button>\r\n\r\n <button\r\n class=\"lis__hotel-btn\"\r\n type=\"button\"\r\n data-hotel-index=\"3\"\r\n aria-pressed=\"false\"\r\n >\r\n <span class=\"lis__hotel-no\">04<\/span>\r\n <span>\r\n <span class=\"lis__hotel-name\">Holiday Inn Hotel<\/span>\r\n <span class=\"lis__hotel-verify\">Working name \u00b7 verify property<\/span>\r\n <\/span>\r\n <\/button>\r\n\r\n <button\r\n class=\"lis__hotel-btn\"\r\n type=\"button\"\r\n data-hotel-index=\"4\"\r\n aria-pressed=\"false\"\r\n >\r\n <span class=\"lis__hotel-no\">05<\/span>\r\n <span>\r\n <span class=\"lis__hotel-name\">M\u00d6VENPICK<\/span>\r\n <span class=\"lis__hotel-verify\">Working name \u00b7 verify property<\/span>\r\n <\/span>\r\n <\/button>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"lis__logistics\">\r\n\r\n <article\r\n class=\"lis__logistics-item\"\r\n data-lis-depth=\"copy\"\r\n data-mobile-ready=\"false\"\r\n >\r\n <span class=\"lis__logistics-kicker\">01 \u2014 ARRIVAL<\/span>\r\n\r\n <h3 class=\"lis__logistics-title\">\r\n Your arrival can be coordinated.\r\n <\/h3>\r\n\r\n <p class=\"lis__logistics-copy\">\r\n Airport arrival transfer is arranged by Lamina as part of your patient package, connecting your arrival with the accommodation prepared for your stay.\r\n <\/p>\r\n <\/article>\r\n\r\n <article\r\n class=\"lis__logistics-item\"\r\n data-lis-depth=\"copy\"\r\n data-mobile-ready=\"false\"\r\n >\r\n <span class=\"lis__logistics-kicker\">02 \u2014 STAY<\/span>\r\n\r\n <h3 class=\"lis__logistics-title\">\r\n Choose from Lamina\u2019s partner stay options.\r\n <\/h3>\r\n\r\n <p class=\"lis__logistics-copy\">\r\n Accommodation is arranged through Lamina\u2019s partner stay network as part of your patient package, according to your treatment plan and availability.\r\n <\/p>\r\n <\/article>\r\n\r\n <article\r\n class=\"lis__logistics-item\"\r\n data-lis-depth=\"copy\"\r\n data-mobile-ready=\"false\"\r\n >\r\n <span class=\"lis__logistics-kicker\">03 \u2014 CLINIC<\/span>\r\n\r\n <h3 class=\"lis__logistics-title\">\r\n Keep treatment at the centre of the visit.\r\n <\/h3>\r\n\r\n <p class=\"lis__logistics-copy\">\r\n Scheduled transportation between your accommodation and clinic is arranged around your treatment plan and included within the Lamina patient package.\r\n <\/p>\r\n <\/article>\r\n\r\n\r\n <\/div>\r\n\r\n <section class=\"lis__included\" aria-labelledby=\"lamina-included-title\">\r\n\r\n <header class=\"lis__included-head\">\r\n <div data-lis-depth=\"headline\">\r\n <p class=\"lis__included-kicker\">\r\n INCLUDED AROUND YOUR TREATMENT\r\n <\/p>\r\n\r\n <h3 class=\"lis__included-title\" id=\"lamina-included-title\">\r\n Your journey,\r\n <em>considered.<\/em>\r\n <\/h3>\r\n <\/div>\r\n\r\n <div data-lis-depth=\"copy\">\r\n <p class=\"lis__included-copy\">\r\n Your Istanbul visit is planned beyond the treatment room. Lamina arranges the practical journey around your care \u2014 from airport arrival and accommodation to scheduled clinic transportation.\r\n\r\n <span class=\"lis__included-note\">\r\n <span>Airport transfer<\/span>\r\n <span>Partner stay<\/span>\r\n <span>Clinic transport<\/span>\r\n <span>Patient support<\/span>\r\n <\/span>\r\n <\/p>\r\n <\/div>\r\n <\/header>\r\n\r\n\r\n <div class=\"lis__vehicle-gallery\" data-lis-depth=\"media\">\r\n\r\n <div class=\"lis__vehicle-gallery-head\">\r\n <div class=\"lis__vehicle-gallery-copy\">\r\n <span class=\"lis__vehicle-gallery-kicker\">\r\n PRIVATE MOBILITY \u00b7 INCLUDED\r\n <\/span>\r\n\r\n <h4 class=\"lis__vehicle-gallery-title\">\r\n Private transport, thoughtfully arranged.\r\n <\/h4>\r\n <\/div>\r\n\r\n <div class=\"lis__vehicle-loop-controls\" aria-label=\"Browse transfer films\">\r\n <button\r\n class=\"lis__vehicle-loop-btn\"\r\n type=\"button\"\r\n data-vehicle-prev\r\n aria-label=\"Previous transfer film\"\r\n ><\/button>\r\n\r\n <button\r\n class=\"lis__vehicle-loop-btn\"\r\n type=\"button\"\r\n data-vehicle-next\r\n aria-label=\"Next transfer film\"\r\n ><\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div\r\n class=\"lis__vehicle-track\"\r\n data-vehicle-track\r\n role=\"region\"\r\n tabindex=\"0\"\r\n aria-label=\"Lamina private transfer films\"\r\n >\r\n\r\n <article\r\n class=\"lis__vehicle-card is-active\"\r\n data-vehicle-card\r\n data-vehicle-index=\"0\"\r\n data-vehicle-offset=\"0\"\r\n style=\"--vehicle-x:0%;--vehicle-scale:1.18;--vehicle-opacity:1;\"\r\n aria-current=\"true\"\r\n aria-label=\"Private arrival\"\r\n >\r\n <div class=\"lis__vehicle-media\">\r\n <video\r\n class=\"lis__vehicle-video\"\r\n data-vehicle-video\r\n controls\r\n controlsList=\"nofullscreen\"\r\n playsinline\r\n preload=\"metadata\" muted\r\n loop\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/mavis_web_branded.mp4\"\r\n ><\/video>\r\n\r\n <button\r\n class=\"lis__vehicle-fullscreen\"\r\n type=\"button\"\r\n data-vehicle-fullscreen\r\n aria-label=\"View Private arrival fullscreen\"\r\n >\r\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n <path d=\"M8 3H3v5M16 3h5v5M21 16v5h-5M3 16v5h5\"><\/path>\r\n <\/svg>\r\n <\/button>\r\n\r\n <button\r\n class=\"lis__vehicle-fs-close\"\r\n type=\"button\"\r\n data-vehicle-fs-close\r\n aria-label=\"Close fullscreen video\"\r\n ><\/button>\r\n <\/div>\r\n\r\n <footer class=\"lis__vehicle-foot\">\r\n <h5 class=\"lis__vehicle-title\">Private arrival<\/h5>\r\n <span class=\"lis__vehicle-meta\">Airport transfer<\/span>\r\n <\/footer>\r\n <\/article>\r\n\r\n <article\r\n class=\"lis__vehicle-card is-near\"\r\n data-vehicle-card\r\n data-vehicle-index=\"1\"\r\n data-vehicle-offset=\"1\"\r\n style=\"--vehicle-x:118%;--vehicle-scale:.98;--vehicle-opacity:.78;\"\r\n aria-label=\"City movement\"\r\n >\r\n <div class=\"lis__vehicle-media\">\r\n <video\r\n class=\"lis__vehicle-video\"\r\n data-vehicle-video\r\n controlsList=\"nofullscreen\"\r\n playsinline\r\n preload=\"metadata\" muted\r\n loop\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/orange_web_branded.mp4\"\r\n ><\/video>\r\n\r\n <button\r\n class=\"lis__vehicle-fullscreen\"\r\n type=\"button\"\r\n data-vehicle-fullscreen\r\n aria-label=\"View City movement fullscreen\"\r\n >\r\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n <path d=\"M8 3H3v5M16 3h5v5M21 16v5h-5M3 16v5h5\"><\/path>\r\n <\/svg>\r\n <\/button>\r\n\r\n <button\r\n class=\"lis__vehicle-fs-close\"\r\n type=\"button\"\r\n data-vehicle-fs-close\r\n aria-label=\"Close fullscreen video\"\r\n ><\/button>\r\n <\/div>\r\n\r\n <footer class=\"lis__vehicle-foot\">\r\n <h5 class=\"lis__vehicle-title\">City movement<\/h5>\r\n <span class=\"lis__vehicle-meta\">Hotel \u00b7 clinic<\/span>\r\n <\/footer>\r\n <\/article>\r\n\r\n <article\r\n class=\"lis__vehicle-card is-far\"\r\n data-vehicle-card\r\n data-vehicle-index=\"2\"\r\n data-vehicle-offset=\"2\"\r\n style=\"--vehicle-x:236%;--vehicle-scale:.78;--vehicle-opacity:.48;\"\r\n aria-label=\"Treatment day\"\r\n >\r\n <div class=\"lis__vehicle-media\">\r\n <video\r\n class=\"lis__vehicle-video\"\r\n data-vehicle-video\r\n controlsList=\"nofullscreen\"\r\n playsinline\r\n preload=\"metadata\" muted\r\n loop\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/mango_web_branded.mp4\"\r\n ><\/video>\r\n\r\n <button\r\n class=\"lis__vehicle-fullscreen\"\r\n type=\"button\"\r\n data-vehicle-fullscreen\r\n aria-label=\"View Treatment day fullscreen\"\r\n >\r\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n <path d=\"M8 3H3v5M16 3h5v5M21 16v5h-5M3 16v5h5\"><\/path>\r\n <\/svg>\r\n <\/button>\r\n\r\n <button\r\n class=\"lis__vehicle-fs-close\"\r\n type=\"button\"\r\n data-vehicle-fs-close\r\n aria-label=\"Close fullscreen video\"\r\n ><\/button>\r\n <\/div>\r\n\r\n <footer class=\"lis__vehicle-foot\">\r\n <h5 class=\"lis__vehicle-title\">Treatment day<\/h5>\r\n <span class=\"lis__vehicle-meta\">Scheduled transfer<\/span>\r\n <\/footer>\r\n <\/article>\r\n\r\n <article\r\n class=\"lis__vehicle-card is-far\"\r\n data-vehicle-card\r\n data-vehicle-index=\"3\"\r\n data-vehicle-offset=\"-2\"\r\n style=\"--vehicle-x:-236%;--vehicle-scale:.78;--vehicle-opacity:.48;\"\r\n aria-label=\"Comfort in transit\"\r\n >\r\n <div class=\"lis__vehicle-media\">\r\n <video\r\n class=\"lis__vehicle-video\"\r\n data-vehicle-video\r\n controlsList=\"nofullscreen\"\r\n playsinline\r\n preload=\"metadata\" muted\r\n loop\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/yallw_web_branded.mp4\"\r\n ><\/video>\r\n\r\n <button\r\n class=\"lis__vehicle-fullscreen\"\r\n type=\"button\"\r\n data-vehicle-fullscreen\r\n aria-label=\"View Comfort in transit fullscreen\"\r\n >\r\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n <path d=\"M8 3H3v5M16 3h5v5M21 16v5h-5M3 16v5h5\"><\/path>\r\n <\/svg>\r\n <\/button>\r\n\r\n <button\r\n class=\"lis__vehicle-fs-close\"\r\n type=\"button\"\r\n data-vehicle-fs-close\r\n aria-label=\"Close fullscreen video\"\r\n ><\/button>\r\n <\/div>\r\n\r\n <footer class=\"lis__vehicle-foot\">\r\n <h5 class=\"lis__vehicle-title\">Comfort in transit<\/h5>\r\n <span class=\"lis__vehicle-meta\">Private vehicle<\/span>\r\n <\/footer>\r\n <\/article>\r\n\r\n <article\r\n class=\"lis__vehicle-card is-near\"\r\n data-vehicle-card\r\n data-vehicle-index=\"4\"\r\n data-vehicle-offset=\"-1\"\r\n style=\"--vehicle-x:-118%;--vehicle-scale:.98;--vehicle-opacity:.78;\"\r\n aria-label=\"Coordinated journey\"\r\n >\r\n <div class=\"lis__vehicle-media\">\r\n <video\r\n class=\"lis__vehicle-video\"\r\n data-vehicle-video\r\n controlsList=\"nofullscreen\"\r\n playsinline\r\n preload=\"metadata\" muted\r\n loop\r\n src=\"https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/Sequence_01_web_branded.mp4\"\r\n ><\/video>\r\n\r\n <button\r\n class=\"lis__vehicle-fullscreen\"\r\n type=\"button\"\r\n data-vehicle-fullscreen\r\n aria-label=\"View Coordinated journey fullscreen\"\r\n >\r\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n <path d=\"M8 3H3v5M16 3h5v5M21 16v5h-5M3 16v5h5\"><\/path>\r\n <\/svg>\r\n <\/button>\r\n\r\n <button\r\n class=\"lis__vehicle-fs-close\"\r\n type=\"button\"\r\n data-vehicle-fs-close\r\n aria-label=\"Close fullscreen video\"\r\n ><\/button>\r\n <\/div>\r\n\r\n <footer class=\"lis__vehicle-foot\">\r\n <h5 class=\"lis__vehicle-title\">Coordinated journey<\/h5>\r\n <span class=\"lis__vehicle-meta\">Arrival \u00b7 stay \u00b7 clinic<\/span>\r\n <\/footer>\r\n <\/article>\r\n\r\n <\/div>\r\n\r\n <p class=\"lis__vehicle-statusline\" data-vehicle-status>\r\n Focused film plays automatically \u00b7 use the video controls for sound and playback\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"lis__package-band\" data-lis-depth=\"copy\">\r\n <span class=\"lis__package-mark\" aria-hidden=\"true\">\r\n Included.\r\n <\/span>\r\n\r\n <p class=\"lis__package-copy\">\r\n <strong>\r\n The practical parts of your Istanbul treatment journey are built into the Lamina patient experience.\r\n <\/strong>\r\n Airport reception, hotel accommodation, private translator support, VIP transportation, scheduled clinic transportation and the surrounding patient-support logistics are provided by Lamina as part of the treatment package.\r\n <\/p>\r\n <\/div>\r\n\r\n <\/section>\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n<script>\r\n(() => {\r\n\r\n const root =\r\n document.getElementById(\r\n 'lamina-istanbul-stay'\r\n );\r\n\r\n\r\n if (\r\n !root ||\r\n root.dataset.stayIndexReady ===\r\n 'true'\r\n ) return;\r\n\r\n\r\n root.dataset.stayIndexReady =\r\n 'true';\r\n\r\n\r\n const reducedMotion =\r\n window.matchMedia(\r\n '(prefers-reduced-motion: reduce)'\r\n );\r\n\r\n\r\n const compactQuery =\r\n window.matchMedia(\r\n '(max-width:899px)'\r\n );\r\n\r\n\r\n const serviceEdition =\r\n root.querySelector(\r\n '.lis__service-edition'\r\n );\r\n\r\n\r\n const serviceIntro =\r\n root.querySelector(\r\n '.lis__service-intro'\r\n );\r\n\r\n\r\n const serviceCards =\r\n [\r\n ...root.querySelectorAll(\r\n '.lis__service-card'\r\n )\r\n ];\r\n\r\n\r\n const serviceMedia =\r\n [\r\n ...root.querySelectorAll(\r\n '.lis__service-media'\r\n )\r\n ];\r\n\r\n\r\n let serviceRevealObserver =\r\n null;\r\n\r\n\r\n let serviceMotionPlayed =\r\n false;\r\n\r\n\r\n let serviceScrollTicking =\r\n false;\r\n\r\n\r\n const hotelButtons =\r\n [\r\n ...root.querySelectorAll(\r\n '[data-hotel-index]'\r\n )\r\n ];\r\n\r\n\r\n const currentLayer =\r\n root.querySelector(\r\n '[data-image-layer=\"current\"]'\r\n );\r\n\r\n\r\n const incomingLayer =\r\n root.querySelector(\r\n '[data-image-layer=\"incoming\"]'\r\n );\r\n\r\n\r\n const visualFrame =\r\n root.querySelector(\r\n '.lis__visual-frame'\r\n );\r\n\r\n\r\n const activeHotelName =\r\n root.querySelector(\r\n '[data-active-hotel-name]'\r\n );\r\n\r\n\r\n const logisticsRows =\r\n [\r\n ...root.querySelectorAll(\r\n '.lis__logistics-item'\r\n )\r\n ];\r\n\r\n\r\n const vehicleTrack =\r\n root.querySelector(\r\n '[data-vehicle-track]'\r\n );\r\n\r\n\r\n const vehicleCards =\r\n [\r\n ...root.querySelectorAll(\r\n '[data-vehicle-card]'\r\n )\r\n ];\r\n\r\n\r\n const vehicleVideos =\r\n vehicleCards.map(\r\n card =>\r\n card.querySelector(\r\n '[data-vehicle-video]'\r\n )\r\n );\r\n\r\n\r\n \/* =======================================================\r\n VIDEO VIEWPORT PLAYBACK GATE\r\n -------------------------------------------------------\r\n Transport films may only play while the actual film track is\r\n visibly inside the viewport (or while one film is fullscreen).\r\n Leaving the film area pauses every video immediately, including\r\n any unmuted audio. Returning resumes only when playback was\r\n active before leaving or a new film is deliberately selected.\r\n ======================================================= *\/\r\n\r\n let vehicleTrackVisible =\r\n false;\r\n\r\n\r\n let vehicleResumeOnVisible =\r\n true;\r\n\r\n\r\n let vehicleTrackObserver =\r\n null;\r\n\r\n\r\n function vehicleFullscreenIsOpen(){\r\n\r\n const fullscreenElement =\r\n document.fullscreenElement ||\r\n document.webkitFullscreenElement ||\r\n null;\r\n\r\n\r\n return Boolean(\r\n fullscreenElement &&\r\n fullscreenElement.matches?.(\r\n '[data-vehicle-card]'\r\n )\r\n );\r\n\r\n }\r\n\r\n\r\n function vehiclePlaybackAllowed(){\r\n\r\n if (\r\n document.hidden\r\n ) return false;\r\n\r\n\r\n if (\r\n vehicleFullscreenIsOpen()\r\n ) return true;\r\n\r\n\r\n return vehicleTrackVisible;\r\n\r\n }\r\n\r\n\r\n function pauseVehicleVideosForVisibility(){\r\n\r\n const activeVideo =\r\n vehicleVideos[\r\n activeVehicleIndex\r\n ];\r\n\r\n\r\n if (\r\n activeVideo &&\r\n !activeVideo.paused &&\r\n !activeVideo.ended\r\n ){\r\n\r\n vehicleResumeOnVisible =\r\n true;\r\n\r\n }\r\n\r\n\r\n vehicleVideos.forEach(\r\n video => {\r\n\r\n video?.pause();\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n function vehicleTrackIsActuallyVisible(){\r\n\r\n if (\r\n !vehicleTrack ||\r\n document.hidden\r\n ) return false;\r\n\r\n\r\n if (\r\n vehicleFullscreenIsOpen()\r\n ) return true;\r\n\r\n\r\n const rect =\r\n vehicleTrack.getBoundingClientRect();\r\n\r\n\r\n const vh =\r\n Math.max(\r\n 1,\r\n window.innerHeight ||\r\n document.documentElement.clientHeight\r\n );\r\n\r\n\r\n const vw =\r\n Math.max(\r\n 1,\r\n window.innerWidth ||\r\n document.documentElement.clientWidth\r\n );\r\n\r\n\r\n const visibleHeight =\r\n Math.max(\r\n 0,\r\n Math.min(\r\n rect.bottom,\r\n vh\r\n ) -\r\n Math.max(\r\n rect.top,\r\n 0\r\n )\r\n );\r\n\r\n\r\n const visibleWidth =\r\n Math.max(\r\n 0,\r\n Math.min(\r\n rect.right,\r\n vw\r\n ) -\r\n Math.max(\r\n rect.left,\r\n 0\r\n )\r\n );\r\n\r\n\r\n const requiredHeight =\r\n Math.min(\r\n 150,\r\n Math.max(\r\n 70,\r\n rect.height *\r\n .16\r\n )\r\n );\r\n\r\n\r\n return (\r\n visibleHeight >=\r\n requiredHeight &&\r\n visibleWidth >=\r\n Math.min(\r\n 160,\r\n rect.width *\r\n .25\r\n )\r\n );\r\n\r\n }\r\n\r\n\r\n let vehicleVisibilityTicking =\r\n false;\r\n\r\n\r\n function requestVehicleViewportPlaybackUpdate(){\r\n\r\n if (\r\n vehicleVisibilityTicking\r\n ) return;\r\n\r\n\r\n vehicleVisibilityTicking =\r\n true;\r\n\r\n\r\n requestAnimationFrame(\r\n () => {\r\n\r\n vehicleVisibilityTicking =\r\n false;\r\n\r\n\r\n updateVehicleTrackVisibility(\r\n vehicleTrackIsActuallyVisible()\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n function updateVehicleTrackVisibility(\r\n visible\r\n ){\r\n\r\n const nextVisible =\r\n Boolean(\r\n visible\r\n );\r\n\r\n\r\n if (\r\n nextVisible ===\r\n vehicleTrackVisible\r\n ){\r\n\r\n if (\r\n !nextVisible\r\n ){\r\n\r\n pauseVehicleVideosForVisibility();\r\n\r\n }\r\n\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n vehicleTrackVisible =\r\n nextVisible;\r\n\r\n\r\n if (\r\n !vehicleTrackVisible\r\n ){\r\n\r\n pauseVehicleVideosForVisibility();\r\n\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n if (\r\n vehicleResumeOnVisible\r\n ){\r\n\r\n syncVehiclePlayback();\r\n\r\n }\r\n\r\n }\r\n\r\n\r\n function initVehicleViewportPlayback(){\r\n\r\n vehicleTrackObserver?.disconnect();\r\n\r\n\r\n vehicleTrackObserver =\r\n null;\r\n\r\n\r\n if (\r\n !vehicleTrack\r\n ){\r\n\r\n vehicleTrackVisible =\r\n false;\r\n\r\n\r\n pauseVehicleVideosForVisibility();\r\n\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n if (\r\n !(\r\n 'IntersectionObserver' in window\r\n )\r\n ){\r\n\r\n const rect =\r\n vehicleTrack.getBoundingClientRect();\r\n\r\n\r\n const vh =\r\n Math.max(\r\n 1,\r\n window.innerHeight ||\r\n document.documentElement.clientHeight\r\n );\r\n\r\n\r\n const visibleHeight =\r\n Math.max(\r\n 0,\r\n Math.min(\r\n rect.bottom,\r\n vh\r\n ) -\r\n Math.max(\r\n rect.top,\r\n 0\r\n )\r\n );\r\n\r\n\r\n updateVehicleTrackVisibility(\r\n visibleHeight >=\r\n Math.min(\r\n 150,\r\n rect.height *\r\n .18\r\n )\r\n );\r\n\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n vehicleTrackObserver =\r\n new IntersectionObserver(\r\n entries => {\r\n\r\n entries.forEach(\r\n entry => {\r\n\r\n const visible =\r\n entry.isIntersecting &&\r\n vehicleTrackIsActuallyVisible();\r\n\r\n\r\n updateVehicleTrackVisibility(\r\n visible\r\n );\r\n\r\n }\r\n );\r\n\r\n },\r\n {\r\n threshold:[\r\n 0,\r\n .08,\r\n .16,\r\n .30,\r\n .60\r\n ]\r\n }\r\n );\r\n\r\n\r\n vehicleTrackObserver.observe(\r\n vehicleTrack\r\n );\r\n\r\n\r\n requestVehicleViewportPlaybackUpdate();\r\n\r\n }\r\n\r\n\r\n window.addEventListener(\r\n 'scroll',\r\n requestVehicleViewportPlaybackUpdate,\r\n {\r\n passive:true\r\n }\r\n );\r\n\r\n\r\n window.addEventListener(\r\n 'resize',\r\n requestVehicleViewportPlaybackUpdate,\r\n {\r\n passive:true\r\n }\r\n );\r\n\r\n\r\n document.addEventListener(\r\n 'visibilitychange',\r\n () => {\r\n\r\n if (\r\n document.hidden\r\n ){\r\n\r\n pauseVehicleVideosForVisibility();\r\n\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n requestVehicleViewportPlaybackUpdate();\r\n\r\n }\r\n );\r\n\r\n\r\n const vehiclePrev =\r\n root.querySelector(\r\n '[data-vehicle-prev]'\r\n );\r\n\r\n\r\n const vehicleNext =\r\n root.querySelector(\r\n '[data-vehicle-next]'\r\n );\r\n\r\n\r\n let activeVehicleIndex =\r\n 0;\r\n\r\n\r\n let preferredVehicleMuted =\r\n true;\r\n\r\n\r\n let preferredVehicleVolume =\r\n 1;\r\n\r\n\r\n let vehicleAnimating =\r\n false;\r\n\r\n\r\n let vehicleAnimationTimer =\r\n null;\r\n\r\n\r\n let mobileVehicleScrollTimer =\r\n null;\r\n\r\n\r\n let vehicleMouseDragging =\r\n false;\r\n\r\n\r\n let vehicleMouseStartX =\r\n 0;\r\n\r\n\r\n let vehicleMouseDeltaX =\r\n 0;\r\n\r\n\r\n let vehicleMousePointerId =\r\n null;\r\n\r\n\r\n function normalizeVehicleIndex(\r\n index\r\n ){\r\n\r\n const count =\r\n vehicleCards.length;\r\n\r\n\r\n if (\r\n !count\r\n ) return 0;\r\n\r\n\r\n return (\r\n (\r\n index %\r\n count\r\n ) +\r\n count\r\n ) %\r\n count;\r\n\r\n }\r\n\r\n\r\n function signedVehicleOffset(\r\n index,\r\n activeIndex\r\n ){\r\n\r\n const count =\r\n vehicleCards.length;\r\n\r\n\r\n let offset =\r\n normalizeVehicleIndex(\r\n index -\r\n activeIndex\r\n );\r\n\r\n\r\n if (\r\n offset >\r\n Math.floor(\r\n count \/\r\n 2\r\n )\r\n ){\r\n\r\n offset -=\r\n count;\r\n\r\n }\r\n\r\n\r\n return offset;\r\n\r\n }\r\n\r\n\r\n function vehicleSlot(\r\n offset\r\n ){\r\n\r\n const slots =\r\n {\r\n '-2':{\r\n x:'-236%',\r\n scale:.78,\r\n opacity:.48\r\n },\r\n '-1':{\r\n x:'-118%',\r\n scale:.98,\r\n opacity:.78\r\n },\r\n '0':{\r\n x:'0%',\r\n scale:1.18,\r\n opacity:1\r\n },\r\n '1':{\r\n x:'118%',\r\n scale:.98,\r\n opacity:.78\r\n },\r\n '2':{\r\n x:'236%',\r\n scale:.78,\r\n opacity:.48\r\n }\r\n };\r\n\r\n\r\n return (\r\n slots[\r\n String(\r\n offset\r\n )\r\n ] ||\r\n slots['0']\r\n );\r\n\r\n }\r\n\r\n\r\n function setVehicleCardClass(\r\n card,\r\n offset\r\n ){\r\n\r\n card.classList.remove(\r\n 'is-active',\r\n 'is-near',\r\n 'is-far'\r\n );\r\n\r\n\r\n if (\r\n offset ===\r\n 0\r\n ){\r\n\r\n card.classList.add(\r\n 'is-active'\r\n );\r\n\r\n }else if(\r\n Math.abs(\r\n offset\r\n ) ===\r\n 1\r\n ){\r\n\r\n card.classList.add(\r\n 'is-near'\r\n );\r\n\r\n }else{\r\n\r\n card.classList.add(\r\n 'is-far'\r\n );\r\n\r\n }\r\n\r\n\r\n card.setAttribute(\r\n 'aria-current',\r\n offset ===\r\n 0\r\n ? 'true'\r\n : 'false'\r\n );\r\n\r\n }\r\n\r\n\r\n function layoutDesktopVehicleLoop(\r\n direction =\r\n 0\r\n ){\r\n\r\n if (\r\n compactQuery.matches\r\n ){\r\n\r\n vehicleCards.forEach(\r\n card => {\r\n\r\n card.classList.remove(\r\n 'is-active',\r\n 'is-near',\r\n 'is-far',\r\n 'is-teleporting'\r\n );\r\n\r\n\r\n card.style.removeProperty(\r\n '--vehicle-x'\r\n );\r\n\r\n\r\n card.style.removeProperty(\r\n '--vehicle-scale'\r\n );\r\n\r\n\r\n card.style.removeProperty(\r\n '--vehicle-opacity'\r\n );\r\n\r\n\r\n delete card.dataset.vehicleOffset;\r\n\r\n }\r\n );\r\n\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n vehicleCards.forEach(\r\n (\r\n card,\r\n index\r\n ) => {\r\n\r\n const nextOffset =\r\n signedVehicleOffset(\r\n index,\r\n activeVehicleIndex\r\n );\r\n\r\n\r\n const previousOffset =\r\n Number(\r\n card.dataset.vehicleOffset\r\n );\r\n\r\n\r\n const slot =\r\n vehicleSlot(\r\n nextOffset\r\n );\r\n\r\n\r\n const wrapsRight =\r\n direction >\r\n 0 &&\r\n previousOffset ===\r\n -2 &&\r\n nextOffset ===\r\n 2;\r\n\r\n\r\n const wrapsLeft =\r\n direction <\r\n 0 &&\r\n previousOffset ===\r\n 2 &&\r\n nextOffset ===\r\n -2;\r\n\r\n\r\n const isWrapping =\r\n wrapsRight ||\r\n wrapsLeft;\r\n\r\n\r\n setVehicleCardClass(\r\n card,\r\n nextOffset\r\n );\r\n\r\n\r\n if (\r\n isWrapping\r\n ){\r\n\r\n card.classList.add(\r\n 'is-teleporting'\r\n );\r\n\r\n\r\n card.style.setProperty(\r\n '--vehicle-opacity',\r\n '0'\r\n );\r\n\r\n\r\n card.style.setProperty(\r\n '--vehicle-x',\r\n slot.x\r\n );\r\n\r\n\r\n card.style.setProperty(\r\n '--vehicle-scale',\r\n String(\r\n slot.scale\r\n )\r\n );\r\n\r\n\r\n requestAnimationFrame(\r\n () => {\r\n\r\n requestAnimationFrame(\r\n () => {\r\n\r\n card.classList.remove(\r\n 'is-teleporting'\r\n );\r\n\r\n\r\n card.style.setProperty(\r\n '--vehicle-opacity',\r\n String(\r\n slot.opacity\r\n )\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n );\r\n\r\n }else{\r\n\r\n card.classList.remove(\r\n 'is-teleporting'\r\n );\r\n\r\n\r\n card.style.setProperty(\r\n '--vehicle-x',\r\n slot.x\r\n );\r\n\r\n\r\n card.style.setProperty(\r\n '--vehicle-scale',\r\n String(\r\n slot.scale\r\n )\r\n );\r\n\r\n\r\n card.style.setProperty(\r\n '--vehicle-opacity',\r\n String(\r\n slot.opacity\r\n )\r\n );\r\n\r\n }\r\n\r\n\r\n card.dataset.vehicleOffset =\r\n String(\r\n nextOffset\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n function syncVehiclePlayback(){\r\n\r\n const playbackAllowed =\r\n vehiclePlaybackAllowed();\r\n\r\n\r\n vehicleVideos.forEach(\r\n (\r\n video,\r\n index\r\n ) => {\r\n\r\n if (\r\n !video\r\n ) return;\r\n\r\n\r\n const active =\r\n index ===\r\n activeVehicleIndex;\r\n\r\n\r\n video.controls =\r\n active;\r\n\r\n\r\n if (\r\n active &&\r\n playbackAllowed &&\r\n vehicleResumeOnVisible\r\n ){\r\n\r\n video.muted =\r\n preferredVehicleMuted;\r\n\r\n\r\n video.volume =\r\n preferredVehicleVolume;\r\n\r\n\r\n const playPromise =\r\n video.play();\r\n\r\n\r\n if (\r\n playPromise &&\r\n typeof playPromise.catch ===\r\n 'function'\r\n ){\r\n\r\n playPromise.catch(\r\n () => {}\r\n );\r\n\r\n }\r\n\r\n }else{\r\n\r\n video.pause();\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n function activateVehicle(\r\n index,\r\n {\r\n play =\r\n true,\r\n centerMobile =\r\n false\r\n } =\r\n {}\r\n ){\r\n\r\n if (\r\n !vehicleCards.length\r\n ) return;\r\n\r\n\r\n activeVehicleIndex =\r\n normalizeVehicleIndex(\r\n index\r\n );\r\n\r\n\r\n layoutDesktopVehicleLoop();\r\n\r\n\r\n if (\r\n compactQuery.matches\r\n ){\r\n\r\n vehicleCards.forEach(\r\n (\r\n card,\r\n cardIndex\r\n ) => {\r\n\r\n const active =\r\n cardIndex ===\r\n activeVehicleIndex;\r\n\r\n\r\n card.classList.toggle(\r\n 'is-active',\r\n active\r\n );\r\n\r\n\r\n card.setAttribute(\r\n 'aria-current',\r\n active\r\n ? 'true'\r\n : 'false'\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n if (\r\n play\r\n ){\r\n\r\n vehicleResumeOnVisible =\r\n true;\r\n\r\n\r\n syncVehiclePlayback();\r\n\r\n }\r\n\r\n\r\n if (\r\n centerMobile &&\r\n compactQuery.matches\r\n ){\r\n\r\n const card =\r\n vehicleCards[\r\n activeVehicleIndex\r\n ];\r\n\r\n\r\n card?.scrollIntoView(\r\n {\r\n behavior:\r\n reducedMotion.matches\r\n ? 'auto'\r\n : 'smooth',\r\n block:'nearest',\r\n inline:'center'\r\n }\r\n );\r\n\r\n }\r\n\r\n }\r\n\r\n\r\n function finishVehicleAnimation(){\r\n\r\n vehicleAnimating =\r\n false;\r\n\r\n\r\n vehicleAnimationTimer =\r\n null;\r\n\r\n }\r\n\r\n\r\n function stepVehicle(\r\n direction\r\n ){\r\n\r\n if (\r\n compactQuery.matches ||\r\n vehicleAnimating ||\r\n !vehicleCards.length\r\n ) return;\r\n\r\n\r\n vehicleAnimating =\r\n true;\r\n\r\n\r\n activeVehicleIndex =\r\n normalizeVehicleIndex(\r\n activeVehicleIndex +\r\n direction\r\n );\r\n\r\n\r\n layoutDesktopVehicleLoop(\r\n direction\r\n );\r\n\r\n\r\n vehicleResumeOnVisible =\r\n true;\r\n\r\n\r\n syncVehiclePlayback();\r\n\r\n\r\n window.clearTimeout(\r\n vehicleAnimationTimer\r\n );\r\n\r\n\r\n vehicleAnimationTimer =\r\n window.setTimeout(\r\n finishVehicleAnimation,\r\n reducedMotion.matches\r\n ? 0\r\n : 700\r\n );\r\n\r\n }\r\n\r\n\r\n function focusVehicleCard(\r\n index\r\n ){\r\n\r\n if (\r\n compactQuery.matches\r\n ){\r\n\r\n activateVehicle(\r\n index,\r\n {\r\n play:true,\r\n centerMobile:true\r\n }\r\n );\r\n\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n const offset =\r\n signedVehicleOffset(\r\n index,\r\n activeVehicleIndex\r\n );\r\n\r\n\r\n if (\r\n offset ===\r\n 0\r\n ) return;\r\n\r\n\r\n const direction =\r\n offset >\r\n 0\r\n ? 1\r\n : -1;\r\n\r\n\r\n const steps =\r\n Math.abs(\r\n offset\r\n );\r\n\r\n\r\n stepVehicle(\r\n direction\r\n );\r\n\r\n\r\n if (\r\n steps >\r\n 1\r\n ){\r\n\r\n window.setTimeout(\r\n () => {\r\n\r\n stepVehicle(\r\n direction\r\n );\r\n\r\n },\r\n reducedMotion.matches\r\n ? 0\r\n : 730\r\n );\r\n\r\n }\r\n\r\n }\r\n\r\n\r\n vehicleCards.forEach(\r\n (\r\n card,\r\n index\r\n ) => {\r\n\r\n const video =\r\n vehicleVideos[\r\n index\r\n ];\r\n\r\n\r\n card.addEventListener(\r\n 'click',\r\n event => {\r\n\r\n if (\r\n event.target.closest(\r\n 'button'\r\n ) ||\r\n (\r\n index ===\r\n activeVehicleIndex &&\r\n event.target.closest(\r\n 'video'\r\n )\r\n )\r\n ) return;\r\n\r\n\r\n if (\r\n vehicleMouseDragging\r\n ) return;\r\n\r\n\r\n focusVehicleCard(\r\n index\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n video?.addEventListener(\r\n 'play',\r\n () => {\r\n\r\n if (\r\n !vehiclePlaybackAllowed()\r\n ){\r\n\r\n video.pause();\r\n\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n vehicleResumeOnVisible =\r\n true;\r\n\r\n\r\n if (\r\n index !==\r\n activeVehicleIndex\r\n ){\r\n\r\n activeVehicleIndex =\r\n index;\r\n\r\n\r\n layoutDesktopVehicleLoop();\r\n\r\n\r\n if (\r\n compactQuery.matches\r\n ){\r\n\r\n vehicleCards.forEach(\r\n (\r\n item,\r\n itemIndex\r\n ) => {\r\n\r\n item.classList.toggle(\r\n 'is-active',\r\n itemIndex ===\r\n activeVehicleIndex\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n }\r\n\r\n\r\n vehicleVideos.forEach(\r\n (\r\n otherVideo,\r\n otherIndex\r\n ) => {\r\n\r\n if (\r\n otherIndex !==\r\n index\r\n ){\r\n\r\n otherVideo?.pause();\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n video?.addEventListener(\r\n 'pause',\r\n () => {\r\n\r\n if (\r\n index !==\r\n activeVehicleIndex ||\r\n !vehiclePlaybackAllowed() ||\r\n video.ended\r\n ) return;\r\n\r\n\r\n vehicleResumeOnVisible =\r\n false;\r\n\r\n }\r\n );\r\n\r\n\r\n video?.addEventListener(\r\n 'volumechange',\r\n () => {\r\n\r\n if (\r\n index !==\r\n activeVehicleIndex\r\n ) return;\r\n\r\n\r\n preferredVehicleMuted =\r\n video.muted;\r\n\r\n\r\n preferredVehicleVolume =\r\n video.volume;\r\n\r\n }\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n vehiclePrev?.addEventListener(\r\n 'click',\r\n () => {\r\n\r\n stepVehicle(\r\n -1\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n vehicleNext?.addEventListener(\r\n 'click',\r\n () => {\r\n\r\n stepVehicle(\r\n 1\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n vehicleTrack?.addEventListener(\r\n 'keydown',\r\n event => {\r\n\r\n if (\r\n compactQuery.matches\r\n ) return;\r\n\r\n\r\n if (\r\n event.key ===\r\n 'ArrowLeft'\r\n ){\r\n\r\n event.preventDefault();\r\n\r\n\r\n stepVehicle(\r\n -1\r\n );\r\n\r\n }else if(\r\n event.key ===\r\n 'ArrowRight'\r\n ){\r\n\r\n event.preventDefault();\r\n\r\n\r\n stepVehicle(\r\n 1\r\n );\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n\r\n \/* =======================================================\r\n MOUSE-ONLY DRAG\r\n ======================================================= *\/\r\n\r\n function resetVehicleMouseDrag(){\r\n\r\n if (\r\n !vehicleTrack\r\n ) return;\r\n\r\n\r\n vehicleMouseDragging =\r\n false;\r\n\r\n\r\n vehicleMousePointerId =\r\n null;\r\n\r\n\r\n vehicleTrack.classList.remove(\r\n 'is-mouse-dragging'\r\n );\r\n\r\n\r\n vehicleTrack.style.setProperty(\r\n '--vehicle-drag-x',\r\n '0px'\r\n );\r\n\r\n }\r\n\r\n\r\n vehicleTrack?.addEventListener(\r\n 'pointerdown',\r\n event => {\r\n\r\n if (\r\n compactQuery.matches ||\r\n event.pointerType !==\r\n 'mouse' ||\r\n event.button !==\r\n 0 ||\r\n event.target.closest(\r\n 'button'\r\n )\r\n ) return;\r\n\r\n\r\n const activeVideoInteraction =\r\n event.target.closest(\r\n '.lis__vehicle-card.is-active video'\r\n );\r\n\r\n\r\n if (\r\n activeVideoInteraction\r\n ) return;\r\n\r\n\r\n vehicleMouseDragging =\r\n true;\r\n\r\n\r\n vehicleMousePointerId =\r\n event.pointerId;\r\n\r\n\r\n vehicleMouseStartX =\r\n event.clientX;\r\n\r\n\r\n vehicleMouseDeltaX =\r\n 0;\r\n\r\n\r\n vehicleTrack.classList.add(\r\n 'is-mouse-dragging'\r\n );\r\n\r\n\r\n vehicleTrack.setPointerCapture?.(\r\n event.pointerId\r\n );\r\n\r\n\r\n event.preventDefault();\r\n\r\n }\r\n );\r\n\r\n\r\n vehicleTrack?.addEventListener(\r\n 'pointermove',\r\n event => {\r\n\r\n if (\r\n !vehicleMouseDragging ||\r\n event.pointerId !==\r\n vehicleMousePointerId\r\n ) return;\r\n\r\n\r\n vehicleMouseDeltaX =\r\n Math.max(\r\n -170,\r\n Math.min(\r\n 170,\r\n event.clientX -\r\n vehicleMouseStartX\r\n )\r\n );\r\n\r\n\r\n vehicleTrack.style.setProperty(\r\n '--vehicle-drag-x',\r\n vehicleMouseDeltaX.toFixed(\r\n 1\r\n ) +\r\n 'px'\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n function finishVehicleMouseDrag(\r\n event\r\n ){\r\n\r\n if (\r\n !vehicleMouseDragging ||\r\n (\r\n event &&\r\n event.pointerId !==\r\n vehicleMousePointerId\r\n )\r\n ) return;\r\n\r\n\r\n const delta =\r\n vehicleMouseDeltaX;\r\n\r\n\r\n resetVehicleMouseDrag();\r\n\r\n\r\n if (\r\n Math.abs(\r\n delta\r\n ) <\r\n 42\r\n ) return;\r\n\r\n\r\n stepVehicle(\r\n delta <\r\n 0\r\n ? 1\r\n : -1\r\n );\r\n\r\n }\r\n\r\n\r\n vehicleTrack?.addEventListener(\r\n 'pointerup',\r\n finishVehicleMouseDrag\r\n );\r\n\r\n\r\n vehicleTrack?.addEventListener(\r\n 'pointercancel',\r\n finishVehicleMouseDrag\r\n );\r\n\r\n\r\n vehicleTrack?.addEventListener(\r\n 'lostpointercapture',\r\n event => {\r\n\r\n if (\r\n vehicleMouseDragging\r\n ){\r\n\r\n finishVehicleMouseDrag(\r\n event\r\n );\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n\r\n \/* =======================================================\r\n MOBILE SWIPE\r\n ======================================================= *\/\r\n\r\n function nearestMobileVehicleIndex(){\r\n\r\n if (\r\n !vehicleTrack ||\r\n !vehicleCards.length\r\n ) return 0;\r\n\r\n\r\n const trackRect =\r\n vehicleTrack.getBoundingClientRect();\r\n\r\n\r\n const trackCenter =\r\n trackRect.left +\r\n trackRect.width *\r\n .5;\r\n\r\n\r\n let nearest =\r\n 0;\r\n\r\n\r\n let nearestDistance =\r\n Infinity;\r\n\r\n\r\n vehicleCards.forEach(\r\n (\r\n card,\r\n index\r\n ) => {\r\n\r\n const rect =\r\n card.getBoundingClientRect();\r\n\r\n\r\n const center =\r\n rect.left +\r\n rect.width *\r\n .5;\r\n\r\n\r\n const distance =\r\n Math.abs(\r\n center -\r\n trackCenter\r\n );\r\n\r\n\r\n if (\r\n distance <\r\n nearestDistance\r\n ){\r\n\r\n nearestDistance =\r\n distance;\r\n\r\n\r\n nearest =\r\n index;\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n\r\n return nearest;\r\n\r\n }\r\n\r\n\r\n vehicleTrack?.addEventListener(\r\n 'scroll',\r\n () => {\r\n\r\n if (\r\n !compactQuery.matches\r\n ) return;\r\n\r\n\r\n window.clearTimeout(\r\n mobileVehicleScrollTimer\r\n );\r\n\r\n\r\n mobileVehicleScrollTimer =\r\n window.setTimeout(\r\n () => {\r\n\r\n const nearest =\r\n nearestMobileVehicleIndex();\r\n\r\n\r\n if (\r\n nearest !==\r\n activeVehicleIndex\r\n ){\r\n\r\n activateVehicle(\r\n nearest,\r\n {\r\n play:true,\r\n centerMobile:false\r\n }\r\n );\r\n\r\n }\r\n\r\n },\r\n 120\r\n );\r\n\r\n },\r\n {\r\n passive:true\r\n }\r\n );\r\n\r\n\r\n \/* =======================================================\r\n FULLSCREEN WRAPPER + X CLOSE\r\n ======================================================= *\/\r\n\r\n function currentFullscreenElement(){\r\n\r\n return (\r\n document.fullscreenElement ||\r\n document.webkitFullscreenElement ||\r\n null\r\n );\r\n\r\n }\r\n\r\n\r\n function requestVehicleFullscreen(\r\n card\r\n ){\r\n\r\n if (\r\n !card\r\n ) return;\r\n\r\n\r\n const index =\r\n vehicleCards.indexOf(\r\n card\r\n );\r\n\r\n\r\n if (\r\n index >=\r\n 0\r\n ){\r\n\r\n activateVehicle(\r\n index,\r\n {\r\n play:true,\r\n centerMobile:false\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n if (\r\n card.requestFullscreen\r\n ){\r\n\r\n card.requestFullscreen().catch(\r\n () => {}\r\n );\r\n\r\n }else if(\r\n card.webkitRequestFullscreen\r\n ){\r\n\r\n card.webkitRequestFullscreen();\r\n\r\n }\r\n\r\n }\r\n\r\n\r\n function exitVehicleFullscreen(){\r\n\r\n if (\r\n document.exitFullscreen\r\n ){\r\n\r\n document.exitFullscreen().catch(\r\n () => {}\r\n );\r\n\r\n }else if(\r\n document.webkitExitFullscreen\r\n ){\r\n\r\n document.webkitExitFullscreen();\r\n\r\n }\r\n\r\n }\r\n\r\n\r\n root.querySelectorAll(\r\n '[data-vehicle-fullscreen]'\r\n ).forEach(\r\n button => {\r\n\r\n button.addEventListener(\r\n 'click',\r\n event => {\r\n\r\n event.preventDefault();\r\n event.stopPropagation();\r\n\r\n\r\n requestVehicleFullscreen(\r\n button.closest(\r\n '[data-vehicle-card]'\r\n )\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n root.querySelectorAll(\r\n '[data-vehicle-fs-close]'\r\n ).forEach(\r\n button => {\r\n\r\n button.addEventListener(\r\n 'click',\r\n event => {\r\n\r\n event.preventDefault();\r\n event.stopPropagation();\r\n\r\n\r\n exitVehicleFullscreen();\r\n\r\n }\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n function syncVehicleFullscreen(){\r\n\r\n const fullscreenCard =\r\n currentFullscreenElement();\r\n\r\n\r\n if (\r\n !fullscreenCard ||\r\n !fullscreenCard.matches?.(\r\n '[data-vehicle-card]'\r\n )\r\n ){\r\n\r\n if (\r\n !vehicleTrackVisible\r\n ){\r\n\r\n pauseVehicleVideosForVisibility();\r\n\r\n }else if(\r\n vehicleResumeOnVisible\r\n ){\r\n\r\n syncVehiclePlayback();\r\n\r\n }\r\n\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n const index =\r\n vehicleCards.indexOf(\r\n fullscreenCard\r\n );\r\n\r\n\r\n if (\r\n index >=\r\n 0\r\n ){\r\n\r\n activateVehicle(\r\n index,\r\n {\r\n play:true,\r\n centerMobile:false\r\n }\r\n );\r\n\r\n }\r\n\r\n }\r\n\r\n\r\n document.addEventListener(\r\n 'fullscreenchange',\r\n syncVehicleFullscreen\r\n );\r\n\r\n\r\n document.addEventListener(\r\n 'webkitfullscreenchange',\r\n syncVehicleFullscreen\r\n );\r\n\r\n\r\n \/* =======================================================\r\n TOP SUPPORT REVEAL\r\n ======================================================= *\/\r\n\r\n function initServiceReveal(){\r\n\r\n serviceRevealObserver?.disconnect();\r\n\r\n\r\n if (\r\n !serviceEdition ||\r\n serviceMotionPlayed ||\r\n reducedMotion.matches ||\r\n !(\r\n 'IntersectionObserver' in window\r\n )\r\n ){\r\n\r\n root.classList.remove(\r\n 'has-service-motion'\r\n );\r\n\r\n\r\n root.classList.add(\r\n 'service-motion-ready'\r\n );\r\n\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n root.classList.add(\r\n 'has-service-motion'\r\n );\r\n\r\n\r\n serviceRevealObserver =\r\n new IntersectionObserver(\r\n entries => {\r\n\r\n entries.forEach(\r\n entry => {\r\n\r\n if (\r\n !entry.isIntersecting\r\n ) return;\r\n\r\n\r\n serviceMotionPlayed =\r\n true;\r\n\r\n\r\n requestAnimationFrame(\r\n () => {\r\n\r\n root.classList.add(\r\n 'service-motion-ready'\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n serviceRevealObserver.disconnect();\r\n\r\n }\r\n );\r\n\r\n },\r\n {\r\n rootMargin:'0px 0px -12% 0px',\r\n threshold:.10\r\n }\r\n );\r\n\r\n\r\n serviceRevealObserver.observe(\r\n serviceEdition\r\n );\r\n\r\n }\r\n\r\n\r\n \/* =======================================================\r\n TOP SUPPORT SCROLL DRIFT \u2014 DESKTOP ONLY\r\n ======================================================= *\/\r\n\r\n function updateServiceScrollMotion(){\r\n\r\n serviceScrollTicking =\r\n false;\r\n\r\n\r\n if (\r\n !serviceEdition ||\r\n compactQuery.matches ||\r\n reducedMotion.matches\r\n ){\r\n\r\n root.classList.remove(\r\n 'service-scroll-active'\r\n );\r\n\r\n\r\n serviceCards.forEach(\r\n card => {\r\n\r\n card.style.setProperty(\r\n '--service-scroll-y',\r\n '0px'\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n serviceMedia.forEach(\r\n media => {\r\n\r\n media.style.setProperty(\r\n '--service-image-y',\r\n '0px'\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n const rect =\r\n serviceEdition.getBoundingClientRect();\r\n\r\n\r\n const vh =\r\n Math.max(\r\n 1,\r\n window.innerHeight ||\r\n document.documentElement.clientHeight\r\n );\r\n\r\n\r\n const visible =\r\n rect.bottom >\r\n 0 &&\r\n rect.top <\r\n vh;\r\n\r\n\r\n if (\r\n !visible\r\n ){\r\n\r\n root.classList.remove(\r\n 'service-scroll-active'\r\n );\r\n\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n root.classList.add(\r\n 'service-scroll-active'\r\n );\r\n\r\n\r\n const sectionCenter =\r\n rect.top +\r\n rect.height *\r\n .5;\r\n\r\n\r\n const viewportCenter =\r\n vh *\r\n .5;\r\n\r\n\r\n const normalized =\r\n Math.max(\r\n -1,\r\n Math.min(\r\n 1,\r\n (\r\n viewportCenter -\r\n sectionCenter\r\n ) \/\r\n vh\r\n )\r\n );\r\n\r\n\r\n serviceCards.forEach(\r\n (\r\n card,\r\n index\r\n ) => {\r\n\r\n const direction =\r\n index %\r\n 2 ===\r\n 0\r\n ? 1\r\n : -1;\r\n\r\n\r\n const amount =\r\n normalized *\r\n direction *\r\n 7;\r\n\r\n\r\n card.style.setProperty(\r\n '--service-scroll-y',\r\n amount.toFixed(\r\n 2\r\n ) +\r\n 'px'\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n serviceMedia.forEach(\r\n (\r\n media,\r\n index\r\n ) => {\r\n\r\n const direction =\r\n index %\r\n 2 ===\r\n 0\r\n ? -1\r\n : 1;\r\n\r\n\r\n const amount =\r\n normalized *\r\n direction *\r\n 5;\r\n\r\n\r\n media.style.setProperty(\r\n '--service-image-y',\r\n amount.toFixed(\r\n 2\r\n ) +\r\n 'px'\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n function requestServiceScrollMotion(){\r\n\r\n if (\r\n serviceScrollTicking\r\n ) return;\r\n\r\n\r\n serviceScrollTicking =\r\n true;\r\n\r\n\r\n requestAnimationFrame(\r\n updateServiceScrollMotion\r\n );\r\n\r\n }\r\n\r\n\r\n const hotels =\r\n [\r\n {\r\n id:'ramada-alibeykoy',\r\n index:0,\r\n workingName:'Ramada Alibeyk\u00f6y',\r\n verifiedOfficialName:'',\r\n location:'',\r\n image:'https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/ramada_by_wyndham_istanbul_alibeykoy-scaled.jpg',\r\n imageWidth:0,\r\n imageHeight:0,\r\n objectPositionDesktop:'50% 50%',\r\n objectPositionTablet:'50% 50%',\r\n objectPositionMobile:'50% 50%',\r\n alt:'Ramada Alibeyk\u00f6y partner-stay property',\r\n verificationStatus:'verify-official-property'\r\n },\r\n {\r\n id:'rixos',\r\n index:1,\r\n workingName:'Rixos Hotel',\r\n verifiedOfficialName:'',\r\n location:'',\r\n image:'https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/Rixos-Pera-Istanbul-Exterior-2021_0-scaled.jpg',\r\n imageWidth:0,\r\n imageHeight:0,\r\n objectPositionDesktop:'50% 52%',\r\n objectPositionTablet:'50% 52%',\r\n objectPositionMobile:'50% 50%',\r\n alt:'Rixos Hotel partner-stay property in Istanbul',\r\n verificationStatus:'verify-official-property'\r\n },\r\n {\r\n id:'taksim-gonen',\r\n index:2,\r\n workingName:'Taksim Gonen Hotel',\r\n verifiedOfficialName:'',\r\n location:'',\r\n image:'https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/taksim-gonen-room-1-scaled.jpg',\r\n imageWidth:0,\r\n imageHeight:0,\r\n objectPositionDesktop:'50% 50%',\r\n objectPositionTablet:'50% 50%',\r\n objectPositionMobile:'50% 48%',\r\n alt:'Taksim Gonen Hotel partner-stay room',\r\n verificationStatus:'verify-official-property'\r\n },\r\n {\r\n id:'holiday-inn',\r\n index:3,\r\n workingName:'Holiday Inn Hotel',\r\n verifiedOfficialName:'',\r\n location:'',\r\n image:'https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/holiday-inn-istanbul-6594981802-4x3-1-scaled.jpg',\r\n imageWidth:0,\r\n imageHeight:0,\r\n objectPositionDesktop:'50% 48%',\r\n objectPositionTablet:'50% 48%',\r\n objectPositionMobile:'50% 50%',\r\n alt:'Holiday Inn Hotel partner-stay property in Istanbul',\r\n verificationStatus:'verify-official-property'\r\n },\r\n {\r\n id:'movenpick',\r\n index:4,\r\n workingName:'M\u00d6VENPICK',\r\n verifiedOfficialName:'M\u00d6VENPICK',\r\n location:'',\r\n image:'https:\/\/laminasmile.com\/wp-content\/uploads\/2026\/09\/914581645.jpg',\r\n imageWidth:0,\r\n imageHeight:0,\r\n objectPositionDesktop:'50% 50%',\r\n objectPositionTablet:'50% 50%',\r\n objectPositionMobile:'50% 50%',\r\n alt:'M\u00d6VENPICK partner-stay property',\r\n verificationStatus:'verify-exact-property'\r\n }\r\n ];\r\n\r\n\r\n let activeHotelIndex =\r\n 0;\r\n\r\n\r\n let transitionToken =\r\n 0;\r\n\r\n\r\n let transitionTimer =\r\n null;\r\n\r\n\r\n let entryPlayed =\r\n false;\r\n\r\n\r\n let entryObserver =\r\n null;\r\n\r\n\r\n let mobileRowsObserver =\r\n null;\r\n\r\n\r\n function clamp(\r\n value,\r\n min,\r\n max\r\n ){\r\n\r\n return Math.min(\r\n max,\r\n Math.max(\r\n min,\r\n value\r\n )\r\n );\r\n\r\n }\r\n\r\n\r\n function getObjectPosition(\r\n hotel\r\n ){\r\n\r\n if (\r\n window.innerWidth <=\r\n 899\r\n ){\r\n\r\n return (\r\n hotel.objectPositionMobile ||\r\n '50% 50%'\r\n );\r\n\r\n }\r\n\r\n\r\n if (\r\n window.innerWidth <=\r\n 1180\r\n ){\r\n\r\n return (\r\n hotel.objectPositionTablet ||\r\n hotel.objectPositionDesktop ||\r\n '50% 50%'\r\n );\r\n\r\n }\r\n\r\n\r\n return (\r\n hotel.objectPositionDesktop ||\r\n '50% 50%'\r\n );\r\n\r\n }\r\n\r\n\r\n function renderFallback(\r\n layer,\r\n hotel\r\n ){\r\n\r\n layer.className =\r\n 'lis__image-layer is-fallback';\r\n\r\n\r\n layer.innerHTML =\r\n '<div class=\"lis__fallback-inner\" aria-hidden=\"true\"><\/div>' +\r\n '<div class=\"lis__fallback-copy\">' +\r\n '<span class=\"lis__fallback-kicker\">Partner stay imagery<\/span>' +\r\n '<span class=\"lis__fallback-title\">' +\r\n hotel.workingName +\r\n '<\/span>' +\r\n '<\/div>';\r\n\r\n }\r\n\r\n\r\n function loadHotelImage(\r\n hotel\r\n ){\r\n\r\n if (\r\n !hotel.image\r\n ){\r\n\r\n return Promise.resolve(\r\n {\r\n ok:false,\r\n image:null\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n return new Promise(\r\n resolve => {\r\n\r\n const image =\r\n new Image();\r\n\r\n\r\n image.decoding =\r\n 'async';\r\n\r\n\r\n image.alt =\r\n hotel.alt ||\r\n hotel.workingName;\r\n\r\n\r\n if (\r\n hotel.imageWidth >\r\n 0\r\n ){\r\n\r\n image.width =\r\n hotel.imageWidth;\r\n\r\n }\r\n\r\n\r\n if (\r\n hotel.imageHeight >\r\n 0\r\n ){\r\n\r\n image.height =\r\n hotel.imageHeight;\r\n\r\n }\r\n\r\n\r\n image.style.setProperty(\r\n '--lis-object-position',\r\n getObjectPosition(\r\n hotel\r\n )\r\n );\r\n\r\n\r\n image.onload =\r\n async () => {\r\n\r\n try{\r\n await image.decode?.();\r\n }catch(_error){\r\n \/* decode() may reject after a successful load in some browsers *\/\r\n }\r\n\r\n\r\n resolve(\r\n {\r\n ok:true,\r\n image\r\n }\r\n );\r\n\r\n };\r\n\r\n\r\n image.onerror =\r\n () => {\r\n\r\n resolve(\r\n {\r\n ok:false,\r\n image:null\r\n }\r\n );\r\n\r\n };\r\n\r\n\r\n image.src =\r\n hotel.image;\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n function updateButtonState(\r\n visualIndex\r\n ){\r\n\r\n hotelButtons.forEach(\r\n (\r\n button,\r\n index\r\n ) => {\r\n\r\n button.setAttribute(\r\n 'aria-pressed',\r\n index ===\r\n visualIndex\r\n ? 'true'\r\n : 'false'\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n async function showHotel(\r\n index,\r\n {\r\n commit =\r\n true\r\n } =\r\n {}\r\n ){\r\n\r\n const safeIndex =\r\n clamp(\r\n Number(\r\n index\r\n ) || 0,\r\n 0,\r\n hotels.length - 1\r\n );\r\n\r\n\r\n const hotel =\r\n hotels[\r\n safeIndex\r\n ];\r\n\r\n\r\n \/*\r\n Every click \/ hover \/ restore gets its own intent token.\r\n Older async image loads are allowed to finish privately,\r\n but they are never allowed to touch the shared visual layers.\r\n *\/\r\n const token =\r\n ++transitionToken;\r\n\r\n\r\n if (\r\n commit\r\n ){\r\n\r\n activeHotelIndex =\r\n safeIndex;\r\n\r\n }\r\n\r\n\r\n updateButtonState(\r\n safeIndex\r\n );\r\n\r\n\r\n activeHotelName.textContent =\r\n hotel.workingName;\r\n\r\n\r\n const loaded =\r\n await loadHotelImage(\r\n hotel\r\n );\r\n\r\n\r\n \/*\r\n CRITICAL:\r\n do not mutate incomingLayer unless this is still the latest request.\r\n This is what prevents a previously clicked hotel's image from\r\n contaminating a later hover preview.\r\n *\/\r\n if (\r\n token !==\r\n transitionToken\r\n ) return;\r\n\r\n\r\n window.clearTimeout(\r\n transitionTimer\r\n );\r\n\r\n\r\n incomingLayer.className =\r\n 'lis__image-layer';\r\n\r\n\r\n incomingLayer.innerHTML =\r\n '';\r\n\r\n\r\n if (\r\n loaded.ok &&\r\n loaded.image\r\n ){\r\n\r\n incomingLayer.appendChild(\r\n loaded.image\r\n );\r\n\r\n }else{\r\n\r\n renderFallback(\r\n incomingLayer,\r\n hotel\r\n );\r\n\r\n }\r\n\r\n\r\n if (\r\n reducedMotion.matches\r\n ){\r\n\r\n currentLayer.innerHTML =\r\n incomingLayer.innerHTML;\r\n\r\n\r\n currentLayer.className =\r\n incomingLayer.className +\r\n ' is-current';\r\n\r\n\r\n incomingLayer.innerHTML =\r\n '';\r\n\r\n\r\n incomingLayer.className =\r\n 'lis__image-layer';\r\n\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n \/*\r\n Reset the outgoing layer before beginning the newest transition.\r\n A cancelled older transition must not leave stale classes behind.\r\n *\/\r\n currentLayer.classList.remove(\r\n 'is-transitioning-out'\r\n );\r\n\r\n\r\n void incomingLayer.offsetWidth;\r\n\r\n\r\n incomingLayer.classList.add(\r\n 'is-transitioning-in'\r\n );\r\n\r\n\r\n currentLayer.classList.add(\r\n 'is-transitioning-out'\r\n );\r\n\r\n\r\n transitionTimer =\r\n window.setTimeout(\r\n () => {\r\n\r\n if (\r\n token !==\r\n transitionToken\r\n ) return;\r\n\r\n\r\n currentLayer.innerHTML =\r\n incomingLayer.innerHTML;\r\n\r\n\r\n currentLayer.className =\r\n incomingLayer.className\r\n .replace(\r\n 'is-transitioning-in',\r\n ''\r\n )\r\n .trim() +\r\n ' is-current';\r\n\r\n\r\n incomingLayer.innerHTML =\r\n '';\r\n\r\n\r\n incomingLayer.className =\r\n 'lis__image-layer';\r\n\r\n\r\n transitionTimer =\r\n null;\r\n\r\n },\r\n 720\r\n );\r\n\r\n }\r\n\r\n\r\n \/* =======================================================\r\n FULL-VIEW IMAGE LIGHTBOX\r\n -------------------------------------------------------\r\n - opens the currently selected hotel image\r\n - backdrop click closes\r\n - dedicated close control closes\r\n - Escape closes\r\n - clicking the image itself never closes\r\n ======================================================= *\/\r\n\r\n let lightbox =\r\n document.getElementById(\r\n 'lamina-stay-lightbox'\r\n );\r\n\r\n\r\n let lightboxImage =\r\n null;\r\n\r\n\r\n let lightboxClose =\r\n null;\r\n\r\n\r\n let lightboxDialog =\r\n null;\r\n\r\n\r\n let lastLightboxTrigger =\r\n null;\r\n\r\n\r\n function ensureLightbox(){\r\n\r\n if (\r\n lightbox\r\n ){\r\n\r\n lightboxImage =\r\n lightbox.querySelector(\r\n '.lis-lb__image'\r\n );\r\n\r\n\r\n lightboxClose =\r\n lightbox.querySelector(\r\n '.lis-lb__close'\r\n );\r\n\r\n\r\n lightboxDialog =\r\n lightbox.querySelector(\r\n '.lis-lb__dialog'\r\n );\r\n\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n lightbox =\r\n document.createElement(\r\n 'div'\r\n );\r\n\r\n\r\n lightbox.id =\r\n 'lamina-stay-lightbox';\r\n\r\n\r\n lightbox.className =\r\n 'lis-lb';\r\n\r\n\r\n lightbox.setAttribute(\r\n 'role',\r\n 'dialog'\r\n );\r\n\r\n\r\n lightbox.setAttribute(\r\n 'aria-modal',\r\n 'true'\r\n );\r\n\r\n\r\n lightbox.setAttribute(\r\n 'aria-hidden',\r\n 'true'\r\n );\r\n\r\n\r\n lightbox.setAttribute(\r\n 'aria-label',\r\n 'Hotel image full view'\r\n );\r\n\r\n\r\n lightbox.innerHTML =\r\n '<div class=\"lis-lb__dialog\" role=\"document\">' +\r\n '<img class=\"lis-lb__image\" alt=\"\">' +\r\n '<\/div>' +\r\n '<button class=\"lis-lb__close\" type=\"button\" aria-label=\"Close full-view image\"><\/button>' +\r\n '<p class=\"lis-lb__hint\" aria-hidden=\"true\">CLICK OUTSIDE THE IMAGE OR PRESS ESC TO CLOSE<\/p>';\r\n\r\n\r\n document.body.appendChild(\r\n lightbox\r\n );\r\n\r\n\r\n lightboxImage =\r\n lightbox.querySelector(\r\n '.lis-lb__image'\r\n );\r\n\r\n\r\n lightboxClose =\r\n lightbox.querySelector(\r\n '.lis-lb__close'\r\n );\r\n\r\n\r\n lightboxDialog =\r\n lightbox.querySelector(\r\n '.lis-lb__dialog'\r\n );\r\n\r\n\r\n \/*\r\n Only the empty backdrop closes the lightbox.\r\n Clicks on the actual image \/ dialog content are ignored.\r\n *\/\r\n lightbox.addEventListener(\r\n 'click',\r\n event => {\r\n\r\n if (\r\n event.target !==\r\n lightbox\r\n ) return;\r\n\r\n\r\n closeLightbox();\r\n\r\n }\r\n );\r\n\r\n\r\n lightboxDialog.addEventListener(\r\n 'click',\r\n event => {\r\n\r\n event.stopPropagation();\r\n\r\n }\r\n );\r\n\r\n\r\n lightboxClose.addEventListener(\r\n 'click',\r\n event => {\r\n\r\n event.preventDefault();\r\n event.stopPropagation();\r\n\r\n closeLightbox();\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n function openLightbox(){\r\n\r\n const hotel =\r\n hotels[\r\n activeHotelIndex\r\n ];\r\n\r\n\r\n if (\r\n !hotel ||\r\n !hotel.image\r\n ) return;\r\n\r\n\r\n ensureLightbox();\r\n\r\n\r\n lastLightboxTrigger =\r\n document.activeElement;\r\n\r\n\r\n lightboxImage.src =\r\n hotel.image;\r\n\r\n\r\n lightboxImage.alt =\r\n hotel.alt ||\r\n hotel.workingName ||\r\n 'Hotel image';\r\n\r\n\r\n lightbox.classList.add(\r\n 'is-open'\r\n );\r\n\r\n\r\n lightbox.setAttribute(\r\n 'aria-hidden',\r\n 'false'\r\n );\r\n\r\n\r\n document.body.classList.add(\r\n 'lis-lightbox-open'\r\n );\r\n\r\n\r\n requestAnimationFrame(\r\n () => {\r\n\r\n lightboxClose?.focus?.();\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n function closeLightbox(){\r\n\r\n if (\r\n !lightbox ||\r\n !lightbox.classList.contains(\r\n 'is-open'\r\n )\r\n ) return;\r\n\r\n\r\n lightbox.classList.remove(\r\n 'is-open'\r\n );\r\n\r\n\r\n lightbox.setAttribute(\r\n 'aria-hidden',\r\n 'true'\r\n );\r\n\r\n\r\n document.body.classList.remove(\r\n 'lis-lightbox-open'\r\n );\r\n\r\n\r\n if (\r\n lastLightboxTrigger &&\r\n typeof lastLightboxTrigger.focus ===\r\n 'function'\r\n ){\r\n\r\n lastLightboxTrigger.focus();\r\n\r\n }\r\n\r\n\r\n lastLightboxTrigger =\r\n null;\r\n\r\n }\r\n\r\n\r\n visualFrame?.addEventListener(\r\n 'click',\r\n event => {\r\n\r\n \/*\r\n Hotel index buttons live outside the visual frame, so any\r\n intentional click inside the visible image area opens full view.\r\n *\/\r\n event.preventDefault();\r\n\r\n openLightbox();\r\n\r\n }\r\n );\r\n\r\n\r\n visualFrame?.addEventListener(\r\n 'keydown',\r\n event => {\r\n\r\n if (\r\n event.key !==\r\n 'Enter' &&\r\n event.key !==\r\n ' '\r\n ) return;\r\n\r\n\r\n event.preventDefault();\r\n\r\n openLightbox();\r\n\r\n }\r\n );\r\n\r\n\r\n document.addEventListener(\r\n 'keydown',\r\n event => {\r\n\r\n if (\r\n event.key ===\r\n 'Escape'\r\n ){\r\n\r\n closeLightbox();\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n\r\n \/*\r\n CLICK-ONLY HOTEL SELECTION\r\n --------------------------------\r\n Images change only after an explicit button click.\r\n Hover, mouseenter, mouseleave, focus and blur do not preview\r\n or replace the currently selected hotel image.\r\n *\/\r\n hotelButtons.forEach(\r\n (\r\n button,\r\n index\r\n ) => {\r\n\r\n button.addEventListener(\r\n 'click',\r\n () => {\r\n\r\n showHotel(\r\n index,\r\n {\r\n commit:true\r\n }\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n \/* =======================================================\r\n ENTRANCE \u2014 ONCE\r\n ======================================================= *\/\r\n\r\n function cleanupEntrance(){\r\n\r\n window.setTimeout(\r\n () => {\r\n\r\n root.classList.remove(\r\n 'has-entry'\r\n );\r\n\r\n },\r\n 2050\r\n );\r\n\r\n }\r\n\r\n\r\n function initEntrance(){\r\n\r\n entryObserver?.disconnect();\r\n\r\n\r\n if (\r\n reducedMotion.matches ||\r\n entryPlayed ||\r\n !(\r\n 'IntersectionObserver' in window\r\n )\r\n ){\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n root.classList.add(\r\n 'has-entry'\r\n );\r\n\r\n\r\n entryObserver =\r\n new IntersectionObserver(\r\n entries => {\r\n\r\n entries.forEach(\r\n entry => {\r\n\r\n if (\r\n !entry.isIntersecting\r\n ) return;\r\n\r\n\r\n entryPlayed =\r\n true;\r\n\r\n\r\n requestAnimationFrame(\r\n () => {\r\n\r\n root.classList.add(\r\n 'is-entered'\r\n );\r\n\r\n\r\n cleanupEntrance();\r\n\r\n }\r\n );\r\n\r\n\r\n entryObserver.disconnect();\r\n\r\n }\r\n );\r\n\r\n },\r\n {\r\n rootMargin:'0px 0px -18% 0px',\r\n threshold:.02\r\n }\r\n );\r\n\r\n\r\n entryObserver.observe(\r\n root\r\n );\r\n\r\n }\r\n\r\n\r\n \/* =======================================================\r\n MOBILE LOGISTICS ENTRANCE\r\n ======================================================= *\/\r\n\r\n function initMobileRows(){\r\n\r\n mobileRowsObserver?.disconnect();\r\n\r\n\r\n root.classList.remove(\r\n 'has-mobile-rows'\r\n );\r\n\r\n\r\n if (\r\n !compactQuery.matches ||\r\n reducedMotion.matches ||\r\n !(\r\n 'IntersectionObserver' in window\r\n )\r\n ){\r\n\r\n logisticsRows.forEach(\r\n row => {\r\n\r\n row.dataset.mobileReady =\r\n 'true';\r\n\r\n }\r\n );\r\n\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n root.classList.add(\r\n 'has-mobile-rows'\r\n );\r\n\r\n\r\n mobileRowsObserver =\r\n new IntersectionObserver(\r\n entries => {\r\n\r\n entries.forEach(\r\n entry => {\r\n\r\n if (\r\n !entry.isIntersecting\r\n ) return;\r\n\r\n\r\n entry.target.dataset.mobileReady =\r\n 'true';\r\n\r\n\r\n mobileRowsObserver.unobserve(\r\n entry.target\r\n );\r\n\r\n }\r\n );\r\n\r\n },\r\n {\r\n rootMargin:'0px 0px -18% 0px',\r\n threshold:.04\r\n }\r\n );\r\n\r\n\r\n logisticsRows.forEach(\r\n row => {\r\n\r\n if (\r\n row.dataset.mobileReady !==\r\n 'true'\r\n ){\r\n\r\n row.dataset.mobileReady =\r\n 'false';\r\n\r\n }\r\n\r\n\r\n mobileRowsObserver.observe(\r\n row\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n \/* =======================================================\r\n PASSED-CONTENT DEPTH\r\n Current \/ upcoming content stays sharp.\r\n Only genuinely passed content softens.\r\n ======================================================= *\/\r\n\r\n const depthLayers =\r\n [\r\n ...root.querySelectorAll(\r\n '[data-lis-depth]'\r\n )\r\n ];\r\n\r\n\r\n const depthProfiles =\r\n {\r\n\r\n desktop:{\r\n\r\n eyebrow:{\r\n start:.30,\r\n full:-.12,\r\n blur:2.4,\r\n opacityMin:.96\r\n },\r\n\r\n headline:{\r\n start:.28,\r\n full:-.15,\r\n blur:3.6,\r\n opacityMin:.95\r\n },\r\n\r\n copy:{\r\n start:.23,\r\n full:-.17,\r\n blur:2.0,\r\n opacityMin:.97\r\n },\r\n\r\n ui:{\r\n start:.14,\r\n full:-.20,\r\n blur:1.65,\r\n opacityMin:.98\r\n },\r\n\r\n media:{\r\n start:.08,\r\n full:-.24,\r\n blur:2.35,\r\n opacityMin:.985\r\n }\r\n\r\n },\r\n\r\n mobile:{\r\n\r\n eyebrow:{\r\n start:0,\r\n full:0,\r\n blur:0,\r\n opacityMin:1\r\n },\r\n\r\n headline:{\r\n start:0,\r\n full:0,\r\n blur:0,\r\n opacityMin:1\r\n },\r\n\r\n copy:{\r\n start:0,\r\n full:0,\r\n blur:0,\r\n opacityMin:1\r\n },\r\n\r\n ui:{\r\n start:0,\r\n full:0,\r\n blur:0,\r\n opacityMin:1\r\n },\r\n\r\n media:{\r\n start:0,\r\n full:0,\r\n blur:0,\r\n opacityMin:1\r\n }\r\n\r\n }\r\n\r\n };\r\n\r\n\r\n let depthTicking =\r\n false;\r\n\r\n\r\n function smoothstep(\r\n value\r\n ){\r\n\r\n const t =\r\n clamp(\r\n value,\r\n 0,\r\n 1\r\n );\r\n\r\n\r\n return (\r\n t *\r\n t *\r\n (\r\n 3 -\r\n 2 *\r\n t\r\n )\r\n );\r\n\r\n }\r\n\r\n\r\n function updateDepth(){\r\n\r\n depthTicking =\r\n false;\r\n\r\n\r\n if (\r\n compactQuery.matches\r\n ){\r\n depthLayers.forEach(\r\n element => {\r\n element.style.setProperty(\r\n '--lis-passed-blur',\r\n '0px'\r\n );\r\n element.style.setProperty(\r\n '--lis-depth-opacity',\r\n '1'\r\n );\r\n }\r\n );\r\n return;\r\n }\r\n\r\n\r\n const vh =\r\n Math.max(\r\n 1,\r\n window.innerHeight ||\r\n document.documentElement.clientHeight\r\n );\r\n\r\n\r\n const set =\r\n compactQuery.matches\r\n ? depthProfiles.mobile\r\n : depthProfiles.desktop;\r\n\r\n\r\n depthLayers.forEach(\r\n element => {\r\n\r\n const type =\r\n element.dataset.lisDepth ||\r\n 'copy';\r\n\r\n\r\n const config =\r\n set[\r\n type\r\n ] ||\r\n set.copy;\r\n\r\n\r\n const rect =\r\n element.getBoundingClientRect();\r\n\r\n\r\n const center =\r\n rect.top +\r\n rect.height *\r\n .5;\r\n\r\n\r\n const startY =\r\n vh *\r\n config.start;\r\n\r\n\r\n const fullY =\r\n vh *\r\n config.full;\r\n\r\n\r\n let progress =\r\n center <\r\n startY\r\n ? (\r\n startY -\r\n center\r\n ) \/\r\n Math.max(\r\n 1,\r\n startY -\r\n fullY\r\n )\r\n : 0;\r\n\r\n\r\n progress =\r\n smoothstep(\r\n progress\r\n );\r\n\r\n\r\n const activeInteraction =\r\n element.matches(\r\n ':hover, :focus-within'\r\n );\r\n\r\n\r\n if (\r\n activeInteraction\r\n ){\r\n\r\n progress =\r\n 0;\r\n\r\n }\r\n\r\n\r\n const blur =\r\n reducedMotion.matches\r\n ? 0\r\n : (\r\n config.blur *\r\n progress\r\n );\r\n\r\n\r\n const opacity =\r\n reducedMotion.matches\r\n ? 1\r\n : (\r\n 1 -\r\n (\r\n 1 -\r\n config.opacityMin\r\n ) *\r\n progress\r\n );\r\n\r\n\r\n element.style.setProperty(\r\n '--lis-passed-blur',\r\n blur.toFixed(\r\n 2\r\n ) +\r\n 'px'\r\n );\r\n\r\n\r\n element.style.setProperty(\r\n '--lis-depth-opacity',\r\n opacity.toFixed(\r\n 3\r\n )\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n function requestDepthUpdate(){\r\n\r\n if (\r\n depthTicking\r\n ) return;\r\n\r\n\r\n depthTicking =\r\n true;\r\n\r\n\r\n requestAnimationFrame(\r\n updateDepth\r\n );\r\n\r\n }\r\n\r\n\r\n window.addEventListener(\r\n 'scroll',\r\n requestDepthUpdate,\r\n {\r\n passive:true\r\n }\r\n );\r\n\r\n\r\n window.addEventListener(\r\n 'scroll',\r\n requestServiceScrollMotion,\r\n {\r\n passive:true\r\n }\r\n );\r\n\r\n\r\n window.addEventListener(\r\n 'resize',\r\n requestDepthUpdate,\r\n {\r\n passive:true\r\n }\r\n );\r\n\r\n\r\n window.addEventListener(\r\n 'resize',\r\n requestServiceScrollMotion,\r\n {\r\n passive:true\r\n }\r\n );\r\n\r\n\r\n function handleModeChange(){\r\n\r\n resetVehicleMouseDrag();\r\n\r\n\r\n initMobileRows();\r\n\r\n\r\n layoutDesktopVehicleLoop();\r\n\r\n\r\n if (\r\n compactQuery.matches\r\n ){\r\n\r\n requestAnimationFrame(\r\n () => {\r\n\r\n centerVehicleOnMobile(\r\n activeVehicleIndex,\r\n 'auto'\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n requestDepthUpdate();\r\n requestServiceScrollMotion();\r\n\r\n }\r\n\r\n\r\n compactQuery.addEventListener?.(\r\n 'change',\r\n handleModeChange\r\n );\r\n\r\n\r\n reducedMotion.addEventListener?.(\r\n 'change',\r\n () => {\r\n\r\n initMobileRows();\r\n initServiceReveal();\r\n requestServiceScrollMotion();\r\n requestDepthUpdate();\r\n\r\n }\r\n );\r\n\r\n\r\n \/* =======================================================\r\n INITIALIZE\r\n ======================================================= *\/\r\n\r\n updateButtonState(\r\n activeHotelIndex\r\n );\r\n\r\n\r\n layoutDesktopVehicleLoop();\r\n\r\n\r\n initVehicleViewportPlayback();\r\n\r\n\r\n vehicleVideos.forEach(\r\n (\r\n video,\r\n index\r\n ) => {\r\n\r\n if (\r\n !video\r\n ) return;\r\n\r\n\r\n video.controls =\r\n index ===\r\n activeVehicleIndex;\r\n\r\n\r\n if (\r\n index !==\r\n activeVehicleIndex\r\n ){\r\n\r\n video.pause();\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n\r\n activateVehicle(\r\n activeVehicleIndex,\r\n {\r\n play:true,\r\n centerMobile:false\r\n }\r\n );\r\n\r\n\r\n \/*\r\n The first approved hotel image is already present in the HTML.\r\n Keep it as the canonical current layer; later selections continue\r\n using the existing decoded dual-layer transition system.\r\n *\/\r\n currentLayer.className =\r\n 'lis__image-layer is-current';\r\n\r\n\r\n activeHotelName.textContent =\r\n hotels[\r\n activeHotelIndex\r\n ].workingName;\r\n\r\n\r\n initServiceReveal();\r\n requestServiceScrollMotion();\r\n\r\n initEntrance();\r\n initMobileRows();\r\n requestDepthUpdate();\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9140c1e e-con-full e-flex e-con e-parent\" data-id=\"9140c1e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-25a19a6 elementor-widget elementor-widget-html\" data-id=\"25a19a6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\r\nLAMINA CLINIC \u2014 SECTION 08\r\nFAQ \/ DECISION SUPPORT\r\nCONCEPT: THE DECISION LEDGER\r\nV1 \u2014 FINAL \/ LOCKED-RULE AUDITED\r\n\r\nDESIGN:\r\nLIGHT \/ EDITORIAL \/ CALM \/ HIGH-CONFIDENCE \/ CONVERSION-AWARE\r\n\r\nIMPORTANT:\r\n- This is NOT a generic accordion.\r\n- No cards, rounded FAQ boxes, icon circles, glassmorphism or decorative shapes.\r\n- Mobile is independently art-directed.\r\n- Current\/upcoming content stays sharp.\r\n- Only genuinely passed content softly blurs.\r\n- Exact operational\/medical details remain cautious where Lamina confirmation is still required.\r\n========================================================= -->\r\n\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=Manrope:wght@400;500;600&display=swap');\r\n\r\n#lamina-decision-faq{\r\n --df-ivory:#F7F2EA;\r\n --df-ivory-2:#F3ECE8;\r\n --df-stone:#E8E1E4;\r\n --df-aubergine:#2B142F;\r\n --df-plum:#5F2468;\r\n --df-orchid:#94709A;\r\n --df-lilac:#C5B2C8;\r\n --df-champagne:#D8C4A1;\r\n --df-rule:rgba(43,20,47,.12);\r\n --df-rule-strong:rgba(43,20,47,.18);\r\n --df-ease:cubic-bezier(.16,.70,.18,1);\r\n --df-stage:1540px;\r\n\r\n --e-global-color-primary:#2B142F;\r\n --e-global-color-secondary:#94709A;\r\n --e-global-color-text:#2B142F;\r\n --e-global-color-accent:#5F2468;\r\n\r\n position:relative;\r\n width:100%;\r\n overflow:hidden;\r\n\r\n background:\r\n radial-gradient(42% 34% at 5% 8%,rgba(197,178,200,.10),transparent 72%),\r\n var(--df-ivory);\r\n\r\n color:var(--df-aubergine);\r\n\r\n font-family:\"Manrope\",system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;\r\n\r\n -webkit-tap-highlight-color:rgba(95,36,104,.08);\r\n}\r\n\r\n#lamina-decision-faq *,\r\n#lamina-decision-faq *::before,\r\n#lamina-decision-faq *::after{\r\n box-sizing:border-box;\r\n}\r\n\r\n#lamina-decision-faq ::selection{\r\n background:var(--df-plum);\r\n color:var(--df-ivory);\r\n}\r\n\r\n\/* =========================================================\r\n ELEMENTOR \/ THEME PINK PROTECTION \u2014 SECTION SCOPED\r\n ========================================================= *\/\r\n\r\n#lamina-decision-faq a,\r\n#lamina-decision-faq a:link,\r\n#lamina-decision-faq a:visited,\r\n#lamina-decision-faq a:hover,\r\n#lamina-decision-faq a:focus,\r\n#lamina-decision-faq a:focus-visible,\r\n#lamina-decision-faq a:active,\r\n#lamina-decision-faq button,\r\n#lamina-decision-faq button:hover,\r\n#lamina-decision-faq button:focus,\r\n#lamina-decision-faq button:focus-visible,\r\n#lamina-decision-faq button:active{\r\n text-decoration-color:var(--df-plum) !important;\r\n}\r\n\r\n#lamina-decision-faq .df__category,\r\n#lamina-decision-faq .df__category:visited,\r\n#lamina-decision-faq .df__category:hover,\r\n#lamina-decision-faq .df__category:focus,\r\n#lamina-decision-faq .df__category:focus-visible,\r\n#lamina-decision-faq .df__category:active,\r\n#lamina-decision-faq .df__question-button,\r\n#lamina-decision-faq .df__question-button:visited,\r\n#lamina-decision-faq .df__question-button:hover,\r\n#lamina-decision-faq .df__question-button:focus,\r\n#lamina-decision-faq .df__question-button:focus-visible,\r\n#lamina-decision-faq .df__question-button:active{\r\n background-color:transparent !important;\r\n box-shadow:none !important;\r\n border-color:transparent !important;\r\n}\r\n\r\n#lamina-decision-faq .df__category{\r\n color:var(--df-orchid) !important;\r\n}\r\n\r\n#lamina-decision-faq .df__category:hover,\r\n#lamina-decision-faq .df__category:focus-visible,\r\n#lamina-decision-faq .df__category[aria-pressed=\"true\"]{\r\n color:var(--df-aubergine) !important;\r\n}\r\n\r\n#lamina-decision-faq .df__category::after{\r\n background-color:var(--df-plum) !important;\r\n}\r\n\r\n#lamina-decision-faq .df__question-button{\r\n color:var(--df-aubergine) !important;\r\n}\r\n\r\n#lamina-decision-faq .df__question-button:hover,\r\n#lamina-decision-faq .df__question-button:focus-visible{\r\n color:var(--df-plum) !important;\r\n}\r\n\r\n#lamina-decision-faq .df__faq-row.is-open .df__question-button{\r\n color:var(--df-aubergine) !important;\r\n}\r\n\r\n#lamina-decision-faq .df__disclosure::before,\r\n#lamina-decision-faq .df__disclosure::after{\r\n background-color:var(--df-aubergine) !important;\r\n}\r\n\r\n#lamina-decision-faq .df__faq-row.is-open .df__disclosure::before,\r\n#lamina-decision-faq .df__faq-row.is-open .df__disclosure::after,\r\n#lamina-decision-faq .df__question-button:hover .df__disclosure::before,\r\n#lamina-decision-faq .df__question-button:hover .df__disclosure::after,\r\n#lamina-decision-faq .df__question-button:focus-visible .df__disclosure::before,\r\n#lamina-decision-faq .df__question-button:focus-visible .df__disclosure::after{\r\n background-color:var(--df-plum) !important;\r\n}\r\n\r\n#lamina-decision-faq .df__bridge-link,\r\n#lamina-decision-faq .df__bridge-link:link,\r\n#lamina-decision-faq .df__bridge-link:visited,\r\n#lamina-decision-faq .df__bridge-link:hover,\r\n#lamina-decision-faq .df__bridge-link:focus,\r\n#lamina-decision-faq .df__bridge-link:focus-visible,\r\n#lamina-decision-faq .df__bridge-link:active{\r\n color:var(--df-aubergine) !important;\r\n background:transparent !important;\r\n border-color:transparent !important;\r\n box-shadow:none !important;\r\n}\r\n\r\n#lamina-decision-faq .df__bridge-link::after{\r\n background-color:var(--df-plum) !important;\r\n}\r\n\r\n#lamina-decision-faq .df__category:focus-visible,\r\n#lamina-decision-faq .df__question-button:focus-visible,\r\n#lamina-decision-faq .df__bridge-link:focus-visible{\r\n outline:1px solid rgba(95,36,104,.58) !important;\r\n outline-offset:5px !important;\r\n}\r\n\r\n\/* =========================================================\r\n SHELL\r\n ========================================================= *\/\r\n\r\n.df__shell{\r\n width:min(100%,1700px);\r\n margin-inline:auto;\r\n\r\n padding:\r\n clamp(82px,9vh,118px)\r\n clamp(22px,3.5vw,66px)\r\n clamp(98px,10vh,138px);\r\n}\r\n\r\n.df__layout{\r\n width:min(100%,var(--df-stage));\r\n margin-inline:auto;\r\n\r\n display:grid;\r\n grid-template-columns:minmax(300px,.35fr) minmax(0,.65fr);\r\n gap:clamp(70px,8vw,142px);\r\n align-items:start;\r\n}\r\n\r\n\/* =========================================================\r\n LEFT EDITORIAL COLUMN\r\n ========================================================= *\/\r\n\r\n.df__editorial{\r\n min-width:0;\r\n}\r\n\r\n.df__eyebrow{\r\n margin:0 0 17px;\r\n\r\n color:rgba(95,36,104,.76);\r\n\r\n font-size:clamp(11px,.70vw,13px);\r\n line-height:1.2;\r\n font-weight:600;\r\n letter-spacing:.17em;\r\n text-transform:uppercase;\r\n}\r\n\r\n.df__title{\r\n margin:0;\r\n\r\n max-width:8.4ch;\r\n overflow:visible;\r\n\r\n color:var(--df-aubergine);\r\n\r\n font-family:\"Cormorant Garamond\",Georgia,serif;\r\n font-size:clamp(58px,4.8vw,86px);\r\n line-height:1;\r\n font-weight:400;\r\n letter-spacing:-.050em;\r\n}\r\n\r\n.df__title-line{\r\n display:block;\r\n width:max-content;\r\n max-width:100%;\r\n\r\n line-height:.90;\r\n}\r\n\r\n.df__title-line + .df__title-line{\r\n margin-top:-.045em;\r\n}\r\n\r\n.df__title-line--accent{\r\n margin-top:.038em !important;\r\n\r\n padding-inline-end:.055em;\r\n padding-bottom:.085em;\r\n\r\n color:var(--df-orchid);\r\n\r\n font-style:italic;\r\n letter-spacing:-.038em;\r\n line-height:.93;\r\n}\r\n\r\n.df__support{\r\n margin:clamp(24px,3vh,34px) 0 0;\r\n\r\n max-width:36ch;\r\n\r\n color:rgba(43,20,47,.64);\r\n\r\n font-size:clamp(15px,1vw,17px);\r\n line-height:1.70;\r\n}\r\n\r\n.df__context{\r\n margin:clamp(34px,4vh,48px) 0 0;\r\n\r\n color:rgba(43,20,47,.52);\r\n\r\n font-size:13px;\r\n line-height:1.55;\r\n}\r\n\r\n.df__bridge{\r\n margin-top:13px;\r\n}\r\n\r\n.df__bridge-link{\r\n position:relative;\r\n\r\n display:inline-flex;\r\n align-items:center;\r\n\r\n min-height:44px;\r\n padding:4px 0 7px;\r\n\r\n color:var(--df-aubergine);\r\n\r\n font-size:11.5px;\r\n line-height:1.2;\r\n font-weight:600;\r\n letter-spacing:.10em;\r\n text-transform:uppercase;\r\n text-decoration:none;\r\n}\r\n\r\n.df__bridge-link::after{\r\n content:\"\";\r\n\r\n position:absolute;\r\n inset-inline:0;\r\n inset-block-end:2px;\r\n\r\n height:1px;\r\n\r\n opacity:.55;\r\n\r\n transform:scaleX(.58);\r\n transform-origin:0 50%;\r\n\r\n transition:\r\n transform .48s var(--df-ease),\r\n opacity .36s ease;\r\n}\r\n\r\n[dir=\"rtl\"] .df__bridge-link::after{\r\n transform-origin:100% 50%;\r\n}\r\n\r\n.df__bridge-link:hover::after,\r\n.df__bridge-link:focus-visible::after{\r\n transform:scaleX(1);\r\n opacity:1;\r\n}\r\n\r\n\/* =========================================================\r\n LEDGER\r\n ========================================================= *\/\r\n\r\n.df__ledger{\r\n min-width:0;\r\n}\r\n\r\n.df__categories{\r\n display:grid;\r\n grid-template-columns:repeat(3,max-content);\r\n justify-content:start;\r\n gap:clamp(30px,3.5vw,58px);\r\n\r\n min-height:44px;\r\n\r\n margin-bottom:18px;\r\n}\r\n\r\n.df__category{\r\n position:relative;\r\n\r\n display:inline-flex;\r\n align-items:center;\r\n\r\n min-height:44px;\r\n padding:0 0 9px;\r\n\r\n border:0;\r\n border-radius:0;\r\n\r\n appearance:none;\r\n cursor:pointer;\r\n\r\n color:var(--df-orchid);\r\n\r\n font-family:\"Manrope\",sans-serif;\r\n font-size:11.5px;\r\n line-height:1.2;\r\n font-weight:600;\r\n letter-spacing:.12em;\r\n text-transform:uppercase;\r\n\r\n transition:\r\n color .32s ease,\r\n opacity .32s ease;\r\n}\r\n\r\n.df__category::after{\r\n content:\"\";\r\n\r\n position:absolute;\r\n\r\n inset-inline-start:0;\r\n inset-block-end:0;\r\n\r\n width:32px;\r\n height:1px;\r\n\r\n transform:scaleX(0);\r\n transform-origin:0 50%;\r\n\r\n transition:\r\n transform .44s var(--df-ease);\r\n}\r\n\r\n[dir=\"rtl\"] .df__category::after{\r\n transform-origin:100% 50%;\r\n}\r\n\r\n.df__category[aria-pressed=\"true\"]::after{\r\n transform:scaleX(1);\r\n}\r\n\r\n.df__ledger-frame{\r\n position:relative;\r\n\r\n border-top:1px solid var(--df-rule-strong);\r\n border-bottom:1px solid var(--df-rule);\r\n}\r\n\r\n.df__rows{\r\n position:relative;\r\n\r\n transition:\r\n opacity .24s ease,\r\n transform .40s var(--df-ease);\r\n}\r\n\r\n.df__ledger.is-switching .df__rows{\r\n opacity:.16;\r\n transform:translate3d(0,4px,0);\r\n}\r\n\r\n.df__faq-row{\r\n position:relative;\r\n\r\n border-bottom:1px solid var(--df-rule);\r\n}\r\n\r\n.df__faq-row:last-child{\r\n border-bottom:0;\r\n}\r\n\r\n.df__question-button{\r\n display:grid;\r\n grid-template-columns:52px minmax(0,1fr) 34px;\r\n gap:clamp(17px,2vw,26px);\r\n align-items:center;\r\n\r\n width:100%;\r\n min-height:88px;\r\n\r\n padding:\r\n clamp(24px,2.5vh,31px)\r\n 0;\r\n\r\n border:0;\r\n border-radius:0;\r\n\r\n appearance:none;\r\n cursor:pointer;\r\n\r\n text-align:start;\r\n\r\n transition:\r\n color .34s ease,\r\n opacity .34s ease;\r\n}\r\n\r\n.df__number{\r\n align-self:start;\r\n\r\n padding-top:.47em;\r\n\r\n color:rgba(95,36,104,.62);\r\n\r\n font-size:11px;\r\n line-height:1;\r\n font-weight:600;\r\n letter-spacing:.13em;\r\n\r\n transition:\r\n color .32s ease,\r\n opacity .32s ease;\r\n}\r\n\r\n.df__faq-row.is-open .df__number{\r\n color:var(--df-plum);\r\n}\r\n\r\n.df__question-text{\r\n display:block;\r\n\r\n max-width:24ch;\r\n\r\n color:inherit;\r\n\r\n font-family:\"Cormorant Garamond\",Georgia,serif;\r\n font-size:clamp(30px,2.4vw,41px);\r\n line-height:1.02;\r\n font-weight:400;\r\n letter-spacing:-.028em;\r\n}\r\n\r\n.df__disclosure{\r\n position:relative;\r\n\r\n justify-self:end;\r\n\r\n width:20px;\r\n height:20px;\r\n\r\n flex:0 0 auto;\r\n}\r\n\r\n.df__disclosure::before,\r\n.df__disclosure::after{\r\n content:\"\";\r\n\r\n position:absolute;\r\n inset-inline-start:50%;\r\n inset-block-start:50%;\r\n\r\n width:14px;\r\n height:1px;\r\n\r\n transform:translate(-50%,-50%);\r\n\r\n transition:\r\n opacity .34s ease,\r\n background-color .34s ease;\r\n}\r\n\r\n[dir=\"rtl\"] .df__disclosure::before,\r\n[dir=\"rtl\"] .df__disclosure::after{\r\n transform:translate(50%,-50%);\r\n}\r\n\r\n.df__disclosure::after{\r\n width:1px;\r\n height:14px;\r\n}\r\n\r\n.df__faq-row.is-open .df__disclosure::after{\r\n opacity:0;\r\n}\r\n\r\n\/* CSS grid 0fr -> 1fr: natural height, no fixed answer heights. *\/\r\n.df__answer-wrap{\r\n display:grid;\r\n grid-template-rows:0fr;\r\n\r\n transition:\r\n grid-template-rows .54s var(--df-ease);\r\n}\r\n\r\n.df__faq-row.is-open .df__answer-wrap{\r\n grid-template-rows:1fr;\r\n}\r\n\r\n.df__answer-inner{\r\n min-height:0;\r\n overflow:hidden;\r\n}\r\n\r\n.df__answer{\r\n margin:0;\r\n\r\n max-width:62ch;\r\n\r\n padding:\r\n 0\r\n 38px\r\n 0\r\n calc(52px + clamp(17px,2vw,26px));\r\n\r\n color:rgba(43,20,47,.64);\r\n\r\n font-size:clamp(14px,.92vw,16px);\r\n line-height:1.70;\r\n\r\n opacity:0;\r\n transform:translate3d(0,7px,0);\r\n\r\n transition:\r\n opacity .42s ease,\r\n transform .50s var(--df-ease),\r\n padding-bottom .48s var(--df-ease);\r\n}\r\n\r\n.df__faq-row.is-open .df__answer{\r\n padding-bottom:clamp(25px,3vh,34px);\r\n\r\n opacity:1;\r\n transform:none;\r\n\r\n transition:\r\n opacity .48s ease .05s,\r\n transform .54s var(--df-ease) .03s,\r\n padding-bottom .54s var(--df-ease);\r\n}\r\n\r\n\/* =========================================================\r\n MOBILE-ONLY CTA BRIDGE\r\n ========================================================= *\/\r\n\r\n.df__mobile-bridge{\r\n display:none;\r\n}\r\n\r\n\/* =========================================================\r\n LAMINA PASSED-CONTENT DEPTH\r\n Upcoming\/current = sharp.\r\n Only genuinely passed content softens.\r\n ========================================================= *\/\r\n\r\n#lamina-decision-faq [data-df-depth]{\r\n --df-entry-blur:0px;\r\n --df-passed-blur:0px;\r\n --df-depth-opacity:1;\r\n\r\n filter:\r\n blur(\r\n calc(\r\n var(--df-entry-blur) +\r\n var(--df-passed-blur)\r\n )\r\n );\r\n\r\n opacity:var(--df-depth-opacity);\r\n\r\n will-change:filter,opacity;\r\n}\r\n\r\n#lamina-decision-faq [data-df-depth]:hover,\r\n#lamina-decision-faq [data-df-depth]:focus-within{\r\n --df-passed-blur:0px !important;\r\n --df-depth-opacity:1 !important;\r\n}\r\n\r\n\/* =========================================================\r\n ONE-TIME DESKTOP ENTRANCE\r\n ========================================================= *\/\r\n\r\n#lamina-decision-faq.has-entry .df__eyebrow{\r\n opacity:0;\r\n transform:translate3d(0,7px,0);\r\n --df-entry-blur:2px;\r\n}\r\n\r\n#lamina-decision-faq.has-entry .df__title-line{\r\n opacity:0;\r\n transform:translate3d(0,98%,0);\r\n --df-entry-blur:3.5px;\r\n}\r\n\r\n#lamina-decision-faq.has-entry .df__support,\r\n#lamina-decision-faq.has-entry .df__context,\r\n#lamina-decision-faq.has-entry .df__bridge{\r\n opacity:0;\r\n transform:translate3d(0,8px,0);\r\n --df-entry-blur:2px;\r\n}\r\n\r\n#lamina-decision-faq.has-entry .df__categories{\r\n opacity:0;\r\n transform:translate3d(0,7px,0);\r\n --df-entry-blur:1.4px;\r\n}\r\n\r\n#lamina-decision-faq.has-entry .df__ledger-frame{\r\n clip-path:inset(0 100% 0 0);\r\n}\r\n\r\n#lamina-decision-faq.has-entry .df__faq-row{\r\n opacity:.20;\r\n transform:translate3d(0,8px,0);\r\n}\r\n\r\n#lamina-decision-faq.has-entry.is-entered .df__eyebrow{\r\n opacity:1;\r\n transform:none;\r\n --df-entry-blur:0px;\r\n\r\n transition:\r\n opacity .44s var(--df-ease) .03s,\r\n transform .50s var(--df-ease) .03s,\r\n filter .42s ease .03s;\r\n}\r\n\r\n#lamina-decision-faq.has-entry.is-entered .df__title-line{\r\n opacity:1;\r\n transform:none;\r\n --df-entry-blur:0px;\r\n\r\n transition:\r\n opacity .58s var(--df-ease),\r\n transform .70s cubic-bezier(.12,.82,.18,1),\r\n filter .46s ease;\r\n}\r\n\r\n#lamina-decision-faq.has-entry.is-entered\r\n.df__title-line:nth-child(1){\r\n transition-delay:.05s;\r\n}\r\n\r\n#lamina-decision-faq.has-entry.is-entered\r\n.df__title-line:nth-child(2){\r\n transition-delay:.13s;\r\n}\r\n\r\n#lamina-decision-faq.has-entry.is-entered .df__support{\r\n opacity:1;\r\n transform:none;\r\n --df-entry-blur:0px;\r\n\r\n transition:\r\n opacity .52s var(--df-ease) .18s,\r\n transform .56s var(--df-ease) .18s,\r\n filter .45s ease .18s;\r\n}\r\n\r\n#lamina-decision-faq.has-entry.is-entered .df__context{\r\n opacity:1;\r\n transform:none;\r\n --df-entry-blur:0px;\r\n\r\n transition:\r\n opacity .48s var(--df-ease) .26s,\r\n transform .54s var(--df-ease) .26s,\r\n filter .42s ease .26s;\r\n}\r\n\r\n#lamina-decision-faq.has-entry.is-entered .df__bridge{\r\n opacity:1;\r\n transform:none;\r\n --df-entry-blur:0px;\r\n\r\n transition:\r\n opacity .48s var(--df-ease) .31s,\r\n transform .54s var(--df-ease) .31s,\r\n filter .42s ease .31s;\r\n}\r\n\r\n#lamina-decision-faq.has-entry.is-entered .df__categories{\r\n opacity:1;\r\n transform:none;\r\n --df-entry-blur:0px;\r\n\r\n transition:\r\n opacity .50s var(--df-ease) .23s,\r\n transform .54s var(--df-ease) .23s,\r\n filter .42s ease .23s;\r\n}\r\n\r\n#lamina-decision-faq.has-entry.is-entered .df__ledger-frame{\r\n clip-path:inset(0);\r\n\r\n transition:\r\n clip-path .60s var(--df-ease) .30s;\r\n}\r\n\r\n#lamina-decision-faq.has-entry.is-entered .df__faq-row{\r\n opacity:1;\r\n transform:none;\r\n\r\n transition:\r\n opacity .45s var(--df-ease),\r\n transform .50s var(--df-ease);\r\n}\r\n\r\n#lamina-decision-faq.has-entry.is-entered .df__faq-row:nth-child(1){transition-delay:.38s;}\r\n#lamina-decision-faq.has-entry.is-entered .df__faq-row:nth-child(2){transition-delay:.44s;}\r\n#lamina-decision-faq.has-entry.is-entered .df__faq-row:nth-child(3){transition-delay:.50s;}\r\n#lamina-decision-faq.has-entry.is-entered .df__faq-row:nth-child(4){transition-delay:.56s;}\r\n#lamina-decision-faq.has-entry.is-entered .df__faq-row:nth-child(5){transition-delay:.62s;}\r\n\r\n\/* =========================================================\r\n TABLET\r\n ========================================================= *\/\r\n\r\n@media (min-width:900px) and (max-width:1180px){\r\n\r\n .df__shell{\r\n padding-inline:30px;\r\n }\r\n\r\n .df__layout{\r\n grid-template-columns:minmax(270px,.36fr) minmax(0,.64fr);\r\n gap:54px;\r\n }\r\n\r\n .df__title{\r\n font-size:clamp(56px,6vw,75px);\r\n }\r\n\r\n .df__question-text{\r\n font-size:clamp(29px,3.2vw,36px);\r\n }\r\n\r\n}\r\n\r\n\/* =========================================================\r\n PORTRAIT TABLET + MOBILE\r\n ========================================================= *\/\r\n\r\n@media (max-width:899px){\r\n\r\n .df__shell{\r\n padding:\r\n 64px\r\n 20px\r\n 84px;\r\n }\r\n\r\n .df__layout{\r\n display:block;\r\n width:100%;\r\n }\r\n\r\n .df__editorial{\r\n max-width:100%;\r\n }\r\n\r\n .df__title{\r\n max-width:8.2ch;\r\n\r\n font-size:clamp(48px,13.8vw,60px);\r\n line-height:1;\r\n }\r\n\r\n .df__title-line{\r\n line-height:.91;\r\n }\r\n\r\n .df__title-line + .df__title-line{\r\n margin-top:-.038em;\r\n }\r\n\r\n .df__title-line--accent{\r\n margin-top:.035em !important;\r\n padding-bottom:.09em;\r\n }\r\n\r\n .df__support{\r\n max-width:36ch;\r\n\r\n margin-top:20px;\r\n\r\n font-size:15px;\r\n line-height:1.65;\r\n }\r\n\r\n .df__context,\r\n .df__bridge{\r\n display:none;\r\n }\r\n\r\n .df__ledger{\r\n margin-top:30px;\r\n }\r\n\r\n .df__categories{\r\n display:grid;\r\n grid-template-columns:repeat(3,minmax(0,1fr));\r\n gap:8px;\r\n\r\n margin-bottom:14px;\r\n }\r\n\r\n .df__category{\r\n justify-content:flex-start;\r\n\r\n min-width:0;\r\n min-height:44px;\r\n\r\n padding-inline:0;\r\n\r\n font-size:11px;\r\n letter-spacing:.085em;\r\n }\r\n\r\n .df__category::after{\r\n width:26px;\r\n }\r\n\r\n .df__question-button{\r\n grid-template-columns:minmax(0,1fr) 30px;\r\n grid-template-areas:\r\n \"number control\"\r\n \"question control\";\r\n\r\n gap:\r\n 9px\r\n 16px;\r\n\r\n min-height:0;\r\n\r\n padding:\r\n 24px\r\n 0\r\n 25px;\r\n }\r\n\r\n .df__number{\r\n grid-area:number;\r\n\r\n padding-top:0;\r\n\r\n font-size:10.5px;\r\n }\r\n\r\n .df__question-text{\r\n grid-area:question;\r\n\r\n max-width:17ch;\r\n\r\n font-size:clamp(27px,8.3vw,34px);\r\n line-height:1.07;\r\n }\r\n\r\n .df__disclosure{\r\n grid-area:control;\r\n\r\n align-self:center;\r\n }\r\n\r\n .df__answer{\r\n max-width:none;\r\n\r\n padding:\r\n 0\r\n 36px\r\n 0\r\n 0;\r\n\r\n font-size:14.5px;\r\n line-height:1.65;\r\n }\r\n\r\n .df__faq-row.is-open .df__answer{\r\n padding-bottom:28px;\r\n }\r\n\r\n .df__mobile-bridge{\r\n display:block;\r\n\r\n margin-top:38px;\r\n padding-top:24px;\r\n\r\n border-top:1px solid var(--df-rule);\r\n }\r\n\r\n .df__mobile-bridge-copy{\r\n margin:0;\r\n\r\n max-width:31ch;\r\n\r\n color:rgba(43,20,47,.58);\r\n\r\n font-size:14px;\r\n line-height:1.60;\r\n }\r\n\r\n .df__mobile-bridge .df__bridge{\r\n display:block;\r\n margin-top:11px;\r\n }\r\n\r\n \/* Mobile below-fold rows reveal only as they approach. *\/\r\n #lamina-decision-faq.has-mobile-row-entry\r\n .df__faq-row[data-mobile-ready=\"false\"]{\r\n opacity:.12;\r\n transform:translate3d(0,7px,0);\r\n }\r\n\r\n #lamina-decision-faq.has-mobile-row-entry\r\n .df__faq-row[data-mobile-ready=\"true\"]{\r\n opacity:1;\r\n transform:none;\r\n\r\n transition:\r\n opacity .42s var(--df-ease),\r\n transform .48s var(--df-ease);\r\n }\r\n\r\n}\r\n\r\n\/* Narrow phones: deliberate 2-row category layout, no tiny labels. *\/\r\n@media (max-width:390px){\r\n\r\n .df__categories{\r\n grid-template-columns:repeat(2,minmax(0,1fr));\r\n }\r\n\r\n .df__category:last-child{\r\n grid-column:1 \/ -1;\r\n }\r\n\r\n}\r\n\r\n\/* Short landscape \/ desktop *\/\r\n@media (min-width:900px) and (max-height:700px){\r\n\r\n .df__shell{\r\n padding-block:62px 78px;\r\n }\r\n\r\n .df__layout{\r\n gap:58px;\r\n }\r\n\r\n .df__title{\r\n font-size:clamp(54px,4.4vw,70px);\r\n }\r\n\r\n .df__question-button{\r\n padding-block:20px;\r\n }\r\n\r\n .df__question-text{\r\n font-size:clamp(27px,2.1vw,34px);\r\n }\r\n\r\n}\r\n\r\n\/* =========================================================\r\n RTL\r\n ========================================================= *\/\r\n\r\n[dir=\"rtl\"] #lamina-decision-faq{\r\n direction:rtl;\r\n}\r\n\r\n[dir=\"rtl\"] #lamina-decision-faq .df__question-button,\r\n[dir=\"rtl\"] #lamina-decision-faq .df__support,\r\n[dir=\"rtl\"] #lamina-decision-faq .df__answer,\r\n[dir=\"rtl\"] #lamina-decision-faq .df__mobile-bridge-copy{\r\n text-align:start;\r\n}\r\n\r\n\/* =========================================================\r\n REDUCED MOTION\r\n ========================================================= *\/\r\n\r\n@media (prefers-reduced-motion:reduce){\r\n\r\n #lamina-decision-faq [data-df-depth]{\r\n --df-entry-blur:0px !important;\r\n --df-passed-blur:0px !important;\r\n --df-depth-opacity:1 !important;\r\n\r\n filter:none !important;\r\n opacity:1 !important;\r\n }\r\n\r\n #lamina-decision-faq.has-entry .df__eyebrow,\r\n #lamina-decision-faq.has-entry .df__title-line,\r\n #lamina-decision-faq.has-entry .df__support,\r\n #lamina-decision-faq.has-entry .df__context,\r\n #lamina-decision-faq.has-entry .df__bridge,\r\n #lamina-decision-faq.has-entry .df__categories,\r\n #lamina-decision-faq.has-entry .df__faq-row{\r\n opacity:1 !important;\r\n transform:none !important;\r\n transition:none !important;\r\n }\r\n\r\n #lamina-decision-faq.has-entry .df__ledger-frame{\r\n clip-path:none !important;\r\n transition:none !important;\r\n }\r\n\r\n #lamina-decision-faq .df__rows,\r\n #lamina-decision-faq .df__answer-wrap,\r\n #lamina-decision-faq .df__answer,\r\n #lamina-decision-faq .df__category::after,\r\n #lamina-decision-faq .df__bridge-link::after{\r\n transition:none !important;\r\n }\r\n\r\n #lamina-decision-faq.has-mobile-row-entry\r\n .df__faq-row{\r\n opacity:1 !important;\r\n transform:none !important;\r\n }\r\n\r\n}\r\n<\/style>\r\n\r\n<section\r\n id=\"lamina-decision-faq\"\r\n aria-labelledby=\"lamina-decision-faq-title\"\r\n data-lamina-focus-section\r\n>\r\n\r\n <div class=\"df__shell\">\r\n\r\n <div class=\"df__layout\">\r\n\r\n <aside class=\"df__editorial\">\r\n\r\n <p\r\n class=\"df__eyebrow\"\r\n data-df-depth=\"eyebrow\"\r\n >\r\n BEFORE YOU DECIDE\r\n <\/p>\r\n\r\n <h2\r\n class=\"df__title\"\r\n id=\"lamina-decision-faq-title\"\r\n >\r\n <span\r\n class=\"df__title-line\"\r\n data-df-depth=\"headline\"\r\n >\r\n Questions,\r\n <\/span>\r\n\r\n <span\r\n class=\"df__title-line df__title-line--accent\"\r\n data-df-depth=\"headline\"\r\n >\r\n answered clearly.\r\n <\/span>\r\n <\/h2>\r\n\r\n <p\r\n class=\"df__support\"\r\n data-df-depth=\"copy\"\r\n >\r\n Planning treatment abroad comes with practical questions. Here are the answers to the things patients usually want to understand before taking the next step.\r\n <\/p>\r\n\r\n <p\r\n class=\"df__context\"\r\n data-df-depth=\"copy\"\r\n >\r\n Still unsure?<br>\r\n You can send your case directly to the Lamina team.\r\n <\/p>\r\n\r\n <div\r\n class=\"df__bridge\"\r\n data-df-depth=\"ui\"\r\n >\r\n <a\r\n class=\"df__bridge-link\"\r\n href=\"#start-your-assessment\"\r\n >\r\n Start your assessment \u2192\r\n <\/a>\r\n <\/div>\r\n\r\n <\/aside>\r\n\r\n <div class=\"df__ledger\">\r\n\r\n <div\r\n class=\"df__categories\"\r\n role=\"group\"\r\n aria-label=\"Choose FAQ category\"\r\n data-df-depth=\"ui\"\r\n >\r\n <button\r\n class=\"df__category\"\r\n type=\"button\"\r\n data-faq-category=\"general\"\r\n aria-pressed=\"true\"\r\n >\r\n General\r\n <\/button>\r\n\r\n <button\r\n class=\"df__category\"\r\n type=\"button\"\r\n data-faq-category=\"dental\"\r\n aria-pressed=\"false\"\r\n >\r\n Dental\r\n <\/button>\r\n\r\n <button\r\n class=\"df__category\"\r\n type=\"button\"\r\n data-faq-category=\"hair\"\r\n aria-pressed=\"false\"\r\n >\r\n Hair Restoration\r\n <\/button>\r\n <\/div>\r\n\r\n <div\r\n class=\"df__ledger-frame\"\r\n data-df-depth=\"ui\"\r\n >\r\n <div\r\n class=\"df__rows\"\r\n data-faq-rows\r\n aria-live=\"polite\"\r\n >\r\n <!-- Progressive no-JS fallback: General FAQ -->\r\n <article\r\n class=\"df__faq-row is-open\"\r\n data-faq-id=\"general-01\"\r\n data-mobile-ready=\"true\"\r\n data-df-depth=\"row\"\r\n >\r\n <button\r\n class=\"df__question-button\"\r\n type=\"button\"\r\n id=\"faq-general-01-button\"\r\n aria-expanded=\"true\"\r\n aria-controls=\"faq-general-01-answer\"\r\n >\r\n <span class=\"df__number\">01<\/span>\r\n <span\r\n class=\"df__question-text\"\r\n role=\"heading\"\r\n aria-level=\"3\"\r\n >\r\n Can my assessment begin before I travel?\r\n <\/span>\r\n <span\r\n class=\"df__disclosure\"\r\n aria-hidden=\"true\"\r\n ><\/span>\r\n <\/button>\r\n\r\n <div\r\n class=\"df__answer-wrap\"\r\n id=\"faq-general-01-answer\"\r\n role=\"region\"\r\n aria-labelledby=\"faq-general-01-button\"\r\n aria-hidden=\"false\"\r\n >\r\n <div class=\"df__answer-inner\">\r\n <p class=\"df__answer\">\r\n Yes. The initial process can begin with the relevant information, photographs or X-rays where appropriate. This can help the clinic understand the case and prepare the next steps before your visit. The final treatment plan is confirmed after the required in-clinic assessment.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/article>\r\n\r\n <article\r\n class=\"df__faq-row\"\r\n data-faq-id=\"general-02\"\r\n data-mobile-ready=\"true\"\r\n data-df-depth=\"row\"\r\n >\r\n <button\r\n class=\"df__question-button\"\r\n type=\"button\"\r\n id=\"faq-general-02-button\"\r\n aria-expanded=\"false\"\r\n aria-controls=\"faq-general-02-answer\"\r\n >\r\n <span class=\"df__number\">02<\/span>\r\n <span class=\"df__question-text\" role=\"heading\" aria-level=\"3\">\r\n Does Lamina support international patients?\r\n <\/span>\r\n <span class=\"df__disclosure\" aria-hidden=\"true\"><\/span>\r\n <\/button>\r\n\r\n <div\r\n class=\"df__answer-wrap\"\r\n id=\"faq-general-02-answer\"\r\n role=\"region\"\r\n aria-labelledby=\"faq-general-02-button\"\r\n aria-hidden=\"true\"\r\n >\r\n <div class=\"df__answer-inner\">\r\n <p class=\"df__answer\">\r\n Yes. Lamina can provide international-patient support around treatment planning, communication, accommodation options and transfer coordination according to the patient\u2019s individual arrangement.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/article>\r\n\r\n <article\r\n class=\"df__faq-row\"\r\n data-faq-id=\"general-03\"\r\n data-mobile-ready=\"true\"\r\n data-df-depth=\"row\"\r\n >\r\n <button\r\n class=\"df__question-button\"\r\n type=\"button\"\r\n id=\"faq-general-03-button\"\r\n aria-expanded=\"false\"\r\n aria-controls=\"faq-general-03-answer\"\r\n >\r\n <span class=\"df__number\">03<\/span>\r\n <span class=\"df__question-text\" role=\"heading\" aria-level=\"3\">\r\n Can Lamina help with my hotel and transfers?\r\n <\/span>\r\n <span class=\"df__disclosure\" aria-hidden=\"true\"><\/span>\r\n <\/button>\r\n\r\n <div\r\n class=\"df__answer-wrap\"\r\n id=\"faq-general-03-answer\"\r\n role=\"region\"\r\n aria-labelledby=\"faq-general-03-button\"\r\n aria-hidden=\"true\"\r\n >\r\n <div class=\"df__answer-inner\">\r\n <p class=\"df__answer\">\r\n Lamina works with partner hotel options in Istanbul and can assist with transfer coordination around the visit. The exact accommodation and transportation arrangements should be confirmed as part of the individual treatment offer.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/article>\r\n\r\n <article\r\n class=\"df__faq-row\"\r\n data-faq-id=\"general-04\"\r\n data-mobile-ready=\"true\"\r\n data-df-depth=\"row\"\r\n >\r\n <button\r\n class=\"df__question-button\"\r\n type=\"button\"\r\n id=\"faq-general-04-button\"\r\n aria-expanded=\"false\"\r\n aria-controls=\"faq-general-04-answer\"\r\n >\r\n <span class=\"df__number\">04<\/span>\r\n <span class=\"df__question-text\" role=\"heading\" aria-level=\"3\">\r\n Is the plan I receive before travel final?\r\n <\/span>\r\n <span class=\"df__disclosure\" aria-hidden=\"true\"><\/span>\r\n <\/button>\r\n\r\n <div\r\n class=\"df__answer-wrap\"\r\n id=\"faq-general-04-answer\"\r\n role=\"region\"\r\n aria-labelledby=\"faq-general-04-button\"\r\n aria-hidden=\"true\"\r\n >\r\n <div class=\"df__answer-inner\">\r\n <p class=\"df__answer\">\r\n No. Pre-travel planning is preliminary. The final treatment plan is confirmed by the clinical team after the appropriate in-person examination and any updated diagnostic information required.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/article>\r\n\r\n <article\r\n class=\"df__faq-row\"\r\n data-faq-id=\"general-05\"\r\n data-mobile-ready=\"true\"\r\n data-df-depth=\"row\"\r\n >\r\n <button\r\n class=\"df__question-button\"\r\n type=\"button\"\r\n id=\"faq-general-05-button\"\r\n aria-expanded=\"false\"\r\n aria-controls=\"faq-general-05-answer\"\r\n >\r\n <span class=\"df__number\">05<\/span>\r\n <span class=\"df__question-text\" role=\"heading\" aria-level=\"3\">\r\n What happens after I send my case?\r\n <\/span>\r\n <span class=\"df__disclosure\" aria-hidden=\"true\"><\/span>\r\n <\/button>\r\n\r\n <div\r\n class=\"df__answer-wrap\"\r\n id=\"faq-general-05-answer\"\r\n role=\"region\"\r\n aria-labelledby=\"faq-general-05-button\"\r\n aria-hidden=\"true\"\r\n >\r\n <div class=\"df__answer-inner\">\r\n <p class=\"df__answer\">\r\n The information you provide can be reviewed so the appropriate next steps can be discussed with you. Lamina should confirm the exact communication process and expected response time before this wording is finalized.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/article>\r\n <\/div>\r\n <\/div>\r\n\r\n <div\r\n class=\"df__mobile-bridge\"\r\n data-df-depth=\"ui\"\r\n >\r\n <p class=\"df__mobile-bridge-copy\">\r\n Still unsure about your case? Start with an initial assessment.\r\n <\/p>\r\n\r\n <div class=\"df__bridge\">\r\n <a\r\n class=\"df__bridge-link\"\r\n href=\"#start-your-assessment\"\r\n >\r\n Start your assessment \u2192\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n<script>\r\n(() => {\r\n\r\n const root =\r\n document.getElementById(\r\n 'lamina-decision-faq'\r\n );\r\n\r\n\r\n if (\r\n !root ||\r\n root.dataset.decisionFaqReady ===\r\n 'true'\r\n ) return;\r\n\r\n\r\n root.dataset.decisionFaqReady =\r\n 'true';\r\n\r\n\r\n const reducedMotion =\r\n window.matchMedia(\r\n '(prefers-reduced-motion: reduce)'\r\n );\r\n\r\n\r\n const mobileQuery =\r\n window.matchMedia(\r\n '(max-width:899px)'\r\n );\r\n\r\n\r\n const categoryButtons =\r\n [\r\n ...root.querySelectorAll(\r\n '[data-faq-category]'\r\n )\r\n ];\r\n\r\n\r\n const rowsHost =\r\n root.querySelector(\r\n '[data-faq-rows]'\r\n );\r\n\r\n\r\n const faqGroups =\r\n {\r\n\r\n general:[\r\n {\r\n id:'general-01',\r\n number:'01',\r\n question:'Can my assessment begin before I travel?',\r\n answer:'Yes. The initial process can begin with the relevant information, photographs or X-rays where appropriate. This can help the clinic understand the case and prepare the next steps before your visit. The final treatment plan is confirmed after the required in-clinic assessment.',\r\n verificationStatus:'safe-current-copy',\r\n schemaEligible:false,\r\n enabled:true\r\n },\r\n {\r\n id:'general-02',\r\n number:'02',\r\n question:'Does Lamina support international patients?',\r\n answer:'Yes. Lamina can provide international-patient support around treatment planning, communication, accommodation options and transfer coordination according to the patient\u2019s individual arrangement.',\r\n verificationStatus:'safe-current-copy',\r\n schemaEligible:false,\r\n enabled:true\r\n },\r\n {\r\n id:'general-03',\r\n number:'03',\r\n question:'Can Lamina help with my hotel and transfers?',\r\n answer:'Lamina works with partner hotel options in Istanbul and can assist with transfer coordination around the visit. The exact accommodation and transportation arrangements should be confirmed as part of the individual treatment offer.',\r\n verificationStatus:'safe-current-copy',\r\n schemaEligible:false,\r\n enabled:true\r\n },\r\n {\r\n id:'general-04',\r\n number:'04',\r\n question:'Is the plan I receive before travel final?',\r\n answer:'No. Pre-travel planning is preliminary. The final treatment plan is confirmed by the clinical team after the appropriate in-person examination and any updated diagnostic information required.',\r\n verificationStatus:'safe-current-copy',\r\n schemaEligible:false,\r\n enabled:true\r\n },\r\n {\r\n id:'general-05',\r\n number:'05',\r\n question:'What happens after I send my case?',\r\n answer:'The information you provide can be reviewed so the appropriate next steps can be discussed with you. Lamina should confirm the exact communication process and expected response time before this wording is finalized.',\r\n verificationStatus:'needs-clinic-process-confirmation',\r\n schemaEligible:false,\r\n enabled:true\r\n }\r\n ],\r\n\r\n\r\n dental:[\r\n {\r\n id:'dental-01',\r\n number:'01',\r\n question:'What should I send for a dental assessment?',\r\n answer:'Relevant photographs and existing dental X-rays can help begin a preliminary assessment where appropriate. The clinic should provide the exact image and document requirements for each case.',\r\n verificationStatus:'needs-submission-format-confirmation',\r\n schemaEligible:false,\r\n enabled:true\r\n },\r\n {\r\n id:'dental-02',\r\n number:'02',\r\n question:'Can I see the proposed dental treatment before I travel?',\r\n answer:'For suitable cases, digital \/ 3D treatment visualisation can help explain the proposed dental treatment before final clinical confirmation.',\r\n verificationStatus:'safe-current-copy',\r\n schemaEligible:false,\r\n enabled:true\r\n },\r\n {\r\n id:'dental-03',\r\n number:'03',\r\n question:'Is the digital visualisation a guarantee of the final result?',\r\n answer:'No. Digital visualisation is a planning and communication tool. Individual treatment outcomes vary, and the final treatment approach is confirmed following clinical examination.',\r\n verificationStatus:'safe-current-copy',\r\n schemaEligible:false,\r\n enabled:true\r\n },\r\n {\r\n id:'dental-04',\r\n number:'04',\r\n question:'Can my dental treatment plan change after I arrive?',\r\n answer:'Yes. A preliminary plan may change after the clinical team performs the required examination and reviews updated diagnostic information.',\r\n verificationStatus:'safe-current-copy',\r\n schemaEligible:false,\r\n enabled:true\r\n },\r\n {\r\n id:'dental-05',\r\n number:'05',\r\n question:'How long will I need to stay in Istanbul?',\r\n answer:'The required stay depends on the treatment being considered and the individual clinical plan. Lamina should confirm the expected visit duration after reviewing the case.',\r\n verificationStatus:'needs-case-specific-confirmation',\r\n schemaEligible:false,\r\n enabled:true\r\n }\r\n ],\r\n\r\n\r\n hair:[\r\n {\r\n id:'hair-01',\r\n number:'01',\r\n question:'Can my hair restoration assessment begin before I travel?',\r\n answer:'Yes. Relevant photographs and treatment information can help the clinic begin understanding the case and discuss a preliminary treatment direction before the in-person assessment.',\r\n verificationStatus:'safe-current-copy',\r\n schemaEligible:false,\r\n enabled:true\r\n },\r\n {\r\n id:'hair-02',\r\n number:'02',\r\n question:'What photos should I send?',\r\n answer:'The clinical team should provide the exact photo requirements needed for assessment. Avoid publishing specific angles until Lamina confirms the preferred submission format.',\r\n verificationStatus:'needs-photo-format-confirmation',\r\n schemaEligible:false,\r\n enabled:true\r\n },\r\n {\r\n id:'hair-03',\r\n number:'03',\r\n question:'Can the final treatment plan change after I arrive?',\r\n answer:'Yes. The final treatment plan and design are confirmed following the required face-to-face clinical assessment.',\r\n verificationStatus:'safe-current-copy',\r\n schemaEligible:false,\r\n enabled:true\r\n },\r\n {\r\n id:'hair-04',\r\n number:'04',\r\n question:'Can you confirm the number of grafts before I travel?',\r\n answer:'Any estimate discussed before travel should be treated as preliminary. The final treatment requirements depend on the in-person clinical assessment.',\r\n verificationStatus:'requires-clinic-process-confirmation',\r\n schemaEligible:false,\r\n enabled:false\r\n },\r\n {\r\n id:'hair-05',\r\n number:'04',\r\n question:'How long should I stay in Istanbul?',\r\n answer:'The appropriate stay depends on the treatment plan and the clinic\u2019s scheduling requirements. The expected visit length should be confirmed after the case is reviewed.',\r\n verificationStatus:'needs-case-specific-confirmation',\r\n schemaEligible:false,\r\n enabled:true\r\n }\r\n ]\r\n\r\n };\r\n\r\n\r\n let activeFaqCategory =\r\n 'general';\r\n\r\n\r\n let openFaqId =\r\n 'general-01';\r\n\r\n\r\n let categorySwitchToken =\r\n 0;\r\n\r\n\r\n let introPlayed =\r\n false;\r\n\r\n\r\n let introObserver =\r\n null;\r\n\r\n\r\n let mobileRowObserver =\r\n null;\r\n\r\n\r\n let depthTicking =\r\n false;\r\n\r\n\r\n function escapeHTML(\r\n value\r\n ){\r\n\r\n return String(\r\n value\r\n )\r\n .replaceAll(\r\n '&',\r\n '&'\r\n )\r\n .replaceAll(\r\n '<',\r\n '<'\r\n )\r\n .replaceAll(\r\n '>',\r\n '>'\r\n )\r\n .replaceAll(\r\n '\"',\r\n '"'\r\n )\r\n .replaceAll(\r\n \"'\",\r\n '''\r\n );\r\n\r\n }\r\n\r\n\r\n function enabledFaqs(\r\n category\r\n ){\r\n\r\n return (\r\n faqGroups[\r\n category\r\n ] ||\r\n []\r\n ).filter(\r\n item =>\r\n item.enabled !==\r\n false\r\n );\r\n\r\n }\r\n\r\n\r\n function renderRows(\r\n category\r\n ){\r\n\r\n const items =\r\n enabledFaqs(\r\n category\r\n );\r\n\r\n\r\n rowsHost.innerHTML =\r\n items.map(\r\n item => {\r\n\r\n const isOpen =\r\n item.id ===\r\n openFaqId;\r\n\r\n\r\n const safeId =\r\n escapeHTML(\r\n item.id\r\n );\r\n\r\n\r\n return `\r\n <article\r\n class=\"df__faq-row${isOpen ? ' is-open' : ''}\"\r\n data-faq-id=\"${safeId}\"\r\n data-mobile-ready=\"false\"\r\n data-df-depth=\"row\"\r\n >\r\n <button\r\n class=\"df__question-button\"\r\n type=\"button\"\r\n id=\"faq-${safeId}-button\"\r\n aria-expanded=\"${isOpen ? 'true' : 'false'}\"\r\n aria-controls=\"faq-${safeId}-answer\"\r\n >\r\n <span class=\"df__number\">${escapeHTML(item.number)}<\/span>\r\n\r\n <span\r\n class=\"df__question-text\"\r\n role=\"heading\"\r\n aria-level=\"3\"\r\n >\r\n ${escapeHTML(item.question)}\r\n <\/span>\r\n\r\n <span\r\n class=\"df__disclosure\"\r\n aria-hidden=\"true\"\r\n ><\/span>\r\n <\/button>\r\n\r\n <div\r\n class=\"df__answer-wrap\"\r\n id=\"faq-${safeId}-answer\"\r\n role=\"region\"\r\n aria-labelledby=\"faq-${safeId}-button\"\r\n aria-hidden=\"${isOpen ? 'false' : 'true'}\"\r\n >\r\n <div class=\"df__answer-inner\">\r\n <p class=\"df__answer\">\r\n ${escapeHTML(item.answer)}\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/article>\r\n `;\r\n\r\n }\r\n ).join(\r\n ''\r\n );\r\n\r\n\r\n bindFaqButtons();\r\n initMobileRows();\r\n refreshDepthLayers();\r\n\r\n }\r\n\r\n\r\n function setOpenFaq(\r\n nextId\r\n ){\r\n\r\n openFaqId =\r\n nextId;\r\n\r\n\r\n const rows =\r\n [\r\n ...rowsHost.querySelectorAll(\r\n '.df__faq-row'\r\n )\r\n ];\r\n\r\n\r\n rows.forEach(\r\n row => {\r\n\r\n const isOpen =\r\n row.dataset.faqId ===\r\n openFaqId;\r\n\r\n\r\n row.classList.toggle(\r\n 'is-open',\r\n isOpen\r\n );\r\n\r\n\r\n const button =\r\n row.querySelector(\r\n '.df__question-button'\r\n );\r\n\r\n\r\n const answer =\r\n row.querySelector(\r\n '.df__answer-wrap'\r\n );\r\n\r\n\r\n button?.setAttribute(\r\n 'aria-expanded',\r\n isOpen\r\n ? 'true'\r\n : 'false'\r\n );\r\n\r\n\r\n answer?.setAttribute(\r\n 'aria-hidden',\r\n isOpen\r\n ? 'false'\r\n : 'true'\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n requestDepthUpdate();\r\n\r\n }\r\n\r\n\r\n function bindFaqButtons(){\r\n\r\n rowsHost\r\n .querySelectorAll(\r\n '.df__question-button'\r\n )\r\n .forEach(\r\n button => {\r\n\r\n button.addEventListener(\r\n 'click',\r\n () => {\r\n\r\n const row =\r\n button.closest(\r\n '.df__faq-row'\r\n );\r\n\r\n\r\n if (\r\n !row\r\n ) return;\r\n\r\n\r\n const id =\r\n row.dataset.faqId;\r\n\r\n\r\n const isOpen =\r\n row.classList.contains(\r\n 'is-open'\r\n );\r\n\r\n\r\n \/*\r\n One-open-at-a-time ledger.\r\n Clicking the open row may close it.\r\n *\/\r\n setOpenFaq(\r\n isOpen\r\n ? ''\r\n : id\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n function setCategory(\r\n nextCategory\r\n ){\r\n\r\n if (\r\n !faqGroups[\r\n nextCategory\r\n ] ||\r\n nextCategory ===\r\n activeFaqCategory\r\n ) return;\r\n\r\n\r\n activeFaqCategory =\r\n nextCategory;\r\n\r\n\r\n const token =\r\n ++categorySwitchToken;\r\n\r\n\r\n categoryButtons.forEach(\r\n button => {\r\n\r\n button.setAttribute(\r\n 'aria-pressed',\r\n button.dataset.faqCategory ===\r\n activeFaqCategory\r\n ? 'true'\r\n : 'false'\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n const items =\r\n enabledFaqs(\r\n activeFaqCategory\r\n );\r\n\r\n\r\n openFaqId =\r\n items[\r\n 0\r\n ]?.id ||\r\n '';\r\n\r\n\r\n if (\r\n reducedMotion.matches\r\n ){\r\n\r\n root.classList.remove(\r\n 'is-category-switching'\r\n );\r\n\r\n\r\n root\r\n .querySelector(\r\n '.df__ledger'\r\n )\r\n ?.classList.remove(\r\n 'is-switching'\r\n );\r\n\r\n\r\n renderRows(\r\n activeFaqCategory\r\n );\r\n\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n const ledger =\r\n root.querySelector(\r\n '.df__ledger'\r\n );\r\n\r\n\r\n ledger?.classList.add(\r\n 'is-switching'\r\n );\r\n\r\n\r\n window.setTimeout(\r\n () => {\r\n\r\n if (\r\n token !==\r\n categorySwitchToken\r\n ) return;\r\n\r\n\r\n renderRows(\r\n activeFaqCategory\r\n );\r\n\r\n\r\n requestAnimationFrame(\r\n () => {\r\n\r\n if (\r\n token !==\r\n categorySwitchToken\r\n ) return;\r\n\r\n\r\n ledger?.classList.remove(\r\n 'is-switching'\r\n );\r\n\r\n }\r\n );\r\n\r\n },\r\n 135\r\n );\r\n\r\n }\r\n\r\n\r\n categoryButtons.forEach(\r\n button => {\r\n\r\n button.addEventListener(\r\n 'click',\r\n () => {\r\n\r\n setCategory(\r\n button.dataset.faqCategory\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n \/* =======================================================\r\n ONE-TIME SECTION ENTRANCE\r\n ======================================================= *\/\r\n\r\n function initEntrance(){\r\n\r\n introObserver?.disconnect();\r\n\r\n\r\n if (\r\n reducedMotion.matches ||\r\n introPlayed ||\r\n !(\r\n 'IntersectionObserver' in\r\n window\r\n )\r\n ){\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n root.classList.add(\r\n 'has-entry'\r\n );\r\n\r\n\r\n introObserver =\r\n new IntersectionObserver(\r\n entries => {\r\n\r\n entries.forEach(\r\n entry => {\r\n\r\n if (\r\n !entry.isIntersecting\r\n ) return;\r\n\r\n\r\n introPlayed =\r\n true;\r\n\r\n\r\n requestAnimationFrame(\r\n () => {\r\n\r\n root.classList.add(\r\n 'is-entered'\r\n );\r\n\r\n\r\n window.setTimeout(\r\n () => {\r\n\r\n root.classList.remove(\r\n 'has-entry'\r\n );\r\n\r\n },\r\n 1750\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n introObserver.disconnect();\r\n\r\n }\r\n );\r\n\r\n },\r\n {\r\n rootMargin:'0px 0px -18% 0px',\r\n threshold:.02\r\n }\r\n );\r\n\r\n\r\n introObserver.observe(\r\n root\r\n );\r\n\r\n }\r\n\r\n\r\n \/* =======================================================\r\n MOBILE BELOW-FOLD FAQ ROW ENTRY\r\n ======================================================= *\/\r\n\r\n function initMobileRows(){\r\n\r\n mobileRowObserver?.disconnect();\r\n\r\n\r\n root.classList.remove(\r\n 'has-mobile-row-entry'\r\n );\r\n\r\n\r\n const rows =\r\n [\r\n ...rowsHost.querySelectorAll(\r\n '.df__faq-row'\r\n )\r\n ];\r\n\r\n\r\n if (\r\n !mobileQuery.matches ||\r\n reducedMotion.matches ||\r\n !(\r\n 'IntersectionObserver' in\r\n window\r\n )\r\n ){\r\n\r\n rows.forEach(\r\n row => {\r\n\r\n row.dataset.mobileReady =\r\n 'true';\r\n\r\n }\r\n );\r\n\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n root.classList.add(\r\n 'has-mobile-row-entry'\r\n );\r\n\r\n\r\n mobileRowObserver =\r\n new IntersectionObserver(\r\n entries => {\r\n\r\n entries.forEach(\r\n entry => {\r\n\r\n if (\r\n !entry.isIntersecting\r\n ) return;\r\n\r\n\r\n entry.target.dataset.mobileReady =\r\n 'true';\r\n\r\n\r\n mobileRowObserver.unobserve(\r\n entry.target\r\n );\r\n\r\n }\r\n );\r\n\r\n },\r\n {\r\n rootMargin:'0px 0px -16% 0px',\r\n threshold:.03\r\n }\r\n );\r\n\r\n\r\n rows.forEach(\r\n row => {\r\n\r\n const rect =\r\n row.getBoundingClientRect();\r\n\r\n\r\n \/*\r\n Keep the immediately visible reading area ready.\r\n Lower rows resolve slightly before reaching it.\r\n *\/\r\n if (\r\n rect.top <\r\n window.innerHeight *\r\n .86\r\n ){\r\n\r\n row.dataset.mobileReady =\r\n 'true';\r\n\r\n }else{\r\n\r\n row.dataset.mobileReady =\r\n 'false';\r\n\r\n\r\n mobileRowObserver.observe(\r\n row\r\n );\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n \/* =======================================================\r\n LAMINA PASSED-CONTENT DEPTH\r\n Clarified project behavior:\r\n current\/upcoming = sharp\r\n genuinely scrolled-away = gently blurred\r\n reverse scroll = immediate refocus by geometry\r\n ======================================================= *\/\r\n\r\n let depthLayers =\r\n [];\r\n\r\n\r\n const depthProfiles =\r\n {\r\n\r\n desktop:{\r\n\r\n eyebrow:{\r\n start:.25,\r\n full:-.13,\r\n blur:2.5,\r\n opacityMin:.97\r\n },\r\n\r\n headline:{\r\n start:.23,\r\n full:-.15,\r\n blur:3.7,\r\n opacityMin:.96\r\n },\r\n\r\n copy:{\r\n start:.18,\r\n full:-.17,\r\n blur:1.9,\r\n opacityMin:.98\r\n },\r\n\r\n ui:{\r\n start:.13,\r\n full:-.19,\r\n blur:1.35,\r\n opacityMin:.985\r\n },\r\n\r\n row:{\r\n start:.10,\r\n full:-.21,\r\n blur:1.75,\r\n opacityMin:.985\r\n }\r\n\r\n },\r\n\r\n\r\n mobile:{\r\n\r\n eyebrow:{\r\n start:.19,\r\n full:-.14,\r\n blur:1.65,\r\n opacityMin:.98\r\n },\r\n\r\n headline:{\r\n start:.17,\r\n full:-.16,\r\n blur:2.35,\r\n opacityMin:.975\r\n },\r\n\r\n copy:{\r\n start:.13,\r\n full:-.18,\r\n blur:1.25,\r\n opacityMin:.985\r\n },\r\n\r\n ui:{\r\n start:.09,\r\n full:-.20,\r\n blur:.90,\r\n opacityMin:.99\r\n },\r\n\r\n row:{\r\n start:.07,\r\n full:-.22,\r\n blur:1.15,\r\n opacityMin:.99\r\n }\r\n\r\n }\r\n\r\n };\r\n\r\n\r\n function clamp(\r\n value,\r\n min,\r\n max\r\n ){\r\n\r\n return Math.min(\r\n max,\r\n Math.max(\r\n min,\r\n value\r\n )\r\n );\r\n\r\n }\r\n\r\n\r\n function smoothstep(\r\n value\r\n ){\r\n\r\n const t =\r\n clamp(\r\n value,\r\n 0,\r\n 1\r\n );\r\n\r\n\r\n return (\r\n t *\r\n t *\r\n (\r\n 3 -\r\n 2 *\r\n t\r\n )\r\n );\r\n\r\n }\r\n\r\n\r\n function refreshDepthLayers(){\r\n\r\n depthLayers =\r\n [\r\n ...root.querySelectorAll(\r\n '[data-df-depth]'\r\n )\r\n ];\r\n\r\n\r\n requestDepthUpdate();\r\n\r\n }\r\n\r\n\r\n function updateDepth(){\r\n\r\n depthTicking =\r\n false;\r\n\r\n\r\n const viewportHeight =\r\n Math.max(\r\n 1,\r\n window.innerHeight ||\r\n document.documentElement.clientHeight\r\n );\r\n\r\n\r\n const set =\r\n mobileQuery.matches\r\n ? depthProfiles.mobile\r\n : depthProfiles.desktop;\r\n\r\n\r\n depthLayers.forEach(\r\n element => {\r\n\r\n const type =\r\n element.dataset.dfDepth ||\r\n 'copy';\r\n\r\n\r\n const config =\r\n set[\r\n type\r\n ] ||\r\n set.copy;\r\n\r\n\r\n const rect =\r\n element.getBoundingClientRect();\r\n\r\n\r\n const center =\r\n rect.top +\r\n rect.height *\r\n .5;\r\n\r\n\r\n const startY =\r\n viewportHeight *\r\n config.start;\r\n\r\n\r\n const fullY =\r\n viewportHeight *\r\n config.full;\r\n\r\n\r\n let progress =\r\n center <\r\n startY\r\n ? (\r\n startY -\r\n center\r\n ) \/\r\n Math.max(\r\n 1,\r\n startY -\r\n fullY\r\n )\r\n : 0;\r\n\r\n\r\n progress =\r\n smoothstep(\r\n progress\r\n );\r\n\r\n\r\n const interacting =\r\n element.matches(\r\n ':hover, :focus-within'\r\n );\r\n\r\n\r\n if (\r\n interacting\r\n ){\r\n\r\n progress =\r\n 0;\r\n\r\n }\r\n\r\n\r\n const blur =\r\n reducedMotion.matches\r\n ? 0\r\n : (\r\n config.blur *\r\n progress\r\n );\r\n\r\n\r\n const opacity =\r\n reducedMotion.matches\r\n ? 1\r\n : (\r\n 1 -\r\n (\r\n 1 -\r\n config.opacityMin\r\n ) *\r\n progress\r\n );\r\n\r\n\r\n element.style.setProperty(\r\n '--df-passed-blur',\r\n blur.toFixed(\r\n 2\r\n ) +\r\n 'px'\r\n );\r\n\r\n\r\n element.style.setProperty(\r\n '--df-depth-opacity',\r\n opacity.toFixed(\r\n 3\r\n )\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n function requestDepthUpdate(){\r\n\r\n if (\r\n depthTicking\r\n ) return;\r\n\r\n\r\n depthTicking =\r\n true;\r\n\r\n\r\n requestAnimationFrame(\r\n updateDepth\r\n );\r\n\r\n }\r\n\r\n\r\n window.addEventListener(\r\n 'scroll',\r\n requestDepthUpdate,\r\n {\r\n passive:true\r\n }\r\n );\r\n\r\n\r\n window.addEventListener(\r\n 'resize',\r\n () => {\r\n\r\n initMobileRows();\r\n requestDepthUpdate();\r\n\r\n },\r\n {\r\n passive:true\r\n }\r\n );\r\n\r\n\r\n mobileQuery.addEventListener?.(\r\n 'change',\r\n () => {\r\n\r\n initMobileRows();\r\n requestDepthUpdate();\r\n\r\n }\r\n );\r\n\r\n\r\n reducedMotion.addEventListener?.(\r\n 'change',\r\n () => {\r\n\r\n initMobileRows();\r\n requestDepthUpdate();\r\n\r\n }\r\n );\r\n\r\n\r\n \/* =======================================================\r\n INITIALIZE\r\n ======================================================= *\/\r\n\r\n bindFaqButtons();\r\n refreshDepthLayers();\r\n initEntrance();\r\n initMobileRows();\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-73fd12c e-con-full e-flex e-con e-parent\" data-id=\"73fd12c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-26f710a elementor-widget elementor-widget-html\" data-id=\"26f710a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\r\nLAMINA CLINIC \u2014 SECTION 09\r\nFINAL CASE SUBMISSION \/ CONSULTATION\r\nCONCEPT: START FROM HOME\r\nV1 \u2014 FINAL \/ LOCKED-RULE AUDITED\r\n\r\nDARK \/ INTIMATE \/ PREMIUM \/ HIGH-CONVERSION \/ MEDICALLY CAREFUL\r\n\r\nPRODUCTION INTEGRATION REQUIRED BEFORE LAUNCH:\r\n1. Replace {{LAMINA_SECURE_CASE_ENDPOINT}} with the secure server-side case endpoint.\r\n2. Replace {{LAMINA_SECURE_NONCE}} with a real CSRF\/nonces implementation.\r\n3. Replace {{PRIVACY_NOTICE_URL}} with the legally approved Privacy Notice URL.\r\n4. Replace {{THANK_YOU_URL}} with the real post-success destination.\r\n5. Replace the development consent wording with legally reviewed text.\r\n6. Enforce all upload limits, MIME validation, storage access control,\r\n rate limiting, spam protection and sanitization server-side.\r\n7. Do not send patient files or sensitive health data to analytics.\r\n\r\nThe front-end will NOT fake a successful lead when these integrations\r\nare missing. Successful redirect\/tracking occurs only after a real\r\nbackend-confirmed successful response.\r\n========================================================= -->\r\n\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=Manrope:wght@400;500;600&display=swap');\r\n\r\n#lamina-case-submission{\r\n --s09-aubergine:#2B142F;\r\n --s09-aubergine-2:#241128;\r\n --s09-aubergine-3:#311635;\r\n --s09-aubergine-4:#35193A;\r\n --s09-ink:#171317;\r\n --s09-ivory:#F7F2EA;\r\n --s09-lilac:#C5B2C8;\r\n --s09-orchid:#94709A;\r\n --s09-plum:#5F2468;\r\n --s09-champagne:#D8C4A1;\r\n --s09-control:#3A1C40;\r\n --s09-control-2:#44224B;\r\n --s09-control-hover:#4A2852;\r\n --s09-control-selected:#53305A;\r\n --s09-rule:rgba(247,242,234,.13);\r\n --s09-rule-strong:rgba(247,242,234,.22);\r\n --s09-error:#F0A5A5;\r\n --s09-ease:cubic-bezier(.16,.70,.18,1);\r\n --s09-stage:1560px;\r\n\r\n --e-global-color-primary:#F7F2EA;\r\n --e-global-color-secondary:#94709A;\r\n --e-global-color-text:#F7F2EA;\r\n --e-global-color-accent:#5F2468;\r\n\r\n position:relative;\r\n width:100%;\r\n overflow:hidden;\r\n\r\n background:\r\n radial-gradient(48% 38% at 82% 4%,rgba(148,112,154,.08),transparent 72%),\r\n linear-gradient(150deg,var(--s09-aubergine-3) 0%,var(--s09-aubergine) 60%,var(--s09-aubergine-2) 100%);\r\n\r\n color:var(--s09-ivory);\r\n\r\n font-family:\"Manrope\",system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;\r\n\r\n -webkit-tap-highlight-color:rgba(95,36,104,.10);\r\n}\r\n\r\n#lamina-case-submission *,\r\n#lamina-case-submission *::before,\r\n#lamina-case-submission *::after{\r\n box-sizing:border-box;\r\n}\r\n\r\n#lamina-case-submission ::selection{\r\n background:var(--s09-plum);\r\n color:var(--s09-ivory);\r\n}\r\n\r\n\/* =========================================================\r\n ELEMENTOR \/ THEME PINK PROTECTION\r\n ========================================================= *\/\r\n#lamina-case-submission a,\r\n#lamina-case-submission a:link,\r\n#lamina-case-submission a:visited,\r\n#lamina-case-submission a:hover,\r\n#lamina-case-submission a:focus,\r\n#lamina-case-submission a:focus-visible,\r\n#lamina-case-submission a:active,\r\n#lamina-case-submission button,\r\n#lamina-case-submission button:hover,\r\n#lamina-case-submission button:focus,\r\n#lamina-case-submission button:focus-visible,\r\n#lamina-case-submission button:active,\r\n#lamina-case-submission button:disabled{\r\n font:inherit;\r\n text-decoration-color:var(--s09-plum) !important;\r\n}\r\n\r\n#lamina-case-submission button,\r\n#lamina-case-submission input,\r\n#lamina-case-submission textarea,\r\n#lamina-case-submission select{\r\n font:inherit;\r\n}\r\n\r\n#lamina-case-submission .s09__choice,\r\n#lamina-case-submission .s09__choice:link,\r\n#lamina-case-submission .s09__choice:visited,\r\n#lamina-case-submission .s09__choice:focus,\r\n#lamina-case-submission .s09__choice:active{\r\n color:var(--s09-ivory) !important;\r\n -webkit-text-fill-color:var(--s09-ivory) !important;\r\n\r\n background:\r\n linear-gradient(\r\n 145deg,\r\n #44224B 0%,\r\n #3A1C40 58%,\r\n #311635 100%\r\n ) !important;\r\n\r\n border-color:rgba(197,178,200,.20) !important;\r\n\r\n box-shadow:\r\n inset 0 1px 0 rgba(255,255,255,.035),\r\n inset 0 -1px 0 rgba(0,0,0,.14),\r\n 0 18px 42px rgba(8,3,10,.14) !important;\r\n\r\n text-decoration:none !important;\r\n text-shadow:none !important;\r\n}\r\n\r\n#lamina-case-submission .s09__choice:hover,\r\n#lamina-case-submission .s09__choice:focus-visible{\r\n color:var(--s09-ivory) !important;\r\n -webkit-text-fill-color:var(--s09-ivory) !important;\r\n\r\n background:\r\n linear-gradient(\r\n 145deg,\r\n #4B2853 0%,\r\n #422047 58%,\r\n #35193A 100%\r\n ) !important;\r\n\r\n border-color:rgba(216,196,161,.38) !important;\r\n\r\n box-shadow:\r\n inset 0 1px 0 rgba(255,255,255,.05),\r\n 0 22px 52px rgba(8,3,10,.18) !important;\r\n}\r\n\r\n#lamina-case-submission .s09__choice.is-selected,\r\n#lamina-case-submission .s09__choice-input:checked + .s09__choice{\r\n color:var(--s09-ivory) !important;\r\n -webkit-text-fill-color:var(--s09-ivory) !important;\r\n\r\n background:\r\n linear-gradient(\r\n 145deg,\r\n #53305A 0%,\r\n #44224B 56%,\r\n #35193A 100%\r\n ) !important;\r\n\r\n border-color:rgba(216,196,161,.66) !important;\r\n\r\n box-shadow:\r\n inset 3px 0 0 var(--s09-champagne),\r\n inset 0 1px 0 rgba(255,255,255,.05),\r\n 0 24px 58px rgba(8,3,10,.20) !important;\r\n}\r\n\r\n#lamina-case-submission .s09__choice-name{\r\n color:var(--s09-ivory) !important;\r\n -webkit-text-fill-color:var(--s09-ivory) !important;\r\n}\r\n\r\n#lamina-case-submission .s09__choice-copy{\r\n color:rgba(247,242,234,.62) !important;\r\n -webkit-text-fill-color:rgba(247,242,234,.62) !important;\r\n}\r\n\r\n#lamina-case-submission .s09__choice:hover .s09__choice-copy,\r\n#lamina-case-submission .s09__choice.is-selected .s09__choice-copy,\r\n#lamina-case-submission .s09__choice-input:checked + .s09__choice .s09__choice-copy{\r\n color:rgba(247,242,234,.78) !important;\r\n -webkit-text-fill-color:rgba(247,242,234,.78) !important;\r\n}\r\n\r\n#lamina-case-submission .s09__choice::before{\r\n color:rgba(216,196,161,.84) !important;\r\n -webkit-text-fill-color:rgba(216,196,161,.84) !important;\r\n background:transparent !important;\r\n}\r\n\r\n#lamina-case-submission .s09__choice::after{\r\n color:rgba(247,242,234,.72) !important;\r\n -webkit-text-fill-color:rgba(247,242,234,.72) !important;\r\n background:rgba(247,242,234,.04) !important;\r\n border-color:rgba(247,242,234,.20) !important;\r\n}\r\n\r\n#lamina-case-submission .s09__choice:hover::after,\r\n#lamina-case-submission .s09__choice.is-selected::after,\r\n#lamina-case-submission .s09__choice-input:checked + .s09__choice::after{\r\n color:var(--s09-aubergine) !important;\r\n -webkit-text-fill-color:var(--s09-aubergine) !important;\r\n background:var(--s09-champagne) !important;\r\n border-color:var(--s09-champagne) !important;\r\n}\r\n\r\n#lamina-case-submission .s09__button,\r\n#lamina-case-submission .s09__button:link,\r\n#lamina-case-submission .s09__button:visited,\r\n#lamina-case-submission .s09__button:focus,\r\n#lamina-case-submission .s09__button:active{\r\n color:var(--s09-aubergine) !important;\r\n -webkit-text-fill-color:var(--s09-aubergine) !important;\r\n\r\n background:var(--s09-champagne) !important;\r\n border-color:var(--s09-champagne) !important;\r\n\r\n text-decoration:none !important;\r\n text-shadow:none !important;\r\n}\r\n\r\n#lamina-case-submission .s09__button:hover,\r\n#lamina-case-submission .s09__button:focus-visible{\r\n color:var(--s09-ivory) !important;\r\n -webkit-text-fill-color:var(--s09-ivory) !important;\r\n\r\n background:var(--s09-ivory) !important;\r\n border-color:var(--s09-ivory) !important;\r\n}\r\n\r\n#lamina-case-submission .s09__button:disabled{\r\n color:rgba(43,20,47,.52) !important;\r\n -webkit-text-fill-color:rgba(43,20,47,.52) !important;\r\n\r\n background:rgba(216,196,161,.54) !important;\r\n border-color:rgba(216,196,161,.34) !important;\r\n}\r\n\r\n#lamina-case-submission .s09__back,\r\n#lamina-case-submission .s09__remove{\r\n color:rgba(247,242,234,.72) !important;\r\n -webkit-text-fill-color:rgba(247,242,234,.72) !important;\r\n background:transparent !important;\r\n border-color:transparent !important;\r\n}\r\n\r\n#lamina-case-submission .s09__back:hover,\r\n#lamina-case-submission .s09__back:focus-visible,\r\n#lamina-case-submission .s09__remove:hover,\r\n#lamina-case-submission .s09__remove:focus-visible{\r\n color:var(--s09-ivory) !important;\r\n -webkit-text-fill-color:var(--s09-ivory) !important;\r\n}\r\n\r\n#lamina-case-submission .s09__privacy-link,\r\n#lamina-case-submission .s09__privacy-link:link,\r\n#lamina-case-submission .s09__privacy-link:visited,\r\n#lamina-case-submission .s09__privacy-link:hover,\r\n#lamina-case-submission .s09__privacy-link:focus,\r\n#lamina-case-submission .s09__privacy-link:focus-visible,\r\n#lamina-case-submission .s09__privacy-link:active{\r\n color:var(--s09-ivory) !important;\r\n text-decoration-color:rgba(197,178,200,.52) !important;\r\n}\r\n\r\n#lamina-case-submission input,\r\n#lamina-case-submission textarea,\r\n#lamina-case-submission select{\r\n color:var(--s09-ivory) !important;\r\n background-color:transparent !important;\r\n border-color:var(--s09-rule) !important;\r\n outline-color:transparent !important;\r\n caret-color:var(--s09-ivory);\r\n}\r\n\r\n#lamina-case-submission input:focus,\r\n#lamina-case-submission textarea:focus,\r\n#lamina-case-submission select:focus{\r\n color:var(--s09-ivory) !important;\r\n background-color:transparent !important;\r\n border-color:var(--s09-orchid) !important;\r\n box-shadow:none !important;\r\n outline:0 !important;\r\n}\r\n\r\n#lamina-case-submission input[type=\"radio\"],\r\n#lamina-case-submission input[type=\"checkbox\"]{\r\n accent-color:var(--s09-plum) !important;\r\n}\r\n\r\n#lamina-case-submission input:-webkit-autofill,\r\n#lamina-case-submission input:-webkit-autofill:hover,\r\n#lamina-case-submission input:-webkit-autofill:focus,\r\n#lamina-case-submission textarea:-webkit-autofill,\r\n#lamina-case-submission select:-webkit-autofill{\r\n -webkit-text-fill-color:var(--s09-ivory) !important;\r\n -webkit-box-shadow:0 0 0 1000px var(--s09-aubergine) inset !important;\r\n transition:background-color 9999s ease-out 0s;\r\n}\r\n\r\n#lamina-case-submission .s09__choice:focus-visible,\r\n#lamina-case-submission .s09__button:focus-visible,\r\n#lamina-case-submission .s09__back:focus-visible,\r\n#lamina-case-submission .s09__remove:focus-visible,\r\n#lamina-case-submission .s09__privacy-link:focus-visible,\r\n#lamina-case-submission .s09__upload-label:focus-within{\r\n outline:1px solid rgba(197,178,200,.78) !important;\r\n outline-offset:5px !important;\r\n}\r\n\r\n\/* =========================================================\r\n SHELL \/ DESKTOP LAYOUT\r\n ========================================================= *\/\r\n.s09__shell{\r\n width:min(100%,1720px);\r\n margin-inline:auto;\r\n\r\n padding:\r\n clamp(82px,9vh,118px)\r\n clamp(22px,3.5vw,66px)\r\n clamp(100px,10vh,140px);\r\n}\r\n\r\n.s09__layout{\r\n width:min(100%,var(--s09-stage));\r\n margin-inline:auto;\r\n\r\n display:grid;\r\n grid-template-columns:minmax(320px,.40fr) minmax(0,.60fr);\r\n gap:clamp(78px,8vw,148px);\r\n align-items:start;\r\n}\r\n\r\n\/* =========================================================\r\n EDITORIAL INTRO\r\n ========================================================= *\/\r\n.s09__editorial{\r\n min-width:0;\r\n padding-top:5px;\r\n}\r\n\r\n.s09__eyebrow{\r\n margin:0 0 17px;\r\n\r\n color:rgba(197,178,200,.76);\r\n\r\n font-size:clamp(11px,.70vw,13px);\r\n line-height:1.2;\r\n font-weight:600;\r\n letter-spacing:.17em;\r\n text-transform:uppercase;\r\n}\r\n\r\n.s09__title{\r\n margin:0 !important;\r\n\r\n max-width:8.2ch;\r\n overflow:visible;\r\n\r\n color:var(--s09-aubergine) !important;\r\n -webkit-text-fill-color:var(--s09-aubergine) !important;\r\n\r\n font-family:\"Cormorant Garamond\",Georgia,serif !important;\r\n font-size:clamp(64px,5.2vw,96px) !important;\r\n line-height:1 !important;\r\n font-weight:400 !important;\r\n letter-spacing:-.050em !important;\r\n\r\n text-transform:none !important;\r\n text-decoration:none !important;\r\n text-shadow:none !important;\r\n}\r\n\r\n#lamina-case-submission .s09__title-line{\r\n display:block;\r\n width:max-content;\r\n max-width:100%;\r\n\r\n font-family:\"Cormorant Garamond\",Georgia,serif !important;\r\n font-weight:400 !important;\r\n line-height:.90 !important;\r\n\r\n text-transform:none !important;\r\n text-decoration:none !important;\r\n text-shadow:none !important;\r\n}\r\n\r\n#lamina-case-submission .s09__title-line--base{\r\n color:var(--s09-aubergine) !important;\r\n -webkit-text-fill-color:var(--s09-aubergine) !important;\r\n\r\n font-style:normal !important;\r\n letter-spacing:-.050em !important;\r\n}\r\n\r\n#lamina-case-submission .s09__title-line + .s09__title-line{\r\n margin-top:-.048em;\r\n}\r\n\r\n#lamina-case-submission .s09__title-line--accent{\r\n margin-top:.040em !important;\r\n\r\n padding-inline-end:.055em;\r\n padding-bottom:.080em;\r\n\r\n color:var(--s09-orchid) !important;\r\n -webkit-text-fill-color:var(--s09-orchid) !important;\r\n\r\n font-style:italic !important;\r\n font-weight:400 !important;\r\n letter-spacing:-.038em !important;\r\n line-height:.93 !important;\r\n}\r\n\r\n.s09__support{\r\n margin:clamp(25px,3vh,34px) 0 0;\r\n\r\n max-width:38ch;\r\n\r\n color:rgba(247,242,234,.70);\r\n\r\n font-size:clamp(15px,1vw,17px);\r\n line-height:1.70;\r\n}\r\n\r\n.s09__quiet-line{\r\n margin:clamp(29px,3.6vh,42px) 0 0;\r\n\r\n max-width:32ch;\r\n\r\n color:rgba(197,178,200,.58);\r\n\r\n font-size:13px;\r\n line-height:1.58;\r\n}\r\n\r\n.s09__clinical{\r\n margin:clamp(34px,4.2vh,50px) 0 0;\r\n\r\n max-width:42ch;\r\n\r\n color:rgba(247,242,234,.60);\r\n\r\n font-size:13.5px;\r\n line-height:1.62;\r\n}\r\n\r\n\/* =========================================================\r\n FORM ENVIRONMENT \u2014 NO WHITE CARD\r\n ========================================================= *\/\r\n.s09__form-wrap{\r\n min-width:0;\r\n}\r\n\r\n.s09__form{\r\n width:100%;\r\n margin:0;\r\n}\r\n\r\n.s09__intake-label{\r\n margin:0 0 15px;\r\n\r\n color:rgba(197,178,200,.64);\r\n\r\n font-size:11px;\r\n line-height:1.2;\r\n font-weight:600;\r\n letter-spacing:.15em;\r\n text-transform:uppercase;\r\n}\r\n\r\n\/* =========================================================\r\n PROGRESS\r\n ========================================================= *\/\r\n.s09__progress{\r\n margin-bottom:clamp(34px,4.8vh,56px);\r\n}\r\n\r\n.s09__progress-top{\r\n display:flex;\r\n justify-content:space-between;\r\n gap:20px;\r\n align-items:baseline;\r\n\r\n margin-bottom:13px;\r\n}\r\n\r\n.s09__progress-current{\r\n color:var(--s09-ivory);\r\n\r\n font-size:11px;\r\n line-height:1.2;\r\n font-weight:600;\r\n letter-spacing:.12em;\r\n}\r\n\r\n.s09__progress-accessible{\r\n position:absolute !important;\r\n width:1px !important;\r\n height:1px !important;\r\n padding:0 !important;\r\n margin:-1px !important;\r\n overflow:hidden !important;\r\n clip:rect(0,0,0,0) !important;\r\n white-space:nowrap !important;\r\n border:0 !important;\r\n}\r\n\r\n.s09__progress-labels{\r\n display:grid;\r\n grid-template-columns:repeat(5,minmax(0,1fr));\r\n gap:12px;\r\n}\r\n\r\n.s09__progress-item{\r\n color:rgba(247,242,234,.34);\r\n\r\n font-size:10.5px;\r\n line-height:1.25;\r\n font-weight:600;\r\n letter-spacing:.08em;\r\n text-transform:uppercase;\r\n\r\n transition:\r\n color .40s ease,\r\n opacity .40s ease;\r\n}\r\n\r\n.s09__progress-item.is-complete{\r\n color:rgba(197,178,200,.66);\r\n}\r\n\r\n.s09__progress-item.is-active{\r\n color:var(--s09-ivory);\r\n}\r\n\r\n.s09__progress-track{\r\n position:relative;\r\n\r\n height:1px;\r\n margin-top:14px;\r\n\r\n overflow:hidden;\r\n\r\n background:rgba(247,242,234,.14);\r\n}\r\n\r\n.s09__progress-fill{\r\n position:absolute;\r\n inset-block:0;\r\n inset-inline-start:0;\r\n\r\n width:var(--s09-progress,0%);\r\n background:var(--s09-orchid);\r\n\r\n transform-origin:0 50%;\r\n\r\n transition:\r\n width .52s var(--s09-ease);\r\n}\r\n\r\n[dir=\"rtl\"] #lamina-case-submission .s09__progress-fill{\r\n inset-inline-start:auto;\r\n inset-inline-end:0;\r\n}\r\n\r\n\/* =========================================================\r\n STEP STRUCTURE\r\n ========================================================= *\/\r\n.s09__step{\r\n min-width:0;\r\n}\r\n\r\n.s09__step[hidden]{\r\n display:none !important;\r\n}\r\n\r\n.s09__step-kicker{\r\n margin:0 0 11px;\r\n\r\n color:rgba(197,178,200,.62);\r\n\r\n font-size:11px;\r\n line-height:1.2;\r\n font-weight:600;\r\n letter-spacing:.13em;\r\n text-transform:uppercase;\r\n}\r\n\r\n.s09__step-title{\r\n margin:0;\r\n\r\n max-width:16ch;\r\n\r\n color:var(--s09-ivory);\r\n\r\n font-family:\"Cormorant Garamond\",Georgia,serif;\r\n font-size:clamp(38px,3.2vw,52px);\r\n line-height:.98;\r\n font-weight:400;\r\n letter-spacing:-.032em;\r\n}\r\n\r\n.s09__step-support{\r\n margin:15px 0 0;\r\n\r\n max-width:56ch;\r\n\r\n color:rgba(247,242,234,.62);\r\n\r\n font-size:14.5px;\r\n line-height:1.65;\r\n}\r\n\r\n.s09__step-body{\r\n margin-top:clamp(30px,3.8vh,44px);\r\n}\r\n\r\n\/* Progressive JS enhancement: actions are hidden in base\/no-JS form. *\/\r\n.s09__step-actions{\r\n display:none;\r\n}\r\n\r\n#lamina-case-submission.is-enhanced .s09__step-actions{\r\n display:flex;\r\n justify-content:space-between;\r\n align-items:center;\r\n gap:18px;\r\n\r\n margin-top:clamp(30px,4vh,46px);\r\n}\r\n\r\n.s09__step.is-leaving{\r\n opacity:0;\r\n transform:translate3d(0,-6px,0);\r\n\r\n transition:\r\n opacity .18s ease,\r\n transform .22s var(--s09-ease);\r\n}\r\n\r\n.s09__step.is-entering{\r\n opacity:0;\r\n transform:translate3d(0,8px,0);\r\n}\r\n\r\n.s09__step.is-entering.is-entered{\r\n opacity:1;\r\n transform:none;\r\n\r\n transition:\r\n opacity .38s ease,\r\n transform .44s var(--s09-ease);\r\n}\r\n\r\n\/* =========================================================\r\n TREATMENT CHOICES \u2014 REFINED EDITORIAL CARDS\r\n ========================================================= *\/\r\n.s09__choice-group{\r\n border:0;\r\n padding:0;\r\n margin:0;\r\n min-width:0;\r\n}\r\n\r\n.s09__choice-grid{\r\n display:grid;\r\n grid-template-columns:repeat(2,minmax(0,1fr));\r\n gap:14px;\r\n\r\n border:0;\r\n}\r\n\r\n.s09__choice-wrap{\r\n position:relative;\r\n min-width:0;\r\n}\r\n\r\n.s09__choice-wrap + .s09__choice-wrap{\r\n border-inline-start:0;\r\n}\r\n\r\n.s09__choice-input{\r\n position:absolute;\r\n inline-size:1px;\r\n block-size:1px;\r\n opacity:0;\r\n pointer-events:none;\r\n}\r\n\r\n.s09__choice{\r\n position:relative;\r\n\r\n display:grid;\r\n grid-template-rows:auto 1fr auto;\r\n align-content:start;\r\n\r\n width:100%;\r\n min-height:176px;\r\n\r\n padding:\r\n 24px\r\n 24px\r\n 22px;\r\n\r\n overflow:hidden;\r\n\r\n border:1px solid rgba(197,178,200,.18);\r\n border-radius:12px;\r\n\r\n cursor:pointer;\r\n text-align:start;\r\n\r\n transform:translate3d(0,0,0);\r\n\r\n transition:\r\n transform .42s var(--s09-ease),\r\n color .38s ease,\r\n background .42s ease,\r\n border-color .42s ease,\r\n box-shadow .42s ease;\r\n}\r\n\r\n.s09__choice::before{\r\n content:\"01\";\r\n\r\n display:block;\r\n margin-bottom:22px;\r\n\r\n color:rgba(216,196,161,.72);\r\n\r\n font-family:\"Manrope\",system-ui,sans-serif;\r\n font-size:10px;\r\n line-height:1;\r\n font-weight:600;\r\n letter-spacing:.18em;\r\n}\r\n\r\n.s09__choice-wrap:nth-child(2) .s09__choice::before{\r\n content:\"02\";\r\n}\r\n\r\n.s09__choice::after{\r\n content:\"\u2197\";\r\n\r\n position:absolute;\r\n inset-inline-end:20px;\r\n inset-block-start:19px;\r\n\r\n display:grid;\r\n place-items:center;\r\n\r\n width:31px;\r\n height:31px;\r\n\r\n border:1px solid rgba(247,242,234,.18);\r\n border-radius:8px;\r\n\r\n background:rgba(247,242,234,.025);\r\n color:rgba(247,242,234,.56);\r\n\r\n font-family:\"Manrope\",system-ui,sans-serif;\r\n font-size:12px;\r\n line-height:1;\r\n font-weight:500;\r\n\r\n transform:rotate(0deg);\r\n\r\n transition:\r\n color .35s ease,\r\n border-color .35s ease,\r\n background-color .35s ease,\r\n transform .42s var(--s09-ease);\r\n}\r\n\r\n.s09__choice:hover{\r\n transform:translate3d(0,-2px,0);\r\n}\r\n\r\n.s09__choice:hover::after,\r\n.s09__choice.is-selected::after,\r\n.s09__choice-input:checked + .s09__choice::after{\r\n transform:rotate(45deg);\r\n}\r\n\r\n.s09__choice-name{\r\n display:block;\r\n\r\n max-width:10ch;\r\n\r\n color:inherit !important;\r\n -webkit-text-fill-color:currentColor !important;\r\n\r\n font-family:\"Cormorant Garamond\",Georgia,serif !important;\r\n font-size:clamp(30px,2.45vw,40px) !important;\r\n line-height:.98 !important;\r\n font-weight:400 !important;\r\n letter-spacing:-.035em !important;\r\n\r\n text-decoration:none !important;\r\n text-shadow:none !important;\r\n}\r\n\r\n.s09__choice-copy{\r\n display:block;\r\n\r\n align-self:end;\r\n\r\n margin-top:19px;\r\n max-width:30ch;\r\n\r\n color:rgba(247,242,234,.52) !important;\r\n -webkit-text-fill-color:rgba(247,242,234,.52) !important;\r\n\r\n font-family:\"Manrope\",system-ui,sans-serif !important;\r\n font-size:12.5px !important;\r\n line-height:1.58 !important;\r\n font-weight:400 !important;\r\n letter-spacing:0 !important;\r\n\r\n text-decoration:none !important;\r\n text-shadow:none !important;\r\n\r\n transition:color .35s ease;\r\n}\r\n\r\n.s09__choice:hover .s09__choice-copy,\r\n.s09__choice.is-selected .s09__choice-copy,\r\n.s09__choice-input:checked + .s09__choice .s09__choice-copy{\r\n color:rgba(247,242,234,.72) !important;\r\n -webkit-text-fill-color:rgba(247,242,234,.72) !important;\r\n}\r\n\r\n.s09__choice-input:checked + .s09__choice{\r\n transform:translate3d(0,-2px,0);\r\n}\r\n\r\n.s09__choice-input:focus-visible + .s09__choice{\r\n outline:1px solid rgba(216,196,161,.76) !important;\r\n outline-offset:4px !important;\r\n}\r\n\r\n\/* =========================================================\r\n FIELDS\r\n ========================================================= *\/\r\n.s09__field-grid{\r\n display:grid;\r\n grid-template-columns:repeat(2,minmax(0,1fr));\r\n gap:\r\n 28px\r\n clamp(26px,3.2vw,48px);\r\n}\r\n\r\n.s09__field{\r\n min-width:0;\r\n}\r\n\r\n.s09__field--full{\r\n grid-column:1 \/ -1;\r\n}\r\n\r\n.s09__label{\r\n display:block;\r\n\r\n margin-bottom:7px;\r\n\r\n color:rgba(197,178,200,.72);\r\n\r\n font-size:11px;\r\n line-height:1.2;\r\n font-weight:600;\r\n letter-spacing:.095em;\r\n text-transform:uppercase;\r\n}\r\n\r\n.s09__label-note{\r\n color:rgba(197,178,200,.44);\r\n font-weight:500;\r\n letter-spacing:.02em;\r\n text-transform:none;\r\n}\r\n\r\n.s09__input,\r\n.s09__select,\r\n.s09__textarea{\r\n width:100%;\r\n\r\n border:\r\n 0\r\n 0\r\n 1px\r\n 0;\r\n\r\n border-style:solid;\r\n\r\n border-radius:0;\r\n\r\n padding:\r\n 10px\r\n 0\r\n 12px;\r\n\r\n color:var(--s09-ivory);\r\n\r\n font-size:clamp(16px,1.08vw,18px);\r\n line-height:1.45;\r\n\r\n appearance:none;\r\n\r\n transition:\r\n border-color .40s ease,\r\n color .40s ease;\r\n}\r\n\r\n.s09__select{\r\n padding-inline-end:34px;\r\n\r\n background-image:\r\n linear-gradient(45deg,transparent 50%,rgba(247,242,234,.62) 50%),\r\n linear-gradient(135deg,rgba(247,242,234,.62) 50%,transparent 50%);\r\n\r\n background-position:\r\n calc(100% - 14px) 52%,\r\n calc(100% - 9px) 52%;\r\n\r\n background-size:\r\n 5px 5px,\r\n 5px 5px;\r\n\r\n background-repeat:no-repeat;\r\n}\r\n\r\n[dir=\"rtl\"] #lamina-case-submission .s09__select{\r\n background-position:\r\n 14px 52%,\r\n 9px 52%;\r\n\r\n padding-inline:\r\n 34px\r\n 0;\r\n}\r\n\r\n.s09__select option{\r\n color:var(--s09-ink);\r\n background:var(--s09-ivory);\r\n}\r\n\r\n.s09__textarea{\r\n min-height:132px;\r\n max-height:320px;\r\n resize:vertical;\r\n\r\n border:1px solid var(--s09-rule) !important;\r\n\r\n padding:\r\n 16px\r\n 17px;\r\n\r\n line-height:1.58;\r\n}\r\n\r\n.s09__input::placeholder,\r\n.s09__textarea::placeholder{\r\n color:rgba(247,242,234,.32);\r\n opacity:1;\r\n}\r\n\r\n.s09__error{\r\n min-height:1.3em;\r\n margin:7px 0 0;\r\n\r\n color:var(--s09-error);\r\n\r\n font-size:12.5px;\r\n line-height:1.45;\r\n}\r\n\r\n.s09__field[aria-invalid=\"true\"] .s09__label{\r\n color:var(--s09-error);\r\n}\r\n\r\n.s09__field[aria-invalid=\"true\"] .s09__input,\r\n.s09__field[aria-invalid=\"true\"] .s09__select,\r\n.s09__field[aria-invalid=\"true\"] .s09__textarea{\r\n border-color:var(--s09-error) !important;\r\n}\r\n\r\n\/* =========================================================\r\n CASE INTEREST CHOICES \u2014 CONTRAST LOCKED\r\n ========================================================= *\/\r\n.s09__interest-list{\r\n display:flex;\r\n flex-wrap:wrap;\r\n gap:9px;\r\n\r\n margin-bottom:30px;\r\n}\r\n\r\n.s09__interest-option{\r\n position:relative;\r\n}\r\n\r\n.s09__interest-option input{\r\n position:absolute;\r\n inline-size:1px;\r\n block-size:1px;\r\n opacity:0;\r\n}\r\n\r\n#lamina-case-submission .s09__interest-option label{\r\n display:inline-flex;\r\n align-items:center;\r\n justify-content:center;\r\n\r\n min-height:42px;\r\n\r\n padding:0 15px;\r\n\r\n border:1px solid rgba(197,178,200,.18) !important;\r\n border-radius:8px !important;\r\n\r\n background:#3A1C40 !important;\r\n\r\n color:rgba(247,242,234,.78) !important;\r\n -webkit-text-fill-color:rgba(247,242,234,.78) !important;\r\n\r\n cursor:pointer;\r\n\r\n font-family:\"Manrope\",system-ui,sans-serif !important;\r\n font-size:10.5px !important;\r\n line-height:1.2 !important;\r\n font-weight:600 !important;\r\n letter-spacing:.075em !important;\r\n text-transform:uppercase !important;\r\n text-decoration:none !important;\r\n text-shadow:none !important;\r\n\r\n box-shadow:inset 0 1px 0 rgba(255,255,255,.025) !important;\r\n\r\n transition:\r\n transform .28s var(--s09-ease),\r\n color .30s ease,\r\n background-color .30s ease,\r\n border-color .30s ease !important;\r\n}\r\n\r\n#lamina-case-submission .s09__interest-option label:hover{\r\n transform:translateY(-1px);\r\n\r\n color:var(--s09-ivory) !important;\r\n -webkit-text-fill-color:var(--s09-ivory) !important;\r\n\r\n background:#4A2852 !important;\r\n border-color:rgba(216,196,161,.36) !important;\r\n}\r\n\r\n#lamina-case-submission .s09__interest-option input:checked + label{\r\n color:var(--s09-aubergine) !important;\r\n -webkit-text-fill-color:var(--s09-aubergine) !important;\r\n\r\n background:var(--s09-champagne) !important;\r\n border-color:var(--s09-champagne) !important;\r\n\r\n box-shadow:inset 0 0 0 1px rgba(43,20,47,.06) !important;\r\n\r\n transform:translateY(-1px);\r\n}\r\n\r\n#lamina-case-submission .s09__interest-option input:focus-visible + label{\r\n outline:1px solid rgba(216,196,161,.82) !important;\r\n outline-offset:4px !important;\r\n}\r\n\r\n\/* =========================================================\r\n FILE UPLOAD\r\n ========================================================= *\/\r\n.s09__upload{\r\n margin-top:30px;\r\n}\r\n\r\n.s09__upload-label{\r\n position:relative;\r\n\r\n display:flex;\r\n justify-content:space-between;\r\n gap:24px;\r\n align-items:center;\r\n\r\n min-height:82px;\r\n\r\n padding:\r\n 18px\r\n 0;\r\n\r\n border-top:1px solid var(--s09-rule);\r\n border-bottom:1px solid var(--s09-rule);\r\n\r\n cursor:pointer;\r\n}\r\n\r\n.s09__upload-title{\r\n color:var(--s09-ivory);\r\n\r\n font-family:\"Cormorant Garamond\",Georgia,serif;\r\n font-size:clamp(27px,2.3vw,36px);\r\n line-height:1;\r\n letter-spacing:-.025em;\r\n}\r\n\r\n.s09__upload-meta{\r\n display:block;\r\n margin-top:7px;\r\n\r\n color:rgba(197,178,200,.52);\r\n\r\n font-size:12px;\r\n line-height:1.45;\r\n}\r\n\r\n.s09__upload-plus{\r\n flex:0 0 auto;\r\n\r\n color:var(--s09-orchid);\r\n\r\n font-size:28px;\r\n line-height:1;\r\n font-weight:300;\r\n}\r\n\r\n.s09__file-input{\r\n position:absolute;\r\n inline-size:1px;\r\n block-size:1px;\r\n opacity:0;\r\n pointer-events:none;\r\n}\r\n\r\n.s09__file-previews{\r\n display:grid;\r\n grid-template-columns:repeat(3,minmax(0,1fr));\r\n gap:12px;\r\n\r\n margin-top:16px;\r\n}\r\n\r\n.s09__file-preview{\r\n min-width:0;\r\n\r\n border-bottom:1px solid var(--s09-rule);\r\n\r\n padding-bottom:10px;\r\n}\r\n\r\n.s09__file-thumb{\r\n position:relative;\r\n overflow:hidden;\r\n\r\n width:100%;\r\n aspect-ratio:4 \/ 3;\r\n\r\n background:rgba(247,242,234,.055);\r\n}\r\n\r\n.s09__file-thumb img{\r\n width:100%;\r\n height:100%;\r\n display:block;\r\n\r\n object-fit:cover;\r\n}\r\n\r\n.s09__file-pdf{\r\n width:100%;\r\n height:100%;\r\n\r\n display:grid;\r\n place-items:center;\r\n\r\n color:rgba(197,178,200,.66);\r\n\r\n font-size:12px;\r\n font-weight:600;\r\n letter-spacing:.12em;\r\n}\r\n\r\n.s09__file-row{\r\n display:flex;\r\n justify-content:space-between;\r\n gap:10px;\r\n align-items:center;\r\n\r\n margin-top:8px;\r\n}\r\n\r\n.s09__file-name{\r\n min-width:0;\r\n overflow:hidden;\r\n text-overflow:ellipsis;\r\n white-space:nowrap;\r\n\r\n color:rgba(247,242,234,.62);\r\n\r\n font-size:11.5px;\r\n line-height:1.3;\r\n}\r\n\r\n.s09__remove{\r\n flex:0 0 auto;\r\n\r\n min-width:44px;\r\n min-height:44px;\r\n\r\n padding:0;\r\n\r\n border:0;\r\n\r\n cursor:pointer;\r\n\r\n font-size:11px;\r\n letter-spacing:.06em;\r\n text-transform:uppercase;\r\n}\r\n\r\n\/* =========================================================\r\n REVIEW\r\n ========================================================= *\/\r\n.s09__review{\r\n border-top:1px solid var(--s09-rule);\r\n}\r\n\r\n.s09__review-row{\r\n display:grid;\r\n grid-template-columns:160px minmax(0,1fr) 58px;\r\n gap:22px;\r\n align-items:start;\r\n\r\n padding:\r\n 20px\r\n 0;\r\n\r\n border-bottom:1px solid var(--s09-rule);\r\n}\r\n\r\n.s09__review-label{\r\n color:rgba(197,178,200,.56);\r\n\r\n font-size:10.5px;\r\n line-height:1.35;\r\n font-weight:600;\r\n letter-spacing:.10em;\r\n text-transform:uppercase;\r\n}\r\n\r\n.s09__review-value{\r\n color:rgba(247,242,234,.82);\r\n\r\n font-size:14.5px;\r\n line-height:1.55;\r\n}\r\n\r\n.s09__review-edit{\r\n min-width:44px;\r\n min-height:44px;\r\n\r\n padding:0;\r\n\r\n border:0;\r\n\r\n color:rgba(247,242,234,.58);\r\n background:transparent;\r\n\r\n cursor:pointer;\r\n\r\n font-size:10.5px;\r\n line-height:1.2;\r\n letter-spacing:.08em;\r\n text-transform:uppercase;\r\n}\r\n\r\n.s09__review-edit:hover,\r\n.s09__review-edit:focus-visible{\r\n color:var(--s09-ivory);\r\n}\r\n\r\n.s09__consent{\r\n margin-top:28px;\r\n\r\n display:grid;\r\n grid-template-columns:44px minmax(0,1fr);\r\n gap:11px;\r\n align-items:start;\r\n}\r\n\r\n.s09__consent-control{\r\n display:grid;\r\n place-items:center;\r\n\r\n width:44px;\r\n height:44px;\r\n}\r\n\r\n.s09__consent-control input{\r\n width:19px;\r\n height:19px;\r\n margin:0;\r\n}\r\n\r\n.s09__consent-copy{\r\n margin:0;\r\n padding-top:9px;\r\n\r\n color:rgba(247,242,234,.62);\r\n\r\n font-size:13.5px;\r\n line-height:1.62;\r\n}\r\n\r\n.s09__privacy-link{\r\n text-underline-offset:3px;\r\n}\r\n\r\n.s09__legal-warning{\r\n margin:10px 0 0 55px;\r\n\r\n color:rgba(197,178,200,.44);\r\n\r\n font-size:11.5px;\r\n line-height:1.48;\r\n}\r\n\r\n\/* =========================================================\r\n BUTTONS\r\n ========================================================= *\/\r\n.s09__button{\r\n display:inline-flex;\r\n align-items:center;\r\n justify-content:center;\r\n\r\n min-width:180px;\r\n min-height:52px;\r\n\r\n padding:0 24px;\r\n\r\n border:1px solid var(--s09-champagne);\r\n border-radius:10px;\r\n\r\n cursor:pointer;\r\n\r\n color:var(--s09-aubergine);\r\n -webkit-text-fill-color:var(--s09-aubergine);\r\n background:var(--s09-champagne);\r\n\r\n font-size:11px;\r\n line-height:1.2;\r\n font-weight:700;\r\n letter-spacing:.095em;\r\n text-transform:uppercase;\r\n\r\n box-shadow:\r\n inset 0 1px 0 rgba(255,255,255,.24),\r\n 0 16px 34px rgba(8,3,10,.14);\r\n\r\n transition:\r\n transform .34s var(--s09-ease),\r\n color .38s ease,\r\n background-color .38s ease,\r\n border-color .38s ease,\r\n box-shadow .38s ease;\r\n}\r\n\r\n.s09__button:hover,\r\n.s09__button:focus-visible{\r\n transform:translateY(-2px);\r\n\r\n box-shadow:\r\n inset 0 1px 0 rgba(255,255,255,.26),\r\n 0 19px 40px rgba(8,3,10,.18);\r\n}\r\n\r\n.s09__button:active{\r\n transform:translateY(0) scale(.985);\r\n}\r\n\r\n.s09__back{\r\n display:inline-flex;\r\n align-items:center;\r\n justify-content:flex-start;\r\n\r\n min-width:44px;\r\n min-height:44px;\r\n\r\n padding:0;\r\n\r\n border:0;\r\n\r\n cursor:pointer;\r\n\r\n font-size:11px;\r\n line-height:1.2;\r\n font-weight:600;\r\n letter-spacing:.09em;\r\n text-transform:uppercase;\r\n\r\n transition:color .40s ease;\r\n}\r\n\r\n.s09__submit-status{\r\n min-height:1.5em;\r\n margin:15px 0 0;\r\n\r\n color:rgba(247,242,234,.64);\r\n\r\n font-size:13px;\r\n line-height:1.5;\r\n}\r\n\r\n.s09__submit-status.is-error{\r\n color:var(--s09-error);\r\n}\r\n\r\n\/* =========================================================\r\n NO-JS MESSAGE\r\n ========================================================= *\/\r\n.s09__noscript{\r\n margin:\r\n 0\r\n 0\r\n 26px;\r\n\r\n padding:\r\n 14px\r\n 0;\r\n\r\n border-top:1px solid var(--s09-rule);\r\n border-bottom:1px solid var(--s09-rule);\r\n\r\n color:rgba(247,242,234,.66);\r\n\r\n font-size:13px;\r\n line-height:1.55;\r\n}\r\n\r\n\/* =========================================================\r\n LAMINA PASSED-CONTENT DEPTH\r\n Active form step deliberately does NOT receive this filter.\r\n ========================================================= *\/\r\n#lamina-case-submission [data-s09-depth]{\r\n --s09-entry-blur:0px;\r\n --s09-passed-blur:0px;\r\n --s09-depth-opacity:1;\r\n\r\n filter:\r\n blur(\r\n calc(\r\n var(--s09-entry-blur) +\r\n var(--s09-passed-blur)\r\n )\r\n );\r\n\r\n opacity:var(--s09-depth-opacity);\r\n\r\n will-change:filter,opacity;\r\n}\r\n\r\n#lamina-case-submission [data-s09-depth]:hover,\r\n#lamina-case-submission [data-s09-depth]:focus-within{\r\n --s09-passed-blur:0px !important;\r\n --s09-depth-opacity:1 !important;\r\n}\r\n\r\n\/* =========================================================\r\n ONE-TIME SECTION ENTRANCE\r\n ========================================================= *\/\r\n#lamina-case-submission.has-entry .s09__eyebrow{\r\n opacity:0;\r\n transform:translate3d(0,8px,0);\r\n --s09-entry-blur:2.4px;\r\n}\r\n\r\n#lamina-case-submission.has-entry .s09__title-line{\r\n opacity:0;\r\n transform:translate3d(0,100%,0);\r\n --s09-entry-blur:4px;\r\n}\r\n\r\n#lamina-case-submission.has-entry .s09__support,\r\n#lamina-case-submission.has-entry .s09__quiet-line,\r\n#lamina-case-submission.has-entry .s09__clinical{\r\n opacity:0;\r\n transform:translate3d(0,9px,0);\r\n --s09-entry-blur:2.4px;\r\n}\r\n\r\n#lamina-case-submission.has-entry .s09__progress{\r\n opacity:.14;\r\n transform:translate3d(0,6px,0);\r\n}\r\n\r\n#lamina-case-submission.has-entry .s09__progress-fill{\r\n width:0 !important;\r\n}\r\n\r\n#lamina-case-submission.has-entry .s09__intake-label,\r\n#lamina-case-submission.has-entry .s09__step-title,\r\n#lamina-case-submission.has-entry .s09__step-support,\r\n#lamina-case-submission.has-entry .s09__choice-wrap{\r\n opacity:0;\r\n transform:translate3d(0,8px,0);\r\n}\r\n\r\n#lamina-case-submission.has-entry.is-entered .s09__eyebrow{\r\n opacity:1;\r\n transform:none;\r\n --s09-entry-blur:0px;\r\n\r\n transition:\r\n opacity .44s var(--s09-ease) .03s,\r\n transform .50s var(--s09-ease) .03s,\r\n filter .42s ease .03s;\r\n}\r\n\r\n#lamina-case-submission.has-entry.is-entered .s09__title-line{\r\n opacity:1;\r\n transform:none;\r\n --s09-entry-blur:0px;\r\n\r\n transition:\r\n opacity .58s var(--s09-ease),\r\n transform .70s cubic-bezier(.12,.82,.18,1),\r\n filter .46s ease;\r\n}\r\n\r\n#lamina-case-submission.has-entry.is-entered .s09__title-line:nth-child(1){\r\n transition-delay:.07s;\r\n}\r\n\r\n#lamina-case-submission.has-entry.is-entered .s09__title-line:nth-child(2){\r\n transition-delay:.15s;\r\n}\r\n\r\n#lamina-case-submission.has-entry.is-entered .s09__support{\r\n opacity:1;\r\n transform:none;\r\n --s09-entry-blur:0px;\r\n\r\n transition:\r\n opacity .50s var(--s09-ease) .20s,\r\n transform .54s var(--s09-ease) .20s,\r\n filter .44s ease .20s;\r\n}\r\n\r\n#lamina-case-submission.has-entry.is-entered .s09__quiet-line{\r\n opacity:1;\r\n transform:none;\r\n --s09-entry-blur:0px;\r\n\r\n transition:\r\n opacity .48s var(--s09-ease) .27s,\r\n transform .52s var(--s09-ease) .27s,\r\n filter .42s ease .27s;\r\n}\r\n\r\n#lamina-case-submission.has-entry.is-entered .s09__clinical{\r\n opacity:1;\r\n transform:none;\r\n --s09-entry-blur:0px;\r\n\r\n transition:\r\n opacity .48s var(--s09-ease) .34s,\r\n transform .52s var(--s09-ease) .34s,\r\n filter .42s ease .34s;\r\n}\r\n\r\n#lamina-case-submission.has-entry.is-entered .s09__progress{\r\n opacity:1;\r\n transform:none;\r\n\r\n transition:\r\n opacity .50s var(--s09-ease) .23s,\r\n transform .54s var(--s09-ease) .23s;\r\n}\r\n\r\n#lamina-case-submission.has-entry.is-entered .s09__intake-label,\r\n#lamina-case-submission.has-entry.is-entered .s09__step-title,\r\n#lamina-case-submission.has-entry.is-entered .s09__step-support{\r\n opacity:1;\r\n transform:none;\r\n\r\n transition:\r\n opacity .48s var(--s09-ease),\r\n transform .54s var(--s09-ease);\r\n}\r\n\r\n#lamina-case-submission.has-entry.is-entered .s09__intake-label{\r\n transition-delay:.34s;\r\n}\r\n\r\n#lamina-case-submission.has-entry.is-entered .s09__step-title{\r\n transition-delay:.39s;\r\n}\r\n\r\n#lamina-case-submission.has-entry.is-entered .s09__step-support{\r\n transition-delay:.44s;\r\n}\r\n\r\n#lamina-case-submission.has-entry.is-entered .s09__choice-wrap{\r\n opacity:1;\r\n transform:none;\r\n\r\n transition:\r\n opacity .50s var(--s09-ease),\r\n transform .56s var(--s09-ease);\r\n}\r\n\r\n#lamina-case-submission.has-entry.is-entered .s09__choice-wrap:nth-child(1){\r\n transition-delay:.50s;\r\n}\r\n\r\n#lamina-case-submission.has-entry.is-entered .s09__choice-wrap:nth-child(2){\r\n transition-delay:.57s;\r\n}\r\n\r\n\/* =========================================================\r\n TABLET\r\n ========================================================= *\/\r\n@media (min-width:960px) and (max-width:1180px){\r\n .s09__shell{\r\n padding-inline:30px;\r\n }\r\n\r\n .s09__layout{\r\n grid-template-columns:minmax(290px,.38fr) minmax(0,.62fr);\r\n gap:58px;\r\n }\r\n\r\n .s09__title{\r\n font-size:clamp(60px,6vw,80px);\r\n }\r\n\r\n .s09__field-grid{\r\n column-gap:30px;\r\n }\r\n}\r\n\r\n\/* =========================================================\r\n MOBILE \/ PORTRAIT TABLET \u2014 PRIVATE INTAKE\r\n ========================================================= *\/\r\n@media (max-width:959px){\r\n .s09__shell{\r\n padding:\r\n 62px\r\n 20px\r\n 84px;\r\n }\r\n\r\n .s09__layout{\r\n display:block;\r\n width:100%;\r\n }\r\n\r\n .s09__editorial{\r\n padding-top:0;\r\n }\r\n\r\n #lamina-case-submission .s09__title{\r\n max-width:8.2ch;\r\n\r\n font-size:clamp(48px,13.8vw,60px) !important;\r\n }\r\n\r\n #lamina-case-submission .s09__title-line--base{\r\n color:var(--s09-aubergine) !important;\r\n -webkit-text-fill-color:var(--s09-aubergine) !important;\r\n font-style:normal !important;\r\n }\r\n\r\n #lamina-case-submission .s09__title-line--accent{\r\n color:var(--s09-orchid) !important;\r\n -webkit-text-fill-color:var(--s09-orchid) !important;\r\n font-style:italic !important;\r\n }\r\n\r\n .s09__title-line{\r\n line-height:.91;\r\n }\r\n\r\n .s09__title-line + .s09__title-line{\r\n margin-top:-.035em;\r\n }\r\n\r\n .s09__title-line--accent{\r\n margin-top:.034em !important;\r\n padding-bottom:.09em;\r\n }\r\n\r\n .s09__support{\r\n margin-top:19px;\r\n max-width:36ch;\r\n\r\n font-size:15px;\r\n line-height:1.65;\r\n }\r\n\r\n .s09__quiet-line{\r\n display:none;\r\n }\r\n\r\n .s09__clinical{\r\n margin-top:19px;\r\n\r\n font-size:13px;\r\n line-height:1.58;\r\n }\r\n\r\n .s09__form-wrap{\r\n margin-top:28px;\r\n }\r\n\r\n .s09__progress{\r\n margin-bottom:30px;\r\n }\r\n\r\n .s09__progress-labels{\r\n gap:6px;\r\n }\r\n\r\n .s09__progress-item{\r\n font-size:9.8px;\r\n letter-spacing:.045em;\r\n }\r\n\r\n .s09__step-title{\r\n max-width:15ch;\r\n\r\n font-size:clamp(34px,9.4vw,43px);\r\n }\r\n\r\n .s09__step-support{\r\n font-size:14px;\r\n }\r\n\r\n .s09__step-body{\r\n margin-top:28px;\r\n }\r\n\r\n .s09__choice-grid{\r\n display:grid;\r\n grid-template-columns:1fr;\r\n gap:10px;\r\n }\r\n\r\n .s09__choice-wrap + .s09__choice-wrap{\r\n border-inline-start:0;\r\n border-top:0;\r\n }\r\n\r\n .s09__choice{\r\n min-height:138px;\r\n\r\n padding:\r\n 20px\r\n 20px\r\n 18px;\r\n\r\n border-radius:10px;\r\n }\r\n\r\n .s09__choice::before{\r\n margin-bottom:16px;\r\n font-size:9.5px;\r\n }\r\n\r\n .s09__choice::after{\r\n inset-inline-end:17px;\r\n inset-block-start:16px;\r\n width:29px;\r\n height:29px;\r\n }\r\n\r\n .s09__choice-name{\r\n max-width:12ch;\r\n font-size:clamp(29px,8.8vw,38px) !important;\r\n }\r\n\r\n .s09__choice-copy{\r\n max-width:32ch;\r\n margin-top:15px;\r\n font-size:12.5px !important;\r\n }\r\n\r\n .s09__field-grid{\r\n display:block;\r\n }\r\n\r\n .s09__field + .s09__field{\r\n margin-top:24px;\r\n }\r\n\r\n .s09__input,\r\n .s09__select,\r\n .s09__textarea{\r\n font-size:16px;\r\n }\r\n\r\n .s09__textarea{\r\n min-height:122px;\r\n }\r\n\r\n .s09__interest-list{\r\n gap:8px;\r\n }\r\n\r\n #lamina-case-submission .s09__interest-option label{\r\n min-height:40px;\r\n padding-inline:14px;\r\n font-size:10px !important;\r\n }\r\n\r\n .s09__upload-label{\r\n min-height:78px;\r\n }\r\n\r\n .s09__file-previews{\r\n grid-template-columns:repeat(2,minmax(0,1fr));\r\n }\r\n\r\n .s09__review-row{\r\n grid-template-columns:1fr 52px;\r\n grid-template-areas:\r\n \"label edit\"\r\n \"value edit\";\r\n\r\n gap:\r\n 6px\r\n 14px;\r\n }\r\n\r\n .s09__review-label{\r\n grid-area:label;\r\n }\r\n\r\n .s09__review-value{\r\n grid-area:value;\r\n }\r\n\r\n .s09__review-edit{\r\n grid-area:edit;\r\n align-self:center;\r\n }\r\n\r\n .s09__consent-copy{\r\n font-size:13.5px;\r\n }\r\n\r\n .s09__legal-warning{\r\n margin-inline-start:55px;\r\n }\r\n\r\n #lamina-case-submission.is-enhanced .s09__step-actions{\r\n margin-top:32px;\r\n }\r\n\r\n .s09__button{\r\n min-height:54px;\r\n min-width:164px;\r\n }\r\n\r\n .s09__step.is-entering.is-entered{\r\n transition-duration:.34s;\r\n }\r\n}\r\n\r\n@media (max-width:420px){\r\n .s09__shell{\r\n padding-inline:18px;\r\n }\r\n\r\n .s09__progress-labels{\r\n grid-template-columns:repeat(5,1fr);\r\n }\r\n\r\n .s09__progress-item span{\r\n display:none;\r\n }\r\n\r\n .s09__button{\r\n min-width:154px;\r\n }\r\n\r\n .s09__file-previews{\r\n gap:10px;\r\n }\r\n}\r\n\r\n\/* =========================================================\r\n RTL\r\n ========================================================= *\/\r\n[dir=\"rtl\"] #lamina-case-submission{\r\n direction:rtl;\r\n}\r\n\r\n[dir=\"rtl\"] #lamina-case-submission .s09__choice,\r\n[dir=\"rtl\"] #lamina-case-submission .s09__support,\r\n[dir=\"rtl\"] #lamina-case-submission .s09__clinical,\r\n[dir=\"rtl\"] #lamina-case-submission .s09__quiet-line,\r\n[dir=\"rtl\"] #lamina-case-submission .s09__field,\r\n[dir=\"rtl\"] #lamina-case-submission .s09__review,\r\n[dir=\"rtl\"] #lamina-case-submission .s09__consent-copy{\r\n text-align:start;\r\n}\r\n\r\n\/* =========================================================\r\n REDUCED MOTION\r\n ========================================================= *\/\r\n@media (prefers-reduced-motion:reduce){\r\n #lamina-case-submission [data-s09-depth]{\r\n --s09-entry-blur:0px !important;\r\n --s09-passed-blur:0px !important;\r\n --s09-depth-opacity:1 !important;\r\n\r\n filter:none !important;\r\n opacity:1 !important;\r\n }\r\n\r\n #lamina-case-submission.has-entry .s09__eyebrow,\r\n #lamina-case-submission.has-entry .s09__title-line,\r\n #lamina-case-submission.has-entry .s09__support,\r\n #lamina-case-submission.has-entry .s09__quiet-line,\r\n #lamina-case-submission.has-entry .s09__clinical,\r\n #lamina-case-submission.has-entry .s09__progress,\r\n #lamina-case-submission.has-entry .s09__intake-label,\r\n #lamina-case-submission.has-entry .s09__step-title,\r\n #lamina-case-submission.has-entry .s09__step-support,\r\n #lamina-case-submission.has-entry .s09__choice-wrap,\r\n #lamina-case-submission .s09__step{\r\n opacity:1 !important;\r\n transform:none !important;\r\n filter:none !important;\r\n transition:none !important;\r\n }\r\n\r\n #lamina-case-submission .s09__progress-fill,\r\n #lamina-case-submission .s09__choice,\r\n #lamina-case-submission .s09__button,\r\n #lamina-case-submission .s09__answer{\r\n transition:none !important;\r\n }\r\n}\r\n\r\n\/* FINAL MINIMAL CTA TEXT CONTRAST FIX *\/\r\n#lamina-case-submission .s09__button,\r\n#lamina-case-submission .s09__button:hover,\r\n#lamina-case-submission .s09__button:focus,\r\n#lamina-case-submission .s09__button:focus-visible,\r\n#lamina-case-submission .s09__button:active,\r\n#lamina-case-submission .s09__button:visited{\r\n color:#F7F2EA !important;\r\n -webkit-text-fill-color:#F7F2EA !important;\r\n}\r\n\r\n#lamina-case-submission .s09__button *,\r\n#lamina-case-submission .s09__button:hover *,\r\n#lamina-case-submission .s09__button:focus *,\r\n#lamina-case-submission .s09__button:focus-visible *,\r\n#lamina-case-submission .s09__button:active *{\r\n color:#F7F2EA !important;\r\n -webkit-text-fill-color:#F7F2EA !important;\r\n}\r\n\r\n<\/style>\r\n\r\n<section\r\n id=\"lamina-case-submission\"\r\n aria-labelledby=\"lamina-case-submission-title\"\r\n data-lamina-focus-section\r\n>\r\n <div class=\"s09__shell\">\r\n\r\n <div class=\"s09__layout\">\r\n\r\n <header class=\"s09__editorial\">\r\n\r\n <p\r\n class=\"s09__eyebrow\"\r\n data-s09-depth=\"eyebrow\"\r\n >\r\n START FROM HOME\r\n <\/p>\r\n\r\n <h2\r\n class=\"s09__title\"\r\n id=\"lamina-case-submission-title\"\r\n >\r\n <span\r\n class=\"s09__title-line s09__title-line--base\"\r\n data-s09-depth=\"headline\"\r\n >\r\n Tell us\r\n <\/span>\r\n\r\n <span\r\n class=\"s09__title-line s09__title-line--accent\"\r\n data-s09-depth=\"headline\"\r\n >\r\n what you\u2019re<br>considering.\r\n <\/span>\r\n <\/h2>\r\n\r\n <p\r\n class=\"s09__support\"\r\n data-s09-depth=\"copy\"\r\n >\r\n Choose the treatment area you\u2019re interested in and share the information you already have. Lamina can use it to begin the conversation and guide you toward the appropriate next step.\r\n <\/p>\r\n\r\n <p\r\n class=\"s09__quiet-line\"\r\n data-s09-depth=\"copy\"\r\n >\r\n Your first step does not need to start in Istanbul.\r\n <\/p>\r\n\r\n <p\r\n class=\"s09__clinical\"\r\n data-s09-depth=\"copy\"\r\n >\r\n Information submitted online supports an initial review only. Final treatment decisions are made following the appropriate clinical assessment.\r\n <\/p>\r\n\r\n <\/header>\r\n\r\n <div class=\"s09__form-wrap\">\r\n\r\n <form\r\n class=\"s09__form\"\r\n id=\"lamina-case-form\"\r\n method=\"post\"\r\n action=\"{{LAMINA_SECURE_CASE_ENDPOINT}}\"\r\n enctype=\"multipart\/form-data\"\r\n novalidate\r\n data-thank-you-url=\"{{THANK_YOU_URL}}\"\r\n >\r\n\r\n <input\r\n type=\"hidden\"\r\n name=\"_lamina_nonce\"\r\n value=\"{{LAMINA_SECURE_NONCE}}\"\r\n >\r\n\r\n <input type=\"hidden\" name=\"utm_source\" value=\"\">\r\n <input type=\"hidden\" name=\"utm_medium\" value=\"\">\r\n <input type=\"hidden\" name=\"utm_campaign\" value=\"\">\r\n <input type=\"hidden\" name=\"utm_content\" value=\"\">\r\n <input type=\"hidden\" name=\"utm_term\" value=\"\">\r\n <input type=\"hidden\" name=\"gclid\" value=\"\">\r\n <input type=\"hidden\" name=\"fbclid\" value=\"\">\r\n <input type=\"hidden\" name=\"landing_page\" value=\"\">\r\n <input type=\"hidden\" name=\"referrer\" value=\"\">\r\n <input type=\"hidden\" name=\"language\" value=\"\">\r\n <input type=\"hidden\" name=\"discipline\" value=\"\">\r\n <input type=\"hidden\" name=\"consent_version\" value=\"development-placeholder-v1\">\r\n <input type=\"hidden\" name=\"consent_timestamp\" value=\"\">\r\n\r\n <div\r\n aria-hidden=\"true\"\r\n style=\"position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);\"\r\n >\r\n <label>\r\n Leave this field empty\r\n <input\r\n type=\"text\"\r\n name=\"website_confirm\"\r\n tabindex=\"-1\"\r\n autocomplete=\"off\"\r\n >\r\n <\/label>\r\n <\/div>\r\n\r\n <p\r\n class=\"s09__intake-label\"\r\n data-s09-depth=\"ui\"\r\n >\r\n INITIAL ASSESSMENT\r\n <\/p>\r\n\r\n <div\r\n class=\"s09__progress\"\r\n data-s09-depth=\"ui\"\r\n >\r\n <div class=\"s09__progress-top\">\r\n <span\r\n class=\"s09__progress-current\"\r\n data-progress-count\r\n >\r\n 01 \/ 05\r\n <\/span>\r\n\r\n <span\r\n class=\"s09__progress-accessible\"\r\n aria-live=\"polite\"\r\n data-progress-accessible\r\n >\r\n Step 1 of 5: Treatment area.\r\n <\/span>\r\n <\/div>\r\n\r\n <div\r\n class=\"s09__progress-labels\"\r\n aria-hidden=\"true\"\r\n >\r\n <div class=\"s09__progress-item is-active\" data-progress-item=\"1\">\r\n 01 <span>Treatment<\/span>\r\n <\/div>\r\n <div class=\"s09__progress-item\" data-progress-item=\"2\">\r\n 02 <span>Details<\/span>\r\n <\/div>\r\n <div class=\"s09__progress-item\" data-progress-item=\"3\">\r\n 03 <span>Case<\/span>\r\n <\/div>\r\n <div class=\"s09__progress-item\" data-progress-item=\"4\">\r\n 04 <span>Files<\/span>\r\n <\/div>\r\n <div class=\"s09__progress-item\" data-progress-item=\"5\">\r\n 05 <span>Send<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div\r\n class=\"s09__progress-track\"\r\n aria-hidden=\"true\"\r\n >\r\n <div\r\n class=\"s09__progress-fill\"\r\n data-progress-fill\r\n ><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <noscript>\r\n <p class=\"s09__noscript\">\r\n JavaScript is unavailable. The full intake remains below in one linear form. Complete only the Hair or Dental case fields that match the treatment area you select.\r\n <\/p>\r\n <\/noscript>\r\n\r\n <!-- ==================================================\r\n STEP 01 \u2014 TREATMENT AREA\r\n ================================================== -->\r\n <section\r\n class=\"s09__step\"\r\n data-form-step=\"1\"\r\n aria-labelledby=\"s09-step-1-title\"\r\n >\r\n <p class=\"s09__step-kicker\">01 \u2014 TREATMENT AREA<\/p>\r\n\r\n <h3\r\n class=\"s09__step-title\"\r\n id=\"s09-step-1-title\"\r\n tabindex=\"-1\"\r\n >\r\n What would you like us to look at?\r\n <\/h3>\r\n\r\n <p class=\"s09__step-support\">\r\n Choose the area you\u2019re considering. You do not need to know the exact treatment yet.\r\n <\/p>\r\n\r\n <div class=\"s09__step-body\">\r\n <fieldset class=\"s09__choice-group\">\r\n <legend class=\"s09__progress-accessible\">\r\n Choose one treatment area\r\n <\/legend>\r\n\r\n <div class=\"s09__choice-grid\">\r\n\r\n <div class=\"s09__choice-wrap\">\r\n <input\r\n class=\"s09__choice-input\"\r\n type=\"radio\"\r\n name=\"treatment_area\"\r\n id=\"s09-discipline-hair\"\r\n value=\"hair\"\r\n required\r\n >\r\n\r\n <label\r\n class=\"s09__choice\"\r\n for=\"s09-discipline-hair\"\r\n >\r\n <span class=\"s09__choice-name\">\r\n Hair Restoration\r\n <\/span>\r\n\r\n <span class=\"s09__choice-copy\">\r\n Hairline, density and restoration concerns.\r\n <\/span>\r\n <\/label>\r\n <\/div>\r\n\r\n <div class=\"s09__choice-wrap\">\r\n <input\r\n class=\"s09__choice-input\"\r\n type=\"radio\"\r\n name=\"treatment_area\"\r\n id=\"s09-discipline-dental\"\r\n value=\"dental\"\r\n required\r\n >\r\n\r\n <label\r\n class=\"s09__choice\"\r\n for=\"s09-discipline-dental\"\r\n >\r\n <span class=\"s09__choice-name\">\r\n Dental Aesthetics\r\n <\/span>\r\n\r\n <span class=\"s09__choice-copy\">\r\n Smile, restorative and implant-related treatment enquiries.\r\n <\/span>\r\n <\/label>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <p\r\n class=\"s09__error\"\r\n id=\"s09-treatment-area-error\"\r\n data-error-for=\"treatment_area\"\r\n aria-live=\"polite\"\r\n ><\/p>\r\n <\/fieldset>\r\n <\/div>\r\n\r\n <div class=\"s09__step-actions\">\r\n <span aria-hidden=\"true\"><\/span>\r\n\r\n <button\r\n class=\"s09__button\"\r\n type=\"button\"\r\n data-next-step\r\n >\r\n Continue \u2192\r\n <\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ==================================================\r\n STEP 02 \u2014 YOUR DETAILS\r\n ================================================== -->\r\n <section\r\n class=\"s09__step\"\r\n data-form-step=\"2\"\r\n aria-labelledby=\"s09-step-2-title\"\r\n >\r\n <p class=\"s09__step-kicker\">02 \u2014 YOUR DETAILS<\/p>\r\n\r\n <h3\r\n class=\"s09__step-title\"\r\n id=\"s09-step-2-title\"\r\n tabindex=\"-1\"\r\n >\r\n How can the Lamina team reach you?\r\n <\/h3>\r\n\r\n <p class=\"s09__step-support\">\r\n Only the essentials for an initial treatment enquiry.\r\n <\/p>\r\n\r\n <div class=\"s09__step-body\">\r\n <div class=\"s09__field-grid\">\r\n\r\n <div class=\"s09__field\" data-field=\"full_name\">\r\n <label class=\"s09__label\" for=\"s09-full-name\">\r\n Full name\r\n <\/label>\r\n\r\n <input\r\n class=\"s09__input\"\r\n id=\"s09-full-name\"\r\n name=\"full_name\"\r\n type=\"text\"\r\n autocomplete=\"name\"\r\n required\r\n aria-describedby=\"s09-full-name-error\"\r\n >\r\n\r\n <p\r\n class=\"s09__error\"\r\n id=\"s09-full-name-error\"\r\n data-error-for=\"full_name\"\r\n aria-live=\"polite\"\r\n ><\/p>\r\n <\/div>\r\n\r\n <div class=\"s09__field\" data-field=\"country\">\r\n <label class=\"s09__label\" for=\"s09-country\">\r\n Country \/ region\r\n <\/label>\r\n\r\n <select\r\n class=\"s09__select\"\r\n id=\"s09-country\"\r\n name=\"country\"\r\n autocomplete=\"country-name\"\r\n required\r\n aria-describedby=\"s09-country-error\"\r\n >\r\n <option value=\"\">Select country or region<\/option>\r\n <option value=\"AF\">Afghanistan<\/option>\r\n <option value=\"AL\">Albania<\/option>\r\n <option value=\"DZ\">Algeria<\/option>\r\n <option value=\"AS\">American Samoa<\/option>\r\n <option value=\"AD\">Andorra<\/option>\r\n <option value=\"AO\">Angola<\/option>\r\n <option value=\"AI\">Anguilla<\/option>\r\n <option value=\"AQ\">Antarctica<\/option>\r\n <option value=\"AG\">Antigua and Barbuda<\/option>\r\n <option value=\"AR\">Argentina<\/option>\r\n <option value=\"AM\">Armenia<\/option>\r\n <option value=\"AW\">Aruba<\/option>\r\n <option value=\"AU\">Australia<\/option>\r\n <option value=\"AT\">Austria<\/option>\r\n <option value=\"AZ\">Azerbaijan<\/option>\r\n <option value=\"BS\">Bahamas<\/option>\r\n <option value=\"BH\">Bahrain<\/option>\r\n <option value=\"BD\">Bangladesh<\/option>\r\n <option value=\"BB\">Barbados<\/option>\r\n <option value=\"BY\">Belarus<\/option>\r\n <option value=\"BE\">Belgium<\/option>\r\n <option value=\"BZ\">Belize<\/option>\r\n <option value=\"BJ\">Benin<\/option>\r\n <option value=\"BM\">Bermuda<\/option>\r\n <option value=\"BT\">Bhutan<\/option>\r\n <option value=\"BO\">Bolivia, Plurinational State of<\/option>\r\n <option value=\"BQ\">Bonaire, Sint Eustatius and Saba<\/option>\r\n <option value=\"BA\">Bosnia and Herzegovina<\/option>\r\n <option value=\"BW\">Botswana<\/option>\r\n <option value=\"BV\">Bouvet Island<\/option>\r\n <option value=\"BR\">Brazil<\/option>\r\n <option value=\"IO\">British Indian Ocean Territory<\/option>\r\n <option value=\"BN\">Brunei Darussalam<\/option>\r\n <option value=\"BG\">Bulgaria<\/option>\r\n <option value=\"BF\">Burkina Faso<\/option>\r\n <option value=\"BI\">Burundi<\/option>\r\n <option value=\"CV\">Cabo Verde<\/option>\r\n <option value=\"KH\">Cambodia<\/option>\r\n <option value=\"CM\">Cameroon<\/option>\r\n <option value=\"CA\">Canada<\/option>\r\n <option value=\"KY\">Cayman Islands<\/option>\r\n <option value=\"CF\">Central African Republic<\/option>\r\n <option value=\"TD\">Chad<\/option>\r\n <option value=\"CL\">Chile<\/option>\r\n <option value=\"CN\">China<\/option>\r\n <option value=\"CX\">Christmas Island<\/option>\r\n <option value=\"CC\">Cocos (Keeling) Islands<\/option>\r\n <option value=\"CO\">Colombia<\/option>\r\n <option value=\"KM\">Comoros<\/option>\r\n <option value=\"CG\">Congo<\/option>\r\n <option value=\"CD\">Congo, The Democratic Republic of the<\/option>\r\n <option value=\"CK\">Cook Islands<\/option>\r\n <option value=\"CR\">Costa Rica<\/option>\r\n <option value=\"HR\">Croatia<\/option>\r\n <option value=\"CU\">Cuba<\/option>\r\n <option value=\"CW\">Cura\u00e7ao<\/option>\r\n <option value=\"CY\">Cyprus<\/option>\r\n <option value=\"CZ\">Czechia<\/option>\r\n <option value=\"CI\">C\u00f4te d'Ivoire<\/option>\r\n <option value=\"DK\">Denmark<\/option>\r\n <option value=\"DJ\">Djibouti<\/option>\r\n <option value=\"DM\">Dominica<\/option>\r\n <option value=\"DO\">Dominican Republic<\/option>\r\n <option value=\"EC\">Ecuador<\/option>\r\n <option value=\"EG\">Egypt<\/option>\r\n <option value=\"SV\">El Salvador<\/option>\r\n <option value=\"GQ\">Equatorial Guinea<\/option>\r\n <option value=\"ER\">Eritrea<\/option>\r\n <option value=\"EE\">Estonia<\/option>\r\n <option value=\"SZ\">Eswatini<\/option>\r\n <option value=\"ET\">Ethiopia<\/option>\r\n <option value=\"FK\">Falkland Islands (Malvinas)<\/option>\r\n <option value=\"FO\">Faroe Islands<\/option>\r\n <option value=\"FJ\">Fiji<\/option>\r\n <option value=\"FI\">Finland<\/option>\r\n <option value=\"FR\">France<\/option>\r\n <option value=\"GF\">French Guiana<\/option>\r\n <option value=\"PF\">French Polynesia<\/option>\r\n <option value=\"TF\">French Southern Territories<\/option>\r\n <option value=\"GA\">Gabon<\/option>\r\n <option value=\"GM\">Gambia<\/option>\r\n <option value=\"GE\">Georgia<\/option>\r\n <option value=\"DE\">Germany<\/option>\r\n <option value=\"GH\">Ghana<\/option>\r\n <option value=\"GI\">Gibraltar<\/option>\r\n <option value=\"GR\">Greece<\/option>\r\n <option value=\"GL\">Greenland<\/option>\r\n <option value=\"GD\">Grenada<\/option>\r\n <option value=\"GP\">Guadeloupe<\/option>\r\n <option value=\"GU\">Guam<\/option>\r\n <option value=\"GT\">Guatemala<\/option>\r\n <option value=\"GG\">Guernsey<\/option>\r\n <option value=\"GN\">Guinea<\/option>\r\n <option value=\"GW\">Guinea-Bissau<\/option>\r\n <option value=\"GY\">Guyana<\/option>\r\n <option value=\"HT\">Haiti<\/option>\r\n <option value=\"HM\">Heard Island and McDonald Islands<\/option>\r\n <option value=\"VA\">Holy See (Vatican City State)<\/option>\r\n <option value=\"HN\">Honduras<\/option>\r\n <option value=\"HK\">Hong Kong<\/option>\r\n <option value=\"HU\">Hungary<\/option>\r\n <option value=\"IS\">Iceland<\/option>\r\n <option value=\"IN\">India<\/option>\r\n <option value=\"ID\">Indonesia<\/option>\r\n <option value=\"IR\">Iran, Islamic Republic of<\/option>\r\n <option value=\"IQ\">Iraq<\/option>\r\n <option value=\"IE\">Ireland<\/option>\r\n <option value=\"IM\">Isle of Man<\/option>\r\n <option value=\"IL\">Israel<\/option>\r\n <option value=\"IT\">Italy<\/option>\r\n <option value=\"JM\">Jamaica<\/option>\r\n <option value=\"JP\">Japan<\/option>\r\n <option value=\"JE\">Jersey<\/option>\r\n <option value=\"JO\">Jordan<\/option>\r\n <option value=\"KZ\">Kazakhstan<\/option>\r\n <option value=\"KE\">Kenya<\/option>\r\n <option value=\"KI\">Kiribati<\/option>\r\n <option value=\"KP\">Korea, Democratic People's Republic of<\/option>\r\n <option value=\"KR\">Korea, Republic of<\/option>\r\n <option value=\"KW\">Kuwait<\/option>\r\n <option value=\"KG\">Kyrgyzstan<\/option>\r\n <option value=\"LA\">Lao People's Democratic Republic<\/option>\r\n <option value=\"LV\">Latvia<\/option>\r\n <option value=\"LB\">Lebanon<\/option>\r\n <option value=\"LS\">Lesotho<\/option>\r\n <option value=\"LR\">Liberia<\/option>\r\n <option value=\"LY\">Libya<\/option>\r\n <option value=\"LI\">Liechtenstein<\/option>\r\n <option value=\"LT\">Lithuania<\/option>\r\n <option value=\"LU\">Luxembourg<\/option>\r\n <option value=\"MO\">Macao<\/option>\r\n <option value=\"MG\">Madagascar<\/option>\r\n <option value=\"MW\">Malawi<\/option>\r\n <option value=\"MY\">Malaysia<\/option>\r\n <option value=\"MV\">Maldives<\/option>\r\n <option value=\"ML\">Mali<\/option>\r\n <option value=\"MT\">Malta<\/option>\r\n <option value=\"MH\">Marshall Islands<\/option>\r\n <option value=\"MQ\">Martinique<\/option>\r\n <option value=\"MR\">Mauritania<\/option>\r\n <option value=\"MU\">Mauritius<\/option>\r\n <option value=\"YT\">Mayotte<\/option>\r\n <option value=\"MX\">Mexico<\/option>\r\n <option value=\"FM\">Micronesia, Federated States of<\/option>\r\n <option value=\"MD\">Moldova, Republic of<\/option>\r\n <option value=\"MC\">Monaco<\/option>\r\n <option value=\"MN\">Mongolia<\/option>\r\n <option value=\"ME\">Montenegro<\/option>\r\n <option value=\"MS\">Montserrat<\/option>\r\n <option value=\"MA\">Morocco<\/option>\r\n <option value=\"MZ\">Mozambique<\/option>\r\n <option value=\"MM\">Myanmar<\/option>\r\n <option value=\"NA\">Namibia<\/option>\r\n <option value=\"NR\">Nauru<\/option>\r\n <option value=\"NP\">Nepal<\/option>\r\n <option value=\"NL\">Netherlands<\/option>\r\n <option value=\"NC\">New Caledonia<\/option>\r\n <option value=\"NZ\">New Zealand<\/option>\r\n <option value=\"NI\">Nicaragua<\/option>\r\n <option value=\"NE\">Niger<\/option>\r\n <option value=\"NG\">Nigeria<\/option>\r\n <option value=\"NU\">Niue<\/option>\r\n <option value=\"NF\">Norfolk Island<\/option>\r\n <option value=\"MK\">North Macedonia<\/option>\r\n <option value=\"MP\">Northern Mariana Islands<\/option>\r\n <option value=\"NO\">Norway<\/option>\r\n <option value=\"OM\">Oman<\/option>\r\n <option value=\"PK\">Pakistan<\/option>\r\n <option value=\"PW\">Palau<\/option>\r\n <option value=\"PS\">Palestine, State of<\/option>\r\n <option value=\"PA\">Panama<\/option>\r\n <option value=\"PG\">Papua New Guinea<\/option>\r\n <option value=\"PY\">Paraguay<\/option>\r\n <option value=\"PE\">Peru<\/option>\r\n <option value=\"PH\">Philippines<\/option>\r\n <option value=\"PN\">Pitcairn<\/option>\r\n <option value=\"PL\">Poland<\/option>\r\n <option value=\"PT\">Portugal<\/option>\r\n <option value=\"PR\">Puerto Rico<\/option>\r\n <option value=\"QA\">Qatar<\/option>\r\n <option value=\"RO\">Romania<\/option>\r\n <option value=\"RU\">Russian Federation<\/option>\r\n <option value=\"RW\">Rwanda<\/option>\r\n <option value=\"RE\">R\u00e9union<\/option>\r\n <option value=\"BL\">Saint Barth\u00e9lemy<\/option>\r\n <option value=\"SH\">Saint Helena, Ascension and Tristan da Cunha<\/option>\r\n <option value=\"KN\">Saint Kitts and Nevis<\/option>\r\n <option value=\"LC\">Saint Lucia<\/option>\r\n <option value=\"MF\">Saint Martin (French part)<\/option>\r\n <option value=\"PM\">Saint Pierre and Miquelon<\/option>\r\n <option value=\"VC\">Saint Vincent and the Grenadines<\/option>\r\n <option value=\"WS\">Samoa<\/option>\r\n <option value=\"SM\">San Marino<\/option>\r\n <option value=\"ST\">Sao Tome and Principe<\/option>\r\n <option value=\"SA\">Saudi Arabia<\/option>\r\n <option value=\"SN\">Senegal<\/option>\r\n <option value=\"RS\">Serbia<\/option>\r\n <option value=\"SC\">Seychelles<\/option>\r\n <option value=\"SL\">Sierra Leone<\/option>\r\n <option value=\"SG\">Singapore<\/option>\r\n <option value=\"SX\">Sint Maarten (Dutch part)<\/option>\r\n <option value=\"SK\">Slovakia<\/option>\r\n <option value=\"SI\">Slovenia<\/option>\r\n <option value=\"SB\">Solomon Islands<\/option>\r\n <option value=\"SO\">Somalia<\/option>\r\n <option value=\"ZA\">South Africa<\/option>\r\n <option value=\"GS\">South Georgia and the South Sandwich Islands<\/option>\r\n <option value=\"SS\">South Sudan<\/option>\r\n <option value=\"ES\">Spain<\/option>\r\n <option value=\"LK\">Sri Lanka<\/option>\r\n <option value=\"SD\">Sudan<\/option>\r\n <option value=\"SR\">Suriname<\/option>\r\n <option value=\"SJ\">Svalbard and Jan Mayen<\/option>\r\n <option value=\"SE\">Sweden<\/option>\r\n <option value=\"CH\">Switzerland<\/option>\r\n <option value=\"SY\">Syrian Arab Republic<\/option>\r\n <option value=\"TW\">Taiwan, Province of China<\/option>\r\n <option value=\"TJ\">Tajikistan<\/option>\r\n <option value=\"TZ\">Tanzania, United Republic of<\/option>\r\n <option value=\"TH\">Thailand<\/option>\r\n <option value=\"TL\">Timor-Leste<\/option>\r\n <option value=\"TG\">Togo<\/option>\r\n <option value=\"TK\">Tokelau<\/option>\r\n <option value=\"TO\">Tonga<\/option>\r\n <option value=\"TT\">Trinidad and Tobago<\/option>\r\n <option value=\"TN\">Tunisia<\/option>\r\n <option value=\"TM\">Turkmenistan<\/option>\r\n <option value=\"TC\">Turks and Caicos Islands<\/option>\r\n <option value=\"TV\">Tuvalu<\/option>\r\n <option value=\"TR\">T\u00fcrkiye<\/option>\r\n <option value=\"UG\">Uganda<\/option>\r\n <option value=\"UA\">Ukraine<\/option>\r\n <option value=\"AE\">United Arab Emirates<\/option>\r\n <option value=\"GB\">United Kingdom<\/option>\r\n <option value=\"US\">United States<\/option>\r\n <option value=\"UM\">United States Minor Outlying Islands<\/option>\r\n <option value=\"UY\">Uruguay<\/option>\r\n <option value=\"UZ\">Uzbekistan<\/option>\r\n <option value=\"VU\">Vanuatu<\/option>\r\n <option value=\"VE\">Venezuela, Bolivarian Republic of<\/option>\r\n <option value=\"VN\">Viet Nam<\/option>\r\n <option value=\"VG\">Virgin Islands, British<\/option>\r\n <option value=\"VI\">Virgin Islands, U.S.<\/option>\r\n <option value=\"WF\">Wallis and Futuna<\/option>\r\n <option value=\"EH\">Western Sahara<\/option>\r\n <option value=\"YE\">Yemen<\/option>\r\n <option value=\"ZM\">Zambia<\/option>\r\n <option value=\"ZW\">Zimbabwe<\/option>\r\n <option value=\"AX\">\u00c5land Islands<\/option>\r\n <\/select>\r\n\r\n <p\r\n class=\"s09__error\"\r\n id=\"s09-country-error\"\r\n data-error-for=\"country\"\r\n aria-live=\"polite\"\r\n ><\/p>\r\n <\/div>\r\n\r\n <div class=\"s09__field\" data-field=\"phone\">\r\n <label class=\"s09__label\" for=\"s09-phone\">\r\n WhatsApp \/ phone\r\n <\/label>\r\n\r\n <input\r\n class=\"s09__input\"\r\n id=\"s09-phone\"\r\n name=\"phone\"\r\n type=\"tel\"\r\n autocomplete=\"tel\"\r\n inputmode=\"tel\"\r\n placeholder=\"+\"\r\n required\r\n aria-describedby=\"s09-phone-error\"\r\n >\r\n\r\n <p\r\n class=\"s09__error\"\r\n id=\"s09-phone-error\"\r\n data-error-for=\"phone\"\r\n aria-live=\"polite\"\r\n ><\/p>\r\n <\/div>\r\n\r\n <div class=\"s09__field\" data-field=\"email\">\r\n <label class=\"s09__label\" for=\"s09-email\">\r\n Email\r\n <span class=\"s09__label-note\">optional<\/span>\r\n <\/label>\r\n\r\n <input\r\n class=\"s09__input\"\r\n id=\"s09-email\"\r\n name=\"email\"\r\n type=\"email\"\r\n autocomplete=\"email\"\r\n aria-describedby=\"s09-email-error\"\r\n >\r\n\r\n <p\r\n class=\"s09__error\"\r\n id=\"s09-email-error\"\r\n data-error-for=\"email\"\r\n aria-live=\"polite\"\r\n ><\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"s09__step-actions\">\r\n <button\r\n class=\"s09__back\"\r\n type=\"button\"\r\n data-back-step\r\n >\r\n Back\r\n <\/button>\r\n\r\n <button\r\n class=\"s09__button\"\r\n type=\"button\"\r\n data-next-step\r\n >\r\n Continue \u2192\r\n <\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ==================================================\r\n STEP 03 \u2014 YOUR CASE\r\n ================================================== -->\r\n <section\r\n class=\"s09__step\"\r\n data-form-step=\"3\"\r\n aria-labelledby=\"s09-step-3-title\"\r\n >\r\n <p class=\"s09__step-kicker\">03 \u2014 YOUR CASE<\/p>\r\n\r\n <h3\r\n class=\"s09__step-title\"\r\n id=\"s09-step-3-title\"\r\n tabindex=\"-1\"\r\n >\r\n Tell us what you\u2019re considering.\r\n <\/h3>\r\n\r\n <p class=\"s09__step-support\">\r\n You do not need to diagnose yourself. Choose the closest option, or select \u201cNot sure yet.\u201d\r\n <\/p>\r\n\r\n <div class=\"s09__step-body\">\r\n\r\n <div\r\n data-case-branch=\"hair\"\r\n >\r\n <fieldset class=\"s09__choice-group\">\r\n <legend class=\"s09__label\">\r\n What are you considering?\r\n <\/legend>\r\n\r\n <div class=\"s09__interest-list\">\r\n <div class=\"s09__interest-option\">\r\n <input type=\"radio\" name=\"hair_interest\" id=\"s09-hair-fue\" value=\"FUE\">\r\n <label for=\"s09-hair-fue\">FUE<\/label>\r\n <\/div>\r\n\r\n <div class=\"s09__interest-option\">\r\n <input type=\"radio\" name=\"hair_interest\" id=\"s09-hair-dhi\" value=\"DHI\">\r\n <label for=\"s09-hair-dhi\">DHI<\/label>\r\n <\/div>\r\n\r\n <div class=\"s09__interest-option\">\r\n <input type=\"radio\" name=\"hair_interest\" id=\"s09-hair-sapphire\" value=\"Sapphire FUE\">\r\n <label for=\"s09-hair-sapphire\">Sapphire FUE<\/label>\r\n <\/div>\r\n\r\n <div class=\"s09__interest-option\">\r\n <input type=\"radio\" name=\"hair_interest\" id=\"s09-hair-unsure\" value=\"Not sure yet\">\r\n <label for=\"s09-hair-unsure\">Not sure yet<\/label>\r\n <\/div>\r\n <\/div>\r\n <\/fieldset>\r\n <\/div>\r\n\r\n <div\r\n data-case-branch=\"dental\"\r\n >\r\n <fieldset class=\"s09__choice-group\">\r\n <legend class=\"s09__label\">\r\n What are you considering?\r\n <\/legend>\r\n\r\n <div class=\"s09__interest-list\">\r\n <div class=\"s09__interest-option\">\r\n <input type=\"radio\" name=\"dental_interest\" id=\"s09-dental-implants\" value=\"Dental Implants\">\r\n <label for=\"s09-dental-implants\">Dental Implants<\/label>\r\n <\/div>\r\n\r\n <div class=\"s09__interest-option\">\r\n <input type=\"radio\" name=\"dental_interest\" id=\"s09-dental-veneers\" value=\"Veneers\">\r\n <label for=\"s09-dental-veneers\">Veneers<\/label>\r\n <\/div>\r\n\r\n <div class=\"s09__interest-option\">\r\n <input type=\"radio\" name=\"dental_interest\" id=\"s09-dental-smile\" value=\"Smile Design\">\r\n <label for=\"s09-dental-smile\">Smile Design<\/label>\r\n <\/div>\r\n\r\n <div class=\"s09__interest-option\">\r\n <input type=\"radio\" name=\"dental_interest\" id=\"s09-dental-zirconium\" value=\"Zirconium\">\r\n <label for=\"s09-dental-zirconium\">Zirconium<\/label>\r\n <\/div>\r\n\r\n <div class=\"s09__interest-option\">\r\n <input type=\"radio\" name=\"dental_interest\" id=\"s09-dental-unsure\" value=\"Not sure yet\">\r\n <label for=\"s09-dental-unsure\">Not sure yet<\/label>\r\n <\/div>\r\n <\/div>\r\n <\/fieldset>\r\n <\/div>\r\n\r\n <p\r\n class=\"s09__error\"\r\n id=\"s09-case-interest-error\"\r\n data-error-for=\"case_interest\"\r\n aria-live=\"polite\"\r\n ><\/p>\r\n\r\n <div\r\n class=\"s09__field s09__field--full\"\r\n data-field=\"case_note\"\r\n >\r\n <label class=\"s09__label\" for=\"s09-case-note\">\r\n Tell us briefly what you would like to improve\r\n <\/label>\r\n\r\n <textarea\r\n class=\"s09__textarea\"\r\n id=\"s09-case-note\"\r\n name=\"case_note\"\r\n maxlength=\"1000\"\r\n required\r\n placeholder=\"Share anything you think would help us understand what you\u2019re considering.\"\r\n aria-describedby=\"s09-case-note-error\"\r\n ><\/textarea>\r\n\r\n <p\r\n class=\"s09__error\"\r\n id=\"s09-case-note-error\"\r\n data-error-for=\"case_note\"\r\n aria-live=\"polite\"\r\n ><\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"s09__step-actions\">\r\n <button\r\n class=\"s09__back\"\r\n type=\"button\"\r\n data-back-step\r\n >\r\n Back\r\n <\/button>\r\n\r\n <button\r\n class=\"s09__button\"\r\n type=\"button\"\r\n data-next-step\r\n >\r\n Continue \u2192\r\n <\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ==================================================\r\n STEP 04 \u2014 PHOTOS \/ X-RAY\r\n ================================================== -->\r\n <section\r\n class=\"s09__step\"\r\n data-form-step=\"4\"\r\n aria-labelledby=\"s09-step-4-title\"\r\n >\r\n <p class=\"s09__step-kicker\">04 \u2014 PHOTOS \/ X-RAY<\/p>\r\n\r\n <h3\r\n class=\"s09__step-title\"\r\n id=\"s09-step-4-title\"\r\n tabindex=\"-1\"\r\n >\r\n Share what you already have.\r\n <\/h3>\r\n\r\n <p\r\n class=\"s09__step-support\"\r\n data-files-guidance\r\n >\r\n Photos can help the clinic understand your case before you travel. Dental patients may also upload an existing X-ray where relevant.\r\n <\/p>\r\n\r\n <div class=\"s09__step-body\">\r\n\r\n <div class=\"s09__upload\">\r\n <label\r\n class=\"s09__upload-label\"\r\n for=\"s09-files\"\r\n >\r\n <span>\r\n <span class=\"s09__upload-title\">\r\n Add photos \/ X-ray\r\n <\/span>\r\n\r\n <span class=\"s09__upload-meta\">\r\n JPG, PNG, WEBP or PDF. Uploads are optional for this development build.\r\n <\/span>\r\n <\/span>\r\n\r\n <span\r\n class=\"s09__upload-plus\"\r\n aria-hidden=\"true\"\r\n >\r\n +\r\n <\/span>\r\n\r\n <input\r\n class=\"s09__file-input\"\r\n id=\"s09-files\"\r\n name=\"case_files[]\"\r\n type=\"file\"\r\n accept=\"image\/jpeg,image\/png,image\/webp,application\/pdf\"\r\n multiple\r\n aria-describedby=\"s09-file-error\"\r\n >\r\n <\/label>\r\n\r\n <p\r\n class=\"s09__error\"\r\n id=\"s09-file-error\"\r\n data-error-for=\"case_files\"\r\n aria-live=\"polite\"\r\n ><\/p>\r\n\r\n <div\r\n class=\"s09__file-previews\"\r\n data-file-previews\r\n ><\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"s09__step-actions\">\r\n <button\r\n class=\"s09__back\"\r\n type=\"button\"\r\n data-back-step\r\n >\r\n Back\r\n <\/button>\r\n\r\n <button\r\n class=\"s09__button\"\r\n type=\"button\"\r\n data-next-step\r\n >\r\n Continue \u2192\r\n <\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ==================================================\r\n STEP 05 \u2014 REVIEW & SEND\r\n ================================================== -->\r\n <section\r\n class=\"s09__step\"\r\n data-form-step=\"5\"\r\n aria-labelledby=\"s09-step-5-title\"\r\n >\r\n <p class=\"s09__step-kicker\">05 \u2014 REVIEW & SEND<\/p>\r\n\r\n <h3\r\n class=\"s09__step-title\"\r\n id=\"s09-step-5-title\"\r\n tabindex=\"-1\"\r\n >\r\n Ready when you are.\r\n <\/h3>\r\n\r\n <p class=\"s09__step-support\">\r\n Submit your information for an initial review. Lamina will use the details you provide to guide the next conversation about your case.\r\n <\/p>\r\n\r\n <div class=\"s09__step-body\">\r\n\r\n <div class=\"s09__review\">\r\n\r\n <div class=\"s09__review-row\">\r\n <span class=\"s09__review-label\">Treatment area<\/span>\r\n <span class=\"s09__review-value\" data-review=\"discipline\">\u2014<\/span>\r\n <button class=\"s09__review-edit\" type=\"button\" data-edit-step=\"1\">Edit<\/button>\r\n <\/div>\r\n\r\n <div class=\"s09__review-row\">\r\n <span class=\"s09__review-label\">Contact<\/span>\r\n <span class=\"s09__review-value\" data-review=\"contact\">\u2014<\/span>\r\n <button class=\"s09__review-edit\" type=\"button\" data-edit-step=\"2\">Edit<\/button>\r\n <\/div>\r\n\r\n <div class=\"s09__review-row\">\r\n <span class=\"s09__review-label\">Case interest<\/span>\r\n <span class=\"s09__review-value\" data-review=\"interest\">\u2014<\/span>\r\n <button class=\"s09__review-edit\" type=\"button\" data-edit-step=\"3\">Edit<\/button>\r\n <\/div>\r\n\r\n <div class=\"s09__review-row\">\r\n <span class=\"s09__review-label\">Files added<\/span>\r\n <span class=\"s09__review-value\" data-review=\"files\">None<\/span>\r\n <button class=\"s09__review-edit\" type=\"button\" data-edit-step=\"4\">Edit<\/button>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"s09__consent\">\r\n <div class=\"s09__consent-control\">\r\n <input\r\n id=\"s09-processing-consent\"\r\n name=\"processing_consent\"\r\n type=\"checkbox\"\r\n value=\"yes\"\r\n required\r\n aria-describedby=\"s09-consent-error\"\r\n >\r\n <\/div>\r\n\r\n <p class=\"s09__consent-copy\">\r\n I have read the\r\n <a\r\n class=\"s09__privacy-link\"\r\n href=\"{{PRIVACY_NOTICE_URL}}\"\r\n >\r\n Privacy Notice\r\n <\/a>\r\n and consent to the processing of the information and health-related materials I submit for the purpose of responding to my treatment enquiry.\r\n <\/p>\r\n <\/div>\r\n\r\n <p class=\"s09__legal-warning\">\r\n Development consent placeholder \u2014 replace with legally approved wording before publication.\r\n <\/p>\r\n\r\n <p\r\n class=\"s09__error\"\r\n id=\"s09-consent-error\"\r\n data-error-for=\"processing_consent\"\r\n aria-live=\"polite\"\r\n ><\/p>\r\n\r\n <p\r\n class=\"s09__submit-status\"\r\n data-submit-status\r\n role=\"status\"\r\n aria-live=\"polite\"\r\n ><\/p>\r\n\r\n <\/div>\r\n\r\n <div class=\"s09__step-actions\">\r\n <button\r\n class=\"s09__back\"\r\n type=\"button\"\r\n data-back-step\r\n >\r\n Back\r\n <\/button>\r\n\r\n <button\r\n class=\"s09__button\"\r\n type=\"submit\"\r\n data-submit-button\r\n >\r\n Send my case \u2192\r\n <\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n <\/form>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(() => {\r\n\r\n const root =\r\n document.getElementById(\r\n 'lamina-case-submission'\r\n );\r\n\r\n\r\n const form =\r\n document.getElementById(\r\n 'lamina-case-form'\r\n );\r\n\r\n\r\n if (\r\n !root ||\r\n !form ||\r\n root.dataset.caseSubmissionReady ===\r\n 'true'\r\n ) return;\r\n\r\n\r\n root.dataset.caseSubmissionReady =\r\n 'true';\r\n\r\n\r\n root.classList.add(\r\n 'is-enhanced'\r\n );\r\n\r\n\r\n const reducedMotion =\r\n window.matchMedia(\r\n '(prefers-reduced-motion: reduce)'\r\n );\r\n\r\n\r\n const mobileQuery =\r\n window.matchMedia(\r\n '(max-width:959px)'\r\n );\r\n\r\n\r\n const state =\r\n {\r\n discipline:'',\r\n currentStep:1,\r\n contact:{\r\n fullName:'',\r\n country:'',\r\n phone:'',\r\n email:''\r\n },\r\n caseDetails:{\r\n hairInterest:'',\r\n dentalInterest:'',\r\n note:''\r\n },\r\n uploads:[],\r\n consents:{\r\n processing:false\r\n },\r\n submitting:false\r\n };\r\n\r\n\r\n const steps =\r\n [\r\n ...form.querySelectorAll(\r\n '[data-form-step]'\r\n )\r\n ];\r\n\r\n\r\n const progressItems =\r\n [\r\n ...form.querySelectorAll(\r\n '[data-progress-item]'\r\n )\r\n ];\r\n\r\n\r\n const progressCount =\r\n form.querySelector(\r\n '[data-progress-count]'\r\n );\r\n\r\n\r\n const progressAccessible =\r\n form.querySelector(\r\n '[data-progress-accessible]'\r\n );\r\n\r\n\r\n const progressFill =\r\n form.querySelector(\r\n '[data-progress-fill]'\r\n );\r\n\r\n\r\n const disciplineInputs =\r\n [\r\n ...form.querySelectorAll(\r\n 'input[name=\"treatment_area\"]'\r\n )\r\n ];\r\n\r\n\r\n const caseBranches =\r\n [\r\n ...form.querySelectorAll(\r\n '[data-case-branch]'\r\n )\r\n ];\r\n\r\n\r\n const fileInput =\r\n form.querySelector(\r\n '#s09-files'\r\n );\r\n\r\n\r\n const filePreviews =\r\n form.querySelector(\r\n '[data-file-previews]'\r\n );\r\n\r\n\r\n const fileGuidance =\r\n form.querySelector(\r\n '[data-files-guidance]'\r\n );\r\n\r\n\r\n const submitButton =\r\n form.querySelector(\r\n '[data-submit-button]'\r\n );\r\n\r\n\r\n const submitStatus =\r\n form.querySelector(\r\n '[data-submit-status]'\r\n );\r\n\r\n\r\n const MAX_FILES =\r\n 6;\r\n\r\n\r\n const MAX_FILE_BYTES =\r\n 8 *\r\n 1024 *\r\n 1024;\r\n\r\n\r\n const allowedTypes =\r\n new Set([\r\n 'image\/jpeg',\r\n 'image\/png',\r\n 'image\/webp',\r\n 'application\/pdf'\r\n ]);\r\n\r\n\r\n const stepNames =\r\n {\r\n 1:'Treatment area',\r\n 2:'Your details',\r\n 3:'Your case',\r\n 4:'Photos \/ X-ray',\r\n 5:'Review & send'\r\n };\r\n\r\n\r\n let transitionToken =\r\n 0;\r\n\r\n\r\n let entrancePlayed =\r\n false;\r\n\r\n\r\n let entranceObserver =\r\n null;\r\n\r\n\r\n let depthTicking =\r\n false;\r\n\r\n\r\n let depthLayers =\r\n [];\r\n\r\n\r\n function clamp(\r\n value,\r\n min,\r\n max\r\n ){\r\n return Math.min(\r\n max,\r\n Math.max(\r\n min,\r\n value\r\n )\r\n );\r\n }\r\n\r\n\r\n function escapeHTML(\r\n value\r\n ){\r\n return String(\r\n value ?? ''\r\n )\r\n .replaceAll('&','&')\r\n .replaceAll('<','<')\r\n .replaceAll('>','>')\r\n .replaceAll('\"','"')\r\n .replaceAll(\"'\",''');\r\n }\r\n\r\n\r\n function currentStepElement(){\r\n return steps.find(\r\n step =>\r\n Number(\r\n step.dataset.formStep\r\n ) ===\r\n state.currentStep\r\n );\r\n }\r\n\r\n\r\n function updateProgress(){\r\n const percentage =\r\n (\r\n (\r\n state.currentStep -\r\n 1\r\n ) \/\r\n 4\r\n ) *\r\n 100;\r\n\r\n\r\n progressCount.textContent =\r\n String(\r\n state.currentStep\r\n ).padStart(\r\n 2,\r\n '0'\r\n ) +\r\n ' \/ 05';\r\n\r\n\r\n progressAccessible.textContent =\r\n 'Step ' +\r\n state.currentStep +\r\n ' of 5: ' +\r\n stepNames[\r\n state.currentStep\r\n ] +\r\n '.';\r\n\r\n\r\n progressFill.style.setProperty(\r\n '--s09-progress',\r\n percentage +\r\n '%'\r\n );\r\n\r\n\r\n progressItems.forEach(\r\n item => {\r\n const step =\r\n Number(\r\n item.dataset.progressItem\r\n );\r\n\r\n\r\n item.classList.toggle(\r\n 'is-complete',\r\n step <\r\n state.currentStep\r\n );\r\n\r\n\r\n item.classList.toggle(\r\n 'is-active',\r\n step ===\r\n state.currentStep\r\n );\r\n }\r\n );\r\n }\r\n\r\n\r\n function setFieldError(\r\n name,\r\n message\r\n ){\r\n const error =\r\n form.querySelector(\r\n '[data-error-for=\"' +\r\n CSS.escape(\r\n name\r\n ) +\r\n '\"]'\r\n );\r\n\r\n\r\n if (\r\n error\r\n ){\r\n error.textContent =\r\n message || '';\r\n }\r\n\r\n\r\n const field =\r\n form.querySelector(\r\n '[data-field=\"' +\r\n CSS.escape(\r\n name\r\n ) +\r\n '\"]'\r\n );\r\n\r\n\r\n if (\r\n field\r\n ){\r\n field.setAttribute(\r\n 'aria-invalid',\r\n message\r\n ? 'true'\r\n : 'false'\r\n );\r\n }\r\n }\r\n\r\n\r\n function clearStepErrors(\r\n step\r\n ){\r\n step\r\n .querySelectorAll(\r\n '.s09__error'\r\n )\r\n .forEach(\r\n error => {\r\n error.textContent =\r\n '';\r\n }\r\n );\r\n\r\n\r\n step\r\n .querySelectorAll(\r\n '[data-field]'\r\n )\r\n .forEach(\r\n field => {\r\n field.setAttribute(\r\n 'aria-invalid',\r\n 'false'\r\n );\r\n }\r\n );\r\n }\r\n\r\n\r\n function validatePhone(\r\n value\r\n ){\r\n const normalized =\r\n value.replace(\r\n \/[\\s().-]\/g,\r\n ''\r\n );\r\n\r\n\r\n return \/^\\+?[0-9]{7,16}$\/.test(\r\n normalized\r\n );\r\n }\r\n\r\n\r\n function normalizePhone(\r\n value\r\n ){\r\n const cleaned =\r\n String(\r\n value ||\r\n ''\r\n )\r\n .trim()\r\n .replace(\r\n \/[^0-9+]\/g,\r\n ''\r\n );\r\n\r\n\r\n const plus =\r\n cleaned.startsWith(\r\n '+'\r\n )\r\n ? '+'\r\n : '';\r\n\r\n\r\n const digits =\r\n cleaned.replace(\r\n \/\\D\/g,\r\n ''\r\n );\r\n\r\n\r\n return plus + digits;\r\n }\r\n\r\n\r\n function validateStep(\r\n stepNumber\r\n ){\r\n const step =\r\n steps.find(\r\n item =>\r\n Number(\r\n item.dataset.formStep\r\n ) ===\r\n stepNumber\r\n );\r\n\r\n\r\n if (\r\n !step\r\n ) return true;\r\n\r\n\r\n clearStepErrors(\r\n step\r\n );\r\n\r\n\r\n let firstInvalid =\r\n null;\r\n\r\n\r\n function fail(\r\n control,\r\n name,\r\n message\r\n ){\r\n if (\r\n !firstInvalid\r\n ){\r\n firstInvalid =\r\n control;\r\n }\r\n\r\n\r\n setFieldError(\r\n name,\r\n message\r\n );\r\n\r\n\r\n control?.setAttribute(\r\n 'aria-invalid',\r\n 'true'\r\n );\r\n }\r\n\r\n\r\n if (\r\n stepNumber ===\r\n 1\r\n ){\r\n const selected =\r\n disciplineInputs.find(\r\n input =>\r\n input.checked\r\n );\r\n\r\n\r\n if (\r\n !selected\r\n ){\r\n fail(\r\n disciplineInputs[0],\r\n 'treatment_area',\r\n 'Please choose Hair Restoration or Dental Aesthetics.'\r\n );\r\n }\r\n }\r\n\r\n\r\n if (\r\n stepNumber ===\r\n 2\r\n ){\r\n const fullName =\r\n form.elements.full_name;\r\n\r\n\r\n const country =\r\n form.elements.country;\r\n\r\n\r\n const phone =\r\n form.elements.phone;\r\n\r\n\r\n const email =\r\n form.elements.email;\r\n\r\n\r\n if (\r\n !fullName.value.trim()\r\n ){\r\n fail(\r\n fullName,\r\n 'full_name',\r\n 'Please enter your full name.'\r\n );\r\n }\r\n\r\n\r\n if (\r\n !country.value\r\n ){\r\n fail(\r\n country,\r\n 'country',\r\n 'Please select your country or region.'\r\n );\r\n }\r\n\r\n\r\n if (\r\n !phone.value.trim()\r\n ){\r\n fail(\r\n phone,\r\n 'phone',\r\n 'Please enter your WhatsApp or phone number.'\r\n );\r\n }else if(\r\n !validatePhone(\r\n phone.value\r\n )\r\n ){\r\n fail(\r\n phone,\r\n 'phone',\r\n 'Please enter a valid international phone number.'\r\n );\r\n }\r\n\r\n\r\n if (\r\n email.value &&\r\n !email.checkValidity()\r\n ){\r\n fail(\r\n email,\r\n 'email',\r\n 'Please enter a valid email address.'\r\n );\r\n }\r\n }\r\n\r\n\r\n if (\r\n stepNumber ===\r\n 3\r\n ){\r\n const note =\r\n form.elements.case_note;\r\n\r\n\r\n const interest =\r\n state.discipline ===\r\n 'hair'\r\n ? form.querySelector(\r\n 'input[name=\"hair_interest\"]:checked'\r\n )\r\n : form.querySelector(\r\n 'input[name=\"dental_interest\"]:checked'\r\n );\r\n\r\n\r\n if (\r\n !interest\r\n ){\r\n const firstInterest =\r\n state.discipline ===\r\n 'hair'\r\n ? form.querySelector(\r\n 'input[name=\"hair_interest\"]'\r\n )\r\n : form.querySelector(\r\n 'input[name=\"dental_interest\"]'\r\n );\r\n\r\n\r\n fail(\r\n firstInterest,\r\n 'case_interest',\r\n 'Please choose the closest treatment option, or select \u201cNot sure yet.\u201d'\r\n );\r\n }\r\n\r\n\r\n if (\r\n !note.value.trim()\r\n ){\r\n fail(\r\n note,\r\n 'case_note',\r\n 'Please share a short note about what you would like us to review.'\r\n );\r\n }\r\n }\r\n\r\n\r\n if (\r\n stepNumber ===\r\n 5\r\n ){\r\n const consent =\r\n form.elements.processing_consent;\r\n\r\n\r\n if (\r\n !consent.checked\r\n ){\r\n fail(\r\n consent,\r\n 'processing_consent',\r\n 'Please accept the required Privacy Notice consent before sending your case.'\r\n );\r\n }\r\n }\r\n\r\n\r\n if (\r\n firstInvalid\r\n ){\r\n firstInvalid.focus({\r\n preventScroll:true\r\n });\r\n\r\n\r\n const rect =\r\n firstInvalid.getBoundingClientRect();\r\n\r\n\r\n if (\r\n rect.top <\r\n 80 ||\r\n rect.bottom >\r\n window.innerHeight -\r\n 24\r\n ){\r\n firstInvalid.scrollIntoView({\r\n block:'center',\r\n behavior:\r\n reducedMotion.matches\r\n ? 'auto'\r\n : 'smooth'\r\n });\r\n }\r\n\r\n\r\n return false;\r\n }\r\n\r\n\r\n return true;\r\n }\r\n\r\n\r\n function syncStateFromForm(){\r\n const selectedDiscipline =\r\n disciplineInputs.find(\r\n input =>\r\n input.checked\r\n );\r\n\r\n\r\n state.discipline =\r\n selectedDiscipline?.value ||\r\n '';\r\n\r\n\r\n form.elements.discipline.value =\r\n state.discipline;\r\n\r\n\r\n state.contact.fullName =\r\n form.elements.full_name.value.trim();\r\n\r\n\r\n state.contact.country =\r\n form.elements.country.value;\r\n\r\n\r\n state.contact.phone =\r\n form.elements.phone.value.trim();\r\n\r\n\r\n state.contact.email =\r\n form.elements.email.value.trim();\r\n\r\n\r\n state.caseDetails.hairInterest =\r\n form.querySelector(\r\n 'input[name=\"hair_interest\"]:checked'\r\n )?.value ||\r\n '';\r\n\r\n\r\n state.caseDetails.dentalInterest =\r\n form.querySelector(\r\n 'input[name=\"dental_interest\"]:checked'\r\n )?.value ||\r\n '';\r\n\r\n\r\n state.caseDetails.note =\r\n form.elements.case_note.value.trim();\r\n\r\n\r\n state.consents.processing =\r\n form.elements.processing_consent.checked;\r\n }\r\n\r\n\r\n function updateCaseBranch(){\r\n caseBranches.forEach(\r\n branch => {\r\n const relevant =\r\n branch.dataset.caseBranch ===\r\n state.discipline;\r\n\r\n\r\n if (\r\n root.classList.contains(\r\n 'is-enhanced'\r\n )\r\n ){\r\n branch.hidden =\r\n !relevant;\r\n }else{\r\n branch.hidden =\r\n false;\r\n }\r\n\r\n\r\n branch\r\n .querySelectorAll(\r\n 'input'\r\n )\r\n .forEach(\r\n input => {\r\n input.disabled =\r\n root.classList.contains(\r\n 'is-enhanced'\r\n )\r\n ? !relevant\r\n : false;\r\n }\r\n );\r\n }\r\n );\r\n\r\n\r\n if (\r\n state.discipline ===\r\n 'hair'\r\n ){\r\n fileGuidance.textContent =\r\n 'Upload clear photos that show the area you would like us to review. Photos are optional in this initial intake.';\r\n }else if(\r\n state.discipline ===\r\n 'dental'\r\n ){\r\n fileGuidance.textContent =\r\n 'Upload clear dental \/ smile photos and, if available, an existing dental X-ray. An X-ray is not required for this initial intake.';\r\n }else{\r\n fileGuidance.textContent =\r\n 'Photos can help the clinic understand your case before you travel. Dental patients may also upload an existing X-ray where relevant.';\r\n }\r\n }\r\n\r\n\r\n function updateReview(){\r\n syncStateFromForm();\r\n\r\n\r\n const disciplineLabel =\r\n state.discipline ===\r\n 'hair'\r\n ? 'Hair Restoration'\r\n : state.discipline ===\r\n 'dental'\r\n ? 'Dental Aesthetics'\r\n : '\u2014';\r\n\r\n\r\n const countrySelect =\r\n form.elements.country;\r\n\r\n\r\n const countryText =\r\n countrySelect.options[\r\n countrySelect.selectedIndex\r\n ]?.text ||\r\n '';\r\n\r\n\r\n const contactParts =\r\n [\r\n state.contact.fullName,\r\n countryText,\r\n state.contact.phone,\r\n state.contact.email\r\n ].filter(\r\n Boolean\r\n );\r\n\r\n\r\n const interest =\r\n state.discipline ===\r\n 'hair'\r\n ? (\r\n state.caseDetails.hairInterest ||\r\n 'Not specified'\r\n )\r\n : (\r\n state.caseDetails.dentalInterest ||\r\n 'Not specified'\r\n );\r\n\r\n\r\n form.querySelector(\r\n '[data-review=\"discipline\"]'\r\n ).textContent =\r\n disciplineLabel;\r\n\r\n\r\n form.querySelector(\r\n '[data-review=\"contact\"]'\r\n ).textContent =\r\n contactParts.length\r\n ? contactParts.join(' \u00b7 ')\r\n : '\u2014';\r\n\r\n\r\n form.querySelector(\r\n '[data-review=\"interest\"]'\r\n ).textContent =\r\n interest;\r\n\r\n\r\n form.querySelector(\r\n '[data-review=\"files\"]'\r\n ).textContent =\r\n state.uploads.length\r\n ? (\r\n state.uploads.length +\r\n (\r\n state.uploads.length ===\r\n 1\r\n ? ' file'\r\n : ' files'\r\n )\r\n )\r\n : 'None';\r\n }\r\n\r\n\r\n function focusStep(\r\n step\r\n ){\r\n const heading =\r\n step.querySelector(\r\n '.s09__step-title'\r\n );\r\n\r\n\r\n if (\r\n !heading\r\n ) return;\r\n\r\n\r\n heading.focus({\r\n preventScroll:true\r\n });\r\n\r\n\r\n if (\r\n !mobileQuery.matches\r\n ) return;\r\n\r\n\r\n const rect =\r\n heading.getBoundingClientRect();\r\n\r\n\r\n const topLimit =\r\n 88;\r\n\r\n\r\n const bottomLimit =\r\n window.innerHeight *\r\n .70;\r\n\r\n\r\n if (\r\n rect.top <\r\n topLimit ||\r\n rect.bottom >\r\n bottomLimit\r\n ){\r\n heading.scrollIntoView({\r\n block:'start',\r\n behavior:\r\n reducedMotion.matches\r\n ? 'auto'\r\n : 'smooth'\r\n });\r\n }\r\n }\r\n\r\n\r\n function showStep(\r\n nextStep,\r\n {\r\n validateCurrent =\r\n false\r\n } =\r\n {}\r\n ){\r\n nextStep =\r\n clamp(\r\n Number(\r\n nextStep\r\n ),\r\n 1,\r\n 5\r\n );\r\n\r\n\r\n if (\r\n validateCurrent &&\r\n !validateStep(\r\n state.currentStep\r\n )\r\n ){\r\n return;\r\n }\r\n\r\n\r\n syncStateFromForm();\r\n\r\n\r\n if (\r\n state.currentStep ===\r\n 1\r\n ){\r\n updateCaseBranch();\r\n }\r\n\r\n\r\n if (\r\n nextStep ===\r\n 5\r\n ){\r\n updateReview();\r\n }\r\n\r\n\r\n const current =\r\n currentStepElement();\r\n\r\n\r\n const incoming =\r\n steps.find(\r\n step =>\r\n Number(\r\n step.dataset.formStep\r\n ) ===\r\n nextStep\r\n );\r\n\r\n\r\n if (\r\n !incoming ||\r\n incoming ===\r\n current\r\n ){\r\n return;\r\n }\r\n\r\n\r\n const token =\r\n ++transitionToken;\r\n\r\n\r\n document.activeElement?.blur?.();\r\n\r\n\r\n if (\r\n reducedMotion.matches\r\n ){\r\n steps.forEach(\r\n step => {\r\n step.hidden =\r\n step !==\r\n incoming;\r\n }\r\n );\r\n\r\n\r\n state.currentStep =\r\n nextStep;\r\n\r\n\r\n updateProgress();\r\n focusStep(\r\n incoming\r\n );\r\n requestDepthUpdate();\r\n\r\n\r\n return;\r\n }\r\n\r\n\r\n current?.classList.add(\r\n 'is-leaving'\r\n );\r\n\r\n\r\n window.setTimeout(\r\n () => {\r\n if (\r\n token !==\r\n transitionToken\r\n ){\r\n return;\r\n }\r\n\r\n\r\n if (\r\n current\r\n ){\r\n current.hidden =\r\n true;\r\n\r\n\r\n current.classList.remove(\r\n 'is-leaving'\r\n );\r\n }\r\n\r\n\r\n incoming.hidden =\r\n false;\r\n\r\n\r\n incoming.classList.add(\r\n 'is-entering'\r\n );\r\n\r\n\r\n state.currentStep =\r\n nextStep;\r\n\r\n\r\n updateProgress();\r\n\r\n\r\n if (\r\n nextStep ===\r\n 5\r\n ){\r\n updateReview();\r\n }\r\n\r\n\r\n requestAnimationFrame(\r\n () => {\r\n if (\r\n token !==\r\n transitionToken\r\n ){\r\n return;\r\n }\r\n\r\n\r\n incoming.classList.add(\r\n 'is-entered'\r\n );\r\n\r\n\r\n requestAnimationFrame(\r\n () => {\r\n if (\r\n token !==\r\n transitionToken\r\n ){\r\n return;\r\n }\r\n\r\n\r\n incoming.classList.remove(\r\n 'is-entering',\r\n 'is-entered'\r\n );\r\n\r\n\r\n focusStep(\r\n incoming\r\n );\r\n\r\n\r\n requestDepthUpdate();\r\n }\r\n );\r\n }\r\n );\r\n },\r\n 185\r\n );\r\n }\r\n\r\n\r\n disciplineInputs.forEach(\r\n input => {\r\n input.addEventListener(\r\n 'change',\r\n () => {\r\n const previous =\r\n state.discipline;\r\n\r\n\r\n state.discipline =\r\n input.value;\r\n\r\n\r\n form.elements.discipline.value =\r\n state.discipline;\r\n\r\n\r\n if (\r\n previous &&\r\n previous !==\r\n state.discipline\r\n ){\r\n \/*\r\n Prevent stale irrelevant branch data from being submitted.\r\n The hidden branch inputs are disabled by updateCaseBranch().\r\n *\/\r\n updateCaseBranch();\r\n }\r\n\r\n\r\n form\r\n .querySelectorAll(\r\n '.s09__choice'\r\n )\r\n .forEach(\r\n choice => {\r\n const radio =\r\n document.getElementById(\r\n choice.getAttribute(\r\n 'for'\r\n )\r\n );\r\n\r\n\r\n choice.classList.toggle(\r\n 'is-selected',\r\n Boolean(\r\n radio?.checked\r\n )\r\n );\r\n }\r\n );\r\n\r\n\r\n setFieldError(\r\n 'treatment_area',\r\n ''\r\n );\r\n }\r\n );\r\n }\r\n );\r\n\r\n\r\n form\r\n .querySelectorAll(\r\n 'input[name=\"hair_interest\"], input[name=\"dental_interest\"]'\r\n )\r\n .forEach(\r\n input => {\r\n input.addEventListener(\r\n 'change',\r\n () => {\r\n setFieldError(\r\n 'case_interest',\r\n ''\r\n );\r\n }\r\n );\r\n }\r\n );\r\n\r\n\r\n form\r\n .querySelectorAll(\r\n '[data-next-step]'\r\n )\r\n .forEach(\r\n button => {\r\n button.addEventListener(\r\n 'click',\r\n () => {\r\n showStep(\r\n state.currentStep +\r\n 1,\r\n {\r\n validateCurrent:true\r\n }\r\n );\r\n }\r\n );\r\n }\r\n );\r\n\r\n\r\n form\r\n .querySelectorAll(\r\n '[data-back-step]'\r\n )\r\n .forEach(\r\n button => {\r\n button.addEventListener(\r\n 'click',\r\n () => {\r\n showStep(\r\n state.currentStep -\r\n 1\r\n );\r\n }\r\n );\r\n }\r\n );\r\n\r\n\r\n form\r\n .querySelectorAll(\r\n '[data-edit-step]'\r\n )\r\n .forEach(\r\n button => {\r\n button.addEventListener(\r\n 'click',\r\n () => {\r\n showStep(\r\n Number(\r\n button.dataset.editStep\r\n )\r\n );\r\n }\r\n );\r\n }\r\n );\r\n\r\n\r\n \/* =======================================================\r\n FILES\r\n ======================================================= *\/\r\n function fileError(\r\n message\r\n ){\r\n setFieldError(\r\n 'case_files',\r\n message\r\n );\r\n }\r\n\r\n\r\n function revokePreviewURL(\r\n item\r\n ){\r\n if (\r\n item?.previewUrl\r\n ){\r\n URL.revokeObjectURL(\r\n item.previewUrl\r\n );\r\n }\r\n }\r\n\r\n\r\n function rebuildFileInput(){\r\n \/*\r\n DataTransfer is widely available in current desktop\/mobile browsers.\r\n If unavailable, the UI state remains authoritative for the front-end\r\n but the backend integration must verify the actual multipart payload.\r\n *\/\r\n if (\r\n typeof DataTransfer ===\r\n 'undefined'\r\n ){\r\n return;\r\n }\r\n\r\n\r\n const dt =\r\n new DataTransfer();\r\n\r\n\r\n state.uploads.forEach(\r\n item => {\r\n dt.items.add(\r\n item.file\r\n );\r\n }\r\n );\r\n\r\n\r\n fileInput.files =\r\n dt.files;\r\n }\r\n\r\n\r\n function renderFiles(){\r\n filePreviews.innerHTML =\r\n '';\r\n\r\n\r\n state.uploads.forEach(\r\n (\r\n item,\r\n index\r\n ) => {\r\n const article =\r\n document.createElement(\r\n 'article'\r\n );\r\n\r\n\r\n article.className =\r\n 's09__file-preview';\r\n\r\n\r\n const thumb =\r\n document.createElement(\r\n 'div'\r\n );\r\n\r\n\r\n thumb.className =\r\n 's09__file-thumb';\r\n\r\n\r\n if (\r\n item.file.type.startsWith(\r\n 'image\/'\r\n )\r\n ){\r\n const image =\r\n document.createElement(\r\n 'img'\r\n );\r\n\r\n\r\n image.alt =\r\n 'Selected upload preview ' +\r\n (\r\n index +\r\n 1\r\n );\r\n\r\n\r\n image.src =\r\n item.previewUrl;\r\n\r\n\r\n thumb.appendChild(\r\n image\r\n );\r\n }else{\r\n const pdf =\r\n document.createElement(\r\n 'div'\r\n );\r\n\r\n\r\n pdf.className =\r\n 's09__file-pdf';\r\n\r\n\r\n pdf.textContent =\r\n 'PDF';\r\n\r\n\r\n thumb.appendChild(\r\n pdf\r\n );\r\n }\r\n\r\n\r\n const row =\r\n document.createElement(\r\n 'div'\r\n );\r\n\r\n\r\n row.className =\r\n 's09__file-row';\r\n\r\n\r\n const name =\r\n document.createElement(\r\n 'span'\r\n );\r\n\r\n\r\n name.className =\r\n 's09__file-name';\r\n\r\n\r\n name.textContent =\r\n item.file.name;\r\n\r\n\r\n const remove =\r\n document.createElement(\r\n 'button'\r\n );\r\n\r\n\r\n remove.type =\r\n 'button';\r\n\r\n\r\n remove.className =\r\n 's09__remove';\r\n\r\n\r\n remove.textContent =\r\n 'Remove';\r\n\r\n\r\n remove.setAttribute(\r\n 'aria-label',\r\n 'Remove photo or file ' +\r\n (\r\n index +\r\n 1\r\n ) +\r\n ': ' +\r\n item.file.name\r\n );\r\n\r\n\r\n remove.addEventListener(\r\n 'click',\r\n () => {\r\n revokePreviewURL(\r\n state.uploads[\r\n index\r\n ]\r\n );\r\n\r\n\r\n state.uploads.splice(\r\n index,\r\n 1\r\n );\r\n\r\n\r\n rebuildFileInput();\r\n renderFiles();\r\n updateReview();\r\n }\r\n );\r\n\r\n\r\n row.append(\r\n name,\r\n remove\r\n );\r\n\r\n\r\n article.append(\r\n thumb,\r\n row\r\n );\r\n\r\n\r\n filePreviews.appendChild(\r\n article\r\n );\r\n }\r\n );\r\n }\r\n\r\n\r\n fileInput.addEventListener(\r\n 'change',\r\n () => {\r\n fileError(\r\n ''\r\n );\r\n\r\n\r\n const incoming =\r\n [\r\n ...fileInput.files\r\n ];\r\n\r\n\r\n const next =\r\n [\r\n ...state.uploads\r\n ];\r\n\r\n\r\n for (\r\n const file of incoming\r\n ){\r\n if (\r\n next.length >=\r\n MAX_FILES\r\n ){\r\n fileError(\r\n 'Please add no more than ' +\r\n MAX_FILES +\r\n ' files in this development build.'\r\n );\r\n\r\n\r\n break;\r\n }\r\n\r\n\r\n if (\r\n !allowedTypes.has(\r\n file.type\r\n )\r\n ){\r\n fileError(\r\n 'Please use JPG, PNG, WEBP or PDF files.'\r\n );\r\n\r\n\r\n continue;\r\n }\r\n\r\n\r\n if (\r\n file.size >\r\n MAX_FILE_BYTES\r\n ){\r\n fileError(\r\n 'One of the selected files is larger than the current development limit.'\r\n );\r\n\r\n\r\n continue;\r\n }\r\n\r\n\r\n const duplicate =\r\n next.some(\r\n item =>\r\n item.file.name ===\r\n file.name &&\r\n item.file.size ===\r\n file.size &&\r\n item.file.lastModified ===\r\n file.lastModified\r\n );\r\n\r\n\r\n if (\r\n duplicate\r\n ){\r\n continue;\r\n }\r\n\r\n\r\n next.push({\r\n file,\r\n previewUrl:\r\n file.type.startsWith(\r\n 'image\/'\r\n )\r\n ? URL.createObjectURL(\r\n file\r\n )\r\n : ''\r\n });\r\n }\r\n\r\n\r\n state.uploads =\r\n next;\r\n\r\n\r\n rebuildFileInput();\r\n renderFiles();\r\n updateReview();\r\n\r\n\r\n \/*\r\n Non-sensitive analytics hook only.\r\n Filenames, file contents and medical data are NOT emitted.\r\n *\/\r\n window.dataLayer?.push?.({\r\n event:'form_upload_added',\r\n form_name:'lamina_case_submission',\r\n file_count:\r\n state.uploads.length\r\n });\r\n }\r\n );\r\n\r\n\r\n \/* =======================================================\r\n ATTRIBUTION \u2014 NON-SENSITIVE ONLY\r\n ======================================================= *\/\r\n function captureAttribution(){\r\n const params =\r\n new URLSearchParams(\r\n window.location.search\r\n );\r\n\r\n\r\n [\r\n 'utm_source',\r\n 'utm_medium',\r\n 'utm_campaign',\r\n 'utm_content',\r\n 'utm_term',\r\n 'gclid',\r\n 'fbclid'\r\n ].forEach(\r\n key => {\r\n if (\r\n form.elements[\r\n key\r\n ]\r\n ){\r\n form.elements[\r\n key\r\n ].value =\r\n params.get(\r\n key\r\n ) ||\r\n '';\r\n }\r\n }\r\n );\r\n\r\n\r\n form.elements.landing_page.value =\r\n window.location.pathname;\r\n\r\n\r\n try{\r\n if (\r\n document.referrer\r\n ){\r\n const referrerURL =\r\n new URL(\r\n document.referrer\r\n );\r\n\r\n\r\n form.elements.referrer.value =\r\n referrerURL.origin +\r\n referrerURL.pathname;\r\n }else{\r\n form.elements.referrer.value =\r\n '';\r\n }\r\n }catch(_error){\r\n form.elements.referrer.value =\r\n '';\r\n }\r\n\r\n\r\n form.elements.language.value =\r\n document.documentElement.lang ||\r\n navigator.language ||\r\n '';\r\n }\r\n\r\n\r\n \/* =======================================================\r\n SUBMISSION\r\n ======================================================= *\/\r\n function endpointConfigured(){\r\n const action =\r\n form.getAttribute(\r\n 'action'\r\n ) ||\r\n '';\r\n\r\n\r\n return (\r\n action &&\r\n !action.includes(\r\n '{{'\r\n )\r\n );\r\n }\r\n\r\n\r\n function thankYouConfigured(){\r\n const url =\r\n form.dataset.thankYouUrl ||\r\n '';\r\n\r\n\r\n return (\r\n url &&\r\n !url.includes(\r\n '{{'\r\n )\r\n );\r\n }\r\n\r\n\r\n function setSubmitting(\r\n active\r\n ){\r\n state.submitting =\r\n active;\r\n\r\n\r\n submitButton.disabled =\r\n active;\r\n\r\n\r\n submitButton.textContent =\r\n active\r\n ? 'Sending\u2026'\r\n : 'Send my case \u2192';\r\n }\r\n\r\n\r\n form.addEventListener(\r\n 'submit',\r\n async event => {\r\n if (\r\n !root.classList.contains(\r\n 'is-enhanced'\r\n )\r\n ){\r\n return;\r\n }\r\n\r\n\r\n event.preventDefault();\r\n\r\n\r\n if (\r\n state.currentStep !==\r\n 5\r\n ){\r\n return;\r\n }\r\n\r\n\r\n if (\r\n !validateStep(\r\n 5\r\n )\r\n ){\r\n return;\r\n }\r\n\r\n\r\n syncStateFromForm();\r\n updateReview();\r\n\r\n\r\n if (\r\n state.submitting\r\n ){\r\n return;\r\n }\r\n\r\n\r\n submitStatus.classList.remove(\r\n 'is-error'\r\n );\r\n\r\n\r\n if (\r\n !endpointConfigured()\r\n ){\r\n submitStatus.textContent =\r\n 'Secure submission is not connected in this development build. Configure the approved server endpoint before publication.';\r\n\r\n\r\n submitStatus.classList.add(\r\n 'is-error'\r\n );\r\n\r\n\r\n return;\r\n }\r\n\r\n\r\n setSubmitting(\r\n true\r\n );\r\n\r\n\r\n submitStatus.textContent =\r\n 'Sending your case\u2026';\r\n\r\n\r\n try{\r\n const payload =\r\n new FormData(\r\n form\r\n );\r\n\r\n\r\n \/*\r\n Enforce final selected discipline at submission time.\r\n Disabled irrelevant branch inputs are naturally omitted.\r\n *\/\r\n payload.set(\r\n 'discipline',\r\n state.discipline\r\n );\r\n\r\n\r\n payload.set(\r\n 'phone_normalized',\r\n normalizePhone(\r\n state.contact.phone\r\n )\r\n );\r\n\r\n\r\n payload.set(\r\n 'consent_timestamp',\r\n new Date().toISOString()\r\n );\r\n\r\n\r\n const response =\r\n await fetch(\r\n form.action,\r\n {\r\n method:'POST',\r\n body:payload,\r\n credentials:'same-origin',\r\n headers:{\r\n 'X-Requested-With':'XMLHttpRequest'\r\n }\r\n }\r\n );\r\n\r\n\r\n let result =\r\n null;\r\n\r\n\r\n try{\r\n result =\r\n await response.json();\r\n }catch(_error){\r\n result =\r\n null;\r\n }\r\n\r\n\r\n const success =\r\n response.ok &&\r\n result?.success ===\r\n true;\r\n\r\n\r\n if (\r\n !success\r\n ){\r\n throw new Error(\r\n result?.message ||\r\n 'Submission was not confirmed by the server.'\r\n );\r\n }\r\n\r\n\r\n \/*\r\n Conversion event fires ONLY after backend-confirmed success.\r\n Never attach PII, case notes, filenames or health information.\r\n *\/\r\n window.dataLayer?.push?.({\r\n event:'case_submission_success',\r\n form_name:'lamina_case_submission',\r\n discipline:\r\n state.discipline\r\n });\r\n\r\n\r\n submitStatus.textContent =\r\n 'Received \u2014 opening the next step\u2026';\r\n\r\n\r\n if (\r\n thankYouConfigured()\r\n ){\r\n window.location.assign(\r\n form.dataset.thankYouUrl\r\n );\r\n }else{\r\n submitStatus.textContent =\r\n 'Your case was received successfully. Configure the approved Thank You page URL before publication.';\r\n }\r\n }catch(error){\r\n submitStatus.textContent =\r\n 'We couldn\u2019t send your case. Your entered information has been kept. Please try again.';\r\n\r\n\r\n submitStatus.classList.add(\r\n 'is-error'\r\n );\r\n\r\n\r\n console.error(\r\n 'Lamina case submission:',\r\n error\r\n );\r\n }finally{\r\n setSubmitting(\r\n false\r\n );\r\n }\r\n }\r\n );\r\n\r\n\r\n \/* =======================================================\r\n ENTER KEY SAFETY\r\n ======================================================= *\/\r\n form.addEventListener(\r\n 'keydown',\r\n event => {\r\n if (\r\n event.key !==\r\n 'Enter' ||\r\n state.currentStep ===\r\n 5 ||\r\n event.target.matches(\r\n 'textarea, button, [type=\"submit\"]'\r\n )\r\n ){\r\n return;\r\n }\r\n\r\n\r\n \/*\r\n Do not accidentally submit the full form from an intermediate field.\r\n We intentionally do NOT auto-advance here.\r\n *\/\r\n event.preventDefault();\r\n }\r\n );\r\n\r\n\r\n \/* =======================================================\r\n ONE-TIME ENTRANCE\r\n ======================================================= *\/\r\n function initEntrance(){\r\n entranceObserver?.disconnect();\r\n\r\n\r\n if (\r\n reducedMotion.matches ||\r\n entrancePlayed ||\r\n !(\r\n 'IntersectionObserver' in\r\n window\r\n )\r\n ){\r\n return;\r\n }\r\n\r\n\r\n root.classList.add(\r\n 'has-entry'\r\n );\r\n\r\n\r\n entranceObserver =\r\n new IntersectionObserver(\r\n entries => {\r\n entries.forEach(\r\n entry => {\r\n if (\r\n !entry.isIntersecting\r\n ){\r\n return;\r\n }\r\n\r\n\r\n entrancePlayed =\r\n true;\r\n\r\n\r\n requestAnimationFrame(\r\n () => {\r\n root.classList.add(\r\n 'is-entered'\r\n );\r\n\r\n\r\n window.setTimeout(\r\n () => {\r\n root.classList.remove(\r\n 'has-entry'\r\n );\r\n },\r\n 1650\r\n );\r\n }\r\n );\r\n\r\n\r\n entranceObserver.disconnect();\r\n }\r\n );\r\n },\r\n {\r\n rootMargin:'0px 0px -16% 0px',\r\n threshold:.02\r\n }\r\n );\r\n\r\n\r\n entranceObserver.observe(\r\n root\r\n );\r\n }\r\n\r\n\r\n \/* =======================================================\r\n PASSED-CONTENT DEPTH\r\n Only editorial \/ peripheral layers use this.\r\n The active form step is NEVER blurred.\r\n ======================================================= *\/\r\n const depthProfiles =\r\n {\r\n desktop:{\r\n eyebrow:{\r\n start:.24,\r\n full:-.14,\r\n blur:2.4,\r\n opacityMin:.97\r\n },\r\n headline:{\r\n start:.22,\r\n full:-.16,\r\n blur:3.5,\r\n opacityMin:.96\r\n },\r\n copy:{\r\n start:.17,\r\n full:-.18,\r\n blur:1.8,\r\n opacityMin:.98\r\n },\r\n ui:{\r\n start:.11,\r\n full:-.20,\r\n blur:1.25,\r\n opacityMin:.985\r\n }\r\n },\r\n mobile:{\r\n eyebrow:{start:0,full:0,blur:0,opacityMin:1},\r\n headline:{start:0,full:0,blur:0,opacityMin:1},\r\n copy:{start:0,full:0,blur:0,opacityMin:1},\r\n ui:{start:0,full:0,blur:0,opacityMin:1}\r\n }\r\n };\r\n\r\n\r\n function refreshDepthLayers(){\r\n depthLayers =\r\n [\r\n ...root.querySelectorAll(\r\n '[data-s09-depth]'\r\n )\r\n ];\r\n\r\n\r\n requestDepthUpdate();\r\n }\r\n\r\n\r\n function smoothstep(\r\n value\r\n ){\r\n const t =\r\n clamp(\r\n value,\r\n 0,\r\n 1\r\n );\r\n\r\n\r\n return (\r\n t *\r\n t *\r\n (\r\n 3 -\r\n 2 *\r\n t\r\n )\r\n );\r\n }\r\n\r\n\r\n function updateDepth(){\r\n depthTicking =\r\n false;\r\n\r\n\r\n \/*\r\n LOCKED MOBILE RULE:\r\n no scroll-position, passed-content or viewport-driven blur on compact\r\n screens. One-time entrance blur remains separate and is allowed.\r\n *\/\r\n if (\r\n mobileQuery.matches\r\n ){\r\n depthLayers.forEach(\r\n element => {\r\n element.style.setProperty(\r\n '--s09-passed-blur',\r\n '0px'\r\n );\r\n\r\n element.style.setProperty(\r\n '--s09-depth-opacity',\r\n '1'\r\n );\r\n }\r\n );\r\n\r\n return;\r\n }\r\n\r\n\r\n \/*\r\n Do not spend filter work while user is actively typing inside form.\r\n Active form is not depth-filtered anyway, and this also avoids\r\n unnecessary mobile work while the software keyboard is open.\r\n *\/\r\n if (\r\n form.matches(\r\n ':focus-within'\r\n ) &&\r\n mobileQuery.matches\r\n ){\r\n depthLayers.forEach(\r\n element => {\r\n element.style.setProperty(\r\n '--s09-passed-blur',\r\n '0px'\r\n );\r\n\r\n\r\n element.style.setProperty(\r\n '--s09-depth-opacity',\r\n '1'\r\n );\r\n }\r\n );\r\n\r\n\r\n return;\r\n }\r\n\r\n\r\n const vh =\r\n Math.max(\r\n 1,\r\n window.innerHeight ||\r\n document.documentElement.clientHeight\r\n );\r\n\r\n\r\n const set =\r\n mobileQuery.matches\r\n ? depthProfiles.mobile\r\n : depthProfiles.desktop;\r\n\r\n\r\n depthLayers.forEach(\r\n element => {\r\n const type =\r\n element.dataset.s09Depth ||\r\n 'copy';\r\n\r\n\r\n const config =\r\n set[\r\n type\r\n ] ||\r\n set.copy;\r\n\r\n\r\n const rect =\r\n element.getBoundingClientRect();\r\n\r\n\r\n const center =\r\n rect.top +\r\n rect.height *\r\n .5;\r\n\r\n\r\n const startY =\r\n vh *\r\n config.start;\r\n\r\n\r\n const fullY =\r\n vh *\r\n config.full;\r\n\r\n\r\n let progress =\r\n center <\r\n startY\r\n ? (\r\n startY -\r\n center\r\n ) \/\r\n Math.max(\r\n 1,\r\n startY -\r\n fullY\r\n )\r\n : 0;\r\n\r\n\r\n progress =\r\n smoothstep(\r\n progress\r\n );\r\n\r\n\r\n if (\r\n element.matches(\r\n ':hover, :focus-within'\r\n )\r\n ){\r\n progress =\r\n 0;\r\n }\r\n\r\n\r\n const blur =\r\n reducedMotion.matches\r\n ? 0\r\n : (\r\n config.blur *\r\n progress\r\n );\r\n\r\n\r\n const opacity =\r\n reducedMotion.matches\r\n ? 1\r\n : (\r\n 1 -\r\n (\r\n 1 -\r\n config.opacityMin\r\n ) *\r\n progress\r\n );\r\n\r\n\r\n element.style.setProperty(\r\n '--s09-passed-blur',\r\n blur.toFixed(\r\n 2\r\n ) +\r\n 'px'\r\n );\r\n\r\n\r\n element.style.setProperty(\r\n '--s09-depth-opacity',\r\n opacity.toFixed(\r\n 3\r\n )\r\n );\r\n }\r\n );\r\n }\r\n\r\n\r\n function requestDepthUpdate(){\r\n if (\r\n depthTicking\r\n ){\r\n return;\r\n }\r\n\r\n\r\n depthTicking =\r\n true;\r\n\r\n\r\n requestAnimationFrame(\r\n updateDepth\r\n );\r\n }\r\n\r\n\r\n \/* =======================================================\r\n INITIALIZE PROGRESSIVE FORM\r\n ======================================================= *\/\r\n captureAttribution();\r\n\r\n\r\n steps.forEach(\r\n step => {\r\n step.hidden =\r\n Number(\r\n step.dataset.formStep\r\n ) !==\r\n 1;\r\n }\r\n );\r\n\r\n\r\n updateCaseBranch();\r\n updateProgress();\r\n refreshDepthLayers();\r\n initEntrance();\r\n\r\n\r\n window.addEventListener(\r\n 'scroll',\r\n requestDepthUpdate,\r\n {\r\n passive:true\r\n }\r\n );\r\n\r\n\r\n window.addEventListener(\r\n 'resize',\r\n requestDepthUpdate,\r\n {\r\n passive:true\r\n }\r\n );\r\n\r\n\r\n mobileQuery.addEventListener?.(\r\n 'change',\r\n requestDepthUpdate\r\n );\r\n\r\n\r\n reducedMotion.addEventListener?.(\r\n 'change',\r\n requestDepthUpdate\r\n );\r\n\r\n\r\n \/*\r\n Non-sensitive analytics start event.\r\n It contains no PII or medical content.\r\n *\/\r\n let formStartTracked =\r\n false;\r\n\r\n\r\n form.addEventListener(\r\n 'focusin',\r\n () => {\r\n if (\r\n formStartTracked\r\n ){\r\n return;\r\n }\r\n\r\n\r\n formStartTracked =\r\n true;\r\n\r\n\r\n window.dataLayer?.push?.({\r\n event:'form_started',\r\n form_name:'lamina_case_submission'\r\n });\r\n },\r\n {\r\n once:true\r\n }\r\n );\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Lamina Clinic \u2014 Section 1 Hero v7 Istanbul \u00b7 T\u00fcrkiye LLamina Consultation EN Dental Aesthetics A smile, refined. Personalised dental aesthetics shaped around proportion, expression and natural confidence. VeneersImplantsSmile DesignZirconium Explore dental \u2198 Hair Restoration Restore naturally. A considered approach to hair restoration, from medical assessment to natural-looking design. DHISapphire FUEFUE Explore hair \u2199 Choose […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-11","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/laminasmile.com\/fr\/wp-json\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/laminasmile.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/laminasmile.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/laminasmile.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/laminasmile.com\/fr\/wp-json\/wp\/v2\/comments?post=11"}],"version-history":[{"count":244,"href":"https:\/\/laminasmile.com\/fr\/wp-json\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":605,"href":"https:\/\/laminasmile.com\/fr\/wp-json\/wp\/v2\/pages\/11\/revisions\/605"}],"wp:attachment":[{"href":"https:\/\/laminasmile.com\/fr\/wp-json\/wp\/v2\/media?parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}