/* ===================== AMPLIFY v2 ===================== */
/* Film grain over everything for a richer, printed feel */
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 8s steps(10) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}}

/* Scroll progress */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:100;transform-origin:0 50%;transform:scaleX(0);background:var(--gold-grad);box-shadow:0 0 12px rgba(226,183,102,.8)}

/* Preloader */
.loader{position:fixed;inset:0;z-index:200;background:var(--navy-950);display:grid;place-items:center;transition:opacity .7s .1s,visibility .7s .1s}
.loader.done{opacity:0;visibility:hidden}
.loader-in{text-align:center}
.loader img{width:min(380px,70vw);opacity:0;transform:scale(.94);animation:logoIn 1.1s .1s cubic-bezier(.2,.8,.2,1) forwards}
.loader .bar{width:min(380px,70vw);height:1px;margin:26px auto 0;background:rgba(255,255,255,.08);overflow:hidden}
.loader .bar i{display:block;height:100%;width:100%;background:var(--gold-grad);transform:scaleX(0);transform-origin:0;animation:bar 1.1s .2s cubic-bezier(.6,0,.2,1) forwards}
@keyframes logoIn{to{opacity:1;transform:none}}
@keyframes bar{to{transform:scaleX(1)}}

/* Headline word reveal */
.words .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.1em;margin-bottom:-.1em}
.words .w>span{display:inline-block;transform:translateY(110%);transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.words.in .w>span{transform:none}

/* Gold shimmer on gold text */
.gold{background:linear-gradient(110deg,#b07f2e 0%,#e9c27a 30%,#fff1c9 45%,#e2b766 55%,#b07f2e 80%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 6s ease-in-out infinite}
@keyframes shimmer{0%,100%{background-position:100% 0}50%{background-position:0 0}}

/* Button shine sweep + ghost fill */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn-gold::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;z-index:-1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-20deg);animation:shine 4.5s ease-in-out infinite}
@keyframes shine{0%,60%{left:-60%}100%{left:130%}}
.btn-ghost::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--gold-grad);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.btn-ghost:hover{background:rgba(6,19,40,.35)}
.btn-ghost:hover::before{transform:scaleX(1)}

/* Spotlight that follows the mouse */
.card,.tile,.state,.review,.step,.person{--mx:50%;--my:50%}
.card::after,.state::after,.review::after,.step::after,.person::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .4s;background:radial-gradient(420px circle at var(--mx) var(--my),rgba(226,183,102,.16),transparent 45%)}
.card:hover::after,.state:hover::after,.review:hover::after,.step:hover::after,.person:hover::after{opacity:1}
.review,.step,.person{position:relative;overflow:hidden}
.tile .glow{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(380px circle at var(--mx) var(--my),rgba(241,213,149,.22),transparent 50%)}
.tile:hover .glow{opacity:1}
.tile-body{position:relative;z-index:1}
.tile{will-change:transform}

