/* ============================================================
   First Class Digital — styles.css
   firstclassdigitalco.com · Providence, Rhode Island
   ============================================================ */

:root{
  --navy:#0E1C2F;
  --navy-2:#142238;
  --gold:#C9A96E;
  --gold-dim:rgba(201,169,110,0.15);
  --white:#FFFFFF;
  --ink:#0D1E35;
  --ink-2:rgba(13,30,53,0.55);
  --ink-3:rgba(13,30,53,0.35);
  --border-l:rgba(13,30,53,0.1);
  --border-d:rgba(255,255,255,0.08);
  --mid:rgba(255,255,255,0.55);
  --dim:rgba(255,255,255,0.28);
  --ease:cubic-bezier(0.16,1,0.3,1);
  --ease-out:cubic-bezier(0.22,1,0.36,1);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',system-ui,sans-serif;background:#fff;color:var(--ink);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:var(--navy)}

/* CURSOR */
@media(pointer:fine){
  body{cursor:none}
  #cur{position:fixed;width:12px;height:12px;border:2px solid var(--navy);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .3s var(--ease),height .3s var(--ease),border-color .3s,background .3s,transform .3s var(--ease);background:transparent}
  #cur.on-dark{border-color:rgba(255,255,255,0.7)}
  #cur.big{width:44px;height:44px;background:rgba(201,169,110,0.15);border-color:var(--gold)}
}

/* SCROLL PROGRESS */
#sp{position:fixed;top:0;left:0;height:2px;background:var(--gold);z-index:1001;width:0;transition:width .05s linear}

/* LOADER */
#loader{position:fixed;inset:0;background:var(--navy);z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;transition:opacity .9s ease}
#loader.out{opacity:0;pointer-events:none}
.l-logo{font-family:'Playfair Display',serif;font-size:56px;font-weight:700;letter-spacing:-.03em;color:var(--white);line-height:1;opacity:0;animation:lIn .7s var(--ease) .3s forwards}
.l-logo span{color:var(--gold)}
.l-sub{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.3);opacity:0;animation:lIn .6s ease .7s forwards}
.l-progress{width:120px;height:1px;background:rgba(255,255,255,.1);overflow:hidden;opacity:0;animation:lIn .4s ease .6s forwards}
.l-bar{height:100%;width:0;background:var(--gold);animation:lBar 1.2s var(--ease) .6s forwards}
@keyframes lIn{to{opacity:1;transform:none}from{opacity:0;transform:translateY(8px)}}
@keyframes lBar{to{width:100%}}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:500;height:72px;padding:0 52px;display:flex;align-items:center;background:var(--navy);border-bottom:1px solid transparent;transition:all .4s ease}
nav.scrolled{background:rgba(14,28,47,0.97);border-bottom-color:var(--border-d);backdrop-filter:blur(16px)}
.nav-logo{display:flex;align-items:center;gap:14px;flex-shrink:0}
.nav-logo-mark{font-family:'Playfair Display',serif;font-size:24px;font-weight:700;color:var(--white);letter-spacing:-.02em;line-height:1}
.nav-logo-mark span{color:var(--gold)}
.nav-divider{width:1px;height:22px;background:rgba(255,255,255,.15);flex-shrink:0}
.nav-wordmark{display:flex;flex-direction:column;gap:2px}
.nav-wordmark-top{font-size:10px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.9);line-height:1}
.nav-wordmark-sub{font-size:9px;font-weight:300;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.35);line-height:1}
.nav-links{display:flex;gap:40px;list-style:none;margin-left:60px;margin-right:auto}
.nav-links a{font-size:13px;font-weight:400;letter-spacing:.02em;color:var(--mid);transition:color .2s;position:relative}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;background:var(--gold);transition:width .3s var(--ease)}
.nav-links a:hover{color:var(--white)}
.nav-links a:hover::after{width:100%}
.nav-right{display:flex;align-items:center;gap:28px;flex-shrink:0}
.nav-phone{font-size:13px;color:var(--mid);transition:color .2s}
.nav-phone:hover{color:var(--white)}
.nav-cta{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--navy);background:var(--white);padding:10px 22px;transition:background .2s,transform .2s}
.nav-cta:hover{background:var(--gold);transform:translateY(-1px)}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px;margin-left:16px}
.hamburger span{display:block;width:22px;height:1.5px;background:var(--white);transition:.3s}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(4.5px,4.5px)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(4.5px,-4.5px)}
.mobile-menu{position:fixed;inset:0;background:var(--navy-2);z-index:450;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0 10%;gap:18px;transform:translateX(100%);transition:transform .55s var(--ease)}
.mobile-menu.open{transform:none}
.mobile-menu a{font-family:'Playfair Display',serif;font-size:clamp(32px,9vw,56px);color:var(--white);transition:color .2s}
.mobile-menu a:hover{color:var(--gold)}
.mob-phone{font-family:'DM Sans',sans-serif!important;font-size:16px!important;font-weight:400!important;color:var(--mid)!important;border-top:1px solid var(--border-d);padding-top:24px!important;margin-top:12px}

