/* ==========================================================================
   ORLADENT — Premium Digital Dental CAD/CAM — Design System
   "Exactness, Earned"
   ========================================================================== */

:root{
  /* Brand palette — sampled from brand guideline PDF + logo lockup */
  --black:        #0c0b0a;
  --rich-black:   #141210;
  --charcoal:     #1b1918;
  --charcoal-2:   #232120;
  --line:         #2c2926;
  --cream:        #f2f0ea;
  --off-white:    #ededea;
  --gold:         #c3a019;
  --gold-light:   #e7c17c;
  --gold-bright:  #f0c96a;
  --bronze:       #ad884d;
  --bronze-dark:  #81641e;
  --champagne:    #c89f62;

  --grad-gold: linear-gradient(120deg, var(--bronze-dark) 0%, var(--gold) 45%, var(--gold-light) 70%, var(--champagne) 100%);
  --grad-gold-text: linear-gradient(100deg, #a9822f, #f0c96a 40%, #e7c17c 60%, #a9822f);

  --font-serif: 'Playfair Display', 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.16,.84,.44,1);

  --container: 1280px;
  --nav-h: 88px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
html,body{ margin:0; padding:0; }

body{
  background: var(--rich-black);
  color: var(--off-white);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.lock-scroll{ overflow:hidden; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
input,textarea,select{ font-family:inherit; }

::selection{ background: var(--gold); color:#141210; }

/* Custom scrollbar */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background: var(--rich-black); }
::-webkit-scrollbar-thumb{ background: var(--line); border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background: var(--bronze); }

/* ==========================================================================
   Typography
   ========================================================================== */

h1,h2,h3,h4{
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.08;
  margin: 0 0 .5em;
  letter-spacing: -.01em;
  color: var(--cream);
}

h1{ font-size: clamp(2.6rem, 6vw, 5.4rem); }
h2{ font-size: clamp(2rem, 4vw, 3.4rem); }
h3{ font-size: clamp(1.3rem, 2.2vw, 1.9rem); }
h4{ font-size: 1.15rem; }

p{ margin:0 0 1em; color: rgba(237,235,234,.72); }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-family: var(--font-sans);
  font-size: .9rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold-light);
  font-weight: 600;
  margin-bottom: 1.4em;
}
.eyebrow::before{
  content:'';
  width: 28px; height:1px;
  background: var(--grad-gold);
}

.text-gold{
  background: var(--grad-gold-text);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lede{
  font-size: clamp(1.05rem, 1.3vw, 1.3rem);
  color: rgba(237,235,234,.68);
  max-width: 640px;
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.container{
  width:100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 64px);
}

section{ position:relative; }
.section{ padding: clamp(72px, 10vw, 100px) 0; }
.section-tight{ padding: clamp(48px, 6vw, 96px) 0; }

.section-head{
  max-width: 720px;
  margin-bottom: clamp(40px, 6vw, 84px);
}
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head.center .eyebrow::before{ display:none; }
.section-head.split{
  display:flex;
  justify-content: space-between;
  align-items:flex-end;
  gap: 40px;
  max-width: none;
}

#pillars{
    padding-top:30px;
}


.grain{
  position:fixed; inset:0;
  pointer-events:none;
  z-index: 2;
  opacity:.035;
  mix-blend-mode: overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.viewer-divider-wrap{ padding: clamp(20px,4.5vw,44px) 0; }
.viewer-divider{
  position:relative; height:1px; max-width:1180px; margin:0 auto;
  background: linear-gradient(90deg, transparent, rgba(195,160,25,.4) 50%, transparent);
}
.viewer-divider::after{
  content:''; position:absolute; left:50%; top:50%; width:6px; height:6px; border-radius:50%;
  background: var(--gold-light); box-shadow:0 0 12px 2px rgba(195,160,25,.55);
  transform: translate(-50%,-50%);
}

.divider{
  height:1px;
  background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
  border:0; margin: 0;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.7em;
  padding: 1.05em 2.1em;
  font-size: .82rem;
  font-weight:600;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 2px;
  border: 1px solid transparent;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s ease, color .4s ease, background .4s ease;
  isolation:isolate;
  overflow:hidden;
  white-space:nowrap;
}
.btn-gold{
  background: var(--grad-gold);
  background-size: 180% auto;
  background-position: 0% 50%;
  color: #17150f;
}
.btn-gold:hover{ background-position: 100% 50%; transform: translateY(-2px); box-shadow: 0 14px 34px -12px rgba(195,160,25,.55); }

.btn-ghost{
  border-color: rgba(237,235,234,.28);
  color: var(--cream);
  
  backdrop-filter: blur(6px);
}
.btn-ghost:hover{ border-color: var(--gold-light); color: var(--gold-light); transform: translateY(-2px); }
/* Touch devices have no persistent :hover — show the accented state by default
   so buttons like "Free First Case" don't read as flat/plain on mobile. */
@media (hover: none){
  .btn-ghost{ border-color: var(--gold-light); color: var(--gold-light); }
}

.btn-arrow{ transition: transform .45s var(--ease); }
.btn:hover .btn-arrow{ transform: translateX(4px); }

.btn-sm{ padding:.85em 1.6em; font-size:.72rem; }

/* ==========================================================================
   Nav
   ========================================================================== */

.nav{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 900;
  height: var(--nav-h);
  display:flex; align-items:center;
  transition: background .5s ease, border-color .5s ease, height .4s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled{
  background: rgba(12,11,10,.78);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--line);
  height: 76px;
}
.nav .container{ display:flex; align-items:center; justify-content:space-between; }

.brand{ display:flex; align-items:center; gap:.7em; z-index:2; }
.brand .icon{ width:74px; height:auto; flex-shrink:0; }
.brand .wordmark{ font-family: var(--font-serif); font-size:1.9rem; font-weight:700; letter-spacing:.02em; color:var(--cream); line-height:1; }
.brand .wordmark small{ display:block; font-family:var(--font-sans); font-size:.8rem; letter-spacing:.28em; color:var(--gold-light); font-weight:600; margin-top:.4em; text-transform:uppercase; }

.nav-links{ display:flex; align-items:center; gap: clamp(1.2rem, 2.2vw, 2.6rem); }
.nav-links a{
  position:relative;
  font-size:.82rem;
  letter-spacing:.05em;
  text-transform: uppercase;
  font-weight:600;
  color: rgba(237,235,234,.7);
  padding: .4em 0;
  transition: color .35s ease;
}
.nav-links a::after{
  content:'';
  position:absolute; left:0; right:100%; bottom:-2px; height:1px;
  background: var(--gold-light);
  transition: right .4s var(--ease);
}
.nav-links a:hover, .nav-links a.active{ color: var(--cream); }
.nav-links a:hover::after, .nav-links a.active::after{ right:0; }

.nav-cta{ display:flex; align-items:center; gap: clamp(.9rem, 1.6vw, 1.6rem); }

.lang-select{ position:relative; flex-shrink:0; }
.lang-select-btn{
  display:flex; align-items:center; gap:.6em;
  background:none;
  border:1px solid var(--line);
  border-radius:24px;
  padding:.7em 1.3em;
  font-family: var(--font-sans);
  font-size:.86rem;
  font-weight:700;
  letter-spacing:.08em;
  color: rgba(237,235,234,.6);
  cursor:pointer;
  transition: border-color .35s ease, color .35s ease;
}
.lang-select-btn:hover{ border-color: var(--gold-light); color: var(--gold-light); }
.lang-select.is-open .lang-select-btn{ border-color: var(--gold-light); color: var(--gold-light); }
.lang-select-arrow{ width:13px; height:13px; flex-shrink:0; transition: transform .3s var(--ease); }
.lang-select.is-open .lang-select-arrow{ transform: rotate(180deg); }

.lang-select-menu{
  position:absolute; top: calc(100% + 10px); right:0; z-index:30;
  min-width: 116px;
  margin:0; padding:.5rem;
  list-style:none;
  background: var(--rich-black);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow: 0 20px 44px -18px rgba(0,0,0,.65);
  opacity:0; visibility:hidden; transform: translateY(-8px);
  transition: opacity .25s ease, transform .3s var(--ease), visibility .25s;
}
.lang-select.is-open .lang-select-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.lang-select-opt{
  padding:.75em 1em;
  border-radius:8px;
  font-family: var(--font-sans);
  font-size:.86rem;
  font-weight:700;
  letter-spacing:.08em;
  color: rgba(237,235,234,.6);
  cursor:pointer;
  transition: background .25s ease, color .25s ease;
}
.lang-select-opt:hover{ background: rgba(195,160,25,.1); color: var(--cream); }
.lang-select-opt.is-active{ color: var(--gold-light); background: rgba(195,160,25,.12); }

[dir="rtl"] .lang-select-menu{ right:auto; left:0; }

.nav-toggle{
  display:none;
  width:44px; height:44px;
  border:1px solid var(--line);
  border-radius:50%;
  background:none;
  position:relative;
  z-index:2;
}
.nav-toggle span{
  position:absolute; left:12px; right:12px; height:1px; background:var(--cream);
  transition: transform .35s var(--ease), opacity .3s ease, top .35s var(--ease);
}
.nav-toggle span:nth-child(1){ top:16px; }
.nav-toggle span:nth-child(2){ top:22px; }
.nav-toggle span:nth-child(3){ top:28px; }
.nav-toggle.is-open span:nth-child(1){ top:22px; transform: rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ top:22px; transform: rotate(-45deg); }

.mobile-menu{
  position: fixed; inset:0;
  background: var(--rich-black);
  z-index: 850;
  display:flex; flex-direction:column;
  align-items:flex-start; justify-content:center;
  gap: 1.4rem;
  padding: clamp(24px,10vh,64px) clamp(24px,8vw,64px);
  overflow-y:auto;
  transform: translateY(-100%);
  transition: transform .6s var(--ease);
}
.mobile-menu.is-open{ transform: translateY(0); }
.mobile-menu a{ font-family:var(--font-serif); font-size: clamp(1.6rem, 6vw, 2.4rem); color:var(--cream); }
.mobile-menu a:hover{ color: var(--gold-light); }
.mobile-menu .mm-foot{ margin-top:2.4rem; color:rgba(237,235,234,.5); font-size:.85rem; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero{
  position:relative;
  /* Sized purely by its own content/padding — same approach as .page-hero
     on the interior pages. We used to size this off 100vh/100svh, but any
     viewport-height unit is computed inconsistently across mobile browsers
     (address-bar show/hide, and especially "Desktop site" mode, can report
     a viewport height taller than what's actually visible), which stretched
     the hero and its background video with it. Dropping vh entirely removes
     that whole class of bug — the hero band is now exactly as tall as its
     content, on every page, every device, every browser mode. */
  overflow:hidden;
  background: var(--black);
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media video, .hero-media img{
  width:100%; height:100%; object-fit:cover;
  position:absolute; inset:0;
  transform: scale(1.06);
}
.hero-media::after{
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,9,8,.55) 0%, rgba(10,9,8,.35) 35%, rgba(10,9,8,.55) 68%, var(--rich-black) 100%),
    linear-gradient(90deg, rgba(10,9,8,.55) 0%, transparent 40%, transparent 60%, rgba(10,9,8,.55) 100%);
}
.hero-content{
  position:relative; z-index:2;
  width:100%;
  padding-bottom: clamp(60px, 8vw, 120px);
  padding-top: calc(var(--nav-h) + 40px);
}
.hero-kicker{
  display:flex; align-items:center; gap:1em;
  font-size:.78rem; letter-spacing:.3em; text-transform:uppercase;
  color: var(--gold-light); font-weight:600; margin-bottom: 1.6rem;
}
.hero-kicker .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 12px 2px var(--gold); }

.hero h1{
  max-width: 13ch;
  font-size: clamp(2.5rem, 5vw, 4rem);
  
}
.hero h1 .line{ display:block; overflow:hidden; padding-bottom: 0.12em; }
.hero h1 .line span{ display:inline-block; will-change: transform; }

.hero-sub{
  max-width: 560px;
  font-size: clamp(1rem, 1.4vw, 1.22rem);
  color: rgba(237,235,234,.72);
  margin: 1.6rem 0 2.6rem;
}
.hero-actions{ display:flex; gap:1.2rem; flex-wrap:wrap; }

.hero-scroll{
  position:absolute; right: clamp(20px,5vw,64px); bottom: 40px; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:.8em;
  color: rgba(237,235,234,.55); font-size:.68rem; letter-spacing:.25em; text-transform:uppercase;
}
/* This is a fixed-position decorative hint anchored to the bottom of the
   hero, independent of the hero's own content flow — on narrow screens the
   stacked kicker/heading/actions/stats can grow tall enough to reach the
   same corner and collide with it. Simplest, safest fix: touch users don't
   need a "scroll" hint anyway, so it just steps aside below tablet width. */
@media (max-width: 900px){
  .hero-scroll{ display:none; }
}
.hero-scroll .track{ width:1px; height:52px; background: rgba(237,235,234,.2); position:relative; overflow:hidden; }
.hero-scroll .track::after{
  content:''; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background: var(--gold-light);
  animation: scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

.hero-stats{
  position:relative; z-index:2;
  /* flex-start (not baseline) on purpose: the four numbers don't share the
     same inline content (some have an appended "min" suffix, others just a
     +/% accent), so baseline alignment lets each item's text-baseline drift
     independently and the row reads as uneven. Aligning every stat's top
     edge instead keeps all four big numbers pinned to one shared line, and
     the labels beneath them line up on their own shared line too. */
  display:flex; align-items:flex-start; gap: clamp(32px,6.5vw,92px);
  margin-top: clamp(40px,6vw,64px);
  padding-top: clamp(28px,4vw,40px);
  border-top: 1px solid rgba(237,235,234,.14);
}
.hero-stats .stat b{
  display:block; font-family:var(--font-serif); font-weight:600; font-size: clamp(2.3rem,4.4vw,3.6rem);
  color: var(--cream); line-height:1.05; letter-spacing:.01em;
}
.hero-stats .stat > span{ display:block; margin-top:.6em; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(237,235,234,.58); }
.hero-stats .stat b .stat-accent{ color: var(--gold-light); }

/* ==========================================================================
   Cards — pillars / services / values
   ========================================================================== */

.grid{ display:grid; gap: clamp(20px,2.4vw,32px); }
.grid > *{ min-width:0; }
.grid-3{ grid-template-columns: repeat(3,1fr); }
.grid-2{ grid-template-columns:  60% 40%; }
.grid-4{ grid-template-columns: repeat(4,1fr); }

/* Utility for split rows that want a wider desktop gap than the default
   .grid gap (e.g. text/image 60·40 splits) — scales down smoothly on
   narrower screens instead of holding a fixed gap after the columns stack. */
.split-gap{ gap: clamp(24px, 6vw, 64px); }

.glass{
  background: linear-gradient(160deg, rgba(237,235,234,.05), rgba(237,235,234,.015));
  border: 1px solid rgba(237,235,234,.09);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.pillar-card{
  position:relative;
  padding: clamp(28px,3vw,44px);
  border-radius: 4px;
  overflow:hidden;
  transition: transform .6s var(--ease), border-color .5s ease;
}
.pillar-card::before{
  content:'';
  position:absolute; inset:0;
  background: radial-gradient(circle at 30% 0%, rgba(195,160,25,.16), transparent 60%);
  opacity:0; transition: opacity .6s ease;
}
.pillar-card:hover{ transform: translateY(-8px); border-color: rgba(195,160,25,.4); }
.pillar-card:hover::before{ opacity:1; }
.pillar-card .num{
  font-family: var(--font-serif); font-size:.85rem; color: var(--gold-light);
  letter-spacing:.1em; margin-bottom:1.6rem; display:block;
}
.pillar-card h3{ margin-bottom:.6em; }
.pillar-card .law{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bronze); margin-bottom:.8em; display:block; }
.pillar-card p{ font-size:.94rem; }

.icon-badge{
  width:56px; height:56px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(195,160,25,.08);
  border: 1px solid rgba(195,160,25,.3);
  margin-bottom: 1.6rem;
  transition: transform .5s var(--ease), background .4s ease;
}
.icon-badge svg{ width:26px; height:26px; stroke:var(--gold-light); fill:none; }
.pillar-card:hover .icon-badge, .service-card:hover .icon-badge{ transform: scale(1.1) rotate(-6deg); background: rgba(195,160,25,.16); }

/* Service cards */
.service-card{
  position:relative;
  padding: clamp(30px,3vw,42px);
  border-radius:4px;
  transition: transform .6s var(--ease), border-color .5s ease, background .5s ease;
  display:flex; flex-direction:column;
  min-height: 100%;
}
.service-card:hover{ transform: translateY(-10px); border-color: rgba(195,160,25,.35); }
.service-card .tag{
  align-self:flex-start;
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color: var(--bronze-dark); background: rgba(195,160,25,.12);
  padding:.35em .9em; border-radius:20px; margin-bottom:1.2rem; font-weight:700;
}
.service-card h3{ margin-bottom:.5em; }
.service-card .meta{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid var(--line);
  font-size:.78rem; letter-spacing:.04em; color: rgba(237,235,234,.55);
}
.service-card .meta b{ color: var(--gold-light); font-family:var(--font-serif); font-size:1rem; }
.service-card .benefits{ margin: 1rem 0 0; padding:0; }
.service-card .benefits li{
  display:flex; gap:.7em; align-items:flex-start;
  font-size:.86rem; color: rgba(237,235,234,.62); margin-bottom:.55em;
}
.service-card .benefits li::before{
  content:''; width:5px; height:5px; margin-top:.55em; border-radius:50%;
  background: var(--gold-light); flex-shrink:0;
}
.service-card .workflow{ display:flex; flex-wrap:wrap; gap:.5em; margin-top:1rem; }
.service-card .workflow span{
  font-size:.7rem; letter-spacing:.04em; color: rgba(237,235,234,.55);
  border:1px solid var(--line); padding:.35em .8em; border-radius:20px;
}

/* ==========================================================================
   Process / workflow steps
   ========================================================================== */

.process{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.process-step{
  background: var(--rich-black);
  padding: clamp(28px,3vw,40px) clamp(20px,2.4vw,28px);
  position:relative;
}
.process-step .step-no{
  font-family:var(--font-serif); font-size:2.6rem; color:transparent;
  -webkit-text-stroke: 1px rgba(195,160,25,.5);
  margin-bottom:1.2rem; display:block;
}
.process-step h4{ margin-bottom:.5em; }
.process-step p{ font-size:.86rem; }
.process-step .arrow{
  position:absolute; right:-13px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%;
  background: var(--rich-black); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; z-index:2;
  color: var(--gold-light); font-size:.7rem;
}

/* ==========================================================================
   Timeline (About)
   ========================================================================== */

.timeline{ position:relative; padding-left: clamp(24px,4vw,48px); }
.timeline::before{
  content:''; position:absolute; left:0; top:6px; bottom:6px; width:1px;
  background: linear-gradient(180deg, transparent, var(--line) 8%, var(--line) 92%, transparent);
}
.timeline-item{ position:relative; padding-bottom: clamp(40px,5vw,64px); }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{
  content:''; position:absolute; left: calc(-1 * clamp(24px,4vw,48px) - 5px); top:6px;
  width:11px; height:11px; border-radius:50%;
  background: var(--rich-black); border:2px solid var(--gold-light);
}
.timeline-item .tl-label{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-light); margin-bottom:.6em; display:block; }

/* ==========================================================================
   Portfolio
   ========================================================================== */

.filters{
  display:flex; flex-wrap:wrap; gap:.7rem;
  margin-bottom: clamp(32px,4vw,48px);
}
.filter-btn{
  padding:.7em 1.4em;
  font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  border:1px solid var(--line); border-radius:30px;
  color: rgba(237,235,234,.6);
  background: transparent;
  transition: all .4s var(--ease);
}
.filter-btn:hover{ color:var(--cream); border-color: rgba(195,160,25,.4); }
.filter-btn.active{ background: var(--grad-gold); color:#17150f; border-color:transparent; }

.masonry{
  columns: 3 220px;
  column-gap: 20px;
}
.proj-card{
  break-inside: avoid;
  margin-bottom: 20px;
  position:relative;
  border-radius: 4px;
  overflow:hidden;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--charcoal);
  opacity:1;
  transition: transform .3s ease;
}
.proj-card.is-hidden{ display:none; }
.proj-card img{ width:100%; display:block; transition: transform .8s var(--ease); }
.proj-card .proj-overlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding: 1.4rem;
  background: linear-gradient(0deg, rgba(10,9,8,.92) 0%, rgba(10,9,8,.15) 55%, transparent 100%);
  opacity:0; transition: opacity .45s ease;
}
.proj-card:hover img{ transform: scale(1.08); }
.proj-card:hover .proj-overlay{ opacity:1; }
.proj-overlay .p-cat{ font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color: var(--gold-light); margin-bottom:.4em; font-weight:700; }
.proj-overlay .p-title{ font-family:var(--font-serif); font-size:1.05rem; color:var(--cream); }
.proj-card .zoom-ic{
  position:absolute; top:1rem; right:1rem;
  width:36px; height:36px; border-radius:50%;
  background: rgba(12,11,10,.55); border:1px solid rgba(237,235,234,.25);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform: scale(.8); transition: all .4s var(--ease);
}
.proj-card:hover .zoom-ic{ opacity:1; transform: scale(1); }
.zoom-ic svg{ width:16px; height:16px; stroke:var(--cream); fill:none; }

/* ==========================================================================
   Featured Projects (home page) — uniform premium cards
   Every card gets the same width (grid column) and the same height, because
   the image sits in a fixed-aspect-ratio box and is cropped with object-fit,
   never stretched. Card itself lifts on hover; the image inside zooms.
   ========================================================================== */

.featured-card{
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(237,235,234,.04) inset, 0 18px 40px -28px rgba(0,0,0,.7);
  transition: transform .55s var(--ease), box-shadow .55s var(--ease), border-color .5s ease;
}
.featured-card .proj-thumb{
  position:relative;
  width:100%;
  aspect-ratio: 4 / 5;
  overflow:hidden;
  background: var(--charcoal-2);
}
.featured-card .proj-thumb img{
  width:100%; height:100%;
  object-fit: cover;
  object-position: center;
  display:block;
  transition: transform .8s var(--ease);
}
.featured-card:hover{
  transform: translateY(-8px);
  border-color: rgba(195,160,25,.4);
  box-shadow: 0 1px 0 rgba(237,235,234,.06) inset, 0 30px 60px -24px rgba(0,0,0,.75), 0 0 0 1px rgba(195,160,25,.15);
}
.featured-card:hover .proj-thumb img{ transform: scale(1.08); }
.featured-card .proj-overlay{ padding: 1.2rem 1.3rem; }

/* ==========================================================================
   Portfolio — category carousels (Swiper.js)
   ========================================================================== */

.category-slider{ margin-bottom: clamp(56px,7vw,88px); }
.category-slider.is-hidden{ display:none; }

.cat-slider-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  margin-bottom: 1.6rem; flex-wrap:wrap; row-gap:.4rem;
}
.cat-slider-head h3{ margin:0; }
.cat-slider-head .count{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color: rgba(237,235,234,.45); white-space:nowrap;
}

