:root{
  --black:#070707;
  --dark:#0e0c09;
  --gold:#F0A500;
  --gold-light:#f5be45;
  --gold-dark:#a87200;
  --white:#f5f0e8;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
/* FIX: Lenis (added for buttery-smooth inertia scrolling) does its own
easing on every scroll. Leaving the native CSS "smooth-scroll" on as well
made the two fight each other — one of the main sources of the choppy,
inconsistent feel compared to sites like nudot.com.tw. Lenis now owns all
scroll smoothing; this stays as instant/auto so there's only one system
driving the motion. */
html.lenis, html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
body{background:var(--black);color:var(--white);font-family:'Raleway',sans-serif;overflow-x:hidden;cursor:none}

/* CURSOR — two concentric shapes, no center dot: a bigger "Focus Ring",
now a small gear, that rotates as the mouse actually MOVES (not a constant
auto-spin) and naturally stops when the mouse is still, plus a quick fast
spin on click; and a smaller "Aperture Ring" that racks shut then back
open on click, like a camera shutter/iris firing. */
#cur-ring-focus{width:46px;height:46px;position:fixed;pointer-events:none;z-index:9998;color:rgba(240,165,0,.4);transition:color .3s ease,width .35s cubic-bezier(.16,1,.3,1),height .35s cubic-bezier(.16,1,.3,1)}
#cur-ring-focus polygon{fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
#cur-ring-focus.hover{color:var(--gold);width:54px;height:54px;animation:focusHunt 1.4s ease-in-out infinite}
/* While the page is still loading: gear spins continuously on its own
(instead of only rotating with actual mouse movement), so the loading
state shows up right on the cursor. Removed once window "load" fires. */
#cur-ring-focus.loading{color:var(--gold);animation:loadingGearSpin 1s linear infinite}
@keyframes loadingGearSpin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
/* The "focus / defocus" search — a real autofocus hunts back and forth
across sharp before it settles; this echoes that with a soft blur pulse. */
@keyframes focusHunt{0%,100%{filter:blur(0)}50%{filter:blur(1.2px)}}

/* FIX: simplified back to a plain ring (the 6-blade version read as too
busy/fussy) — just sized up a bit, and the click animation is now a pure
shrink-then-grow, like a lens racking from f/1.2 (wide open) down to f/11
(small opening) and springing back open — which is really all an aperture
visually does, no blade shapes needed to sell it. */
#cur-ring-aperture{width:26px;height:26px;border:1.5px solid rgba(240,165,0,.55);border-radius:50%;position:fixed;pointer-events:none;z-index:9998;transform:translate(-50%,-50%) scale(1);transition:border-color .3s ease}
#cur-ring-aperture.hover{border-color:var(--gold)}
/* While the page is still loading: aperture breathes open/closed on its
own continuously, reusing the same shrink-grow motion as the click
animation, so the loading state shows up right on the cursor. */
#cur-ring-aperture.loading{border-color:var(--gold);animation:apertureBreath 1s ease-in-out infinite}
/* Click: rack down to a small opening, then spring back open. */
#cur-ring-aperture.click{animation:apertureBreath .6s cubic-bezier(.45,0,.55,1)}
@keyframes apertureBreath{
  0%{transform:translate(-50%,-50%) scale(1)}
  45%{transform:translate(-50%,-50%) scale(.22)}
  100%{transform:translate(-50%,-50%) scale(1)}
}
/* Click: quick bright flash + snap-in, then settle — the "shutter" moment. */


/* Click: bright ring bursts outward from the click point and a soft white
wash flashes behind it, like a camera shutter firing. Self-removes via
animationend. */
/* FIX: brightened into a proper "flash pop" — a solid bright white core
instead of just a thin gold-tinted ring, closer to what an actual camera
flash firing looks like for an instant. */
.click-flash{position:fixed;left:0;top:0;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;pointer-events:none;z-index:9997;background:radial-gradient(circle,rgba(255,255,255,1) 0%,rgba(255,255,255,.7) 25%,rgba(240,165,0,.35) 55%,transparent 78%);animation:clickFlash .45s cubic-bezier(.22,1,.36,1) forwards}
@keyframes clickFlash{
  0%{transform:scale(0.2);opacity:1}
  30%{opacity:1}
  100%{transform:scale(4);opacity:0}
}
/* A very brief, subtle whole-screen white wash — like the room lighting up
for an instant when a camera flash fires. Kept faint so it reads as a
flourish, not an interruption. */
.screen-flash{position:fixed;inset:0;background:#fff;pointer-events:none;z-index:9996;opacity:0;animation:screenFlash .35s ease-out forwards}
@keyframes screenFlash{0%{opacity:.13}100%{opacity:0}}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:200;padding:24px 60px;display:flex;justify-content:space-between;align-items:center;transition:all .5s;background:linear-gradient(to bottom,rgba(7,7,7,.8),transparent)}
nav.stuck{background:rgba(7,7,7,.97);padding:14px 60px;border-bottom:1px solid rgba(240,165,0,.12)}
.nav-logo img{height:48px;object-fit:contain;filter:drop-shadow(0 0 12px rgba(240,165,0,.25))}
.nav-links{display:flex;gap:36px;list-style:none}
.nav-links a{font-family:'Raleway',sans-serif;font-weight:300;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:rgba(245,240,232,.6);text-decoration:none;transition:color .3s}
.nav-links a:hover{color:var(--gold)}
.nav-book{padding:10px 28px;border:1px solid var(--gold);color:var(--gold);font-family:'Cinzel',serif;font-size:9px;letter-spacing:3px;text-decoration:none;transition:all .3s}
.nav-book:hover{background:var(--gold);color:var(--black)}
/* Hamburger */
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;z-index:300}
.hamburger span{display:block;width:24px;height:1.5px;background:var(--gold);transition:all .4s cubic-bezier(.16,1,.3,1)}
.hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
/* Mobile menu overlay */
.mobile-menu{position:fixed;inset:0;background:rgba(7,7,7,.98);z-index:250;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;opacity:0;pointer-events:none;transition:opacity .4s ease}
.mobile-menu.open{opacity:1;pointer-events:all}
.mobile-menu a{font-family:'Cinzel',serif;font-size:14px;letter-spacing:5px;text-transform:uppercase;color:rgba(245,240,232,.7);text-decoration:none;transition:color .3s;opacity:0;transform:translateY(20px);transition:opacity .4s ease,transform .4s cubic-bezier(.16,1,.3,1),color .3s}
.mobile-menu.open a{opacity:1;transform:none}
.mobile-menu.open a:nth-child(1){transition-delay:.1s}
.mobile-menu.open a:nth-child(2){transition-delay:.18s}
.mobile-menu.open a:nth-child(3){transition-delay:.26s}
.mobile-menu.open a:nth-child(4){transition-delay:.34s}
.mobile-menu.open a:nth-child(5){transition-delay:.42s}
.mobile-menu.open a:nth-child(6){transition-delay:.5s}
.mobile-menu a:hover{color:var(--gold)}
.mobile-menu .mob-book{margin-top:10px;padding:14px 44px;border:1px solid var(--gold);color:var(--gold)!important;font-size:11px}