/* ═══ HERO ═══ */
#hero{
  min-height:100vh;
  background:#FFFFFF;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  padding:0 0 0 52px;
  position:relative;
  overflow:hidden;
}

/* Massive ghost type treatment */
.hero-ghost{
  position:absolute;
  top:56%;
  left:-4%;
  transform:translateY(-50%);
  font-family:'Playfair Display',serif;
  font-size:clamp(140px,18vw,280px);
  font-weight:700;
  line-height:.92;
  letter-spacing:-.04em;
  color:rgba(13,30,53,0.051);
  pointer-events:none;
  user-select:none;
  z-index:0;
  white-space:nowrap;
}

/* Large italic watermark text — keep for parallax target but hidden */
.hero-watermark{display:none}

/* Accent line · vertical gold bar far left */
.hero-accent-line{
  position:absolute;
  left:0;top:15%;bottom:15%;
  width:3px;
  background:linear-gradient(180deg,transparent,var(--gold) 30%,var(--gold) 70%,transparent);
}

.h-left{position:relative;z-index:10;padding:130px 0 100px;max-width:600px}

.h-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:10px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);margin-bottom:36px;
  opacity:0;transform:translateY(10px);animation:hUp .6s var(--ease) .5s forwards;
}
.h-eyebrow::before{content:'';width:24px;height:1px;background:var(--gold)}

.h-headline{
  font-family:'Playfair Display',serif;
  font-size:clamp(54px,6.8vw,92px);
  font-weight:700;
  line-height:.93;
  letter-spacing:-.035em;
  color:var(--navy);
  margin-bottom:28px;
  opacity:0;transform:translateY(28px);
  animation:hUp .9s var(--ease) .62s forwards;
}
.h-headline em{
  display:block;
  font-style:italic;
  font-weight:400;
  color:var(--gold);
  position:relative;
}

/* Underline removed */

.h-body{
  font-size:17px;font-weight:300;line-height:1.75;
  color:var(--ink-2);max-width:420px;
  margin-bottom:52px;
  opacity:0;transform:translateY(12px);
  animation:hUp .7s var(--ease) .82s forwards;
}

.h-actions{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  margin-bottom:60px;
  opacity:0;transform:translateY(10px);
  animation:hUp .6s var(--ease) .98s forwards;
}

.btn-primary{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--white);background:var(--navy);
  padding:16px 32px;
  transition:background .3s ease,transform .3s ease,box-shadow .3s ease;
}
.btn-primary:hover{background:var(--gold);transform:translateY(-2px);box-shadow:0 8px 24px rgba(201,169,110,.28)}
footer .btn-primary,#cta .btn-primary{color:var(--navy);background:var(--white)}
footer .btn-primary:hover,#cta .btn-primary:hover{background:var(--gold);color:var(--white)}

.btn-secondary{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:400;letter-spacing:.04em;
  color:var(--ink-3);border-bottom:1px solid var(--border-l);
  padding-bottom:2px;
  transition:color .3s ease,border-color .3s ease;
}
.btn-secondary:hover{color:var(--navy);border-color:var(--navy)}
.btn-secondary-arrow{transition:transform .3s var(--ease)}
.btn-secondary:hover .btn-secondary-arrow{transform:translateX(5px)}

