/* Nada Elmasry — public site look (from the Claude Design comp "Nada Elmasry Home").
   Colours and fonts come from the design system; nada.css still styles the booking form and the admin. */
:root {
  --ne-ink: #0e0b08; --ne-ink2: #1a1510; --ne-cream: #f6eee3; --ne-gold: #c9a35c; --ne-gold-dk: #8a6a2f; --ne-gold-md: #a07c3a;
  --ne-text-d: #cbbfae; --ne-text-l: #4a3d31; --ne-brown: #2a211a;
  --ne-serif: "Amiri", "Traditional Arabic", serif; --ne-hand: "Ruwudu", "Amiri", serif; --ne-latin: "Bodoni Moda", "Didot", Georgia, serif;
  --ne-pad-x: clamp(20px, 6vw, 96px);
}
body { background: var(--ne-ink); }
body * { -webkit-font-smoothing: antialiased; }

/* Header */
.ne-head { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 12px clamp(16px, 4vw, 56px); background: rgba(14, 11, 8, .78); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(201, 163, 92, .22); color: var(--ne-cream); }
.ne-brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.ne-brand img { width: 46px; height: 46px; }
.ne-brand span { display: flex; flex-direction: column; gap: 4px; }
.ne-brand b { font: 500 13px/1 var(--ne-latin); letter-spacing: .34em; }
.ne-brand small { font-size: 11.5px; color: var(--ne-gold); }
.ne-nav { display: flex; gap: 36px; font-size: 14.5px; }
.ne-nav a { color: #d9cdbb; text-decoration: none; transition: color .2s ease; }
.ne-nav a:hover { color: var(--ne-gold); }
.ne-head-cta { height: 46px; padding: 0 24px; display: flex; align-items: center; border: 1px solid var(--ne-gold); color: var(--ne-cream); font-size: 14.5px; font-weight: 500; border-radius: 2px; text-decoration: none; transition: background .2s ease, color .2s ease; }
.ne-head-cta:hover { background: var(--ne-gold); color: var(--ne-ink); }
.b-line svg, .b-text svg, .ne-bar svg { width: 18px; height: 18px; }
@media (max-width: 899px) { .ne-nav, .ne-head-cta { display: none; } }

/* Sections menu (phones and small tablets) */
.ne-menu-btn { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border: 1px solid rgba(201, 163, 92, .6); border-radius: 999px;
  background: none; color: var(--ne-cream); font: 500 14.5px var(--font-sans); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .25s ease, border-color .25s ease; }
.ne-menu-btn[aria-expanded="true"] { background: rgba(201, 163, 92, .14); border-color: var(--ne-gold); }
.ne-menu-ico { position: relative; width: 18px; height: 12px; }
.ne-menu-ico i { position: absolute; right: 0; height: 1.5px; border-radius: 2px; background: var(--ne-gold); transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .2s, width .3s; }
.ne-menu-ico i:nth-child(1) { top: 0; width: 18px; } .ne-menu-ico i:nth-child(2) { top: 5px; width: 12px; } .ne-menu-ico i:nth-child(3) { top: 10px; width: 16px; }
.ne-menu-btn[aria-expanded="true"] .ne-menu-ico i:nth-child(1) { width: 18px; transform: translateY(5px) rotate(45deg); }
.ne-menu-btn[aria-expanded="true"] .ne-menu-ico i:nth-child(2) { opacity: 0; }
.ne-menu-btn[aria-expanded="true"] .ne-menu-ico i:nth-child(3) { width: 18px; transform: translateY(-5px) rotate(-45deg); }
.ne-menu { position: absolute; top: 100%; inset-inline: 0; display: flex; flex-direction: column; padding: 10px clamp(16px, 4vw, 56px) 22px; max-height: calc(100vh - 70px); overflow-y: auto;
  background: rgba(14, 11, 8, .99); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(201, 163, 92, .3); box-shadow: 0 24px 50px rgba(0, 0, 0, .5);
  transform-origin: top; animation: ne-menu-in .35s cubic-bezier(.2, .8, .2, 1); }
.ne-menu[hidden] { display: none; }
.ne-menu a:not(.ne-menu-book) { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px; border-bottom: 1px solid rgba(201, 163, 92, .14);
  color: var(--ne-cream); text-decoration: none; font: 700 22px/1.4 var(--ne-serif); animation: ne-menu-item .45s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 40ms + 60ms); }
.ne-menu a:not(.ne-menu-book)::after { content: "←"; font: 400 16px var(--font-sans); color: var(--ne-gold); opacity: .6; transition: transform .3s ease, opacity .3s; }
.ne-menu a:not(.ne-menu-book):active::after, .ne-menu a:not(.ne-menu-book):hover::after { transform: translateX(-6px); opacity: 1; }
.ne-menu-book { margin-top: 18px; height: 52px; text-decoration: none; animation: ne-menu-item .45s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 40ms + 60ms); }
@keyframes ne-menu-in { from { opacity: 0; transform: scaleY(.96); } }
@keyframes ne-menu-item { from { opacity: 0; transform: translateY(-8px); } }
@media (min-width: 900px) { .ne-menu, .ne-menu-btn { display: none !important; } }
/* Narrow phones: keep the brand on one line next to the menu button */
@media (max-width: 420px) { .ne-brand b { white-space: nowrap; letter-spacing: .2em; font-size: 12px; } .ne-brand img { width: 40px; height: 40px; } .ne-head { gap: 12px; } }
@media (prefers-reduced-motion: reduce) { .ne-menu, .ne-menu a, .ne-menu-ico i { animation: none !important; transition: none !important; } }