/* HERO */
#hero{height:100vh;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.hero-parallax{position:absolute;inset:-15%;will-change:transform;background-size:cover;background-position:center;overflow:hidden}
.hero-parallax img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.hero-parallax::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(7,7,7,.45) 0%,rgba(7,7,7,.2) 35%,rgba(7,7,7,.65) 80%,rgba(7,7,7,1) 100%)}
.grain{position:absolute;inset:0;opacity:.03;pointer-events:none;z-index:3;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:200px}
/* Gold floating lines */
.gline{position:absolute;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);pointer-events:none;z-index:2}
.gline-1{width:300px;top:20%;left:-100px;opacity:.2;animation:gl 5s ease-in-out infinite}
.gline-2{width:220px;bottom:25%;right:-80px;opacity:.15;animation:gl 5s ease-in-out 2.5s infinite}
@keyframes gl{0%,100%{transform:translateX(0);opacity:.1}50%{transform:translateX(50px);opacity:.35}}

.hero-content{position:relative;z-index:5;text-align:center}
.hero-logo{height:200px;object-fit:contain;margin-bottom:28px;opacity:0;animation:fadeUp 1.6s ease .3s forwards;filter:drop-shadow(0 0 40px rgba(240,165,0,.3))}
.hero-eyebrow{font-family:'Raleway',sans-serif;font-weight:200;font-size:10px;letter-spacing:8px;text-transform:uppercase;color:var(--gold);margin-bottom:18px;opacity:0;animation:fadeUp 1.4s ease .75s forwards}
.hero-title{font-family:'Cormorant Garamond',serif;font-size:clamp(28px,4.5vw,56px);font-weight:300;line-height:1;white-space:nowrap;margin-bottom:20px;opacity:0;animation:fadeUp 1.4s ease .95s forwards}
/* FIX: when the per-character reveal is used on the title, the container's
own fadeUp animation would otherwise fight it — the container fading in on
its own timeline while individual letters try to stagger in underneath it.
Letting only the letters animate here, container visible immediately. */
.hero-title.letter-reveal{opacity:1;animation:none}
.hero-title em{font-style:italic;background:linear-gradient(135deg,#F0A500 0%,#f5d060 50%,#F0A500 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:inline;margin-left:8px}
/* FIX: splitChars() (see main.js) wraps every letter in its own <span
class="char"> for the reveal animation — so "by Hanan" no longer has any
DIRECT text inside the <em> itself for the gradient above to clip to, and
the child spans only inherited a transparent fill with no gradient of their
own. Result: every letter of "by Hanan" rendered fully invisible. Applying
the same gradient-clip to the .char spans themselves fixes it. */
.hero-title em .char{background:linear-gradient(135deg,#F0A500 0%,#f5d060 50%,#F0A500 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* FIX: added for real sense of depth. Bokeh = the soft, out-of-focus
circles of light you see in real photography when something is shot at a
wide aperture — using it here is a literal nod to the brand (photography)
while also being the classic "foreground sharp, background blurred" depth
cue. Purely decorative, behind all real content (z-index low, pointer-events
none), and drifts slowly + reacts subtly to scroll for parallax depth. */
/* FIX: these were showing a visible hard-edged "box" around the soft glow.
Cause: border-radius:50% created a hard circular clip boundary, and
filter:blur() smears that hard edge into a visible ghost outline instead of
just softening it. The radial-gradient's own falloff already creates a
circular glow — the clip was unnecessary and actively harmful. Also fades
to fully transparent much earlier (40% of radius, not 70%) so there's
nothing left to clip even if a parent's overflow:hidden cuts in early. */
.bokeh{position:absolute;filter:blur(40px);pointer-events:none;z-index:0;will-change:transform}
.bokeh-gold{background:radial-gradient(circle,rgba(240,165,0,.32),transparent 40%)}
.bokeh-warm{background:radial-gradient(circle,rgba(245,178,30,.2),transparent 40%)}
.hero-tagline{font-family:'Cormorant Garamond',serif;font-size:clamp(14px,1.5vw,18px);font-style:italic;font-weight:300;color:rgba(245,240,232,.65);margin-bottom:14px;letter-spacing:1px;opacity:0;animation:fadeUp 1.4s ease 1.1s forwards}
.hero-sub{font-family:'Cinzel',serif;font-size:9px;letter-spacing:6px;color:rgba(245,240,232,.4);margin-bottom:50px;opacity:0;animation:fadeUp 1.4s ease 1.25s forwards}
.hero-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;opacity:0;animation:fadeUp 1.4s ease 1.45s forwards}
.btn-gold{display:inline-block;padding:15px 46px;background:var(--gold);color:var(--black);font-family:'Cinzel',serif;font-size:10px;letter-spacing:3px;text-decoration:none;transition:all .35s;font-weight:600}
.btn-gold:hover{background:var(--gold-light);transform:translateY(-2px)}
.btn-outline{display:inline-block;padding:15px 38px;border:1px solid rgba(240,165,0,.5);color:var(--gold);font-family:'Cinzel',serif;font-size:10px;letter-spacing:3px;text-decoration:none;transition:all .35s;position:relative;overflow:hidden}
.btn-outline::before{content:'';position:absolute;inset:0;background:rgba(240,165,0,.08);transform:translateX(-101%);transition:transform .35s}
.btn-outline:hover::before{transform:translateX(0)}
.btn-outline:hover{border-color:var(--gold)}
.scroll-hint{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:5;opacity:0;animation:fadeUp 1s ease 2.3s forwards}
.scroll-hint span{font-family:'Cinzel',serif;font-size:8px;letter-spacing:4px;color:rgba(240,165,0,.5);text-transform:uppercase}
.scroll-bar{width:1px;height:46px;background:linear-gradient(to bottom,var(--gold),transparent);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(38px)}to{opacity:1;transform:translateY(0)}}

/* SECTIONS */
section{padding:130px 60px;position:relative;overflow:hidden}
.sec-label{font-family:'Cinzel',serif;font-size:9px;letter-spacing:5px;color:var(--gold);text-transform:uppercase;display:flex;align-items:center;gap:14px;margin-bottom:14px}
.sec-label::before{content:'';width:36px;height:1px;background:var(--gold)}
.gold-rule{width:56px;height:1px;background:linear-gradient(to right,transparent,var(--gold),transparent);margin:22px auto}

/* REVEAL ANIMATIONS */
/* ── LUXURY REVEAL ANIMATIONS ─────────────────────────────────────────
   Philosophy: Less distance, more duration, refined easing.
   Luxury = slow, deliberate, effortless. Generic = big, fast, obvious.
   Apple/Rolls Royce sites use 20-30px max translate, 1s+ duration.
──────────────────────────────────────────────────────────────────── */
.reveal,.reveal-left,.reveal-right,.reveal-scale{
  opacity:0;
  transition:opacity 1.3s cubic-bezier(.22,1,.36,1),transform 1.3s cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform;
}
.reveal{transform:translateY(28px)}
.reveal-left{transform:translateX(-36px)}
.reveal-right{transform:translateX(36px)}
.reveal-scale{transform:scale(.94) translateY(16px)}
.reveal.on,.reveal-left.on,.reveal-right.on,.reveal-scale.on{opacity:1;transform:none}
.stagger>*{
  opacity:0;
  transform:translateY(22px);
  transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1);
}
.stagger.on>*:nth-child(1){opacity:1;transform:none;transition-delay:.06s}
.stagger.on>*:nth-child(2){opacity:1;transform:none;transition-delay:.2s}
.stagger.on>*:nth-child(3){opacity:1;transform:none;transition-delay:.34s}
.stagger.on>*:nth-child(4){opacity:1;transform:none;transition-delay:.48s}
.stagger.on>*:nth-child(5){opacity:1;transform:none;transition-delay:.62s}
.stagger.on>*:nth-child(6){opacity:1;transform:none;transition-delay:.76s}
.zoom-reveal{opacity:0;transform:translateY(12px);transition:opacity 1.4s cubic-bezier(.22,1,.36,1),transform 1.4s cubic-bezier(.22,1,.36,1);will-change:opacity,transform}
.zoom-reveal.on{opacity:1;transform:translateY(0)}

/* PROBLEM */
#problem{background:linear-gradient(180deg,var(--black) 0%,#0d0b08 100%)}
.prob-intro{max-width:680px;margin:0 auto 80px;text-align:center}
.prob-intro h2{font-family:'Cormorant Garamond',serif;font-size:clamp(34px,5vw,64px);font-weight:300;line-height:1.05;margin-bottom:20px}
.prob-intro h2 em{font-style:italic;color:var(--gold)}
.prob-intro p{font-size:15px;font-weight:300;line-height:1.9;color:rgba(245,240,232,.55)}
.prob-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;max-width:1100px;margin:0 auto}
.prob-card{background:#0d0b08;padding:40px 32px;position:relative;overflow:hidden;border-bottom:2px solid transparent;transition:border-color .4s,transform .5s cubic-bezier(.16,1,.3,1)}
.prob-card:hover{border-bottom-color:var(--gold);transform:translateY(-10px)}
.prob-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(240,165,0,.04),transparent);opacity:0;transition:opacity .4s}
.prob-card:hover::before{opacity:1}
.prob-header{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.prob-n{font-family:'Cinzel',serif;font-size:13px;font-weight:600;letter-spacing:3px;color:rgba(240,165,0,.45);line-height:1;flex-shrink:0}
.prob-icon{font-size:26px!important;color:#F0A500!important;opacity:.85;line-height:1;flex-shrink:0}
.prob-card:hover .prob-icon{opacity:1}
.prob-card h3{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:400;margin-bottom:10px;letter-spacing:.3px}
.prob-card p{font-size:13px;font-weight:300;line-height:1.85;color:rgba(245,240,232,.48)}

/* SOLUTION */
#solution{background:#0d0b08}
.sol-wrap{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center;max-width:1180px;margin:0 auto}
.sol-text h2{font-family:'Cormorant Garamond',serif;font-size:clamp(38px,4vw,64px);font-weight:300;line-height:1.05;margin-bottom:26px}
.sol-text h2 em{font-style:italic;color:var(--gold)}
.sol-text p{font-size:15px;font-weight:300;line-height:2;color:rgba(245,240,232,.58);margin-bottom:18px}
.sol-pts{margin-top:36px;display:flex;flex-direction:column;gap:16px}
.sol-pt{display:flex;gap:18px;align-items:flex-start}
.sol-dot{width:5px;height:5px;border-radius:50%;background:var(--gold);margin-top:9px;flex-shrink:0}
.sol-pt span{font-size:14px;font-weight:300;color:rgba(245,240,232,.72);line-height:1.65}
.sol-boxes{position:relative;height:480px}
.sbox{position:absolute;border:1px solid rgba(240,165,0,.2);overflow:hidden;transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s}
.sbox:hover{transform:scale(1.04)!important;box-shadow:0 0 50px rgba(240,165,0,.12)}
/* FIX: these images only had the outer box's plain fade+slide-up — the
image itself never got the same treatment other photos on the site now
get. Adding blur-focus + gentle zoom-settle here so the whole page feels
consistent, and this composition (the site's most-seen photo group) doesn't
look flat/basic by comparison. */
.sbox img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.15);filter:blur(14px);transition:transform 1.6s cubic-bezier(.16,1,.3,1),filter 1.3s ease-out}
.sbox.on img{transform:scale(1);filter:blur(0)}
.sbox-empty{width:100%;height:100%;background:linear-gradient(135deg,#1a1208,#0d0b08);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px}
.sbox-empty span{font-family:'Cinzel',serif;font-size:8px;letter-spacing:2px;color:rgba(240,165,0,.3);text-align:center;padding:10px;line-height:1.8}
.sbox-1{width:270px;height:340px;top:0;left:40px}
.sbox-2{width:190px;height:240px;top:70px;left:190px;border-color:rgba(240,165,0,.35)}
.sbox-3{width:110px;height:110px;bottom:30px;left:10px;border-color:rgba(240,165,0,.15)}
.sol-quote{position:absolute;bottom:0;right:-10px;width:210px;padding:28px;background:rgba(240,165,0,.07);border:1px solid rgba(240,165,0,.2)}
.sol-quote p{font-family:'Cormorant Garamond',serif;font-size:17px;font-style:italic;color:var(--gold-light);line-height:1.6}

/* SERVICES */
#services{background:var(--black)}
.svc-head{text-align:center;margin-bottom:70px}
.svc-head h2{font-family:'Cormorant Garamond',serif;font-size:clamp(38px,5vw,70px);font-weight:300;line-height:1.05}
.svc-head h2 em{font-style:italic;color:var(--gold)}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1180px;margin:0 auto}
.svc-card{border:1px solid rgba(240,165,0,.1);position:relative;overflow:hidden;transition:border-color .4s,transform .5s cubic-bezier(.16,1,.3,1)}
.svc-card::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(240,165,0,.05),transparent);opacity:0;transition:opacity .4s}
.svc-card:hover::after{opacity:1}
.svc-card:hover{border-color:rgba(240,165,0,.4);transform:translateY(-8px)}
.svc-photo{width:100%;height:200px;overflow:hidden;position:relative;background:#0d0b08}
.svc-photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.22,1,.36,1);will-change:transform}
.svc-card:hover .svc-photo img{transform:scale(1.07)}
.svc-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent 40%,rgba(7,7,7,.7))}
.svc-photo-empty{width:100%;height:200px;background:linear-gradient(135deg,#1a1208,#0d0b08);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px}
.svc-photo-empty span{font-family:'Cinzel',serif;font-size:8px;letter-spacing:2px;color:rgba(240,165,0,.28);text-align:center;padding:10px;line-height:1.8}
.svc-body{padding:26px 30px 30px}
.svc-icon{font-size:0;margin-bottom:16px}.svc-icon i{font-size:28px;color:var(--gold);opacity:.8;transition:opacity .3s}.svc-card:hover .svc-icon i{opacity:1}
.svc-card h3{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:400;margin-bottom:10px}
.svc-card p{font-size:13px;font-weight:300;line-height:1.9;color:rgba(245,240,232,.48);margin-bottom:18px}
.svc-feats{list-style:none;display:flex;flex-direction:column;gap:7px}
.svc-feats li{font-size:12px;font-weight:300;color:rgba(240,165,0,.65);display:flex;gap:10px;align-items:center}
.svc-feats li::before{content:'—';color:var(--gold);font-size:10px}
.svc-cta{margin-top:22px;padding-top:16px;border-top:1px solid rgba(240,165,0,.12);font-family:'Cinzel',serif;font-size:9px;letter-spacing:3px;color:var(--gold);display:flex;align-items:center;gap:8px}
.svc-cta::after{content:'→'}

/* PORTFOLIO */
#portfolio{background:#0d0b08;text-align:center}
.port-head h2{font-family:'Cormorant Garamond',serif;font-size:clamp(38px,5vw,70px);font-weight:300;margin-bottom:14px}
.port-head h2 em{font-style:italic;color:var(--gold)}
.port-head p{font-size:14px;font-weight:300;color:rgba(245,240,232,.48);margin-bottom:50px}
/* Masonry grid */
.port-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:280px;gap:3px;max-width:1050px;margin:0 auto 50px}
.port-item{overflow:hidden;position:relative;cursor:pointer;background:#141008}
.port-item:nth-child(1){grid-row:span 2}
.port-item:nth-child(4){grid-column:span 2}
.port-img-wrap{width:100%;height:100%;transition:transform 1.2s cubic-bezier(.22,1,.36,1);will-change:transform}
.port-item:hover .port-img-wrap{transform:scale(1.06)}
.port-img-wrap img{width:100%;height:100%;object-fit:cover}
.port-empty{width:100%;height:100%;background:linear-gradient(135deg,#1a1208,#0d0b08);display:flex;align-items:center;justify-content:center;border:1px solid rgba(240,165,0,.07)}
.port-empty span{font-family:'Cinzel',serif;font-size:8px;letter-spacing:2px;color:rgba(240,165,0,.25);text-align:center;padding:16px;line-height:2}
/* FIX: this was "display:none" unconditionally — the "View" hover overlay
on portfolio photos could never actually appear, dead code. Now it fades
and slides in cleanly on hover, with a subtle scrim so the gold text reads
clearly against any photo. */
.port-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(to top,rgba(7,7,7,.75),rgba(7,7,7,.15) 55%,transparent);opacity:0;transition:opacity .45s ease;z-index:2}
.port-item:hover .port-overlay{opacity:1}
.port-overlay span{font-family:'Cinzel',serif;font-size:9px;letter-spacing:3px;color:var(--gold);opacity:0;transform:translateY(10px);transition:opacity .4s ease .05s,transform .4s cubic-bezier(.16,1,.3,1) .05s;border:1px solid rgba(240,165,0,.5);padding:10px 24px}
.port-item:hover .port-overlay span{opacity:1;transform:translateY(0)}
/* Social links */
.port-social{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.social-btn{display:inline-flex;align-items:center;gap:12px;padding:14px 36px;border:1px solid rgba(240,165,0,.35);color:var(--gold);text-decoration:none;font-family:'Cinzel',serif;font-size:10px;letter-spacing:3px;transition:all .35s}
.social-btn:hover{background:rgba(240,165,0,.08);border-color:var(--gold)}
.social-btn svg{width:18px;height:18px;fill:currentColor}

/* PROCESS */
#strategy{background:var(--black)}
.strat-head{text-align:center;max-width:680px;margin:0 auto 80px}
.strat-head h2{font-family:'Cormorant Garamond',serif;font-size:clamp(34px,4.5vw,62px);font-weight:300;line-height:1.08;margin-bottom:18px}
.strat-head h2 em{font-style:italic;color:var(--gold)}
.strat-head p{font-size:14px;font-weight:300;color:rgba(245,240,232,.52);line-height:1.9}
.strat-timeline{max-width:860px;margin:0 auto;position:relative}
.strat-timeline::before{content:'';position:absolute;left:28px;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,transparent,rgba(240,165,0,.3),transparent)}
.strat-step{display:flex;gap:40px;padding:32px 0 32px 68px;border-bottom:1px solid rgba(240,165,0,.06)}
.strat-step:last-child{border-bottom:none}
.st-num{font-family:'Cinzel',serif;font-size:10px;font-weight:600;letter-spacing:3px;color:rgba(240,165,0,.5);line-height:1;flex-shrink:0;width:40px;padding-top:6px}
.st-body h3{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:400;margin-bottom:8px}
.st-body p{font-size:14px;font-weight:300;color:rgba(245,240,232,.52);line-height:1.85}

/* WHY US */
#why{background:#0d0b08}
.why-wrap{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center;max-width:1100px;margin:0 auto}
.why-text h2{font-family:'Cormorant Garamond',serif;font-size:clamp(36px,4vw,60px);font-weight:300;line-height:1.08;margin-bottom:24px}
.why-text h2 em{font-style:italic;color:var(--gold)}
.why-text p{font-size:15px;font-weight:300;line-height:2;color:rgba(245,240,232,.58);margin-bottom:18px}
.why-pillars{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pillar{padding:22px;border:1px solid rgba(240,165,0,.1);transition:border-color .35s,transform .35s}
.pillar:hover{border-color:rgba(240,165,0,.4);transform:translateY(-4px)}
.pillar-icon{font-size:0;margin-bottom:12px}.pillar-icon i{font-size:26px;color:#F0A500!important;opacity:.8}.pillar:hover .pillar-icon i{opacity:1}
.pillar h4{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:400;margin-bottom:6px}
.pillar p{font-size:12px;font-weight:300;color:rgba(245,240,232,.48);line-height:1.7}
.why-visual{position:relative;height:520px}
.why-p1{position:absolute;top:0;left:0;width:280px;height:380px;overflow:hidden;border:1px solid rgba(240,165,0,.25)}
.why-p2{position:absolute;bottom:0;right:0;width:200px;height:220px;overflow:hidden;border:1px solid rgba(240,165,0,.15)}
.why-p1 img,.why-p2 img{width:100%;height:100%;object-fit:cover}
.why-p-empty{width:100%;height:100%;background:linear-gradient(135deg,#1a1208,#0d0b08);display:flex;align-items:center;justify-content:center}
.why-p-empty span{font-family:'Cinzel',serif;font-size:8px;letter-spacing:2px;color:rgba(240,165,0,.25);text-align:center;padding:12px;line-height:1.8}
.why-badge{position:absolute;bottom:80px;left:-20px;padding:22px 28px;background:var(--gold);color:var(--black);z-index:2}
.why-badge .wbn{font-family:'Cormorant Garamond',serif;font-size:38px;font-weight:600;line-height:1}
.why-badge .wbl{font-family:'Cinzel',serif;font-size:8px;letter-spacing:2px;margin-top:4px}

/* TESTIMONIALS */
#testimonials{background:var(--black)}
.testi-head{text-align:center;margin-bottom:60px}
.testi-head h2{font-family:'Cormorant Garamond',serif;font-size:clamp(34px,4.5vw,60px);font-weight:300}
.testi-head h2 em{font-style:italic;color:var(--gold)}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1100px;margin:0 auto}
.testi-card{padding:40px 32px;border:1px solid rgba(240,165,0,.1);position:relative;transition:border-color .35s,transform .35s}
.testi-card:hover{border-color:rgba(240,165,0,.35);transform:translateY(-4px)}
.testi-card::before{content:'\201C';font-family:'Cormorant Garamond',serif;font-size:80px;color:rgba(240,165,0,.1);position:absolute;top:10px;left:24px;line-height:1}
.testi-text{font-family:'Cormorant Garamond',serif;font-size:18px;font-style:italic;font-weight:300;line-height:1.65;color:rgba(245,240,232,.75);margin-bottom:24px;position:relative;z-index:1}
.testi-author{font-family:'Cinzel',serif;font-size:9px;letter-spacing:3px;color:var(--gold);text-transform:uppercase}
.testi-event{font-size:11px;font-weight:300;color:rgba(245,240,232,.35);margin-top:4px}
.testi-stars{color:var(--gold);font-size:12px;margin-bottom:14px}

/* ABOUT */
#about{background:#0d0b08}
.about-wrap{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center;max-width:1100px;margin:0 auto}
.about-vis{position:relative;height:500px}
.ab-p1{position:absolute;top:0;left:0;width:300px;height:400px;overflow:hidden;border:1px solid rgba(240,165,0,.25)}
.ab-p2{position:absolute;bottom:0;right:0;width:190px;height:190px;overflow:hidden;border:1px solid rgba(240,165,0,.12)}
.ab-p1 img,.ab-p2 img{width:100%;height:100%;object-fit:cover}
.ab-p-empty{width:100%;height:100%;background:linear-gradient(135deg,#1a1208,#0d0b08);display:flex;align-items:center;justify-content:center}
.ab-p-empty span{font-family:'Cinzel',serif;font-size:8px;letter-spacing:2px;color:rgba(240,165,0,.25);text-align:center;padding:12px;line-height:1.8}
.ab-badge{position:absolute;bottom:60px;left:-18px;padding:20px 28px;background:var(--gold);color:var(--black);z-index:2}
.ab-badge .abn{font-family:'Cormorant Garamond',serif;font-size:36px;font-weight:600;line-height:1}
.ab-badge .abl{font-family:'Cinzel',serif;font-size:8px;letter-spacing:2px;margin-top:4px}
.about-text h2{font-family:'Cormorant Garamond',serif;font-size:clamp(34px,4vw,56px);font-weight:300;line-height:1.08;margin-bottom:26px}
.about-text h2 em{font-style:italic;color:var(--gold)}
.about-text p{font-size:15px;font-weight:300;line-height:2;color:rgba(245,240,232,.58);margin-bottom:16px}
.about-stats{display:flex;gap:36px;margin-top:36px;padding-top:36px;border-top:1px solid rgba(240,165,0,.12)}
.astat .asn{font-family:'Cormorant Garamond',serif;font-size:42px;font-weight:300;color:var(--gold);line-height:1}
.astat .asl{font-size:10px;letter-spacing:2px;color:rgba(245,240,232,.38);text-transform:uppercase;margin-top:5px}

/* CONTACT */
#contact{background:var(--black);text-align:center}
.contact-wrap{max-width:800px;margin:0 auto}
.contact-wrap h2{font-family:'Cormorant Garamond',serif;font-size:clamp(40px,5.5vw,85px);font-weight:300;line-height:.95;margin-bottom:18px}
.contact-wrap h2 em{font-style:italic;color:var(--gold);display:block}
.contact-wrap p{font-size:15px;font-weight:300;color:rgba(245,240,232,.48);max-width:480px;margin:0 auto 52px;line-height:1.85}
.contact-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:70px}
.contact-info-row{display:flex;gap:50px;justify-content:center;flex-wrap:wrap}
.ci{text-align:center}
.ci-l{font-family:'Cinzel',serif;font-size:8px;letter-spacing:3px;color:rgba(240,165,0,.45);text-transform:uppercase;margin-bottom:7px}
.ci-v{font-size:15px;font-weight:300;color:var(--white)}

/* EST. 2017 divider */
.est-divider{text-align:center;padding:40px 0 0;opacity:.3}
.est-divider span{font-family:'Cinzel',serif;font-size:9px;letter-spacing:6px;color:var(--gold)}

/* FOOTER */
footer{padding:36px 60px;border-top:1px solid rgba(240,165,0,.1);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.f-logo img{height:40px;object-fit:contain;filter:drop-shadow(0 0 6px rgba(240,165,0,.15))}
.f-copy{font-size:10px;font-weight:300;color:rgba(245,240,232,.28);letter-spacing:1px}
.f-soc{display:flex;gap:22px}
.f-soc a{font-size:10px;letter-spacing:2px;color:rgba(245,240,232,.35);text-decoration:none;text-transform:uppercase;transition:color .3s}
.f-soc a:hover{color:var(--gold)}

@media(max-width:900px){
  nav{padding:16px 20px}nav.stuck{padding:12px 20px}
  .nav-links,.nav-book{display:none}
  .hamburger{display:flex}
  section{padding:80px 20px}
  .prob-grid,.svc-grid,.testi-grid{grid-template-columns:1fr}
  .sol-wrap,.why-wrap,.about-wrap{grid-template-columns:1fr;gap:50px}
  .sol-boxes,.why-visual,.about-vis{display:none}
  footer{flex-direction:column;text-align:center}
  .port-grid{grid-template-columns:1fr 1fr;grid-auto-rows:200px}
  .port-item:nth-child(1){grid-row:auto}
  .port-item:nth-child(4){grid-column:auto}
  /* FIX: white-space:nowrap forced "Lamha by Hanan" onto one line even when
  it didn't fit a narrow phone screen — "by Hanan" was overflowing off the
  edge and getting clipped by body's overflow-x:hidden, so only "Lamha"
  ever appeared to finish animating in. Letting it wrap fixes this. */
  .hero-title{white-space:normal!important;font-size:clamp(26px,7vw,34px)!important}
  /* FIX: this was a rigid single-row flex layout with no wrap at all — 4
  stat items ("Countless / Weddings", "5★ / Rating", "8+ / Years",
  "∞ / Memories") with 36px gaps between them can never fit a narrow phone
  screen, so it silently overflowed off the right edge and got clipped —
  this was the "About section text cut off" bug. Wraps into a clean 2x2
  grid on mobile instead. */
  .about-stats{display:grid;grid-template-columns:1fr 1fr;gap:24px;row-gap:28px}
  .astat .asn{font-size:32px}
  /* FIX: "by Hanan" uses a gradient-text trick (-webkit-background-clip:text)
  that can silently render fully invisible on some mobile Safari versions —
  exactly matching the reported "never shows on phone, fine on laptop" bug.
  Plain solid gold is a guaranteed-visible fallback on mobile. */
  .hero-title em{background:none!important;-webkit-text-fill-color:var(--gold)!important;color:var(--gold)!important}
  /* FIX: the custom cursor (a mouse-follow effect) never gets a mousemove
  event on a touch device, so it just sat frozen at its default position —
  showing as a stray circle stuck in the top-left corner in every screenshot.
  Hidden entirely on mobile/touch, where a custom cursor doesn't apply anyway. */
  #cur-ring-focus,#cur-ring-aperture{display:none}
  body{cursor:auto}
}
/* Defensive safety net: long words/phrases (or unexpected font metrics on a
given phone) should wrap instead of ever being able to force horizontal
overflow that body's overflow-x:hidden would then silently clip off-screen. */
h1,h2,h3,h4,p{overflow-wrap:break-word;word-wrap:break-word}
/* APPLE-STYLE SCROLL ANIMATIONS */
.pin-section{position:relative;}
/* Text split animation */
.split-word{display:inline-block;overflow:hidden}
.split-word span{display:inline-block;transform:translateY(100%);opacity:0;transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .8s ease}
.split-word.on span{transform:translateY(0);opacity:1}
/* Sticky scroll number counter */
.scroll-count{font-family:"Cormorant Garamond",serif;font-size:clamp(80px,15vw,200px);font-weight:300;color:rgba(240,165,0,.06);position:absolute;top:50%;transform:translateY(-50%);right:60px;pointer-events:none;transition:all .3s;z-index:0}
/* Horizontal text marquee */
.marquee-wrap{overflow:hidden;padding:40px 0;border-top:1px solid rgba(240,165,0,.1);border-bottom:1px solid rgba(240,165,0,.1);margin:60px 0}
.marquee-track{display:flex;gap:60px;animation:marquee 20s linear infinite;white-space:nowrap}
.marquee-track span{font-family:"Cinzel",serif;font-size:11px;letter-spacing:4px;color:rgba(240,165,0,.35);text-transform:uppercase;flex-shrink:0}
.marquee-dot{color:var(--gold);margin:0 10px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Clip reveal - text clips open on scroll */
.clip-reveal{clip-path:inset(0 100% 0 0);transition:clip-path 1.4s cubic-bezier(.22,1,.36,1)}
.clip-reveal.on{clip-path:inset(0 0% 0 0)}
/* Scale up number stats */
.astat .asn{font-family:"Cormorant Garamond",serif;font-size:42px;font-weight:300;color:var(--gold);line-height:1;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.astat:hover .asn{transform:scale(1.15)}
/* Floating card tilt */
.testi-card{transform-style:preserve-3d;transition:transform .4s ease,border-color .35s}
/* Photo parallax layers */
.parallax-layer{will-change:transform}
/* Line draw animation */
.line-draw{width:0;height:1px;background:linear-gradient(to right,var(--gold),transparent);transition:width 1.4s cubic-bezier(.16,1,.3,1)}
.line-draw.on{width:100%}

/* ═══ APPLE-STYLE SCROLL ANIMATIONS ═══ */

/* Word-by-word text reveal */
.word-reveal { overflow:visible; display:inline; }
.word-reveal .word { display:inline-block; transform:translateY(1.1em); opacity:0; transition:transform 1s cubic-bezier(.22,1,.36,1), opacity .8s ease; margin-right:.28em; overflow:hidden; vertical-align:bottom; padding-bottom:.12em; }
.word-reveal.on .word { transform:translateY(0); opacity:1; }

/* Sticky scroll section */
.sticky-section { position:relative; }
.sticky-inner { position:sticky; top:0; height:100vh; overflow:hidden; display:flex; align-items:center; justify-content:center; }

/* Horizontal scroll track */
.hscroll-section { position:relative; }
.hscroll-sticky { position:sticky; top:0; height:100vh; overflow:hidden; display:flex; align-items:center; perspective:1200px; }
.hscroll-track { display:flex; gap:30px; will-change:transform; padding:0 60px; }
.hscroll-card { flex-shrink:0; width:340px; border:1px solid rgba(240,165,0,.15); padding:40px 36px; background:#0d0b08; transition:border-color .4s; transform-style:preserve-3d; }
.hscroll-card:hover { border-color:rgba(240,165,0,.4); }
.hscroll-card .hc-header{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.hscroll-card .hc-num{font-family:'Cinzel',serif;font-size:11px!important;font-weight:600;letter-spacing:3px;color:rgba(240,165,0,.5);line-height:1;flex-shrink:0;background:none!important}
.hscroll-card h3 { font-family:'Cormorant Garamond',serif; font-size:28px; font-weight:400; margin-bottom:14px; color:var(--white); }
.hscroll-card p { font-size:14px; font-weight:300; line-height:1.85; color:rgba(245,240,232,.5); }
.hscroll-card i { color:#F0A500!important; transition:opacity .3s; }
.hscroll-card:hover i { opacity:1!important; }

/* Counter animation */
.count-num { transition:all .3s; }

/* Scroll progress line at top */
#scroll-progress { position:fixed; top:0; left:0; height:2px; background:linear-gradient(to right,#F0A500,#f5d060,#F0A500); z-index:9999; width:0; transition:width .1s linear; }

/* Sticky text animation - large text that pins */
.pin-text-section { position:relative; }
.pin-text-inner { position:sticky; top:0; height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.pin-text-bg { position:absolute; inset:0; background:var(--black); }
.pin-text-content { position:relative; z-index:2; text-align:center; max-width:900px; padding:0 40px; }
.pin-big-text { font-family:'Cormorant Garamond',serif; font-size:clamp(40px,6vw,80px); font-weight:300; line-height:1.1; color:var(--white); }
.pin-big-text em { font-style:italic; background:linear-gradient(135deg,#F0A500,#f5d060,#F0A500); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* Letter by letter reveal */
/* FIX: switched from a slide-up-and-rotate reveal to Blur-to-Focus — each
letter starts soft/blurred and slightly enlarged, then sharpens into place,
like a camera lens racking into focus. Fits the photography brand much more
than a generic slide-in, and ties visually to the same "coming into focus"
language used elsewhere (Services cards, cursor). */
.letter-reveal .char { display:inline-block; opacity:0; filter:blur(18px); transform:scale(1.5); transition:opacity 1.1s ease, filter 1.1s ease, transform 1.1s cubic-bezier(.19,1,.22,1); }
.letter-reveal.on .char { opacity:1; filter:blur(0px); transform:scale(1); }

/* FIX: added for text-animation variety. This one is deliberately tied to
the brand — a camera racking into focus — rather than a generic tech/glitch
effect (scramble-text etc. suits a dev-studio site like nudot.com.tw, but
reads oddly on an elegant wedding-photography brand). Text starts soft and
distant, then sharpens and settles, like a lens finding focus. */
.focus-reveal{opacity:0;filter:blur(14px);transform:scale(1.04);transition:opacity 1.1s cubic-bezier(.22,1,.36,1),filter 1.1s cubic-bezier(.22,1,.36,1),transform 1.1s cubic-bezier(.22,1,.36,1)}
.focus-reveal.on{opacity:1;filter:blur(0);transform:scale(1)}

/* Scroll-scrub paragraph: each word starts dim and brightens progressively
as the reader scrolls past it — driven by JS (see scrubText in main.js), not
a fixed timed transition, so it's tied directly to scroll position. */
.scrub-text .sw{color:rgba(245,240,232,.25);transition:color .15s linear}
.scrub-text .sw.lit{color:rgba(245,240,232,.95)}
.scrub-text em .sw.lit{color:var(--gold)}

/* Fade slide for section labels */
.slide-in-label { opacity:0; transform:translateX(-16px); transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
.slide-in-label.on { opacity:1; transform:none; }


/* ── GOLD LINE REVEAL — sweeps in under section headings ── */
.gold-line-wrap{display:block;text-align:center;margin:20px 0 0}
.gold-line{display:inline-block;height:1px;background:linear-gradient(to right,transparent,var(--gold),transparent);width:0;transition:width 1.4s cubic-bezier(.22,1,.36,1) .5s}
.gold-line.on{width:80px}

/* ── LUXURY FADE-UP — ultra-subtle, for text blocks ── */
.fade-up{opacity:0;transform:translateY(16px);transition:opacity 1.3s cubic-bezier(.22,1,.36,1),transform 1.3s cubic-bezier(.22,1,.36,1)}
.fade-up.on{opacity:1;transform:none}

/* ── IMAGE LUXURY REVEAL — scale out (not in) on entry ── */
.img-reveal{opacity:0;transition:opacity 1.6s cubic-bezier(.22,1,.36,1);will-change:opacity}
.img-reveal.on{opacity:1}

/* FIX: photos previously either just faded in flatly (.img-reveal) or had
NO entrance animation at all (the Why-Us and About section photos) — that's
why they felt like they were just "popping up" instead of appearing nicely.
This gives every photo the same premium treatment: it starts covered by a
gold curtain, blurred, and zoomed in slightly, then the curtain wipes away
left-to-right while the image sharpens into focus and settles to its resting
size — like it's being unveiled, not just faded on. */
.photo-reveal{overflow:hidden}
/* Only sets position:relative for containers that don't already have their
own position set (port-img-wrap has none by default) — why-p1/why-p2/ab-p1/
ab-p2 and svc-photo already have position:absolute/relative from their own
rules above, which is what .photo-reveal::before needs to anchor to, so
forcing position:relative here unconditionally would have overridden and
broken their absolute-positioned overlapping photo layout. */
.port-img-wrap.photo-reveal{position:relative}
.photo-reveal img{transform:scale(1.15);filter:blur(16px);transition:transform 1.6s cubic-bezier(.16,1,.3,1),filter 1.3s ease-out}
.photo-reveal::before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,#F0A500,#f5d060);transform-origin:right;transform:scaleX(1);transition:transform 1s cubic-bezier(.76,0,.24,1);z-index:2}
.photo-reveal.on img{transform:scale(1);filter:blur(0)}
.photo-reveal.on::before{transform:scaleX(0)}

/* ── CARD HOVER — more refined lift ── */
.prob-card{background:#0d0b08;padding:40px 32px;position:relative;overflow:hidden;border-bottom:2px solid transparent;transition:border-color .5s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1),box-shadow .7s ease}
.prob-card:hover{border-bottom-color:var(--gold);transform:translateY(-8px);box-shadow:0 24px 48px rgba(0,0,0,.4)}

/* ── SECTION NUMBER — refined pulse ── */
@keyframes goldPulse{0%,100%{opacity:.4}50%{opacity:.8}}
.prob-n,.st-num{animation:goldPulse 4s ease-in-out infinite}