.h-proof{
  display:flex;align-items:center;gap:0;flex-wrap:wrap;
  border-top:1px solid var(--border-l);
  padding-top:28px;
  opacity:0;transform:translateY(8px);
  animation:hUp .6s var(--ease) 1.12s forwards;
}
.h-proof-item{
  font-size:11px;font-weight:400;letter-spacing:.06em;
  color:var(--ink-3);
  padding-right:24px;margin-right:24px;
  border-right:1px solid var(--border-l);
  display:flex;align-items:center;gap:8px;
}
.h-proof-item:last-child{border-right:none;margin-right:0;padding-right:0}
.h-proof-dot{width:5px;height:5px;border-radius:50%;background:var(--gold);flex-shrink:0}

@keyframes hUp{to{opacity:1;transform:none}from{opacity:0;transform:translateY(var(--ty,12px))}}

/* HERO RIGHT · browser showcase */
.h-right{position:relative;z-index:10;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:flex-end}
.showcase-wrap{position:relative;width:100%;height:100%;display:flex;align-items:center}
.showcase-fade{display:none}

/* Gold glow beneath active mockup — product lighting effect */
.browser-shell-wrap{
  position:absolute;right:-2px;top:50%;
  transform:translateY(-50%);
  width:calc(100% - 4px);max-width:895px;
}
.browser-shell-wrap::after{
  content:'';
  position:absolute;
  bottom:-28px;
  left:8%;right:8%;
  height:40px;
  background:radial-gradient(ellipse 70% 100% at 50% 0%, rgba(201,169,110,0.22) 0%, transparent 100%);
  pointer-events:none;
  z-index:-1;
  opacity:0;
  transition:opacity 1.2s ease 1.4s;
}
.browser-shell-wrap.visible::after{opacity:1}

/* Reset shell positioning — now child of wrap */
.browser-shell{
  position:relative;right:auto;top:auto;
  width:100%;max-width:none;
  transform:perspective(1200px) rotateY(-2deg) rotateX(1deg);
  border-radius:12px 0 0 12px;
  border:1px solid rgba(0,0,0,0.1);
  border-right:none;
  overflow:hidden;
  box-shadow:
    -64px 40px 120px rgba(13,30,53,.28),
    -24px 12px 48px rgba(13,30,53,.18),
    -6px 0 16px rgba(13,30,53,.12),
    0 2px 0 rgba(255,255,255,.6) inset;
  background:#f0f0f0;
  opacity:0;
  transition:opacity .8s ease 1.1s;
}
.browser-shell.visible{opacity:1}
.browser-shell.floating{animation:shellFloat 5s ease-in-out infinite}
@keyframes shellFloat{
  0%,100%{transform:perspective(1200px) rotateY(-2deg) rotateX(1deg)}
  50%{transform:translateY(-12px) perspective(1200px) rotateY(-2.5deg) rotateX(0.5deg)}
}