.slider-shell{ position:relative; padding: 0 clamp(4px,4vw,58px); }
.slider-shell .swiper{ overflow:hidden; border-radius:4px; }
.slider-shell .swiper-wrapper{ align-items:stretch; }
.slider-shell .swiper-slide{ height:auto; display:flex; }

/* Capped so a slide never balloons in size when a category has too few
   images to fill the usual slidesPerView (e.g. a 2-photo category still
   sitting on a full-width slide) — every card stays the same physical size
   as cards in fuller categories, just centered within its slide. */
.slider-shell .proj-card{ margin:0 auto; height:100%; max-width:320px; width:100%; display:flex; flex-direction:column; }
.slider-shell .proj-card .slide-frame{ position:relative; width:100%; aspect-ratio: 4 / 5; overflow:hidden; }
.slider-shell .proj-card .slide-frame img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .8s var(--ease);
}
.slider-shell .proj-card:hover .slide-frame img{ transform: scale(1.08); }

.slider-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%; z-index:5;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(237,235,234,.22);
  background: rgba(10,9,8,.6);
  backdrop-filter: blur(8px);
  color: var(--cream);
  transition: all .35s var(--ease);
}
.slider-nav:hover{ border-color: var(--gold-light); color: var(--gold-light); background: rgba(195,160,25,.12); }
.slider-nav.swiper-button-disabled{ opacity:.25; pointer-events:none; }
.slider-nav svg{ width:18px; height:18px; stroke:currentColor; fill:none; }
.slider-nav.prev{ left: 0; }
.slider-nav.next{ right: 0; }

