/* ============================================================
   3D opening, arcade look (preview): fine gold lines over deep navy,
   serif type, a polished floor. The scene is drawn by js/lux3d.js;
   this file places the headline, the menu and the counter over it.
   ?tone=ivory switches to the light stone version (html.x3-ivory).
   ============================================================ */
html.x3-lux{
  --lx-bg:#0B1622; --lx-text:#F6F0E2; --lx-soft:rgba(246,240,226,.74); --lx-gold:#DDBB78; --lx-rule:rgba(205,166,91,.45);
}
html.x3-lux.x3-ivory{
  --lx-bg:#F0E8D8; --lx-text:#142433; --lx-soft:#566371; --lx-gold:#8C6A22; --lx-rule:rgba(176,137,60,.5);
}

.x3{ display:none; }
html.x3-on .x3{
  --hdr:95px;
  --x3-pad:max(24px, calc((100vw - 1180px) / 2 + 24px));
  display:block; position:relative; height:620vh; padding:0;
  margin-top:calc(-1 * var(--hdr)); background:var(--lx-bg);
}
.x3-pin{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; color:var(--lx-text); background:var(--lx-bg); }
.x3-glow, .x3-scrim{ display:none; }
.x3-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }

/* ---------- Header over the navy stage ---------- */
html.x3-lux:not(.x3-ivory) header{
  --logo-green:var(--logo-green-onDark); --logo-orange:var(--logo-orange-onDark);
  background:rgba(9,18,28,.86); border-bottom-color:rgba(205,166,91,.18);
}
html.x3-lux:not(.x3-ivory) .nav-links-desktop a,
html.x3-lux:not(.x3-ivory) .nav-more-btn{ color:rgba(246,240,226,.76); }
html.x3-lux:not(.x3-ivory) .nav-links-desktop a:hover,
html.x3-lux:not(.x3-ivory) .nav-more-btn:hover{ color:#fff; }
html.x3-lux:not(.x3-ivory) .nav-links-desktop a.active{ color:#DDBB78; }
html.x3-lux:not(.x3-ivory) .nav-more-dropdown a{ color:var(--ink); }
html.x3-lux:not(.x3-ivory) .lang-btn{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.2); color:#F6F0E2; }
html.x3-lux:not(.x3-ivory) .menu-btn{ border-color:rgba(255,255,255,.25); }
html.x3-lux:not(.x3-ivory) .menu-btn span{ background:#F6F0E2; }
html.x3-lux:not(.x3-ivory) .mobile-panel{ border-top-color:rgba(255,255,255,.1); }
html.x3-lux:not(.x3-ivory) .mobile-panel a{ color:#F6F0E2; border-bottom-color:rgba(255,255,255,.1); }

/* ---------- Opening screen ---------- */
.x3-intro{
  position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  padding:var(--hdr) var(--x3-pad) 0; will-change:transform, opacity; pointer-events:none;
}
/* the arcade comes out of the dark beside the headline, never across it */
.x3-intro::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, var(--lx-bg) 0%, var(--lx-bg) 24%, rgba(0,0,0,0) 60%);
}
.x3-note{ max-width:600px; pointer-events:auto; }
.x3-kicker{
  display:flex; align-items:center; gap:14px; margin:0 0 22px;
  font-size:.92rem; font-weight:500; color:var(--lx-gold);
}
.x3-kicker::before{ content:""; width:44px; height:1px; background:var(--lx-gold); }
/* the brand name, in the line above the home headline (helps Google tie "Smilenzo" to the site) */
.x3-brand{ color:var(--lx-text); font-weight:600; letter-spacing:.02em; }
.x3-title{
  font-family:var(--font-serif); font-weight:500; color:var(--lx-text);
  font-size:clamp(2.9rem, 6vw, 5.6rem); line-height:1.04; letter-spacing:-.018em;
}
.x3-title span:first-child{ color:var(--lx-gold); }
/* other languages: the gold word is not always the first one */
.x3-title.x3-words span:first-child{ color:inherit; }
.x3-title.x3-words span.is-gold{ color:var(--lx-gold); }
.x3-lead{ margin:26px 0 0; max-width:44ch; font-size:1.1rem; line-height:1.6; color:var(--lx-soft); }
.x3-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
html.x3-lux:not(.x3-ivory) .x3-cta .btn-ghost{ border-color:rgba(246,240,226,.5); color:#F6F0E2; }
html.x3-lux:not(.x3-ivory) .x3-cta .btn-ghost:hover{ background:#F6F0E2; color:var(--ink); border-color:#F6F0E2; }

/* ---------- While walking the arcade ---------- */
.x3-menu, .x3-now{ opacity:0; transition:opacity .9s ease, transform .9s ease; z-index:2; }
.x3-menu{
  position:absolute; left:var(--x3-pad); bottom:44px; display:flex; flex-direction:column; align-items:stretch; min-width:230px;
  font-size:.95rem; transform:translateY(16px); pointer-events:none;
}
.x3-in-gallery .x3-menu{ opacity:1; transform:none; pointer-events:auto; }
.x3-menu p{ margin:0 0 12px; font-family:var(--font-serif); font-size:1.3rem; font-weight:500; color:var(--lx-text); }
.x3-menu a{ padding:9px 0; color:var(--lx-soft); border-top:1px solid var(--lx-rule); transition:color .2s, padding .25s; }
.x3-menu a:hover{ color:var(--lx-text); padding-inline-start:6px; }
.x3-menu .x3-ask{
  margin-top:16px; padding:13px 22px; border:0; border-radius:var(--radius-btn); text-align:center;
  background:var(--action); color:var(--white); font-weight:600; font-size:.94rem;
  box-shadow:0 12px 24px -14px rgba(193,80,63,.9); transition:background .2s, transform .3s;
}
.x3-menu .x3-ask:hover{ background:var(--action-hover); color:var(--white); padding-inline-start:22px; transform:translateY(-2px); }
.x3-now, .x3-hint{
  position:absolute; left:50%; bottom:44px; transform:translateX(-50%); white-space:nowrap; z-index:2;
  font-size:.88rem; color:var(--lx-soft);
}
.x3-now .x3-count{ color:var(--lx-gold); font-weight:500; margin-inline-end:14px; }
.x3-in-gallery .x3-now{ opacity:1; }
.x3-hint{ transition:opacity .5s; }
.x3-hint span{ display:inline-block; animation:x3Nudge 1.8s ease-in-out infinite; }
@keyframes x3Nudge{ 50%{ transform:translateY(5px); } }
.x3-in-gallery .x3-hint{ opacity:0; }

@media (max-width:900px){
  .x3-intro{ justify-content:flex-start; padding-top:calc(var(--hdr) + 8vh); }
  .x3-intro::before{ background:linear-gradient(180deg, var(--lx-bg) 0%, var(--lx-bg) 58%, rgba(0,0,0,0) 86%); }
}
@media (max-width:700px){
  .x3-menu{ display:none; }
  .x3-now, .x3-hint{ bottom:96px; }
  .x3-lead{ font-size:1rem; }
  html.x3-on .x3{ height:560vh; }
}
@media (prefers-reduced-motion: reduce){
  .x3-hint span{ animation:none; }
}

/* ============================================================
   The rest of the home page in the same style.
   Navy tone: the site's colour tokens are re-pointed (cream paper becomes
   navy, ink becomes cream, rules become gold), then the few places with
   fixed colours are set by hand. Ivory tone keeps the site's own cream and
   only takes the gold details and the arch shapes.
   ============================================================ */
html.x3-lux:not(.x3-ivory){
  color-scheme:dark;
  --paper:#0B1622; --paper-deep:#0F1E2D;
  --ink:#F6F0E2; --ink-soft:rgba(246,240,226,.72);
  --line:rgba(205,166,91,.26);
  --turquoise-deep:#DDBB78; --gold:#CDA65B;
  --logo-green:var(--logo-green-onDark); --logo-orange:var(--logo-orange-onDark);
}
html.x3-lux.x3-ivory{ --turquoise-deep:#8C6A22; --line:rgba(176,137,60,.34); }
/* Every white card on the site (steps, price lists, articles, reviews, forms...)
   takes its colour from --white, so on the navy page that becomes a navy card.
   The few places that use the same colour for lettering or small white parts
   keep real white. */
html.x3-lux:not(.x3-ivory){ --white:#13263A; }
html.x3-lux:not(.x3-ivory) :is(.nav-account-btn, .btn-primary, .quote-submit, .ba-label, .review-submit, .foot-newsletter button, .fab, .chat-foot button, .sticky-cta a, .cb-btn-accept, .cm-btn-save){ color:#fff; }
html.x3-lux:not(.x3-ivory) :is(.ba-handle-line, .cb-slider)::before, html.x3-lux:not(.x3-ivory) .ba-handle-line{ background:#fff; }
/* the row for Turkiye in the cost comparison, and the partnership terms card: both had fixed pale backgrounds */
html.x3-lux:not(.x3-ivory) .cmp-row.highlight{ background:#1B3550; border-color:#DDBB78; box-shadow:0 6px 20px rgba(0,0,0,.3); }
html.x3-lux:not(.x3-ivory) .cmp-row.highlight .cmp-market .flag,
html.x3-lux:not(.x3-ivory) .cmp-save{ background:rgba(221,187,120,.16); color:#EBCB8B; }
html.x3-lux:not(.x3-ivory) .cmp-row.highlight .cmp-bar{ background:linear-gradient(90deg, #CDA65B, #EBCB8B); }
html.x3-lux:not(.x3-ivory) .partner-model{ background:#13263A; border:1px solid var(--line); color:var(--ink); }
html.x3-lux:not(.x3-ivory) .partner-model h4{ color:var(--ink); }
html.x3-lux:not(.x3-ivory) .partner-model .model-row{ border-color:var(--line); }
html.x3-lux:not(.x3-ivory) .partner-model .label{ color:var(--ink-soft); }
html.x3-lux:not(.x3-ivory) :is(.step, .tariff-group, .cmp-chip, .cmp-row, .doc-card, .gallery-slot, .guide-map-card, .blog-card, .review-card, .review-form, .partner-benefit, .partner-form-card, .article-card){ border-color:var(--line); }
html.x3-lux body{ background:var(--paper); color:var(--ink); }
html.x3-lux:not(.x3-ivory) body::before{ background:radial-gradient(circle at 50% 50%, rgba(205,166,91,.20) 0%, rgba(205,166,91,0) 68%); opacity:.5; }
html.x3-lux:not(.x3-ivory) body::after{ background:radial-gradient(circle at 50% 50%, rgba(30,122,114,.28) 0%, rgba(30,122,114,0) 68%); opacity:.5; }
html.x3-lux .tile-band{ height:3px; background:linear-gradient(90deg, rgba(205,166,91,0), #CDA65B 30%, #CDA65B 70%, rgba(205,166,91,0)); }

/* surfaces that were white cards */
html.x3-lux:not(.x3-ivory) :is(.assure-strip, .chat-panel, #cookie-banner, .cm-box, #cb-toast, .nav-more-dropdown, .lang-dropdown, .cs-panel, .cs-head){ background:#13263A; }
html.x3-lux:not(.x3-ivory) .nav-more-dropdown a.active{ background:rgba(205,166,91,.12); }
html.x3-lux:not(.x3-ivory) .cs-trigger:hover{ border-color:rgba(205,166,91,.6); background:#13263A; }
html.x3-lux:not(.x3-ivory) .cs-trigger:focus-visible,
html.x3-lux:not(.x3-ivory) .cs.is-open .cs-trigger{ border-color:#CDA65B; background:#13263A; box-shadow:0 0 0 4px rgba(205,166,91,.16); }
html.x3-lux:not(.x3-ivory) .cs-ico{ background:rgba(205,166,91,.14); }
html.x3-lux:not(.x3-ivory) .cs-option.active{ background:rgba(255,255,255,.07); }
html.x3-lux:not(.x3-ivory) .cs-option[aria-selected="true"] .cs-ico svg{ stroke:#0B1622; }
html.x3-lux:not(.x3-ivory) .cs-option[aria-selected="true"] .cs-meta{ color:#EBCB8B; }
html.x3-lux:not(.x3-ivory) .cs-panel::-webkit-scrollbar-thumb{ background:rgba(205,166,91,.4); border-color:#13263A; }
html.x3-lux:not(.x3-ivory) em{ color:#DDBB78; }

/* ---------- Estimator section ---------- */
html.x3-lux #page-home .hero{ position:relative; isolation:isolate; padding:104px 0 76px; overflow-x:clip; }
/* the arcade again, as a drawing behind the estimator */
html.x3-lux #page-home .hero::before{
  content:""; position:absolute; z-index:-1; top:0; bottom:0; pointer-events:none;
  right:max(-60px, calc((100vw - 1180px) / 2 - 150px)); width:min(820px, 76vw); opacity:.6;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 760' fill='none' stroke='%23CDA65B'%3E%3Cpath d='M40 760V400a360 360 0 0 1 720 0v360' stroke-width='2'/%3E%3Cpath d='M95 760V400a305 305 0 0 1 610 0v360' stroke-opacity='.7'/%3E%3Cpath d='M150 760V400a250 250 0 0 1 500 0v360' stroke-opacity='.55'/%3E%3Cpath d='M205 760V400a195 195 0 0 1 390 0v360' stroke-opacity='.42'/%3E%3Cpath d='M260 760V400a140 140 0 0 1 280 0v360' stroke-opacity='.3'/%3E%3Cpath d='M315 760V400a85 85 0 0 1 170 0v360' stroke-opacity='.2'/%3E%3C/svg%3E") center bottom / auto 100% no-repeat;
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0), #000 26%); mask-image:linear-gradient(180deg, rgba(0,0,0,0), #000 26%);
}
html.x3-lux #page-home .hero .eyebrow{ display:flex; align-items:center; gap:14px; margin-bottom:20px; font-weight:500; color:var(--lx-gold); }
html.x3-lux #page-home .hero .eyebrow::before{ content:""; width:44px; height:1px; background:var(--lx-gold); }
html.x3-lux #page-home .hero h1{ letter-spacing:-.015em; }
html.x3-lux #page-home .hero h1 em{ color:var(--lx-gold); }
html.x3-lux #page-home .hero .lead{ line-height:1.6; }
html.x3-lux #page-home .hero .trust-item .dot{ background:var(--lx-gold); }
html.x3-lux #page-home .pass-stage .pass{ border:1px solid var(--lx-rule); border-radius:16px; }
html.x3-lux:not(.x3-ivory) #page-home .pass-stage .pass{
  background:linear-gradient(180deg, #1C3349 0%, #101E2D 100%);
  box-shadow:0 60px 100px -44px rgba(0,0,0,.8), 0 0 0 1px rgba(205,166,91,.10), 0 0 90px -30px rgba(205,166,91,.35);
}
html.x3-lux:not(.x3-ivory) #page-home .pass-stage::before{ background:radial-gradient(60% 55% at 50% 50%, rgba(205,166,91,.18), rgba(205,166,91,0) 70%); }
html.x3-lux:not(.x3-ivory) .pass-tag{ background:rgba(205,166,91,.14); }
html.x3-lux:not(.x3-ivory) .pass-stub{ background:rgba(8,16,25,.55); }
html.x3-lux:not(.x3-ivory) .est-scope{ background:rgba(255,255,255,.05); }
html.x3-lux:not(.x3-ivory) .stub-value{ color:#EBCB8B; }
html.x3-lux .pass-title{ font-weight:500; font-size:1.3rem; }

/* ---------- Clinic photo in an arched window ---------- */
html.x3-lux #page-home .clinic-stage{ padding-top:34px; padding-bottom:30px; }
html.x3-lux #page-home .clinic-stage .clinic-scene{
  max-width:760px; aspect-ratio:4 / 3.15; margin:0 auto; border-radius:9999px 9999px 0 0;
  border:1px solid #CDA65B; outline:1px solid var(--lx-rule); outline-offset:16px;
}
html.x3-lux #page-home .clinic-scene picture{ display:block; height:100%; }
html.x3-lux #page-home .clinic-scene img{ height:100%; object-fit:cover; }

/* ---------- Strip, quote form, footer ---------- */
html.x3-lux .assure-strip{ border-color:var(--lx-rule); margin-top:64px; padding:34px 0; }
html.x3-lux .assure-item{ font-weight:400; font-size:.9rem; }
html.x3-lux .icon-medallion{ background:none; border:1px solid var(--lx-rule); }
html.x3-lux:not(.x3-ivory) .quote-section{ background:#0F1E2D; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
html.x3-lux:not(.x3-ivory) .quote-form{ border:1px solid var(--line); }
html.x3-lux:not(.x3-ivory) .form-success, html.x3-lux:not(.x3-ivory) .review-thanks{ background:rgba(205,166,91,.14); }
html.x3-lux:not(.x3-ivory) footer{ --paper:#F6F0E2; background:#070F18; border-top:1px solid var(--line); }
html.x3-lux:not(.x3-ivory) .chat-head{ background:#0B1622; color:#F6F0E2; border-bottom:1px solid var(--line); }
html.x3-lux:not(.x3-ivory) .chat-head button{ color:#F6F0E2; }
html.x3-lux:not(.x3-ivory) .chat-bubble.user{ color:#0B1622; }

@media (max-width:1080px){
  html.x3-lux #page-home .hero{ padding:64px 0 48px; }
  html.x3-lux #page-home .hero::before{ display:none; }
  html.x3-lux #page-home .clinic-stage .clinic-scene{ outline-offset:10px; }
}

/* ============================================================
   Clinic hall look (html.x3-hall, drawn by js/hall3d.js): the same page
   style in its ivory tone. Over a bright, detailed room the headline and
   the menu need their own backing, so each sits on a pale panel.
   ============================================================ */
html.x3-hall .x3-intro::before{ display:none; }
/* a camera's soft darkening toward the corners */
html.x3-hall .x3-pin::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 46%, rgba(30,18,6,0) 55%, rgba(30,18,6,.34) 100%);
}
html.x3-hall .x3-note{
  max-width:560px; padding:36px 40px 38px; border-radius:18px;
  background:rgba(255,253,248,.94); border:1px solid rgba(176,137,60,.35);
  box-shadow:0 40px 70px -36px rgba(40,26,10,.55);
}
html.x3-hall .x3-title{ font-size:clamp(2.5rem, 4.6vw, 4.3rem); }
html.x3-hall .x3-lead{ margin-top:20px; font-size:1.05rem; }
html.x3-hall .x3-cta{ margin-top:26px; }
/* the menu becomes one bar along the bottom, clear of the signs */
html.x3-hall .x3-menu{
  left:var(--x3-pad); right:max(var(--x3-pad), 96px); bottom:22px; min-width:0;
  flex-direction:row; align-items:center; gap:22px; padding:11px 12px 11px 22px; border-radius:14px;
  background:rgba(255,253,248,.95); border:1px solid rgba(176,137,60,.35);
  box-shadow:0 22px 40px -24px rgba(40,26,10,.55);
}
html.x3-hall .x3-menu p{ margin:0 6px 0 0; font-size:1.05rem; white-space:nowrap; }
html.x3-hall .x3-menu a{ padding:6px 0; border-top:0; white-space:nowrap; }
html.x3-hall .x3-menu a:hover{ padding-inline-start:0; }
html.x3-hall .x3-menu .x3-ask{ margin:0 0 0 auto; padding:11px 20px; }
html.x3-hall .x3-menu .x3-ask:hover{ padding-inline-start:20px; }
html.x3-hall .x3-now, html.x3-hall .x3-hint{
  bottom:92px; padding:8px 16px; border-radius:999px;
  background:rgba(255,253,248,.92); border:1px solid rgba(176,137,60,.3);
}
@media (max-width:1180px){
  html.x3-hall .x3-menu a:not(.x3-ask):nth-of-type(n+4){ display:none; }
}
@media (max-width:900px){
  html.x3-hall .x3-note{ padding:24px 22px 26px; }
  html.x3-hall .x3-menu a:not(.x3-ask){ display:none; }
}
@media (max-width:700px){
  html.x3-hall .x3-now, html.x3-hall .x3-hint{ bottom:96px; }
}
/* navy page tone: the logo and name are cream and gold, and the cards in the
   hall are navy with a gold edge and cream lettering */
/* The main logo is the navy and bronze-gold of the name on the reception wall.
   Navy letters need a pale bar behind them, so the top bar goes back to cream
   here; the footer is dark, so its logo is the same pair in cream and gold. */
html.x3-photo:not(.x3-ivory){ --logo-green-onDark:#F6F0E2; --logo-orange-onDark:#DDBB78; }
html.x3-photo:not(.x3-ivory) header{
  color-scheme:light;
  --paper:#FBF7EE; --paper-deep:#F1E9D6; --ink:#142433; --ink-soft:#566371; --line:rgba(176,137,60,.34); --turquoise-deep:#8C6A22;
  --logo-green:#12263A; --logo-orange:#BF8A1E; --white:#FFFFFF;
  background:rgba(255,253,248,.96); border-bottom-color:rgba(176,137,60,.34);
}
/* "enzo" as polished gold: bright along the top of the letters, deeper at their feet */
html.x3-photo:not(.x3-ivory) header .brand-nzo{
  background:linear-gradient(180deg, #DDAA3C 18%, #C08A1E 52%, #9C6C12 86%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#BF8A1E;
}
html.x3-photo:not(.x3-ivory) .nav-links-desktop a,
html.x3-photo:not(.x3-ivory) .nav-more-btn{ color:var(--ink-soft); }
html.x3-photo:not(.x3-ivory) .nav-links-desktop a:hover,
html.x3-photo:not(.x3-ivory) .nav-more-btn:hover{ color:var(--ink); }
html.x3-photo:not(.x3-ivory) .nav-links-desktop a.active{ color:#8C6A22; }
html.x3-photo:not(.x3-ivory) header .lang-btn{ background:#fff; border-color:rgba(176,137,60,.4); color:var(--ink); }
html.x3-photo:not(.x3-ivory) header .menu-btn{ border-color:rgba(20,36,51,.25); }
html.x3-photo:not(.x3-ivory) header .menu-btn span{ background:var(--ink); }
html.x3-photo:not(.x3-ivory) header :is(.nav-more-dropdown, .lang-dropdown){ background:#fff !important; }   /* the navy rule for these is written with an id in its list, so it outranks this one without the flag */
html.x3-photo:not(.x3-ivory) header .mobile-panel{ border-top-color:rgba(176,137,60,.3); }
html.x3-photo:not(.x3-ivory) header .mobile-panel a{ color:var(--ink); border-bottom-color:rgba(176,137,60,.25); }
html.x3-photo:not(.x3-ivory) .x3-sign-face{ background:linear-gradient(180deg, #22405A 0%, #152C43 45%, #0B1A29 100%); border-color:#D9B56C; }
html.x3-photo:not(.x3-ivory) .x3-sign-tag,
html.x3-photo:not(.x3-ivory) .x3-sign small{ color:#DDBB78; }
html.x3-photo:not(.x3-ivory) .x3-sign strong{ color:#FFFAEE; }
html.x3-photo:not(.x3-ivory) .x3-sign i{ background:#DDBB78; }
html.x3-photo:not(.x3-ivory) .x3-sign b{ color:#F6D48B; }
html.x3-photo:not(.x3-ivory) .x3-sign p{ color:rgba(251,246,234,.82); }
html.x3-photo:not(.x3-ivory) .x3-wallsign svg,
html.x3-photo:not(.x3-ivory) .x3-wallsign b{ color:#12263A; }
html.x3-photo:not(.x3-ivory) .x3-wallsign svg .tick{ stroke:#8A6118; }
html.x3-photo:not(.x3-ivory) .x3-wallsign em{ color:#8A6118; }
/* in the navy page tone the panels over the hall are navy too, with a gold edge */
html.x3-hall:not(.x3-ivory) .x3-note,
html.x3-hall:not(.x3-ivory) .x3-menu,
html.x3-hall:not(.x3-ivory) .x3-now,
html.x3-hall:not(.x3-ivory) .x3-hint{
  background:rgba(11,22,34,.93); border-color:rgba(221,187,120,.5);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7);
}
/* a trace of film grain over the hall, as a camera would leave */
html.x3-hall .x3-pin::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.09;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .45  0 0 0 0 .4  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   Photo hall test (html.x3-photo, js/photohall.js): the hallway is a
   photograph-quality picture pushed in as the visitor scrolls, and the
   signs are ordinary page elements placed in perspective over it.
   ============================================================ */
html.x3-photo .x3-canvas{ display:none; }
html.x3-photo .x3-pin{ background:#C9A77C; }
/* phones: languages with longer words need the room, so the opening panel is set
   a little tighter and the "scroll" hint is left out */
@media (max-width:700px){
  html.x3-photo .x3-hint{ display:none; }
  html.x3-photo .x3-note{ padding:20px 20px 22px; }
  html.x3-photo .x3-kicker{ margin-bottom:14px; font-size:.84rem; }
  html.x3-photo .x3-title{ font-size:clamp(2rem, 9vw, 2.5rem); }
  html.x3-photo .x3-lead{ margin-top:14px; font-size:.94rem; line-height:1.5; }
  html.x3-photo .x3-cta{ margin-top:18px; gap:10px; }
  html.x3-photo .x3-now{ max-width:calc(100vw - 108px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}
/* a longer walk than the other looks: more scrolling between one card and the next */
html.x3-photo.x3-on .x3{ height:600vh; }
@media (max-width:700px){ html.x3-photo.x3-on .x3{ height:540vh; } }
.x3-photo-layer{ position:absolute; inset:0; background:center / cover no-repeat; will-change:transform; }
.x3-film-layer{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; will-change:transform; }
html.x3-film-ready .x3-film-layer{ opacity:1; }   /* kept playing underneath; the canvas above shows its frames */
html.x3-film-ready .x3-photo-layer{ visibility:hidden; }
.x3-signs{ position:absolute; inset:0; z-index:0; isolation:isolate; overflow:hidden; pointer-events:none; }
.x3-film-screen{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; will-change:transform; }
/* the single surface the film and the cards are painted on together */
.x3-gl{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.x3-signs.x3-measure{ visibility:hidden; }   /* cards are kept only to read their layout from */
.x3-sign{
  position:absolute; left:0; top:0; width:396px; height:626px; display:none; transform-origin:50% 100%;
  will-change:transform, opacity;   /* drawn once, then only moved: keeps scrolling smooth */
}
.x3-rest .x3-sign{ will-change:auto; }   /* standing still: redraw at full sharpness */
/* the slab itself, turned a little toward the middle of the hall; it has a
   real side, so its thickness shows */
.x3-sign-body{ position:absolute; inset:0; transform-origin:50% 100%; transform-style:preserve-3d; }
.x3-sign.on-left .x3-sign-body{ transform:perspective(1400px) rotateY(17deg); }
.x3-sign.on-right .x3-sign-body{ transform:perspective(1400px) rotateY(-17deg); }
.x3-sign-side{
  position:absolute; top:196px; bottom:26px; width:34px;
  background:linear-gradient(90deg, #3A2A12 0%, #8A6C3A 50%, #D2B070 100%);
}
.x3-sign.on-left .x3-sign-side{ left:0; transform-origin:0 50%; transform:rotateY(90deg); }
.x3-sign.on-right .x3-sign-side{ right:0; transform-origin:100% 50%; transform:rotateY(-90deg); background:linear-gradient(270deg, #3A2A12 0%, #8A6C3A 50%, #D2B070 100%); }
/* the face: the cream lit card from the first 3D hall, with its bronze edge */
.x3-sign-face{
  position:absolute; inset:0 0 26px 0; overflow:hidden; border-radius:198px 198px 6px 6px;
  background:linear-gradient(180deg, #FFFFFF 0%, #FDF9F0 45%, #F6EEDF 100%); border:6px solid #8A6A36;
  box-shadow:0 0 0 1px rgba(50,32,10,.5), 0 0 50px rgba(255,240,210,.4);
  color:#142433;
}
.x3-sign.on-left .x3-sign-face{ border-color:#A98A52 #7A5D30 #6A4F26 #B99A60; }
.x3-sign.on-right .x3-sign-face{ border-color:#A98A52 #6A4F26 #6A4F26 #B99A60; }
/* daylight from the windows: a soft sheen, and a little shade toward the far side and the foot */
.x3-sign-face::before{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    linear-gradient(100deg, rgba(255,244,222,.20) 0%, rgba(255,244,222,0) 36%, rgba(84,52,16,.12) 100%),
    linear-gradient(180deg, rgba(84,52,16,0) 60%, rgba(84,52,16,.13) 100%);
}
.x3-sign-face::after{ content:""; position:absolute; inset:11px; border:1px solid rgba(176,137,60,.6); border-radius:182px 182px 2px 2px; pointer-events:none; }
.x3-sign-text{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 32px 26px; }
.x3-sign-mark{ display:none; }
.x3-sign-fan{
  position:absolute; left:0; right:0; top:0; height:192px;
  background:repeating-radial-gradient(circle at 50% 100%, rgba(176,137,60,0) 0 20px, rgba(176,137,60,.36) 20px 21.2px);
  -webkit-mask-image:linear-gradient(180deg, #000 55%, rgba(0,0,0,.25)); mask-image:linear-gradient(180deg, #000 55%, rgba(0,0,0,.25));
}
.x3-sign-photo{
  position:absolute; left:0; top:0; width:100%; height:48%; object-fit:cover;
  -webkit-mask-image:linear-gradient(180deg, #000 62%, rgba(0,0,0,0)); mask-image:linear-gradient(180deg, #000 62%, rgba(0,0,0,0));
}
.x3-sign-tag{ position:relative; margin-top:236px; font-size:16px; font-weight:500; color:#8C6A22; }
.x3-sign.has-photo .x3-sign-tag{ margin-top:270px; }
.x3-sign strong{ position:relative; margin-top:16px; font-family:var(--font-serif); font-size:43px; font-weight:500; line-height:1.08; letter-spacing:-.01em; color:#142433; }
.x3-sign i{ position:relative; width:48px; height:2px; margin:17px 0 15px; background:#B0893C; }
.x3-sign b{ position:relative; font-family:var(--font-serif); font-size:33px; font-weight:500; color:#C1503F; }
.x3-sign p{ position:relative; margin:13px 0 0; font-size:16px; line-height:1.45; color:#566371; }
.x3-sign small{ position:absolute; left:0; right:0; bottom:22px; font-size:13px; font-weight:500; color:#8C6A22; }
.x3-sign-sheen, .x3-sign-halo{ display:none; }
/* a heavy bronze plinth, wider than the slab: its top catches the light, its
   face is in shade */
.x3-sign-foot{
  position:absolute; left:-7%; right:-7%; bottom:0; height:30px; border-radius:2px;
  background:linear-gradient(180deg, #C8A869 0%, #B08D50 22%, #6E5430 24%, #54401F 70%, #33260F 100%);
  box-shadow:0 2px 3px rgba(18,10,2,.8);
}
/* on the floor: the dark patch right under the plinth, the longer shadow thrown
   away from the windows, and the gold of the lit edge in the polish */
.x3-sign-shadow{
  position:absolute; left:-16%; bottom:-46px; width:200%; height:96px; pointer-events:none; filter:blur(5px);
  background:
    radial-gradient(ellipse 33% 20% at 33% 47%, rgba(12,6,0,.95), rgba(12,6,0,0) 100%),
    radial-gradient(ellipse 50% 44% at 47% 54%, rgba(30,16,3,.7), rgba(30,16,3,0) 100%);
}
.x3-sign-glow{
  position:absolute; left:0; right:0; top:100%; height:260px; margin-top:-4px; pointer-events:none; filter:blur(8px);
  background:linear-gradient(180deg, rgba(255,248,232,.42), rgba(255,248,232,.12) 50%, rgba(255,248,232,0));
  -webkit-mask-image:radial-gradient(ellipse 50% 100% at 50% 0, #000 30%, rgba(0,0,0,0) 100%); mask-image:radial-gradient(ellipse 50% 100% at 50% 0, #000 30%, rgba(0,0,0,0) 100%);
}
@media (prefers-reduced-motion: reduce){
  .x3-sign.is-read .x3-sign-sheen, .x3-sign.is-read .x3-sign-halo{ animation:none; }
}

/* the Smilenzo name on the wall behind reception: raised bronze-edged letters
   with a soft light behind them, a touch out of focus like the film around it */
.x3-wallsign{
  position:absolute; left:0; top:0; width:520px; height:150px; z-index:1; will-change:transform;
  transform:translate3d(-2000px,0,0);   /* out of sight until the script has placed it on the wall */
  display:flex; align-items:center; justify-content:center; gap:22px;
  font-family:var(--font-brand); font-size:104px; font-weight:600; line-height:1; white-space:nowrap;
  filter:blur(1.1px) drop-shadow(0 5px 3px rgba(60,36,8,.55)) drop-shadow(0 0 18px rgba(255,238,200,.85));
}
.x3-wallsign svg{ width:118px; height:118px; flex:none; color:#235C3D; }
.x3-wallsign svg .tick{ stroke:#A9521F; }
.x3-wallsign b{ font-weight:600; color:#235C3D; }
.x3-wallsign em{ font-style:normal; color:#A9521F; }
.x3-wallsign i{
  font-style:normal; background:linear-gradient(135deg, #235C3D 50%, #A9521F 50%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#235C3D;
}


/* ============================================================
   Cards on the wall (html.x3-wallmode): framed panels fixed flat to the
   wood wall, one after another. The script stretches each one onto its
   four corners on the wall, and swings the one the visitor has reached
   out on its hinge.
   ============================================================ */
.x3-wallcard{
  position:absolute; left:0; top:0; width:300px; height:640px; display:none; overflow:hidden;
  transform-origin:0 0; will-change:transform;
  flex-direction:column; align-items:center; text-align:center; padding:0 22px 28px; color:#FBF6EA;
  border-radius:150px 150px 8px 8px; border:6px solid #C9A45C;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(74,118,150,.55), rgba(74,118,150,0) 70%),
    linear-gradient(180deg, #1D3850 0%, #132A40 55%, #0B1A29 100%);
  box-shadow:0 0 0 2px rgba(40,24,6,.75);
}
.x3-wallcard::after{ content:""; position:absolute; inset:10px; border:1px solid rgba(240,208,142,.5); border-radius:136px 136px 3px 3px; pointer-events:none; }
.x3-wallcard.is-open{ border-color:#F3D699; }
.x3-wallcard-fan{
  position:absolute; left:0; right:0; top:0; height:146px;
  background:repeating-radial-gradient(circle at 50% 100%, rgba(240,208,142,0) 0 17px, rgba(240,208,142,.42) 17px 18.4px);
  -webkit-mask-image:linear-gradient(180deg, #000 50%, rgba(0,0,0,.2)); mask-image:linear-gradient(180deg, #000 50%, rgba(0,0,0,.2));
}
.x3-wallcard-photo{
  position:absolute; left:0; top:0; width:100%; height:44%; object-fit:cover;
  -webkit-mask-image:linear-gradient(180deg, #000 58%, rgba(0,0,0,0)); mask-image:linear-gradient(180deg, #000 58%, rgba(0,0,0,0));
}
.x3-wallcard-tag{
  position:relative; margin-top:186px; padding:6px 15px; border-radius:999px;
  font-size:15px; font-weight:600; color:#12263A; background:linear-gradient(180deg, #F3D699, #D9B56C);
}
.x3-wallcard.has-photo .x3-wallcard-tag{ margin-top:268px; }
.x3-wallcard strong{ position:relative; margin-top:20px; font-family:var(--font-serif); font-size:38px; font-weight:600; line-height:1.08; letter-spacing:-.012em; color:#FFFAEE; text-shadow:0 2px 10px rgba(0,0,0,.45); }
.x3-wallcard i{ position:relative; width:50px; height:2px; margin:20px 0 18px; background:linear-gradient(90deg, rgba(240,208,142,0), #F0D08E, rgba(240,208,142,0)); }
.x3-wallcard b{ position:relative; font-family:var(--font-serif); font-size:31px; font-weight:600; color:#F6D48B; white-space:nowrap; text-shadow:0 0 20px rgba(246,212,139,.45); }
.x3-wallcard p{ position:relative; margin:16px 0 0; font-size:15.5px; line-height:1.45; color:rgba(251,246,234,.8); }
.x3-wallcard small{ position:absolute; left:0; right:0; bottom:22px; font-size:13px; font-weight:500; color:rgba(240,208,142,.85); }
.x3-wallcard-shade{ position:absolute; inset:0; z-index:5; background:#1A0F04; opacity:.34; pointer-events:none; will-change:opacity; }

/* ============================================================
   Smoother running. These change nothing a visitor can see:
   - the top bar is all but solid, so blurring whatever passes behind it (the
     moving hallway, most of all) was effort for nothing;
   - the strip of assurances is solid in this look, so the same goes for it;
   - the two soft glows behind the page are already soft-edged pictures, so
     blurring them a second time only used up memory.
   ============================================================ */
html.x3-photo header{ -webkit-backdrop-filter:none; backdrop-filter:none; }
html.x3-lux:not(.x3-ivory) .assure-strip{ -webkit-backdrop-filter:none; backdrop-filter:none; }
html.x3-lux:not(.x3-ivory) body::before, html.x3-lux:not(.x3-ivory) body::after{ filter:none; }

/* Touch screens: the hallway takes each swipe as one step to the next card
   (js/photohall.js), so the browser's own scrolling is switched off on it. */
html.x3-touchstep .x3-pin{ touch-action:none; }