.browser-chrome{
  height:40px;
  background:#f6f6f6;
  border-bottom:1px solid #e0e0e0;
  display:flex;align-items:center;gap:12px;
  padding:0 16px;
  flex-shrink:0;
}
.b-dots{display:flex;gap:6px}
.b-dot{width:12px;height:12px;border-radius:50%}
.b-dot:nth-child(1){background:#FF5F57}
.b-dot:nth-child(2){background:#FFBD2E}
.b-dot:nth-child(3){background:#28CA40}
.b-urlbar{
  flex:1;max-width:320px;margin-left:8px;
  height:24px;background:#ebebeb;border-radius:5px;
  display:flex;align-items:center;padding:0 10px;
  font-size:11px;font-weight:400;color:#888;
  letter-spacing:.01em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.browser-viewport{width:100%;aspect-ratio:16/10;position:relative;overflow:hidden}
.browser-viewport iframe{
  position:absolute;top:0;left:0;
  width:200%;height:200%;
  transform:scale(0.5);transform-origin:top left;
  border:none;pointer-events:none;
  opacity:1;
  transition:opacity .6s ease, transform .6s var(--ease-out);
}
.browser-viewport iframe.exiting{
  opacity:0;
  transform:scale(0.5) translateY(-30px);
  transform-origin:top left;
}
.browser-viewport iframe.entering{
  opacity:0;
  transform:scale(0.5) translateY(40px);
  transform-origin:top left;
}
.browser-viewport iframe.entered{
  opacity:1;
  transform:scale(0.5) translateY(0);
  transform-origin:top left;
}

/* Site switcher */
.site-switcher{
  position:absolute;
  left:-20px;
  top:50%;transform:translateY(-50%);
  z-index:20;
  display:flex;flex-direction:column;gap:10px;
  align-items:center;
}
.site-dot{
  width:7px;height:7px;border-radius:50%;
  background:rgba(13,30,53,.15);border:none;cursor:pointer;
  transition:background .3s,transform .35s var(--ease),height .35s var(--ease);
  padding:0;flex-shrink:0;
}
.site-dot.active{background:var(--gold);transform:scaleY(1);height:22px;border-radius:4px}
.site-dot:hover:not(.active){background:rgba(13,30,53,.4)}

/* Site label */
.site-label{
  position:absolute;
  bottom:-52px;
  right:0;
  font-size:10px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);
  text-align:right;
  white-space:nowrap;
  transition:opacity .4s;
  padding-right:2px;
}

/* TICKER */
.ticker{background:var(--navy);border-top:none;padding:16px 0;overflow:hidden}
.t-track{display:flex;width:max-content;animation:tickScroll 28s linear infinite}
.t-track:hover{animation-play-state:paused}
.t-item{
  font-size:11px;font-weight:300;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.3);padding:0 44px;white-space:nowrap;
  display:flex;align-items:center;gap:44px;
}
.t-item::after{content:'✦';color:var(--gold);font-size:8px;opacity:.6}
@keyframes tickScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ═══ SHARED SECTION STYLES ═══ */
.sec{padding:120px 52px}
.lbl{
  font-size:10px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);display:flex;align-items:center;gap:10px;margin-bottom:22px;
}
.lbl::before{content:'';width:0;height:1px;background:var(--gold);transition:width .6s var(--ease-out)}
.lbl.in::before{width:20px}
.h2{
  font-family:'Playfair Display',serif;
  font-size:clamp(36px,4.8vw,64px);font-weight:700;line-height:1.04;letter-spacing:-.03em;
  color:var(--navy);
}
.h2 em{font-style:italic;font-weight:400;color:var(--gold)}
.h2-light{color:var(--white)}
.body-lg{font-size:17px;font-weight:300;line-height:1.78;color:var(--ink-2)}
.r{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.r.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}
.d4{transition-delay:.32s}.d5{transition-delay:.4s}.d6{transition-delay:.48s}

/* ═══ SERVICES ═══ */
#services{background:#fff;padding:120px 52px}
.svc-header{
  display:grid;grid-template-columns:1fr 1fr;gap:80px;
  align-items:end;margin-bottom:80px;
}
.svc-header-r{padding-bottom:8px}
.svc-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
}
.svc{
  padding:48px 36px;
  border:1px solid var(--border-l);
  margin:-1px 0 0 -1px;
  position:relative;overflow:hidden;
  transition:background .35s,transform .35s var(--ease),box-shadow .35s;
  cursor:default;
}
.svc:hover{
  background:var(--navy);
  z-index:2;
  transform:scale(1.02);
  box-shadow:0 24px 60px rgba(13,30,53,.18);
}
.svc-icon{
  width:44px;height:44px;
  border:1px solid var(--border-l);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:28px;
  transition:border-color .3s,background .3s;
}
.svc:hover .svc-icon{border-color:rgba(201,169,110,.4);background:rgba(201,169,110,.08)}
.svc-icon svg{width:18px;height:18px;stroke:var(--gold);fill:none;stroke-width:1.5}
.svc-num{font-size:10px;letter-spacing:.18em;color:var(--gold);margin-bottom:16px;display:block;transition:color .3s}
.svc-name{
  font-family:'Playfair Display',serif;
  font-size:21px;font-weight:700;margin-bottom:14px;
  color:var(--navy);transition:color .3s;line-height:1.15;
}
.svc:hover .svc-name{color:var(--white)}
.svc-desc{font-size:13px;font-weight:300;line-height:1.72;color:var(--ink-2);transition:color .3s}
.svc:hover .svc-desc{color:rgba(255,255,255,.55)}
.svc-arrow{
  position:absolute;bottom:28px;right:28px;
  font-size:20px;color:transparent;
  transition:color .3s,transform .4s var(--ease);
}
.svc:hover .svc-arrow{color:var(--gold);transform:translate(4px,-4px)}