@media (max-width: 640px){
  .slider-nav{ width:38px; height:38px; }
  .slider-shell{ padding: 0 44px; }
}

.slider-dots{
  position:static !important;
  display:flex; justify-content:center; align-items:center;
  gap:.5rem; margin-top:1.6rem;
}
.slider-dots .swiper-pagination-bullet{
  width:7px; height:7px; margin:0; border-radius:50%;
  background: var(--line); opacity:1; transition: all .35s var(--ease);
}
.slider-dots .swiper-pagination-bullet-active{
  width:22px; border-radius:4px; background: var(--grad-gold);
}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:1000;
  background: rgba(8,7,6,.94);
  backdrop-filter: blur(10px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition: opacity .4s ease, visibility .4s;
  padding: 40px;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox figure{ max-width: 1100px; max-height:85vh; margin:0; text-align:center; }
.lightbox img{ max-height:75vh; margin:0 auto; border:1px solid var(--line); }
.lightbox figcaption{ margin-top:1.2rem; color: rgba(237,235,234,.7); font-size:.85rem; letter-spacing:.06em; }
.lightbox figcaption b{ color:var(--gold-light); font-family:var(--font-serif); font-size:1.1rem; display:block; margin-bottom:.3em; }
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:absolute;
  width:50px; height:50px; border-radius:50%;
  border:1px solid rgba(237,235,234,.25); background: rgba(255,255,255,.03);
  display:flex; align-items:center; justify-content:center;
  color:var(--cream); transition: all .3s ease;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{ border-color: var(--gold-light); color:var(--gold-light); }
.lightbox-close{ top:32px; right:32px; }
.lightbox-prev{ left:32px; top:50%; transform:translateY(-50%); }
.lightbox-next{ right:32px; top:50%; transform:translateY(-50%); }
/* @media (max-width: 600px){
  .lightbox{ padding:14px; }
  .lightbox-close, .lightbox-prev, .lightbox-next{ width:40px; height:40px; }
  .lightbox-close{ top:10px; right:10px; }
  .lightbox-prev{ left:4px; }
  .lightbox-next{ right:4px; }
  .lightbox img{ max-height:60vh; }
} */

/* ==========================================================================
   Why choose / feature list
   ========================================================================== */

.feature-row{
  display:grid; grid-template-columns: 40px 1fr; gap: 1.4rem;
  padding: 1.8rem 0; border-top:1px solid var(--line);
}
.feature-row:last-child{ border-bottom:1px solid var(--line); }
.feature-row .f-index{ font-family:var(--font-serif); color: var(--gold-light); font-size:1.1rem; }
.feature-row h4{ margin-bottom:.35em; }
.feature-row p{ font-size:.92rem; margin:0; max-width: 60ch; }

/* ==========================================================================
   Journey / steps horizontal
   ========================================================================== */

.journey-track{ position:relative; }
.journey-line{
  position:absolute; left:0; right:0; top: 27px; height:2px;
  background: var(--line);
  border-radius:2px;
  overflow:hidden;
}
.journey-line-run{
  position:absolute; top:0; inset-inline-start:0;
  width:16%; height:100%;
  background: linear-gradient(90deg, transparent, var(--gold-light) 35%, var(--gold-bright) 50%, var(--gold-light) 65%, transparent);
  filter: drop-shadow(0 0 6px rgba(200,159,98,.85)) drop-shadow(0 0 14px rgba(200,159,98,.45));
  animation: journeyRun 5s linear infinite;
}
@keyframes journeyRun{
  0%{ inset-inline-start:-16%; }
  100%{ inset-inline-start:100%; }
}
.journey-steps{ display:grid; grid-template-columns: repeat(5,1fr); gap:1.2rem; position:relative; }
.journey-step{ text-align:center; min-width:0; }
.journey-node{
  display:inline-flex; align-items:center; gap:.55rem;
  background: var(--rich-black);
  border:1px solid var(--line);
  border-radius: 999px;
  padding: .5rem 1.1rem .5rem .5rem;
  margin: 0 auto 1.2rem;
  position:relative; z-index:2; max-width:100%; box-sizing:border-box;
  animation: journeyNodeFlash 5s ease-out infinite;
  animation-delay: calc(var(--i, 0) * 1.25s);
}
.journey-node-icon{
  width:30px; height:30px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background: var(--charcoal); color: var(--gold-light);
  animation: journeyIconFlash 5s ease-out infinite;
  animation-delay: calc(var(--i, 0) * 1.25s);
}
.journey-node-icon svg{ width:16px; height:16px; }
.journey-node-label{
  font-family:var(--font-serif); font-size:.9rem; color: var(--cream);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
@keyframes journeyNodeFlash{
  0%{ border-color: var(--gold-bright); box-shadow: 0 0 0 4px rgba(200,159,98,.22), 0 0 18px rgba(200,159,98,.55); }
  18%, 100%{ border-color: var(--line); box-shadow:none; }
}
@keyframes journeyIconFlash{
  0%{ background: var(--gold-light); color: var(--rich-black); box-shadow: 0 0 14px rgba(200,159,98,.85); }
  18%, 100%{ background: var(--charcoal); color: var(--gold-light); box-shadow:none; }
}
.journey-step p{ font-size:.82rem; }
@media (max-width: 760px){
  .journey-node-label{ white-space:normal; text-align:start; }
}
@media (prefers-reduced-motion: reduce){
  .journey-line-run{ animation:none; inset-inline-start:0; width:100%; opacity:.5; }
  .journey-node, .journey-node-icon{ animation:none; }
}

/* ==========================================================================
   CTA band
   ========================================================================== */

.cta-band{
  position:relative;
  border-radius: 6px;
  overflow:hidden;
  padding: clamp(48px,7vw,96px) clamp(24px,6vw,80px);
  text-align:center;
  background: var(--charcoal);
  isolation:isolate;
}
.cta-band::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background: radial-gradient(ellipse at 50% 0%, rgba(195,160,25,.18), transparent 60%);
}
.cta-band h2{ max-width: 20ch; margin-left:auto; margin-right:auto; }
.cta-band .lede{ margin-left:auto; margin-right:auto; text-align:center; }
.cta-actions{ display:flex; gap:1.2rem; justify-content:center; margin-top:2.2rem; flex-wrap:wrap; }

/* ==========================================================================
   Contact
   ========================================================================== */

.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,80px); align-items:start; }
.info-card{ padding: clamp(24px,2.5vw,36px); border-radius:4px; margin-bottom:1.2rem; }
.info-card .ic-label{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-light); margin-bottom:.6em; display:block; }
.info-card .ic-value{ font-family:var(--font-serif); font-size:1.2rem; color:var(--cream); }

