/* ==========================================================================
   YANUCH LIMITED — Design tokens
   Colors sampled directly from the company brochure (Yanuch Brochure PDF)
   ========================================================================== */
:root{
  --navy:        #2A3896;
  --navy-2:      #232F82;
  --navy-deep:   #171E58;
  --navy-ink:    #10143D;
  --stone:       #C7C5C3;
  --stone-light: #EDEDEA;
  --paper:       #F6F6F4;
  --white:       #FFFFFF;
  --ink:         #16182C;
  --ink-soft:    #4A4C5E;
  --ink-faint:   #8688A0;
  --line:        #E4E3E8;

  --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --wrap: 1240px;
  --pad: clamp(24px, 5vw, 64px);
  --radius: 14px;

  --ease: cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{ box-sizing: border-box; }
/* Prevent CSS Grid/Flex auto-sizing (min-width:auto) from forcing
   containers wider than their parent on narrow viewports. */
.sector-grid > *, .services-grid > *, .why-grid > *, .client-grid > *,
.work-media, .work-media > *, .leaders > *, .stats > .stat,
.capability-strip > *, .discipline-row > *{ min-width: 0; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
svg{ width:100%; height:100%; }

.wrap{
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* ==========================================================================
   Preloader
   ========================================================================== */
.preloader{
  position: fixed; inset:0; z-index: 9999;
  background: var(--navy);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .6s var(--ease), visibility .6s var(--ease);
}
.preloader.done{ opacity:0; visibility:hidden; }
.preloader-mark{
  width: 64px; height:auto;
  filter: brightness(0) invert(1);
  animation: pulse 1.1s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ transform:scale(1); opacity:.7;} 50%{ transform:scale(1.12); opacity:1;} }

/* ==========================================================================
   Topbar + Nav
   ========================================================================== */
.topbar{
  background: var(--navy-ink);
  color: rgba(255,255,255,.78);
  font-size: 12.5px;
  letter-spacing: .02em;
}
.topbar-inner{
  max-width: var(--wrap); margin:0 auto; padding: 8px var(--pad);
  display:flex; align-items:center; justify-content:space-between;
}
.topbar .dot{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background: #6FE3A1; margin-right:8px; vertical-align:middle;
  box-shadow: 0 0 0 3px rgba(111,227,161,.18);
}
.topbar-links a{ color:#fff; opacity:.92; }
.topbar-links a:hover{ opacity:1; text-decoration:underline; }
.topbar .sep{ margin:0 8px; opacity:.4; }

.site-header{
  position: sticky; top:0; z-index: 500;
  background: rgba(255,255,255,0);
  border-bottom: 1px solid transparent;
  transition: background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header.scrolled{
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 30px -18px rgba(16,20,61,.35);
}
.nav-inner{
  max-width: var(--wrap); margin:0 auto; padding: 14px var(--pad);
  display:flex; align-items:center; gap: 28px;
}
.brand{ display:flex; align-items:center; gap:10px; margin-right:auto; }
.brand-mark{ width: 30px; height:auto; }
.brand-word{
  font-weight:800; letter-spacing:.02em; color: var(--navy);
  font-size: 16px; line-height:1;
}
.brand-word em{
  display:block; font-style:normal; font-weight:400; font-size:8.5px;
  letter-spacing:.32em; color: var(--ink-faint); margin-top:3px;
}
.nav-links{ display:flex; align-items:center; gap: 30px; }
.nav-link{
  position:relative; font-size:14px; font-weight:500; color: var(--ink-soft);
  padding: 6px 0; transition: color .25s;
}
.nav-link::before{
  content: attr(data-num); font-size:9px; font-weight:700; color: var(--navy);
  margin-right:5px; opacity:.55;
}
.nav-link::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background: var(--navy); transition: right .3s var(--ease);
}
.nav-link:hover, .nav-link.active{ color: var(--navy); }
.nav-link:hover::after, .nav-link.active::after{ right:0; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:600; font-size:14px; padding: 12px 24px; border-radius: 100px;
  border: 1.5px solid transparent; cursor:pointer; white-space:nowrap;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s, border-color .25s;
}
.btn-nav{ background: var(--navy); color:#fff; padding:11px 22px; }
.btn-nav:hover{ transform: translateY(-2px); box-shadow: 0 12px 22px -10px rgba(42,56,150,.55); }
.btn-primary{ background: var(--navy); color:#fff; box-shadow: 0 14px 30px -14px rgba(42,56,150,.6); }
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 18px 34px -12px rgba(42,56,150,.7); }
.btn-ghost{ border-color: rgba(255,255,255,.55); color:#fff; }
.btn-ghost:hover{ background: rgba(255,255,255,.12); border-color:#fff; transform: translateY(-2px); }

.hamburger{
  display:none; flex-direction:column; gap:5px; width:26px; background:none; border:0; cursor:pointer; padding:4px;
  position: relative; z-index: 300;
}
.hamburger span{ height:2px; background: var(--navy); border-radius:2px; transition: transform .3s, opacity .3s; }
.hamburger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; min-height: 100vh; display:flex;
  background: var(--navy-deep);
  overflow:hidden;
}
.hero-photo{
  position:absolute; inset:0;
  background-size: cover; background-position: center 30%;
  clip-path: polygon(0 0, 62% 0, 38% 100%, 0 100%);
}
.hero-photo::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(16,20,61,.15), rgba(16,20,61,.65));
}
.hero-panel{
  position:relative; margin-left:auto; width: 100%;
  display:flex; align-items:center;
  background: var(--white);
  clip-path: polygon(38% 0, 100% 0, 100% 100%, 14% 100%);
}
.hero-blueprint{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(100deg, rgba(42,56,150,.05) 0 1px, transparent 1px 90px),
    repeating-linear-gradient(10deg, rgba(42,56,150,.05) 0 1px, transparent 1px 90px);
  mask-image: radial-gradient(ellipse 900px 700px at 78% 30%, #000 10%, transparent 70%);
}
.hero-panel-content{
  position:relative; z-index:2; margin-left: auto;
  width: min(560px, 92%);
  padding: 140px var(--pad) 120px clamp(40px,8vw,90px);
}
.eyebrow{
  font-size: 12.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color: var(--navy); margin-bottom: 26px;
}
.hero-logo{ width: min(420px, 100%); height:auto; margin-bottom: 26px; }
.hero-tagline{ font-size: clamp(22px, 2.6vw, 30px); line-height:1.25; margin-bottom:40px; }
.hero-tagline .light{ display:block; font-weight:300; color: var(--ink-soft); }
.hero-tagline .bold{ display:block; font-weight:700; color: var(--navy); }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-cta .btn-ghost{ border-color: var(--navy); color: var(--navy); }
.hero-cta .btn-ghost:hover{ background: var(--navy); color:#fff; }

.hero-ribbon{
  position:absolute; top:-10%; left:32%; width: 90px; height:140%;
  background: linear-gradient(180deg, var(--navy), var(--navy-2));
  transform: rotate(20deg);
  z-index:1; opacity:.95;
}
.scroll-cue{
  position:absolute; left: var(--pad); bottom: 34px; z-index:3;
  display:flex; align-items:center; gap:10px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color: rgba(255,255,255,.85);
}
.scroll-cue span{
  width:22px; height:34px; border:1.5px solid rgba(255,255,255,.7); border-radius:20px; position:relative;
}
.scroll-cue span::before{
  content:''; position:absolute; top:6px; left:50%; width:4px; height:4px; margin-left:-2px;
  background:#fff; border-radius:50%; animation: scrollDot 1.6s infinite;
}
@keyframes scrollDot{ 0%{ transform:translateY(0); opacity:1;} 70%{ transform:translateY(14px); opacity:0;} 100%{opacity:0;} }

@media (max-width: 860px){
  .hero{ min-height: auto; flex-direction: column; }
  .hero-photo{ position:relative; width:100%; height:38vh; clip-path:none; flex-shrink:0; }
  .hero-panel{ clip-path:none; width:100%; }
  .hero-panel-content{ padding: 48px 24px 64px; width:100%; margin:0; }
  .hero-ribbon{ display:none; }
  .hero-blueprint{ mask-image: radial-gradient(ellipse 500px 500px at 50% 10%, #000 10%, transparent 70%); }
}

/* ==========================================================================
   Section shell / ghost numerals / side labels
   ========================================================================== */
.section{
  position: relative;
  padding: 130px 0 110px;
  overflow: hidden;
}
.ghost-num{
  position:absolute; top: 30px; left: calc(var(--pad) - 10px);
  font-size: clamp(140px, 18vw, 260px); font-weight:800; line-height:1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(42,56,150,.22);
  user-select:none; z-index:0; pointer-events:none;
}
.ghost-num--light{ -webkit-text-stroke: 1.5px rgba(255,255,255,.16); }
.side-label{
  position:absolute; top: 60px; right: var(--pad);
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size:12px; letter-spacing:.3em; text-transform:uppercase; font-weight:600;
  color: var(--ink-faint); z-index:0;
}
.side-label--light{ color: rgba(255,255,255,.5); }

.section-head{ position:relative; z-index:1; max-width: 720px; margin-bottom: 56px; }
.kicker{
  display:flex; align-items:center; gap:10px;
  font-size:12.5px; font-weight:700; letter-spacing:.2em; color: var(--navy); margin-bottom:18px;
}
.kicker--light{ color:#9FB0FF; }
.mark-bullet{
  width:10px; height:10px;
  background: var(--navy);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}
.kicker--light .mark-bullet{ background:#9FB0FF; }

.headline{ font-size: clamp(30px, 4.2vw, 48px); line-height:1.14; margin-bottom:22px; }
.headline .light{ display:block; font-weight:300; color: var(--ink-soft); }
.headline .bold{ display:block; font-weight:800; color: var(--navy); }
.headline--light .light{ color: rgba(255,255,255,.72); }
.headline--light .bold{ color:#fff; }
.lede{ font-size:17px; line-height:1.7; color: var(--ink-soft); max-width: 620px; }
.lede--light{ color: rgba(255,255,255,.72); }

/* ==========================================================================
   01 ABOUT
   ========================================================================== */
.section-about{ background: var(--white); }
.approach-panel{
  position:relative; z-index:1;
  background: linear-gradient(120deg, var(--navy), var(--navy-2));
  color:#fff; padding: 40px clamp(28px,5vw,56px);
  border-radius: var(--radius);
  max-width: 720px; margin-bottom: 80px;
  clip-path: polygon(0 0, 100% 0, 96% 100%, 0% 100%);
}
.approach-panel h3{ font-size:13px; letter-spacing:.18em; text-transform:uppercase; margin-bottom:14px; opacity:.85; }
.approach-panel p{ font-size:18px; line-height:1.65; font-weight:300; }

.sectors-title{
  font-size:13px; letter-spacing:.2em; text-transform:uppercase; color: var(--ink-faint);
  margin-bottom: 30px; text-align:center; position:relative; z-index:1;
}
.sector-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
.sector-card{
  text-align:center; padding: 34px 18px; border:1px solid var(--line); border-radius: var(--radius);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.sector-card:hover{ transform: translateY(-8px); box-shadow: 0 24px 40px -22px rgba(23,30,88,.28); border-color: transparent; }
.sector-icon{
  width:64px; height:64px; margin: 0 auto 18px; color: var(--navy);
  background: var(--stone-light); border-radius: 18px;
  display:flex; align-items:center; justify-content:center; padding:14px;
}
.sector-card h4{ font-size:16px; font-weight:700; margin-bottom:8px; }
.sector-card p{ font-size:13.5px; color: var(--ink-faint); line-height:1.5; }

@media (max-width: 760px){ .sector-grid{ grid-template-columns: repeat(2,1fr); } }

/* ==========================================================================
   02 SERVICES  (dark)
   ========================================================================== */
.section-services{
  background: radial-gradient(ellipse 1200px 700px at 15% -10%, #1E2874, transparent),
              linear-gradient(160deg, var(--navy-deep), var(--navy-ink));
  color:#fff;
}
.services-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns: repeat(4, 1fr) 1.1fr; gap:20px;
}
.service-card{
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
  border-radius: var(--radius);
  padding: 30px 24px 26px;
  transition: transform .35s var(--ease), background .35s;
}
.service-card:hover{ transform: translateY(-8px); background: rgba(255,255,255,.08); }
.service-num{
  display:block; font-size:13px; font-weight:700; color:#9FB0FF; margin-bottom:16px; letter-spacing:.08em;
}
.service-card h3{ font-size:18px; font-weight:700; margin-bottom:16px; line-height:1.3; }
.service-card ul li{
  font-size:13.5px; color: rgba(255,255,255,.68); padding: 7px 0 7px 16px; position:relative;
  border-top: 1px solid rgba(255,255,255,.08);
}
.service-card ul li:first-child{ border-top:none; }
.service-card ul li::before{
  content:''; position:absolute; left:0; top:15px; width:6px; height:6px; background:#5C6BD1; border-radius:1px; transform:rotate(45deg);
}
.service-side{
  background: linear-gradient(135deg, var(--navy), #4453C4);
  border-radius: var(--radius); padding: 30px 26px;
  display:flex; flex-direction:column; justify-content:center;
}
.service-side h3{ font-size:22px; font-weight:800; line-height:1.25; margin-bottom:14px; }
.service-side p{ font-size:14px; line-height:1.6; color: rgba(255,255,255,.82); }

.capability-strip{
  position:relative; z-index:1; margin-top: 60px; padding-top: 50px;
  border-top: 1px solid rgba(255,255,255,.12);
  display:grid; grid-template-columns: repeat(3,1fr); gap: 40px;
}
.capability-item h4{
  display:flex; align-items:center; gap:12px; font-size:16px; font-weight:700; margin-bottom:14px;
}
.capability-item h4 span{
  font-size:12px; width:28px; height:28px; border-radius:50%; border:1px solid rgba(255,255,255,.3);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#9FB0FF;
}
.capability-item p{ font-size:14px; line-height:1.75; color: rgba(255,255,255,.62); }

@media (max-width: 980px){
  .services-grid{ grid-template-columns: repeat(2,1fr); }
  .service-side{ grid-column: span 2; }
  .capability-strip{ grid-template-columns: 1fr; gap:34px; }
}
@media (max-width: 560px){
  .services-grid{ grid-template-columns: 1fr; }
  .service-side{ grid-column: span 1; }
}

/* ==========================================================================
   03 WHY YANUCH
   ========================================================================== */
.section-why{ background: var(--paper); }
.why-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns: repeat(4, 1fr); gap:18px;
  margin-bottom: 70px;
}
.why-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding: 26px 20px; display:flex; align-items:center; gap:16px;
  min-width: 0;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.why-card:hover{ transform: translateY(-6px); box-shadow: 0 20px 36px -22px rgba(23,30,88,.25); }
.why-icon{
  width:42px; height:42px; flex-shrink:0; color:#fff; background: var(--navy);
  border-radius:50%; padding:10px;
}
.why-card p{ font-size:14px; font-weight:600; line-height:1.4; overflow-wrap: break-word; min-width:0; }

.stats{
  position:relative; z-index:1;
  background: var(--navy); border-radius: var(--radius); color:#fff;
  padding: 46px clamp(20px,5vw,60px);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px;
}
.stat{ flex:1; min-width: 180px; text-align:center; }
.stat-num{ display:block; font-size: clamp(34px,4vw,48px); font-weight:800; margin-bottom:8px; }
.stat-prefix{ font-size:0.5em; font-weight:600; vertical-align: middle; margin-right:2px; }
.stat-word{ font-size: clamp(26px,3.4vw,36px); }
.stat-label{ font-size:13px; letter-spacing:.04em; color: rgba(255,255,255,.72); }
.stat-divider{ width:1px; height:52px; background: rgba(255,255,255,.2); }
@media (max-width: 760px){
  .why-grid{ grid-template-columns: repeat(2,1fr); }
  .stat-divider{ display:none; }
}

/* ==========================================================================
   04 SELECTED WORKS
   ========================================================================== */
.section-work{ background: var(--white); }
.work-list{ position:relative; z-index:1; display:flex; flex-direction:column; gap: 90px; }
.work-item{
  display:grid; grid-template-columns: 1.3fr 1fr; gap: 46px; align-items:center;
}
.work-item--rev{ direction: rtl; }
.work-item--rev > *{ direction: ltr; }
.work-media{
  position:relative; display:grid; grid-template-columns: 1.3fr 1fr; gap:14px;
}
.work-media img{
  width:100%; height: 100%; min-height: 220px; object-fit:cover; border-radius: var(--radius);
  cursor: zoom-in; transition: transform .5s var(--ease);
}
.work-media img:hover{ transform: scale(1.03); }
.work-media img:first-child{ height: 340px; align-self:start; }
.work-media img:last-child{ height: 280px; align-self:end; margin-top: 60px; }
.work-tag{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:.1em; color: var(--navy);
  background: var(--stone-light); padding:6px 14px; border-radius:100px; margin-bottom:16px; text-transform:uppercase;
}
.work-info h3{ font-size: clamp(22px,2.6vw,30px); font-weight:800; margin-bottom:10px; color: var(--ink); }
.work-info p{ font-size:15px; color: var(--ink-faint); }

@media (max-width: 860px){
  .work-item, .work-item--rev{ grid-template-columns: 1fr; direction:ltr; }
  .work-media img:first-child, .work-media img:last-child{ height:200px; margin-top:0; align-self:auto; }
}

/* ==========================================================================
   05 CLIENTS  (dark, matches services tone for rhythm)
   ========================================================================== */
.section-clients{
  background: linear-gradient(160deg, var(--navy-ink), var(--navy-deep));
  color:#fff;
}
.client-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns: repeat(4, 1fr); gap:18px;
}
.client-card{
  background:#fff; border-radius: var(--radius); height: 130px;
  display:flex; align-items:center; justify-content:center; padding: 22px;
  transition: transform .3s var(--ease), box-shadow .3s;
}
.client-card:hover{ transform: translateY(-6px); box-shadow: 0 22px 40px -18px rgba(0,0,0,.45); }
.client-card img{ max-height: 100%; max-width:100%; width:auto; object-fit:contain; }
@media (max-width: 760px){ .client-grid{ grid-template-columns: repeat(2,1fr); } }

/* ==========================================================================
   06 LEADERSHIP
   ========================================================================== */
.section-leadership{ background: var(--white); }
.leaders{
  position:relative; z-index:1;
  display:grid; grid-template-columns: repeat(2,1fr); gap: 26px; margin-bottom: 70px;
}
.leader-card{
  background: var(--stone-light); border-radius: var(--radius); padding: 40px clamp(24px,4vw,44px);
  transition: transform .3s var(--ease);
}
.leader-card:hover{ transform: translateY(-6px); }
.leader-card h3{ font-size: clamp(24px,2.6vw,30px); font-weight:800; color: var(--navy); margin-bottom:6px; }
.leader-role{ display:inline-block; font-size:13px; font-weight:600; color: var(--ink-faint); margin-bottom:18px; letter-spacing:.05em; }
.leader-card p{ font-size:14.5px; line-height:1.7; color: var(--ink-soft); }

.disciplines{ position:relative; z-index:1; }
.disciplines-title{
  font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color: var(--ink-faint);
  background: var(--stone-light); padding: 12px 20px; border-radius:8px; margin-bottom:6px;
}
.discipline-row{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding: 20px 20px; border-bottom: 1px solid var(--line);
}
.discipline-name{ font-weight:700; color: var(--navy); font-size:15px; letter-spacing:.02em; }
.discipline-desc{ color: var(--ink-faint); font-size:14px; }

/* ==========================================================================
   CONTACT / CTA
   ========================================================================== */
.section-contact{
  position:relative; background: var(--navy); color:#fff; overflow:hidden;
  padding: 120px 0 0;
}
.contact-ribbon{
  position:absolute; inset:0; z-index:0;
  background: linear-gradient(115deg, var(--navy) 0%, var(--navy) 40%, var(--navy-2) 40.5%, var(--navy-2) 100%);
  opacity:.5;
}
.contact-wrap{ position:relative; z-index:1; }
.contact-head{ max-width: 640px; margin-bottom: 90px; }
.contact-head .btn-primary{ background:#fff; color: var(--navy); margin-top:20px; }
.contact-head .btn-primary:hover{ box-shadow: 0 18px 34px -12px rgba(0,0,0,.35); }

.contact-foot{
  border-top: 1px solid rgba(255,255,255,.18);
  padding: 56px 0 70px;
  display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap: 40px;
}
.lets-build{ display:flex; align-items:center; gap:18px; }
.lets-build-mark{ width:52px; height:auto; filter: brightness(0) invert(1); }
.lets-build h3{ font-size: clamp(26px,3.4vw,36px); font-weight:800; line-height:1.15; }
.contact-details{ display:flex; gap: 40px; flex-wrap:wrap; }
.contact-detail{ display:flex; align-items:flex-start; gap:10px; font-size:14px; color: rgba(255,255,255,.85); line-height:1.6; }
.contact-detail a:hover{ text-decoration:underline; }
.ci{ font-size:16px; opacity:.85; }

.site-footer{ background: var(--navy-ink); color: rgba(255,255,255,.55); font-size:12.5px; }
.footer-inner{ padding: 22px var(--pad); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

@media (max-width: 760px){
  .contact-foot{ flex-direction:column; align-items:flex-start; }
}

/* ==========================================================================
   Lightbox
   ========================================================================== */
.lightbox{
  position:fixed; inset:0; z-index:2000; background: rgba(10,12,32,.92);
  display:flex; align-items:center; justify-content:center; padding: 40px;
  opacity:0; visibility:hidden; transition: opacity .3s, visibility .3s;
}
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox img{ max-width: min(1100px,92vw); max-height:88vh; border-radius:10px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.lightbox-close{
  position:absolute; top:26px; right: clamp(20px,4vw,50px); background:none; border:0; color:#fff;
  font-size:34px; line-height:1; cursor:pointer; opacity:.8;
}
.lightbox-close:hover{ opacity:1; }

/* ==========================================================================
   Back to top
   ========================================================================== */
.back-to-top{
  position:fixed; right: 24px; bottom:24px; z-index:400;
  width:46px; height:46px; border-radius:50%; background: var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:18px;
  box-shadow: 0 14px 30px -12px rgba(23,30,88,.55);
  opacity:0; visibility:hidden; transform: translateY(10px);
  transition: opacity .3s, transform .3s, visibility .3s;
}
.back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ==========================================================================
   Mobile nav
   ========================================================================== */
@media (max-width: 900px){
  .nav-links{
    position:fixed; top:0; right:0; height:100vh; width: min(320px,84vw);
    background:#fff; flex-direction:column; align-items:flex-start; gap:0;
    padding: 100px 30px 30px; box-shadow: -20px 0 50px rgba(0,0,0,.15);
    transform: translateX(100%); transition: transform .4s var(--ease);
    z-index: 200;
  }
  .nav-links.open{ transform: translateX(0); }
  .nav-links li{ width:100%; border-bottom:1px solid var(--line); }
  .nav-link{ display:block; padding:16px 0; }
  .btn-nav{ display:none; }
  .hamburger{ display:flex; }
  .topbar-inner{ flex-direction:column; gap:4px; text-align:center; }
}