/* ═══ PORTFOLIO ═══ */
#portfolio{background:#F8F7F4;padding:120px 52px}
.port-header{margin-bottom:72px}
.port-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:2px;background:rgba(13,30,53,.08);
}
.port-card{
  background:#F8F7F4;position:relative;
  overflow:hidden;cursor:pointer;
  transition:background .4s ease, transform .4s ease;
}
.port-card:hover{background:#fff;transform:translateY(-6px)}
.port-card-img{
  width:100%;height:220px;overflow:hidden;position:relative;
  background:var(--navy);
}
.port-card-img iframe{
  position:absolute;top:0;left:0;
  width:200%;height:200%;
  transform:scale(0.5);transform-origin:top left;
  border:none;pointer-events:none;
  transition:transform .4s ease;
}
.port-card:hover .port-card-img iframe{transform:scale(0.5) scale(1.03);transform-origin:top left}
.port-card-img-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(13,30,53,.7) 100%);
  z-index:2;
  opacity:0;transition:opacity .4s;
  display:flex;align-items:flex-end;padding:20px;
}
.port-card:hover .port-card-img-overlay{opacity:1}
.port-card-live{
  font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--white);display:flex;align-items:center;gap:6px;
}
.port-card-live-dot{width:5px;height:5px;border-radius:50%;background:#4ade80;flex-shrink:0;animation:livePulse 2s ease-in-out infinite}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.4}}
.port-live-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:9px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);
  border:1px solid rgba(201,169,110,0.45);
  background:rgba(13,30,53,0.05);
  padding:5px 11px;border-radius:20px;
  margin-bottom:14px;
}
.port-live-badge-dot{width:5px;height:5px;border-radius:50%;background:var(--gold);animation:livePulse 2s ease-in-out infinite;flex-shrink:0}
.port-card-inner{padding:32px 32px 36px}
.port-card-num{font-size:10px;letter-spacing:.18em;color:var(--gold);margin-bottom:12px;display:block;text-transform:uppercase}
.port-card-name{font-family:'Playfair Display',serif;font-size:22px;font-weight:700;color:var(--navy);margin-bottom:6px;line-height:1.15;transition:color .25s}
.port-card:hover .port-card-name{color:var(--gold)}
.port-card-cat{font-size:12px;font-weight:300;color:var(--ink-3);margin-bottom:16px}
.port-card-desc{font-size:13px;font-weight:300;color:var(--ink-2);line-height:1.65;margin-bottom:20px}
.port-card-cta{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);transition:gap .3s,color .25s}
.port-card:hover .port-card-cta{gap:14px;color:var(--gold);transform:translateX(4px)}
.port-card-bar{position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .4s ease}
.port-card:hover .port-card-bar{transform:scaleX(1)}