.form-field{ margin-bottom: 1.4rem; position:relative; }
.form-field label{
  display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color: rgba(237,235,234,.5); margin-bottom:.7em;
}
.form-field input, .form-field textarea, .form-field select{
  width:100%; background: rgba(237,235,234,.03);
  border: 1px solid var(--line); color: var(--cream);
  padding: 1em 1.1em; border-radius:2px; font-size:.95rem;
  transition: border-color .35s ease, background .35s ease;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{
  outline:none; border-color: var(--gold-light); background: rgba(237,235,234,.05);
}
.form-field textarea{ min-height:130px; resize:vertical; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }

.social-row{ display:flex; gap:1rem; margin-top:1.6rem; }
.social-row a{
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  transition: border-color .35s ease, background .35s ease, box-shadow .35s ease, transform .35s ease;
}
.social-row a:hover{ transform:translateY(-3px); }
.social-row svg{ width:19px; height:19px; display:block; transition: transform .45s cubic-bezier(.22,.9,.3,1.3); }
.social-row a:hover svg{ transform: scale(1.22); }

/* Official brand-color glow per icon on hover — button size/position unchanged */
.social-row a.ic-linkedin:hover{ border-color:#0A66C2; background:rgba(10,102,194,.14); box-shadow:0 0 22px 3px rgba(10,102,194,.5); }
.social-row a.ic-instagram:hover{ border-color:#dc2743; background:rgba(220,39,67,.14); box-shadow:0 0 22px 3px rgba(220,39,67,.5); }
.social-row a.ic-x:hover{ border-color:rgba(237,235,234,.65); background:rgba(237,235,234,.1); box-shadow:0 0 22px 3px rgba(237,235,234,.4); }

/* ==========================================================================
   Tables (SLA turnaround table, services page)
   ========================================================================== */

.table-scroll{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
@media (max-width: 600px){
  .sla-table th, .sla-table td{ padding:.85rem 1rem !important; }
  .sla-table{ font-size:.85rem; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer{ border-top:1px solid var(--line); padding: clamp(48px,6vw,80px) 0 28px; background: var(--black); }
.footer-top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(24px,4vw,40px); margin-bottom: clamp(36px,5vw,64px); }
.footer-brand .brand{ margin-bottom:1.2rem; }
.footer-brand p{ max-width:34ch; font-size:.9rem; }
.footer-col h4{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color: var(--gold-light); margin-bottom:1.3rem; font-family:var(--font-sans); font-weight:700; }
.footer-col ul li{ margin-bottom:.8em; }
.footer-col a{ font-size:.9rem; color: rgba(237,235,234,.62); transition:color .3s ease; }
.footer-col a:hover{ color: var(--gold-light); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:1.8rem; border-top:1px solid var(--line); font-size:.78rem; color: rgba(237,235,234,.4); flex-wrap:wrap; gap:1rem; }

/* ==========================================================================
   Reveal animation base (GSAP toggles .is-visible)
   ========================================================================== */

[data-reveal]{ opacity:0; transform: translateY(36px); }
[data-reveal].is-visible{ opacity:1; transform:none; }

.marquee-wrap{ overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding: 1.6rem 0; }
.marquee{ display:flex; gap: 3rem; white-space:nowrap; width:max-content; }
.marquee span{ font-family:var(--font-serif); font-size:1.3rem; color: rgba(237,235,234,.35); display:flex; align-items:center; gap:1.4rem; }
.marquee span::after{ content:'✦'; color: var(--gold-light); font-size:.8rem; }

/* ==========================================================================
   Interactive 3D case viewer (Three.js + STLLoader, home page)
   ========================================================================== */

.viewer-shell{
  position:relative;
  height: clamp(380px, 58vw, 620px);
  border-radius: 8px;
  overflow:hidden;
  border: 1px solid var(--line);
  background: radial-gradient(ellipse at 50% 15%, rgba(195,160,25,.1), transparent 60%), var(--charcoal);
}
.stl-viewer{ position:absolute; inset:0; }
.stl-viewer canvas{ display:block; width:100% !important; height:100% !important; cursor:grab; touch-action:none; }
.stl-viewer canvas:active{ cursor:grabbing; }

.viewer-loading{
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.1rem;
  color: rgba(237,235,234,.55); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  background: var(--charcoal);
  transition: opacity .6s ease, visibility .6s;
}
.viewer-loading.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.viewer-spinner{
  width:34px; height:34px; border-radius:50%;
  border: 2px solid rgba(195,160,25,.18); border-top-color: var(--gold-light);
  animation: viewer-spin .9s linear infinite;
}
@keyframes viewer-spin{ to{ transform: rotate(360deg); } }

.viewer-controls{
  position:absolute; top:1.1rem; right:1.1rem; z-index:4;
  display:flex; gap:.6rem; flex-wrap:wrap; justify-content:flex-end;
}
.viewer-btn{
  padding:.62em 1.1em; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  border:1px solid rgba(237,235,234,.22); border-radius:30px;
  color: rgba(237,235,234,.75); background: rgba(10,9,8,.55); backdrop-filter: blur(8px);
  transition: all .3s ease;
}
.viewer-btn:hover{ border-color: var(--gold-light); color:var(--gold-light); }
.viewer-btn[aria-pressed="true"]{ background: var(--grad-gold); color:#17150f; border-color:transparent; }

.viewer-hint{
  position:absolute; left:1.1rem; bottom:1.1rem; z-index:4;
  display:flex; gap:.55em; align-items:center; flex-wrap:wrap;
  font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color: rgba(237,235,234,.42);
}
.viewer-hint span:nth-child(even){ color: rgba(237,235,234,.22); }

.viewer-badge{
  position:absolute; left:1.1rem; top:1.1rem; z-index:4;
  display:flex; align-items:center; gap:.55em;
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  color: var(--gold-light);
}
.viewer-badge .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 10px 2px var(--gold); }

/* Model switcher — only rendered (by JS) when more than one case file is
   configured, so it stays invisible and out of the way until there's
   actually something to switch between. */
.viewer-switcher{
  position:absolute; left:50%; bottom:1.1rem; z-index:4;
  transform: translateX(-50%);
  display:flex; gap:.5em; flex-wrap:wrap; justify-content:center;
  max-width: calc(100% - 2.2rem);
}
.viewer-switcher:empty{ display:none; }
.viewer-switcher button{
  padding:.5em .95em; font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
  border:1px solid rgba(237,235,234,.2); border-radius:30px; color: rgba(237,235,234,.6);
  background: rgba(10,9,8,.5); backdrop-filter: blur(8px); transition: all .3s ease;
}
.viewer-switcher button:hover{ border-color: var(--gold-light); color: var(--gold-light); }
.viewer-switcher button.is-active{ background: var(--grad-gold); color:#17150f; border-color:transparent; }

@media (max-width: 640px){
  /* Controls stay top-right (clear of the badge, which is top-left) so
     they never fight the model switcher for the same bottom strip. */
  .viewer-controls{ gap:.4rem; }
  .viewer-btn{ padding:.5em .85em; font-size:.6rem; }
  .viewer-hint{ display:none; }
  .viewer-switcher{ bottom:.8rem; }
}

/* ==========================================================================
   Page loader
   ========================================================================== */

.loader{
  position:fixed; inset:0; z-index:2000; background: var(--rich-black);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .8s ease, visibility .8s;
}
.loader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-mark{ width:200px; opacity:.9; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:.5; transform:scale(.96); } 50%{ opacity:1; transform:scale(1.02); } }

/* ==========================================================================
   Page hero (interior pages)
   ========================================================================== */

.page-hero{
  padding: calc(var(--nav-h) + 90px) 0 70px;
  position:relative;
  border-bottom: 1px solid var(--line);
  overflow:hidden;
}
.page-hero::before{
  content:''; position:absolute; top:-40%; right:-10%; width:60%; height:160%;
  background: radial-gradient(ellipse, rgba(195,160,25,.14), transparent 65%);
  z-index:0;
}
/* Optional video layer — page-hero works with or without one. When present
   it sits behind the text with a dark gradient for readability, so the page
   header reads as "text over video", not a separate video section. */
.page-hero-media{ position:absolute; inset:0; z-index:0; }
.page-hero-media video{
  width:100%; height:100%; object-fit:cover;
  position:absolute; inset:0;
}
.page-hero-media::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,9,8,.6) 0%, rgba(10,9,8,.45) 45%, var(--rich-black) 100%),
    linear-gradient(90deg, rgba(10,9,8,.5) 0%, transparent 40%, transparent 60%, rgba(10,9,8,.5) 100%);
}
.page-hero .container{ position:relative; z-index:1; }
.page-hero .breadcrumb{ font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color: rgba(237,235,234,.45); margin-bottom:1.4rem; }
.page-hero .breadcrumb span{ color: var(--gold-light); }

/* ==========================================================================
   Interactive Services Book
   ========================================================================== */
.book-shell{ max-width: 900px; margin: 0 auto; }
.book{
  position:relative;
  height: clamp(540px, 62vw, 660px);
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(150deg, #241a10, #120d07);
  box-shadow: 0 60px 110px -35px rgba(0,0,0,.7), 0 0 0 1px rgba(195,160,25,.16);
  perspective: 1800px;
}
.book-page{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition: transform .65s cubic-bezier(.3,.05,.15,1), opacity .5s ease;
}
.book-page.is-active{ opacity:1; visibility:visible; z-index:3; }
.page-inner{
  position:absolute; inset: 14px;
  border-radius:6px;
  padding: clamp(28px,3.6vw,46px);
  overflow-y:auto;
  background:
    radial-gradient(ellipse at 25% 0%, rgba(231,193,124,.06), transparent 60%),
    linear-gradient(165deg, #2b2015 0%, #1c150d 100%);
  border: 1px solid rgba(195,160,25,.25);
}
.page-corner{ position:absolute; width:30px; height:30px; border: 2px solid rgba(231,193,124,.35); pointer-events:none; }
.page-corner.tl{ top:10px; left:10px; border-right:0; border-bottom:0; }
.page-corner.tr{ top:10px; right:10px; border-left:0; border-bottom:0; }
.page-corner.bl{ bottom:10px; left:10px; border-right:0; border-top:0; }
.page-corner.br{ bottom:10px; right:10px; border-left:0; border-top:0; }
.page-number{ position:absolute; right:1.6rem; bottom:1.2rem; font-size:.68rem; letter-spacing:.1em; color:rgba(237,235,234,.35); }

/* Reuse .service-card's internal tag/meta/benefits/workflow styling for
   book-page content, but the page itself is a parchment panel, not a glass
   card, and shouldn't lift on hover like a grid card would. */
.book-page .service-card{ padding:0; min-height:0; }
.book-page .service-card:hover{ transform:none; border-color:transparent; }

.book-cover{
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  background: linear-gradient(160deg,#1c150c,#0d0a06);
}
.hand-logo{
  width: clamp(96px,13vw,132px);
  filter: url(#sketch-filter) sepia(1) saturate(0) contrast(1.35) brightness(1.18);
  opacity:.9;
}
.cover-title{ font-size: clamp(1.9rem,3.2vw,2.5rem); color:var(--cream); margin-top:1.5rem; }
.cover-sub{ display:block; margin-top:.7rem; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-light); }

.book-controls{ display:flex; align-items:center; justify-content:center; gap:1.6rem; margin-top:1.8rem; }
.book-nav{
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(237,235,234,.28); color:var(--cream); background:rgba(237,235,234,.02);
  transition: border-color .35s ease, color .35s ease, background .35s ease, transform .35s ease;
}
.book-nav svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; }
.book-nav:hover{ border-color:var(--gold-light); color:var(--gold-light); background:rgba(195,160,25,.1); }
.book-nav:active{ transform:scale(.92); }
.book-nav:disabled{ opacity:.3; pointer-events:none; }
.book-indicator{ font-family:var(--font-serif); font-size:.9rem; letter-spacing:.06em; color:rgba(237,235,234,.6); min-width:56px; text-align:center; }

@media (max-width:600px){
  .page-corner{ width:20px; height:20px; }
  .book-controls{ gap:1.1rem; }
}

/* ==========================================================================
   RTL / Arabic Support
   Setting dir="rtl" on <html> (done by js/i18n.js when Arabic is active)
   already flips text direction, default text-align, and the visual order of
   every flex row and CSS grid on the site automatically — nav, buttons,
   footer columns, stat rows, cards, etc. all mirror on their own with zero
   extra CSS. The rules below only handle the things the browser can't mirror
   by itself: absolutely-positioned UI chrome (which uses literal left/right
   offsets, not logical ones) and directional arrow/chevron icons.
   ========================================================================== */

html[dir="rtl"]{ direction: rtl; }

/* Absolutely-positioned elements anchored with left/right offsets */
[dir="rtl"] .nav-links a::after{ left:100%; right:0; }
[dir="rtl"] .nav-links a:hover::after, [dir="rtl"] .nav-links a.active::after{ left:0; }

[dir="rtl"] .hero-scroll{ right:auto; left: clamp(20px,5vw,64px); }

[dir="rtl"] .process-step .arrow{ right:auto; left:-13px; }

[dir="rtl"] .proj-card .zoom-ic{ right:auto; left:1rem; }

[dir="rtl"] .slider-nav.prev{ left:auto; right:0; }
[dir="rtl"] .slider-nav.next{ right:auto; left:0; }

[dir="rtl"] .lightbox-close{ right:auto; left:32px; }
[dir="rtl"] .lightbox-prev{ left:auto; right:32px; }
[dir="rtl"] .lightbox-next{ right:auto; left:32px; }

[dir="rtl"] .viewer-controls{ right:auto; left:1.1rem; }
[dir="rtl"] .viewer-hint{ left:auto; right:1.1rem; }
[dir="rtl"] .viewer-badge{ left:auto; right:1.1rem; }
@media (max-width: 640px){
  [dir="rtl"] .viewer-controls{ right:auto; left:1.1rem; }
}

[dir="rtl"] .page-number{ right:auto; left:1.6rem; }
[dir="rtl"] .page-hero::before{ right:auto; left:-10%; }

[dir="rtl"] .timeline{ padding-left:0; padding-right: clamp(24px,4vw,48px); }
[dir="rtl"] .timeline::before{ left:auto; right:0; }
[dir="rtl"] .timeline-item::before{ left:auto; right: calc(-1 * clamp(24px,4vw,48px) - 5px); }

/* Mobile menu + split headers use flex-start/flex-end (physical, not
   logical) for cross-axis alignment, so they need an explicit flip */
[dir="rtl"] .mobile-menu{ align-items:flex-end; }
@media (max-width: 860px){
  [dir="rtl"] .section-head.split{ align-items:flex-end; }
}

/* Directional glyphs/icons: mirror so arrows still point the way content
   actually flows once the layout itself has been mirrored by dir="rtl" */
[dir="rtl"] .btn-arrow{ display:inline-block; transform: scaleX(-1); }
[dir="rtl"] .slider-nav svg{ transform: scaleX(-1); }
[dir="rtl"] .lightbox-prev svg, [dir="rtl"] .lightbox-next svg{ transform: scaleX(-1); }
[dir="rtl"] .book-nav svg{ transform: scaleX(-1); }

/* SLA table headers hardcode text-align:left inline; override for RTL */
[dir="rtl"] table th{ text-align:right !important; }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Nav collapses to the hamburger well before the full nav row (logo + 5
   links + upload button + lang toggle) would actually run out of room —
   giving tablets and small laptop windows a comfortable buffer instead of
   crowding/wrapping right up against the desktop layout's edge. */
@media (max-width: 1200px){
  .nav-links, .nav-cta .btn-ghost{ display:none; }
  .nav-toggle{ display:block; }
}

@media (max-width: 1080px){
  .grid-4{ grid-template-columns: repeat(2,1fr); }
  .grid-3{ grid-template-columns: repeat(2,1fr); }
  .process{ grid-template-columns: repeat(2,1fr); }
  /* The connector arrow between steps only makes sense in a single row —
     once the grid wraps to 2 columns, an arrow on the 2nd/4th step would
     point off the grid into empty space instead of at the next step. */
  .process-step .arrow{ display:none; }
  .journey-steps{ grid-template-columns: repeat(2,1fr); }
  .journey-line{ display:none; }
  .footer-top{ grid-template-columns: 1fr 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 860px){
  .grid-3{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
  .masonry{ columns: 2 200px; }
  .form-row{ grid-template-columns: 1fr; }
  .section-head.split{ flex-direction:column; align-items:flex-start; }
  .brand .icon{ width:52px; }
}

@media (max-width: 600px){
  .brand .icon{ width:40px; }
}

@media (max-width: 420px){
  .brand .wordmark{ font-size:1.5rem; }
  .brand .wordmark small{ font-size:.66rem; letter-spacing:.18em; }
}

@media (max-width: 600px){
  .grid-4{ grid-template-columns: 1fr; }
  .process{ grid-template-columns: 1fr; }
  .process-step .arrow{ display:none; }
  .journey-steps{ grid-template-columns: 1fr; }
  .masonry{ columns: 1 100%; }
  .footer-top{ grid-template-columns: 1fr; }
  .hero-stats{ flex-wrap:wrap; row-gap:1.6rem; }
}