{"id":11057,"date":"2026-09-10T17:32:50","date_gmt":"2026-09-10T15:32:50","guid":{"rendered":"https:\/\/www.yuliyapivnyak.it\/en\/?page_id=11057"},"modified":"2026-09-10T23:30:03","modified_gmt":"2026-09-10T21:30:03","slug":"demo-websites","status":"publish","type":"page","link":"https:\/\/www.yuliyapivnyak.it\/en\/demo-websites\/","title":{"rendered":"Demo Websites"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"11057\" class=\"elementor elementor-11057\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-53e903a e-con-full e-flex e-con e-parent\" data-id=\"53e903a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-be66096 elementor-widget elementor-widget-html\" data-id=\"be66096\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"yd-stage\" id=\"ydDemoStage\">\n\n  <div class=\"yd-sticky\">\n\n    <!-- GIANT DEMO WEBSITES -->\n    <div class=\"yd-giant-title\">\n\n      <img\n        class=\"yd-title-black\"\n        src=\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/09\/Group-1059-1.png\"\n        alt=\"Demo Websites\"\n        fetchpriority=\"high\"\n        decoding=\"async\"\n      >\n\n      <img\n        class=\"yd-title-blue\"\n        src=\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/09\/Group-1059-1.png\"\n        alt=\"\"\n        aria-hidden=\"true\"\n        fetchpriority=\"low\"\n        decoding=\"async\"\n      >\n\n    <\/div>\n\n\n    <!-- DEMO WALL -->\n    <div class=\"yd-world\">\n\n      <figure class=\"yd-shot yd-shot-1\" data-x=\"-34\" data-speed=\"34\" data-drop=\"1.05\">\n        <img src=\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/09\/https-www.yuliyapivnyak.it-approvato-4.webp\" alt=\"\" decoding=\"async\" fetchpriority=\"low\">\n      <\/figure>\n\n      <figure class=\"yd-shot yd-shot-2\" data-x=\"26\" data-speed=\"-42\" data-drop=\".82\">\n        <img src=\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/09\/https-www.yuliyapivnyak.it-approvato-3.webp\" alt=\"\" decoding=\"async\" fetchpriority=\"low\">\n      <\/figure>\n\n      <figure class=\"yd-shot yd-shot-3\" data-x=\"-20\" data-speed=\"52\" data-drop=\"1.30\">\n        <img src=\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/09\/https-www.yuliyapivnyak.it-approvato-21.webp\" alt=\"\" decoding=\"async\" fetchpriority=\"low\">\n      <\/figure>\n\n      <figure class=\"yd-shot yd-shot-4\" data-x=\"38\" data-speed=\"-35\" data-drop=\"1.08\">\n        <img src=\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/09\/https-www.yuliyapivnyak.it-approvato-2.webp\" alt=\"\" decoding=\"async\" fetchpriority=\"low\">\n      <\/figure>\n\n      <figure class=\"yd-shot yd-shot-5\" data-x=\"-42\" data-speed=\"47\" data-drop=\".90\">\n        <img src=\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/09\/https-www.yuliyapivnyak.it-approvato-3.webp\" alt=\"\" decoding=\"async\" fetchpriority=\"low\">\n      <\/figure>\n\n      <figure class=\"yd-shot yd-shot-6\" data-x=\"18\" data-speed=\"-53\" data-drop=\"1.40\">\n        <img src=\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/09\/https-www.yuliyapivnyak.it-approvato-4.webp\" alt=\"\" decoding=\"async\" fetchpriority=\"low\">\n      <\/figure>\n\n      <figure class=\"yd-shot yd-shot-7\" data-x=\"44\" data-speed=\"-28\" data-drop=\"1.15\">\n        <img src=\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/09\/https-www.yuliyapivnyak.it-approvato-21.webp\" alt=\"\" decoding=\"async\" fetchpriority=\"low\">\n      <\/figure>\n\n      <figure class=\"yd-shot yd-shot-8\" data-x=\"-12\" data-speed=\"39\" data-drop=\".75\">\n        <img src=\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/09\/https-www.yuliyapivnyak.it-approvato-2.webp\" alt=\"\" decoding=\"async\" fetchpriority=\"low\">\n      <\/figure>\n\n      <figure class=\"yd-shot yd-shot-9\" data-x=\"-48\" data-speed=\"26\" data-drop=\"1.22\">\n        <img src=\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/09\/https-www.yuliyapivnyak.it-approvato-21.webp\" alt=\"\" decoding=\"async\" fetchpriority=\"low\">\n      <\/figure>\n\n      <figure class=\"yd-shot yd-shot-10\" data-x=\"31\" data-speed=\"-46\" data-drop=\".98\">\n        <img src=\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/09\/https-www.yuliyapivnyak.it-approvato-4.webp\" alt=\"\" decoding=\"async\" fetchpriority=\"low\">\n      <\/figure>\n\n    <\/div>\n\n\n    <!-- SCROLL -->\n    <div class=\"yd-scroll\">\n      <span class=\"yd-scroll-line\"><\/span>\n      <span>SCROLL<\/span>\n    <\/div>\n\n\n    <!-- PLEXIGLASS -->\n    <article class=\"yd-plexy\">\n\n      <span class=\"yd-screw tl\"><\/span>\n      <span class=\"yd-screw tr\"><\/span>\n      <span class=\"yd-screw bl\"><\/span>\n      <span class=\"yd-screw br\"><\/span>\n\n      <span class=\"yd-reflection\"><\/span>\n\n      <div class=\"yd-plexy-main\">\n\n        <div class=\"yd-profile\">\n\n          <div class=\"yd-photo\">\n            <img\n              src=\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/05\/yu-arancione-1-e1777842074517.webp\"\n              alt=\"Yuliya Pivnyak\"\n              loading=\"lazy\"\n              decoding=\"async\"\n              fetchpriority=\"low\"\n            >\n          <\/div>\n\n        <\/div>\n\n\n        <div class=\"yd-content\">\n\n          <h2>\n            CHOOSE<br>A DEMO\n          <\/h2>\n\n          <p>\n            Explore examples across different industries and find\n            the right direction for your website.\n          <\/p>\n\n\n          <a href=\"#contatti\" class=\"yd-cta\">\n\n            <span class=\"yd-cta-screw left\"><\/span>\n            <span class=\"yd-cta-screw right\"><\/span>\n\n            <span class=\"yd-cta-brush\"><\/span>\n\n            <div class=\"yd-cta-copy\">\n              <small>01 \/ CONTACT<\/small>\n              <strong>I WANT A WEBSITE LIKE THESE<\/strong>\n            <\/div>\n\n            <span class=\"yd-cta-arrow\">\u2197<\/span>\n\n          <\/a>\n\n        <\/div>\n\n      <\/div>\n\n    <\/article>\n\n\n    <div class=\"yd-progress\">\n      <span><\/span>\n    <\/div>\n\n  <\/div>\n\n<\/div>\n\n\n<style>\n\n\/* =========================================================\n   BASE\n========================================================= *\/\n\n#ydDemoStage,\n#ydDemoStage *{\n  box-sizing:border-box;\n}\n\n.yd-stage{\n  --blue:#405FD7;\n  --orange:#F56A23;\n  --black:#111;\n\n  position:relative;\n  width:100%;\n  height:470vh;\n\n  color:var(--black);\n\n  font-family:Inter,Arial,sans-serif;\n}\n\n\n\/* =========================================================\n   STICKY + PATTERN\n========================================================= *\/\n\n.yd-sticky{\n  position:sticky;\n  top:0;\n\n  width:100%;\n  height:100vh;\n  height:100svh;\n\n  overflow:hidden;\n  isolation:isolate;\n\n  background-color:#fff;\n\n  background-image:\n    url(\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/09\/Vector-72.svg\");\n\n  background-repeat:repeat;\n  background-size:6px auto;\n  background-position:center top;\n}\n\n\n\/* =========================================================\n   DEMO WEBSITES\n========================================================= *\/\n\n.yd-giant-title{\n  position:absolute;\n  z-index:10;\n\n  inset:0;\n\n  width:100%;\n  height:100%;\n\n  overflow:hidden;\n\n  pointer-events:none;\n}\n\n.yd-giant-title img{\n  position:absolute;\n\n  left:50%;\n  top:50%;\n\n  display:block;\n\n  \/*\n     RIDOTTA DA 128VW A 112VW\n     RIMANE GIGANTE \/ FULL\n  *\/\n  width:112vw;\n  height:auto;\n\n  max-width:none;\n\n  object-fit:contain;\n\n  transform:translate(-50%,-50%);\n\n  transform-origin:center;\n\n  will-change:opacity;\n}\n\n\n\/* NERO INIZIALE *\/\n\n.yd-title-black{\n  z-index:1;\n\n  opacity:1;\n\n  filter:\n    brightness(0)\n    saturate(100%);\n}\n\n\n\/* BLU FINALE *\/\n\n.yd-title-blue{\n  z-index:2;\n\n  opacity:0;\n\n  filter:none;\n}\n\n\n\/* =========================================================\n   DEMO WORLD\n========================================================= *\/\n\n.yd-world{\n  position:absolute;\n  z-index:30;\n\n  inset:0;\n\n  pointer-events:none;\n}\n\n\n\/* =========================================================\n   MINI DEMO\n========================================================= *\/\n\n.yd-shot{\n  position:absolute;\n\n  margin:0;\n\n  overflow:hidden;\n\n  border-radius:6px;\n\n  background:#ddd;\n\n  box-shadow:\n    0 12px 28px rgba(20,30,80,.10);\n\n  will-change:transform,opacity;\n  contain:paint;\n}\n\n.yd-shot img{\n  display:block;\n\n  width:100%;\n  height:100%;\n\n  object-fit:cover;\n\n  border-radius:6px;\n}\n\n\n\/* =========================================================\n   DEMO POSITIONS\n========================================================= *\/\n\n.yd-shot-1{\n  left:4%;\n  top:17%;\n  width:18vw;\n  aspect-ratio:16\/9;\n  z-index:4;\n}\n\n.yd-shot-2{\n  left:38%;\n  top:7%;\n  width:18vw;\n  aspect-ratio:16\/9;\n  z-index:3;\n}\n\n.yd-shot-3{\n  right:6%;\n  top:20%;\n  width:19vw;\n  aspect-ratio:16\/9;\n  z-index:7;\n}\n\n.yd-shot-4{\n  right:-2%;\n  top:50%;\n  width:20vw;\n  aspect-ratio:16\/9;\n  z-index:5;\n}\n\n.yd-shot-5{\n  left:-3%;\n  top:48%;\n  width:17vw;\n  aspect-ratio:16\/10;\n  z-index:8;\n}\n\n.yd-shot-6{\n  left:41%;\n  top:39%;\n  width:17vw;\n  aspect-ratio:16\/9;\n  z-index:40;\n}\n\n.yd-shot-7{\n  right:18%;\n  bottom:8%;\n  width:19vw;\n  aspect-ratio:16\/9;\n  z-index:6;\n}\n\n.yd-shot-8{\n  left:24%;\n  bottom:5%;\n  width:18vw;\n  aspect-ratio:16\/9;\n  z-index:13;\n}\n\n.yd-shot-9{\n  left:13%;\n  top:31%;\n  width:12vw;\n  aspect-ratio:16\/10;\n  z-index:15;\n}\n\n.yd-shot-10{\n  right:28%;\n  top:29%;\n  width:13vw;\n  aspect-ratio:16\/9;\n  z-index:16;\n}\n\n\n\/* =========================================================\n   SCROLL\n========================================================= *\/\n\n.yd-scroll{\n  position:absolute;\n  z-index:80;\n\n  left:50%;\n  bottom:18px;\n\n  transform:translateX(-50%);\n\n  display:flex;\n  flex-direction:column;\n  align-items:center;\n\n  gap:8px;\n\n  font-size:10px;\n  font-weight:600;\n  letter-spacing:.12em;\n}\n\n.yd-scroll-line{\n  width:1px;\n  height:38px;\n\n  background:#111;\n}\n\n\n\/* =========================================================\n   PLEXIGLASS\n========================================================= *\/\n\n.yd-plexy{\n  position:absolute;\n  z-index:150;\n\n  left:50%;\n  top:50%;\n\n  width:min(730px,74vw);\n\n  min-height:360px;\n\n  padding:36px 42px;\n\n  border-radius:18px;\n\n  color:#111;\n\n  background:\n    linear-gradient(\n      145deg,\n      rgba(255,255,255,.76),\n      rgba(223,231,250,.54)\n    );\n\n  border:\n    1px solid rgba(255,255,255,.95);\n\n  backdrop-filter:\n    blur(7px) saturate(120%);\n\n  -webkit-backdrop-filter:\n    blur(7px) saturate(120%);\n\n  box-shadow:\n    0 0 0 2px rgba(142,154,175,.28),\n    0 0 0 6px rgba(235,242,252,.34),\n    0 22px 40px rgba(25,31,55,.18),\n    inset 2px 2px 4px rgba(255,255,255,.96),\n    inset -5px -5px 8px rgba(35,45,75,.15),\n    inset 0 0 0 8px rgba(255,255,255,.13);\n\n  opacity:0;\n\n  transform:\n    translate(\n      -50%,\n      calc(-50% + 110vh)\n    )\n    scale(.94);\n\n  will-change:transform,opacity;\n}\n\n\n\/* INNER EDGE *\/\n\n.yd-plexy::before{\n  content:\"\";\n\n  position:absolute;\n\n  inset:9px;\n\n  border-radius:12px;\n\n  border:\n    1px solid rgba(255,255,255,.62);\n\n  box-shadow:\n    inset 0 1px 2px rgba(255,255,255,.88),\n    0 1px 1px rgba(20,25,40,.08);\n\n  pointer-events:none;\n}\n\n\n\/* THICKNESS *\/\n\n.yd-plexy::after{\n  content:\"\";\n\n  position:absolute;\n\n  left:14px;\n  right:14px;\n  bottom:5px;\n\n  height:7px;\n\n  border-radius:0 0 12px 12px;\n\n  background:\n    linear-gradient(\n      to bottom,\n      rgba(255,255,255,.3),\n      rgba(55,65,90,.14)\n    );\n\n  pointer-events:none;\n}\n\n\n\/* =========================================================\n   REFLECTION\n========================================================= *\/\n\n.yd-reflection{\n  position:absolute;\n  z-index:1;\n\n  top:-4%;\n  left:3%;\n\n  width:50%;\n  height:65%;\n\n  transform:skewX(-15deg);\n\n  background:\n    linear-gradient(\n      112deg,\n      rgba(255,255,255,.36),\n      rgba(255,255,255,.10) 37%,\n      transparent 70%\n    );\n\n  pointer-events:none;\n}\n\n\n\/* =========================================================\n   SCREWS\n========================================================= *\/\n\n.yd-screw{\n  position:absolute;\n  z-index:20;\n\n  width:15px;\n  height:15px;\n\n  border-radius:50%;\n\n  background:\n    radial-gradient(\n      circle at 32% 26%,\n      #fff 0 7%,\n      #e0e3e5 14%,\n      #949ba1 30%,\n      #50565c 47%,\n      #202428 64%,\n      #a3a8ad 78%,\n      #393e43 100%\n    );\n\n  box-shadow:\n    0 1px 3px rgba(0,0,0,.5);\n}\n\n.yd-screw::after{\n  content:\"\";\n\n  position:absolute;\n\n  left:3px;\n  right:3px;\n  top:6.5px;\n\n  height:1px;\n\n  background:#111;\n\n  transform:rotate(35deg);\n}\n\n.yd-screw.tl{\n  top:11px;\n  left:11px;\n}\n\n.yd-screw.tr{\n  top:11px;\n  right:11px;\n}\n\n.yd-screw.bl{\n  bottom:11px;\n  left:11px;\n}\n\n.yd-screw.br{\n  bottom:11px;\n  right:11px;\n}\n\n\n\/* =========================================================\n   PLEXY CONTENT\n========================================================= *\/\n\n.yd-plexy-main{\n  position:relative;\n  z-index:3;\n\n  display:grid;\n\n  grid-template-columns:\n    150px 1fr;\n\n  gap:44px;\n\n  align-items:center;\n\n  min-height:288px;\n}\n\n\n\/* =========================================================\n   PHOTO\n========================================================= *\/\n\n.yd-profile{\n  display:flex;\n\n  align-items:center;\n  justify-content:center;\n}\n\n.yd-photo{\n  width:138px;\n  height:138px;\n\n  padding:5px;\n\n  border-radius:50%;\n\n  background:\n    linear-gradient(\n      145deg,\n      #fff,\n      #cfd5dd\n    );\n\n  box-shadow:\n    0 0 0 1px rgba(20,25,35,.18),\n    0 8px 18px rgba(20,25,40,.16),\n    inset 1px 1px 2px rgba(255,255,255,1);\n}\n\n.yd-photo img{\n  display:block;\n\n  width:100%;\n  height:100%;\n\n  object-fit:cover;\n\n  border-radius:50%;\n}\n\n\n\/* =========================================================\n   TEXT\n========================================================= *\/\n\n.yd-content{\n  min-width:0;\n}\n\n.yd-content h2{\n  margin:0;\n\n  font-family:\n    Khand,\n    Impact,\n    \"Arial Narrow\",\n    sans-serif;\n\n  font-size:\n    clamp(68px,5.2vw,86px);\n\n  line-height:.73;\n\n  font-weight:600;\n\n  letter-spacing:-.05em;\n}\n\n.yd-content > p{\n  max-width:440px;\n\n  margin:22px 0 0;\n\n  \/* BODY MINIMO 18PX *\/\n  font-size:18px;\n\n  line-height:1.35;\n\n  font-weight:400;\n}\n\n\n\/* =========================================================\n   CTA\n========================================================= *\/\n\n.yd-cta{\n  position:relative;\n\n  width:100%;\n  max-width:445px;\n\n  min-height:90px;\n\n  margin-top:31px;\n\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n\n  padding:\n    15px\n    49px\n    15px\n    27px;\n\n  overflow:hidden;\n\n  border-radius:12px;\n\n  background:\n    linear-gradient(\n      145deg,\n      rgba(214,224,255,.60),\n      rgba(172,192,255,.43)\n    );\n\n  border:\n    1px solid rgba(255,255,255,.95);\n\n  box-shadow:\n    0 0 0 2px rgba(98,121,210,.40),\n    0 0 0 5px rgba(255,255,255,.58),\n    inset 1px 1px 3px rgba(255,255,255,.95),\n    inset -3px -3px 6px rgba(65,95,180,.16),\n    0 8px 16px rgba(42,66,145,.15);\n\n  color:#111;\n\n  text-decoration:none;\n}\n\n.yd-cta::before{\n  content:\"\";\n\n  position:absolute;\n  z-index:1;\n\n  inset:7px;\n\n  border-radius:7px;\n\n  border:\n    1px solid rgba(255,255,255,.72);\n\n  pointer-events:none;\n}\n\n\n\/* ORANGE *\/\n\n.yd-cta-brush{\n  position:absolute;\n  z-index:0;\n\n  left:0;\n  top:20px;\n\n  width:67%;\n  height:50px;\n\n  background:var(--orange);\n\n  clip-path:\n    polygon(\n      0 12%,\n      13% 7%,\n      27% 12%,\n      43% 5%,\n      59% 10%,\n      77% 5%,\n      100% 10%,\n      98% 88%,\n      82% 84%,\n      65% 91%,\n      48% 85%,\n      31% 92%,\n      14% 85%,\n      0 91%\n    );\n}\n\n\n\/* CTA COPY *\/\n\n.yd-cta-copy{\n  position:relative;\n  z-index:4;\n\n  display:flex;\n  flex-direction:column;\n\n  gap:5px;\n}\n\n.yd-cta-copy small{\n  font-size:10px;\n  font-weight:800;\n  letter-spacing:.10em;\n}\n\n.yd-cta-copy strong{\n  font-family:\n    Khand,\n    Impact,\n    \"Arial Narrow\",\n    sans-serif;\n\n  font-size:24px;\n\n  line-height:1;\n\n  font-weight:600;\n\n  letter-spacing:-.02em;\n}\n\n.yd-cta-arrow{\n  position:relative;\n  z-index:4;\n\n  font-size:26px;\n\n  color:var(--blue);\n}\n\n\n\/* CTA SCREWS *\/\n\n.yd-cta-screw{\n  position:absolute;\n  z-index:7;\n\n  width:11px;\n  height:11px;\n\n  border-radius:50%;\n\n  background:\n    radial-gradient(\n      circle at 32% 26%,\n      #fff 0 7%,\n      #dfe2e4 14%,\n      #92989e 30%,\n      #4f555b 47%,\n      #1f2327 64%,\n      #9fa5aa 78%,\n      #373c41 100%\n    );\n\n  box-shadow:\n    0 1px 2px rgba(0,0,0,.45);\n}\n\n.yd-cta-screw.left{\n  left:9px;\n  top:9px;\n}\n\n.yd-cta-screw.right{\n  right:9px;\n  bottom:9px;\n}\n\n\n\/* =========================================================\n   PROGRESS\n========================================================= *\/\n\n.yd-progress{\n  position:absolute;\n  z-index:300;\n\n  top:14%;\n  right:14px;\n\n  width:1px;\n  height:72%;\n\n  background:\n    rgba(0,0,0,.15);\n}\n\n.yd-progress span{\n  display:block;\n\n  width:1px;\n  height:100%;\n\n  background:var(--blue);\n\n  transform:scaleY(0);\n  transform-origin:50% 0;\n  will-change:transform;\n}\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media(max-width:1000px){\n\n  .yd-giant-title img{\n    width:125vw;\n  }\n\n  .yd-shot-1,\n  .yd-shot-3,\n  .yd-shot-4,\n  .yd-shot-5,\n  .yd-shot-7,\n  .yd-shot-8{\n    width:25vw;\n  }\n\n  .yd-plexy{\n    width:84vw;\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media(max-width:767px){\n\n  .yd-stage{\n    height:430vh;\n  }\n\n  .yd-sticky{\n    background-size:5px auto;\n  }\n\n  .yd-giant-title img{\n    width:185vw;\n  }\n\n\n  .yd-shot-1,\n  .yd-shot-2,\n  .yd-shot-3,\n  .yd-shot-4,\n  .yd-shot-5,\n  .yd-shot-6,\n  .yd-shot-7,\n  .yd-shot-8{\n    width:48vw;\n  }\n\n  .yd-shot-9,\n  .yd-shot-10{\n    width:34vw;\n  }\n\n\n  .yd-shot-1{\n    left:-12%;\n    top:19%;\n  }\n\n  .yd-shot-2{\n    left:46%;\n    top:11%;\n  }\n\n  .yd-shot-3{\n    right:-18%;\n    top:30%;\n  }\n\n  .yd-shot-4{\n    right:-12%;\n    top:61%;\n  }\n\n  .yd-shot-5{\n    left:-19%;\n    top:51%;\n  }\n\n  .yd-shot-6{\n    left:39%;\n    top:42%;\n  }\n\n  .yd-shot-7{\n    right:4%;\n    bottom:5%;\n  }\n\n  .yd-shot-8{\n    left:8%;\n    bottom:12%;\n  }\n\n\n  .yd-plexy{\n    width:calc(100% - 30px);\n\n    max-width:390px;\n\n    min-height:0;\n\n    padding:\n      27px\n      21px;\n  }\n\n  .yd-plexy-main{\n    display:block;\n\n    min-height:0;\n  }\n\n  .yd-profile{\n    justify-content:flex-start;\n  }\n\n  .yd-photo{\n    width:92px;\n    height:92px;\n  }\n\n  .yd-content{\n    margin-top:22px;\n  }\n\n  .yd-content h2{\n    font-size:53px;\n  }\n\n  .yd-content > p{\n    margin-top:15px;\n\n    font-size:18px;\n    line-height:1.3;\n  }\n\n  .yd-cta{\n    min-height:78px;\n\n    margin-top:24px;\n\n    padding:\n      12px\n      40px\n      12px\n      22px;\n  }\n\n  .yd-cta-brush{\n    top:18px;\n\n    width:77%;\n    height:42px;\n  }\n\n  .yd-cta-copy small{\n    font-size:10px;\n  }\n\n  .yd-cta-copy strong{\n    font-size:20px;\n  }\n\n  .yd-cta-arrow{\n    font-size:21px;\n  }\n\n  .yd-progress{\n    right:6px;\n  }\n\n}\n\n\/* =========================================================\n   PERFORMANCE \u2014 MOBILE\n   Same visual composition, less expensive painting.\n========================================================= *\/\n@media(max-width:767px){\n  .yd-shot{\n    contain:layout paint;\n  }\n\n  .yd-title-black,\n  .yd-title-blue,\n  .yd-plexy{\n    backface-visibility:hidden;\n    -webkit-backface-visibility:hidden;\n  }\n}\n\n\n<\/style>\n\n\n<script>\n\n(function(){\n\n  const stage = document.getElementById('ydDemoStage');\n  if(!stage || stage.dataset.ydOptimized === '1') return;\n  stage.dataset.ydOptimized = '1';\n\n  const shotEls = [...stage.querySelectorAll('.yd-shot')];\n  const plexy = stage.querySelector('.yd-plexy');\n  const scrollHint = stage.querySelector('.yd-scroll');\n  const progress = stage.querySelector('.yd-progress span');\n  const titleBlack = stage.querySelector('.yd-title-black');\n  const titleBlue = stage.querySelector('.yd-title-blue');\n\n  \/* Read data-* once, not on every animation frame. *\/\n  const shots = shotEls.map((el,index)=>( {\n    el,\n    index,\n    baseX: parseFloat(el.dataset.x || 0),\n    speed: parseFloat(el.dataset.speed || 30),\n    drop: parseFloat(el.dataset.drop || 1),\n    hidden: false\n  }));\n\n  let target = 0;\n  let current = 0;\n  let raf = 0;\n  let resizeRaf = 0;\n\n  \/* Geometry cache: layout is measured only on init\/resize, never on scroll. *\/\n  let viewportH = Math.max(1, window.innerHeight || 1);\n  let stageTop = 0;\n  let stageHeight = 1;\n  let scrollDistance = 1;\n\n  const clamp = (value,min,max) => Math.max(min,Math.min(max,value));\n  const normalized = (value,start,end) => clamp((value-start)\/(end-start),0,1);\n  const ease = t => t < .5 ? 2*t*t : 1 - Math.pow(-2*t+2,2)\/2;\n\n  function measure(){\n    viewportH = Math.max(1, window.innerHeight || document.documentElement.clientHeight || 1);\n\n    \/* One layout read here is intentional and happens only after resize\/init. *\/\n    const rect = stage.getBoundingClientRect();\n    stageTop = (window.scrollY || window.pageYOffset || 0) + rect.top;\n    stageHeight = stage.offsetHeight;\n    scrollDistance = Math.max(1, stageHeight - viewportH);\n\n    update();\n  }\n\n  function getProgressFromScroll(){\n    const y = window.scrollY || window.pageYOffset || 0;\n    return clamp((y - stageTop) \/ scrollDistance, 0, 1);\n  }\n\n  function render(){\n    raf = 0;\n\n    current += (target-current) * .075;\n    if(Math.abs(target-current) < .0001) current = target;\n\n    const p = current;\n    const horizontalPhase = normalized(p,0,.45);\n    const dropPhase = ease(normalized(p,.27,.58));\n    const hideShots = p >= .57;\n\n    for(const shot of shots){\n      const microDrift = Math.sin(p * Math.PI * 2 + shot.index * .71) * 3;\n      const x = shot.baseX + shot.speed * horizontalPhase + microDrift;\n      const y = dropPhase * viewportH * shot.drop;\n      const opacity = 1 - normalized(p,.59,.77) * .82;\n\n      shot.el.style.transform = `translate3d(${x}vw,${y}px,0)`;\n      shot.el.style.opacity = hideShots ? '0' : String(opacity);\n\n      \/* Visibility is changed only when the threshold is crossed. *\/\n      if(shot.hidden !== hideShots){\n        shot.hidden = hideShots;\n        shot.el.style.visibility = hideShots ? 'hidden' : 'visible';\n      }\n    }\n\n    const bluePhase = ease(normalized(p,.27,.47));\n    titleBlue.style.opacity = String(bluePhase);\n    titleBlack.style.opacity = String(1-bluePhase);\n\n    const enter = ease(normalized(p,.35,.55));\n    let plexyY = (1-enter) * viewportH * 1.05;\n    let plexyScale = .94 + enter * .06;\n    let plexyOpacity = enter;\n\n    if(p >= .57){\n      plexyY = -6;\n      plexyScale = 1;\n      plexyOpacity = 1;\n    }\n\n    plexy.style.transform = `translate(-50%,calc(-50% + ${plexyY}px)) scale(${plexyScale})`;\n    plexy.style.opacity = String(plexyOpacity);\n\n    scrollHint.style.opacity = String(1-normalized(p,.05,.20));\n\n    \/* transform instead of height => compositor work, no layout mutation. *\/\n    progress.style.transform = `scaleY(${p})`;\n\n    if(Math.abs(target-current) > .0001){\n      raf = requestAnimationFrame(render);\n    }\n  }\n\n  function update(){\n    target = getProgressFromScroll();\n    if(!raf) raf = requestAnimationFrame(render);\n  }\n\n  function onResize(){\n    if(resizeRaf) return;\n    resizeRaf = requestAnimationFrame(()=>{\n      resizeRaf = 0;\n      measure();\n    });\n  }\n\n  window.addEventListener('scroll', update, {passive:true});\n  window.addEventListener('resize', onResize, {passive:true});\n  window.addEventListener('orientationchange', onResize, {passive:true});\n\n  \/* Font swaps can alter Elementor geometry after first paint. Re-measure once. *\/\n  if(document.fonts && document.fonts.ready){\n    document.fonts.ready.then(onResize).catch(()=>{});\n  }\n\n  measure();\n\n})();\n\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9775a60 elementor-widget elementor-widget-html\" data-id=\"9775a60\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\nYU.DESIGN \u2014 DEMO ARCHIVE \/ PERFORMANCE V2 FIX\n- una sola struttura: niente toggle DEMO\/FILTRI\n- filtri orizzontali + quantit\u00e0 automatica\n- 40px di respiro dopo i filtri\n- lista senza scroll intrappolato\n- selezione forte, hover leggero\n- preview molto pi\u00f9 grande\n- un solo iframe live\n- click preview -> fullscreen live\n- CTA plexy: I WANT A WEBSITE LIKE THIS\n- mobile: lista -> preview sotto, scroll morbido solo se serve\n========================================================= -->\n\n<section id=\"yu-demo-ux\">\n\n  <div class=\"ydu-shell\">\n\n    <span class=\"ydu-screw ydu-tl\" aria-hidden=\"true\"><\/span>\n    <span class=\"ydu-screw ydu-tr\" aria-hidden=\"true\"><\/span>\n    <span class=\"ydu-screw ydu-bl\" aria-hidden=\"true\"><\/span>\n    <span class=\"ydu-screw ydu-br\" aria-hidden=\"true\"><\/span>\n\n    <!-- TOP -->\n    <header class=\"ydu-top\">\n      <span class=\"ydu-brand\">YU.DESIGN \/ DEMO WEBSITES<\/span>\n\n      <div class=\"ydu-total-top\">\n        <strong id=\"yduTotal\">04<\/strong>\n        <span>DEMO<\/span>\n      <\/div>\n    <\/header>\n\n    <!-- BODY -->\n    <div class=\"ydu-body\">\n\n      <!-- LEFT \/ ARCHIVE -->\n      <section class=\"ydu-left\">\n\n        <div class=\"ydu-heading\">\n          <h2>EXPLORE THE DEMOS<\/h2>\n        <\/div>\n\n        <div class=\"ydu-filters\" id=\"yduFilters\"><\/div>\n\n        <div class=\"ydu-filter-breath\" aria-hidden=\"true\"><\/div>\n\n        <div class=\"ydu-list-head\">\n          <span>N.<\/span>\n          <span>PROJECT<\/span>\n          <span>CATEGORY<\/span>\n          <span><\/span>\n        <\/div>\n\n        <div class=\"ydu-list\" id=\"yduList\"><\/div>\n\n      <\/section>\n\n      <!-- RIGHT \/ PREVIEW -->\n      <section class=\"ydu-right\" id=\"yduPreviewBlock\">\n\n        <div class=\"ydu-preview-meta\">\n          <span>PREVIEW <strong id=\"yduPreviewNo\">01<\/strong><\/span>\n          <span id=\"yduPreviewCategoryTop\">HOSPITALITY<\/span>\n        <\/div>\n\n        <div class=\"ydu-preview-host\" id=\"yduPreviewHost\">\n\n          <button\n            type=\"button\"\n            class=\"ydu-open-preview\"\n            id=\"yduOpenPreview\"\n            aria-label=\"Open the live demo in fullscreen\"\n          >\n            <span class=\"ydu-expand\" aria-hidden=\"true\">\n              <i><\/i><i><\/i><i><\/i><i><\/i>\n            <\/span>\n          <\/button>\n\n        <\/div>\n\n        <div class=\"ydu-preview-footer\">\n\n          <div class=\"ydu-project-meta\">\n            <span id=\"yduPreviewCategory\">HOSPITALITY<\/span>\n            <h3 id=\"yduPreviewTitle\">TAGLIO.<\/h3>\n          <\/div>\n\n          <a class=\"ydu-cta\" href=\"\/contattami\/\">\n            <span class=\"ydu-cta-screw ydu-cs1\" aria-hidden=\"true\"><\/span>\n            <span class=\"ydu-cta-screw ydu-cs2\" aria-hidden=\"true\"><\/span>\n\n            <span class=\"ydu-cta-brush\">\n              <small>01 \/ CONTACT<\/small>\n              <strong>I WANT A WEBSITE LIKE THIS<\/strong>\n            <\/span>\n\n            <i class=\"ydu-cta-arrow\" aria-hidden=\"true\"><\/i>\n          <\/a>\n\n        <\/div>\n\n      <\/section>\n\n    <\/div>\n\n    <!-- SINGLE IFRAME -->\n    <iframe\n      id=\"yduLiveFrame\"\n      class=\"ydu-live-frame\"\n      title=\"Demo live\"\n      loading=\"lazy\"\n      sandbox=\"allow-scripts allow-forms allow-same-origin\"\n    ><\/iframe>\n\n  <\/div>\n\n<\/section>\n\n<!-- =========================================================\nFULLSCREEN\n========================================================= -->\n<div class=\"ydu-fullscreen\" id=\"yduFullscreen\" aria-hidden=\"true\">\n\n  <header class=\"ydu-fullbar\">\n\n    <div class=\"ydu-fullname\">\n      <span id=\"yduFullCategory\">HOSPITALITY<\/span>\n      <strong id=\"yduFullTitle\">TAGLIO.<\/strong>\n    <\/div>\n\n    <div class=\"ydu-fullactions\">\n\n      <button type=\"button\" class=\"ydu-back\" id=\"yduBack\">\n        <i aria-hidden=\"true\"><\/i>\n        <span>GO BACK<\/span>\n      <\/button>\n\n      <button type=\"button\" class=\"ydu-close\" id=\"yduClose\" aria-label=\"Close demo\">\n        <i><\/i>\n        <i><\/i>\n      <\/button>\n\n    <\/div>\n\n  <\/header>\n\n  <div class=\"ydu-fullhost\" id=\"yduFullHost\"><\/div>\n\n<\/div>\n\n<!-- =========================================================\nREAL DEMO SOURCES\n========================================================= -->\n\n<template id=\"yduTplTaglio\">\n<!-- =========================================================\nTAGLIO. \/ RESTAURANT DEMO 2027\nAUDIT 02 \u2014 CLEAN REBUILD\n\nLEFT  = approved TAGLIO presentation, preserved\nRIGHT = rebuilt cleanly: hero + menu discovery + booking + location\/trust\nNO legacy right-side sections, NO stacked patch CSS\nONE ELEMENTOR HTML WIDGET\n========================================================= -->\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:wght@500;600&family=Oswald:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n\n<section id=\"taglio-demo-2027\">\n  <div class=\"tg27-shell\">\n\n    <!-- LEFT \/ APPROVED -->\n    <section class=\"tg27-left\">\n      <aside class=\"tg27-side\">\n        <a href=\"javascript:void(0)\" class=\"tg27-side-logo\">TAGLIO<span>.<\/span><\/a>\n        <nav>\n          <a href=\"javascript:void(0)\">MENU<\/a><a href=\"javascript:void(0)\">DRINKS<\/a><a href=\"javascript:void(0)\">SPACES<\/a><a href=\"javascript:void(0)\">JOURNAL<\/a><a href=\"javascript:void(0)\">CONTACT<\/a>\n        <\/nav>\n        <div class=\"tg27-side-rule\"><\/div>\n        <a href=\"javascript:void(0)\" class=\"tg27-side-arrow\">\u2192<\/a>\n        <div class=\"tg27-side-bottom\">\n          <b>MILAN<br>VIA SOLFERINO 15<\/b><i><\/i><b>TUE \u2014 SUN<br>19:00 \u2014 00:00<\/b>\n          <span>IG&nbsp;&nbsp;FB&nbsp;&nbsp;TT&nbsp;&nbsp;LN<\/span>\n        <\/div>\n      <\/aside>\n\n      <div class=\"tg27-left-main\">\n        <section class=\"tg27-hero\">\n          <div class=\"tg27-word\">Taglio<span>.<\/span><i><\/i><b><\/b><\/div>\n          <div class=\"tg27-plate\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1547592180-85f173990554?auto=format&fit=crop&w=1600&q=92\" alt=\"\"><\/div>\n          <div class=\"tg27-claim\">\n            <h2>Italian cuisine,<br>without nostalgia.<\/h2>\n            <a href=\"javascript:void(0)\">DISCOVER MORE <span>\u2192<\/span><\/a>\n          <\/div>\n        <\/section>\n\n        <div class=\"tg27-ticker\"><div>SELECTED INGREDIENTS\u3000\u2014\u3000MODERN TECHNIQUE\u3000\u2014\u3000ITALIAN CUISINE\u3000\u2014\u3000CONTEMPORARY ROOTS\u3000\u2014\u3000PURE ESSENCE\u3000\u2014\u3000SELECTED INGREDIENTS\u3000\u2014\u3000MODERN TECHNIQUE<\/div><\/div>\n\n        <section class=\"tg27-cards\">\n          <article class=\"tg27-card\">\n            <small>01 \/<\/small><h3>EAT<\/h3><i><\/i>\n            <p>Real ingredients.<br>Clean technique.<br>Absolute respect<br>for the ingredients.<\/p>\n            <a href=\"javascript:void(0)\">\u2192<\/a>\n            <img decoding=\"async\" class=\"tg27-food-mini\" src=\"https:\/\/images.unsplash.com\/photo-1504674900247-0877df9cc836?auto=format&fit=crop&w=700&q=88\" alt=\"\">\n          <\/article>\n\n          <article class=\"tg27-card tg27-card-blue\">\n            <small>02 \/<\/small><h3>DRINKS<\/h3><i><\/i>\n            <p>Wines that tell<br>of places, people<br>and stories.<\/p>\n            <a href=\"javascript:void(0)\">\u2192<\/a>\n            <div class=\"tg27-bottle-real\"><img decoding=\"async\" src=\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/08\/Gemini_Generated_Image_bl7nbkbl7nbkbl7n-removebg-preview1.png\" alt=\"TAGLIO wine bottle\"><\/div>\n          <\/article>\n\n          <article class=\"tg27-card tg27-card-rest\">\n            <div><small>03 \/<\/small><h3>STAY<\/h3><i><\/i><p>An intimate, tactile<br>space.<br>For those who like<br>to take their time.<\/p><a href=\"javascript:void(0)\">\u2192<\/a><\/div>\n            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=900&q=88\" alt=\"\">\n          <\/article>\n        <\/section>\n      <\/div>\n    <\/section>\n\n    <!-- RIGHT \/ CLEAN MINI-SITE PRESENTATION -->\n    <section class=\"tg27-stage\">\n      <div class=\"tg27-stage-meta\"><span>SITE WITHIN A SITE<\/span><span>DESKTOP + MOBILE<\/span><\/div>\n\n      <article class=\"tg27-site\">\n        <aside class=\"tg27-mini-side\">\n          <strong>TAGLIO<span>.<\/span><\/strong>\n          <nav><span>MENU<\/span><span>DRINKS<\/span><span>SPACES<\/span><span>JOURNAL<\/span><span>CONTACT<\/span><\/nav>\n          <i><\/i><b>\u2192<\/b>\n          <div class=\"tg27-mini-foot\">MILAN<br>VIA SOLFERINO 15<br><br>TUE \u2014 SUN<br>19:00 \u2014 00:00<\/div>\n        <\/aside>\n\n        <div class=\"tg27-site-content\">\n          <!-- HERO -->\n          <section class=\"tg27-mini-hero\">\n            <div class=\"tg27-mini-title\">Taglio<span>.<\/span><i><\/i><b><\/b><\/div>\n            <div class=\"tg27-mini-plate\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1547592180-85f173990554?auto=format&fit=crop&w=1000&q=90\" alt=\"\"><\/div>\n            <div class=\"tg27-mini-claim\"><h3>Italian cuisine,<br>without nostalgia.<\/h3><a href=\"javascript:void(0)\">DISCOVER MORE\u3000\u2192<\/a><\/div>\n            <div class=\"tg27-mini-ticker\">ITALIAN CUISINE\u3000\u2014\u3000CONTEMPORARY ROOTS\u3000\u2014\u3000MODERN TECHNIQUE\u3000\u2014<\/div>\n          <\/section>\n\n          <!-- 01 MENU DISCOVERY -->\n          <section class=\"tg27-discovery\" data-active=\"0\">\n            <div class=\"tg27-discovery-copy\">\n              <small>[ 01 \/ MENU ]<\/small>\n              <h3>CHOOSE<br>YOUR CUT.<\/h3>\n              <p class=\"tg27-dish-copy\">Amberjack, citrus, fennel.<br>Pure ingredients, clean acidity.<\/p>\n              <div class=\"tg27-dish-nav\">\n                <button class=\"is-active\" type=\"button\" data-i=\"0\"><span>01<\/span><b>RAW<\/b><em>18<\/em><\/button>\n                <button type=\"button\" data-i=\"1\"><span>02<\/span><b>FIRE<\/b><em>24<\/em><\/button>\n                <button type=\"button\" data-i=\"2\"><span>03<\/span><b>PASTA<\/b><em>22<\/em><\/button>\n                <button type=\"button\" data-i=\"3\"><span>04<\/span><b>VERDE<\/b><em>16<\/em><\/button>\n              <\/div>\n            <\/div>\n            <div class=\"tg27-discovery-image\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1547592180-85f173990554?auto=format&fit=crop&w=900&q=90\" alt=\"\" class=\"tg27-dish-image\"><\/div>\n          <\/section>\n\n          <!-- 02 BOOKING -->\n          <section class=\"tg27-booking\">\n            <div class=\"tg27-booking-title\"><small>[ 02 \/ BOOK ]<\/small><h3>YOUR<br>TABLE.<\/h3><\/div>\n            <div class=\"tg27-booking-date\"><span>12<\/span><b>SEP<\/b><em>2026<\/em><\/div>\n            <div class=\"tg27-times\"><button type=\"button\">19:30<\/button><button type=\"button\">20:00<\/button><button class=\"is-active\" type=\"button\">20:30<\/button><button type=\"button\">21:30<\/button><\/div>\n            <div class=\"tg27-guests\"><span>2 GUESTS<\/span><b>\u2304<\/b><\/div>\n            <a href=\"javascript:void(0)\" class=\"tg27-book-now\">BOOK NOW\u3000\u2192<\/a>\n          <\/section>\n\n          <!-- 03 LOCATION + TRUST -->\n          <section class=\"tg27-location\">\n            <div class=\"tg27-location-copy\">\n              <small>[ 03 \/ MILAN ]<\/small>\n              <h3>VIA<br>SOLFERINO 15.<\/h3>\n              <div class=\"tg27-location-meta\"><span>45\u00b028' N \u00b7 9\u00b011' E<\/span><span>TUE \u2014 SUN \u00b7 19:00 \u2014 00:00<\/span><\/div>\n              <blockquote>\u201cItalian cuisine that finally stops looking back.\u201d<\/blockquote>\n              <div class=\"tg27-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\n            <\/div>\n            <div class=\"tg27-location-photo\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=900&q=88\" alt=\"\"><\/div>\n          <\/section>\n        <\/div>\n      <\/article>\n\n      <!-- PHONE \/ same system, simplified -->\n      <aside class=\"tg27-phone\">\n        <div class=\"tg27-phone-notch\"><\/div>\n        <div class=\"tg27-phone-screen\">\n          <header><strong>TAGLIO<span>.<\/span><\/strong><button type=\"button\" aria-label=\"Menu\"><i><\/i><i><\/i><\/button><\/header>\n          <section class=\"tg27-ph-hero\"><div class=\"tg27-ph-word\">Taglio<span>.<\/span><\/div><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1547592180-85f173990554?auto=format&fit=crop&w=600&q=88\" alt=\"\"><h3>Italian cuisine,<br>without nostalgia.<\/h3><\/section>\n          <div class=\"tg27-ph-ticker\">ITALIAN CUISINE\u3000\u2014\u3000MODERN TECHNIQUE\u3000\u2014<\/div>\n          <section class=\"tg27-ph-menu\"><small>[ 01 \/ MENU ]<\/small><h4>CHOOSE YOUR CUT.<\/h4><div><b>RAW<\/b><span>18<\/span><\/div><div><b>FIRE<\/b><span>24<\/span><\/div><div><b>PASTA<\/b><span>22<\/span><\/div><\/section>\n          <section class=\"tg27-ph-book\"><small>[ 02 \/ BOOK ]<\/small><div class=\"tg27-ph-time\"><span>19:30<\/span><span>20:00<\/span><span class=\"is-active\">20:30<\/span><\/div><a href=\"javascript:void(0)\">BOOK NOW\u3000\u2192<\/a><\/section>\n          <section class=\"tg27-ph-location\"><small>[ 03 \/ MILAN ]<\/small><h4>VIA SOLFERINO 15.<\/h4><div>TUE \u2014 SUN \u00b7 19:00 \u2014 00:00<\/div><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=500&q=84\" alt=\"\"><\/section>\n        <\/div>\n      <\/aside>\n    <\/section>\n  <\/div>\n<\/section>\n\n<style>\n#taglio-demo-2027,#taglio-demo-2027 *{box-sizing:border-box}\n#taglio-demo-2027{--white:#F5F6F7;--black:#070808;--red:#EF4035;--acid:#E8FF00;--blue:#AABCCA;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);overflow:hidden;background:#111;color:#111;font-family:\"Oswald\",sans-serif}\n#taglio-demo-2027 a{color:inherit;text-decoration:none}#taglio-demo-2027 img{display:block;width:100%;height:100%;object-fit:cover}#taglio-demo-2027 button{font:inherit;color:inherit}\n\n\/* OUTER *\/\n#taglio-demo-2027 .tg27-shell{width:100%;height:calc(100vh - 28px);min-height:820px;max-height:1000px;display:grid;grid-template-columns:50% 50%;overflow:hidden;border-radius:10px}\n\n\/* LEFT \u2014 preserved language *\/\n#taglio-demo-2027 .tg27-left{display:grid;grid-template-columns:15% 85%;min-width:0;overflow:hidden;background:var(--white)}\n#taglio-demo-2027 .tg27-side{padding:4vh 16%;display:flex;flex-direction:column;border-right:1px solid #D1D3D4;min-width:0}\n#taglio-demo-2027 .tg27-side-logo{font-size:clamp(24px,1.55vw,32px);font-weight:700;letter-spacing:-.055em}#taglio-demo-2027 .tg27-side-logo span{color:var(--red)}\n#taglio-demo-2027 .tg27-side nav{margin-top:11vh;display:flex;flex-direction:column;gap:22px}#taglio-demo-2027 .tg27-side nav a{font-size:10px;font-weight:500}\n#taglio-demo-2027 .tg27-side-rule{width:27px;height:1px;margin-top:35px;background:#111}#taglio-demo-2027 .tg27-side-arrow{width:42px;height:42px;margin-top:28px;display:grid;place-items:center;border:1px solid var(--red);border-radius:50%;color:var(--red);font-size:19px}\n#taglio-demo-2027 .tg27-side-bottom{margin-top:auto;font-size:7px;line-height:1.55}#taglio-demo-2027 .tg27-side-bottom b{font-weight:500}#taglio-demo-2027 .tg27-side-bottom i{display:block;width:22px;height:1px;margin:14px 0;background:var(--red)}#taglio-demo-2027 .tg27-side-bottom span{display:block;margin-top:25px}\n#taglio-demo-2027 .tg27-left-main{min-width:0;display:grid;grid-template-rows:1fr 32px 28%}\n#taglio-demo-2027 .tg27-hero{position:relative;overflow:hidden}#taglio-demo-2027 .tg27-word{position:absolute;z-index:4;top:7%;left:6%;font-size:clamp(122px,10vw,195px);font-weight:700;line-height:.82;letter-spacing:-.08em}#taglio-demo-2027 .tg27-word span{color:var(--red)}#taglio-demo-2027 .tg27-word i{position:absolute;left:-1%;top:64%;width:87%;height:3px;background:var(--red);transform:rotate(-15deg)}#taglio-demo-2027 .tg27-word b{position:absolute;left:2%;top:66%;width:40px;height:40px;border-radius:50%;background:var(--red)}\n#taglio-demo-2027 .tg27-plate{position:absolute;right:-31%;top:2%;width:66%;height:78%;overflow:hidden;border-radius:50%;box-shadow:-22px 27px 34px rgba(0,0,0,.10)}\n#taglio-demo-2027 .tg27-claim{position:absolute;z-index:5;left:7%;bottom:10%}#taglio-demo-2027 .tg27-claim h2{margin:0 0 27px;font-family:\"Cormorant Garamond\",serif;font-size:clamp(29px,1.9vw,39px);line-height:.95;font-weight:500}#taglio-demo-2027 .tg27-claim a{padding-bottom:6px;border-bottom:1px solid var(--red);font-size:9px;font-weight:500}#taglio-demo-2027 .tg27-claim a span{margin-left:20px;font-size:19px}\n#taglio-demo-2027 .tg27-ticker{overflow:hidden;display:flex;align-items:center;background:var(--acid);white-space:nowrap;font-size:7px;font-weight:500}#taglio-demo-2027 .tg27-ticker div{animation:tg27Ticker 28s linear infinite}@keyframes tg27Ticker{to{transform:translateX(-45%)}}\n#taglio-demo-2027 .tg27-cards{display:grid;grid-template-columns:1fr 1fr 1.38fr;gap:6px;padding:6px}#taglio-demo-2027 .tg27-card{position:relative;min-width:0;overflow:hidden;padding:8% 9%;border:1px solid rgba(0,0,0,.14);border-radius:10px}#taglio-demo-2027 .tg27-card small{color:var(--red);font-size:9px}#taglio-demo-2027 .tg27-card h3{margin:11px 0 0;font-size:clamp(23px,1.55vw,31px);line-height:1}#taglio-demo-2027 .tg27-card>i,#taglio-demo-2027 .tg27-card-rest>div>i{display:block;width:23px;height:1px;margin:14px 0;background:var(--red)}#taglio-demo-2027 .tg27-card p{margin:0;font-size:9px;font-weight:300;line-height:1.45}#taglio-demo-2027 .tg27-card>a,#taglio-demo-2027 .tg27-card-rest>div>a{position:absolute;left:9%;bottom:7%;font-size:20px}\n#taglio-demo-2027 .tg27-food-mini{position:absolute;right:-18%;bottom:-8%;width:68%!important;height:40%!important;border-radius:50% 50% 0 0}#taglio-demo-2027 .tg27-card-blue{background:var(--blue)}#taglio-demo-2027 .tg27-bottle-real{position:absolute;right:4%;bottom:-2%;width:72px;height:82%;display:flex;align-items:flex-end;justify-content:center}#taglio-demo-2027 .tg27-bottle-real img{object-fit:contain;filter:drop-shadow(0 12px 15px rgba(0,0,0,.22))}#taglio-demo-2027 .tg27-card-rest{display:grid;grid-template-columns:58% 42%;padding:0}#taglio-demo-2027 .tg27-card-rest>div{position:relative;padding:12%}#taglio-demo-2027 .tg27-card-rest>img{filter:brightness(.64) saturate(.74)}\n\n\/* RIGHT STAGE *\/\n#taglio-demo-2027 .tg27-stage{position:relative;min-width:0;overflow:hidden;background:#1D1D1D;color:#fff}#taglio-demo-2027 .tg27-stage-meta{position:absolute;z-index:4;left:4%;right:4%;top:18px;display:flex;justify-content:space-between;color:rgba(255,255,255,.72);font-size:7px;letter-spacing:.08em}\n#taglio-demo-2027 .tg27-site{position:absolute;z-index:10;left:3%;top:8%;width:76%;height:84%;overflow:hidden;border-radius:10px;background:var(--white);color:#111;box-shadow:0 22px 65px rgba(0,0,0,.32)}\n#taglio-demo-2027 .tg27-mini-side{position:absolute;z-index:20;left:0;top:0;bottom:0;width:14%;padding:5.2% 6% 4.5%;display:flex;flex-direction:column;background:var(--white);border-right:1px solid #D1D3D4;overflow:hidden}#taglio-demo-2027 .tg27-mini-side strong{font-size:9px;font-weight:700;letter-spacing:-.055em}#taglio-demo-2027 .tg27-mini-side strong span{color:var(--red)}#taglio-demo-2027 .tg27-mini-side nav{margin-top:34%;display:flex;flex-direction:column;gap:7px;font-size:4px;font-weight:500}#taglio-demo-2027 .tg27-mini-side>i{width:15px;height:1px;margin-top:15px;background:#111}#taglio-demo-2027 .tg27-mini-side>b{width:23px;height:23px;margin-top:12px;display:grid;place-items:center;border:1px solid var(--red);border-radius:50%;color:var(--red);font-size:10px}#taglio-demo-2027 .tg27-mini-foot{margin-top:auto;font-size:3.5px;line-height:1.55;font-weight:500}\n#taglio-demo-2027 .tg27-site-content{position:absolute;left:14%;right:0;top:0;bottom:0;display:grid;grid-template-rows:28% 30% 17% 25%;overflow:hidden}\n\n\/* mini hero *\/\n#taglio-demo-2027 .tg27-mini-hero{position:relative;overflow:hidden;background:var(--white)}#taglio-demo-2027 .tg27-mini-title{position:absolute;z-index:3;left:6%;top:8%;font-size:clamp(44px,4vw,76px);font-weight:700;line-height:.82;letter-spacing:-.08em}#taglio-demo-2027 .tg27-mini-title span{color:var(--red)}#taglio-demo-2027 .tg27-mini-title i{position:absolute;left:-1%;top:65%;width:88%;height:2px;background:var(--red);transform:rotate(-15deg)}#taglio-demo-2027 .tg27-mini-title b{position:absolute;left:2%;top:66%;width:18px;height:18px;border-radius:50%;background:var(--red)}#taglio-demo-2027 .tg27-mini-plate{position:absolute;right:-13%;top:-4%;width:51%;height:112%;overflow:hidden;border-radius:50%}#taglio-demo-2027 .tg27-mini-claim{position:absolute;left:7%;bottom:15%}#taglio-demo-2027 .tg27-mini-claim h3{margin:0 0 8px;font-family:\"Cormorant Garamond\",serif;font-size:clamp(12px,1vw,18px);line-height:.96;font-weight:500}#taglio-demo-2027 .tg27-mini-claim a{padding-bottom:3px;border-bottom:1px solid var(--red);font-size:4px;font-weight:500}#taglio-demo-2027 .tg27-mini-ticker{position:absolute;left:0;right:0;bottom:0;height:9%;display:flex;align-items:center;padding:0 2%;overflow:hidden;background:var(--acid);white-space:nowrap;font-size:3.4px;font-weight:500}\n\n\/* menu discovery *\/\n#taglio-demo-2027 .tg27-discovery{display:grid;grid-template-columns:56% 44%;min-height:0;background:var(--black);color:#fff;border-top:1px solid rgba(255,255,255,.1)}#taglio-demo-2027 .tg27-discovery-copy{padding:6% 7%;min-width:0}#taglio-demo-2027 .tg27-discovery small,#taglio-demo-2027 .tg27-booking small,#taglio-demo-2027 .tg27-location small{color:var(--red);font-size:4px;font-weight:500;letter-spacing:.05em}#taglio-demo-2027 .tg27-discovery h3{margin:6px 0 5px;font-size:clamp(14px,1.25vw,24px);line-height:.86;font-weight:400}#taglio-demo-2027 .tg27-dish-copy{margin:0 0 7px;color:rgba(255,255,255,.68);font-size:3.7px;line-height:1.45}#taglio-demo-2027 .tg27-dish-nav{display:flex;flex-direction:column}#taglio-demo-2027 .tg27-dish-nav button{display:grid;grid-template-columns:18px 1fr 18px;gap:5px;align-items:center;min-height:20px;padding:0;border:0;border-bottom:1px solid rgba(255,255,255,.14);background:transparent;color:#fff;text-align:left;cursor:pointer;font-size:4px}#taglio-demo-2027 .tg27-dish-nav button span{color:var(--red)}#taglio-demo-2027 .tg27-dish-nav button em{font-style:normal;text-align:right;color:var(--red)}#taglio-demo-2027 .tg27-dish-nav button.is-active{padding:0 5px;background:var(--acid);color:#111}#taglio-demo-2027 .tg27-dish-nav button.is-active span,#taglio-demo-2027 .tg27-dish-nav button.is-active em{color:#111}#taglio-demo-2027 .tg27-discovery-image{position:relative;overflow:hidden}#taglio-demo-2027 .tg27-discovery-image img{filter:brightness(.72) saturate(.88)}#taglio-demo-2027 .tg27-discovery-image:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,8,8,.7),transparent 34%)}\n\n\/* booking *\/\n#taglio-demo-2027 .tg27-booking{display:grid;grid-template-columns:1.08fr .55fr 1.45fr .7fr 1fr;gap:7px;align-items:center;padding:4% 5%;background:var(--blue);color:#111}#taglio-demo-2027 .tg27-booking-title h3{margin:4px 0 0;font-family:\"Cormorant Garamond\",serif;font-size:clamp(12px,1vw,18px);line-height:.95;font-weight:500}#taglio-demo-2027 .tg27-booking-date{text-align:center;border-left:1px solid rgba(0,0,0,.15);border-right:1px solid rgba(0,0,0,.15)}#taglio-demo-2027 .tg27-booking-date span{display:block;font-size:clamp(18px,1.6vw,30px);font-weight:600;line-height:.85}#taglio-demo-2027 .tg27-booking-date b{display:block;margin-top:2px;color:var(--red);font-size:4px}#taglio-demo-2027 .tg27-booking-date em{display:block;font-style:normal;font-size:3px}#taglio-demo-2027 .tg27-times{display:grid;grid-template-columns:repeat(2,1fr);gap:3px}#taglio-demo-2027 .tg27-times button{height:21px;border:1px solid rgba(0,0,0,.35);background:transparent;font-size:3.4px;cursor:pointer}#taglio-demo-2027 .tg27-times button.is-active{border-color:var(--acid);background:var(--acid)}#taglio-demo-2027 .tg27-guests{display:flex;justify-content:space-between;padding-bottom:4px;border-bottom:1px solid rgba(0,0,0,.45);font-size:3.5px}#taglio-demo-2027 .tg27-book-now{height:26px;display:flex;align-items:center;justify-content:center;background:var(--acid);color:#111;font-size:4px;font-weight:500}\n\n\/* location *\/\n#taglio-demo-2027 .tg27-location{display:grid;grid-template-columns:55% 45%;min-height:0;background:var(--white);color:#111;border-top:1px solid rgba(0,0,0,.11)}#taglio-demo-2027 .tg27-location-copy{padding:6% 7%;min-width:0}#taglio-demo-2027 .tg27-location h3{margin:7px 0 9px;font-size:clamp(16px,1.35vw,26px);line-height:.85;font-weight:400}#taglio-demo-2027 .tg27-location-meta{display:flex;flex-direction:column;gap:3px;padding-top:7px;border-top:1px solid rgba(0,0,0,.18);font-size:3.5px}#taglio-demo-2027 .tg27-location blockquote{margin:9px 0 5px;font-family:\"Cormorant Garamond\",serif;font-size:clamp(7px,.62vw,11px);line-height:1.05;font-style:italic}#taglio-demo-2027 .tg27-stars{display:inline-block;padding:2px 5px;background:var(--acid);font-size:4px;letter-spacing:.12em}#taglio-demo-2027 .tg27-location-photo{overflow:hidden}#taglio-demo-2027 .tg27-location-photo img{filter:brightness(.72) saturate(.82)}\n\n\/* PHONE *\/\n#taglio-demo-2027 .tg27-phone{position:absolute;z-index:30;right:1.5%;bottom:11%;width:22%;min-width:132px;height:61%;overflow:hidden;border:5px solid #090909;border-radius:27px;background:#090909;box-shadow:0 22px 50px rgba(0,0,0,.48)}#taglio-demo-2027 .tg27-phone-notch{position:absolute;z-index:20;left:50%;top:0;width:44%;height:16px;transform:translateX(-50%);border-radius:0 0 10px 10px;background:#090909}#taglio-demo-2027 .tg27-phone-screen{height:100%;display:grid;grid-template-rows:8% 23% 4% 25% 17% 23%;overflow:hidden;border-radius:21px;background:var(--white);color:#111}#taglio-demo-2027 .tg27-phone header{padding:14px 9px 4px;display:flex;align-items:center;justify-content:space-between}#taglio-demo-2027 .tg27-phone header strong{font-size:9px}#taglio-demo-2027 .tg27-phone header strong span{color:var(--red)}#taglio-demo-2027 .tg27-phone header button{width:18px;padding:0;border:0;background:transparent}#taglio-demo-2027 .tg27-phone header button i{display:block;height:1px;margin:4px 0;background:#111}\n#taglio-demo-2027 .tg27-ph-hero{position:relative;overflow:hidden;background:#fff}#taglio-demo-2027 .tg27-ph-hero img{height:55%;object-position:center}#taglio-demo-2027 .tg27-ph-word{position:absolute;z-index:2;left:7px;top:6px;font-size:13px;font-weight:700;letter-spacing:-.06em}#taglio-demo-2027 .tg27-ph-word span{color:var(--red)}#taglio-demo-2027 .tg27-ph-hero h3{margin:5px 7px 0;font-family:\"Cormorant Garamond\",serif;font-size:8.5px;line-height:.94;font-weight:500}#taglio-demo-2027 .tg27-ph-ticker{display:flex;align-items:center;padding:0 5px;overflow:hidden;background:var(--acid);white-space:nowrap;font-size:1.9px}\n#taglio-demo-2027 .tg27-ph-menu{padding:8px;background:var(--black);color:#fff}#taglio-demo-2027 .tg27-phone small{font-size:2.4px}#taglio-demo-2027 .tg27-ph-menu h4,#taglio-demo-2027 .tg27-ph-location h4{margin:4px 0 6px;font-size:7.5px;font-weight:400}#taglio-demo-2027 .tg27-ph-menu>div{min-height:16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.13);font-size:2.6px}#taglio-demo-2027 .tg27-ph-menu span{color:var(--red)}\n#taglio-demo-2027 .tg27-ph-book{padding:7px 8px;background:var(--blue)}#taglio-demo-2027 .tg27-ph-time{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:5px}#taglio-demo-2027 .tg27-ph-time span{display:grid;place-items:center;height:17px;border:1px solid rgba(0,0,0,.3);font-size:2.4px}#taglio-demo-2027 .tg27-ph-time span.is-active{background:var(--acid);border-color:var(--acid)}#taglio-demo-2027 .tg27-ph-book a{height:18px;margin-top:4px;display:flex;align-items:center;justify-content:center;background:var(--acid);color:#111;font-size:2.5px;font-weight:500}\n#taglio-demo-2027 .tg27-ph-location{position:relative;padding:7px 8px;overflow:hidden;background:var(--white)}#taglio-demo-2027 .tg27-ph-location>div{position:relative;z-index:2;font-size:2.3px}#taglio-demo-2027 .tg27-ph-location h4{position:relative;z-index:2}#taglio-demo-2027 .tg27-ph-location img{position:absolute;right:0;bottom:0;width:47%;height:58%;filter:brightness(.68)}\n\n\/* TABLET *\/\n@media(max-width:1180px) and (min-width:701px){\n#taglio-demo-2027 .tg27-shell{height:820px;min-height:820px;grid-template-columns:48% 52%}\n#taglio-demo-2027 .tg27-left{grid-template-columns:16% 84%}#taglio-demo-2027 .tg27-side{padding:28px 12px}#taglio-demo-2027 .tg27-side-logo{font-size:20px}#taglio-demo-2027 .tg27-side nav{margin-top:68px;gap:15px}#taglio-demo-2027 .tg27-side nav a{font-size:7px}#taglio-demo-2027 .tg27-side-bottom{font-size:5px}#taglio-demo-2027 .tg27-left-main{grid-template-rows:1fr 24px 28%}#taglio-demo-2027 .tg27-word{top:8%;left:5%;font-size:11.4vw}#taglio-demo-2027 .tg27-word b{width:27px;height:27px}#taglio-demo-2027 .tg27-plate{right:-41%;top:4%;width:77%;height:71%}#taglio-demo-2027 .tg27-claim h2{font-size:27px;margin-bottom:18px}#taglio-demo-2027 .tg27-card h3{font-size:20px}#taglio-demo-2027 .tg27-card p{font-size:6.4px}\n#taglio-demo-2027 .tg27-site{left:3%;top:8%;width:78%;height:84%}#taglio-demo-2027 .tg27-mini-title{font-size:45px}#taglio-demo-2027 .tg27-phone{right:1%;bottom:11%;width:21.5%;min-width:128px;height:59%}\n}\n\n\/* MOBILE PAGE *\/\n@media(max-width:700px){\n#taglio-demo-2027{width:100%;margin-left:0;margin-right:0}#taglio-demo-2027 .tg27-shell{height:auto;min-height:0;max-height:none;display:block}\n#taglio-demo-2027 .tg27-left{height:560px;grid-template-columns:17% 83%}#taglio-demo-2027 .tg27-side{padding:18px 8px}#taglio-demo-2027 .tg27-side-logo{font-size:17px}#taglio-demo-2027 .tg27-side nav{margin-top:54px;gap:13px}#taglio-demo-2027 .tg27-side nav a{font-size:6.5px}#taglio-demo-2027 .tg27-side-arrow{width:30px;height:30px;margin-top:18px;font-size:14px}#taglio-demo-2027 .tg27-side-bottom{font-size:4.3px}#taglio-demo-2027 .tg27-left-main{grid-template-rows:1fr 22px 26%}#taglio-demo-2027 .tg27-word{top:8.5%;left:5%;font-size:20vw}#taglio-demo-2027 .tg27-word b{width:23px;height:23px}#taglio-demo-2027 .tg27-plate{right:-52%;top:5%;width:97%;height:66%}#taglio-demo-2027 .tg27-claim h2{font-size:22px;margin-bottom:15px}#taglio-demo-2027 .tg27-card h3{font-size:15px}#taglio-demo-2027 .tg27-card p{font-size:5.4px}#taglio-demo-2027 .tg27-bottle-real{width:42px;height:72%}\n#taglio-demo-2027 .tg27-stage{height:590px;margin-top:10px;border-radius:10px}#taglio-demo-2027 .tg27-stage-meta{top:12px;left:3%;right:3%;font-size:4px}#taglio-demo-2027 .tg27-site{left:3%;top:42px;width:76%;height:515px}#taglio-demo-2027 .tg27-mini-side{width:14%;padding:4.8% 5% 3.5%}#taglio-demo-2027 .tg27-mini-side strong{font-size:6.4px}#taglio-demo-2027 .tg27-mini-side nav{margin-top:28%;gap:5px;font-size:3px}#taglio-demo-2027 .tg27-mini-foot{font-size:2.5px}#taglio-demo-2027 .tg27-site-content{left:14%}#taglio-demo-2027 .tg27-mini-title{font-size:32px}#taglio-demo-2027 .tg27-mini-claim h3{font-size:8.8px}#taglio-demo-2027 .tg27-mini-ticker{font-size:2.1px}#taglio-demo-2027 .tg27-discovery h3{font-size:10px}#taglio-demo-2027 .tg27-dish-copy{font-size:2.5px}#taglio-demo-2027 .tg27-dish-nav button{min-height:15px;font-size:2.6px;grid-template-columns:13px 1fr 13px}#taglio-demo-2027 .tg27-booking{gap:3px;padding:3.5% 4%}#taglio-demo-2027 .tg27-booking-title h3{font-size:8px}#taglio-demo-2027 .tg27-booking-date span{font-size:18px}#taglio-demo-2027 .tg27-times button{height:15px;font-size:2.2px}#taglio-demo-2027 .tg27-guests{font-size:2.2px}#taglio-demo-2027 .tg27-book-now{height:19px;font-size:2.4px}#taglio-demo-2027 .tg27-location h3{font-size:10px}#taglio-demo-2027 .tg27-location-meta{font-size:2.3px}#taglio-demo-2027 .tg27-location blockquote{font-size:5px}\n#taglio-demo-2027 .tg27-phone{right:4px;bottom:34px;width:22%;min-width:92px;height:385px;border-width:4px;border-radius:23px}#taglio-demo-2027 .tg27-phone-notch{height:13px}#taglio-demo-2027 .tg27-ph-word{font-size:10px}#taglio-demo-2027 .tg27-ph-hero h3{font-size:6.6px}#taglio-demo-2027 .tg27-ph-menu h4,#taglio-demo-2027 .tg27-ph-location h4{font-size:5.8px}#taglio-demo-2027 .tg27-ph-menu>div{min-height:12px;font-size:2px}#taglio-demo-2027 .tg27-ph-time span{height:13px;font-size:1.8px}#taglio-demo-2027 .tg27-ph-book a{height:14px;font-size:1.9px}\n}\n\n@media(max-width:430px){#taglio-demo-2027 .tg27-left{height:540px}#taglio-demo-2027 .tg27-stage{height:555px}#taglio-demo-2027 .tg27-site{top:39px;width:76%;height:485px}#taglio-demo-2027 .tg27-phone{width:22.5%;min-width:84px;height:360px;bottom:29px}}\n<\/style>\n\n<script>\n(function(){\n  function initTaglio(){\n    const root=document.querySelector('#taglio-demo-2027');\n    if(!root || root.dataset.tg27Ready==='1') return;\n\n    const copy=root.querySelector('.tg27-dish-copy');\n    const img=root.querySelector('.tg27-dish-image');\n    const dishButtons=[...root.querySelectorAll('.tg27-dish-nav button')];\n    const timeButtons=[...root.querySelectorAll('.tg27-times button')];\n\n    if(!copy || !img || !dishButtons.length) return;\n    root.dataset.tg27Ready='1';\n\n    const dishes=[\n      {copy:'Amberjack, citrus, fennel.<br>Pure ingredients, clean acidity.',img:'https:\/\/images.unsplash.com\/photo-1547592180-85f173990554?auto=format&fit=crop&w=900&q=90'},\n      {copy:'Live fire, deep jus.<br>Fire as an ingredient.',img:'https:\/\/images.unsplash.com\/photo-1544025162-d76694265947?auto=format&fit=crop&w=900&q=90'},\n      {copy:'Fresh pasta, cultured butter.<br>Tradition without imitation.',img:'https:\/\/images.unsplash.com\/photo-1473093295043-cdd812d0e601?auto=format&fit=crop&w=900&q=90'},\n      {copy:'Seasonal vegetables.<br>Texture, herbs and precision.',img:'https:\/\/images.unsplash.com\/photo-1512621776951-a57141f2eefd?auto=format&fit=crop&w=900&q=90'}\n    ];\n\n    dishButtons.forEach(btn=>{\n      btn.addEventListener('click',event=>{\n        event.preventDefault();\n        event.stopPropagation();\n        dishButtons.forEach(x=>x.classList.remove('is-active'));\n        btn.classList.add('is-active');\n        const d=dishes[Number(btn.dataset.i)];\n        if(!d) return;\n        copy.innerHTML=d.copy;\n        img.src=d.img;\n      });\n    });\n\n    timeButtons.forEach(btn=>{\n      btn.addEventListener('click',event=>{\n        event.preventDefault();\n        event.stopPropagation();\n        timeButtons.forEach(x=>x.classList.remove('is-active'));\n        btn.classList.add('is-active');\n      });\n    });\n  }\n\n  if(document.readyState==='loading'){\n    document.addEventListener('DOMContentLoaded',initTaglio,{once:true});\n  }else{\n    initTaglio();\n  }\n\n  requestAnimationFrame(initTaglio);\n  window.addEventListener('pageshow',initTaglio);\n})();\n<\/script>\n<\/template>\n\n<template id=\"yduTplForm\">\n<!-- =========================================================\nFORM. \/ OBJECTS WITH PURPOSE\nYU.DESIGN \u2014 DEMO SITI 2027\n\nFINAL METRIC-SAFE VERSION\n- MASTER BOARD: 50\/50, 820\u20131000px\n- RIGHT DESKTOP OBJECT: 78% \u00d7 84%\n- RIGHT MOBILE OBJECT: 25% \u00d7 64%\n- INTERNAL DESKTOP USES EXACT 100% HEIGHT\n- NO OVERFLOW \/ NO CUT CONTENT\n- ORANGE PANEL IS PART OF THE DESKTOP GRID\n- TRUE MOBILE: HERO \u2192 PRODUCTS \u2192 PRODUCT DETAIL\n- ONLY THE 5 APPROVED USER ASSETS\n========================================================= -->\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Instrument+Serif&family=Inter:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n\n<section id=\"form-metric-final\">\n\n  <div class=\"fmf-shell\">\n\n    <!-- =====================================================\n    LEFT \/ HERO\n    ====================================================== -->\n\n    <section class=\"fmf-left\">\n\n      <header class=\"fmf-left-header\">\n\n        <a href=\"javascript:void(0)\" class=\"fmf-logo\">\n          FORM<span>.<\/span>\n        <\/a>\n\n        <nav class=\"fmf-nav\">\n          <a href=\"javascript:void(0)\">shop<\/a>\n          <a href=\"javascript:void(0)\">collections<\/a>\n          <a href=\"javascript:void(0)\">objects<\/a>\n          <a href=\"javascript:void(0)\">about<\/a>\n        <\/nav>\n\n        <div class=\"fmf-tools\">\n          <button type=\"button\">search<\/button>\n          <button type=\"button\">wishlist (0)<\/button>\n          <button type=\"button\">bag (02)<i><\/i><\/button>\n        <\/div>\n\n      <\/header>\n\n\n      <div class=\"fmf-index\">\n        <span>01<\/span>\n        <i><\/i>\n        <span>03<\/span>\n      <\/div>\n\n\n      <div class=\"fmf-hero-copy\">\n\n        <div class=\"fmf-kicker\">\n          <span>form \/ 01<\/span>\n          <span>new collection \u2014 <b>2027<\/b><\/span>\n        <\/div>\n\n        <h1>\n          <span><em>O<\/em>bjects<\/span>\n          <span>with<\/span>\n          <span>purpose<b>.<\/b><\/span>\n        <\/h1>\n\n        <div class=\"fmf-meta\">\n          <span>l01 floor lamp<\/span>\n          <i><\/i>\n          <span>brushed aluminium<\/span>\n          <i><\/i>\n          <strong>\u20ac690<\/strong>\n        <\/div>\n\n        <a href=\"javascript:void(0)\" class=\"fmf-discover\">\n          discover collection\n          <span>\u2192<\/span>\n        <\/a>\n\n      <\/div>\n\n\n      <div class=\"fmf-hero-product\">\n        <img decoding=\"async\"\n          src=\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-30-ago-2026-11_08_56.webp\"\n          alt=\"L01 floor lamp\">\n      <\/div>\n\n\n      <div class=\"fmf-material-bar\">\n\n        <div>\n          <small>material<\/small>\n          <strong>aluminium<\/strong>\n        <\/div>\n\n        <div class=\"fmf-materials\">\n\n          <button class=\"is-active\" type=\"button\">\n            <i class=\"silver\"><\/i>\n            aluminium\n          <\/button>\n\n          <button type=\"button\">\n            <i class=\"black\"><\/i>\n            black\n          <\/button>\n\n          <button type=\"button\">\n            <i class=\"wine\"><\/i>\n            wine\n          <\/button>\n\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"fmf-strip\">\n\n        <article>\n          <span>02<\/span>\n          <strong>lounge chair<\/strong>\n          <img decoding=\"async\"\n            src=\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-30-ago-2026-11_11_19.webp\"\n            alt=\"\">\n        <\/article>\n\n        <article>\n          <span>03<\/span>\n          <strong>ceramic vase<\/strong>\n          <img decoding=\"async\"\n            src=\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-30-ago-2026-11_13_35.webp\"\n            alt=\"\">\n        <\/article>\n\n        <article>\n          <span>01<\/span>\n          <strong>floor lamp<\/strong>\n          <img decoding=\"async\"\n            src=\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-30-ago-2026-11_08_56.webp\"\n            alt=\"\">\n        <\/article>\n\n        <article>\n          <span>04<\/span>\n          <strong>side table<\/strong>\n          <img decoding=\"async\"\n            src=\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-30-ago-2026-11_17_31.webp\"\n            alt=\"\">\n        <\/article>\n\n      <\/div>\n\n    <\/section>\n\n\n\n    <!-- =====================================================\n    RIGHT \/ PRESENTATION\n    ====================================================== -->\n\n    <section class=\"fmf-stage\">\n\n      <div class=\"fmf-stage-grid\"><\/div>\n\n      <div class=\"fmf-stage-meta\">\n        <span>FORM \/ PRODUCT EXPERIENCE<\/span>\n        <span>DESKTOP + MOBILE<\/span>\n      <\/div>\n\n      <article class=\"fmf-desktop\">\n\n        <header class=\"fmf-site-header\">\n          <strong>FORM<span>.<\/span><\/strong>\n          <nav>\n            <a href=\"javascript:void(0)\">objects<\/a>\n            <a href=\"javascript:void(0)\">collection 01<\/a>\n            <a href=\"javascript:void(0)\">about<\/a>\n          <\/nav>\n          <span>bag (02)<\/span>\n        <\/header>\n\n        <!-- 01 \/ OBJECT FIELD -->\n        <section class=\"fmf-object-field\">\n\n          <div class=\"fmf-field-label\">\n            <span>collection \/ 01<\/span>\n            <strong>collection objects<\/strong>\n          <\/div>\n\n          <button class=\"fmf-field-object fmf-obj-lamp is-active\"\n            type=\"button\"\n            data-object=\"lamp\"\n            data-name=\"L01 FLOOR LAMP\"\n            data-price=\"\u20ac690\">\n            <img decoding=\"async\" src=\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-30-ago-2026-11_08_56.webp\" alt=\"L01 floor lamp\">\n            <span>L01 \/ LIGHTING \/ \u20ac690<\/span>\n          <\/button>\n\n          <button class=\"fmf-field-object fmf-obj-chair is-related\"\n            type=\"button\"\n            data-object=\"chair\"\n            data-name=\"C04 LOUNGE CHAIR\"\n            data-price=\"\u20ac520\">\n            <img decoding=\"async\" src=\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-30-ago-2026-11_11_19.webp\" alt=\"C04 lounge chair\">\n            <span>C04 \/ SEATING \/ \u20ac520<\/span>\n          <\/button>\n\n          <button class=\"fmf-field-object fmf-obj-vase is-related\"\n            type=\"button\"\n            data-object=\"vase\"\n            data-name=\"V03 CERAMIC VASE\"\n            data-price=\"\u20ac180\">\n            <img decoding=\"async\" src=\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-30-ago-2026-11_13_35.webp\" alt=\"V03 ceramic vase\">\n            <span>V03 \/ OBJECT \/ \u20ac180<\/span>\n          <\/button>\n\n          <button class=\"fmf-field-object fmf-obj-table is-related\"\n            type=\"button\"\n            data-object=\"table\"\n            data-name=\"T03 SIDE TABLE\"\n            data-price=\"\u20ac420\">\n            <img decoding=\"async\" src=\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-30-ago-2026-11_17_31.webp\" alt=\"T03 side table\">\n            <span>T03 \/ TABLE \/ \u20ac420<\/span>\n          <\/button>\n\n          <div class=\"fmf-field-caption\">\n            <small>configurable object<\/small>\n            <strong id=\"fmf-selected-object\">L01 FLOOR LAMP<\/strong>\n          <\/div>\n\n        <\/section>\n\n        <!-- 02 \/ PRODUCT WORKBENCH -->\n        <section class=\"fmf-workbench\">\n\n          <div class=\"fmf-workbench-title\">\n            <small>CONFIGURE \/ L01<\/small>\n            <strong>Make it yours.<\/strong>\n          <\/div>\n\n          <div class=\"fmf-control fmf-control-finish\">\n            <span>finish<\/span>\n            <div>\n              <button class=\"is-active\" type=\"button\" data-finish=\"brushed aluminium\" aria-label=\"Brushed aluminium\" aria-pressed=\"true\"><i class=\"silver\"><\/i><\/button>\n              <button type=\"button\" data-finish=\"black anodised\" aria-label=\"Black anodised\" aria-pressed=\"false\"><i class=\"black\"><\/i><\/button>\n              <button type=\"button\" data-finish=\"wine lacquer\" aria-label=\"Wine lacquer\" aria-pressed=\"false\"><i class=\"wine\"><\/i><\/button>\n            <\/div>\n            <strong id=\"fmf-finish-value\">brushed aluminium<\/strong>\n          <\/div>\n\n          <div class=\"fmf-control fmf-control-range\">\n            <span>light<\/span>\n            <input id=\"fmf-light-range\" type=\"range\" min=\"2700\" max=\"4000\" step=\"100\" value=\"2700\">\n            <strong><b id=\"fmf-light-value\">2700<\/b>K<\/strong>\n          <\/div>\n\n          <div class=\"fmf-control fmf-control-range\">\n            <span>height<\/span>\n            <input id=\"fmf-height-range\" type=\"range\" min=\"1200\" max=\"1600\" step=\"50\" value=\"1450\">\n            <strong><b id=\"fmf-height-value\">1450<\/b> mm<\/strong>\n          <\/div>\n\n          <div class=\"fmf-buy\">\n            <div>\n              <small>configured price<\/small>\n              <strong id=\"fmf-config-price\">\u20ac690<\/strong>\n            <\/div>\n            <button type=\"button\">add to bag <span>\uff0b<\/span><\/button>\n          <\/div>\n\n        <\/section>\n\n        <!-- 03 \/ EXPLODED DETAIL -->\n        <section class=\"fmf-exploded\">\n\n          <div class=\"fmf-exploded-head\">\n            <small>DETAIL \/ 03<\/small>\n            <strong>Built from<br>the essentials.<\/strong>\n          <\/div>\n\n          <div class=\"fmf-detail-visual\">\n            <img decoding=\"async\" src=\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-30-ago-2026-11_15_35.webp\" alt=\"L01 detail\">\n\n            <span class=\"fmf-callout fmf-callout-1\"><b>01<\/b> brushed aluminium<\/span>\n            <span class=\"fmf-callout fmf-callout-2\"><b>02<\/b> integrated LED<\/span>\n            <span class=\"fmf-callout fmf-callout-3\"><b>03<\/b> balanced joint<\/span>\n            <span class=\"fmf-callout fmf-callout-4\"><b>04<\/b> weighted base<\/span>\n          <\/div>\n\n          <div class=\"fmf-exploded-note\">\n            <span>material<\/span>\n            <strong id=\"fmf-detail-finish\">brushed aluminium<\/strong>\n            <small>Designed as one continuous system of structure, finish and light.<\/small>\n          <\/div>\n\n        <\/section>\n\n      <\/article>\n\n      <!-- TRUE MOBILE: OBJECT \u2192 CONFIGURE \u2192 DETAIL -->\n      <aside class=\"fmf-phone\">\n\n        <div class=\"fmf-phone-notch\"><\/div>\n\n        <div class=\"fmf-phone-screen\">\n\n          <header class=\"fmf-mobile-head\">\n            <strong>FORM<span>.<\/span><\/strong>\n            <button type=\"button\" aria-label=\"Open menu\">\u2630<\/button>\n          <\/header>\n\n          <section class=\"fmf-mobile-object\">\n            <small>L01 \/ LIGHTING<\/small>\n            <img decoding=\"async\" src=\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-30-ago-2026-11_08_56.webp\" alt=\"\">\n            <h4>floor<br>lamp.<\/h4>\n            <div>\n              <span class=\"fmf-mobile-finish-label\">brushed aluminium<\/span>\n              <strong>\u20ac690<\/strong>\n            <\/div>\n          <\/section>\n\n          <section class=\"fmf-mobile-config\">\n            <small>configure<\/small>\n            <div class=\"fmf-mobile-finishes\">\n              <button class=\"is-active\" type=\"button\" data-finish=\"brushed aluminium\" aria-label=\"Brushed aluminium\" aria-pressed=\"true\"><i class=\"silver\"><\/i><\/button>\n              <button type=\"button\" data-finish=\"black anodised\" aria-label=\"Black anodised\" aria-pressed=\"false\"><i class=\"black\"><\/i><\/button>\n              <button type=\"button\" data-finish=\"wine lacquer\" aria-label=\"Wine lacquer\" aria-pressed=\"false\"><i class=\"wine\"><\/i><\/button>\n            <\/div>\n            <div class=\"fmf-mobile-spec\">\n              <span>light<\/span>\n              <strong>2700K<\/strong>\n            <\/div>\n            <div class=\"fmf-mobile-spec\">\n              <span>height<\/span>\n              <strong>1450 mm<\/strong>\n            <\/div>\n          <\/section>\n\n          <section class=\"fmf-mobile-detail\">\n            <img decoding=\"async\" src=\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-30-ago-2026-11_15_35.webp\" alt=\"\">\n            <span>01 \u2014 aluminium<\/span>\n            <span>02 \u2014 integrated LED<\/span>\n          <\/section>\n\n          <button class=\"fmf-mobile-add\" type=\"button\">\n            add to bag\n            <span>\uff0b<\/span>\n          <\/button>\n\n        <\/div>\n\n      <\/aside>\n\n    <\/section>\n\n  <\/div>\n\n<\/section>\n\n\n<style>\n\n#form-metric-final{\n\n  \/* DESIGN SYSTEM \u2014 same visual language, normalized *\/\n  --paper:#F4F4F1;\n  --paper-2:#F8F8F5;\n  --stage:#DCDCD8;\n  --detail:#D0D0CC;\n  --ink:#0A0A0A;\n  --muted:rgba(10,10,10,.62);\n  --line:rgba(10,10,10,.14);\n  --line-strong:rgba(10,10,10,.20);\n  --orange:#F15A24;\n\n  --serif:\"Instrument Serif\",Georgia,serif;\n  --sans:\"Inter\",Arial,sans-serif;\n\n  --fs-micro:5px;\n  --fs-label:6px;\n  --fs-ui:7px;\n  --fs-small:8px;\n  --fs-body:9px;\n\n  --sp-1:4px;\n  --sp-2:8px;\n  --sp-3:12px;\n  --sp-4:16px;\n  --sp-5:24px;\n\n  --radius-phone:24px;\n  --control-size:17px;\n  --control-thumb:9px;\n\n  width:100%;\n\n  overflow:hidden;\n\n  background:var(--paper);\n\n  color:var(--ink);\n\n  font-family:var(--sans);\n}\n\n#form-metric-final *,\n#form-metric-final *::before,\n#form-metric-final *::after{\n  box-sizing:border-box;\n}\n\n#form-metric-final a{\n  color:inherit;\n  text-decoration:none;\n}\n\n#form-metric-final button{\n  font:inherit;\n  color:inherit;\n  -webkit-tap-highlight-color:transparent;\n}\n\n#form-metric-final a{\n  -webkit-tap-highlight-color:transparent;\n}\n\n#form-metric-final button:focus-visible,\n#form-metric-final a:focus-visible,\n#form-metric-final input:focus-visible{\n  outline:1px solid var(--ink);\n  outline-offset:3px;\n}\n\n\n\/* =========================================================\nMASTER BOARD\n========================================================= *\/\n\n#form-metric-final .fmf-shell{\n\n  width:100%;\n\n  height:calc(100vh - 28px);\n  min-height:820px;\n  max-height:1000px;\n\n  display:grid;\n\n  grid-template-columns:50% 50%;\n\n  overflow:hidden;\n\n  background:var(--paper);\n\n  border:1px solid rgba(10,10,10,.12);\n}\n\n\n\/* =========================================================\nLEFT\n========================================================= *\/\n\n#form-metric-final .fmf-left{\n\n  position:relative;\n\n  display:grid;\n\n  grid-template-rows:\n    64px\n    1fr\n    94px\n    198px;\n\n  min-width:0;\n\n  overflow:hidden;\n\n  border-right:1px solid var(--line);\n\n  background:var(--paper);\n}\n\n\n#form-metric-final .fmf-left-header{\n\n  display:grid;\n\n  grid-template-columns:\n    140px\n    1fr\n    auto;\n\n  align-items:center;\n\n  gap:20px;\n\n  padding:0 26px;\n\n  border-bottom:1px solid var(--line);\n}\n\n\n#form-metric-final .fmf-logo{\n\n  font-size:27px;\n  font-weight:500;\n\n  letter-spacing:-.075em;\n}\n\n\n#form-metric-final .fmf-logo span{\n  color:var(--orange);\n}\n\n\n#form-metric-final .fmf-nav{\n\n  display:flex;\n\n  gap:28px;\n\n  font-size:10px;\n}\n\n\n#form-metric-final .fmf-tools{\n\n  display:flex;\n\n  gap:18px;\n}\n\n\n#form-metric-final .fmf-tools button{\n\n  padding:0;\n\n  border:0;\n\n  background:none;\n\n  cursor:pointer;\n\n  font-size:9px;\n}\n\n\n#form-metric-final .fmf-tools button:last-child{\n\n  display:flex;\n\n  align-items:center;\n\n  gap:7px;\n}\n\n\n#form-metric-final .fmf-tools i{\n\n  width:7px;\n  height:7px;\n\n  border-radius:50%;\n\n  background:var(--orange);\n}\n\n\n#form-metric-final .fmf-index{\n\n  position:absolute;\n\n  z-index:4;\n\n  top:150px;\n  left:22px;\n  bottom:305px;\n\n  width:16px;\n\n  display:flex;\n\n  flex-direction:column;\n\n  align-items:center;\n\n  justify-content:space-between;\n\n  font-size:9px;\n}\n\n\n#form-metric-final .fmf-index i{\n\n  position:absolute;\n\n  top:34px;\n  bottom:34px;\n\n  left:50%;\n\n  border-left:1px dotted rgba(10,10,10,.55);\n}\n\n\n#form-metric-final .fmf-index::before{\n\n  content:\"\";\n\n  position:absolute;\n\n  top:19px;\n\n  width:8px;\n  height:8px;\n\n  border-radius:50%;\n\n  background:var(--orange);\n}\n\n\n#form-metric-final .fmf-hero-copy{\n\n  position:relative;\n\n  z-index:5;\n\n  padding:\n    70px\n    44%\n    24px\n    60px;\n}\n\n\n#form-metric-final .fmf-kicker{\n\n  display:flex;\n\n  flex-direction:column;\n\n  gap:6px;\n\n  font-size:9px;\n}\n\n\n#form-metric-final .fmf-kicker b{\n\n  color:var(--orange);\n\n  font-weight:500;\n}\n\n\n#form-metric-final .fmf-left h1{\n\n  margin:46px 0 24px;\n\n  font-family:var(--serif);\n\n  font-size:clamp(64px,6.5vw,116px);\n\n  line-height:.76;\n\n  letter-spacing:-.055em;\n\n  font-weight:400;\n}\n\n\n#form-metric-final .fmf-left h1 span{\n  display:block;\n}\n\n\n#form-metric-final .fmf-left h1 em{\n\n  display:inline-block;\n\n  margin-right:-.035em;\n\n  color:var(--orange);\n\n  font-size:1.48em;\n\n  font-style:normal;\n\n  line-height:.35;\n\n  vertical-align:-.07em;\n}\n\n\n#form-metric-final .fmf-left h1 b{\n\n  color:var(--orange);\n\n  font-weight:400;\n}\n\n\n#form-metric-final .fmf-meta{\n\n  display:flex;\n\n  align-items:center;\n\n  gap:9px;\n\n  white-space:nowrap;\n\n  font-size:9px;\n}\n\n\n#form-metric-final .fmf-meta i{\n\n  width:15px;\n\n  border-top:1px solid var(--ink);\n}\n\n\n#form-metric-final .fmf-meta strong{\n  font-weight:500;\n}\n\n\n#form-metric-final .fmf-discover{\n\n  display:inline-flex;\n\n  align-items:center;\n\n  gap:38px;\n\n  margin-top:22px;\n\n  padding-bottom:5px;\n\n  border-bottom:1px solid var(--ink);\n\n  font-size:9px;\n}\n\n\n#form-metric-final .fmf-discover span{\n  font-size:18px;\n}\n\n\n#form-metric-final .fmf-hero-product{\n\n  position:absolute;\n\n  z-index:4;\n\n  top:86px;\n  right:0;\n\n  width:45%;\n  height:58%;\n}\n\n\n#form-metric-final .fmf-hero-product img{\n\n  width:100%;\n  height:100%;\n\n  object-fit:contain;\n}\n\n\n#form-metric-final .fmf-material-bar{\n\n  grid-row:3;\n\n  display:grid;\n\n  grid-template-columns:\n    150px\n    1fr;\n\n  align-items:center;\n\n  gap:20px;\n\n  padding:0 58px;\n\n  background:var(--orange);\n\n  border-top:1px solid rgba(0,0,0,.13);\n\n  border-bottom:1px solid rgba(0,0,0,.13);\n}\n\n\n#form-metric-final .fmf-material-bar small{\n\n  display:block;\n\n  margin-bottom:7px;\n\n  font-size:8px;\n}\n\n\n#form-metric-final .fmf-material-bar strong{\n\n  font-size:10px;\n\n  font-weight:500;\n}\n\n\n#form-metric-final .fmf-materials{\n\n  display:flex;\n\n  gap:21px;\n}\n\n\n#form-metric-final .fmf-materials button{\n\n  display:flex;\n\n  align-items:center;\n\n  gap:7px;\n\n  padding:0;\n\n  border:0;\n\n  background:none;\n\n  cursor:pointer;\n\n  opacity:.65;\n\n  font-size:9px;\n}\n\n\n#form-metric-final .fmf-materials button{\n  transition:opacity .18s ease, transform .18s ease;\n}\n\n#form-metric-final .fmf-materials button.is-active{\n  opacity:1;\n}\n\n\n#form-metric-final .fmf-materials i{\n\n  width:11px;\n  height:11px;\n\n  border-radius:50%;\n\n  border:1px solid var(--ink);\n}\n\n\n#form-metric-final .fmf-materials .silver{\n  background:linear-gradient(135deg,#fff,#777,#eee);\n}\n\n\n#form-metric-final .fmf-materials .black{\n  background:#090909;\n}\n\n\n#form-metric-final .fmf-materials .wine{\n  background:#551D24;\n}\n\n\n#form-metric-final .fmf-strip{\n\n  grid-row:4;\n\n  display:grid;\n\n  grid-template-columns:repeat(4,1fr);\n\n  background:var(--orange);\n}\n\n\n#form-metric-final .fmf-strip article{\n\n  min-width:0;\n\n  overflow:hidden;\n\n  padding:15px 17px 0;\n\n  border-right:1px solid rgba(0,0,0,.14);\n\n  font-size:8px;\n}\n\n\n#form-metric-final .fmf-strip article:last-child{\n  border-right:0;\n}\n\n\n#form-metric-final .fmf-strip span,\n#form-metric-final .fmf-strip strong{\n  display:block;\n}\n\n\n#form-metric-final .fmf-strip strong{\n\n  margin-top:4px;\n\n  font-weight:400;\n}\n\n\n#form-metric-final .fmf-strip img{\n\n  width:100%;\n  height:142px;\n\n  object-fit:contain;\n\n  margin-top:3px;\n}\n\n\n\n\/* =========================================================\nRIGHT \/ FORM PRODUCT WORKBENCH\nOBJECT FIELD \u2192 CONFIGURE \u2192 EXPLODED DETAIL\n========================================================= *\/\n\n#form-metric-final .fmf-stage{\n  position:relative;\n  min-width:0;\n  overflow:hidden;\n  background:var(--stage);\n}\n\n#form-metric-final .fmf-stage-grid{\n  position:absolute;\n  inset:0;\n  background-image:\n    linear-gradient(rgba(0,0,0,.032) 1px,transparent 1px),\n    linear-gradient(90deg,rgba(0,0,0,.032) 1px,transparent 1px);\n  background-size:74px 74px;\n}\n\n#form-metric-final .fmf-stage-meta{\n  position:absolute;\n  z-index:4;\n  left:3%;\n  right:3%;\n  top:2.1%;\n  display:flex;\n  justify-content:space-between;\n  font-size:var(--fs-ui);\n  letter-spacing:.06em;\n  text-transform:uppercase;\n}\n\n\/* DESKTOP *\/\n#form-metric-final .fmf-desktop{\n  position:absolute;\n  z-index:10;\n  left:3%;\n  top:8%;\n  width:78%;\n  height:84%;\n  display:grid;\n  grid-template-rows:46px 45% 21% 1fr;\n  overflow:hidden;\n  background:var(--paper);\n  box-shadow:0 16px 40px rgba(0,0,0,.08);\n}\n\n#form-metric-final .fmf-site-header{\n  display:grid;\n  grid-template-columns:1fr auto auto;\n  align-items:center;\n  gap:22px;\n  padding:0 17px;\n  border-bottom:1px solid var(--line);\n  font-size:var(--fs-ui);\n}\n\n#form-metric-final .fmf-site-header > strong{\n  font-size:13px;\n  font-weight:500;\n  letter-spacing:-.06em;\n}\n\n#form-metric-final .fmf-site-header > strong span{\n  color:var(--orange);\n}\n\n#form-metric-final .fmf-site-header nav{\n  display:flex;\n  gap:18px;\n}\n\n#form-metric-final .fmf-field-label,\n#form-metric-final .fmf-field-caption,\n#form-metric-final .fmf-workbench-title small,\n#form-metric-final .fmf-control > span,\n#form-metric-final .fmf-buy small,\n#form-metric-final .fmf-exploded-head small,\n#form-metric-final .fmf-exploded-note > span,\n#form-metric-final .fmf-exploded-note > small{\n  color:var(--muted);\n  letter-spacing:.01em;\n}\n\n\/* 01 OBJECT FIELD *\/\n#form-metric-final .fmf-object-field{\n  position:relative;\n  min-height:0;\n  overflow:hidden;\n  border-bottom:1px solid var(--line);\n  background:#F4F4F1;\n}\n\n#form-metric-final .fmf-field-label{\n  position:absolute;\n  z-index:8;\n  left:13px;\n  top:12px;\n  display:flex;\n  flex-direction:column;\n  gap:3px;\n  font-size:var(--fs-label);\n}\n\n#form-metric-final .fmf-field-label strong{\n  font-weight:500;\n}\n\n#form-metric-final .fmf-field-object{\n  position:absolute;\n  z-index:2;\n  padding:0;\n  border:0;\n  background:transparent;\n  cursor:pointer;\n  transition:\n    left .35s ease,\n    right .35s ease,\n    top .35s ease,\n    bottom .35s ease,\n    width .35s ease,\n    height .35s ease,\n    opacity .25s ease,\n    transform .35s ease;\n}\n\n#form-metric-final .fmf-field-object img{\n  width:100%;\n  height:100%;\n  object-fit:contain;\n  pointer-events:none;\n}\n\n#form-metric-final .fmf-field-object > span{\n  position:absolute;\n  z-index:4;\n  left:50%;\n  bottom:-8px;\n  transform:translateX(-50%);\n  white-space:nowrap;\n  padding:3px 5px;\n  background:#050505;\n  color:#fff;\n  opacity:0;\n  font-size:var(--fs-label);\n  line-height:1.25;\n  transition:opacity .2s ease;\n}\n\n#form-metric-final .fmf-field-object:hover > span,\n#form-metric-final .fmf-field-object.is-active > span{\n  opacity:1;\n}\n\n#form-metric-final .fmf-obj-lamp{\n  left:26%;\n  top:10%;\n  width:31%;\n  height:82%;\n}\n\n#form-metric-final .fmf-obj-chair{\n  left:4%;\n  bottom:6%;\n  width:24%;\n  height:49%;\n}\n\n#form-metric-final .fmf-obj-vase{\n  right:5%;\n  top:10%;\n  width:17%;\n  height:37%;\n}\n\n#form-metric-final .fmf-obj-table{\n  right:5%;\n  bottom:5%;\n  width:25%;\n  height:42%;\n}\n\n#form-metric-final .fmf-field-object:not(.is-active){\n  opacity:.78;\n}\n\n#form-metric-final .fmf-field-object:hover{\n  z-index:6;\n  opacity:1;\n  transform:translateY(-3px) scale(1.04);\n}\n\n#form-metric-final .fmf-field-object.is-active{\n  z-index:5;\n  opacity:1;\n}\n\n#form-metric-final .fmf-field-object.is-related{\n  cursor:default;\n}\n\n#form-metric-final .fmf-field-object.is-related:hover{\n  transform:translateY(-2px);\n}\n\n#form-metric-final .fmf-field-caption{\n  position:absolute;\n  z-index:8;\n  right:13px;\n  bottom:10px;\n  display:flex;\n  flex-direction:column;\n  align-items:flex-end;\n  gap:3px;\n  pointer-events:none;\n}\n\n#form-metric-final .fmf-field-caption small{\n  font-size:var(--fs-label);\n}\n\n#form-metric-final .fmf-field-caption strong{\n  font-family:var(--serif);\n  font-size:14px;\n  line-height:.9;\n  font-weight:400;\n}\n\n\/* 02 WORKBENCH *\/\n#form-metric-final .fmf-workbench{\n  display:grid;\n  grid-template-columns:19% 22% 20% 19% 20%;\n  min-height:0;\n  background:var(--orange);\n  border-bottom:1px solid var(--line);\n}\n\n#form-metric-final .fmf-workbench-title,\n#form-metric-final .fmf-control,\n#form-metric-final .fmf-buy{\n  min-width:0;\n  padding:10px;\n  border-right:1px solid rgba(0,0,0,.18);\n}\n\n#form-metric-final .fmf-workbench-title small,\n#form-metric-final .fmf-control > span,\n#form-metric-final .fmf-buy small{\n  display:block;\n  font-size:var(--fs-label);\n}\n\n#form-metric-final .fmf-workbench-title strong{\n  display:block;\n  margin-top:12px;\n  font-family:var(--serif);\n  font-size:16px;\n  line-height:.9;\n  font-weight:400;\n}\n\n#form-metric-final .fmf-control{\n  display:flex;\n  flex-direction:column;\n  justify-content:space-between;\n}\n\n#form-metric-final .fmf-control > strong{\n  font-size:var(--fs-label);\n  font-weight:500;\n}\n\n#form-metric-final .fmf-control-finish > div{\n  display:flex;\n  gap:6px;\n  margin:5px 0;\n}\n\n#form-metric-final .fmf-control-finish button,\n#form-metric-final .fmf-mobile-finishes button{\n  position:relative;\n  width:var(--control-size);\n  height:var(--control-size);\n  padding:0;\n  border:0;\n  background:none;\n  cursor:pointer;\n  opacity:.45;\n  transition:opacity .18s ease, transform .18s ease;\n}\n\n#form-metric-final .fmf-control-finish button.is-active,\n#form-metric-final .fmf-mobile-finishes button.is-active{\n  opacity:1;\n}\n\n#form-metric-final .fmf-control-finish button.is-active::after{\n  content:\"\";\n  position:absolute;\n  inset:-3px;\n  border:1px solid var(--ink);\n  border-radius:50%;\n}\n\n#form-metric-final .fmf-control-finish i,\n#form-metric-final .fmf-mobile-finishes i{\n  display:block;\n  width:100%;\n  height:100%;\n  border:1px solid var(--ink);\n  border-radius:50%;\n}\n\n#form-metric-final .fmf-control-finish .silver,\n#form-metric-final .fmf-mobile-finishes .silver{\n  background:linear-gradient(135deg,#fff,#777,#eee);\n}\n\n#form-metric-final .fmf-control-finish .black,\n#form-metric-final .fmf-mobile-finishes .black{\n  background:#090909;\n}\n\n#form-metric-final .fmf-control-finish .wine,\n#form-metric-final .fmf-mobile-finishes .wine{\n  background:#551D24;\n}\n\n#form-metric-final .fmf-control-range input{\n  width:100%;\n  height:1px;\n  margin:10px 0 8px;\n  appearance:none;\n  -webkit-appearance:none;\n  background:rgba(10,10,10,.55);\n  outline:none;\n}\n\n#form-metric-final .fmf-control-range input::-webkit-slider-thumb{\n  appearance:none;\n  -webkit-appearance:none;\n  width:var(--control-thumb);\n  height:var(--control-thumb);\n  border:1px solid var(--ink);\n  border-radius:50%;\n  background:var(--paper);\n  cursor:pointer;\n}\n\n#form-metric-final .fmf-control-range input::-moz-range-thumb{\n  width:var(--control-thumb);\n  height:var(--control-thumb);\n  border:1px solid var(--ink);\n  border-radius:50%;\n  background:var(--paper);\n  cursor:pointer;\n}\n\n#form-metric-final .fmf-control-range strong b{\n  font-weight:500;\n}\n\n#form-metric-final .fmf-buy{\n  display:flex;\n  flex-direction:column;\n  justify-content:space-between;\n  border-right:0;\n}\n\n#form-metric-final .fmf-buy > div strong{\n  display:block;\n  margin-top:4px;\n  font-family:var(--serif);\n  font-size:17px;\n  font-weight:400;\n}\n\n#form-metric-final .fmf-buy button{\n  width:100%;\n  display:flex;\n  justify-content:space-between;\n  align-items:center;\n  padding:7px 8px;\n  border:0;\n  background:#050505;\n  color:#fff;\n  cursor:pointer;\n  font-size:var(--fs-label);\n  transition:opacity .18s ease;\n}\n\n#form-metric-final .fmf-buy button:hover{\n  opacity:.86;\n}\n\n\/* 03 EXPLODED DETAIL *\/\n#form-metric-final .fmf-exploded{\n  display:grid;\n  grid-template-columns:22% 56% 22%;\n  min-height:0;\n  background:var(--paper);\n}\n\n#form-metric-final .fmf-exploded-head{\n  padding:12px;\n  border-right:1px solid var(--line);\n}\n\n#form-metric-final .fmf-exploded-head small{\n  font-size:var(--fs-label);\n}\n\n#form-metric-final .fmf-exploded-head strong{\n  display:block;\n  margin-top:14px;\n  font-family:var(--serif);\n  font-size:18px;\n  line-height:.86;\n  font-weight:400;\n}\n\n#form-metric-final .fmf-detail-visual{\n  position:relative;\n  min-width:0;\n  overflow:hidden;\n  background:var(--detail);\n}\n\n#form-metric-final .fmf-detail-visual > img{\n  position:absolute;\n  inset:0;\n  width:100%;\n  height:100%;\n  object-fit:cover;\n}\n\n#form-metric-final .fmf-callout{\n  position:absolute;\n  z-index:3;\n  padding:2px 4px;\n  background:rgba(244,244,241,.92);\n  white-space:nowrap;\n  font-size:var(--fs-micro);\n  line-height:1.25;\n}\n\n#form-metric-final .fmf-callout b{\n  margin-right:4px;\n  color:var(--orange);\n  font-weight:600;\n}\n\n#form-metric-final .fmf-callout::after{\n  content:\"\";\n  position:absolute;\n  top:50%;\n  width:24px;\n  border-top:1px solid rgba(10,10,10,.55);\n}\n\n#form-metric-final .fmf-callout-1{left:5%;top:12%}\n#form-metric-final .fmf-callout-1::after{left:100%}\n#form-metric-final .fmf-callout-2{right:4%;top:32%}\n#form-metric-final .fmf-callout-2::after{right:100%}\n#form-metric-final .fmf-callout-3{left:7%;bottom:27%}\n#form-metric-final .fmf-callout-3::after{left:100%}\n#form-metric-final .fmf-callout-4{right:5%;bottom:10%}\n#form-metric-final .fmf-callout-4::after{right:100%}\n\n#form-metric-final .fmf-exploded-note{\n  display:flex;\n  flex-direction:column;\n  padding:12px;\n  border-left:1px solid var(--line);\n}\n\n#form-metric-final .fmf-exploded-note > span{\n  font-size:var(--fs-label);\n}\n\n#form-metric-final .fmf-exploded-note > strong{\n  margin-top:5px;\n  font-family:var(--serif);\n  font-size:15px;\n  line-height:.9;\n  font-weight:400;\n}\n\n#form-metric-final .fmf-exploded-note > small{\n  margin-top:auto;\n  line-height:1.4;\n  font-size:var(--fs-label);\n}\n\n\/* PHONE *\/\n#form-metric-final .fmf-phone{\n  position:absolute;\n  z-index:20;\n  right:1.3%;\n  bottom:9%;\n  width:25%;\n  height:64%;\n  overflow:hidden;\n  border:4px solid #171717;\n  border-radius:var(--radius-phone);\n  background:var(--paper-2);\n  box-shadow:0 14px 28px rgba(0,0,0,.13);\n}\n\n#form-metric-final .fmf-phone-notch{\n  position:absolute;\n  z-index:5;\n  top:-1px;\n  left:50%;\n  transform:translateX(-50%);\n  width:44%;\n  height:12px;\n  border-radius:0 0 10px 10px;\n  background:#171717;\n}\n\n#form-metric-final .fmf-phone-screen{\n  height:100%;\n  overflow-y:auto;\n  scrollbar-width:none;\n  background:var(--paper-2);\n}\n\n#form-metric-final .fmf-phone-screen::-webkit-scrollbar{\n  display:none;\n}\n\n#form-metric-final .fmf-mobile-head{\n  height:38px;\n  display:flex;\n  justify-content:space-between;\n  align-items:center;\n  padding:11px 10px 5px;\n  border-bottom:1px solid var(--line);\n}\n\n#form-metric-final .fmf-mobile-head strong{\n  font-size:10px;\n  letter-spacing:-.05em;\n  font-weight:500;\n}\n\n#form-metric-final .fmf-mobile-head strong span{\n  color:var(--orange);\n}\n\n#form-metric-final .fmf-mobile-head button{\n  padding:0;\n  border:0;\n  background:none;\n  font-size:9px;\n}\n\n#form-metric-final .fmf-mobile-object{\n  position:relative;\n  padding:9px 10px 10px;\n}\n\n#form-metric-final .fmf-mobile-object small{\n  font-size:var(--fs-label);\n}\n\n#form-metric-final .fmf-mobile-object img{\n  display:block;\n  width:100%;\n  height:123px;\n  margin-top:2px;\n  object-fit:contain;\n}\n\n#form-metric-final .fmf-mobile-object h4{\n  margin:-3px 0 7px;\n  font-family:var(--serif);\n  font-size:21px;\n  line-height:.76;\n  font-weight:400;\n}\n\n#form-metric-final .fmf-mobile-object > div{\n  display:flex;\n  justify-content:space-between;\n  gap:5px;\n  font-size:var(--fs-label);\n}\n\n#form-metric-final .fmf-mobile-object > div strong{\n  color:var(--orange);\n  font-family:var(--serif);\n  font-size:12px;\n  font-weight:400;\n}\n\n#form-metric-final .fmf-mobile-config{\n  padding:8px 10px;\n  background:var(--orange);\n}\n\n#form-metric-final .fmf-mobile-config > small{\n  font-size:var(--fs-label);\n}\n\n#form-metric-final .fmf-mobile-finishes{\n  display:flex;\n  gap:7px;\n  margin:7px 0 8px;\n}\n\n#form-metric-final .fmf-mobile-finishes button{\n  width:15px;\n  height:15px;\n}\n\n#form-metric-final .fmf-mobile-spec{\n  display:flex;\n  justify-content:space-between;\n  padding:4px 0;\n  border-top:1px solid rgba(10,10,10,.18);\n  font-size:var(--fs-label);\n}\n\n#form-metric-final .fmf-mobile-spec strong{\n  font-weight:500;\n}\n\n#form-metric-final .fmf-mobile-detail{\n  position:relative;\n  height:88px;\n  overflow:hidden;\n  background:var(--detail);\n}\n\n#form-metric-final .fmf-mobile-detail img{\n  width:100%;\n  height:100%;\n  object-fit:cover;\n}\n\n#form-metric-final .fmf-mobile-detail span{\n  position:absolute;\n  left:5px;\n  padding:2px 3px;\n  background:rgba(244,244,241,.9);\n  font-size:var(--fs-micro);\n}\n\n#form-metric-final .fmf-mobile-detail span:nth-of-type(1){top:8px}\n#form-metric-final .fmf-mobile-detail span:nth-of-type(2){bottom:8px}\n\n#form-metric-final .fmf-mobile-add{\n  width:calc(100% - 20px);\n  display:flex;\n  justify-content:space-between;\n  margin:9px 10px 12px;\n  padding:7px 8px;\n  border:0;\n  background:#050505;\n  color:#fff;\n  font-size:var(--fs-label);\n  cursor:pointer;\n  transition:opacity .18s ease;\n}\n\n#form-metric-final .fmf-mobile-add:hover{\n  opacity:.86;\n}\n\n\/* TABLET *\/\n@media (max-width:1100px) and (min-width:768px){\n\n  #form-metric-final{\n    --fs-micro:4.5px;\n    --fs-label:5px;\n    --fs-ui:6px;\n  }\n\n\n  #form-metric-final .fmf-shell{\n    height:820px;\n    grid-template-columns:48% 52%;\n  }\n\n  #form-metric-final .fmf-left-header{\n    grid-template-columns:105px 1fr auto;\n    padding:0 18px;\n    gap:13px;\n  }\n\n  #form-metric-final .fmf-nav{\n    gap:13px;\n    font-size:8px;\n  }\n\n  #form-metric-final .fmf-tools{\n    gap:10px;\n  }\n\n  #form-metric-final .fmf-tools button{\n    font-size:var(--fs-ui);\n  }\n\n  #form-metric-final .fmf-hero-copy{\n    padding:68px 39% 20px 42px;\n  }\n\n  #form-metric-final .fmf-left h1{\n    font-size:66px;\n  }\n\n  #form-metric-final .fmf-hero-product{\n    width:46%;\n    height:56%;\n  }\n\n  #form-metric-final .fmf-material-bar{\n    padding:0 40px;\n    grid-template-columns:115px 1fr;\n  }\n\n  #form-metric-final .fmf-materials{\n    gap:12px;\n  }\n\n  #form-metric-final .fmf-desktop{\n    width:79%;\n    height:84%;\n  }\n\n  #form-metric-final .fmf-phone{\n    right:1%;\n    bottom:8%;\n    width:25%;\n    height:64%;\n  }\n}\n\n\/* MOBILE BOARD *\/\n@media (max-width:767px){\n\n  #form-metric-final{\n    --fs-micro:4px;\n    --fs-label:4.5px;\n    --fs-ui:5px;\n  }\n\n\n  #form-metric-final .fmf-shell{\n    display:block;\n    height:auto;\n    min-height:0;\n    max-height:none;\n    border:0;\n  }\n\n  #form-metric-final .fmf-left{\n    height:555px;\n    display:block;\n    border-right:0;\n  }\n\n  #form-metric-final .fmf-left-header{\n    height:56px;\n    grid-template-columns:1fr auto;\n    padding:0 16px;\n  }\n\n  #form-metric-final .fmf-logo{\n    font-size:23px;\n  }\n\n  #form-metric-final .fmf-nav{\n    display:none;\n  }\n\n  #form-metric-final .fmf-tools button:not(:last-child){\n    display:none;\n  }\n\n  #form-metric-final .fmf-hero-copy{\n    width:73%;\n    padding:52px 15px 0 18px;\n  }\n\n  #form-metric-final .fmf-kicker{\n    font-size:8px;\n  }\n\n  #form-metric-final .fmf-left h1{\n    margin-top:34px;\n    font-size:55px;\n    line-height:.78;\n  }\n\n  #form-metric-final .fmf-meta{\n    gap:5px;\n    flex-wrap:wrap;\n    font-size:var(--fs-ui);\n  }\n\n  #form-metric-final .fmf-discover{\n    margin-top:14px;\n    font-size:8px;\n  }\n\n  #form-metric-final .fmf-index{\n    display:none;\n  }\n\n  #form-metric-final .fmf-hero-product{\n    top:68px;\n    right:-9%;\n    width:57%;\n    height:68%;\n  }\n\n  #form-metric-final .fmf-material-bar{\n    position:absolute;\n    left:0;\n    right:0;\n    bottom:0;\n    height:96px;\n    grid-template-columns:95px 1fr;\n    gap:8px;\n    padding:0 18px;\n  }\n\n  #form-metric-final .fmf-materials{\n    gap:9px;\n    flex-wrap:wrap;\n  }\n\n  #form-metric-final .fmf-materials button{\n    font-size:var(--fs-ui);\n  }\n\n  #form-metric-final .fmf-strip{\n    display:none;\n  }\n\n  #form-metric-final .fmf-stage{\n    height:590px;\n  }\n\n  #form-metric-final .fmf-stage-meta{\n    top:14px;\n    left:14px;\n    right:14px;\n    font-size:var(--fs-ui);\n  }\n\n  #form-metric-final .fmf-desktop{\n    left:3%;\n    top:8%;\n    width:77%;\n    height:84%;\n    grid-template-rows:38px 45% 21% 1fr;\n  }\n\n  #form-metric-final .fmf-site-header{\n    padding:0 8px;\n    gap:7px;\n    font-size:var(--fs-label);\n  }\n\n  #form-metric-final .fmf-site-header nav{\n    gap:7px;\n  }\n\n  #form-metric-final .fmf-site-header nav a:nth-child(2){\n    display:none;\n  }\n\n  #form-metric-final .fmf-field-label{\n    left:7px;\n    top:7px;\n  }\n\n  #form-metric-final .fmf-field-caption{\n    right:7px;\n    bottom:7px;\n  }\n\n  #form-metric-final .fmf-field-caption strong{\n    font-size:9px;\n  }\n\n  #form-metric-final .fmf-workbench{\n    grid-template-columns:24% 25% 25% 26%;\n  }\n\n  #form-metric-final .fmf-workbench-title{\n    padding:6px;\n  }\n\n  #form-metric-final .fmf-workbench-title strong{\n    font-size:10px;\n  }\n\n  #form-metric-final .fmf-control{\n    padding:6px;\n  }\n\n  #form-metric-final .fmf-control-finish{\n    display:none;\n  }\n\n  #form-metric-final .fmf-buy{\n    padding:6px;\n  }\n\n  #form-metric-final .fmf-buy button{\n    padding:5px;\n    font-size:var(--fs-micro);\n  }\n\n  #form-metric-final .fmf-exploded{\n    grid-template-columns:25% 75%;\n  }\n\n  #form-metric-final .fmf-exploded-note{\n    display:none;\n  }\n\n  #form-metric-final .fmf-exploded-head{\n    padding:7px;\n  }\n\n  #form-metric-final .fmf-exploded-head strong{\n    font-size:11px;\n  }\n\n  #form-metric-final .fmf-callout{\n    font-size:3.5px;\n  }\n\n  #form-metric-final .fmf-callout-3,\n  #form-metric-final .fmf-callout-4{\n    display:none;\n  }\n\n  #form-metric-final .fmf-phone{\n    right:1%;\n    bottom:8%;\n    width:145px;\n    height:415px;\n    border-width:4px;\n    border-radius:var(--radius-phone);\n  }\n}\n\n\n\n@media (prefers-reduced-motion:reduce){\n  #form-metric-final *{\n    scroll-behavior:auto !important;\n    transition:none !important;\n  }\n}\n\n<\/style>\n\n\n<script>\n(() => {\n\n  const root = document.getElementById(\"form-metric-final\");\n  if(!root || root.dataset.formReady === \"1\") return;\n  root.dataset.formReady = \"1\";\n\n  \/* Prevent placeholder demo links from navigating *\/\n  root.querySelectorAll('a[href=\"javascript:void(0)\"]').forEach(link => {\n    link.addEventListener(\"click\", event => event.preventDefault());\n  });\n\n  \/* LEFT HERO MATERIAL SELECTOR *\/\n  const heroMaterialButtons = [...root.querySelectorAll(\".fmf-materials button\")];\n\n  heroMaterialButtons.forEach(btn => {\n    btn.addEventListener(\"click\", () => {\n      heroMaterialButtons.forEach(x => x.classList.remove(\"is-active\"));\n      btn.classList.add(\"is-active\");\n    });\n  });\n\n  \/* OBJECT FIELD\n     L01 remains the configurable protagonist.\n     The other objects stay visible as collection context only. *\/\n  const lampObject = root.querySelector(\".fmf-obj-lamp\");\n  const relatedObjects = [...root.querySelectorAll(\".fmf-field-object.is-related\")];\n  const selectedObject = root.querySelector(\"#fmf-selected-object\");\n  const configPrice = root.querySelector(\"#fmf-config-price\");\n\n  if(lampObject){\n    lampObject.addEventListener(\"click\", () => {\n      lampObject.classList.add(\"is-active\");\n      if(selectedObject) selectedObject.textContent = lampObject.dataset.name || \"L01 FLOOR LAMP\";\n      if(configPrice) configPrice.textContent = lampObject.dataset.price || \"\u20ac690\";\n    });\n  }\n\n  relatedObjects.forEach(btn => {\n    btn.addEventListener(\"click\", event => {\n      event.preventDefault();\n    });\n  });\n\n  \/* SHARED FINISH STATE \u2014 DESKTOP + MOBILE + DETAIL *\/\n  const desktopFinishButtons = [...root.querySelectorAll(\".fmf-control-finish button\")];\n  const mobileFinishButtons = [...root.querySelectorAll(\".fmf-mobile-finishes button\")];\n  const allFinishButtons = [...desktopFinishButtons, ...mobileFinishButtons];\n\n  const finishValue = root.querySelector(\"#fmf-finish-value\");\n  const detailFinish = root.querySelector(\"#fmf-detail-finish\");\n  const mobileFinish = root.querySelector(\".fmf-mobile-finish-label\");\n\n  const setFinish = (finish) => {\n    allFinishButtons.forEach(btn => {\n      const active = btn.dataset.finish === finish;\n      btn.classList.toggle(\"is-active\", active);\n      btn.setAttribute(\"aria-pressed\", String(active));\n    });\n\n    if(finishValue) finishValue.textContent = finish;\n    if(detailFinish) detailFinish.textContent = finish;\n    if(mobileFinish) mobileFinish.textContent = finish;\n  };\n\n  allFinishButtons.forEach(btn => {\n    btn.addEventListener(\"click\", () => {\n      setFinish(btn.dataset.finish || \"\");\n    });\n  });\n\n  \/* RANGE CONTROLS \u2014 synchronize desktop + mobile displayed values *\/\n  const lightRange = root.querySelector(\"#fmf-light-range\");\n  const lightValue = root.querySelector(\"#fmf-light-value\");\n  const mobileSpecs = [...root.querySelectorAll(\".fmf-mobile-spec strong\")];\n  const mobileLightValue = mobileSpecs[0] || null;\n\n  const heightRange = root.querySelector(\"#fmf-height-range\");\n  const heightValue = root.querySelector(\"#fmf-height-value\");\n  const mobileHeightValue = mobileSpecs[1] || null;\n\n  if(lightRange){\n    const syncLight = () => {\n      if(lightValue) lightValue.textContent = lightRange.value;\n      if(mobileLightValue) mobileLightValue.textContent = `${lightRange.value}K`;\n    };\n    lightRange.addEventListener(\"input\", syncLight);\n    syncLight();\n  }\n\n  if(heightRange){\n    const syncHeight = () => {\n      if(heightValue) heightValue.textContent = heightRange.value;\n      if(mobileHeightValue) mobileHeightValue.textContent = `${heightRange.value} mm`;\n    };\n    heightRange.addEventListener(\"input\", syncHeight);\n    syncHeight();\n  }\n\n})();\n<\/script>\n<\/template>\n\n<template id=\"yduTplSoma\">\n<!-- =========================================================\nS\u014cMA \u2014 SKIN & RITUALS\nYU.DESIGN \/ DEMO SITI\n\nRESPONSIVE PRESENTATION\nLEFT  = ORIGINAL HERO\nRIGHT = DESKTOP WEBSITE + REAL MOBILE WEBSITE\n========================================================= -->\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Mono:wght@300;400;500&family=Inter:wght@300;400;500&family=Manrope:wght@200;300;400;500&display=swap\" rel=\"stylesheet\">\n\n\n<section id=\"soma-responsive-2027\">\n\n  <div class=\"sr-shell\">\n\n\n    <!-- =====================================================\n    LEFT \u2014 S\u014cMA HERO \/ PHOTOSTUDIO COMPOSITION TRANSFER\n    ====================================================== -->\n\n    <section class=\"sr-hero\">\n\n      <header class=\"sr-header\">\n\n        <a href=\"#\" class=\"sr-brand\">\n          <strong>S&#332;MA<\/strong>\n          <span>SKIN &amp; RITUALS<\/span>\n        <\/a>\n\n        <nav class=\"sr-nav\">\n          <a href=\"#\">TREATMENTS<\/a>\n          <a href=\"#\">RITUALS<\/a>\n          <a href=\"#\">THE CLINIC<\/a>\n          <a href=\"#\">JOURNAL<\/a>\n          <a href=\"#\">CONTACT<\/a>\n        <\/nav>\n\n        <a href=\"#\" class=\"sr-hero-book\">BOOK NOW <span>\u2197<\/span><\/a>\n\n      <\/header>\n\n\n      <div class=\"sr-hero-editorial\">\n\n        <div class=\"sr-hero-title-left\">\n          <h1>S\u014cMA SKIN STUDIO<\/h1>\n\n          <div class=\"sr-hero-note\">\n            <span>01<\/span>\n            <p>Skin is our language.<br>Science, ritual, real results.<\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"sr-hero-title-right\">\n          <p>\n            Scienza, manualit\u00e0 e rituali su misura<br>\n            per una pelle sana, luminosa, reale.\n          <\/p>\n\n          <h2>JUST <em>REAL<\/em><\/h2>\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"sr-hero-gallery\">\n\n        <div class=\"sr-hero-card sr-hero-card-main\">\n          <img decoding=\"async\"\n            src=\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-29-ago-2026-11_51_56.webp\"\n            alt=\"\"\n          >\n\n          <span class=\"sr-hero-card-label\">\n            01 \/ THE CLINIC<br>\n            SKIN \u00b7 SCIENCE \u00b7 RITUAL\n          <\/span>\n\n          <b>\u2197<\/b>\n        <\/div>\n\n\n        <a href=\"#\" class=\"sr-hero-card sr-hero-card-mid\">\n          <img decoding=\"async\"\n            src=\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/08\/foto-estetista.webp\"\n            alt=\"\"\n          >\n\n          <span class=\"sr-hero-card-label\">\n            02 \/ RITUALS<br>\n            TAILORED\n          <\/span>\n\n          <b>\u2197<\/b>\n        <\/a>\n\n\n        <a href=\"#\" class=\"sr-hero-card sr-hero-card-small\">\n          <img decoding=\"async\"\n            src=\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-29-ago-2026-12_02_34.webp\"\n            alt=\"\"\n          >\n\n          <span class=\"sr-hero-card-label\">\n            03 \/ GLOW<br>\n            BOOST\n          <\/span>\n\n          <b>\u2197<\/b>\n        <\/a>\n\n      <\/div>\n\n\n      <div class=\"sr-hero-footerline\">\n        <span>MILAN \/ PORTA VENEZIA<\/span>\n        <span>BEAUTY \u00b7 SCIENCE \u00b7 YOU<\/span>\n      <\/div>\n\n    <\/section>\n\n\n\n    <!-- =====================================================\n    RIGHT \u2014 RESPONSIVE PRESENTATION\n    ====================================================== -->\n\n    <section class=\"sr-stage\">\n\n      <div class=\"sr-stage-bg\"><\/div>\n      <div class=\"sr-stage-wash\"><\/div>\n\n\n      <!-- PRESENTATION MICRO LABEL -->\n\n      <div class=\"sr-stage-top\">\n\n        <span>S\u014cMA \/ DIGITAL EXPERIENCE<\/span>\n\n        <span>\n          DESKTOP\n          <i><\/i>\n          MOBILE\n        <\/span>\n\n      <\/div>\n\n\n\n      <!-- ===================================================\n      DESKTOP WEBSITE\n      ==================================================== -->\n\n      <article class=\"sr-desktop\">\n\n\n        <!-- HEADER -->\n\n        <header class=\"sr-board-header\">\n\n          <div class=\"sr-board-logo\">\n            <strong>S&#332;MA<\/strong>\n            <span>SKIN &amp; RITUALS<\/span>\n          <\/div>\n\n          <nav>\n            <span>TREATMENTS<\/span>\n            <span>RITUALS<\/span>\n            <span>THE CLINIC<\/span>\n            <span>JOURNAL<\/span>\n          <\/nav>\n\n          <div class=\"sr-board-menu\">\n            <i><\/i>\n            <i><\/i>\n          <\/div>\n\n        <\/header>\n\n\n\n        <!-- =================================================\n        TOP\n        ================================================== -->\n\n        <div class=\"sr-board-top\">\n\n\n          <!-- TREATMENTS -->\n\n          <section class=\"sr-treatments\">\n\n            <div class=\"sr-section-head\">\n\n              <span>TREATMENTS<\/span>\n\n              <a href=\"#\">VIEW ALL \u2197<\/a>\n\n            <\/div>\n\n\n            <div class=\"sr-products\">\n\n\n              <a href=\"#\" class=\"sr-product\">\n\n                <div class=\"sr-product-photo\">\n\n                  <img decoding=\"async\"\n                    src=\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-29-ago-2026-11_55_35.webp\"\n                    alt=\"\"\n                  >\n\n                <\/div>\n\n                <small>01<\/small>\n\n                <h3>CLEAR SKIN<\/h3>\n\n                <p>\n                  Purifica, riequilibra<br>\n                  e affina la pelle.\n                <\/p>\n\n                <b>\u2197<\/b>\n\n              <\/a>\n\n\n\n              <a href=\"#\" class=\"sr-product\">\n\n                <div class=\"sr-product-photo\">\n\n                  <img decoding=\"async\"\n                    src=\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-29-ago-2026-12_02_34.webp\"\n                    alt=\"\"\n                  >\n\n                <\/div>\n\n                <small>02<\/small>\n\n                <h3>GLOW BOOST<\/h3>\n\n                <p>\n                  Illumina e idrata<br>\n                  in profondit\u00e0.\n                <\/p>\n\n                <b>\u2197<\/b>\n\n              <\/a>\n\n\n\n              <a href=\"#\" class=\"sr-product\">\n\n                <div class=\"sr-product-photo\">\n\n                  <img decoding=\"async\"\n                    src=\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-29-ago-2026-12_00_31.webp\"\n                    alt=\"\"\n                  >\n\n                <\/div>\n\n                <small>03<\/small>\n\n                <h3>AGE REVERSE<\/h3>\n\n                <p>\n                  Rigenera, stimola<br>\n                  e rassoda.\n                <\/p>\n\n                <b>\u2197<\/b>\n\n              <\/a>\n\n            <\/div>\n\n          <\/section>\n\n\n\n          <!-- APPROACH -->\n\n          <section class=\"sr-approach\">\n\n            <img decoding=\"async\"\n              src=\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-29-ago-2026-11_58_072.png\"\n              alt=\"\"\n            >\n\n            <div class=\"sr-approach-wash\"><\/div>\n\n\n            <div class=\"sr-approach-copy\">\n\n              <span>S\u014cMA APPROACH<\/span>\n\n              <i><\/i>\n\n              <h2>\n                NON COPRIAMO.<br>\n                TRASFORMIAMO.\n              <\/h2>\n\n              <p>\n                Ogni pelle \u00e8 unica.<br>\n                Ogni percorso \u00e8<br>\n                costruito su misura.\n              <\/p>\n\n              <a href=\"#\">\n                <span>OUR METHOD<\/span>\n                <b>\u2197<\/b>\n              <\/a>\n\n            <\/div>\n\n          <\/section>\n\n        <\/div>\n\n\n\n        <!-- =================================================\n        BOTTOM\n        ================================================== -->\n\n        <div class=\"sr-board-bottom\">\n\n\n          <!-- EXPERIENCE -->\n\n          <section class=\"sr-experience\">\n\n            <img decoding=\"async\"\n              src=\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/08\/foto-estetista.webp\"\n              alt=\"\"\n            >\n\n            <div class=\"sr-experience-wash\"><\/div>\n\n\n            <div class=\"sr-experience-copy\">\n\n              <span>EXPERIENCE<\/span>\n\n              <i><\/i>\n\n              <h2>\n                RITUALI TAILORED.<br>\n                RISULTATI REALI.\n              <\/h2>\n\n              <p>\n                Pi\u00f9 di un trattamento.<br>\n                Un rituale personalizzato<br>\n                per la tua pelle.\n              <\/p>\n\n              <a href=\"#\">\n                <span>DISCOVER THE RITUALS<\/span>\n                <b>\u2197<\/b>\n              <\/a>\n\n            <\/div>\n\n          <\/section>\n\n\n\n          <!-- BOOKING -->\n\n          <section class=\"sr-booking\">\n\n            <div class=\"sr-booking-plus\">\n              <i><\/i>\n              <i><\/i>\n            <\/div>\n\n            <span class=\"sr-booking-label\">\n              PRENOTA\n            <\/span>\n\n            <h2>\n              PRENOTA IL<br>\n              TUO MOMENTO.\n            <\/h2>\n\n\n            <form class=\"sr-form\">\n\n              <label>\n                <span>FIRST NAME<\/span>\n                <input type=\"text\">\n              <\/label>\n\n              <label>\n                <span>LAST NAME<\/span>\n                <input type=\"text\">\n              <\/label>\n\n              <label class=\"wide\">\n                <span>EMAIL<\/span>\n                <input type=\"email\">\n              <\/label>\n\n              <label>\n                <span>PHONE<\/span>\n                <input type=\"tel\">\n              <\/label>\n\n              <label>\n                <span>TREATMENT<\/span>\n\n                <select>\n                  <option><\/option>\n                  <option>Clear Skin<\/option>\n                  <option>Glow Boost<\/option>\n                  <option>Age Reverse<\/option>\n                <\/select>\n\n              <\/label>\n\n              <label>\n                <span>DATE<\/span>\n                <input type=\"date\">\n              <\/label>\n\n              <label>\n                <span>TIME<\/span>\n\n                <select>\n                  <option><\/option>\n                  <option>10:00<\/option>\n                  <option>12:00<\/option>\n                  <option>15:00<\/option>\n                  <option>17:00<\/option>\n                <\/select>\n\n              <\/label>\n\n\n              <button type=\"button\">\n                <span>BOOK NOW<\/span>\n                <b>\u2197<\/b>\n              <\/button>\n\n            <\/form>\n\n\n            <div class=\"sr-booking-contact\">\n\n              <span>Or call us \/ WhatsApp<\/span>\n\n              <strong>+39 02 1234567<\/strong>\n\n            <\/div>\n\n          <\/section>\n\n        <\/div>\n\n\n\n        <!-- FOOTER -->\n\n        <footer class=\"sr-footer\">\n\n          <div>\n            <strong>S\u014cMA SKIN &amp; RITUALS<\/strong>\n            <span>\u00a9 2026<\/span>\n          <\/div>\n\n          <div>\n            <strong>MILAN \/ PORTA VENEZIA<\/strong>\n            <span>VIALE PIAVE 37<\/span>\n          <\/div>\n\n          <div>\n            <strong>INFO@SOMA.CLINIC<\/strong>\n            <span>+39 02 1234567<\/span>\n          <\/div>\n\n          <div>\n            <strong>INSTAGRAM<\/strong>\n            <span>FACEBOOK<\/span>\n          <\/div>\n\n        <\/footer>\n\n      <\/article>\n\n\n\n      <!-- ===================================================\n      REAL MOBILE WEBSITE\n      ==================================================== -->\n\n      <article class=\"sr-phone\">\n\n        <div class=\"sr-phone-screen\">\n\n\n          <!-- MOBILE HEADER -->\n\n          <header class=\"sr-mobile-header\">\n\n            <div class=\"sr-mobile-logo\">\n              <strong>S&#332;MA<\/strong>\n              <span>SKIN &amp; RITUALS<\/span>\n            <\/div>\n\n            <button type=\"button\" aria-label=\"Menu\">\n              <i><\/i>\n              <i><\/i>\n            <\/button>\n\n          <\/header>\n\n\n\n          <!-- MOBILE HERO \/ TREATMENT -->\n\n          <section class=\"sr-mobile-hero\">\n\n            <img decoding=\"async\"\n              src=\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-29-ago-2026-12_02_34.webp\"\n              alt=\"\"\n            >\n\n            <div class=\"sr-mobile-hero-wash\"><\/div>\n\n\n            <div class=\"sr-mobile-hero-copy\">\n\n              <span>02 \/ TREATMENT<\/span>\n\n              <h2>\n                GLOW<br>\n                BOOST.\n              <\/h2>\n\n              <p>\n                Idratazione profonda.<br>\n                Luminosit\u00e0 immediata.\n              <\/p>\n\n            <\/div>\n\n\n            <div class=\"sr-mobile-number\">\n              02\n            <\/div>\n\n          <\/section>\n\n\n\n          <!-- MOBILE SLIDER META -->\n          <section class=\"sr-mobile-meta\">\n            <span>01 \/ 03<\/span>\n            <i><\/i>\n            <b>\u2022\u2022\u2022\u2022<\/b>\n          <\/section>\n\n          <!-- MOBILE EXPERIENCE IMAGE -->\n          <section class=\"sr-mobile-experience\">\n            <img decoding=\"async\" src=\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/08\/foto-estetista.webp\" alt=\"\">\n            <div><\/div>\n            <span>RITUALI TAILORED.<br>RISULTATI REALI.<\/span>\n          <\/section>\n\n          <!-- MOBILE BOOKING -->\n          <section class=\"sr-mobile-booking\">\n            <span>BOOK YOUR MOMENT.<\/span>\n            <a href=\"#\">BOOK <b>\u2197<\/b><\/a>\n          <\/section>\n\n          <footer class=\"sr-mobile-footer\">\n            <span>S\u014cMA \/ MILAN<\/span>\n            <span>IT \/ EN<\/span>\n          <\/footer>\n        <\/div>\n\n\n        <div class=\"sr-phone-speaker\"><\/div>\n\n      <\/article>\n\n\n\n      <!-- MOBILE LABEL -->\n\n      <div class=\"sr-phone-caption\">\n\n        <span>02<\/span>\n\n        <div>\n          <strong>MOBILE RITUAL<\/strong>\n          <small>TREATMENT \/ BOOKING<\/small>\n        <\/div>\n\n      <\/div>\n\n\n\n      <!-- STAGE BOTTOM -->\n\n      <div class=\"sr-stage-bottom\">\n\n        <span>SKIN \/ SCIENCE \/ RITUAL<\/span>\n\n        <span>MILAN<\/span>\n\n      <\/div>\n\n    <\/section>\n\n  <\/div>\n\n<\/section>\n\n\n\n\n\n\n\n<!-- =========================================================\nS\u014cMA \u2014 FINAL TECHNICAL \/ RESPONSIVE PASS\nBaseline composition preserved. One consolidated override only.\n========================================================= -->\n<!-- S\u014cMA \/ SKIN \u2192 RITUAL MATCHER : functional layer, no layout redesign -->\n\n\n\n<!-- Final image-corner refinement -->\n\n<style>\n#soma-responsive-2027{\n  --ink:#0b0b0b;\n  --muted:#5f5f5f;\n  --paper:#ffffff;\n  --paper-soft:#fafafa;\n  --panel:#f5f5f3;\n  --line:rgba(11,11,11,.085);\n  --line-strong:rgba(11,11,11,.18);\n  --red:#b51610;\n  --r-sm:6px;\n  --r-md:9px;\n  --r-lg:12px;\n  --shadow:0 12px 32px rgba(0,0,0,.065);\n\n  width:100vw;\n  margin-left:calc(50% - 50vw);\n  margin-right:calc(50% - 50vw);\n  overflow:hidden;\n  color:var(--ink);\n  background:var(--paper);\n  font-family:\"Inter\",Arial,sans-serif;\n}\n#soma-responsive-2027 *,\n#soma-responsive-2027 *::before,\n#soma-responsive-2027 *::after{box-sizing:border-box}\n#soma-responsive-2027 h1,\n#soma-responsive-2027 h2,\n#soma-responsive-2027 h3,\n#soma-responsive-2027 p{margin:0}\n#soma-responsive-2027 a{color:inherit;text-decoration:none}\n#soma-responsive-2027 button,\n#soma-responsive-2027 input,\n#soma-responsive-2027 select{font:inherit}\n#soma-responsive-2027 img{max-width:100%}\n\n#soma-responsive-2027 .sr-shell{\n  width:100%;\n  height:calc(100vh - 28px);\n  min-height:820px;\n  max-height:1000px;\n  display:grid;\n  grid-template-columns:50% 50%;\n  background:#fff;\n}\n\n\/* =========================================================\n   LEFT \/ PHOTOSTUDIO COMPOSITION TRANSFER\n========================================================= *\/\n#soma-responsive-2027 .sr-hero{\n  position:relative;\n  min-width:0;\n  height:100%;\n  display:grid;\n  grid-template-rows:72px 29% 1fr 42px;\n  overflow:hidden;\n  background:#fff;\n  border-right:1px solid rgba(11,11,11,.045);\n}\n#soma-responsive-2027 .sr-hero::before{\n  content:\"\";\n  position:absolute;\n  inset:0;\n  pointer-events:none;\n  background:\n    linear-gradient(90deg,transparent 24.93%,rgba(11,11,11,.024) 25%,transparent 25.07%,\n                            transparent 49.93%,rgba(11,11,11,.024) 50%,transparent 50.07%,\n                            transparent 74.93%,rgba(11,11,11,.024) 75%,transparent 75.07%);\n}\n\n#soma-responsive-2027 .sr-header{\n  position:relative;\n  z-index:10;\n  height:72px;\n  padding-left:28px;\n  display:grid;\n  grid-template-columns:1.28fr 3.3fr 1.02fr;\n  align-items:stretch;\n  border-bottom:1px solid var(--line);\n  background:#fff;\n}\n#soma-responsive-2027 .sr-brand{\n  display:flex;\n  align-items:center;\n  gap:9px;\n  min-width:0;\n  padding-right:18px;\n  border-right:1px solid rgba(11,11,11,.065);\n}\n#soma-responsive-2027 .sr-brand strong{\n  font-family:\"Manrope\",Arial,sans-serif;\n  font-size:28px;\n  line-height:1;\n  font-weight:300;\n  letter-spacing:-.052em;\n}\n#soma-responsive-2027 .sr-brand span{\n  font-family:\"DM Mono\",monospace;\n  font-size:6px;\n  line-height:1;\n  letter-spacing:.03em;\n  color:#555;\n}\n#soma-responsive-2027 .sr-nav{\n  display:grid;\n  grid-template-columns:repeat(5,1fr);\n}\n#soma-responsive-2027 .sr-nav a{\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-right:1px solid rgba(11,11,11,.052);\n  font-family:\"DM Mono\",monospace;\n  font-size:6px;\n  letter-spacing:.01em;\n  color:#333;\n}\n#soma-responsive-2027 .sr-hero-book{\n  align-self:center;\n  justify-self:stretch;\n  height:38px;\n  margin:0 22px 0 16px;\n  padding:0 13px;\n  border-radius:var(--r-sm);\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  gap:9px;\n  background:var(--red);\n  color:#fff;\n  font-family:\"DM Mono\",monospace;\n  font-size:6px;\n  letter-spacing:.015em;\n  box-shadow:none;\n}\n#soma-responsive-2027 .sr-hero-book span{\n  font-size:10px;\n  line-height:1;\n  transform:translateY(-.5px);\n}\n\n#soma-responsive-2027 .sr-hero-editorial{\n  position:relative;\n  z-index:2;\n  min-height:0;\n  padding:0 28px;\n}\n#soma-responsive-2027 .sr-hero-title-left{\n  position:absolute;\n  left:28px;\n  top:14%;\n  width:73%;\n}\n#soma-responsive-2027 .sr-hero-title-left h1{\n  font-family:\"Manrope\",Arial,sans-serif;\n  font-size:clamp(49px,4.15vw,84px);\n  line-height:.84;\n  font-weight:200;\n  letter-spacing:-.061em;\n  white-space:nowrap;\n  transform:none;\n}\n#soma-responsive-2027 .sr-hero-note{\n  position:absolute;\n  top:136px;\n  left:0;\n  display:flex;\n  align-items:flex-start;\n  gap:12px;\n}\n#soma-responsive-2027 .sr-hero-note>span{\n  min-width:34px;\n  height:18px;\n  padding:0 8px;\n  border-radius:999px;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  background:#0b0b0b;\n  color:#fff;\n  font-family:\"DM Mono\",monospace;\n  font-size:5.5px;\n  line-height:1;\n}\n#soma-responsive-2027 .sr-hero-note p{\n  font-size:7.5px;\n  line-height:1.48;\n  white-space:nowrap;\n}\n#soma-responsive-2027 .sr-hero-title-right{\n  position:absolute;\n  right:28px;\n  top:15%;\n  width:49%;\n  text-align:right;\n}\n#soma-responsive-2027 .sr-hero-title-right>p{\n  width:43%;\n  margin-left:auto;\n  font-size:7px;\n  line-height:1.45;\n  text-align:left;\n  color:#333;\n}\n#soma-responsive-2027 .sr-hero-title-right>p::after{\n  content:\"\";\n  display:block;\n  width:26px;\n  height:1px;\n  margin-top:11px;\n  background:var(--line-strong);\n}\n#soma-responsive-2027 .sr-hero-title-right h2{\n  margin-top:61px;\n  font-family:\"Manrope\",Arial,sans-serif;\n  font-size:clamp(38px,3.72vw,73px);\n  line-height:.86;\n  font-weight:200;\n  letter-spacing:-.055em;\n  white-space:nowrap;\n}\n#soma-responsive-2027 .sr-hero-title-right h2 em{\n  position:relative;\n  top:.02em;\n  font-family:Georgia,\"Times New Roman\",serif;\n  font-size:1.01em;\n  font-weight:400;\n  letter-spacing:-.035em;\n}\n\n#soma-responsive-2027 .sr-hero-gallery{\n  position:relative;\n  z-index:3;\n  min-height:0;\n  padding:0 22px 12px 28px;\n  display:grid;\n  grid-template-columns:3.1fr 2.1fr 1fr;\n  gap:7px;\n}\n#soma-responsive-2027 .sr-hero-card{\n  position:relative;\n  min-width:0;\n  min-height:0;\n  overflow:hidden;\n  border-radius:var(--r-md);\n  background:#eee;\n}\n#soma-responsive-2027 .sr-hero-card img{\n  width:100%;\n  height:100%;\n  display:block;\n  object-fit:cover;\n  transition:transform .35s ease;\n}\n#soma-responsive-2027 .sr-hero-card-main img{object-position:64% center}\n#soma-responsive-2027 .sr-hero-card-mid img{object-position:50% center}\n#soma-responsive-2027 .sr-hero-card-small img{object-position:50% center}\n#soma-responsive-2027 .sr-hero-card::after{\n  content:\"\";\n  position:absolute;\n  inset:0;\n  pointer-events:none;\n  background:linear-gradient(180deg,rgba(0,0,0,.11),transparent 29%,rgba(0,0,0,.015));\n}\n#soma-responsive-2027 .sr-hero-card-label{\n  position:absolute;\n  z-index:3;\n  top:11px;\n  left:11px;\n  color:#fff;\n  font-family:\"DM Mono\",monospace;\n  font-size:5.7px;\n  line-height:1.45;\n  letter-spacing:.01em;\n  text-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#soma-responsive-2027 .sr-hero-card>b{\n  position:absolute;\n  z-index:3;\n  top:10px;\n  right:10px;\n  width:24px;\n  height:24px;\n  border:1px solid rgba(11,11,11,.06);\n  border-radius:50%;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  background:rgba(255,255,255,.95);\n  color:#111;\n  font-size:8px;\n  font-weight:300;\n  box-shadow:none;\n}\n#soma-responsive-2027 .sr-hero-footerline{\n  position:relative;\n  z-index:3;\n  padding:0 28px;\n  display:flex;\n  justify-content:space-between;\n  align-items:center;\n  font-family:\"DM Mono\",monospace;\n  font-size:5px;\n  line-height:1;\n  letter-spacing:.14em;\n  color:#3d3d3d;\n}\n#soma-responsive-2027 .sr-hero-footerline span:first-child::before{\n  content:\"\";\n  display:inline-block;\n  width:6px;\n  height:6px;\n  margin-right:11px;\n  border-radius:50%;\n  background:#111;\n  vertical-align:middle;\n}\n\n\/* =========================================================\n   RIGHT \/ SAME VISUAL LANGUAGE\n========================================================= *\/\n#soma-responsive-2027 .sr-stage{\n  position:relative;\n  min-width:0;\n  height:100%;\n  overflow:hidden;\n  background:#fff;\n  isolation:isolate;\n}\n#soma-responsive-2027 .sr-stage-bg{\n  position:absolute;\n  inset:0;\n  z-index:-3;\n  background:#fff;\n}\n#soma-responsive-2027 .sr-stage-wash{\n  position:absolute;\n  inset:0;\n  z-index:-2;\n  background:\n    linear-gradient(90deg,transparent 49.95%,rgba(11,11,11,.018) 50%,transparent 50.05%);\n}\n#soma-responsive-2027 .sr-stage-top{\n  position:absolute;\n  z-index:30;\n  top:17px;\n  left:34px;\n  right:34px;\n  display:flex;\n  justify-content:space-between;\n  align-items:center;\n  font-family:\"DM Mono\",monospace;\n  font-size:5px;\n  letter-spacing:.02em;\n  color:#3e3e3e;\n}\n#soma-responsive-2027 .sr-stage-top>span:last-child{\n  display:flex;\n  align-items:center;\n  gap:8px;\n}\n#soma-responsive-2027 .sr-stage-top i{\n  width:24px;\n  height:1px;\n  background:rgba(11,11,11,.17);\n}\n\n#soma-responsive-2027 .sr-desktop{\n  position:absolute;\n  z-index:5;\n  left:3.3%;\n  top:6.5%;\n  width:87%;\n  height:87%;\n  overflow:hidden;\n  display:grid;\n  grid-template-rows:7.5% 48.5% 44%;\n  background:#fff;\n  border:1px solid rgba(11,11,11,.055);\n  border-radius:var(--r-lg);\n  box-shadow:var(--shadow);\n}\n#soma-responsive-2027 .sr-board-header{\n  padding:0 20px;\n  display:grid;\n  grid-template-columns:auto 1fr auto;\n  align-items:center;\n  gap:16px;\n  border-bottom:1px solid var(--line);\n  background:#fff;\n}\n#soma-responsive-2027 .sr-board-logo{\n  display:flex;\n  align-items:baseline;\n  gap:6px;\n}\n#soma-responsive-2027 .sr-board-logo strong{\n  font-family:\"Manrope\",sans-serif;\n  font-size:12px;\n  line-height:1;\n  font-weight:300;\n  letter-spacing:-.045em;\n}\n#soma-responsive-2027 .sr-board-logo span{\n  font-family:\"DM Mono\",monospace;\n  font-size:3px;\n  color:#4e4e4e;\n}\n#soma-responsive-2027 .sr-board-header nav{\n  display:flex;\n  justify-content:center;\n  gap:17px;\n  font-family:\"DM Mono\",monospace;\n  font-size:3.4px;\n  color:#303030;\n}\n#soma-responsive-2027 .sr-board-menu{\n  width:14px;\n  display:flex;\n  flex-direction:column;\n  gap:4px;\n}\n#soma-responsive-2027 .sr-board-menu i{\n  width:100%;\n  height:1px;\n  display:block;\n  background:rgba(11,11,11,.72);\n}\n\n#soma-responsive-2027 .sr-board-top{\n  min-height:0;\n  display:grid;\n  grid-template-columns:72% 28%;\n}\n#soma-responsive-2027 .sr-treatments{\n  min-width:0;\n  padding:20px 20px 14px;\n  background:#fff;\n}\n#soma-responsive-2027 .sr-section-head{\n  display:flex;\n  justify-content:space-between;\n  align-items:center;\n  font-family:\"DM Mono\",monospace;\n  font-size:4px;\n  color:#303030;\n}\n#soma-responsive-2027 .sr-section-head a{\n  font-size:3.3px;\n}\n#soma-responsive-2027 .sr-products{\n  height:calc(100% - 18px);\n  margin-top:11px;\n  display:grid;\n  grid-template-columns:repeat(3,1fr);\n  gap:10px;\n}\n#soma-responsive-2027 .sr-product{\n  position:relative;\n  min-width:0;\n  display:flex;\n  flex-direction:column;\n}\n#soma-responsive-2027 .sr-product-photo{\n  width:100%;\n  height:67%;\n  overflow:hidden;\n  border-radius:var(--r-sm);\n  background:#f2f2f0;\n}\n#soma-responsive-2027 .sr-product-photo img{\n  width:100%;\n  height:100%;\n  display:block;\n  object-fit:cover;\n  transition:transform .35s ease;\n}\n#soma-responsive-2027 .sr-product small{\n  margin-top:6px;\n  font-family:\"DM Mono\",monospace;\n  font-size:3.2px;\n  color:#4b4b4b;\n}\n#soma-responsive-2027 .sr-product h3{\n  margin-top:3px;\n  font-family:\"Manrope\",sans-serif;\n  font-size:9.5px;\n  line-height:1;\n  font-weight:400;\n  letter-spacing:-.035em;\n}\n#soma-responsive-2027 .sr-product p{\n  margin-top:4px;\n  font-size:4px;\n  line-height:1.42;\n  color:#2f2f2f;\n}\n#soma-responsive-2027 .sr-product>b{\n  display:none;\n}\n\n#soma-responsive-2027 .sr-approach{\n  position:relative;\n  min-width:0;\n  overflow:hidden;\n  background:#f7f7f5;\n  border-left:1px solid rgba(11,11,11,.045);\n}\n#soma-responsive-2027 .sr-approach>img{\n  position:absolute;\n  inset:0;\n  width:100%;\n  height:100%;\n  object-fit:cover;\n  object-position:68% center;\n  opacity:.14;\n}\n#soma-responsive-2027 .sr-approach-wash{\n  position:absolute;\n  inset:0;\n  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.78));\n}\n#soma-responsive-2027 .sr-approach-copy{\n  position:absolute;\n  z-index:2;\n  inset:22px 18px 18px;\n  display:flex;\n  flex-direction:column;\n  align-items:flex-start;\n}\n#soma-responsive-2027 .sr-approach-copy>span{\n  font-family:\"DM Mono\",monospace;\n  font-size:3.2px;\n  color:#4d4d4d;\n}\n#soma-responsive-2027 .sr-approach-copy>i{\n  width:56%;\n  height:1px;\n  margin-top:8px;\n  background:var(--line-strong);\n}\n#soma-responsive-2027 .sr-approach-copy h2{\n  margin-top:20px;\n  font-family:\"Manrope\",sans-serif;\n  font-size:16px;\n  line-height:.94;\n  letter-spacing:-.05em;\n  font-weight:300;\n}\n#soma-responsive-2027 .sr-approach-copy p{\n  margin-top:12px;\n  font-size:4px;\n  line-height:1.5;\n}\n#soma-responsive-2027 .sr-approach-copy a{\n  width:auto;\n  height:auto;\n  margin-top:auto;\n  padding:0 0 4px;\n  border:0;\n  border-bottom:1px solid rgba(11,11,11,.28);\n  border-radius:0;\n  display:flex;\n  align-items:center;\n  gap:10px;\n  font-family:\"DM Mono\",monospace;\n  font-size:3.2px;\n}\n#soma-responsive-2027 .sr-approach-copy a span{display:inline}\n#soma-responsive-2027 .sr-approach-copy a b{\n  font-size:7px;\n  font-weight:300;\n}\n\n#soma-responsive-2027 .sr-board-bottom{\n  min-height:0;\n  display:grid;\n  grid-template-columns:64% 36%;\n}\n#soma-responsive-2027 .sr-experience{\n  position:relative;\n  min-width:0;\n  overflow:hidden;\n  background:#1b1715;\n}\n#soma-responsive-2027 .sr-experience>img{\n  position:absolute;\n  inset:0;\n  width:100%;\n  height:100%;\n  object-fit:cover;\n  object-position:center 55%;\n  filter:saturate(.72);\n}\n#soma-responsive-2027 .sr-experience-wash{\n  position:absolute;\n  inset:0;\n  background:linear-gradient(90deg,rgba(18,13,10,.72),rgba(18,13,10,.30) 43%,rgba(18,13,10,.025) 78%);\n}\n#soma-responsive-2027 .sr-experience-copy{\n  position:absolute;\n  z-index:2;\n  left:20px;\n  top:20px;\n  bottom:18px;\n  width:48%;\n  display:flex;\n  flex-direction:column;\n  color:#fff;\n}\n#soma-responsive-2027 .sr-experience-copy>span{\n  font-family:\"DM Mono\",monospace;\n  font-size:3.2px;\n}\n#soma-responsive-2027 .sr-experience-copy>i{\n  width:34%;\n  height:1px;\n  margin-top:7px;\n  background:rgba(255,255,255,.48);\n}\n#soma-responsive-2027 .sr-experience-copy h2{\n  margin-top:14px;\n  font-family:\"Manrope\",sans-serif;\n  font-size:17px;\n  line-height:.94;\n  letter-spacing:-.045em;\n  font-weight:300;\n}\n#soma-responsive-2027 .sr-experience-copy p{\n  margin-top:10px;\n  font-size:4px;\n  line-height:1.45;\n}\n#soma-responsive-2027 .sr-experience-copy a{\n  width:auto;\n  height:auto;\n  margin-top:auto;\n  align-self:flex-start;\n  padding:0 0 4px;\n  border:0;\n  border-bottom:1px solid rgba(255,255,255,.58);\n  border-radius:0;\n  display:flex;\n  align-items:center;\n  gap:10px;\n  font-family:\"DM Mono\",monospace;\n  font-size:3.2px;\n}\n#soma-responsive-2027 .sr-experience-copy a b{\n  font-size:7px;\n  font-weight:300;\n}\n\n#soma-responsive-2027 .sr-booking{\n  position:relative;\n  min-width:0;\n  padding:20px 18px 16px;\n  background:#fff;\n  border-left:1px solid rgba(11,11,11,.05);\n}\n#soma-responsive-2027 .sr-booking-plus{display:none}\n#soma-responsive-2027 .sr-booking-label{\n  font-family:\"DM Mono\",monospace;\n  font-size:3.2px;\n  color:#555;\n}\n#soma-responsive-2027 .sr-booking h2{\n  margin-top:9px;\n  font-family:\"Manrope\",sans-serif;\n  font-size:17px;\n  line-height:.92;\n  letter-spacing:-.05em;\n  font-weight:300;\n}\n#soma-responsive-2027 .sr-form{\n  margin-top:16px;\n  display:block;\n}\n#soma-responsive-2027 .sr-form label{\n  display:block;\n  margin-bottom:9px;\n}\n#soma-responsive-2027 .sr-form label>span{\n  display:block;\n  margin-bottom:1px;\n  font-family:\"DM Mono\",monospace;\n  font-size:2.9px;\n  color:#646464;\n}\n#soma-responsive-2027 .sr-form input,\n#soma-responsive-2027 .sr-form select{\n  width:100%;\n  height:17px;\n  padding:0;\n  border:0;\n  border-bottom:1px solid rgba(11,11,11,.12);\n  border-radius:0;\n  outline:0;\n  background:transparent;\n  font-size:3.7px;\n}\n#soma-responsive-2027 .sr-form label:nth-of-type(2),\n#soma-responsive-2027 .sr-form label:nth-of-type(5),\n#soma-responsive-2027 .sr-form label:nth-of-type(7){display:none}\n#soma-responsive-2027 .sr-form button{\n  width:100%;\n  height:30px;\n  margin-top:7px;\n  padding:0 10px;\n  border:0;\n  border-radius:var(--r-sm);\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  gap:8px;\n  background:var(--red);\n  color:#fff;\n  font-family:\"DM Mono\",monospace;\n  font-size:3.2px;\n  box-shadow:none;\n}\n#soma-responsive-2027 .sr-form button b{\n  font-size:7px;\n  font-weight:300;\n}\n#soma-responsive-2027 .sr-booking-contact,\n#soma-responsive-2027 .sr-footer{display:none}\n\n\/* PHONE *\/\n#soma-responsive-2027 .sr-phone{\n  position:absolute;\n  z-index:16;\n  right:1.7%;\n  bottom:2.8%;\n  width:21.3%;\n  height:54.5%;\n  min-width:145px;\n  padding:5px;\n  overflow:hidden;\n  border:1px solid rgba(11,11,11,.055);\n  border-radius:24px;\n  background:#f7f7f5;\n  box-shadow:0 12px 28px rgba(0,0,0,.09);\n  transform:none;\n}\n#soma-responsive-2027 .sr-phone-screen{\n  width:100%;\n  height:100%;\n  overflow:hidden;\n  display:flex;\n  flex-direction:column;\n  border-radius:19px;\n  background:#fff;\n}\n#soma-responsive-2027 .sr-phone-speaker{\n  position:absolute;\n  z-index:30;\n  top:9px;\n  left:50%;\n  width:26%;\n  height:4px;\n  transform:translateX(-50%);\n  border-radius:10px;\n  background:#232323;\n}\n#soma-responsive-2027 .sr-mobile-header{\n  height:12%;\n  min-height:44px;\n  padding:7px 11px 0;\n  display:flex;\n  justify-content:space-between;\n  align-items:center;\n  background:#fff;\n}\n#soma-responsive-2027 .sr-mobile-logo{\n  display:flex;\n  align-items:baseline;\n  gap:4px;\n}\n#soma-responsive-2027 .sr-mobile-logo strong{\n  font-family:\"Manrope\",sans-serif;\n  font-size:11px;\n  font-weight:300;\n  letter-spacing:-.045em;\n}\n#soma-responsive-2027 .sr-mobile-logo span{\n  font-family:\"DM Mono\",monospace;\n  font-size:2.2px;\n}\n#soma-responsive-2027 .sr-mobile-header button{\n  width:18px;\n  height:18px;\n  padding:0;\n  border:0;\n  background:transparent;\n  display:flex;\n  flex-direction:column;\n  gap:3px;\n  align-items:center;\n  justify-content:center;\n}\n#soma-responsive-2027 .sr-mobile-header button i{\n  width:11px;\n  height:1px;\n  background:#111;\n}\n#soma-responsive-2027 .sr-mobile-hero{\n  position:relative;\n  height:42%;\n  flex:0 0 auto;\n  overflow:hidden;\n  background:#f2e7e2;\n}\n#soma-responsive-2027 .sr-mobile-hero>img{\n  position:absolute;\n  inset:0;\n  width:100%;\n  height:100%;\n  object-fit:cover;\n}\n#soma-responsive-2027 .sr-mobile-hero-wash{\n  position:absolute;\n  inset:0;\n  background:linear-gradient(90deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.39) 45%,rgba(255,255,255,.03) 78%);\n}\n#soma-responsive-2027 .sr-mobile-hero-copy{\n  position:absolute;\n  z-index:2;\n  left:12px;\n  top:17%;\n}\n#soma-responsive-2027 .sr-mobile-hero-copy>span{display:none}\n#soma-responsive-2027 .sr-mobile-hero-copy h2{\n  font-family:\"Manrope\",sans-serif;\n  font-size:27px;\n  line-height:.83;\n  letter-spacing:-.058em;\n  font-weight:300;\n}\n#soma-responsive-2027 .sr-mobile-hero-copy p{\n  width:76%;\n  margin-top:10px;\n  font-size:4.1px;\n  line-height:1.45;\n}\n#soma-responsive-2027 .sr-mobile-number{\n  position:absolute;\n  right:12px;\n  bottom:10px;\n  color:rgba(255,255,255,.78);\n  font-family:\"Manrope\",sans-serif;\n  font-size:24px;\n  line-height:1;\n  font-weight:200;\n}\n#soma-responsive-2027 .sr-mobile-meta{\n  height:9%;\n  padding:0 12px;\n  display:grid;\n  grid-template-columns:auto 1fr auto;\n  align-items:center;\n  gap:7px;\n  background:#fff;\n  font-family:\"DM Mono\",monospace;\n  font-size:2.7px;\n}\n#soma-responsive-2027 .sr-mobile-meta i{\n  height:1px;\n  background:rgba(11,11,11,.14);\n}\n#soma-responsive-2027 .sr-mobile-meta b{\n  font-size:3.7px;\n  letter-spacing:1.7px;\n}\n#soma-responsive-2027 .sr-mobile-experience{\n  position:relative;\n  height:26%;\n  margin:0 9px 7px;\n  overflow:hidden;\n  border-radius:var(--r-sm);\n  background:#111;\n}\n#soma-responsive-2027 .sr-mobile-experience img{\n  position:absolute;\n  inset:0;\n  width:100%;\n  height:100%;\n  object-fit:cover;\n  filter:saturate(.7);\n}\n#soma-responsive-2027 .sr-mobile-experience div{\n  position:absolute;\n  inset:0;\n  background:linear-gradient(90deg,rgba(10,8,7,.64),rgba(10,8,7,.05));\n}\n#soma-responsive-2027 .sr-mobile-experience span{\n  position:absolute;\n  z-index:2;\n  left:10px;\n  bottom:10px;\n  color:#fff;\n  font-family:\"Manrope\",sans-serif;\n  font-size:9px;\n  line-height:.96;\n  letter-spacing:-.04em;\n}\n#soma-responsive-2027 .sr-mobile-booking{\n  height:7%;\n  padding:0 9px 5px;\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  background:#fff;\n}\n#soma-responsive-2027 .sr-mobile-booking>span{\n  font-family:\"DM Mono\",monospace;\n  font-size:2.2px;\n}\n#soma-responsive-2027 .sr-mobile-booking>a{\n  min-width:42px;\n  height:20px;\n  padding:0 6px;\n  border-radius:4px;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  gap:4px;\n  background:var(--red);\n  color:#fff;\n  font-family:\"DM Mono\",monospace;\n  font-size:2.2px;\n}\n#soma-responsive-2027 .sr-mobile-footer{\n  flex:1;\n  min-height:0;\n  padding:0 9px;\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  border-top:1px solid rgba(11,11,11,.06);\n  font-family:\"DM Mono\",monospace;\n  font-size:2px;\n}\n#soma-responsive-2027 .sr-phone-caption,\n#soma-responsive-2027 .sr-stage-bottom{display:none}\n\n@media(pointer:fine){\n  #soma-responsive-2027 .sr-hero-card:hover img,\n  #soma-responsive-2027 .sr-product:hover img{transform:scale(1.018)}\n}\n\n\/* TABLET *\/\n@media(max-width:1180px) and (min-width:701px){\n  #soma-responsive-2027 .sr-shell{\n    height:820px;\n    grid-template-columns:48% 52%;\n  }\n  #soma-responsive-2027 .sr-header{\n    padding-left:18px;\n    grid-template-columns:1.28fr 2.35fr 1.05fr;\n  }\n  #soma-responsive-2027 .sr-nav a:nth-child(4),\n  #soma-responsive-2027 .sr-nav a:nth-child(5){display:none}\n  #soma-responsive-2027 .sr-nav{grid-template-columns:repeat(3,1fr)}\n  #soma-responsive-2027 .sr-brand strong{font-size:24px}\n  #soma-responsive-2027 .sr-hero-book{margin-right:14px}\n  #soma-responsive-2027 .sr-hero-title-left{left:18px}\n  #soma-responsive-2027 .sr-hero-title-right{right:18px}\n  #soma-responsive-2027 .sr-hero-gallery{\n    padding-left:18px;\n    padding-right:16px;\n  }\n  #soma-responsive-2027 .sr-hero-title-left h1{font-size:51px}\n  #soma-responsive-2027 .sr-hero-title-right h2{font-size:45px}\n  #soma-responsive-2027 .sr-desktop{\n    left:3%;\n    top:8%;\n    width:84%;\n    height:84%;\n  }\n  #soma-responsive-2027 .sr-phone{\n    right:1%;\n    width:24%;\n    height:52%;\n  }\n}\n\n\/* PAGE MOBILE *\/\n@media(max-width:700px){\n  #soma-responsive-2027 .sr-shell{\n    height:auto;\n    min-height:0;\n    max-height:none;\n    display:block;\n  }\n  #soma-responsive-2027 .sr-hero{\n    height:635px;\n    grid-template-rows:60px 205px 1fr 34px;\n  }\n  #soma-responsive-2027 .sr-header{\n    height:60px;\n    padding-left:14px;\n    grid-template-columns:1fr auto;\n  }\n  #soma-responsive-2027 .sr-brand{border-right:0}\n  #soma-responsive-2027 .sr-nav{display:none}\n  #soma-responsive-2027 .sr-hero-book{\n    height:34px;\n    margin:0 12px 0 8px;\n    padding:0 12px;\n    font-size:5px;\n  }\n  #soma-responsive-2027 .sr-brand strong{font-size:22px}\n  #soma-responsive-2027 .sr-brand span{font-size:4px}\n  #soma-responsive-2027 .sr-hero-editorial{padding:0 14px}\n  #soma-responsive-2027 .sr-hero-title-left{\n    left:14px;\n    top:22px;\n    width:90%;\n  }\n  #soma-responsive-2027 .sr-hero-title-left h1{font-size:43px}\n  #soma-responsive-2027 .sr-hero-note{top:79px}\n  #soma-responsive-2027 .sr-hero-note p{font-size:6px}\n  #soma-responsive-2027 .sr-hero-note>span{\n    min-width:29px;\n    height:16px;\n    font-size:4.5px;\n  }\n  #soma-responsive-2027 .sr-hero-title-right{\n    right:14px;\n    top:118px;\n    width:72%;\n  }\n  #soma-responsive-2027 .sr-hero-title-right>p{display:none}\n  #soma-responsive-2027 .sr-hero-title-right h2{\n    margin-top:0;\n    font-size:39px;\n  }\n  #soma-responsive-2027 .sr-hero-gallery{\n    padding:0 12px 10px 14px;\n    grid-template-columns:3fr 1.9fr .9fr;\n    gap:5px;\n  }\n  #soma-responsive-2027 .sr-hero-card{border-radius:6px}\n  #soma-responsive-2027 .sr-hero-card-label{\n    top:7px;\n    left:7px;\n    font-size:3.6px;\n  }\n  #soma-responsive-2027 .sr-hero-card>b{\n    top:6px;\n    right:6px;\n    width:18px;\n    height:18px;\n    font-size:6px;\n  }\n  #soma-responsive-2027 .sr-hero-footerline{\n    padding:0 14px;\n    font-size:3.2px;\n  }\n\n  #soma-responsive-2027 .sr-stage{height:590px}\n  #soma-responsive-2027 .sr-stage-top{\n    left:16px;\n    right:16px;\n    top:12px;\n    font-size:3px;\n  }\n  #soma-responsive-2027 .sr-desktop{\n    left:50%;\n    top:51%;\n    width:760px;\n    height:760px;\n    transform:translate(-61%,-50%) scale(.38);\n    transform-origin:center;\n    border-radius:14px;\n  }\n  #soma-responsive-2027 .sr-phone{\n    right:4px;\n    bottom:22px;\n    width:138px;\n    min-width:138px;\n    height:374px;\n    border-radius:22px;\n  }\n  #soma-responsive-2027 .sr-phone-screen{border-radius:17px}\n}\n\n@media(max-width:420px){\n  #soma-responsive-2027 .sr-hero{\n    height:605px;\n    grid-template-rows:58px 196px 1fr 32px;\n  }\n  #soma-responsive-2027 .sr-hero-title-left h1{font-size:39px}\n  #soma-responsive-2027 .sr-hero-title-right{top:114px}\n  #soma-responsive-2027 .sr-hero-title-right h2{font-size:35px}\n  #soma-responsive-2027 .sr-stage{height:540px}\n  #soma-responsive-2027 .sr-desktop{\n    transform:translate(-62%,-50%) scale(.335);\n  }\n  #soma-responsive-2027 .sr-phone{\n    width:128px;\n    min-width:128px;\n    height:346px;\n    right:-2px;\n  }\n}\n\n#soma-responsive-2027{\n  --space-10:10px;\n  --space-20:20px;\n  --space-40:40px;\n  --space-60:60px;\n  --space-120:120px;\n  --water:url(\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-29-ago-2026-11_55_35.webp\");\n}\n\n\/* ---------- GLOBAL SAFETY ---------- *\/\n#soma-responsive-2027{overflow:hidden;}\n#soma-responsive-2027 a,\n#soma-responsive-2027 button{-webkit-tap-highlight-color:transparent;}\n#soma-responsive-2027 img{display:block;}\n#soma-responsive-2027 .sr-shell,\n#soma-responsive-2027 .sr-hero,\n#soma-responsive-2027 .sr-stage,\n#soma-responsive-2027 .sr-desktop,\n#soma-responsive-2027 .sr-phone{min-width:0;min-height:0;}\n\n\/* ---------- LEFT \/ APPROVED HERO ---------- *\/\n#soma-responsive-2027 .sr-brand span{font-size:7px;}\n#soma-responsive-2027 .sr-nav a{font-size:7px;}\n#soma-responsive-2027 .sr-hero-book{font-size:7px;}\n#soma-responsive-2027 .sr-hero-title-left h1{\n  letter-spacing:-.045em;\n  line-height:.88;\n}\n#soma-responsive-2027 .sr-hero-note p{font-size:9px;line-height:1.45;}\n#soma-responsive-2027 .sr-hero-note>span{font-size:6px;}\n#soma-responsive-2027 .sr-hero-title-right>p{font-size:9px;line-height:1.5;}\n#soma-responsive-2027 .sr-hero-title-right h2{\n  letter-spacing:-.042em;\n  line-height:.9;\n}\n#soma-responsive-2027 .sr-hero-card-label{font-size:6.5px;line-height:1.5;}\n#soma-responsive-2027 .sr-hero-footerline{font-size:5.8px;}\n\n\/* ---------- RIGHT STAGE \/ WATER BACKGROUND ---------- *\/\n#soma-responsive-2027 .sr-stage{\n  background:#d7e5e6;\n  isolation:isolate;\n}\n#soma-responsive-2027 .sr-stage-bg{\n  inset:-2%;\n  background-image:\n    linear-gradient(180deg,rgba(244,249,249,.18),rgba(232,241,241,.42)),\n    var(--water);\n  background-size:cover;\n  background-position:center;\n  filter:saturate(.72) brightness(1.08);\n  transform:scale(1.04);\n}\n#soma-responsive-2027 .sr-stage-wash{\n  background:\n    linear-gradient(180deg,rgba(255,255,255,.23),rgba(255,255,255,.06) 52%,rgba(255,255,255,.16)),\n    linear-gradient(90deg,rgba(255,255,255,.11),transparent 34%,transparent 70%,rgba(255,255,255,.10));\n  backdrop-filter:blur(.3px);\n}\n#soma-responsive-2027 .sr-stage-top{\n  color:#182021;\n  font-size:5.8px;\n  text-shadow:0 1px 8px rgba(255,255,255,.48);\n}\n\n\/* ---------- DESKTOP MOCKUP ---------- *\/\n#soma-responsive-2027 .sr-desktop{\n  left:3.2%;\n  top:6.7%;\n  width:86%;\n  height:86.5%;\n  box-shadow:0 20px 55px rgba(13,30,31,.12);\n}\n#soma-responsive-2027 .sr-board-logo strong{font-size:13px;}\n#soma-responsive-2027 .sr-board-logo span{font-size:4px;}\n#soma-responsive-2027 .sr-board-header nav{font-size:4.2px;gap:16px;}\n#soma-responsive-2027 .sr-section-head{font-size:5px;}\n#soma-responsive-2027 .sr-section-head a{font-size:4.3px;}\n#soma-responsive-2027 .sr-product small{font-size:4px;}\n#soma-responsive-2027 .sr-product h3{font-size:11px;line-height:1.05;letter-spacing:-.025em;}\n#soma-responsive-2027 .sr-product p{font-size:5px;line-height:1.45;}\n#soma-responsive-2027 .sr-approach-copy>span,\n#soma-responsive-2027 .sr-experience-copy>span,\n#soma-responsive-2027 .sr-booking-label{font-size:4px;}\n#soma-responsive-2027 .sr-approach-copy h2{font-size:18px;line-height:.98;letter-spacing:-.035em;}\n#soma-responsive-2027 .sr-approach-copy p{font-size:5px;line-height:1.5;}\n#soma-responsive-2027 .sr-approach-copy a,\n#soma-responsive-2027 .sr-experience-copy a{font-size:4px;}\n#soma-responsive-2027 .sr-experience-copy h2{font-size:19px;line-height:.98;letter-spacing:-.035em;}\n#soma-responsive-2027 .sr-experience-copy p{font-size:5px;line-height:1.5;}\n#soma-responsive-2027 .sr-booking h2{font-size:19px;line-height:.96;letter-spacing:-.035em;}\n#soma-responsive-2027 .sr-form{margin-top:14px;}\n#soma-responsive-2027 .sr-form label{margin-bottom:8px;}\n#soma-responsive-2027 .sr-form label>span{font-size:3.8px;color:#454545;}\n#soma-responsive-2027 .sr-form input,\n#soma-responsive-2027 .sr-form select{font-size:4.5px;height:18px;min-width:0;}\n#soma-responsive-2027 .sr-form button{font-size:4px;height:31px;cursor:pointer;}\n\n\/* ---------- PHONE MOCKUP ---------- *\/\n#soma-responsive-2027 .sr-phone{\n  right:1.65%;\n  bottom:3.1%;\n  width:20.2%;\n  height:53%;\n  min-width:140px;\n  box-shadow:0 18px 44px rgba(13,30,31,.18);\n}\n#soma-responsive-2027 .sr-mobile-logo strong{font-size:11.5px;}\n#soma-responsive-2027 .sr-mobile-logo span{font-size:2.8px;}\n#soma-responsive-2027 .sr-mobile-hero-copy h2{font-size:25px;line-height:.87;letter-spacing:-.04em;}\n#soma-responsive-2027 .sr-mobile-hero-copy p{font-size:4.8px;line-height:1.45;}\n#soma-responsive-2027 .sr-mobile-meta{font-size:3.3px;}\n#soma-responsive-2027 .sr-mobile-experience span{font-size:9.5px;line-height:1;}\n#soma-responsive-2027 .sr-mobile-booking>span,\n#soma-responsive-2027 .sr-mobile-booking>a{font-size:2.8px;}\n#soma-responsive-2027 .sr-mobile-footer{font-size:2.5px;}\n\n\/* ---------- TABLET ---------- *\/\n@media(max-width:1180px) and (min-width:701px){\n  #soma-responsive-2027 .sr-shell{\n    height:820px;\n    grid-template-columns:48% 52%;\n  }\n  #soma-responsive-2027 .sr-desktop{\n    left:3.2%;\n    top:8%;\n    width:82.5%;\n    height:83.5%;\n  }\n  #soma-responsive-2027 .sr-phone{\n    right:1.2%;\n    width:23%;\n    min-width:136px;\n    height:50.5%;\n  }\n  #soma-responsive-2027 .sr-hero-title-left h1{letter-spacing:-.04em;}\n}\n\n\/* ---------- REAL PAGE MOBILE ---------- *\/\n@media(max-width:700px){\n  #soma-responsive-2027{overflow:hidden;}\n  #soma-responsive-2027 .sr-shell{\n    width:100%;\n    height:auto;\n    min-height:0;\n    max-height:none;\n    display:block;\n  }\n\n  \/* hero is redesigned for the narrow viewport, not desktop squeezed *\/\n  #soma-responsive-2027 .sr-hero{\n    height:690px;\n    grid-template-rows:60px 220px 1fr 34px;\n    border-right:0;\n    border-bottom:1px solid rgba(11,11,11,.05);\n  }\n  #soma-responsive-2027 .sr-header{\n    height:60px;\n    padding-left:16px;\n    grid-template-columns:1fr auto;\n  }\n  #soma-responsive-2027 .sr-brand{border-right:0;}\n  #soma-responsive-2027 .sr-brand strong{font-size:23px;}\n  #soma-responsive-2027 .sr-brand span{font-size:5px;}\n  #soma-responsive-2027 .sr-nav{display:none;}\n  #soma-responsive-2027 .sr-hero-book{\n    height:34px;\n    margin:0 14px 0 8px;\n    padding:0 12px;\n    font-size:5.5px;\n  }\n  #soma-responsive-2027 .sr-hero-editorial{padding:0 16px;}\n  #soma-responsive-2027 .sr-hero-title-left{\n    left:16px;\n    top:24px;\n    width:calc(100% - 32px);\n  }\n  #soma-responsive-2027 .sr-hero-title-left h1{\n    max-width:100%;\n    font-size:clamp(35px,10.2vw,43px);\n    line-height:.9;\n    letter-spacing:-.035em;\n    white-space:nowrap;\n  }\n  #soma-responsive-2027 .sr-hero-note{\n    top:84px;\n    gap:10px;\n  }\n  #soma-responsive-2027 .sr-hero-note p{font-size:7.3px;line-height:1.45;}\n  #soma-responsive-2027 .sr-hero-note>span{\n    min-width:30px;\n    height:16px;\n    padding:0 7px;\n    font-size:4.8px;\n  }\n  #soma-responsive-2027 .sr-hero-title-right{\n    right:16px;\n    top:126px;\n    width:72%;\n  }\n  #soma-responsive-2027 .sr-hero-title-right>p{display:none;}\n  #soma-responsive-2027 .sr-hero-title-right h2{\n    margin-top:0;\n    font-size:clamp(32px,9.7vw,40px);\n    line-height:.92;\n    letter-spacing:-.035em;\n  }\n  #soma-responsive-2027 .sr-hero-gallery{\n    padding:0 14px 12px 16px;\n    grid-template-columns:minmax(0,2.9fr) minmax(0,1.75fr) minmax(46px,.9fr);\n    gap:6px;\n  }\n  #soma-responsive-2027 .sr-hero-card{border-radius:7px;}\n  #soma-responsive-2027 .sr-hero-card-label{font-size:4.2px;}\n  #soma-responsive-2027 .sr-hero-card>b{width:20px;height:20px;font-size:6px;}\n  #soma-responsive-2027 .sr-hero-footerline{\n    padding:0 16px;\n    font-size:3.7px;\n  }\n\n  \/* stage: both mockups remain fully visible over the water surface *\/\n  #soma-responsive-2027 .sr-stage{\n    height:600px;\n    overflow:hidden;\n    background:#d7e5e6;\n  }\n  #soma-responsive-2027 .sr-stage-bg{\n    inset:-4%;\n    background-position:48% center;\n    filter:saturate(.75) brightness(1.1);\n  }\n  #soma-responsive-2027 .sr-stage-wash{\n    background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.04) 52%,rgba(255,255,255,.15));\n  }\n  #soma-responsive-2027 .sr-stage-top{\n    top:15px;\n    left:16px;\n    right:16px;\n    font-size:3.5px;\n  }\n\n  #soma-responsive-2027 .sr-desktop{\n    left:16px;\n    top:54px;\n    width:760px;\n    height:760px;\n    transform:scale(var(--sr-mobile-desk-scale,.45));\n    transform-origin:top left;\n    border-radius:14px;\n    box-shadow:0 16px 42px rgba(13,30,31,.13);\n  }\n\n  #soma-responsive-2027 .sr-phone{\n    right:12px;\n    bottom:20px;\n    width:136px;\n    min-width:136px;\n    height:370px;\n    border-radius:22px;\n    box-shadow:0 16px 38px rgba(13,30,31,.22);\n  }\n  #soma-responsive-2027 .sr-phone-screen{border-radius:17px;}\n}\n\n@media(max-width:420px){\n  #soma-responsive-2027 .sr-hero{\n    height:650px;\n    grid-template-rows:58px 204px 1fr 32px;\n  }\n  #soma-responsive-2027 .sr-header{height:58px;}\n  #soma-responsive-2027 .sr-hero-title-left h1{font-size:clamp(33px,10vw,39px);}\n  #soma-responsive-2027 .sr-hero-title-right{top:119px;}\n  #soma-responsive-2027 .sr-hero-title-right h2{font-size:clamp(30px,9.3vw,36px);}\n  #soma-responsive-2027 .sr-stage{height:560px;}\n  #soma-responsive-2027 .sr-desktop{left:14px;top:50px;}\n  #soma-responsive-2027 .sr-phone{\n    right:6px;\n    bottom:16px;\n    width:126px;\n    min-width:126px;\n    height:344px;\n  }\n}\n\n@media(prefers-reduced-motion:reduce){\n  #soma-responsive-2027 *,\n  #soma-responsive-2027 *::before,\n  #soma-responsive-2027 *::after{\n    scroll-behavior:auto!important;\n    transition:none!important;\n    animation:none!important;\n  }\n}\n\n\/* Large tablet \/ landscape keeps the two-panel presentation, but with safer geometry. *\/\n@media (max-width:1180px) and (min-width:901px){\n  #soma-responsive-2027 .sr-shell{\n    height:820px;\n    min-height:820px;\n    grid-template-columns:47% 53%;\n  }\n  #soma-responsive-2027 .sr-header{\n    height:66px;\n    padding-left:18px;\n    grid-template-columns:1.2fr 2fr .95fr;\n  }\n  #soma-responsive-2027 .sr-hero{\n    grid-template-rows:66px 30% 1fr 38px;\n  }\n  #soma-responsive-2027 .sr-nav a:nth-child(4),\n  #soma-responsive-2027 .sr-nav a:nth-child(5){display:none;}\n  #soma-responsive-2027 .sr-nav{grid-template-columns:repeat(3,1fr);}\n  #soma-responsive-2027 .sr-brand strong{font-size:23px;}\n  #soma-responsive-2027 .sr-brand span,\n  #soma-responsive-2027 .sr-nav a,\n  #soma-responsive-2027 .sr-hero-book{font-size:5.8px;}\n  #soma-responsive-2027 .sr-hero-book{margin:0 12px 0 10px;padding:0 9px;}\n  #soma-responsive-2027 .sr-hero-editorial{padding:0 20px;}\n  #soma-responsive-2027 .sr-hero-title-left{left:20px;top:14%;width:76%;}\n  #soma-responsive-2027 .sr-hero-title-left h1{font-size:clamp(42px,5.25vw,58px);}\n  #soma-responsive-2027 .sr-hero-note{top:112px;}\n  #soma-responsive-2027 .sr-hero-note p{font-size:7.2px;}\n  #soma-responsive-2027 .sr-hero-title-right{right:20px;top:16%;width:48%;}\n  #soma-responsive-2027 .sr-hero-title-right>p{display:none;}\n  #soma-responsive-2027 .sr-hero-title-right h2{margin-top:78px;font-size:clamp(36px,4.6vw,49px);}\n  #soma-responsive-2027 .sr-hero-gallery{padding:0 16px 10px 20px;gap:6px;}\n  #soma-responsive-2027 .sr-hero-card-label{font-size:4.8px;}\n  #soma-responsive-2027 .sr-hero-footerline{padding:0 20px;font-size:4.2px;}\n\n  #soma-responsive-2027 .sr-stage-top{top:15px;left:22px;right:22px;font-size:4px;}\n  #soma-responsive-2027 .sr-desktop{\n    left:4%;\n    top:8%;\n    width:83%;\n    height:82.5%;\n  }\n  #soma-responsive-2027 .sr-phone{\n    right:1.5%;\n    bottom:4%;\n    width:22%;\n    min-width:124px;\n    height:48%;\n  }\n}\n\n\/* Portrait tablet gets its own composition instead of a squeezed 50\/50 desktop. *\/\n@media (max-width:900px) and (min-width:701px){\n  #soma-responsive-2027 .sr-shell{\n    display:block;\n    height:auto;\n    min-height:0;\n    max-height:none;\n  }\n\n  #soma-responsive-2027 .sr-hero{\n    height:720px;\n    border-right:0;\n    border-bottom:1px solid rgba(11,11,11,.05);\n    grid-template-rows:64px 218px 1fr 38px;\n  }\n  #soma-responsive-2027 .sr-header{\n    height:64px;\n    padding-left:22px;\n    grid-template-columns:1fr auto;\n  }\n  #soma-responsive-2027 .sr-nav{display:none;}\n  #soma-responsive-2027 .sr-brand{border-right:0;}\n  #soma-responsive-2027 .sr-brand strong{font-size:26px;}\n  #soma-responsive-2027 .sr-brand span{font-size:5.5px;}\n  #soma-responsive-2027 .sr-hero-book{\n    height:36px;\n    margin:0 18px 0 10px;\n    padding:0 14px;\n    font-size:6px;\n  }\n  #soma-responsive-2027 .sr-hero-editorial{padding:0 22px;}\n  #soma-responsive-2027 .sr-hero-title-left{\n    left:22px;\n    top:26px;\n    width:70%;\n  }\n  #soma-responsive-2027 .sr-hero-title-left h1{\n    font-size:clamp(52px,7.3vw,64px);\n    line-height:.9;\n    white-space:nowrap;\n  }\n  #soma-responsive-2027 .sr-hero-note{top:104px;}\n  #soma-responsive-2027 .sr-hero-note p{font-size:8px;}\n  #soma-responsive-2027 .sr-hero-title-right{\n    right:22px;\n    top:118px;\n    width:44%;\n  }\n  #soma-responsive-2027 .sr-hero-title-right>p{display:none;}\n  #soma-responsive-2027 .sr-hero-title-right h2{\n    margin-top:0;\n    font-size:clamp(43px,6.2vw,54px);\n  }\n  #soma-responsive-2027 .sr-hero-gallery{\n    padding:0 18px 12px 22px;\n    grid-template-columns:3.1fr 2fr 1fr;\n    gap:8px;\n  }\n  #soma-responsive-2027 .sr-hero-card-label{font-size:5.4px;}\n  #soma-responsive-2027 .sr-hero-footerline{padding:0 22px;font-size:4.5px;}\n\n  #soma-responsive-2027 .sr-stage{\n    height:700px;\n    overflow:hidden;\n  }\n  #soma-responsive-2027 .sr-stage-bg{\n    inset:-3%;\n    background-position:center 44%;\n  }\n  #soma-responsive-2027 .sr-stage-top{\n    top:18px;\n    left:24px;\n    right:24px;\n    font-size:4.2px;\n  }\n  #soma-responsive-2027 .sr-desktop{\n    left:5%;\n    top:9%;\n    width:82%;\n    height:82%;\n    transform:none;\n  }\n  #soma-responsive-2027 .sr-phone{\n    right:2.5%;\n    bottom:4.5%;\n    width:19%;\n    min-width:132px;\n    height:46%;\n  }\n}\n\n#soma-responsive-2027 .sr-hero-card-main{cursor:default}\n#soma-responsive-2027 .sr-skin-match{\n  position:absolute;z-index:8;left:12px;right:12px;bottom:12px;\n  display:flex;flex-wrap:wrap;gap:5px;align-items:center\n}\n#soma-responsive-2027 .sr-skin-match button{\n  appearance:none;border:1px solid rgba(255,255,255,.52);border-radius:999px;\n  min-height:25px;padding:0 10px;background:rgba(15,15,15,.24);color:#fff;\n  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);\n  font:500 6px\/1 \"DM Mono\",monospace;letter-spacing:.02em;cursor:pointer;\n  transition:background .22s ease,border-color .22s ease,transform .22s ease\n}\n#soma-responsive-2027 .sr-skin-match button:hover{background:rgba(15,15,15,.48)}\n#soma-responsive-2027 .sr-skin-match button[aria-pressed=\"true\"]{\n  background:#fff;color:#111;border-color:#fff\n}\n#soma-responsive-2027 .sr-match-state{\n  position:absolute;z-index:7;left:12px;bottom:45px;color:#fff;\n  font:400 6px\/1.35 \"DM Mono\",monospace;text-shadow:0 1px 8px rgba(0,0,0,.28)\n}\n#soma-responsive-2027 .sr-match-state strong{display:block;margin-top:3px;font:400 14px\/.95 \"Manrope\",sans-serif;letter-spacing:-.035em}\n#soma-responsive-2027 .sr-hero-card-mid::before,\n#soma-responsive-2027 .sr-hero-card-small::before{\n  content:\"\";position:absolute;z-index:4;inset:0;border:0 solid var(--red);pointer-events:none;transition:border-width .22s ease\n}\n#soma-responsive-2027 .sr-hero-card.sr-linked::before{border-width:3px}\n#soma-responsive-2027 .sr-product{transition:opacity .2s ease,transform .2s ease}\n#soma-responsive-2027 .sr-products.sr-has-match .sr-product{opacity:.38}\n#soma-responsive-2027 .sr-products.sr-has-match .sr-product.sr-product-active{opacity:1;transform:translateY(-2px)}\n#soma-responsive-2027 .sr-product.sr-product-active .sr-product-photo{outline:2px solid var(--red);outline-offset:2px}\n#soma-responsive-2027 .sr-product.sr-product-active h3::after{content:\"  \/ MATCH\";color:var(--red);font:500 3.4px\/1 \"DM Mono\",monospace;letter-spacing:.02em;vertical-align:middle}\n#soma-responsive-2027 .sr-match-route{\n  position:absolute;z-index:20;left:5%;bottom:2.3%;display:flex;align-items:center;gap:7px;\n  color:#222;font:500 4.2px\/1 \"DM Mono\",monospace;letter-spacing:.03em\n}\n#soma-responsive-2027 .sr-match-route i{display:block;width:24px;height:1px;background:rgba(11,11,11,.28)}\n#soma-responsive-2027 .sr-match-route b{color:var(--red);font-weight:500}\n@media(max-width:900px){\n  #soma-responsive-2027 .sr-skin-match{left:9px;right:9px;bottom:9px;gap:4px}\n  #soma-responsive-2027 .sr-skin-match button{min-height:23px;padding:0 8px;font-size:5.4px}\n  #soma-responsive-2027 .sr-match-state{left:9px;bottom:40px;font-size:5.4px}\n  #soma-responsive-2027 .sr-match-state strong{font-size:12px}\n  #soma-responsive-2027 .sr-match-route{display:none}\n}\n@media(max-width:700px){\n  #soma-responsive-2027 .sr-skin-match{display:grid;grid-template-columns:repeat(3,1fr)}\n  #soma-responsive-2027 .sr-skin-match button{padding:0 4px;font-size:4.7px;white-space:nowrap}\n  #soma-responsive-2027 .sr-match-state{bottom:39px}\n}\n@media(prefers-reduced-motion:reduce){\n  #soma-responsive-2027 .sr-product,#soma-responsive-2027 .sr-skin-match button{transition:none}\n}\n\n#soma-responsive-2027 .sr-hero-card{\n  border-radius:18px;\n}\n#soma-responsive-2027 .sr-hero-card img,\n#soma-responsive-2027 .sr-hero-card::after,\n#soma-responsive-2027 .sr-hero-card-mid::before,\n#soma-responsive-2027 .sr-hero-card-small::before{\n  border-radius:inherit;\n}\n@media(max-width:900px){\n  #soma-responsive-2027 .sr-hero-card{border-radius:14px;}\n}\n@media(max-width:700px){\n  #soma-responsive-2027 .sr-hero-card{border-radius:12px;}\n}\n<\/style>\n\n<script>\n(function(){\n  const root=document.getElementById('soma-responsive-2027');\n  if(!root) return;\n  const stage=root.querySelector('.sr-stage');\n\n  function fitMobileDesktop(){\n    if(!stage) return;\n    if(window.matchMedia('(max-width:700px)').matches){\n      const available=Math.max(260, stage.clientWidth-32);\n      const scale=Math.min(.50, Math.max(.34, available\/760));\n      root.style.setProperty('--sr-mobile-desk-scale', scale.toFixed(4));\n    }else{\n      root.style.removeProperty('--sr-mobile-desk-scale');\n    }\n  }\n\n  fitMobileDesktop();\n  window.addEventListener('resize',fitMobileDesktop,{passive:true});\n  if('ResizeObserver' in window && stage){\n    new ResizeObserver(fitMobileDesktop).observe(stage);\n  }\n})();\n\n(function(){\n  const root=document.getElementById('soma-responsive-2027');\n  if(!root || root.dataset.matcherReady==='1') return;\n  root.dataset.matcherReady='1';\n\n  const skin=root.querySelector('.sr-hero-card-main');\n  const ritual=root.querySelector('.sr-hero-card-mid');\n  const result=root.querySelector('.sr-hero-card-small');\n  const products=[...root.querySelectorAll('.sr-product')];\n  const phoneHero=root.querySelector('.sr-mobile-hero');\n  const phoneTitle=root.querySelector('.sr-mobile-hero-copy h2');\n  const phoneText=root.querySelector('.sr-mobile-hero-copy p');\n  const phoneImg=root.querySelector('.sr-mobile-hero > img');\n  const phoneNumber=root.querySelector('.sr-mobile-number');\n  const productsWrap=root.querySelector('.sr-products');\n  if(!skin || products.length<3) return;\n\n  const states={\n    purity:{label:'IMPURITIES',need:'PURIFY',ritual:'DETOX + HANDS-ON CARE',product:'CLEAR SKIN',idx:0,num:'01',img:'https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-29-ago-2026-11_55_35.webp',phone:'Purifies, rebalances and refines the skin.'},\n    glow:{label:'DEHYDRATION',need:'REHYDRATE',ritual:'HYDRATION + TOUCH',product:'GLOW BOOST',idx:1,num:'02',img:'https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-29-ago-2026-12_02_34.webp',phone:'Deep hydration. Instant radiance.'},\n    age:{label:'LOSS OF FIRMNESS',need:'REGENERATE',ritual:'STIMULATION + TIME',product:'AGE REVERSE',idx:2,num:'03',img:'https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-29-ago-2026-12_00_31.webp',phone:'Regenerates, stimulates and supports firmness.'}\n  };\n\n  const state=document.createElement('div');\n  state.className='sr-match-state';\n  state.innerHTML='<span>READ YOUR SKIN<\/span><strong>CHOOSE A NEED<\/strong>';\n  skin.appendChild(state);\n\n  const controls=document.createElement('div');\n  controls.className='sr-skin-match';\n  controls.setAttribute('aria-label','Choose a skin concern');\n  Object.entries(states).forEach(([key,data])=>{\n    const b=document.createElement('button');\n    b.type='button'; b.dataset.match=key; b.setAttribute('aria-pressed','false'); b.textContent=data.label;\n    controls.appendChild(b);\n  });\n  skin.appendChild(controls);\n\n  const route=document.createElement('div');\n  route.className='sr-match-route';\n  route.innerHTML='<span>PELLE<\/span><i><\/i><span>RITUALE<\/span><i><\/i><b>TREATMENT<\/b>';\n  root.querySelector('.sr-stage')?.appendChild(route);\n\n  function setMatch(key){\n    const d=states[key]; if(!d) return;\n    controls.querySelectorAll('button').forEach(b=>b.setAttribute('aria-pressed',String(b.dataset.match===key)));\n    state.innerHTML='<span>'+d.label+' \u2192 '+d.need+'<\/span><strong>'+d.ritual+'<\/strong>';\n    ritual?.classList.add('sr-linked'); result?.classList.add('sr-linked');\n    productsWrap?.classList.add('sr-has-match');\n    products.forEach((p,i)=>p.classList.toggle('sr-product-active',i===d.idx));\n    if(phoneTitle) phoneTitle.innerHTML=d.product.replace(' ','<br>')+'.';\n    if(phoneText) phoneText.textContent=d.phone;\n    if(phoneImg) phoneImg.src=d.img;\n    if(phoneNumber) phoneNumber.textContent=d.num;\n    const smallLabel=result?.querySelector('.sr-hero-card-label');\n    if(smallLabel) smallLabel.innerHTML='03 \/ MATCH<br>'+d.product;\n    const midLabel=ritual?.querySelector('.sr-hero-card-label');\n    if(midLabel) midLabel.innerHTML='02 \/ RITUALE<br>'+d.ritual;\n  }\n\n  controls.addEventListener('click',e=>{\n    const b=e.target.closest('button[data-match]');\n    if(!b) return;\n    e.preventDefault();\n    e.stopPropagation();\n    setMatch(b.dataset.match);\n  });\n\n  controls.addEventListener('pointerdown',e=>{\n    if(e.target.closest('button[data-match]')) e.stopPropagation();\n  });\n  setMatch('glow');\n})();\n<\/script>\n<\/template>\n\n<template id=\"yduTplNorth\">\n<!-- =========================================================\nN\u00d8RTH \/ PRIVATE RESIDENCES\nDEMO SITI \u2014 RESPONSIVE PRESENTATION\n\nLEFT:\n50% HERO\n\nRIGHT:\nDESKTOP WEBSITE + MOBILE WEBSITE\n\nDESKTOP \/ TABLET \/ MOBILE DEMO PAGE READY\n========================================================= -->\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600&family=Rajdhani:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n\n\n<section id=\"north-responsive-demo\">\n\n  <div class=\"nr-shell\">\n\n\n    <!-- =====================================================\n    LEFT \/ HERO\n    ====================================================== -->\n\n    <section class=\"nr-hero\">\n\n      <div class=\"nr-hero-photo\"><\/div>\n      <div class=\"nr-hero-overlay\"><\/div>\n\n\n      <header class=\"nr-hero-header\">\n\n        <a href=\"#\" class=\"nr-logo\">\n          <strong>N&#216;RTH<\/strong>\n          <span>PRIVATE RESIDENCES<\/span>\n        <\/a>\n\n\n        <div class=\"nr-counter\">\n          <span>01<\/span>\n          <i><\/i>\n          <span>05<\/span>\n        <\/div>\n\n\n        <button class=\"nr-menu\" type=\"button\" aria-label=\"Menu\">\n          <span>MENU<\/span>\n\n          <b>\n            <i><\/i>\n            <i><\/i>\n            <i><\/i>\n          <\/b>\n        <\/button>\n\n      <\/header>\n\n\n      <!-- META -->\n\n      <div class=\"nr-coordinates\">\n        <span>45.4642\u00b0 N<\/span>\n        <span>9.1900\u00b0 E<\/span>\n      <\/div>\n\n\n      <div class=\"nr-surface\">\n        <small>SURFACE<\/small>\n        <strong>512<\/strong>\n        <span>M\u00b2<\/span>\n      <\/div>\n\n\n      <!-- =================================================\n      FLOOR PLAN\n      ================================================== -->\n\n      <div class=\"nr-plan\" aria-hidden=\"true\">\n\n        <div class=\"nr-plan-room room-a\"><\/div>\n        <div class=\"nr-plan-room room-b\"><\/div>\n        <div class=\"nr-plan-room room-c\"><\/div>\n        <div class=\"nr-plan-room room-d\"><\/div>\n        <div class=\"nr-plan-room room-e\"><\/div>\n        <div class=\"nr-plan-room room-f\"><\/div>\n\n        <i class=\"nr-plan-line h1\"><\/i>\n        <i class=\"nr-plan-line h2\"><\/i>\n        <i class=\"nr-plan-line v1\"><\/i>\n        <i class=\"nr-plan-line v2\"><\/i>\n\n        <span class=\"nr-measure m1\">4.80<\/span>\n        <span class=\"nr-measure m2\">2.75<\/span>\n        <span class=\"nr-measure m3\">3.30<\/span>\n\n      <\/div>\n\n\n      <!-- HERO COPY -->\n\n      <div class=\"nr-hero-copy\">\n\n        <h1 class=\"nr-title-left\">\n          SPACES<br>\n          THAT DEFINE\n        <\/h1>\n\n        <h1 class=\"nr-title-right\">\n          A LIFESTYLE<span>.<\/span>\n        <\/h1>\n\n        <p class=\"nr-hero-note\">\n          ARCHITECTURE, LOCATION<br>\n          AND VISION IN PERFECT BALANCE.\n        <\/p>\n\n        <a href=\"#\" class=\"nr-hero-cta\">\n          <span>DISCOVER THE PROPERTY<\/span>\n          <b>\u2197<\/b>\n        <\/a>\n\n      <\/div>\n\n\n      <!-- LOCATION -->\n\n      <div class=\"nr-location\">\n\n        <div class=\"nr-target\">\n          <i><\/i>\n          <b><\/b>\n        <\/div>\n\n        <p>\n          <span>LAKE COMO<\/span>\n          <span>ITALY<\/span>\n        <\/p>\n\n      <\/div>\n\n\n      <div class=\"nr-scroll\">\n        <span>SCROLL<\/span>\n        <i><\/i>\n        <b><\/b>\n      <\/div>\n\n    <\/section>\n\n\n\n    <!-- =====================================================\n    RIGHT \/ RESPONSIVE PRESENTATION \u2014 CLEAN ARCHITECTURE SYSTEM\n    ====================================================== -->\n    <section class=\"nr-presentation\">\n      <div class=\"nr-presentation-bg\" aria-hidden=\"true\">\n        <div class=\"nr-bg-circle\"><\/div>\n        <div class=\"nr-bg-plan\">\n          <div class=\"bg-room br1\"><\/div><div class=\"bg-room br2\"><\/div><div class=\"bg-room br3\"><\/div>\n          <div class=\"bg-room br4\"><\/div><div class=\"bg-room br5\"><\/div><div class=\"bg-room br6\"><\/div>\n          <i class=\"bg-axis bh1\"><\/i><i class=\"bg-axis bh2\"><\/i><i class=\"bg-axis bv1\"><\/i><i class=\"bg-axis bv2\"><\/i>\n          <span class=\"bg-dim bd1\">05.80<\/span><span class=\"bg-dim bd2\">03.20<\/span><span class=\"bg-dim bd3\">08.45<\/span>\n          <span class=\"bg-label bl1\">LIVING<\/span><span class=\"bg-label bl2\">COURT<\/span><i class=\"bg-acid\"><\/i>\n        <\/div>\n      <\/div>\n\n      <div class=\"nr-stage-meta\"><span>N\u00d8RTH \/ ARCHITECTURE SYSTEM<\/span><span>DESKTOP + MOBILE<\/span><\/div>\n\n      <article class=\"nr-desktop-site\">\n        <header class=\"nr-site-head\">\n          <a href=\"#\" class=\"nr-site-logo\"><strong>N&#216;RTH<\/strong><span>PRIVATE RESIDENCES<\/span><\/a>\n          <nav><a class=\"active\" href=\"#\">PROJECTS<\/a><a href=\"#\">STUDIO<\/a><a href=\"#\">JOURNAL<\/a><\/nav>\n          <div class=\"nr-site-actions\"><span>EN \/ IT<\/span><button type=\"button\" aria-label=\"Menu\"><i><\/i><i><\/i><\/button><\/div>\n        <\/header>\n\n        <section class=\"nr-index\">\n          <div class=\"nr-index-head\"><span>SELECTED PROJECTS \/ 2023\u20142026<\/span><span>INDEX 01\u201404<\/span><\/div>\n          <div class=\"nr-index-title\"><h2>PRIVATE<br>RESIDENCES<span>.<\/span><\/h2><p>ARCHITECTURE SHAPED BY<br>PLACE, MATERIAL AND LIGHT.<\/p><\/div>\n          <div class=\"nr-project-list\">\n            <button class=\"nr-project-row active\" data-project=\"olivia\"><b>01<\/b><strong>VILLA OLIVIA<\/strong><span>LAKE COMO<\/span><span>2026<\/span><span>512 M\u00b2<\/span><i>\u2197<\/i><\/button>\n            <button class=\"nr-project-row\" data-project=\"aurea\"><b>02<\/b><strong>VILLA AUREA<\/strong><span>TUSCANY<\/span><span>2025<\/span><span>420 M\u00b2<\/span><i>\u2197<\/i><\/button>\n            <button class=\"nr-project-row\" data-project=\"infinity\"><b>03<\/b><strong>CASA INFINITY<\/strong><span>SARDINIA<\/span><span>2025<\/span><span>380 M\u00b2<\/span><i>\u2197<\/i><\/button>\n            <button class=\"nr-project-row\" data-project=\"corte\"><b>04<\/b><strong>NORTH COURT<\/strong><span>MILAN<\/span><span>2024<\/span><span>610 M\u00b2<\/span><i>\u2197<\/i><\/button>\n          <\/div>\n        <\/section>\n\n        <section class=\"nr-selected\">\n          <div class=\"nr-selected-image\" data-image=\"olivia\"><span>01 \/ SELECTED PROJECT<\/span><b>45.4642\u00b0 N<br>9.1900\u00b0 E<\/b><\/div>\n          <div class=\"nr-selected-info\">\n            <div><small>PROJECT \/ 01<\/small><h3>VILLA<br>OLIVIA<span>.<\/span><\/h3><\/div>\n            <p class=\"nr-selected-desc\">A residence drawn as a sequence of precise volumes, opening toward the lake while preserving privacy and quiet.<\/p>\n            <dl><div><dt>LOCATION<\/dt><dd>LAKE COMO<\/dd><\/div><div><dt>YEAR<\/dt><dd>2026<\/dd><\/div><div><dt>SURFACE<\/dt><dd>512 M\u00b2<\/dd><\/div><div><dt>STATUS<\/dt><dd>COMPLETED<\/dd><\/div><\/dl>\n            <a href=\"#\">VIEW PROJECT <span>\u2197<\/span><\/a>\n          <\/div>\n        <\/section>\n\n        <section class=\"nr-material-strip\">\n          <div class=\"nr-material-head\"><span>03 \/ MATERIAL STUDY<\/span><b>04 MATERIALS \/ ONE PALETTE<\/b><\/div>\n          <div class=\"nr-material-grid\">\n            <div><span>01<\/span><strong>TRAVERTINE<\/strong><small>HONED \/ WARM GREY<\/small><\/div>\n            <div><span>02<\/span><strong>OAK<\/strong><small>NATURAL \/ BRUSHED<\/small><\/div>\n            <div><span>03<\/span><strong>GLASS<\/strong><small>LOW-IRON \/ CLEAR<\/small><\/div>\n            <div><span>04<\/span><strong>STEEL<\/strong><small>BLACKENED \/ SATIN<\/small><\/div>\n          <\/div>\n        <\/section>\n\n        <footer class=\"nr-site-footer\"><span>N\u00d8RTH PRIVATE RESIDENCES \u00a9 2026<\/span><span>MILAN \/ ITALY<\/span><span>STUDIO@NORTH.IT<\/span><\/footer>\n      <\/article>\n\n      <article class=\"nr-phone\">\n        <div class=\"nr-phone-inner\">\n          <header class=\"nr-mobile-head\"><a href=\"#\" class=\"nr-mobile-logo\"><strong>N&#216;RTH<\/strong><span>PRIVATE RESIDENCES<\/span><\/a><button type=\"button\"><i><\/i><i><\/i><\/button><\/header>\n          <div class=\"nr-mobile-property-photo\"><div class=\"nr-mobile-photo-meta\"><span>01 \/ 04<\/span><span>LAKE COMO<\/span><\/div><\/div>\n          <section class=\"nr-mobile-info\"><span class=\"nr-mobile-kicker\">SELECTED PROJECT \/ 2026<\/span><h2>VILLA<br>OLIVIA<span>.<\/span><\/h2><div class=\"nr-mobile-specs\"><div><strong>512<\/strong><span>M\u00b2<\/span><\/div><div><strong>05<\/strong><span>BEDROOMS<\/span><\/div><div><strong>06<\/strong><span>BATHROOMS<\/span><\/div><\/div><a href=\"#\" class=\"nr-mobile-cta\">VIEW PROJECT <b>\u2197<\/b><\/a><\/section>\n          <section class=\"nr-mobile-index\"><div><span>02<\/span><strong>VILLA AUREA<\/strong><small>TUSCANY \/ 2025<\/small><\/div><div><span>03<\/span><strong>CASA INFINITY<\/strong><small>SARDINIA \/ 2025<\/small><\/div><\/section>\n          <nav class=\"nr-mobile-bottom\"><a class=\"active\" href=\"#\">PROJECTS<\/a><a href=\"#\">STUDIO<\/a><a href=\"#\">JOURNAL<\/a><\/nav>\n        <\/div><div class=\"nr-phone-notch\"><\/div>\n      <\/article>\n\n      <div class=\"nr-mobile-label\"><span>02<\/span><div><strong>MOBILE EXPERIENCE<\/strong><small>PROJECT DETAIL \/ RESPONSIVE<\/small><\/div><\/div>\n      <div class=\"nr-stage-bottom\"><span>ARCHITECTURE \/ PRIVATE RESIDENCES<\/span><span>NORTHRESIDENCES.COM<\/span><\/div>\n    <\/section>\n  <\/div>\n<\/section>\n\n<style>\n\n\/* =========================================================\nROOT\n========================================================= *\/\n\n#north-responsive-demo{\n\n  --white:#FFFFFF;\n  --cold:#F7F8F8;\n  --soft:#EEF0F0;\n  --line:#D9DDDE;\n\n  --ink:#101516;\n  --graphite:#222C31;\n  --dark:#0F1518;\n\n  --acid:#C7E71D;\n\n  width:100vw;\n\n  margin-left:calc(50% - 50vw);\n  margin-right:calc(50% - 50vw);\n\n  overflow:hidden;\n\n  background:#101619;\n\n  color:var(--ink);\n\n  font-family:\"Manrope\",sans-serif;\n\n}\n\n\n#north-responsive-demo *,\n#north-responsive-demo *::before,\n#north-responsive-demo *::after{\n  box-sizing:border-box;\n}\n\n\n#north-responsive-demo h1,\n#north-responsive-demo h2,\n#north-responsive-demo h3,\n#north-responsive-demo p,\n#north-responsive-demo dl,\n#north-responsive-demo dd{\n  margin:0;\n}\n\n\n#north-responsive-demo a{\n  color:inherit;\n  text-decoration:none;\n}\n\n\n#north-responsive-demo button{\n  font:inherit;\n}\n\n\n\n\/* =========================================================\nMAIN SHELL\n========================================================= *\/\n\n#north-responsive-demo .nr-shell{\n\n  width:100%;\n\n  height:calc(100vh - 28px);\n\n  min-height:820px;\n  max-height:1000px;\n\n  display:grid;\n\n  grid-template-columns:50% 50%;\n\n}\n\n\n\n\/* =========================================================\nLEFT HERO\n========================================================= *\/\n\n#north-responsive-demo .nr-hero{\n\n  position:relative;\n\n  min-width:0;\n\n  height:100%;\n\n  overflow:hidden;\n\n  color:white;\n\n  background:#26333D;\n\n}\n\n\n#north-responsive-demo .nr-hero-photo{\n\n  position:absolute;\n\n  inset:0;\n\n  background-image:\n    url(\"https:\/\/images.unsplash.com\/photo-1600047509807-ba8f99d2cdde?auto=format&fit=crop&w=1900&q=92\");\n\n  background-size:cover;\n\n  background-position:center;\n\n  filter:\n    saturate(.62)\n    contrast(1.08)\n    brightness(.73);\n\n  transform:scale(1.015);\n\n}\n\n\n#north-responsive-demo .nr-hero-overlay{\n\n  position:absolute;\n\n  inset:0;\n\n  background:\n\n    linear-gradient(\n      90deg,\n      rgba(41,55,65,.75) 0%,\n      rgba(35,49,59,.31) 44%,\n      rgba(8,12,14,.08) 76%\n    ),\n\n    linear-gradient(\n      180deg,\n      rgba(13,18,22,.04) 30%,\n      rgba(6,9,11,.48) 100%\n    );\n\n}\n\n\n\n\/* =========================================================\nHERO HEADER\n========================================================= *\/\n\n#north-responsive-demo .nr-hero-header{\n\n  position:absolute;\n\n  z-index:20;\n\n  top:0;\n  left:0;\n  right:0;\n\n  height:82px;\n\n  padding:28px 34px;\n\n  display:grid;\n\n  grid-template-columns:1fr auto 1fr;\n\n  align-items:start;\n\n}\n\n\n#north-responsive-demo .nr-logo{\n\n  display:flex;\n\n  flex-direction:column;\n\n  gap:5px;\n\n}\n\n\n#north-responsive-demo .nr-logo strong{\n\n  font-family:\"Rajdhani\",sans-serif;\n\n  font-size:35px;\n\n  line-height:.8;\n\n  font-weight:600;\n\n  letter-spacing:.10em;\n\n}\n\n\n#north-responsive-demo .nr-logo span{\n\n  font-family:\"DM Mono\",monospace;\n\n  font-size:7px;\n\n  font-weight:500;\n\n}\n\n\n#north-responsive-demo .nr-counter{\n\n  display:flex;\n\n  align-items:center;\n\n  gap:13px;\n\n  font-family:\"DM Mono\",monospace;\n\n  font-size:7px;\n\n  font-weight:500;\n\n}\n\n\n#north-responsive-demo .nr-counter i{\n\n  width:72px;\n  height:1px;\n\n  background:rgba(255,255,255,.62);\n\n}\n\n\n#north-responsive-demo .nr-menu{\n\n  justify-self:end;\n\n  display:flex;\n\n  align-items:center;\n\n  gap:13px;\n\n  padding:0;\n\n  border:0;\n\n  background:transparent;\n\n  color:#fff;\n\n  font-family:\"DM Mono\",monospace;\n\n  font-size:7px;\n\n  font-weight:500;\n\n}\n\n\n#north-responsive-demo .nr-menu > b{\n\n  width:34px;\n  height:34px;\n\n  display:flex;\n\n  flex-direction:column;\n\n  align-items:center;\n\n  justify-content:center;\n\n  gap:4px;\n\n  border:1px solid rgba(255,255,255,.58);\n\n  border-radius:50%;\n\n}\n\n\n#north-responsive-demo .nr-menu > b i{\n\n  width:13px;\n  height:1px;\n\n  background:#fff;\n\n}\n\n\n\n\/* =========================================================\nHERO DATA\n========================================================= *\/\n\n#north-responsive-demo .nr-coordinates{\n\n  position:absolute;\n\n  z-index:8;\n\n  left:34px;\n  top:17%;\n\n  display:flex;\n\n  flex-direction:column;\n\n  gap:6px;\n\n  font-family:\"DM Mono\",monospace;\n\n  font-size:9px;\n\n  line-height:1.5;\n\n  font-weight:500;\n\n}\n\n\n#north-responsive-demo .nr-surface{\n\n  position:absolute;\n\n  z-index:8;\n\n  left:34px;\n  top:29%;\n\n  display:flex;\n\n  flex-direction:column;\n\n}\n\n\n#north-responsive-demo .nr-surface small{\n\n  font-family:\"DM Mono\",monospace;\n\n  font-size:7px;\n\n  font-weight:500;\n\n}\n\n\n#north-responsive-demo .nr-surface strong{\n\n  margin-top:5px;\n\n  font-family:\"Rajdhani\",sans-serif;\n\n  font-size:42px;\n\n  line-height:.9;\n\n  font-weight:600;\n\n}\n\n\n#north-responsive-demo .nr-surface > span{\n\n  margin-top:5px;\n\n  font-family:\"DM Mono\",monospace;\n\n  font-size:8px;\n\n}\n\n\n\n\/* =========================================================\nHERO PLAN\n========================================================= *\/\n\n#north-responsive-demo .nr-plan{\n\n  position:absolute;\n\n  z-index:3;\n\n  top:13%;\n\n  right:3%;\n\n  width:52%;\n  height:48%;\n\n  opacity:.63;\n\n  pointer-events:none;\n\n}\n\n\n#north-responsive-demo .nr-plan-room{\n\n  position:absolute;\n\n  border:1px solid rgba(255,255,255,.70);\n\n}\n\n\n#north-responsive-demo .room-a{\n  left:9%; top:17%; width:46%; height:34%;\n}\n\n#north-responsive-demo .room-b{\n  left:55%; top:17%; width:34%; height:26%;\n}\n\n#north-responsive-demo .room-c{\n  left:26%; top:51%; width:34%; height:38%;\n}\n\n#north-responsive-demo .room-d{\n  left:60%; top:43%; width:29%; height:46%;\n}\n\n#north-responsive-demo .room-e{\n  left:9%; top:51%; width:17%; height:20%;\n}\n\n#north-responsive-demo .room-f{\n  left:9%; top:71%; width:17%; height:18%;\n}\n\n\n#north-responsive-demo .nr-plan-line{\n\n  position:absolute;\n\n  background:rgba(255,255,255,.48);\n\n}\n\n\n#north-responsive-demo .nr-plan-line.h1{\n  left:-12%; right:0; top:17%; height:1px;\n}\n\n#north-responsive-demo .nr-plan-line.h2{\n  left:-12%; right:0; top:89%; height:1px;\n}\n\n#north-responsive-demo .nr-plan-line.v1{\n  left:9%; top:-7%; bottom:0; width:1px;\n}\n\n#north-responsive-demo .nr-plan-line.v2{\n  left:89%; top:-7%; bottom:0; width:1px;\n}\n\n\n#north-responsive-demo .nr-measure{\n\n  position:absolute;\n\n  font-family:\"DM Mono\",monospace;\n\n  font-size:6px;\n\n}\n\n\n#north-responsive-demo .m1{\n  top:7%;\n  left:42%;\n}\n\n#north-responsive-demo .m2{\n  top:7%;\n  right:11%;\n}\n\n#north-responsive-demo .m3{\n  right:-7%;\n  bottom:20%;\n  writing-mode:vertical-rl;\n}\n\n\n\n\/* =========================================================\nHERO COPY \u2014 SPLIT EDITORIAL COMPOSITION\n========================================================= *\/\n\n#north-responsive-demo .nr-hero-copy{\n  position:absolute;\n  z-index:8;\n  inset:0;\n  pointer-events:none;\n}\n\n#north-responsive-demo .nr-hero-copy h1{\n  position:absolute;\n  margin:0;\n  font-family:\"Rajdhani\",sans-serif;\n  font-size:clamp(60px,4.75vw,91px);\n  line-height:.90;\n  letter-spacing:-.045em;\n  font-weight:600;\n  color:#fff;\n  white-space:nowrap;\n}\n\n#north-responsive-demo .nr-title-left{\n  left:34px;\n  top:41%;\n}\n\n#north-responsive-demo .nr-title-right{\n  right:16px;\n  top:62%;\n  font-size:clamp(54px,4.30vw,83px);\n  text-align:right;\n}\n\n#north-responsive-demo .nr-hero-copy h1 span{\n  color:var(--acid);\n}\n\n#north-responsive-demo .nr-hero-note{\n  position:absolute;\n  right:42px;\n  top:27.5%;\n  width:176px;\n  margin:0;\n  font-family:\"DM Mono\",monospace;\n  font-size:8px;\n  line-height:1.6;\n  font-weight:500;\n  text-align:left;\n}\n\n#north-responsive-demo .nr-hero-note::before{\n  content:\"\";\n  display:block;\n  width:28px;\n  height:1px;\n  margin-bottom:10px;\n  background:rgba(255,255,255,.58);\n}\n\n#north-responsive-demo .nr-hero-cta{\n  position:absolute;\n  left:34px;\n  bottom:28px;\n  width:205px;\n  padding-bottom:8px;\n  display:flex;\n  justify-content:space-between;\n  align-items:center;\n  border-bottom:1px solid var(--acid);\n  font-family:\"DM Mono\",monospace;\n  font-size:7px;\n  font-weight:500;\n  pointer-events:auto;\n}\n\n\/* =========================================================\nLOCATION\n========================================================= *\/\n\n#north-responsive-demo .nr-location{\n\n  position:absolute;\n\n  z-index:8;\n\n  right:86px;\n  bottom:28px;\n\n  display:flex;\n\n  align-items:center;\n\n  gap:23px;\n\n}\n\n\n#north-responsive-demo .nr-location p{\n\n  display:flex;\n\n  flex-direction:column;\n\n  gap:5px;\n\n  font-family:\"DM Mono\",monospace;\n\n  font-size:7px;\n\n  font-weight:500;\n\n}\n\n\n#north-responsive-demo .nr-target{\n\n  position:relative;\n\n  width:43px;\n  height:43px;\n\n  border:1px solid var(--acid);\n\n  border-radius:50%;\n\n}\n\n\n#north-responsive-demo .nr-target::before,\n#north-responsive-demo .nr-target::after{\n\n  content:\"\";\n\n  position:absolute;\n\n  background:var(--acid);\n\n}\n\n\n#north-responsive-demo .nr-target::before{\n\n  left:50%;\n  top:-9px;\n\n  width:1px;\n  height:59px;\n\n}\n\n\n#north-responsive-demo .nr-target::after{\n\n  top:50%;\n  left:-9px;\n\n  width:59px;\n  height:1px;\n\n}\n\n\n#north-responsive-demo .nr-target i{\n\n  position:absolute;\n\n  inset:8px;\n\n  border:1px solid var(--acid);\n\n  border-radius:50%;\n\n}\n\n\n#north-responsive-demo .nr-target b{\n\n  position:absolute;\n\n  left:50%;\n  top:50%;\n\n  width:5px;\n  height:5px;\n\n  transform:translate(-50%,-50%);\n\n  border-radius:50%;\n\n  background:var(--acid);\n\n}\n\n\n#north-responsive-demo .nr-scroll{\n\n  position:absolute;\n\n  z-index:8;\n\n  right:35px;\n  bottom:28px;\n\n  display:flex;\n\n  flex-direction:column;\n\n  align-items:center;\n\n  gap:8px;\n\n  font-family:\"DM Mono\",monospace;\n\n  font-size:6px;\n\n}\n\n\n#north-responsive-demo .nr-scroll i{\n\n  width:1px;\n  height:49px;\n\n  background:rgba(255,255,255,.65);\n\n}\n\n\n#north-responsive-demo .nr-scroll b{\n\n  width:6px;\n  height:6px;\n\n  border-radius:50%;\n\n  background:var(--acid);\n\n}\n\n\n\n\/* =========================================================\nRIGHT PRESENTATION \u2014 CLEAN \/ NO LEGACY OVERRIDES\n========================================================= *\/\n#north-responsive-demo .nr-presentation{position:relative;isolation:isolate;min-width:0;height:100%;overflow:hidden;background:#101619}\n#north-responsive-demo .nr-presentation-bg{position:absolute;z-index:-1;inset:0;overflow:hidden;background:radial-gradient(circle at 80% 20%,rgba(111,126,133,.13),transparent 27%),radial-gradient(circle at 16% 82%,rgba(255,255,255,.035),transparent 30%),linear-gradient(118deg,#0C1113 0%,#182125 48%,#0D1214 100%)}\n#north-responsive-demo .nr-bg-circle{position:absolute;right:-260px;top:-180px;width:560px;height:560px;border:1px solid rgba(255,255,255,.045);border-radius:50%;box-shadow:0 0 0 72px rgba(255,255,255,.018),0 0 0 145px rgba(255,255,255,.012)}\n#north-responsive-demo .nr-bg-plan{position:absolute;left:-10%;top:5%;width:116%;height:92%;transform:rotate(-7deg);opacity:.8}\n#north-responsive-demo .bg-room{position:absolute;border:1px solid rgba(198,210,214,.11)}\n#north-responsive-demo .br1{left:4%;top:13%;width:33%;height:27%} #north-responsive-demo .br2{left:37%;top:13%;width:23%;height:18%} #north-responsive-demo .br3{left:60%;top:13%;width:29%;height:34%} #north-responsive-demo .br4{left:18%;top:40%;width:30%;height:32%} #north-responsive-demo .br5{left:48%;top:47%;width:25%;height:25%} #north-responsive-demo .br6{left:73%;top:47%;width:20%;height:38%}\n#north-responsive-demo .bg-axis{position:absolute;background:rgba(207,218,221,.09)} #north-responsive-demo .bh1{left:-5%;right:-5%;top:13%;height:1px} #north-responsive-demo .bh2{left:-5%;right:-5%;top:85%;height:1px} #north-responsive-demo .bv1{left:18%;top:2%;bottom:0;width:1px} #north-responsive-demo .bv2{left:93%;top:2%;bottom:0;width:1px}\n#north-responsive-demo .bg-dim,#north-responsive-demo .bg-label{position:absolute;color:rgba(222,230,232,.22);font-family:\"DM Mono\",monospace;font-size:7px} #north-responsive-demo .bd1{left:22%;top:9%} #north-responsive-demo .bd2{left:47%;top:9%} #north-responsive-demo .bd3{left:76%;top:9%} #north-responsive-demo .bl1{left:25%;top:52%} #north-responsive-demo .bl2{left:65%;top:29%}\n#north-responsive-demo .bg-acid{position:absolute;left:3%;top:84%;width:34%;height:1px;background:rgba(199,231,29,.60)}\n#north-responsive-demo .nr-stage-meta,#north-responsive-demo .nr-stage-bottom{position:absolute;z-index:20;left:33px;right:33px;display:flex;justify-content:space-between;color:rgba(255,255,255,.76);font-family:\"DM Mono\",monospace} #north-responsive-demo .nr-stage-meta{top:15px;font-size:6px} #north-responsive-demo .nr-stage-bottom{bottom:11px;font-size:5px}\n\n#north-responsive-demo .nr-desktop-site{position:absolute;z-index:5;left:5.5%;top:7%;width:76%;height:86%;display:grid;grid-template-rows:7% 32% 38% 17% 6%;overflow:hidden;border-radius:10px;background:#fff;box-shadow:0 32px 80px rgba(0,0,0,.38),0 4px 12px rgba(0,0,0,.14)}\n#north-responsive-demo .nr-site-head{padding:0 17px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;border-bottom:1px solid #E1E5E5;background:#fff}\n#north-responsive-demo .nr-site-logo{display:flex;flex-direction:column;gap:1px} #north-responsive-demo .nr-site-logo strong{font-family:\"Rajdhani\",sans-serif;font-size:18px;line-height:.85;font-weight:600;letter-spacing:.10em} #north-responsive-demo .nr-site-logo span{font-family:\"DM Mono\",monospace;font-size:3.7px;font-weight:500}\n#north-responsive-demo .nr-site-head nav{display:flex;justify-content:center;gap:14px} #north-responsive-demo .nr-site-head nav a{position:relative;font-family:\"DM Mono\",monospace;font-size:4.1px;font-weight:500} #north-responsive-demo .nr-site-head nav a.active:after{content:\"\";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:var(--acid)}\n#north-responsive-demo .nr-site-actions{display:flex;align-items:center;gap:8px;font-family:\"DM Mono\",monospace;font-size:4px;font-weight:500} #north-responsive-demo .nr-site-actions button{width:21px;height:21px;padding:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;border:1px solid #CBD0D1;border-radius:50%;background:#fff} #north-responsive-demo .nr-site-actions button i{width:8px;height:1px;background:#111}\n\n#north-responsive-demo .nr-index{min-height:0;padding:15px 18px 0;background:#F8F9F9;border-bottom:1px solid #E1E5E5}\n#north-responsive-demo .nr-index-head{display:flex;justify-content:space-between;color:#70797B;font-family:\"DM Mono\",monospace;font-size:3.7px}\n#north-responsive-demo .nr-index-title{margin-top:10px;display:grid;grid-template-columns:1fr auto;align-items:end} #north-responsive-demo .nr-index-title h2{font-family:\"Rajdhani\",sans-serif;font-size:31px;line-height:.78;letter-spacing:-.04em;font-weight:600} #north-responsive-demo .nr-index-title h2 span{color:var(--acid)} #north-responsive-demo .nr-index-title p{padding-bottom:2px;color:#5F696C;font-family:\"DM Mono\",monospace;font-size:3.4px;line-height:1.55}\n#north-responsive-demo .nr-project-list{margin-top:10px;border-top:1px solid #C9CFCF}\n#north-responsive-demo .nr-project-row{width:100%;height:24px;padding:0 2px;display:grid;grid-template-columns:22px 1.5fr 1fr 42px 50px 14px;align-items:center;text-align:left;border:0;border-bottom:1px solid #DDE1E1;background:transparent;color:#171D1F;font-family:\"DM Mono\",monospace;font-size:3.7px;cursor:pointer} #north-responsive-demo .nr-project-row b{font-weight:500;color:#899194} #north-responsive-demo .nr-project-row strong{font-family:\"Rajdhani\",sans-serif;font-size:8.5px;font-weight:600;letter-spacing:.02em} #north-responsive-demo .nr-project-row i{font-style:normal;text-align:right} #north-responsive-demo .nr-project-row.active{background:#151B1E;color:#fff;padding-left:7px;padding-right:7px} #north-responsive-demo .nr-project-row.active b{color:var(--acid)}\n\n#north-responsive-demo .nr-selected{min-height:0;display:grid;grid-template-columns:59% 41%;background:#fff}\n#north-responsive-demo .nr-selected-image{position:relative;min-width:0;background-image:url(\"https:\/\/images.unsplash.com\/photo-1600607687920-4e2a09cf159d?auto=format&fit=crop&w=1200&q=90\");background-size:cover;background-position:center;transition:background-image .25s ease} #north-responsive-demo .nr-selected-image>span{position:absolute;left:10px;top:9px;color:#fff;font-family:\"DM Mono\",monospace;font-size:3.6px} #north-responsive-demo .nr-selected-image>b{position:absolute;left:10px;bottom:9px;color:#fff;font-family:\"DM Mono\",monospace;font-size:3.3px;line-height:1.5;font-weight:500}\n#north-responsive-demo .nr-selected-info{position:relative;padding:13px 14px;border-left:1px solid #E1E5E5} #north-responsive-demo .nr-selected-info small{color:#70797B;font-family:\"DM Mono\",monospace;font-size:3.5px} #north-responsive-demo .nr-selected-info h3{margin-top:5px;font-family:\"Rajdhani\",sans-serif;font-size:25px;line-height:.78;letter-spacing:-.04em;font-weight:600} #north-responsive-demo .nr-selected-info h3 span{color:var(--acid)} #north-responsive-demo .nr-selected-desc{width:90%;margin-top:8px!important;color:#4D575A;font-size:4.5px;line-height:1.45} #north-responsive-demo .nr-selected-info dl{margin-top:8px!important;border-top:1px solid #E1E5E5} #north-responsive-demo .nr-selected-info dl div{height:15px;display:grid;grid-template-columns:1fr 1fr;align-items:center;border-bottom:1px solid #E1E5E5;font-family:\"DM Mono\",monospace;font-size:3.4px} #north-responsive-demo .nr-selected-info dt{color:#81898B} #north-responsive-demo .nr-selected-info dd{text-align:right;font-weight:500} #north-responsive-demo .nr-selected-info>a{position:absolute;left:14px;right:14px;bottom:10px;padding-bottom:5px;display:flex;justify-content:space-between;border-bottom:1px solid var(--acid);font-family:\"DM Mono\",monospace;font-size:3.7px}\n\n#north-responsive-demo .nr-material-strip{min-height:0;padding:10px 18px 11px;display:grid;grid-template-rows:auto 1fr;gap:8px;background:#EEF1F0;border-top:1px solid #DDE1E1;border-bottom:1px solid #DDE1E1;font-family:\"DM Mono\",monospace} #north-responsive-demo .nr-material-head{display:flex;justify-content:space-between;align-items:center;color:#687174;font-size:3.4px} #north-responsive-demo .nr-material-head b{font-weight:500;color:#171D1F} #north-responsive-demo .nr-material-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #BFC6C6;border-bottom:1px solid #BFC6C6} #north-responsive-demo .nr-material-grid>div{min-width:0;padding:7px 7px 5px 0;display:grid;grid-template-columns:18px 1fr;grid-template-rows:auto auto;align-content:center;border-right:1px solid #C9CFCF} #north-responsive-demo .nr-material-grid>div+div{padding-left:7px} #north-responsive-demo .nr-material-grid>div:last-child{border-right:0} #north-responsive-demo .nr-material-grid span{grid-row:1\/3;color:#98A0A2;font-size:3px} #north-responsive-demo .nr-material-grid strong{font-family:\"Rajdhani\",sans-serif;font-size:7.4px;line-height:1;font-weight:600} #north-responsive-demo .nr-material-grid small{margin-top:3px;color:#737C7E;font-size:2.7px}\n#north-responsive-demo .nr-site-footer{padding:0 17px;display:grid;grid-template-columns:1.4fr 1fr 1fr;align-items:center;background:#111719;color:#fff;font-family:\"DM Mono\",monospace;font-size:3.5px} #north-responsive-demo .nr-site-footer span:last-child{text-align:right}\n\n#north-responsive-demo .nr-phone{position:absolute;z-index:15;right:2.6%;bottom:12%;width:22.5%;min-width:138px;height:62%;padding:5px;overflow:hidden;border-radius:21px;background:#0A0D0E;box-shadow:0 27px 58px rgba(0,0,0,.48);transform:rotate(1deg);transition:transform .35s ease,box-shadow .35s ease} #north-responsive-demo .nr-phone-inner{position:relative;width:100%;height:100%;display:grid;grid-template-rows:8% 31% 34% 22% 5%;overflow:hidden;border-radius:16px;background:#fff} #north-responsive-demo .nr-phone-notch{position:absolute;z-index:30;left:50%;top:8px;width:35%;height:10px;transform:translateX(-50%);border-radius:0 0 8px 8px;background:#0A0D0E}\n#north-responsive-demo .nr-mobile-head{padding:0 9px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #E5E8E8;background:#fff} #north-responsive-demo .nr-mobile-logo{display:flex;flex-direction:column;gap:1px} #north-responsive-demo .nr-mobile-logo strong{font-family:\"Rajdhani\",sans-serif;font-size:11px;line-height:.8;font-weight:600;letter-spacing:.1em} #north-responsive-demo .nr-mobile-logo span{font-family:\"DM Mono\",monospace;font-size:2px} #north-responsive-demo .nr-mobile-head button{width:19px;height:19px;padding:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;border:1px solid #CDD2D2;border-radius:50%;background:#fff} #north-responsive-demo .nr-mobile-head button i{width:7px;height:1px;background:#111}\n#north-responsive-demo .nr-mobile-property-photo{position:relative;background-image:url(\"https:\/\/images.unsplash.com\/photo-1600607687920-4e2a09cf159d?auto=format&fit=crop&w=700&q=88\");background-size:cover;background-position:center} #north-responsive-demo .nr-mobile-photo-meta{position:absolute;left:8px;right:8px;top:8px;display:flex;justify-content:space-between;color:#fff;font-family:\"DM Mono\",monospace;font-size:2.4px}\n#north-responsive-demo .nr-mobile-info{position:relative;padding:9px;background:#fff} #north-responsive-demo .nr-mobile-kicker{color:#747C7F;font-family:\"DM Mono\",monospace;font-size:2.5px;font-weight:500} #north-responsive-demo .nr-mobile-info h2{margin-top:5px;font-family:\"Rajdhani\",sans-serif;font-size:25px;line-height:.76;letter-spacing:-.035em;font-weight:600} #north-responsive-demo .nr-mobile-info h2 span{color:var(--acid)} #north-responsive-demo .nr-mobile-specs{margin-top:9px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #E5E8E8;border-bottom:1px solid #E5E8E8} #north-responsive-demo .nr-mobile-specs div{padding:5px 2px;display:flex;flex-direction:column;border-right:1px solid #E5E8E8} #north-responsive-demo .nr-mobile-specs div:last-child{border-right:0} #north-responsive-demo .nr-mobile-specs strong{font-family:\"Rajdhani\",sans-serif;font-size:10px;line-height:1;font-weight:600} #north-responsive-demo .nr-mobile-specs span{margin-top:2px;color:#747C7F;font-family:\"DM Mono\",monospace;font-size:2px} #north-responsive-demo .nr-mobile-cta{position:absolute;left:9px;right:9px;bottom:7px;padding-bottom:4px;display:flex;justify-content:space-between;border-bottom:1px solid var(--acid);font-family:\"DM Mono\",monospace;font-size:2.6px;font-weight:500}\n#north-responsive-demo .nr-mobile-index{display:grid;grid-template-rows:1fr 1fr;background:#F1F3F2} #north-responsive-demo .nr-mobile-index>div{padding:5px 8px;display:grid;grid-template-columns:18px 1fr;grid-template-rows:1fr 1fr;align-items:center;border-bottom:1px solid #DDE1E1} #north-responsive-demo .nr-mobile-index span{grid-row:1\/3;color:#8A9294;font-family:\"DM Mono\",monospace;font-size:2.5px} #north-responsive-demo .nr-mobile-index strong{font-family:\"Rajdhani\",sans-serif;font-size:8px;font-weight:600} #north-responsive-demo .nr-mobile-index small{font-family:\"DM Mono\",monospace;font-size:2px;color:#747C7F}\n#north-responsive-demo .nr-mobile-bottom{padding:0 8px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #E4E7E7;background:#fff} #north-responsive-demo .nr-mobile-bottom a{color:#8A9294;font-family:\"DM Mono\",monospace;font-size:2.3px} #north-responsive-demo .nr-mobile-bottom .active{color:#111;font-weight:500}\n#north-responsive-demo .nr-mobile-label{position:absolute;z-index:17;right:2.7%;bottom:3%;display:flex;gap:7px;color:rgba(255,255,255,.80);font-family:\"DM Mono\",monospace} #north-responsive-demo .nr-mobile-label>span{color:var(--acid);font-size:7px} #north-responsive-demo .nr-mobile-label div{display:flex;flex-direction:column} #north-responsive-demo .nr-mobile-label strong{font-size:4px;font-weight:500} #north-responsive-demo .nr-mobile-label small{margin-top:2px;font-size:3px}\n@media(pointer:fine){#north-responsive-demo .nr-project-row:hover{background:#EDEFEE} #north-responsive-demo .nr-project-row.active:hover{background:#151B1E} #north-responsive-demo .nr-phone:hover{transform:rotate(0deg) translateY(-4px);box-shadow:0 34px 72px rgba(0,0,0,.52)}}\n\n@media(max-width:1180px) and (min-width:701px){#north-responsive-demo .nr-shell{height:820px;grid-template-columns:48% 52%} #north-responsive-demo .nr-hero-header{padding-left:23px;padding-right:23px} #north-responsive-demo .nr-coordinates,#north-responsive-demo .nr-surface{left:23px} #north-responsive-demo .nr-title-left{left:23px;top:42%} #north-responsive-demo .nr-title-right{right:12px;top:63%;font-size:clamp(44px,5.15vw,62px)} #north-responsive-demo .nr-hero-copy h1{font-size:clamp(48px,5.7vw,68px)} #north-responsive-demo .nr-hero-note{right:30px;top:28%;width:150px;font-size:7px} #north-responsive-demo .nr-hero-cta{left:23px;bottom:26px} #north-responsive-demo .nr-location{right:72px;bottom:26px} #north-responsive-demo .nr-plan{right:-4%;width:61%} #north-responsive-demo .nr-desktop-site{left:3%;width:79%;height:84%;top:8%} #north-responsive-demo .nr-phone{right:1.5%;width:23%;min-width:126px;height:60%;bottom:13%} #north-responsive-demo .nr-site-head nav{gap:7px} #north-responsive-demo .nr-stage-meta,#north-responsive-demo .nr-stage-bottom{left:20px;right:20px} #north-responsive-demo .nr-mobile-label{display:none}}\n\n@media(max-width:700px){#north-responsive-demo{overflow:hidden} #north-responsive-demo .nr-shell{display:block;height:auto;min-height:0;max-height:none} #north-responsive-demo .nr-hero{width:100%;height:560px} #north-responsive-demo .nr-hero-photo{background-position:58% center} #north-responsive-demo .nr-hero-header{height:63px;padding:19px 18px} #north-responsive-demo .nr-logo strong{font-size:28px} #north-responsive-demo .nr-logo span{font-size:5px} #north-responsive-demo .nr-counter{gap:7px;font-size:5px} #north-responsive-demo .nr-counter i{width:32px} #north-responsive-demo .nr-menu>span{display:none} #north-responsive-demo .nr-menu>b{width:29px;height:29px} #north-responsive-demo .nr-coordinates{left:18px;top:98px;font-size:6px} #north-responsive-demo .nr-surface{left:18px;top:161px} #north-responsive-demo .nr-surface strong{font-size:29px} #north-responsive-demo .nr-plan{top:16%;right:-5%;width:62%;height:40%} #north-responsive-demo .nr-title-left{left:18px;top:43%} #north-responsive-demo .nr-title-right{right:10px;top:62%;font-size:clamp(37px,10.7vw,50px)} #north-responsive-demo .nr-hero-copy h1{font-size:clamp(41px,11.8vw,55px)} #north-responsive-demo .nr-hero-note{right:22px;top:29%;width:132px;font-size:5.5px;line-height:1.55} #north-responsive-demo .nr-hero-note::before{width:22px;margin-bottom:7px} #north-responsive-demo .nr-hero-cta{left:18px;bottom:24px;width:165px;font-size:5px} #north-responsive-demo .nr-location{right:54px;bottom:24px;gap:12px} #north-responsive-demo .nr-location .nr-target{width:32px;height:32px} #north-responsive-demo .nr-location p{font-size:5px} #north-responsive-demo .nr-scroll{right:18px;bottom:24px}\n#north-responsive-demo .nr-presentation{width:100%;height:600px} #north-responsive-demo .nr-desktop-site{left:16px;top:66px;width:670px;height:720px;transform:scale(.405);transform-origin:top left} #north-responsive-demo .nr-phone{right:7px;bottom:62px;width:126px;min-width:126px;height:370px;transform:rotate(.5deg)} #north-responsive-demo .nr-stage-meta{left:18px;right:18px;top:12px;font-size:3.4px} #north-responsive-demo .nr-stage-bottom{left:18px;right:18px;bottom:9px;font-size:3px} #north-responsive-demo .nr-mobile-label{right:12px;bottom:38px} #north-responsive-demo .nr-bg-plan{width:145%;left:-30%}}\n@media(max-width:420px){#north-responsive-demo .nr-hero{height:520px} #north-responsive-demo .nr-title-left{top:42%} #north-responsive-demo .nr-title-right{right:8px;top:61%;font-size:36px} #north-responsive-demo .nr-title-left{font-size:40px} #north-responsive-demo .nr-hero-note{right:18px;top:28%;width:120px;font-size:5px} #north-responsive-demo .nr-location{right:48px} #north-responsive-demo .nr-presentation{height:560px} #north-responsive-demo .nr-desktop-site{left:10px;top:70px;width:650px;height:720px;transform:scale(.365);transform-origin:top left} #north-responsive-demo .nr-phone{right:4px;bottom:57px;width:116px;min-width:116px;height:342px}}\n\n<\/style>\n<script>\n(function(){\n  function initNorthDemo(){\n    const root=document.getElementById('north-responsive-demo');\n    if(!root || root.dataset.northReady==='1') return;\n\n    const rows=[...root.querySelectorAll('.nr-project-row')];\n    const image=root.querySelector('.nr-selected-image');\n    const title=root.querySelector('.nr-selected-info h3');\n    const desc=root.querySelector('.nr-selected-desc');\n    const dds=[...root.querySelectorAll('.nr-selected-info dd')];\n    const small=root.querySelector('.nr-selected-info small');\n\n    if(!rows.length || !image || !title || !desc || dds.length<4 || !small) return;\n\n    root.dataset.northReady='1';\n\n    \/* Demo-only links: keep the visual affordance, prevent page jumps. *\/\n    root.querySelectorAll('a[href=\"#\"]').forEach(link=>{\n      link.addEventListener('click',e=>e.preventDefault());\n    });\n\n    const projects={\n      olivia:{name:'VILLA<br>OLIVIA',loc:'LAKE COMO',year:'2026',surface:'512 M\u00b2',status:'COMPLETED',img:'https:\/\/images.unsplash.com\/photo-1600607687920-4e2a09cf159d?auto=format&fit=crop&w=1200&q=90',desc:'A residence drawn as a sequence of precise volumes, opening toward the lake while preserving privacy and quiet.'},\n      aurea:{name:'VILLA<br>AUREA',loc:'TUSCANY',year:'2025',surface:'420 M\u00b2',status:'COMPLETED',img:'https:\/\/images.unsplash.com\/photo-1600566753086-00f18fb6b3ea?auto=format&fit=crop&w=1200&q=90',desc:'Stone, oak and long horizontal openings define a calm house embedded in the Tuscan landscape.'},\n      infinity:{name:'CASA<br>INFINITY',loc:'SARDINIA',year:'2025',surface:'380 M\u00b2',status:'COMPLETED',img:'https:\/\/images.unsplash.com\/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=1200&q=90',desc:'A low coastal residence where shaded thresholds dissolve the boundary between interior and Mediterranean light.'},\n      corte:{name:'CORTE<br>NORD',loc:'MILAN',year:'2024',surface:'610 M\u00b2',status:'COMPLETED',img:'https:\/\/images.unsplash.com\/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1200&q=90',desc:'An urban courtyard house organized by proportion, filtered light and a deliberately restrained material palette.'}\n    };\n\n    rows.forEach((row,i)=>{\n      row.addEventListener('click',()=>{\n        const p=projects[row.dataset.project];\n        if(!p) return;\n\n        rows.forEach(r=>r.classList.remove('active'));\n        row.classList.add('active');\n\n        image.style.backgroundImage=`url(\"${p.img}\")`;\n        title.innerHTML=p.name+'<span>.<\/span>';\n        desc.textContent=p.desc;\n        dds[0].textContent=p.loc;\n        dds[1].textContent=p.year;\n        dds[2].textContent=p.surface;\n        dds[3].textContent=p.status;\n        small.textContent='PROJECT \/ '+String(i+1).padStart(2,'0');\n      });\n    });\n  }\n\n  if(document.readyState==='loading'){\n    document.addEventListener('DOMContentLoaded',initNorthDemo,{once:true});\n  }else{\n    initNorthDemo();\n  }\n\n  \/* Safe re-init when Elementor redraws the HTML widget in editor\/frontend. *\/\n  window.addEventListener('elementor\/frontend\/init',()=>requestAnimationFrame(initNorthDemo));\n})();\n<\/script>\n<\/template>\n\n\n<style>\n\/* =========================================================\nROOT \/ RESET\n========================================================= *\/\n#yu-demo-ux,\n#yu-demo-ux * {\n  box-sizing:border-box;\n}\n\n#yu-demo-ux {\n  --blue:#3157C8;\n  --blue-dark:#254BB8;\n  --paper:#F4F2EC;\n  --ink:#090909;\n  --orange:#FF6B2C;\n\n  width:100%;\n  max-width:100%;\n\n  padding:120px 20px;\n\n  overflow:visible;\n\n  color:#fff;\n\n  background:\n    radial-gradient(circle at 76% 12%,rgba(255,255,255,.10),transparent 28%),\n    linear-gradient(135deg,var(--blue),var(--blue-dark));\n\n  font-family:Inter,Arial,sans-serif;\n}\n\n#yu-demo-ux button,\n#yu-demo-ux a {\n  font:inherit;\n}\n\n#yu-demo-ux a {\n  color:inherit;\n  text-decoration:none;\n}\n\n#yu-demo-ux h2,\n#yu-demo-ux h3 {\n  margin:0;\n}\n\n\/* =========================================================\nPLEXY SHELL\n========================================================= *\/\n#yu-demo-ux .ydu-shell {\n  position:relative;\n\n  width:100%;\n  min-height:980px;\n\n  display:grid;\n  grid-template-rows:72px auto;\n\n  overflow:hidden;\n\n  border:1px solid rgba(255,255,255,.88);\n  border-radius:10px;\n\n  background:\n    linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.055));\n\n  box-shadow:\n    inset 0 1px 0 rgba(255,255,255,.80),\n    inset 0 0 0 3px rgba(255,255,255,.045),\n    0 26px 72px rgba(5,25,92,.22);\n\n  backdrop-filter:blur(10px);\n  -webkit-backdrop-filter:blur(10px);\n}\n\n#yu-demo-ux .ydu-shell::after {\n  content:\"\";\n  position:absolute;\n  inset:7px;\n  z-index:30;\n  pointer-events:none;\n  border:1px solid rgba(255,255,255,.17);\n  border-radius:7px;\n}\n\n\/* screws *\/\n#yu-demo-ux .ydu-screw {\n  position:absolute;\n  z-index:40;\n  width:16px;\n  height:16px;\n  border-radius:50%;\n\n  background:\n    linear-gradient(45deg,transparent 43%,#25292B 44%,#25292B 56%,transparent 57%),\n    radial-gradient(circle at 34% 29%,#F2F3F3 0%,#AEB7B9 31%,#687174 58%,#2A2E30 100%);\n\n  box-shadow:\n    0 1px 3px rgba(0,0,0,.42),\n    inset 0 1px 1px rgba(255,255,255,.72);\n}\n\n#yu-demo-ux .ydu-tl{top:10px;left:10px}\n#yu-demo-ux .ydu-tr{top:10px;right:10px}\n#yu-demo-ux .ydu-bl{bottom:10px;left:10px}\n#yu-demo-ux .ydu-br{bottom:10px;right:10px}\n\n\/* =========================================================\nTOP\n========================================================= *\/\n#yu-demo-ux .ydu-top {\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:20px;\n\n  padding:0 40px;\n\n  border-bottom:1px solid rgba(255,255,255,.25);\n}\n\n#yu-demo-ux .ydu-brand {\n  font-size:12px;\n  font-weight:700;\n  letter-spacing:.07em;\n}\n\n#yu-demo-ux .ydu-total-top {\n  display:flex;\n  align-items:baseline;\n  gap:7px;\n}\n\n#yu-demo-ux .ydu-total-top strong {\n  font-family:Khand,Arial,sans-serif;\n  font-size:28px;\n  line-height:1;\n  font-weight:600;\n}\n\n#yu-demo-ux .ydu-total-top span {\n  color:rgba(255,255,255,.70);\n  font-size:10px;\n  font-weight:700;\n  letter-spacing:.08em;\n}\n\n\/* =========================================================\nBODY\n========================================================= *\/\n#yu-demo-ux .ydu-body {\n  min-width:0;\n  display:grid;\n  grid-template-columns:37% minmax(0,63%);\n}\n\n#yu-demo-ux .ydu-left {\n  min-width:0;\n  padding-bottom:44px;\n  border-right:1px solid rgba(255,255,255,.21);\n}\n\n#yu-demo-ux .ydu-heading {\n  padding:54px 40px 34px;\n}\n\n#yu-demo-ux .ydu-heading h2 {\n  font-family:Khand,Arial,sans-serif;\n  font-size:clamp(64px,5.2vw,86px);\n  line-height:.86;\n  font-weight:600;\n  letter-spacing:-.035em;\n}\n\n\/* =========================================================\nFILTERS\n========================================================= *\/\n#yu-demo-ux .ydu-filters {\n  min-width:0;\n\n  display:flex;\n  align-items:center;\n  flex-wrap:nowrap;\n  gap:8px;\n\n  padding:0 40px;\n\n  overflow-x:auto;\n  overflow-y:hidden;\n\n  scrollbar-width:none;\n}\n\n#yu-demo-ux .ydu-filters::-webkit-scrollbar {\n  display:none;\n}\n\n#yu-demo-ux .ydu-filter {\n  flex:0 0 auto;\n\n  min-height:38px;\n\n  display:flex;\n  align-items:center;\n  gap:9px;\n\n  padding:0 13px;\n\n  border:1px solid rgba(255,255,255,.44);\n  border-radius:10px;\n\n  background:transparent;\n  color:rgba(255,255,255,.94);\n\n  font-size:12px;\n  font-weight:700;\n\n  white-space:nowrap;\n  cursor:pointer;\n}\n\n#yu-demo-ux .ydu-filter strong {\n  color:rgba(255,255,255,.58);\n  font-size:10px;\n  font-weight:700;\n}\n\n#yu-demo-ux .ydu-filter.is-active {\n  border-color:var(--paper);\n  background:var(--paper);\n  color:var(--ink);\n}\n\n#yu-demo-ux .ydu-filter.is-active strong {\n  color:rgba(9,9,9,.48);\n}\n\n\/* deliberate breathing room *\/\n#yu-demo-ux .ydu-filter-breath {\n  height:40px;\n}\n\n\/* =========================================================\nLIST\n========================================================= *\/\n#yu-demo-ux .ydu-list-head,\n#yu-demo-ux .ydu-row {\n  display:grid;\n\n  grid-template-columns:\n    42px\n    minmax(160px,1fr)\n    minmax(120px,.82fr)\n    22px;\n\n  align-items:center;\n  gap:10px;\n\n  padding-left:40px;\n  padding-right:40px;\n}\n\n#yu-demo-ux .ydu-list-head {\n  min-height:42px;\n\n  border-top:1px solid rgba(255,255,255,.18);\n  border-bottom:1px solid rgba(255,255,255,.24);\n\n  color:rgba(255,255,255,.64);\n\n  font-size:10px;\n  font-weight:700;\n  letter-spacing:.07em;\n}\n\n#yu-demo-ux .ydu-list {\n  overflow:visible;\n}\n\n#yu-demo-ux .ydu-row {\n  width:100%;\n  min-height:88px;\n\n  border:0;\n  border-bottom:1px solid rgba(255,255,255,.15);\n\n  background:transparent;\n  color:#fff;\n\n  text-align:left;\n\n  cursor:pointer;\n\n  transition:\n    background .16s ease,\n    color .16s ease,\n    transform .16s ease;\n}\n\n#yu-demo-ux .ydu-row.is-hidden {\n  display:none;\n}\n\n#yu-demo-ux .ydu-row.is-active {\n  background:var(--paper);\n  color:var(--ink);\n}\n\n@media(hover:hover) {\n  #yu-demo-ux .ydu-row:not(.is-active):hover {\n    background:rgba(255,255,255,.10);\n  }\n}\n\n#yu-demo-ux .ydu-row-no {\n  font-size:11px;\n  font-weight:700;\n  opacity:.70;\n}\n\n#yu-demo-ux .ydu-row-name {\n  min-width:0;\n\n  overflow:hidden;\n  text-overflow:ellipsis;\n  white-space:nowrap;\n\n  font-family:Khand,Arial,sans-serif;\n  font-size:34px;\n  line-height:1;\n  font-weight:600;\n}\n\n#yu-demo-ux .ydu-row-cat {\n  min-width:0;\n\n  overflow:hidden;\n  text-overflow:ellipsis;\n  white-space:nowrap;\n\n  font-size:12px;\n  font-weight:700;\n  letter-spacing:.035em;\n\n  opacity:.80;\n}\n\n#yu-demo-ux .ydu-row-arrow {\n  position:relative;\n  justify-self:end;\n  width:16px;\n  height:16px;\n}\n\n#yu-demo-ux .ydu-row-arrow::before {\n  content:\"\";\n  position:absolute;\n  left:1px;\n  top:7px;\n  width:12px;\n  height:1.5px;\n  background:currentColor;\n}\n\n#yu-demo-ux .ydu-row-arrow::after {\n  content:\"\";\n  position:absolute;\n  right:1px;\n  top:3px;\n  width:8px;\n  height:8px;\n  border-top:1.5px solid currentColor;\n  border-right:1.5px solid currentColor;\n  transform:rotate(45deg);\n}\n\n\/* =========================================================\nRIGHT \/ PREVIEW\n========================================================= *\/\n#yu-demo-ux .ydu-right {\n  min-width:0;\n\n  display:grid;\n  grid-template-rows:\n    52px\n    720px\n    auto;\n\n  align-content:start;\n\n  padding:28px;\n}\n\n#yu-demo-ux .ydu-preview-meta {\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:20px;\n\n  padding:0 4px;\n\n  color:rgba(255,255,255,.73);\n\n  font-size:11px;\n  font-weight:700;\n  letter-spacing:.045em;\n}\n\n#yu-demo-ux .ydu-preview-meta strong {\n  color:#fff;\n}\n\n#yu-demo-ux .ydu-preview-host {\n  position:relative;\n\n  min-width:0;\n  min-height:0;\n\n  overflow:hidden;\n\n  border-radius:10px 10px 0 0;\n\n  background:#fff;\n}\n\n#yu-demo-ux .ydu-live-frame {\n  display:block;\n  width:100%;\n  height:100%;\n  border:0;\n  background:#fff;\n}\n\n#yu-demo-ux .ydu-preview-host > .ydu-live-frame {\n  pointer-events:none;\n}\n\n#yu-demo-ux .ydu-open-preview {\n  position:absolute;\n  z-index:10;\n  inset:0;\n\n  width:100%;\n  height:100%;\n\n  padding:0;\n  border:0;\n\n  background:\n    linear-gradient(\n      180deg,\n      transparent 0%,\n      transparent 72%,\n      rgba(0,0,0,.04) 100%\n    );\n\n  cursor:zoom-in;\n}\n\n#yu-demo-ux .ydu-expand {\n  position:absolute;\n\n  right:14px;\n  bottom:14px;\n\n  width:44px;\n  height:44px;\n\n  border-radius:10px;\n\n  background:rgba(9,9,9,.88);\n\n  box-shadow:0 7px 22px rgba(0,0,0,.22);\n\n  transition:transform .16s ease;\n}\n\n@media(hover:hover) {\n  #yu-demo-ux .ydu-open-preview:hover .ydu-expand {\n    transform:scale(1.06);\n  }\n}\n\n#yu-demo-ux .ydu-expand i {\n  position:absolute;\n  width:9px;\n  height:9px;\n}\n\n#yu-demo-ux .ydu-expand i:nth-child(1){left:9px;top:9px;border-left:1.5px solid #fff;border-top:1.5px solid #fff}\n#yu-demo-ux .ydu-expand i:nth-child(2){right:9px;top:9px;border-right:1.5px solid #fff;border-top:1.5px solid #fff}\n#yu-demo-ux .ydu-expand i:nth-child(3){left:9px;bottom:9px;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff}\n#yu-demo-ux .ydu-expand i:nth-child(4){right:9px;bottom:9px;border-right:1.5px solid #fff;border-bottom:1.5px solid #fff}\n\n\/* =========================================================\nPREVIEW FOOTER\n========================================================= *\/\n#yu-demo-ux .ydu-preview-footer {\n  display:grid;\n\n  grid-template-columns:\n    minmax(0,1fr)\n    minmax(300px,420px);\n\n  align-items:end;\n  gap:32px;\n\n  padding:34px 30px 32px;\n\n  border-top:1px solid rgba(255,255,255,.18);\n  border-radius:0 0 10px 10px;\n\n  background:\n    linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.025));\n  color:#fff;\n}\n\n#yu-demo-ux .ydu-project-meta span {\n  display:block;\n\n  margin-bottom:8px;\n\n  color:rgba(255,255,255,.72);\n\n  font-size:11px;\n  font-weight:700;\n  letter-spacing:.055em;\n}\n\n#yu-demo-ux .ydu-project-meta h3 {\n  font-family:Khand,Arial,sans-serif;\n  font-size:clamp(54px,4.4vw,74px);\n  line-height:.86;\n  font-weight:600;\n  letter-spacing:-.035em;\n}\n\n\/* =========================================================\nPLEXY CTA\n========================================================= *\/\n#yu-demo-ux .ydu-cta {\n  position:relative;\n\n  min-height:92px;\n\n  display:grid;\n\n  grid-template-columns:minmax(0,1fr) 54px;\n\n  align-items:center;\n  gap:12px;\n\n  padding:10px 12px;\n\n  overflow:hidden;\n\n  border:1px solid rgba(255,255,255,.92);\n  border-radius:10px;\n\n  background:\n    linear-gradient(\n      135deg,\n      rgba(173,194,255,.26),\n      rgba(255,255,255,.13)\n    );\n\n  box-shadow:\n    inset 0 1px 0 rgba(255,255,255,.90),\n    inset 0 0 0 3px rgba(255,255,255,.08);\n\n  backdrop-filter:blur(9px);\n  -webkit-backdrop-filter:blur(9px);\n\n  color:var(--ink);\n}\n\n#yu-demo-ux .ydu-cta-brush {\n  min-width:0;\n\n  display:block;\n\n  padding:\n    8px\n    16px\n    10px;\n\n  transform:rotate(-1deg);\n\n  background:var(--orange);\n  color:#080808;\n\n  clip-path:\n    polygon(\n      0 7%,\n      18% 2%,\n      48% 7%,\n      72% 1%,\n      100% 6%,\n      98% 90%,\n      62% 96%,\n      27% 91%,\n      0 100%\n    );\n}\n\n#yu-demo-ux .ydu-cta-brush small {\n  display:block;\n\n  margin-bottom:4px;\n\n  font-size:9px;\n  line-height:1;\n  font-weight:800;\n  letter-spacing:.07em;\n}\n\n#yu-demo-ux .ydu-cta-brush strong {\n  display:block;\n\n  font-family:Khand,Arial,sans-serif;\n\n  font-size:clamp(20px,1.65vw,28px);\n  line-height:.95;\n\n  font-weight:600;\n\n  white-space:nowrap;\n}\n\n#yu-demo-ux .ydu-cta-arrow {\n  position:relative;\n\n  justify-self:center;\n\n  width:24px;\n  height:24px;\n\n  color:#3157C8;\n}\n\n#yu-demo-ux .ydu-cta-arrow::before {\n  content:\"\";\n\n  position:absolute;\n\n  left:3px;\n  top:11px;\n\n  width:17px;\n  height:1.7px;\n\n  background:currentColor;\n\n  transform:rotate(-45deg);\n  transform-origin:right center;\n}\n\n#yu-demo-ux .ydu-cta-arrow::after {\n  content:\"\";\n\n  position:absolute;\n\n  right:2px;\n  top:2px;\n\n  width:10px;\n  height:10px;\n\n  border-top:1.8px solid currentColor;\n  border-right:1.8px solid currentColor;\n}\n\n#yu-demo-ux .ydu-cta-screw {\n  position:absolute;\n  z-index:2;\n\n  width:11px;\n  height:11px;\n\n  border-radius:50%;\n\n  background:\n    linear-gradient(45deg,transparent 43%,#25292B 44%,#25292B 56%,transparent 57%),\n    radial-gradient(circle at 34% 29%,#F2F3F3 0%,#AEB7B9 31%,#687174 58%,#2A2E30 100%);\n}\n\n#yu-demo-ux .ydu-cs1{top:7px;left:7px}\n#yu-demo-ux .ydu-cs2{right:7px;bottom:7px}\n\n@media(hover:hover) and (pointer:fine) {\n  #yu-demo-ux .ydu-cta:hover,\n  #yu-demo-ux .ydu-cta:focus-visible {\n    color:var(--ink) !important;\n    background:\n      linear-gradient(135deg,rgba(190,207,255,.31),rgba(255,255,255,.16)) !important;\n    border-color:rgba(255,255,255,.96) !important;\n    text-decoration:none !important;\n  }\n\n  #yu-demo-ux .ydu-cta:hover .ydu-cta-brush,\n  #yu-demo-ux .ydu-cta:focus-visible .ydu-cta-brush {\n    background:var(--orange) !important;\n    color:#080808 !important;\n  }\n}\n\n\n\/* =========================================================\nFINAL INTERACTION HARDENING\n========================================================= *\/\n#yu-demo-ux .ydu-row,\n#yu-demo-ux .ydu-filter,\n#yu-demo-ux .ydu-open-preview,\n#yu-demo-ux .ydu-cta {\n  -webkit-tap-highlight-color:transparent;\n}\n\n#yu-demo-ux .ydu-row:focus-visible,\n#yu-demo-ux .ydu-filter:focus-visible,\n#yu-demo-ux .ydu-open-preview:focus-visible,\n#yu-demo-ux .ydu-cta:focus-visible {\n  outline:2px solid rgba(255,255,255,.95) !important;\n  outline-offset:-3px;\n}\n\n@media(hover:hover) and (pointer:fine) {\n  #yu-demo-ux .ydu-filter:hover:not(.is-active) {\n    background:rgba(255,255,255,.10) !important;\n    color:#fff !important;\n    border-color:rgba(255,255,255,.58) !important;\n  }\n\n  #yu-demo-ux .ydu-row:hover:not(.is-active) {\n    color:#fff !important;\n  }\n}\n\n\/* =========================================================\nFULLSCREEN\n========================================================= *\/\n.ydu-fullscreen {\n  position:fixed !important;\n  inset:0 !important;\n\n  z-index:2147483647 !important;\n\n  width:100vw;\n  height:100dvh;\n\n  display:grid;\n  grid-template-rows:60px minmax(0,1fr);\n\n  opacity:0;\n  visibility:hidden;\n  pointer-events:none;\n\n  background:#111;\n\n  transition:\n    opacity .15s ease,\n    visibility .15s ease;\n}\n\n.ydu-fullscreen.is-open {\n  opacity:1;\n  visibility:visible;\n  pointer-events:auto;\n}\n\n.ydu-fullbar {\n  position:relative;\n  z-index:2147483647;\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:20px;\n\n  padding:0 18px 0 24px;\n\n  border-bottom:1px solid rgba(255,255,255,.17);\n\n  background:#111;\n  color:#fff;\n\n  font-family:Inter,Arial,sans-serif;\n}\n\n.ydu-fullname {\n  min-width:0;\n\n  display:flex;\n  align-items:baseline;\n  gap:12px;\n}\n\n.ydu-fullname span {\n  color:rgba(255,255,255,.60);\n\n  font-size:10px;\n  font-weight:700;\n  letter-spacing:.07em;\n}\n\n.ydu-fullname strong {\n  min-width:0;\n\n  overflow:hidden;\n  text-overflow:ellipsis;\n  white-space:nowrap;\n\n  font-family:Khand,Arial,sans-serif;\n\n  font-size:25px;\n  line-height:1;\n\n  font-weight:600;\n}\n\n.ydu-fullactions {\n  position:relative;\n  z-index:3;\n  display:flex;\n  align-items:center;\n  gap:8px;\n}\n\n.ydu-back {\n  height:36px;\n\n  display:flex;\n  align-items:center;\n  gap:8px;\n\n  padding:0 12px;\n\n  border:1px solid rgba(255,255,255,.30);\n  border-radius:10px;\n\n  background:transparent;\n  color:#fff;\n\n  font-family:Inter,Arial,sans-serif;\n\n  font-size:10px;\n  font-weight:700;\n\n  cursor:pointer;\n}\n\n.ydu-back i {\n  position:relative;\n\n  width:10px;\n  height:10px;\n}\n\n.ydu-back i::before {\n  content:\"\";\n\n  position:absolute;\n\n  left:2px;\n  top:2px;\n\n  width:6px;\n  height:6px;\n\n  border-left:1.5px solid currentColor;\n  border-bottom:1.5px solid currentColor;\n\n  transform:rotate(45deg);\n}\n\n.ydu-close {\n  position:relative;\n\n  width:36px;\n  height:36px;\n\n  padding:0;\n\n  border:1px solid rgba(255,255,255,.30);\n  border-radius:10px;\n\n  background:transparent;\n  color:#fff;\n\n  cursor:pointer;\n}\n\n.ydu-close i {\n  position:absolute;\n\n  left:50%;\n  top:50%;\n\n  width:13px;\n  height:1.5px;\n\n  background:currentColor;\n}\n\n.ydu-close i:first-child {\n  transform:translate(-50%,-50%) rotate(45deg);\n}\n\n.ydu-close i:last-child {\n  transform:translate(-50%,-50%) rotate(-45deg);\n}\n\n.ydu-fullhost {\n  min-width:0;\n  min-height:0;\n\n  background:#fff;\n}\n\n.ydu-fullhost > .ydu-live-frame {\n  width:100%;\n  height:100%;\n  pointer-events:auto;\n}\n\nbody.ydu-lock {\n  overflow:hidden !important;\n}\n\n.ydu-fullscreen .ydu-back,\n.ydu-fullscreen .ydu-close {\n  pointer-events:auto !important;\n  cursor:pointer !important;\n  -webkit-appearance:none !important;\n  appearance:none !important;\n  background-color:transparent !important;\n  color:#fff !important;\n  border-color:rgba(255,255,255,.34) !important;\n  box-shadow:none !important;\n  outline-offset:3px;\n}\n\n.ydu-fullscreen .ydu-back *,\n.ydu-fullscreen .ydu-close * {\n  pointer-events:none !important;\n}\n\n@media(hover:hover) and (pointer:fine) {\n  .ydu-fullscreen .ydu-back:hover,\n  .ydu-fullscreen .ydu-close:hover {\n    background:rgba(255,255,255,.11) !important;\n    color:#fff !important;\n    border-color:rgba(255,255,255,.72) !important;\n  }\n}\n\n.ydu-fullscreen .ydu-back:focus-visible,\n.ydu-fullscreen .ydu-close:focus-visible {\n  outline:2px solid #fff !important;\n  background:rgba(255,255,255,.10) !important;\n}\n\n.ydu-fullhost {\n  position:relative;\n  z-index:1;\n}\n\n.ydu-fullhost > .ydu-live-frame {\n  cursor:auto !important;\n}\n\n\n\/* =========================================================\nTABLET \u2014 editorial vertical flow\n========================================================= *\/\n@media(max-width:1100px) and (min-width:768px) {\n\n  #yu-demo-ux {\n    padding:96px 16px;\n  }\n\n  #yu-demo-ux .ydu-shell {\n    min-height:0;\n    display:block;\n    overflow:hidden;\n  }\n\n  #yu-demo-ux .ydu-top {\n    min-height:66px;\n    padding:0 26px;\n  }\n\n  #yu-demo-ux .ydu-brand {\n    font-size:11px;\n  }\n\n  #yu-demo-ux .ydu-total-top strong {\n    font-size:26px;\n  }\n\n  #yu-demo-ux .ydu-body {\n    display:block;\n  }\n\n  \/* ARCHIVE FIRST *\/\n  #yu-demo-ux .ydu-left {\n    width:100%;\n    padding-bottom:0;\n    border-right:0;\n  }\n\n  #yu-demo-ux .ydu-heading {\n    padding:40px 26px 28px;\n  }\n\n  #yu-demo-ux .ydu-heading h2 {\n    max-width:520px;\n    font-size:clamp(52px,7vw,68px);\n    line-height:.88;\n  }\n\n  #yu-demo-ux .ydu-filters {\n    padding:0 26px;\n  }\n\n  #yu-demo-ux .ydu-filter {\n    min-height:36px;\n    font-size:11px;\n  }\n\n  #yu-demo-ux .ydu-filter-breath {\n    height:30px;\n  }\n\n  #yu-demo-ux .ydu-list-head,\n  #yu-demo-ux .ydu-row {\n    padding-left:26px;\n    padding-right:26px;\n  }\n\n  #yu-demo-ux .ydu-list-head {\n    min-height:40px;\n  }\n\n  #yu-demo-ux .ydu-row {\n    min-height:78px;\n  }\n\n  #yu-demo-ux .ydu-row-name {\n    font-size:30px;\n  }\n\n  #yu-demo-ux .ydu-row-cat {\n    font-size:11px;\n  }\n\n  \/* PREVIEW BELOW, FULL WIDTH *\/\n  #yu-demo-ux .ydu-right {\n    width:100%;\n    display:grid;\n    grid-template-rows:\n      46px\n      minmax(560px,66svh)\n      auto;\n\n    padding:48px 18px 18px;\n    border-top:1px solid rgba(255,255,255,.20);\n  }\n\n  #yu-demo-ux .ydu-preview-meta {\n    padding:0 8px;\n    font-size:10px;\n  }\n\n  #yu-demo-ux .ydu-preview-host {\n    width:100%;\n    border-radius:10px 10px 0 0;\n  }\n\n  #yu-demo-ux .ydu-preview-footer {\n    grid-template-columns:minmax(0,1fr) minmax(300px,380px);\n    gap:24px;\n    padding:28px 24px 26px;\n  }\n\n  #yu-demo-ux .ydu-project-meta h3 {\n    font-size:clamp(50px,6vw,62px);\n  }\n\n  #yu-demo-ux .ydu-cta {\n    min-height:86px;\n  }\n\n  #yu-demo-ux .ydu-cta-brush strong {\n    font-size:clamp(18px,2.3vw,23px);\n  }\n}\n\n\/* =========================================================\nMOBILE\n========================================================= *\/\n@media(max-width:767px) {\n\n  #yu-demo-ux {\n    padding:88px 10px;\n  }\n\n  #yu-demo-ux .ydu-shell {\n    min-height:0;\n    display:block;\n  }\n\n  #yu-demo-ux .ydu-top {\n    min-height:60px;\n\n    padding:0 16px;\n  }\n\n  #yu-demo-ux .ydu-brand {\n    font-size:10px;\n  }\n\n  #yu-demo-ux .ydu-total-top strong {\n    font-size:23px;\n  }\n\n  #yu-demo-ux .ydu-body {\n    display:block;\n  }\n\n  #yu-demo-ux .ydu-left {\n    padding-bottom:0;\n\n    border-right:0;\n  }\n\n  #yu-demo-ux .ydu-heading {\n    padding:36px 20px 28px;\n  }\n\n  #yu-demo-ux .ydu-heading h2 {\n    max-width:330px;\n\n    font-size:clamp(48px,14vw,62px);\n  }\n\n  #yu-demo-ux .ydu-filters {\n    padding:0 20px;\n  }\n\n  #yu-demo-ux .ydu-filter {\n    min-height:35px;\n\n    font-size:11px;\n  }\n\n  #yu-demo-ux .ydu-filter-breath {\n    height:24px;\n  }\n\n  #yu-demo-ux .ydu-list-head {\n    display:none;\n  }\n\n  #yu-demo-ux .ydu-row {\n    min-height:82px;\n\n    grid-template-columns:\n      34px\n      minmax(0,1fr)\n      18px;\n\n    gap:10px;\n\n    padding:0 20px;\n  }\n\n  #yu-demo-ux .ydu-row-name {\n    font-size:31px;\n  }\n\n  #yu-demo-ux .ydu-row-cat {\n    display:none;\n  }\n\n  #yu-demo-ux .ydu-right {\n    display:grid;\n\n    grid-template-rows:\n      44px\n      minmax(470px,64svh)\n      auto;\n\n    padding:48px 10px 14px;\n\n    border-top:1px solid rgba(255,255,255,.20);\n  }\n\n  #yu-demo-ux .ydu-preview-meta {\n    padding:0 10px;\n\n    font-size:10px;\n  }\n\n  #yu-demo-ux .ydu-preview-host {\n    border-radius:10px 10px 0 0;\n  }\n\n  #yu-demo-ux .ydu-preview-footer {\n    display:block;\n\n    padding:30px 20px 22px;\n  }\n\n  #yu-demo-ux .ydu-project-meta h3 {\n    font-size:54px;\n  }\n\n  #yu-demo-ux .ydu-cta {\n    width:100%;\n\n    min-height:86px;\n\n    margin-top:28px;\n\n    grid-template-columns:minmax(0,1fr) 42px;\n  }\n\n  #yu-demo-ux .ydu-cta-brush strong {\n    font-size:21px;\n    white-space:normal;\n  }\n\n  .ydu-fullscreen {\n    grid-template-rows:58px minmax(0,1fr);\n  }\n\n  .ydu-fullbar {\n    padding:0 10px 0 14px;\n  }\n\n  .ydu-fullname span {\n    display:none;\n  }\n\n  .ydu-fullname strong {\n    font-size:21px;\n  }\n\n  .ydu-back {\n    width:36px;\n\n    padding:0;\n\n    justify-content:center;\n  }\n\n  .ydu-back span {\n    display:none;\n  }\n}\n<\/style>\n\n\n<script>\n(function() {\n  \"use strict\";\n\n  function initYuDemoUX() {\n\n    const root = document.getElementById(\"yu-demo-ux\");\n    const fullscreen = document.getElementById(\"yduFullscreen\");\n\n    if (!root || !fullscreen || root.dataset.yduReady === \"1\") return;\n\n    root.dataset.yduReady = \"1\";\n\n    const demos = [\n      { name:\"TAGLIO.\", category:\"HOSPITALITY\", template:\"yduTplTaglio\" },\n      { name:\"FORM.\", category:\"E-COMMERCE\", template:\"yduTplForm\" },\n      { name:\"S\\u014CMA\", category:\"BEAUTY\", template:\"yduTplSoma\" },\n      { name:\"N\\u00D8RTH\", category:\"REAL ESTATE\", template:\"yduTplNorth\" }\n    ];\n\n    const $ = (s, scope=root) => (scope || root).querySelector(s);\n    const $$ = (s, scope=root) => [...(scope || root).querySelectorAll(s)];\n\n    const frame = $(\"#yduLiveFrame\");\n    const previewHost = $(\"#yduPreviewHost\");\n    const fullHost = document.getElementById(\"yduFullHost\");\n\n    const filters = $(\"#yduFilters\");\n    const list = $(\"#yduList\");\n\n    const total = $(\"#yduTotal\");\n\n    const previewNo = $(\"#yduPreviewNo\");\n    const previewCategoryTop = $(\"#yduPreviewCategoryTop\");\n    const previewCategory = $(\"#yduPreviewCategory\");\n    const previewTitle = $(\"#yduPreviewTitle\");\n\n    const fullCategory = document.getElementById(\"yduFullCategory\");\n    const fullTitle = document.getElementById(\"yduFullTitle\");\n    const backBtn = document.getElementById(\"yduBack\");\n    const closeBtn = document.getElementById(\"yduClose\");\n\n    let selected = 0;\n    let previewed = 0;\n    let loadedIndex = -1;\n    let fullscreenOpen = false;\n\n    \/* PERFORMANCE: the live demo is not initialized while the user is still\n       in the long HERO. It is hydrated only when the archive approaches\n       the viewport (or immediately if the browser has no IntersectionObserver). *\/\n    let demoEngineReady = false;\n    let demoObserver = null;\n\n    \/* Final interaction cleanup *\/\n    let hoverTimer = null;\n    const HOVER_DELAY = 130;\n\n    let savedPageY = 0;\n    let savedBodyPaddingRight = \"\";\n\n    const number = i => String(i + 1).padStart(2, \"0\");\n\n    \/* -----------------------------------------\n       DEMO SOURCE\n    ----------------------------------------- *\/\n    function getDemoHTML(index) {\n      const demo = demos[index];\n      if (!demo) return \"\";\n\n      const template = document.getElementById(demo.template);\n      return template ? template.innerHTML.trim() : \"\";\n    }\n\n    function moveFrame(host) {\n      if (host && frame.parentElement !== host) {\n        host.insertBefore(frame, host.firstChild);\n      }\n    }\n\n    function loadDemo(index, force=false) {\n      if (!demos[index]) return;\n      if (!force && loadedIndex === index) return;\n\n      const html = getDemoHTML(index);\n\n      if (!html) {\n        frame.srcdoc =\n          '<!doctype html><html><body style=\"margin:0;min-height:100vh;display:grid;place-items:center;background:#111;color:#fff;font:14px Arial\">DEMO NOT AVAILABLE<\/body><\/html>';\n        loadedIndex = -1;\n        return;\n      }\n\n      loadedIndex = index;\n      frame.srcdoc = html;\n    }\n\n    \/* -----------------------------------------\n       TEXT \/ SELECTION\n    ----------------------------------------- *\/\n    function updatePreview(index) {\n      const demo = demos[index];\n      if (!demo) return;\n\n      previewed = index;\n\n      previewNo.textContent = number(index);\n      previewCategoryTop.textContent = demo.category;\n      previewCategory.textContent = demo.category;\n      previewTitle.textContent = demo.name;\n    }\n\n    function paintSelection() {\n      [...list.children].forEach((row, index) => {\n        row.classList.toggle(\"is-active\", index === selected);\n      });\n    }\n\n    function previewIsVisible() {\n      const rect = $(\"#yduPreviewBlock\").getBoundingClientRect();\n\n      return (\n        rect.top >= 0 &&\n        rect.top < window.innerHeight * .72\n      );\n    }\n\n    function selectDemo(index, options={}) {\n      if (!demos[index]) return;\n\n      selected = index;\n      previewed = index;\n\n      updatePreview(index);\n      paintSelection();\n\n      if (!fullscreenOpen && demoEngineReady) {\n        moveFrame(previewHost);\n        loadDemo(index);\n      }\n\n      if (\n        options.mobileScroll &&\n        window.matchMedia(\"(max-width:767px)\").matches &&\n        !previewIsVisible()\n      ) {\n        window.requestAnimationFrame(() => {\n          $(\"#yduPreviewBlock\").scrollIntoView({\n            behavior:\"smooth\",\n            block:\"start\"\n          });\n        });\n      }\n    }\n\n    function temporaryPreview(index) {\n      if (!demos[index] || fullscreenOpen) return;\n\n      updatePreview(index);\n\n      if (demoEngineReady) {\n        moveFrame(previewHost);\n        loadDemo(index);\n      }\n    }\n\n    \/* -----------------------------------------\n       FILTERS + COUNTS\n    ----------------------------------------- *\/\n    const order = [\n      \"HOSPITALITY\",\n      \"E-COMMERCE\",\n      \"BEAUTY\",\n      \"REAL ESTATE\"\n    ];\n\n    const counts = {};\n\n    demos.forEach(demo => {\n      counts[demo.category] = (counts[demo.category] || 0) + 1;\n    });\n\n    function createFilter(label, value, count) {\n      const button = document.createElement(\"button\");\n\n      button.type = \"button\";\n      button.className = \"ydu-filter\";\n      button.dataset.filter = value;\n\n      const text = document.createElement(\"span\");\n      text.textContent = label;\n\n      const qty = document.createElement(\"strong\");\n      qty.textContent = String(count).padStart(2, \"0\");\n\n      button.append(text, qty);\n\n      button.addEventListener(\"click\", () => {\n        applyFilter(value);\n      });\n\n      filters.appendChild(button);\n    }\n\n    createFilter(\"ALL\", \"ALL\", demos.length);\n\n    order.forEach(category => {\n      if (counts[category]) {\n        createFilter(category, category, counts[category]);\n      }\n    });\n\n    function applyFilter(filter) {\n\n      $$(\".ydu-filter\").forEach(button => {\n        button.classList.toggle(\n          \"is-active\",\n          button.dataset.filter === filter\n        );\n      });\n\n      let firstVisible = -1;\n\n      [...list.children].forEach((row, index) => {\n\n        const visible =\n          filter === \"ALL\" ||\n          demos[index].category === filter;\n\n        row.classList.toggle(\"is-hidden\", !visible);\n\n        if (visible && firstVisible < 0) {\n          firstVisible = index;\n        }\n\n      });\n\n      const selectedVisible =\n        filter === \"ALL\" ||\n        demos[selected].category === filter;\n\n      if (selectedVisible) {\n        temporaryPreview(selected);\n      } else if (firstVisible >= 0) {\n        temporaryPreview(firstVisible);\n      }\n    }\n\n    function clearHoverPreview() {\n      if (hoverTimer) {\n        window.clearTimeout(hoverTimer);\n        hoverTimer = null;\n      }\n    }\n\n    function queueHoverPreview(index) {\n      clearHoverPreview();\n\n      hoverTimer = window.setTimeout(() => {\n        hoverTimer = null;\n\n        if (!fullscreenOpen && window.matchMedia(\"(hover:hover) and (pointer:fine)\").matches) {\n          temporaryPreview(index);\n        }\n      }, HOVER_DELAY);\n    }\n\n    \/* -----------------------------------------\n       LIST\n    ----------------------------------------- *\/\n    demos.forEach((demo, index) => {\n\n      const row = document.createElement(\"button\");\n\n      row.type = \"button\";\n      row.className = \"ydu-row\";\n      row.dataset.category = demo.category;\n      row.setAttribute(\"aria-label\", \"Select \" + demo.name);\n\n      const no = document.createElement(\"span\");\n      no.className = \"ydu-row-no\";\n      no.textContent = number(index);\n\n      const name = document.createElement(\"strong\");\n      name.className = \"ydu-row-name\";\n      name.textContent = demo.name;\n\n      const category = document.createElement(\"span\");\n      category.className = \"ydu-row-cat\";\n      category.textContent = demo.category;\n\n      const arrow = document.createElement(\"span\");\n      arrow.className = \"ydu-row-arrow\";\n      arrow.setAttribute(\"aria-hidden\", \"true\");\n\n      row.append(no, name, category, arrow);\n\n      row.addEventListener(\"mouseenter\", () => {\n        if (window.matchMedia(\"(hover:hover) and (pointer:fine)\").matches) {\n          queueHoverPreview(index);\n        }\n      });\n\n      row.addEventListener(\"mouseleave\", () => {\n        clearHoverPreview();\n      });\n\n      row.addEventListener(\"focus\", () => {\n        clearHoverPreview();\n        temporaryPreview(index);\n      });\n\n      row.addEventListener(\"click\", () => {\n        clearHoverPreview();\n        selectDemo(index, { mobileScroll:true });\n      });\n\n      list.appendChild(row);\n    });\n\n    list.addEventListener(\"mouseleave\", () => {\n      clearHoverPreview();\n\n      if (window.matchMedia(\"(hover:hover) and (pointer:fine)\").matches) {\n        temporaryPreview(selected);\n      }\n    });\n\n    \/* -----------------------------------------\n       FULLSCREEN\n    ----------------------------------------- *\/\n    if (fullscreen.parentElement !== document.body) {\n      document.body.appendChild(fullscreen);\n    }\n\n    function openFullscreen(index) {\n      if (!demos[index] || fullscreenOpen) return;\n\n      \/* A direct user action always has priority over lazy initialization. *\/\n      if (!demoEngineReady) {\n        demoEngineReady = true;\n        if (demoObserver) {\n          demoObserver.disconnect();\n          demoObserver = null;\n        }\n      }\n\n      clearHoverPreview();\n\n      selected = index;\n      previewed = index;\n\n      paintSelection();\n      updatePreview(index);\n\n      const demo = demos[index];\n\n      fullCategory.textContent = demo.category;\n      fullTitle.textContent = demo.name;\n\n      \/* Preserve the page exactly where it is before locking it. *\/\n      savedPageY = window.scrollY || window.pageYOffset || 0;\n      savedBodyPaddingRight = document.body.style.paddingRight;\n\n      const scrollbarGap = Math.max(0, window.innerWidth - document.documentElement.clientWidth);\n      if (scrollbarGap > 0) {\n        document.body.style.paddingRight = scrollbarGap + \"px\";\n      }\n\n      moveFrame(fullHost);\n      loadDemo(index);\n\n      fullscreenOpen = true;\n\n      fullscreen.classList.add(\"is-open\");\n      fullscreen.setAttribute(\"aria-hidden\", \"false\");\n\n      document.body.classList.add(\"ydu-lock\");\n    }\n\n    function closeFullscreen() {\n      if (!fullscreenOpen) return;\n\n      fullscreenOpen = false;\n\n      fullscreen.classList.remove(\"is-open\");\n      fullscreen.setAttribute(\"aria-hidden\", \"true\");\n\n      document.body.classList.remove(\"ydu-lock\");\n      document.body.style.paddingRight = savedBodyPaddingRight;\n\n      moveFrame(previewHost);\n      updatePreview(selected);\n      loadDemo(selected);\n\n      \/*\n       * No scrollIntoView here.\n       * Return to the exact page position from which fullscreen was opened.\n       *\/\n      window.requestAnimationFrame(() => {\n        window.scrollTo({\n          top: savedPageY,\n          left: 0,\n          behavior: \"auto\"\n        });\n      });\n    }\n\n    $(\"#yduOpenPreview\").addEventListener(\"click\", () => {\n      openFullscreen(previewed);\n    });\n\n    backBtn.addEventListener(\"click\", event => {\n      event.preventDefault();\n      event.stopPropagation();\n      closeFullscreen();\n    });\n\n    closeBtn.addEventListener(\"click\", event => {\n      event.preventDefault();\n      event.stopPropagation();\n      closeFullscreen();\n    });\n\n    document.addEventListener(\"keydown\", event => {\n      if (event.key === \"Escape\" && fullscreenOpen) {\n        closeFullscreen();\n      }\n    });\n\n    \/* -----------------------------------------\n       PERFORMANCE \/ LAZY DEMO ENGINE\n    ----------------------------------------- *\/\n    function hydrateDemoEngine() {\n      if (demoEngineReady) return;\n\n      demoEngineReady = true;\n\n      if (demoObserver) {\n        demoObserver.disconnect();\n        demoObserver = null;\n      }\n\n      \/* Use the currently previewed item, so filters\/keyboard state remain\n         correct even if something changed before hydration. *\/\n      moveFrame(previewHost);\n      loadDemo(previewed);\n    }\n\n    function armDemoEngine() {\n      if (!(\"IntersectionObserver\" in window)) {\n        hydrateDemoEngine();\n        return;\n      }\n\n      demoObserver = new IntersectionObserver((entries) => {\n        if (entries.some(entry => entry.isIntersecting)) {\n          hydrateDemoEngine();\n        }\n      }, {\n        root: null,\n        \/* Start loading shortly before the archive becomes visible. *\/\n        rootMargin: \"250px 0px\",\n        threshold: 0\n      });\n\n      demoObserver.observe(root);\n    }\n\n    \/* -----------------------------------------\n       INIT\n    ----------------------------------------- *\/\n    total.textContent = String(demos.length).padStart(2, \"0\");\n\n    \/* Build UI immediately, but do NOT create\/load TAGLIO yet. *\/\n    selectDemo(0);\n    applyFilter(\"ALL\");\n    armDemoEngine();\n  }\n\n  if (document.readyState === \"loading\") {\n    document.addEventListener(\n      \"DOMContentLoaded\",\n      initYuDemoUX,\n      { once:true }\n    );\n  } else {\n    initYuDemoUX();\n  }\n\n  window.addEventListener(\n    \"elementor\/frontend\/init\",\n    () => requestAnimationFrame(initYuDemoUX)\n  );\n\n})();\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>SCROLL CHOOSEA DEMO Explore examples across different industries and find the right direction for your website. 01 \/ CONTACT I WANT A WEBSITE LIKE THESE \u2197 YU.DESIGN \/ DEMO WEBSITES 04 DEMO EXPLORE THE DEMOS N. PROJECT CATEGORY PREVIEW 01 HOSPITALITY HOSPITALITY TAGLIO. 01 \/ CONTACT I WANT A WEBSITE LIKE THIS HOSPITALITY TAGLIO. GO [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-11057","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.yuliyapivnyak.it\/en\/wp-json\/wp\/v2\/pages\/11057","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yuliyapivnyak.it\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.yuliyapivnyak.it\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.yuliyapivnyak.it\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yuliyapivnyak.it\/en\/wp-json\/wp\/v2\/comments?post=11057"}],"version-history":[{"count":0,"href":"https:\/\/www.yuliyapivnyak.it\/en\/wp-json\/wp\/v2\/pages\/11057\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.yuliyapivnyak.it\/en\/wp-json\/wp\/v2\/media?parent=11057"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}