/* Spinning gold border on hover */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.ring{position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:3;background:conic-gradient(from var(--ang),transparent 0 55%,#fff1c9 70%,var(--gold-400) 78%,transparent 92%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s}
.card:hover .ring,.tile:hover .ring,.state:hover .ring{opacity:1;animation:spin 3s linear infinite}
@keyframes spin{to{--ang:360deg}}

/* Image wipe reveal */
.wipe{clip-path:inset(0 100% 0 0);transition:clip-path 1.4s cubic-bezier(.7,0,.2,1)}
.wipe.in{clip-path:inset(0 0 0 0)}
.wipe img{transform:scale(1.25);transition:transform 2s cubic-bezier(.2,.8,.2,1)}
.wipe.in img{transform:scale(1)}

/* Marquee strip */
.marquee{position:relative;overflow:hidden;background:var(--gold-grad);color:#1a1205;padding:18px 0;transform:skewY(-1.2deg);margin:-14px 0 -6px;z-index:5;box-shadow:0 20px 40px -20px rgba(0,0,0,.8)}
.marquee-track{display:flex;width:max-content;animation:marq 40s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{display:inline-flex;align-items:center;gap:26px;padding-right:26px;font:800 clamp(15px,1.5vw,21px)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.marquee span i{font-style:normal;font-size:12px;opacity:.65}
@keyframes marq{to{transform:translateX(-50%)}}

/* Split divider */
.split{position:relative}
.split-or{position:absolute;left:50%;top:54%;z-index:6;transform:translate(-50%,-50%) rotate(45deg);width:74px;height:74px;display:grid;place-items:center;background:var(--navy-950);border:1px solid var(--gold-400);box-shadow:0 0 0 8px rgba(3,11,24,.55),0 0 40px rgba(226,183,102,.35);pointer-events:none;transition:left .7s cubic-bezier(.2,.8,.2,1)}
.split-or b{transform:rotate(-45deg);font:italic 600 24px/1 var(--serif);color:var(--gold-300)}
.split-line{position:absolute;left:50%;top:0;bottom:0;width:1px;z-index:5;background:linear-gradient(180deg,transparent,var(--gold-400) 30%,var(--gold-400) 70%,transparent);transition:left .7s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.split:has(.split-panel.left:hover) .split-or,.split:has(.split-panel.left:hover) .split-line{left:62.8%}
.split:has(.split-panel.right:hover) .split-or,.split:has(.split-panel.right:hover) .split-line{left:37.2%}
.split-panel+.split-panel{border-left:0}
.split-content h2{transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.split-panel:hover .split-content h2{transform:translateY(-6px)}

/* Featured work */
.featured{display:grid;grid-template-columns:1.35fr 1fr;gap:26px}
.feat{position:relative;border-radius:22px;overflow:hidden;min-height:580px;display:flex;align-items:flex-end;isolation:isolate;border:1px solid var(--line)}
.feat img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;z-index:-2}
.feat .zoom{position:absolute;inset:0;z-index:-2;transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.feat:hover .zoom{transform:scale(1.06)}
.feat::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(3,11,24,.95) 0%,rgba(3,11,24,.2) 60%,transparent)}
.feat-body{padding:40px}
.feat .loc{display:inline-flex;gap:8px;align-items:center;font:700 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-300);padding:10px 14px;border-radius:999px;background:rgba(3,11,24,.6);border:1px solid var(--line);backdrop-filter:blur(6px)}
.feat .loc svg{width:14px;height:14px}
.feat h3{font:600 clamp(32px,3.4vw,50px)/1.05 var(--serif);margin:18px 0 10px}
.feat p{color:#c9d3e1;max-width:470px;margin-bottom:22px}

/* Big quote */
.bigquote{position:relative;text-align:center;padding:clamp(90px,12vw,160px) 0;overflow:hidden;background:radial-gradient(ellipse at 50% 0%,rgba(23,58,105,.55),transparent 65%)}
.bigquote .mark{font:600 clamp(160px,22vw,300px)/1 var(--serif);height:.5em;display:block;margin-bottom:10px}
.bigquote blockquote{font:italic 500 clamp(26px,3.2vw,44px)/1.35 var(--serif);color:#f3efe6;max-width:1000px;margin:0 auto}
.bigquote cite{display:block;margin-top:34px;font:700 13px/1 var(--sans);font-style:normal;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-400)}
.bigquote .stars{color:var(--gold-400);letter-spacing:6px;margin-top:14px}

/* Giant footer wordmark */
.wordmark{font:600 clamp(40px,10.2vw,134px)/.9 var(--serif);text-align:center;color:transparent;-webkit-text-stroke:1px rgba(226,183,102,.3);margin-top:70px;user-select:none;white-space:nowrap;overflow:hidden;transition:-webkit-text-stroke-color .5s}
.footer:hover .wordmark{-webkit-text-stroke-color:rgba(226,183,102,.55)}

/* Ghost number behind section titles */
.ghost-num{position:absolute;top:-80px;left:50%;transform:translateX(-50%);font:600 210px/1 var(--serif);color:transparent;-webkit-text-stroke:1px rgba(226,183,102,.13);pointer-events:none;z-index:-1}
.section-head:not(.center) .ghost-num{left:-14px;transform:none}

/* Logo-style ornament */
.ornament{display:flex;align-items:center;justify-content:center;margin:24px auto 0;width:min(340px,70%)}
.ornament::before,.ornament::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold-400))}
.ornament::after{background:linear-gradient(270deg,transparent,var(--gold-400))}
.ornament i{width:10px;height:10px;transform:rotate(45deg);border:1px solid var(--gold-400);margin:0 10px}

.dust{position:absolute;inset:0;pointer-events:none}

@media (max-width:860px){
  .featured{grid-template-columns:1fr}.feat{min-height:440px}.feat-body{padding:26px}
  .split-or,.split-line{display:none}
  .ghost-num{font-size:120px;top:-36px}
  .marquee{transform:none;margin:0}
  .grain{display:none}
}
@media (prefers-reduced-motion:reduce){.loader{display:none}.words .w>span{transform:none}.wipe{clip-path:none}.gold{animation:none}}