/* Preview panel */
.prev-panel{position:fixed;top:0;right:-520px;width:500px;height:100vh;background:var(--navy-2);border-left:1px solid var(--border-d);z-index:300;transition:right .55s var(--ease);display:flex;flex-direction:column;pointer-events:none;overflow:hidden}
.prev-panel.on{right:0;pointer-events:auto}
.prev-img{flex:0 0 48%;position:relative;overflow:hidden}
.prev-img::after{content:'';position:absolute;bottom:0;left:0;right:0;height:100px;background:linear-gradient(transparent,var(--navy-2));z-index:2}
.prev-body{flex:1;padding:32px 36px 36px;display:flex;flex-direction:column;gap:10px}
.prev-tag{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.prev-title{font-family:'Playfair Display',serif;font-size:24px;font-weight:700;color:var(--white);line-height:1.15}
.prev-desc{font-size:13px;font-weight:300;color:var(--mid);line-height:1.65}
.prev-link{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin-top:auto;transition:gap .3s}
.prev-link:hover{gap:14px}
.prev-close{position:absolute;top:18px;right:18px;background:none;border:none;cursor:pointer;color:var(--mid);font-size:16px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;transition:color .2s;z-index:10;border:1px solid var(--border-d)}
.prev-close:hover{color:var(--white);border-color:rgba(255,255,255,.3)}

/* ═══ MARQUEE DIVIDER ═══ */
.marquee-section{
  overflow:hidden;padding:0;
  background:var(--navy);
  border-top:1px solid rgba(255,255,255,.06);
}
.marquee-inner{
  display:flex;width:max-content;
  animation:marquee 20s linear infinite;
  padding:20px 0;
}
.marquee-item{
  font-family:'Playfair Display',serif;
  font-size:clamp(36px,4vw,56px);
  font-weight:700;font-style:italic;
  white-space:nowrap;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.2);
  padding:0 40px;letter-spacing:-.02em;
}
.marquee-item.filled{
  color:rgba(201,169,110,.15);
  -webkit-text-stroke:none;
}
.marquee-sep{
  font-size:18px;color:var(--gold);
  align-self:center;opacity:.5;
  padding:0 16px;
}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ═══ PROCESS ═══ */
#process{background:#fff;padding:120px 52px}
.proc-header{
  display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end;margin-bottom:80px;
}
.proc-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:0;position:relative;
}
.proc-grid::before{
  content:'';
  position:absolute;
  top:36px;left:calc(16.666% + 20px);right:calc(16.666% + 20px);
  height:1px;
  background:linear-gradient(90deg,var(--gold),rgba(201,169,110,.2),var(--gold));
  opacity:.4;
  z-index:0;
}
.proc-cell{
  padding:44px 32px 44px;
  position:relative;z-index:1;
  transition:background .3s;
}
.proc-cell:not(:last-child)::after{
  content:'';position:absolute;right:0;top:20%;bottom:20%;width:1px;
  background:var(--border-l);
}
.proc-cell:nth-child(3)::after{display:none}
.proc-cell:nth-child(4)::after{
  content:'';position:absolute;right:0;top:20%;bottom:20%;width:1px;
  background:var(--border-l);
}
.proc-cell:nth-child(6)::after{display:none}
.proc-step-num{
  font-family:'Playfair Display',serif;
  font-size:13px;font-weight:700;
  color:var(--white);background:var(--navy);
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:24px;letter-spacing:.02em;
  position:relative;z-index:1;
  transition:background .3s,transform .3s var(--ease);
}
.proc-cell:hover .proc-step-num{background:var(--gold);transform:scale(1.1)}
.proc-cell-title{font-family:'Playfair Display',serif;font-size:20px;font-weight:700;margin-bottom:12px;color:var(--navy)}
.proc-cell-desc{font-size:13px;font-weight:300;color:var(--ink-2);line-height:1.68}
.proc-row-label{
  grid-column:1/-1;
  font-size:10px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);padding:32px 32px 0;
  display:flex;align-items:center;gap:10px;
}
.proc-row-label::before{content:'';flex:1;height:1px;background:var(--border-l)}
.proc-row-label::after{content:'';flex:1;height:1px;background:var(--border-l)}

/* ═══ CTA ═══ */
#cta{
  background:var(--navy);
  padding:140px 52px;
  position:relative;overflow:hidden;
}
#cta::before{
  content:'Built Different.';
  position:absolute;
  right:-2%;bottom:-6%;
  font-family:'Playfair Display',serif;
  font-size:clamp(80px,12vw,180px);
  font-weight:700;font-style:italic;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.04);
  white-space:nowrap;
  pointer-events:none;
  letter-spacing:-.04em;
}
.cta-inner{
  display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;
  position:relative;z-index:1;
}
.cta-h{
  font-family:'Playfair Display',serif;
  font-size:clamp(40px,5vw,68px);font-weight:700;line-height:1.02;letter-spacing:-.03em;
  color:var(--white);margin-bottom:20px;
}
.cta-h em{font-style:italic;font-weight:400;color:var(--gold)}
.cta-sub{font-size:17px;font-weight:300;line-height:1.72;color:var(--mid);margin-bottom:36px;max-width:420px}
.contact-list{list-style:none;margin-top:36px}
.contact-list li{
  display:flex;align-items:center;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--border-d);
  font-size:14px;font-weight:300;color:var(--mid);
  transition:padding-left .3s var(--ease);
}
.contact-list li:first-child{border-top:1px solid var(--border-d)}
.contact-list li:hover{padding-left:6px;color:var(--white)}
.contact-list a{color:inherit;transition:color .2s}
.c-icon{color:var(--gold);font-size:15px;flex-shrink:0}
.cta-r{display:flex;flex-direction:column;gap:16px}
.cta-note{font-size:12px;font-weight:300;color:var(--dim);line-height:1.6;max-width:300px}
.cta-quote{
  margin-top:36px;padding-top:36px;border-top:1px solid var(--border-d);
  font-family:'Playfair Display',serif;font-size:16px;font-style:italic;
  color:var(--dim);line-height:1.65;
}