/* Mobile bottom bar */
.ne-bar { position: fixed; bottom: 10px; left: 10px; right: 10px; z-index: 40; display: none; gap: 8px; padding: 7px;
  background: rgba(14, 11, 8, .88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(201, 163, 92, .4);
  border-radius: 4px; box-shadow: 0 12px 40px rgba(0, 0, 0, .5); }
.ne-bar a { height: 50px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 2px; text-decoration: none; }
.ne-bar-book { flex: 1; background: var(--ne-cream); color: var(--ne-ink); font-weight: 600; }
.ne-bar-wa { width: 116px; border: 1px solid rgba(201, 163, 92, .6); color: var(--ne-cream); }
@media (max-width: 899px) { .ne-bar { display: flex; } }

.ne-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 24px var(--ne-pad-x) 100px;
  border-top: 1px solid rgba(201, 163, 92, .2); color: #9c8f7e; font-size: 13px; }
.ne-foot nav { display: flex; gap: 16px; }
.ne-foot a { color: #d9cdbb; }
.ne-foot-brand, .foot-brand { display: flex; align-items: center; gap: 12px; font: 400 11px var(--ne-latin); letter-spacing: .3em; }
@media (min-width: 900px) { .ne-foot { padding-bottom: 24px; } }

/* Page frame */
.ne { position: relative; overflow: hidden; background: var(--ne-ink); color: var(--ne-cream); font-family: var(--font-sans); }
.ne a { text-decoration: none; }
.strand { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 6; }
.strand path { stroke: var(--ne-gold); stroke-width: 1.2; stroke-linecap: round; opacity: .75; }
.strand circle { fill: var(--ne-gold); }
.sec { position: relative; padding: clamp(48px, 7vw, 110px) var(--ne-pad-x); }
.sec-dark { background: radial-gradient(ellipse 50% 45% at 50% 58%, rgba(201, 163, 92, .07), transparent 70%), var(--ne-ink); }
.sec-dark2 { background: var(--ne-ink2); }
.sec-light { background: var(--ne-cream); color: var(--ne-brown); }
.fade { height: 72px; }
/* Blend between two neighbouring sections, whatever order they are in (--a: colour above, --b: colour below) */
.fade[style*="--a"] { background: linear-gradient(var(--a), color-mix(in srgb, var(--a) 72%, var(--b)) 35%, color-mix(in srgb, var(--a) 22%, var(--b)) 75%, var(--b)); }
.fade-d2c { background: linear-gradient(#0e0b08, #3b3026 35%, #c9bba7 75%, #f6eee3); }
.fade-c2d { background: linear-gradient(#f6eee3, #c9bba7 25%, #3b3026 65%, #0e0b08); }
.fade-c2q { background: linear-gradient(#f6eee3, #c9bba7 25%, #4a3d30 65%, #1a1510); }
#prices + .fade-d2c, .sec-dark2 + .fade-d2c { background: linear-gradient(#1a1510, #3b3026 35%, #c9bba7 75%, #f6eee3); }
.wrapx { max-width: 1240px; margin: 0 auto; }
.center { text-align: center; }
.center-text { text-align: center; margin-inline: auto; }
.narrow { max-width: 900px; margin-inline: auto; }

/* Type */
.kicker { font: 400 11px var(--ne-latin); letter-spacing: .4em; color: var(--ne-gold); }
.sec-light .kicker { color: var(--ne-gold-dk); }
#about .kicker { text-align: right; }
.kicker-line { display: flex; align-items: center; gap: 14px; justify-content: flex-end; font-size: 11.5px; letter-spacing: .38em; }
.kicker-line i { width: 48px; height: 1px; background: var(--ne-gold); }
.ttl { margin: 20px 0 0; font-weight: 400; }
.hand { display: block; font: 700 clamp(70px, 9vw, 130px)/1 var(--ne-hand); color: var(--ne-gold); margin-bottom: -.3em; position: relative; z-index: 1; }
.sec-light .hand { color: var(--ne-gold-md); }
.hero .hand { font-size: clamp(84px, 12vw, 180px); margin-bottom: -.32em; text-shadow: 0 0 40px rgba(201, 163, 92, .25); }
.hand-xl { font-size: clamp(80px, 11vw, 160px); text-shadow: 0 0 50px rgba(214, 150, 70, .35); }
.big { display: block; font: 700 clamp(40px, 5.2vw, 76px)/1.45 var(--ne-serif); text-wrap: balance; }
.hero .big { font-size: clamp(42px, 6.2vw, 94px); }
.big-sm { font-size: clamp(36px, 4.8vw, 70px); line-height: 1.5; }
[data-w] { display: inline-block; }
.lead { margin: clamp(18px, 2.4vw, 28px) 0 0; max-width: 500px; font-size: clamp(16px, 1.35vw, 18.5px); line-height: 1.95; color: var(--ne-text-d); font-weight: 300; }
.body { margin: 22px 0 0; max-width: 520px; font-size: clamp(15.5px, 1.3vw, 18px); line-height: 2; color: var(--ne-text-d); font-weight: 300; }
.sec-light .body { color: var(--ne-text-l); font-weight: 400; }
.rule { display: block; width: 64px; height: 1px; background: var(--ne-gold); margin: 30px 0 0; }
.more { display: inline-flex; gap: 10px; margin-top: 22px; font-size: 15px; font-weight: 500; color: var(--ne-brown); }
.hint { margin: 16px 0 0; text-align: center; font-size: 14px; color: #5a4a3a; }
.hint-dark { color: var(--ne-text-d); margin-top: 40px; }
.hint-dark a { color: var(--ne-gold); text-decoration: underline; text-underline-offset: 4px; }
.gold { color: var(--ne-gold); }

/* Buttons */
.b-solid { height: 56px; padding: 0 34px; display: inline-flex; align-items: center; justify-content: center; background: var(--ne-cream); color: var(--ne-ink);
  font-weight: 600; font-size: 16px; border-radius: 2px; box-shadow: 0 0 0 1px var(--ne-ink), 0 0 0 2px var(--ne-gold); transition: background .2s ease; }
.b-solid:hover { background: #fff; }
.b-xl { height: 72px; min-width: min(100%, 360px); padding: 0 40px; font: 700 21px var(--ne-serif); box-shadow: 0 0 0 1px var(--ne-ink), 0 0 0 2px var(--ne-gold), 0 0 60px rgba(214, 150, 70, .35); }
.b-line { height: 56px; padding: 0 28px; display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(201, 163, 92, .7); color: var(--ne-cream); font-size: 16px; border-radius: 2px; transition: border-color .2s ease, color .2s ease; }
.b-line:hover { border-color: var(--ne-gold); color: var(--ne-gold); }
.scope .b-line { margin-top: 28px; height: 54px; padding: 0 32px; }
.b-dark { align-self: flex-start; height: 48px; padding: 0 22px; display: inline-flex; align-items: center; background: var(--ne-ink); color: var(--ne-cream); font-size: 14.5px; font-weight: 500; border-radius: 2px; transition: color .2s ease; }
.b-dark:hover { color: var(--ne-gold); }
.b-text { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 20px; font-size: 15px; color: var(--ne-cream); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(28px, 3vw, 40px); }
.ne :focus-visible { outline: 2px solid var(--ne-gold); outline-offset: 3px; }

/* Arch frame */
.arch { position: relative; width: min(100%, 470px); aspect-ratio: 3 / 4; margin-inline: auto; padding: 10px; box-sizing: border-box;
  border: 1px solid rgba(201, 163, 92, .75); border-radius: 1000px 1000px 4px 4px; box-shadow: 0 0 90px rgba(201, 163, 92, .16), inset 0 0 40px rgba(201, 163, 92, .06); }
.arch-light { border-color: var(--ne-gold); box-shadow: 0 30px 80px rgba(120, 84, 40, .18); }
.arch-in { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 1000px 1000px 2px 2px; background: var(--ne-ink2); }
.arch-light .arch-in { background: #e6d9c6; }
.arch-media { position: absolute; inset: -9% 0; display: grid; place-items: center; background: radial-gradient(ellipse 70% 55% at 55% 38%, #6a4426 0, #3a2416 42%, #160e09 82%); }
.arch-light .arch-media { background: linear-gradient(170deg, #e9dcc8, #d3c0a4); }
.arch-media img { width: 100%; height: 100%; object-fit: cover; }
.arch-media .arch-mark { width: 38%; height: auto; opacity: .22; object-fit: contain; }
.arch-sheen { position: absolute; top: -10%; bottom: -10%; left: 0; width: 38%; background: linear-gradient(90deg, transparent, rgba(255, 222, 160, .2), transparent);
  transform: translateX(160%) skewX(-16deg); pointer-events: none; }
.arch-cap { position: absolute; bottom: -34px; left: 0; right: 0; text-align: center; font: 400 10.5px var(--ne-latin); letter-spacing: .42em; color: rgba(201, 163, 92, .8); }
.arch-place { width: min(100%, 430px); aspect-ratio: 3 / 4.1; }

/* Hero */
.hero { padding-top: clamp(40px, 7vw, 96px); padding-bottom: clamp(72px, 8vw, 120px); background: radial-gradient(ellipse 55% 60% at 22% 45%, rgba(150, 96, 46, .22), transparent 70%), var(--ne-ink); }
.hero-grid, .split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: clamp(40px, 6vw, 96px); align-items: center; max-width: 1320px; margin: 0 auto; }
.split { max-width: 1240px; gap: clamp(48px, 7vw, 110px); }

/* Lens */
.scope { text-align: center; }
.lens { position: relative; width: min(80vw, 500px); aspect-ratio: 1; margin: clamp(40px, 5vw, 64px) auto 0; }
.lens-ticks { position: absolute; inset: 0; border-radius: 50%; opacity: .8;
  background: repeating-conic-gradient(var(--ne-gold) 0 .6deg, transparent .6deg 6deg);
  -webkit-mask: radial-gradient(closest-side, transparent 93%, #000 93.5%, #000 99%, transparent 99.5%);
  mask: radial-gradient(closest-side, transparent 93%, #000 93.5%, #000 99%, transparent 99.5%); }
.lens-ring { position: absolute; inset: 5%; border-radius: 50%; border: 1px solid var(--ne-gold); box-shadow: 0 0 0 8px rgba(201, 163, 92, .06), 0 0 110px rgba(201, 163, 92, .22); }
.lens-glass { position: absolute; inset: 9%; border-radius: 50%; overflow: hidden; background: var(--ne-ink2); }
.lens-media { position: absolute; inset: 0; transform-origin: center; background: radial-gradient(circle at 46% 42%, #7a5636 0, #3d2818 50%, #150e09 90%); }
.lens-media img { width: 100%; height: 100%; object-fit: cover; }
.lens-strands { position: absolute; inset: 0; opacity: .5;
  background: repeating-linear-gradient(62deg, transparent 0 22px, rgba(246, 238, 227, .16) 22px 23px, transparent 23px 41px),
              repeating-linear-gradient(118deg, transparent 0 34px, rgba(201, 163, 92, .22) 34px 35px, transparent 35px 57px); }
.lens-x, .lens-y { position: absolute; background: rgba(201, 163, 92, .35); }
.lens-x { top: 50%; left: 22%; right: 22%; height: 1px; }
.lens-y { left: 50%; top: 22%; bottom: 22%; width: 1px; }
.scope-points { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-top: clamp(36px, 4vw, 52px); font: 400 clamp(19px, 1.8vw, 24px) var(--ne-serif); }
.scope-points b { color: var(--ne-gold); font-weight: 400; }
.scope .body { max-width: 560px; }

/* Services */
.svc-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 48px; }
.svc-head .ttl { margin: 0; }
.svc-head .body { margin: 0; max-width: 380px; }
.svc { display: flex; gap: clamp(40px, 6vw, 96px); margin-top: clamp(32px, 4vw, 56px); align-items: flex-start; }
.svc-list { flex: 1; min-width: 0; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ne-brown); }
.svc-item { border-bottom: 1px solid rgba(42, 33, 26, .16); }
.svc-row { width: 100%; display: grid; grid-template-columns: clamp(34px, 4vw, 60px) minmax(0, 1fr) 24px; gap: clamp(10px, 2vw, 24px); align-items: center;
  min-height: clamp(72px, 7vw, 104px); padding: 0; background: none; border: 0; cursor: pointer; text-align: right; color: inherit; font: inherit; }
.svc-n { text-align: right; font: 400 clamp(12px, 1vw, 14px) var(--ne-latin); letter-spacing: .12em; color: var(--ne-gold-dk); }
.svc-name { font: 700 clamp(24px, 3.3vw, 48px)/1.45 var(--ne-serif); transition: color .25s ease; }
.svc-arrow { color: var(--ne-gold-dk); font-size: 18px; transition: transform .3s ease; }
.svc-item.is-active .svc-name, .svc-row:hover .svc-name { color: var(--ne-gold-dk); }
.svc-item.is-active .svc-arrow { transform: translateX(-6px); }
.svc-detail { display: none; flex-direction: column; gap: 8px; padding: 0 0 24px; }
.svc-detail p { margin: 0; font-size: 15px; line-height: 1.85; color: var(--ne-text-l); }
.svc-meta { font-size: 13.5px; color: var(--ne-brown); }
.svc-detail .b-dark { margin-top: 6px; }
.svc-item.is-active .svc-detail { display: flex; }
.svc-preview { width: 360px; flex: none; position: sticky; top: 110px; display: flex; flex-direction: column; gap: 18px; }
.svc-preview .arch { width: 100%; padding: 9px; }
.svc-preview-text { display: flex; flex-direction: column; gap: 12px; }
.svc-preview-text p { margin: 0; font-size: 15.5px; line-height: 1.85; color: var(--ne-text-l); }
.svc-preview-text .svc-meta { padding-top: 14px; border-top: 1px solid rgba(201, 163, 92, .6); font-size: 14px; }
.svc-preview-text .b-dark { align-self: stretch; justify-content: center; height: 52px; }
@media (min-width: 900px) { .svc-item.is-active .svc-detail { display: none; } }
@media (max-width: 899px) { .svc-preview { display: none; } }

/* Journey */
.journey { position: relative; margin-top: 64px; }
.journey-wave { position: absolute; top: 0; left: 0; width: 100%; height: 200px; }
.journey-wave path { stroke: var(--ne-gold); stroke-width: 1.2; }
.steps-x { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; text-align: center; }
/* Wide: the dots sit on the wave (centres at y 50 / 150 of its 200px), text starts under it. */
.steps-x { gap: 0; }
.steps-x li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 236px 16px 0; }
.step-dot { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 64px; height: 64px; border-radius: 50%; background: var(--ne-ink); border: 1px solid var(--ne-gold); display: grid; place-items: center; font: 400 18px var(--ne-latin); color: var(--ne-gold); }
.steps-x li:nth-child(even) .step-dot { top: 118px; }
.step-dot { transition: background .5s ease, color .5s ease, box-shadow .5s ease, transform .5s cubic-bezier(.2, 1.4, .4, 1); }
.step-dot.is-on { background: var(--ne-gold); color: var(--ne-ink); }
.step-dot.is-now { box-shadow: 0 0 0 6px rgba(201, 163, 92, .16), 0 0 36px rgba(201, 163, 92, .45); }
.steps-x li:not(:has(.is-on)) b { opacity: .55; }
.steps-x b { transition: opacity .5s ease; }
/* The wave draws itself from step I (right) as the section scrolls; home.js moves the offset */
.journey-wave path { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .2s linear; }
.steps-x b { font: 700 32px/1.4 var(--ne-serif); }
.steps-x p { margin: 0; font-size: 15.5px; line-height: 1.9; color: var(--ne-text-d); font-weight: 300; }
@media (max-width: 899px) {
  .journey { margin-top: 44px; }
  .journey-wave { display: none; }
  .steps-x { grid-template-columns: 1fr; gap: 0; text-align: right; padding-inline-start: 64px; }
  .steps-x::before { content: ""; position: absolute; top: 28px; bottom: 28px; right: 27px; width: 1px; background: var(--ne-gold); }
  .steps-x li { display: block; padding: 0 0 34px; }
  .step-dot, .steps-x li:nth-child(even) .step-dot { top: 0; left: auto; right: -64px; transform: none; width: 56px; height: 56px; font-size: 16px; }
  .steps-x b { font-size: 27px; line-height: 1.5; }
  .steps-x p { margin-top: 4px; font-size: 15px; }
}

/* Before / after */
.wrap-ba { max-width: 1080px; }
.ba { position: relative; height: clamp(440px, 52vw, 600px); margin-top: clamp(32px, 4vw, 52px); border: 1px solid var(--ne-gold); padding: 8px; box-sizing: border-box;
  touch-action: pan-y; user-select: none; cursor: ew-resize; border-radius: 2px; }
.ba-in { position: absolute; inset: 8px; overflow: hidden; }
.ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-before { clip-path: inset(0 0 0 50%); }
.ba-tag { position: absolute; top: 18px; display: flex; flex-direction: column; gap: 2px; color: #fff7ec; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.ba-tag span { font: 400 10.5px var(--ne-latin); letter-spacing: .32em; }
.ba-tag b { font: 700 20px var(--ne-serif); }
.ba-tag-r { right: 20px; align-items: flex-end; }
.ba-tag-l { left: 20px; align-items: flex-start; }
.ba-handle { position: absolute; top: 8px; bottom: 8px; left: 50%; width: 1px; background: var(--ne-gold); box-shadow: 0 0 14px rgba(201, 163, 92, .7); outline: none; }
.ba-handle span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; background: var(--ne-ink);
  border: 1px solid var(--ne-gold); display: grid; place-items: center; color: var(--ne-gold); font: 400 18px var(--ne-latin); }
.ba-handle:focus-visible span { box-shadow: 0 0 0 3px var(--ne-cream), 0 0 0 4px var(--ne-gold); }

/* Prices */
.tabs { display: flex; justify-content: center; gap: 8px; margin: clamp(32px, 4vw, 48px) auto 0; padding: 6px; width: fit-content; border: 1px solid rgba(201, 163, 92, .35); border-radius: 2px; }
.tabs button { min-width: 108px; height: 44px; padding: 0 20px; background: none; border: 0; border-radius: 2px; color: var(--ne-text-d); font: 500 15px var(--font-sans); cursor: pointer; transition: background .25s ease, color .25s ease; }
@media (max-width: 520px) { .tabs { width: 100%; box-sizing: border-box; } .tabs button { flex: 1; min-width: 0; padding: 0 8px; } }
.tabs button[aria-selected="true"] { background: var(--ne-cream); color: var(--ne-ink); }
.tabs button:hover:not([aria-selected="true"]) { color: var(--ne-gold); }
.price-panel { margin-top: clamp(24px, 3vw, 40px); }
.price-group { margin: 40px 0 18px; display: flex; align-items: center; gap: 16px; font: 700 clamp(24px, 2.4vw, 32px)/1.4 var(--ne-serif); color: var(--ne-cream); }
.price-group::after { content: ""; flex: 1; height: 1px; background: linear-gradient(to left, rgba(201, 163, 92, .5), transparent); }
.price-group:first-child { margin-top: 8px; }
.cards-p { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 16px; }
.pcard { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 26px 24px 20px; border: 1px solid rgba(201, 163, 92, .28); border-radius: 2px;
  background: linear-gradient(160deg, rgba(201, 163, 92, .07), transparent 55%), var(--ne-ink); transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease; }
.pcard::before { content: ""; position: absolute; top: -1px; right: 24px; width: 40px; height: 2px; background: var(--ne-gold); transition: width .45s ease; }
.pcard:hover { border-color: rgba(201, 163, 92, .7); transform: translateY(-4px); box-shadow: 0 24px 50px rgba(0, 0, 0, .45), 0 0 40px rgba(201, 163, 92, .08); }
.pcard:hover::before { width: calc(100% - 48px); }
.pcard-top h4 { margin: 0; font: 700 23px/1.5 var(--ne-serif); color: var(--ne-cream); }
.pcard-top span { display: block; margin-top: 2px; font: 400 9.5px var(--ne-latin); letter-spacing: .28em; color: rgba(201, 163, 92, .85); }
.pcard p { margin: 0; font-size: 14px; line-height: 1.85; color: var(--ne-text-d); font-weight: 300; flex: 1; }
.pcard-price { display: flex; align-items: baseline; gap: 8px; color: var(--ne-gold); }
.pcard-price b { font: 500 40px/1 var(--ne-latin); font-variant-numeric: lining-nums tabular-nums; }
.pcard-price small { font-size: 14px; color: var(--ne-text-d); }
.pcard-ask { font: 700 20px var(--ne-serif); }
.pcard-note { font-size: 12.5px; line-height: 1.7; color: #e0c48a; }
.pcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid rgba(201, 163, 92, .2); font-size: 13.5px; color: var(--ne-text-d); }
.pcard-foot span { display: inline-flex; align-items: center; gap: 6px; }
.pcard-foot svg { width: 15px; height: 15px; }
.pcard-foot a { color: var(--ne-cream); font-weight: 500; display: inline-flex; gap: 8px; padding: 8px 0; transition: color .2s ease, gap .2s ease; }
.pcard-foot a:hover { color: var(--ne-gold); gap: 12px; }

/* Testimonials */
.tm { position: relative; max-width: 860px; margin: clamp(32px, 4vw, 52px) auto 0; overflow: hidden; }
.tm-track { display: flex; transition: transform .7s cubic-bezier(.2, .7, .2, 1); touch-action: pan-y; }
.tm-card { flex: 0 0 100%; margin: 0; padding: 0 clamp(8px, 4vw, 48px); box-sizing: border-box; text-align: center; }
.tm-stars { color: var(--ne-gold-md); letter-spacing: .2em; font-size: 15px; }
.tm-stars span { color: rgba(160, 124, 58, .28); }
.tm-card blockquote { margin: 18px 0 0; font: 700 clamp(22px, 2.6vw, 34px)/1.75 var(--ne-serif); color: var(--ne-brown); text-wrap: balance; }
.tm-card figcaption { margin-top: 22px; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.tm-card figcaption b { font-size: 16px; }
.tm-card figcaption span { font-size: 13.5px; color: var(--ne-gold-dk); }
.tm-nav { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 32px; }
.tm-nav button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--ne-gold); background: none; color: var(--ne-brown); font-size: 18px; cursor: pointer; transition: background .2s ease, color .2s ease; }
.tm-nav button:hover { background: var(--ne-brown); color: var(--ne-cream); }
.tm-dots { display: flex; gap: 8px; }
.tm-dots i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--ne-gold-md); transition: background .3s ease, width .3s ease; }
.tm-dots i.on { background: var(--ne-gold-md); width: 24px; border-radius: 4px; }

/* Quote */
.quote { padding-block: clamp(72px, 10vw, 150px); }
/* nada.css has an older .quote card style (rounded, cocoa, margin); the home section is full-bleed */
.sec.quote { margin: 0; border-radius: 0; background: var(--ne-ink2); color: var(--ne-cream); box-shadow: none; }
.quote .center { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.quote-mark { display: flex; align-items: center; gap: 18px; }
.quote-mark i { width: 72px; height: 1px; background: var(--ne-gold); }
.quote-mark img { width: 64px; height: 64px; }
.quote-text { margin: 0; font: 700 clamp(36px, 5.4vw, 80px)/1.55 var(--ne-serif); color: var(--ne-cream); text-wrap: balance; }
.quote-sign { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.quote-sign .hand { font-size: clamp(34px, 3.6vw, 48px); line-height: 1.2; margin: 0; }
.quote-sign span[dir] { font: 400 10.5px var(--ne-latin); letter-spacing: .4em; color: var(--ne-text-d); }

/* Booking */
.booking { padding-top: clamp(64px, 8vw, 120px); padding-bottom: clamp(110px, 8vw, 64px); text-align: center;
  background: radial-gradient(ellipse 60% 40% at 50% 70%, rgba(214, 150, 70, .24), transparent 70%), radial-gradient(ellipse 30% 25% at 18% 30%, rgba(214, 150, 70, .1), transparent 70%),
    radial-gradient(ellipse 30% 25% at 85% 20%, rgba(214, 150, 70, .08), transparent 70%), var(--ne-ink); }
.booking .body { max-width: 480px; }
.booking-gap { height: clamp(140px, 14vw, 180px); }
.booking-cta { display: flex; flex-direction: column; align-items: center; gap: 14px; position: relative; z-index: 7; }
.info { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 24px; max-width: 900px; margin: clamp(48px, 6vw, 72px) auto 0; padding-top: 32px; border-top: 1px solid rgba(201, 163, 92, .35); }
.info div { display: flex; flex-direction: column; gap: 6px; }
.info span { font: 400 10px var(--ne-latin); letter-spacing: .34em; color: var(--ne-gold); }
.info b { font: 700 21px/1.6 var(--ne-serif); }
.info small { font-size: 14px; line-height: 1.8; color: var(--ne-text-d); }
.info-phone { font: 400 21px/1.6 var(--ne-latin); letter-spacing: .06em; color: var(--ne-cream); }
.map-x { display: block; width: 100%; max-width: 900px; height: 300px; margin: 40px auto 0; border: 1px solid rgba(201, 163, 92, .35); border-radius: 2px; filter: grayscale(.5) sepia(.25) contrast(1.05) brightness(.85); }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; max-width: 1240px; margin: clamp(56px, 7vw, 96px) auto 0; padding-top: 20px;
  border-top: 1px solid rgba(246, 238, 227, .08); font-size: 12.5px; color: #9c8f7e; }
.foot nav { display: flex; gap: 16px; }
.foot a { color: #d9cdbb; }

@media (prefers-reduced-motion: reduce) {
  .pcard, .pcard::before, .tm-track, .svc-arrow { transition: none; }
  .pcard:hover { transform: none; }
}

/* Floating WhatsApp pill (bottom left on every page) */
.wa-float { position: fixed; left: 20px; bottom: 20px; z-index: 45; display: flex; align-items: center; gap: 12px; padding: 6px 22px 6px 6px; direction: ltr;
  border-radius: 999px; background: linear-gradient(180deg, #2fdc6e, #1ebe57); color: #fff; text-decoration: none;
  border: 2px solid #0f6b33; box-shadow: 0 0 0 3px rgba(37, 211, 102, .25), 0 12px 30px rgba(0, 0, 0, .45);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s; }
.wa-float::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid #25d366; animation: wa-ring 2.6s ease-out infinite; pointer-events: none; }
.wa-float-ico { position: relative; flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: #fff;
  box-shadow: inset 0 0 0 3px rgba(15, 107, 51, .12), 0 2px 6px rgba(0, 0, 0, .25); }
.wa-float-ico svg { width: 27px; height: 27px; fill: #25d366; }
.wa-float-txt { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; direction: rtl; text-align: right; line-height: 1.25; }
.wa-float-txt b { font-size: 16.5px; font-weight: 700; text-shadow: 0 1px 1px rgba(0, 0, 0, .15); }
.wa-float-txt small { font-size: 12px; font-weight: 500; opacity: .92; }
.wa-float:hover, .wa-float:focus-visible { transform: translateY(-3px); box-shadow: 0 0 0 4px rgba(37, 211, 102, .32), 0 16px 36px rgba(0, 0, 0, .5); }
.wa-float:focus-visible { outline: 2px solid var(--ne-cream); outline-offset: 3px; }
@keyframes wa-ring { 0% { transform: scale(1); opacity: .6; } 70%, 100% { transform: scale(1.12, 1.35); opacity: 0; } }
/* Phones: a bit smaller, above the bottom booking bar; hidden on the booking form (its action bar sits there) */
@media (max-width: 899px) {
  .wa-float { left: 12px; bottom: 84px; gap: 10px; padding: 5px 16px 5px 5px; }
  .wa-float-high { display: none; }
  .wa-float-ico { width: 40px; height: 40px; }
  .wa-float-ico svg { width: 23px; height: 23px; }
  .wa-float-txt b { font-size: 14.5px; }
  .wa-float-txt small { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .wa-float::before { animation: none; opacity: 0; } }
@media (max-width: 767px) { .wa-float { display: none; } }

/* Ask about a service on WhatsApp (services list + price cards) */
.b-ask { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; font-weight: 500; color: var(--ne-brown);
  border-bottom: 1px solid rgba(138, 106, 47, .4); transition: color .2s ease, border-color .2s ease; }
.b-ask svg { width: 17px; height: 17px; color: #1da851; }
.b-ask:hover { color: var(--ne-gold-dk); border-color: var(--ne-gold-dk); }
.svc-preview-text .b-ask { align-self: center; }
.pcard-acts { gap: 14px !important; }
.pcard-foot a.pcard-wa { width: 34px; height: 34px; padding: 0; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(37, 211, 102, .45); color: #25d366;
  transition: background .2s ease, color .2s ease, transform .2s ease; }
.pcard-foot a.pcard-wa svg { width: 17px; height: 17px; }
.pcard-foot a.pcard-wa:hover { background: #25d366; color: #fff; transform: scale(1.06); gap: 0; }

/* ==========================================================================
   Buttons, round two: gold fills, a shine sweep, a moving arrow, a press,
   and a ripple from wherever the finger lands (ripple + magnet in fx.js).
   ========================================================================== */
:root { --b-ease: cubic-bezier(.2, .8, .2, 1); --b-gold: linear-gradient(120deg, #e3c27e, #c9a35c 45%, #a8823f); }

.b-solid, .b-line, .b-dark, .ne-head-cta, .ne-bar-book, .ne-bar-wa, .bk-btn, .bk-btn-ghost, .done .btn {
  position: relative; overflow: hidden; isolation: isolate; -webkit-tap-highlight-color: transparent; user-select: none;
  gap: 10px; transform: translate(var(--mx, 0px), var(--my, 0px));
  transition: transform .4s var(--b-ease), box-shadow .4s var(--b-ease), color .35s ease, border-color .35s ease, background-color .35s ease;
}
/* The fill layer (behind the text) and the shine (over it) */
.b-solid::before, .b-line::before, .b-dark::before, .ne-head-cta::before, .ne-bar-wa::before, .bk-btn-ghost::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--b-gold);
  transform: scaleX(0); transform-origin: right; transition: transform .55s var(--b-ease);
}
.b-solid::after, .b-dark::after, .ne-head-cta::after, .ne-bar-book::after, .bk-btn::after, .done .btn-gold::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .65), transparent);
  transform: translateX(-160%) skewX(-18deg);
}
.b-arr { width: 18px; height: 18px; flex: none; transition: transform .45s var(--b-ease); }

/* Hover (real pointers only, so phones don't get stuck in the hover state) */
@media (hover: hover) {
  .b-solid:hover::before, .b-line:hover::before, .b-dark:hover::before, .ne-head-cta:hover::before, .ne-bar-wa:hover::before, .bk-btn-ghost:hover::before { transform: scaleX(1); transform-origin: left; }
  .b-solid:hover::after, .b-dark:hover::after, .ne-head-cta:hover::after, .bk-btn:hover::after, .done .btn-gold:hover::after { animation: b-shine .9s var(--b-ease); }
  .b-solid:hover, .b-line:hover, .b-dark:hover, .ne-head-cta:hover, .bk-btn:hover, .done .btn:hover {
    transform: translate(var(--mx, 0px), calc(var(--my, 0px) - 3px));
  }
  .b-solid:hover { background: var(--ne-cream); color: var(--ne-ink); box-shadow: 0 0 0 1px var(--ne-ink), 0 0 0 2px var(--ne-gold), 0 14px 34px rgba(201, 163, 92, .35); }
  .b-line:hover, .ne-head-cta:hover { color: var(--ne-ink); border-color: var(--ne-gold); background: transparent; box-shadow: 0 12px 30px rgba(201, 163, 92, .25); }
  .b-dark:hover { color: var(--ne-ink); box-shadow: 0 12px 26px rgba(74, 52, 30, .25); }
  .ne-bar-wa:hover, .bk-btn-ghost:hover { color: var(--ne-ink); background: transparent; }
  .b-solid:hover .b-arr, .b-line:hover .b-arr, .b-dark:hover .b-arr, .ne-head-cta:hover .b-arr { transform: translateX(-6px); }
  .b-line:hover svg:not(.b-arr) { transform: rotate(-8deg) scale(1.1); }
}
.b-line svg:not(.b-arr) { transition: transform .4s var(--b-ease); }

/* Press */
.b-solid:active, .b-line:active, .b-dark:active, .ne-head-cta:active, .ne-bar-book:active, .ne-bar-wa:active, .bk-btn:active, .bk-btn-ghost:active, .done .btn:active {
  transform: translate(var(--mx, 0px), var(--my, 0px)) scale(.965); transition-duration: .12s;
}
/* Keyboard focus */
.b-solid:focus-visible, .b-line:focus-visible, .b-dark:focus-visible, .ne-head-cta:focus-visible, .ne-bar a:focus-visible, .b-text:focus-visible {
  outline: 2px solid var(--ne-gold); outline-offset: 4px;
}

/* The big "book" button breathes and catches the light now and then */
.b-xl { transition: transform .4s var(--b-ease), box-shadow .6s var(--b-ease); animation: b-breathe 3.6s ease-in-out infinite; }
.b-xl::after { animation: b-shine-loop 5s var(--b-ease) 1.2s infinite; }
.b-xl .b-arr { width: 22px; height: 22px; }
@keyframes b-breathe {
  0%, 100% { box-shadow: 0 0 0 1px var(--ne-ink), 0 0 0 2px var(--ne-gold), 0 0 50px rgba(214, 150, 70, .3); }
  50% { box-shadow: 0 0 0 1px var(--ne-ink), 0 0 0 2px var(--ne-gold), 0 0 80px rgba(214, 150, 70, .55); }
}
/* The phone bar's book button shines every few seconds too */
.ne-bar-book { background: var(--ne-cream); }
.ne-bar-book::after { animation: b-shine-loop 5s var(--b-ease) 2s infinite; }
@keyframes b-shine { from { transform: translateX(-160%) skewX(-18deg); } to { transform: translateX(330%) skewX(-18deg); } }
@keyframes b-shine-loop { 0%, 70% { transform: translateX(-160%) skewX(-18deg); } 88%, 100% { transform: translateX(330%) skewX(-18deg); } }

/* Text link: the underline draws itself */
.b-text { position: relative; transition: color .3s ease; }
.b-text::after { content: ""; position: absolute; right: 20px; left: 20px; bottom: 8px; height: 1px; background: var(--ne-gold); transform: scaleX(.25); transform-origin: right; opacity: .6; transition: transform .45s var(--b-ease), opacity .3s; }
@media (hover: hover) { .b-text:hover { color: var(--ne-gold); } .b-text:hover::after { transform: scaleX(1); opacity: 1; } }

/* Price card "book" link and testimonial arrows */
.pcard-foot a:not(.pcard-wa) { position: relative; }
.pcard-foot a:not(.pcard-wa)::after { content: ""; position: absolute; right: 0; left: 0; bottom: 4px; height: 1px; background: var(--ne-gold); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--b-ease); }
@media (hover: hover) { .pcard-foot a:not(.pcard-wa):hover::after { transform: scaleX(1); } }
.tm-nav button { transition: background .3s ease, color .3s ease, transform .3s var(--b-ease); }
@media (hover: hover) { .tm-nav button:hover { transform: scale(1.08); } }
.tm-nav button:active, .tabs button:active { transform: scale(.94); }
.tabs button { transition: background .3s var(--b-ease), color .3s ease, transform .2s var(--b-ease); }

/* Ripple (added by fx.js) */
.b-rip { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255, 255, 255, .55), rgba(201, 163, 92, .25) 60%, transparent 70%);
  transform: translate(-50%, -50%) scale(0); animation: b-rip .65s ease-out forwards; }
.b-line .b-rip, .ne-bar-wa .b-rip, .bk-btn-ghost .b-rip { background: radial-gradient(circle, rgba(201, 163, 92, .55), transparent 70%); }
@keyframes b-rip { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .b-xl, .b-xl::after, .ne-bar-book::after { animation: none !important; }
  .b-solid, .b-line, .b-dark, .ne-head-cta, .b-arr { transition-duration: .01s !important; }
  .b-rip { display: none; }
}

/* Service photos on the price cards */
.pcard.has-media { padding-top: 0; }
.pcard-media { position: relative; margin: 0 -24px 6px; aspect-ratio: 4 / 3; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(ellipse 70% 60% at 50% 40%, #3a2416, #160e09 80%); border-bottom: 1px solid rgba(201, 163, 92, .28); }
.pcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .8, .2, 1), filter .5s; filter: saturate(.92); }
.pcard-media .pcard-mark { width: 30%; height: auto; object-fit: contain; opacity: .18; filter: none; }
.pcard-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14, 11, 8, .55), transparent 45%); pointer-events: none; }
@media (hover: hover) { .pcard:hover .pcard-media img:not(.pcard-mark) { transform: scale(1.06); filter: saturate(1.05); } }
.pcard.has-media::before { z-index: 1; }

/* Map + "open in Google Maps" */
.map-wrap { position: relative; max-width: 900px; margin: 40px auto 0; }
.map-wrap .map-x { margin: 0; }
.map-go { position: absolute; left: 14px; bottom: 14px; height: 46px; padding: 0 20px; font-size: 14.5px; background: rgba(14, 11, 8, .82);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 8px 22px rgba(0, 0, 0, .4); }
@media (max-width: 560px) { .map-go { position: static; display: flex; justify-content: center; margin-top: 10px; background: transparent; box-shadow: none; } }

/* ==========================================================================
   Our work: the ring gallery (ring.js)
   ========================================================================== */
.work { padding-bottom: clamp(40px, 5vw, 72px); overflow: hidden; }
.ring { position: relative; margin: clamp(24px, 3vw, 40px) calc(-1 * var(--ne-pad-x)) 0; } /* full width, past the section padding */
/* Without JS: a plain scrolling row */
.ring-src { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; list-style: none; margin: 0; padding: 0 var(--ne-pad-x) 12px; }
.ring-src li { flex: none; scroll-snap-align: center; }
.ring-src button { display: block; padding: 0; border: 1px solid rgba(201, 163, 92, .35); background: none; }
.ring-src img { display: block; width: 200px; height: 256px; object-fit: cover; }
.ring.is-live .ring-src { display: none; }
.ring-stage { position: relative; display: none; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.ring.is-live .ring-stage { display: block; }
.ring.is-grabbing .ring-stage { cursor: grabbing; }
.ring-card { position: absolute; top: 0; left: 0; padding: 0; border: 0; border-radius: 2px; overflow: hidden; cursor: inherit; background: #1a1510;
  box-shadow: 0 0 0 1px rgba(201, 163, 92, .35), 0 18px 40px rgba(0, 0, 0, .55); will-change: transform; transform-origin: 50% 50%;
  transition: box-shadow .35s ease, opacity .2s ease; -webkit-tap-highlight-color: transparent; }
.ring-card img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; transition: transform .6s cubic-bezier(.2, .8, .2, 1), filter .4s; filter: saturate(.9) brightness(.92); }
.ring-card.is-front { box-shadow: 0 0 0 1px var(--ne-gold), 0 22px 50px rgba(0, 0, 0, .6), 0 0 40px rgba(201, 163, 92, .18); }
.ring-card.is-front img { filter: none; }
@media (hover: hover) { .ring-card:hover img { transform: scale(1.06); filter: none; } }
.ring-card:focus-visible { outline: 2px solid var(--ne-gold); outline-offset: 4px; }
.ring-hint { margin: 6px 0 0; text-align: center; font-size: 13px; color: var(--ne-text-d); letter-spacing: .02em; }
.ring-hint span { color: var(--ne-gold); margin: 0 6px; }

/* The large view */
.ring-box { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ne-cream); overflow: hidden; }
.ring-box::backdrop { background: rgba(8, 6, 4, 0); backdrop-filter: blur(0); transition: background .4s ease, backdrop-filter .4s ease; }
.ring-box.is-open::backdrop { background: rgba(8, 6, 4, .86); backdrop-filter: blur(6px); }
.ring-box-in { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 56px 16px 24px; }
.ring-box-img { display: block; max-width: min(92vw, 760px); max-height: calc(100vh - 210px); width: auto; height: auto; object-fit: contain;
  box-shadow: 0 0 0 1px rgba(201, 163, 92, .5), 0 30px 80px rgba(0, 0, 0, .6); transform-origin: 50% 50%; touch-action: pan-y; }
.ring-box-bar { width: min(92vw, 760px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  opacity: 0; transform: translateY(10px); transition: opacity .35s ease .2s, transform .35s ease .2s; }
.ring-box.is-open .ring-box-bar { opacity: 1; transform: none; }
.ring-box-cap { font: 700 22px/1.5 var(--ne-serif); }
.ring-box-acts { display: flex; gap: 10px; margin-inline-start: auto; }
.ring-box-acts .b-solid, .ring-box-acts .b-line { height: 48px; padding: 0 22px; font-size: 15px; }
.ring-box-close, .ring-box-nav { position: absolute; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(201, 163, 92, .6); background: rgba(14, 11, 8, .6);
  color: var(--ne-cream); cursor: pointer; transition: background .25s ease, color .25s ease, transform .25s ease, opacity .3s; opacity: 0; }
.ring-box.is-open .ring-box-close, .ring-box.is-open .ring-box-nav { opacity: 1; }
.ring-box-close { top: 14px; left: 14px; width: 44px; height: 44px; font-size: 16px; }
.ring-box-nav { top: 50%; width: 52px; height: 52px; font-size: 20px; margin-top: -26px; }
.ring-box-prev { right: max(14px, calc(50% - 440px)); }
.ring-box-next { left: max(14px, calc(50% - 440px)); }
@media (hover: hover) { .ring-box-close:hover, .ring-box-nav:hover { background: var(--ne-gold); color: var(--ne-ink); transform: scale(1.06); } }
@media (max-width: 640px) {
  .ring-box-nav { top: auto; bottom: 18px; margin: 0; width: 46px; height: 46px; }
  .ring-box-in { padding-bottom: 80px; }
  .ring-box-acts { width: 100%; }
  .ring-box-acts a { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .ring-box::backdrop, .ring-box-bar { transition: none; } }