/* ═══ FOOTER ═══ */
footer{background:#060E1B;padding:72px 52px 36px;border-top:1px solid var(--border-d)}
.ft-top{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:56px;margin-bottom:60px}
.ft-logo-mark{font-family:'Playfair Display',serif;font-size:22px;font-weight:700;color:var(--white);letter-spacing:-.02em}
.ft-logo-mark span{color:var(--gold)}
.ft-tag{font-size:13px;font-weight:300;font-style:italic;color:var(--dim);margin:10px 0}
.ft-about{font-size:13px;font-weight:300;line-height:1.7;color:var(--dim);max-width:260px}
.ft-col-h{font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.8);margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border-d)}
.ft-links{list-style:none}
.ft-links li{margin-bottom:10px}
.ft-links a{font-size:13px;font-weight:300;color:var(--dim);transition:color .2s,padding-left .2s}
.ft-links a:hover{color:var(--gold);padding-left:4px}
.ft-ci{font-size:13px;font-weight:300;color:var(--dim);margin-bottom:8px;line-height:1.5}
.ft-ci a{color:var(--dim);transition:color .2s}
.ft-ci a:hover{color:var(--gold)}
.ft-bot{border-top:1px solid var(--border-d);padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.ft-copy{font-size:11px;font-weight:300;color:rgba(255,255,255,.2)}
.ft-copy span{color:var(--gold)}

/* ═══ MICRO-INTERACTIONS ═══ */
/* Nav CTA pulse on hover */
.nav-cta{position:relative;overflow:hidden}
.nav-cta::after{content:'';position:absolute;inset:0;background:rgba(201,169,110,0.15);transform:translateX(-100%);transition:transform .3s var(--ease)}
.nav-cta:hover::after{transform:translateX(0)}

/* Primary button shine sweep */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.08),transparent);transform:skewX(-15deg);transition:left .5s ease}
.btn-primary:hover::after{left:160%}

/* Port card image zoom */
.port-card-img iframe{transition:transform .6s var(--ease),opacity .3s ease}
.port-card:hover .port-card-img iframe{transform:scale(0.5) scale(1.03);transform-origin:top left}

/* Contact list row hover gold icon */
.contact-list li .c-icon{transition:transform .3s var(--ease)}
.contact-list li:hover .c-icon{transform:scale(1.2)}

/* Footer link chevron */
.ft-links a{display:inline-flex;align-items:center;gap:0}
.ft-links a::after{content:' →';opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .2s;font-size:11px;color:var(--gold)}
.ft-links a:hover::after{opacity:1;transform:translateX(0)}

/* Proc step number ring pulse on hover */
.proc-step-num{box-shadow:0 0 0 0 rgba(201,169,110,0)}
.proc-cell:hover .proc-step-num{box-shadow:0 0 0 6px rgba(201,169,110,0.12)}
/* From left */
.from-left{
  opacity:0;
  transform:translateX(-60px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.from-left.in{opacity:1;transform:none}

/* From right */
.from-right{
  opacity:0;
  transform:translateX(60px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.from-right.in{opacity:1;transform:none}

/* From bottom */
.from-bottom{
  opacity:0;
  transform:translateY(50px);
  transition:opacity .85s var(--ease-out), transform .85s var(--ease-out);
}
.from-bottom.in{opacity:1;transform:none}

/* Delays for staggering siblings */
.anim-d1{transition-delay:.1s}
.anim-d2{transition-delay:.2s}
.anim-d3{transition-delay:.3s}
.anim-d4{transition-delay:.4s}
.anim-d5{transition-delay:.5s}
.anim-d6{transition-delay:.6s}
.sec-reveal{
  opacity:0;
  transform:translateY(40px);
  transition:opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.sec-reveal.in{opacity:1;transform:none}

/* Horizontal slide for alternating elements */
.slide-left{opacity:0;transform:translateX(-40px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.slide-right{opacity:0;transform:translateX(40px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.slide-left.in,.slide-right.in{opacity:1;transform:none}

/* Scale reveal for cards */
.scale-in{opacity:0;transform:scale(0.94) translateY(20px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.scale-in.in{opacity:1;transform:none}

/* Number/counter pop */
.pop{opacity:0;transform:scale(0.7);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.pop.in{opacity:1;transform:none}

/* Section header line · draws in on scroll */
.lbl-line{display:block;height:1px;background:var(--gold);width:0;transition:width .9s var(--ease-out) .2s}
.lbl-line.in{width:40px}

/* Ticker reveal */
.ticker{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.ticker.in{opacity:1;transform:none}
.marquee-section{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.marquee-section.in{opacity:1;transform:none}
/* ═══ WHY FCD ═══ */
#why-fcd{
  background:linear-gradient(160deg, var(--navy) 0%, #0a1626 100%);
  padding:120px 52px;position:relative;overflow:hidden;
}
#why-fcd::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 50% 70% at 100% 50%, rgba(201,169,110,0.05) 0%, transparent 65%);
  pointer-events:none;
}
.why-fcd-header{margin-bottom:72px}
.why-fcd-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:2px;background:rgba(255,255,255,0.07);
}
.why-fcd-card{
  background:linear-gradient(160deg, #111f35 0%, #0d1a2c 100%);
  padding:60px 48px;
  position:relative;
  transition:transform .4s ease, border-left-color .4s ease, background .4s ease;
  overflow:hidden;
  border-left:3px solid transparent;
}
.why-fcd-card:hover{
  transform:translateY(-5px);
  border-left-color:var(--gold);
  background:linear-gradient(160deg, #152136 0%, #0f1d30 100%);
}
.why-fcd-card::before{
  content:'';
  position:absolute;top:0;left:0;right:0;
  height:1px;
  background:rgba(255,255,255,0.12);
  transition:background .4s ease;
}
.why-fcd-card:hover::before{background:rgba(201,169,110,0.45)}
.why-fcd-num{
  font-family:'Playfair Display',serif;
  font-size:72px;font-weight:700;line-height:1;
  color:rgba(201,169,110,0.18);
  margin-bottom:28px;
  letter-spacing:-.03em;
  transition:color .4s ease;
}
.why-fcd-card:hover .why-fcd-num{color:rgba(201,169,110,0.32)}
.why-fcd-title{
  font-family:'Playfair Display',serif;
  font-size:24px;font-weight:700;
  color:var(--white);margin-bottom:18px;line-height:1.15;
}
.why-fcd-desc{font-size:14px;font-weight:300;color:rgba(255,255,255,0.68);line-height:1.78}
@media(max-width:1100px){
  .why-fcd-grid{grid-template-columns:1fr}
  #hero{grid-template-columns:1fr;padding:0 52px}
  .h-left{padding:160px 0 80px;max-width:100%}
  .h-right{display:none}
  .svc-header,.proc-header{grid-template-columns:1fr;gap:28px}
  .svc-grid{grid-template-columns:1fr 1fr}
  .port-grid{grid-template-columns:1fr 1fr}
  .cta-inner{grid-template-columns:1fr;gap:52px}
  .ft-top{grid-template-columns:1fr 1fr;gap:36px}
  .proc-grid::before{display:none}
}
@media(max-width:768px){
  nav{padding:0 24px;height:64px}
  .nav-links,.nav-cta,.nav-phone{display:none}
  .hamburger{display:flex}
  #hero,.sec,#portfolio,#process,#why-fcd,#cta{padding-left:24px;padding-right:24px}
  .svc-grid,.port-grid,.proc-grid,.why-fcd-grid{grid-template-columns:1fr}
  .prev-panel{width:100vw;right:-100vw}
  .ft-top{grid-template-columns:1fr}
  .h-actions{flex-direction:column;align-items:flex-start}
  .h-proof{flex-direction:column;align-items:flex-start;gap:10px}
  .h-proof-item{border-right:none;padding-right:0;margin-right:0}
  .proc-cell:not(:last-child)::after,.proc-cell:nth-child(4)::after{display:none}
}
@media(pointer:coarse){body{cursor:auto}#cur{display:none}}