.section h2, h2.section-heading, h2[data-aos][class*="section-heading"] {
  color: var(--gold) !important;
}
/* Add gap between paragraphs in Immersive Reality Solutions */
.service-overview-text {
  margin-bottom: 1.2em;
}

/* Astrolabe Studio — 2025 redesign
   Dark, cosmic, typographic, with a "gentle wonder" feel. */

:root{
  --bg0:#070812;
  --bg1:#0b0c1c;
  --bg:var(--bg0);
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.10);
  --stroke:rgba(255,255,255,.12);
  --text:#f3f4ff;
  --text-secondary:var(--muted);
  --muted:rgba(243,244,255,.72);
  --muted2:rgba(243,244,255,.55);
  --gold:#f2d38a;
  --gold2:#ffdca6;
  --aqua:#7be7ff;
  --achievement-blur-tablet:3px;
  --achievement-blur-mobile:10px;
  --achievement-overlay-tablet-start:0.95;
  --achievement-overlay-tablet-mid:0.60;
  --achievement-overlay-tablet-end:0.70;
  --achievement-overlay-mobile-start:0.95;
  --achievement-overlay-mobile-mid:0.65;
  --achievement-overlay-mobile-end:0.75;
  --violet:#bba8ff;
  --primary:var(--violet);
  --accent:var(--aqua);
  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --shadow2: 0 10px 30px rgba(0,0,0,.35);
  --radius: 22px;
  --radius2: 16px;
  --max: 1180px;
  --grid-gap: 20px;
  --nav-height: 72px;
  
  /* Dark section background color (used on home and service pages) */
  --dark-section-bg: #000000;

  /* Video freeze-frame (legacy portfolio) */
  --video-start-project-1: 6.67;
  --video-start-project-2: 5.00;
  --video-start-project-3: 3.67;
  --video-start-project-4: 0.00;
  --video-start-project-5: 14.3;
  --video-start-project-6: 5.3;
  --video-start-project-7: 12.7;
  --video-start-project-8: 1.67;

  /* Astrolabe overlay tuning */
  --astrolabe-overlay-x: 0px;
  --astrolabe-overlay-y: -75px;
  --astrolabe-overlay-scale: 1.0;
  --astrolabe-stroke-width: 1.2px;
  /* Starfield controls (read by js/main.js) */
  --stars-size: 2;    /* multiplier for per-star radius (1 = default) */
  --stars-speed: 0.65;   /* multiplier for horizontal movement speed (1 = default) */
  /* Divider controls: unified variables for subtitle dividers */
  --divider-opacity: 0.06;

  /* Service card icon badge image controls */
  --service-card-icon-scale: 1.25;
  --service-card-icon-scale-hover: 1.45;
  --service-card-icon-offset-x: 0px;
  --service-card-icon-offset-y: 5px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--text);
  background: radial-gradient(1200px 700px at 20% 0%, rgba(155, 127, 255, 0.18), transparent 55%),
              radial-gradient(900px 600px at 80% 30%, rgba(74, 222, 255, 0.14), transparent 60%),
              radial-gradient(1000px 700px at 50% 100%, rgba(255, 211, 107, 0.1), transparent 55%),
              linear-gradient(180deg, var(--bg0), var(--bg1) 60%, #0b0b29);
  font-family: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.55;
  overflow-x:hidden;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}
/* Offset page content so fixed header doesn't overlap */
main#top{ padding-top: var(--nav-height); }
/* Service pages use a different main id; keep header offset consistent */
main#main-content{ padding-top: var(--nav-height); }

a{ color:inherit; text-decoration:none; }
a:hover{ opacity:.92; }

::selection{ background: rgba(242,211,138,.25); }

.container{ max-width:var(--max); margin:0 auto; padding:0 20px; }

/* Match service page responsive container paddings so header spacing is consistent
   across homepage and service pages. These reduce horizontal padding on smaller
   screens so the brand can sit closer to the left edge like on service pages. */
@media (max-width: 1200px) {
  .container { max-width: 100%; padding-left: 32px; padding-right: 32px; }
}
@media (max-width: 992px) {
  .container { max-width: 100%; padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 768px) {
  .container { max-width: 100%; padding-left: 10px; padding-right: 10px; }
}

#starfield{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:0;
  opacity:.9;
  pointer-events:none;
  transform: translateZ(0);
}

.glow{
  position:fixed;
  inset:-20%;
  background: radial-gradient(circle at 30% 20%, rgba(242,211,138,.10), transparent 45%),
              radial-gradient(circle at 80% 30%, rgba(187,168,255,.12), transparent 46%),
              radial-gradient(circle at 50% 80%, rgba(123,231,255,.10), transparent 48%);
  filter: blur(40px);
  z-index:-2;
  pointer-events:none;
}

/* Accessibility: visible focus styles (override outline:none occurrences) */
:is(a, button, input, textarea, select, [role="button"], .card, .service-nav-arrow):focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px rgba(242,211,138,0.12);
}

/* Skip-link: visually hidden until focused */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 10000;
}
.skip-link:focus, .skip-link:active {
  left: 12px;
  top: 12px;
  width: auto;
  height: auto;
  padding: 8px 12px;
  background: rgba(0,0,0,0.85);
  color: var(--text);
  border-radius: 6px;
  text-decoration: none;
}

.nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:999;
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(7,8,18,.78), rgba(7,8,18,.48));
  border-bottom:1px solid rgba(255,255,255,.10);
}

.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 10px !important;

}

.brand{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-width: 220px;
  color: var(--gold);
}
.brand img{ width:38px; height:38px; border-radius:12px; box-shadow: var(--shadow2); }
.brand .name{ display:flex; flex-direction:column; line-height:1.1; }
.brand .name strong{ font-size:14px; letter-spacing:.08em; text-transform:uppercase; }
.brand .name span{ font-size:12px; color:var(--muted2); }

.nav-links{
  display:flex;
  gap:18px;
  align-items:center;
}
.nav-links a{
  font-size:14px;
  color:var(--muted);
  padding:10px 10px;
  border-radius:12px;
}
.nav-links a:hover{ background: rgba(255,255,255,.06); color:var(--text); }

.nav-cta{
  display:flex;
  gap:10px;
  align-items:center;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: var(--shadow2);
  font-size:14px;
}
.btn:hover{ background: rgba(255,255,255,.09); }
.btn.primary{
  border-color: rgba(242,211,138,.28);
  background: linear-gradient(180deg, rgba(242,211,138,.18), rgba(255,255,255,.06));
}
.btn svg{ width:16px; height:16px; opacity:.9; }

.mobile-toggle{ display:none; }

/* Plain hamburger: remove button chrome, keep accessible label */
.mobile-toggle{
  display:none; /* shown at small breakpoints via media queries below */
  padding:6px !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  font-size:0 !important; /* hide text node while keeping aria-label for screen readers */
  color: transparent !important;
}
.mobile-toggle svg{ width:28px; height:28px; stroke: #fff; }
.mobile-toggle svg path{ stroke: #fff; }

.hero{
  padding:68px 0 26px;
  position:relative; /* contain absolute starfield */
  min-height: 600px;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 26px;
  align-items:start;
}
.kicker{
  font-family:"Fraunces", ui-serif, Georgia, serif;
  font-size:14px;
  color: rgba(242,211,138,.95);
  letter-spacing:.18em;
  text-transform:uppercase;
  display:flex;
  gap:12px;
  align-items:center;
}
.kicker::before{
  content:"";
  width:18px;
  height:2px;
  background: linear-gradient(90deg, rgba(242,211,138,.95), transparent);
}
h1{
  margin:14px 0 12px;
  font-size: clamp(38px, 4.5vw, 64px);
  line-height:1.05;
  letter-spacing:-.02em;
}
.lead{
  margin:0;
  font-size:18px;
  color:var(--muted);
  max-width: 60ch;
}
.hero-actions{
  margin-top:22px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.badges{
  margin-top:18px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.badge{
  padding:8px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  color:var(--muted);
  background: rgba(255,255,255,.04);
  font-size:13px;
}

.hero-card{
  position:relative;
  border-radius: var(--radius);
  padding:0;
  border: none;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  display: flex;
    align-items: center;
    justify-content: center;
 
}
.hero-card::before{ display:none; }
.hero-card-inner{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:12px;
   max-width: 445.6px;
  max-height: 445.6px;
}
.orbit{
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio: 1 / 1;
  border-radius: 0;
  border: none;
  background: transparent;
  overflow: visible;
  position: relative;
}
.orbit svg{ width:min(420px, 100%); height:auto; opacity:.98; filter: none; }

/* center the two overlay SVGs in the same invisible square and keep them attached to the image */

/* === Hero astrolabe stack: overlays stay locked to icon across breakpoints === */
.astrolabe-stack{
  position: relative;
  width: clamp(260px, 32vw, 420px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  /* Keep overall composition close to desktop look (previously the icon had a negative margin) */
  transform: translateY(-90px);

    /* Fine-tuning knobs (percentages scale with the stack, so alignment stays stable).
     - Move/scale ring 1 (front):  --astro-ring1-x / --astro-ring1-y / --astro-ring1-scale / --astro-ring1-inset
     - Move/scale ring 2 (back):   --astro-ring2-x / --astro-ring2-y / --astro-ring2-scale / --astro-ring2-inset
     - Move ONLY the icon:         --astro-icon-x / --astro-icon-y
     This keeps the "locked" behavior while letting you art-direct alignment. */
  --astro-ring1-x: -1%;
  --astro-ring1-y: 12%;
  --astro-ring1-scale: 1;
  --astro-ring1-inset: -18%;

  --astro-ring2-x: -1%;
  --astro-ring2-y: 9.5%;
  --astro-ring2-scale: 2.5;
  --astro-ring2-inset: -25%;

  --astro-icon-x: 0%;
  --astro-icon-y: 15%;
}


/* Slight desktop-only correction: icon was reading a bit too far right compared to rings */
@media (min-width: 981px){
  .astrolabe-stack{ --astro-icon-x: -2%; }
}

.astrolabe-icon-wrapper{
  position: relative;
  z-index: 3;
  /* Make the icon scale together with the overlays.
     At 1440px this lands ~300px (72% of 420px). */
  width: 72%;
  height: auto;
  display: grid;
  place-items: center;
  line-height: 0;
  transform: translate(var(--astro-icon-x), var(--astro-icon-y));
}

.astrolabe-overlay{
  position: absolute;
  inset: var(--astro-ring1-inset);
  transform: translate(var(--astro-ring1-x), var(--astro-ring1-y)) scale(var(--astro-ring1-scale));
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 1;
}

.astrolabe-overlay-reverse{
  position: absolute;
  inset: var(--astro-ring2-inset);
  transform: translate(var(--astro-ring2-x), var(--astro-ring2-y)) scale(var(--astro-ring2-scale));
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 0;
  opacity: .15;
}
.astrolabe-icon-wrapper picture{ display:block; line-height:0; width:100%; }
.astrolabe-icon-wrapper picture img{ display:block; max-width:100%; height:auto; }

.astrolabe-icon-img{
  width: 100%;
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 24px 48px rgba(0,0,0,0.6));
  border-radius: 8px;
  display:block;
  margin: 0;
}


.astrolabe-overlay .astrolabe-svg,
.astrolabe-overlay-reverse .astrolabe-svg{
  width: 100%;
  height: 100%;
  display: block;
  transform-origin: 50% 50%;
}

/* rotation (kept in CSS so it stays tied to layout, with reduced-motion support) */
.astrolabe-overlay .astrolabe-svg{
  animation: astro-rotate-slow 48s linear infinite;
}
.astrolabe-overlay-reverse .astrolabe-svg{
  animation: astro-rotate-reverse 34s linear infinite;
}

/* Centralized replacements for previously-inline styles */
.panel{ margin: 0 0 14px; }
.links{ display:flex; flex-wrap:wrap; gap:10px 14px; }
.hero-visual-inner{ position:relative; width:100%; height:100%; display:flex; justify-content:center; align-items:center; }
.achievements-timeline{ margin-top: 40px; }
.expertise-headings{ margin-top: 40px; }
.achievements-arrow-container{ margin-top: 40px; }
.panel p + p{ margin-top:12px; }
.panel h3{ margin-top:0; }
.values-grid .value h4{ margin:0 0 4px; font-size:14px; letter-spacing:.02em; }
.values-grid .value p.small{ margin:0; opacity:.9; }

/* Footer utilities previously applied inline */
.footer .brand{ padding:0; }
.footer .links{ font-size:14px; margin-top:16px; gap:16px; }
.footer .links a{ opacity:0.92; }
.footer .links a i{ width:20px; height:20px; display:inline-block; }

/* Social icon opacity specifically (icons-only links) */
.footer .links a[aria-label]{ opacity:0.7; }


.orbit .caption{
  text-align:center;
  font-size:12px;
  color:var(--muted2);
  margin-top: 8px;
}
.hero-note{
  font-size:13px;
  color:var(--muted);
  line-height:1.45;
}

.section{
  padding: 60px 0;
}
.section h2{
  margin:0;
  font-size: 28px;
  letter-spacing:-.01em;
}
.section p.sub{
  margin:10px 0 0;
  color: var(--muted);
  margin-bottom: 0;
}

.grid{
  margin-top: 40px;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
}

/* Services section needs extra margin to account for icon-badge positioned above cards */
#services .grid{
  margin-top: 64px; /* 40px base + 24px for icon-badge extending above */
}
.card{
  grid-column: span 4;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  box-shadow: var(--shadow2);
  padding: 18px;
  position:relative;
  overflow:hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.7s ease !important;
  transition-property: border-color, box-shadow, transform, opacity !important;
}

/* ------------------------------------------------------------
   Services cards – icon badge (bigger + partially outside card)
   Keeps the original visual language (glass + gold hover)
------------------------------------------------------------ */
#services .card{
  /* allow the badge to sit outside without getting clipped */
  overflow: visible;
  padding-top: 0;
  margin-bottom: 25px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 100px;
  grid-template-areas:
    "title badge"
    "desc desc";
  column-gap: 10px;
  row-gap: 0;
  align-items: start;
}

/* keep the internal glow/blur contained even though overflow is visible */
#services .card::after{
  clip-path: inset(0 round var(--radius));
}

#services .card .icon-badge{
  position: relative;
  top: -30px;
  left: 8px;
  right: 0;
  width: 100px;
  height: 100px;
  grid-area: badge;
  justify-self: end;
  align-self: start;
  margin-bottom: -30px;
  border-radius: 50%;
  border:1px solid rgba(255,255,255,.16);
  background: rgb(25 28 37);
  box-shadow:
    0 10px 20px rgba(0,0,0,.32),
    0 24px 42px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 3;
  overflow:hidden;
  transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease, opacity 0.7s ease !important;
  transition-property: box-shadow, border-color, transform, opacity !important;
  isolation: isolate;
}

#services .card .icon-badge::before,
#services .card .icon-badge::after{
  content: "";
  position: absolute;
  pointer-events: none;
}

#services .card .icon-badge::before{
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(120% 100% at 20% 12%, rgba(255,236,194,.28) 0%, rgba(255,236,194,0) 54%),
    linear-gradient(160deg, rgba(255,225,160,.20) 0%, rgba(255,225,160,.08) 26%, rgba(255,225,160,0) 48%),
    radial-gradient(140% 140% at 50% 50%, rgba(0,0,0,0) 58%, rgba(242,211,138,.22) 74%, rgba(255,220,166,.08) 84%, rgba(0,0,0,0) 100%);
  mix-blend-mode: screen;
  opacity: .72;
  transition: opacity .35s ease;
}

#services .card .icon-badge::after{
  top: -30%;
  left: -60%;
  width: 70%;
  height: 170%;
  z-index: 3;
  background: linear-gradient(98deg, rgba(255,255,255,0) 0%, rgba(255,240,210,.34) 50%, rgba(255,255,255,0) 100%);
  filter: blur(2px);
  opacity: .25;
  transform: rotate(10deg) translateX(0);
  transition: transform .65s cubic-bezier(.22,.61,.36,1), opacity .35s ease;
}

#services .card h3{
  grid-area: title;
  margin: 30px 0 30px;
  min-height: 0;
  font-size: 18px;
  font-weight: 600;
  display: block;
  align-self: start;
  text-align: left;
  line-height: 1.25;
  text-wrap: balance;
}

@media (max-width: 768px){
  #services .card .icon-badge{
    top: -30px;
    margin-bottom: -30px;
  }
}

#services .card p{
  grid-area: desc;
  margin: 0;
}

#services .card .icon-badge img{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  filter: saturate(1.04) contrast(1.04) drop-shadow(0 10px 18px rgba(242,211,138,.10));
  transform: translate(var(--service-card-icon-offset-x), var(--service-card-icon-offset-y)) scale(var(--service-card-icon-scale));
  transform-origin: center;
  transition: transform 280ms cubic-bezier(.22,.61,.36,1), filter 280ms ease;
}

@media (hover: hover){
  #services .card:hover .icon-badge img,
  #services .card:focus .icon-badge img,
  #services .card:focus-visible .icon-badge img{
    transform: translate(calc(var(--service-card-icon-offset-x) - 1px), calc(var(--service-card-icon-offset-y) + 1px)) scale(var(--service-card-icon-scale-hover));
    filter: saturate(1.1) contrast(1.08) drop-shadow(0 12px 22px rgba(242,211,138,.14));
  }

  #services .card:hover .icon-badge::before,
  #services .card:focus .icon-badge::before,
  #services .card:focus-visible .icon-badge::before{
    opacity: .86;
  }

  #services .card:hover .icon-badge::after,
  #services .card:focus .icon-badge::after,
  #services .card:focus-visible .icon-badge::after{
    opacity: .45;
    transform: rotate(10deg) translateX(190%);
  }
}

/* keep legacy styles from affecting the new layout */
#services .card > .icon{ display:none; }

@media (hover: hover){
  #services .card:hover .icon-badge,
  #services .card:focus .icon-badge,
  #services .card:focus-visible .icon-badge{
    box-shadow:
      0 14px 28px rgba(0,0,0,.36),
      0 28px 56px rgba(0,0,0,.34),
      0 10px 30px rgba(242,211,138,.10),
      inset 0 1px 0 rgba(255,255,255,.10);
    border-color: rgba(242,211,138,0.30);
  }
}
/* Place the final service (e.g. Virtual Galleries) in the middle column
   when the services grid shows three columns on wide screens. This keeps
   the visual center focused for the featured/last item without changing
   DOM order. */
@media (min-width: 1200px) {
  #services .grid > .card:last-child {
    grid-column: 5 / span 4;
  }
}

/* Center last service card when in 3-column layout (between 981px and 1199px) */
@media (min-width: 981px) and (max-width: 1199px) {
  #services .grid > .card:last-child {
    grid-column: 5 / span 4;
  }
}

.card::after{
  content:"";
  position:absolute;
  inset:-1px;
  background: radial-gradient(circle at 10% 0%, rgba(123,231,255,.12), transparent 40%),
              radial-gradient(circle at 100% 40%, rgba(242,211,138,.12), transparent 52%);
  opacity:.45;
  filter: blur(24px);
  pointer-events:none;
}
.card > *{ position:relative; }
.card .icon{
  width:42px; height:42px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.card .icon img{ width:100%; height:100%; object-fit:cover; opacity:.9; }
.card h3{ margin:12px 0 8px; font-size: 18px; color: var(--gold); }
.card p{ margin:0; color:var(--muted); font-size: 14px; }

.work{
  grid-column: span 3;
  padding: 0;
}

/* Portfolio responsive columns - alternating long-short pattern
   xs: 1col, lg (>=992px): 2col alternating, xl (>=1200px): asymmetric pattern */
#works .grid .card{ grid-column: span 12; }

/* Tablet: two columns from ~700px up to the large breakpoint (992px) */
@media (min-width: 700px) and (max-width: 991.98px) {
  #works .grid .card{ grid-column: span 6; }
}

@media (min-width: 992px){ /* lg */
  #works .grid .card{ grid-column: span 6; }
}
@media (min-width: 1200px){ /* xl */
  /* keep Featured Works aligned with the global site container width */
  #works > .container{ max-width: var(--max); }
  
  /* Alternating pattern: long-short, short-long, long-short, short-long */
  #works .grid .card:nth-child(odd){ grid-column: span 4; } /* Long cards: 2/3 */
  #works .grid .card:nth-child(even){ grid-column: span 2; } /* Short cards: 1/3 */
}
/* Ensure alternating pattern on common laptop widths (1440px and up) */
@media (min-width: 1440px) {
  #works .grid .card:nth-child(odd){ grid-column: span 4; }
  #works .grid .card:nth-child(even){ grid-column: span 2; }
}
@media (min-width: 2560px){ /* 4K and larger: maintain alternating pattern */
  #works .grid .card:nth-child(odd){ grid-column: span 4; }
  #works .grid .card:nth-child(even){ grid-column: span 2; }
}

/* Very large displays (3000px+): unified wide container, optimized layouts */
@media (min-width: 3000px) {
  /* Global container expansion for all sections */
  .container {
    max-width: 1600px !important;
  }
  
  /* Featured Works: 5 cards per row with centered last row */
  #works .grid {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--grid-gap);
  }
  #works .grid .card {
    flex: 0 0 calc((100% - 4 * var(--grid-gap)) / 5) !important;
    max-width: calc((100% - 4 * var(--grid-gap)) / 5);
    grid-column: auto !important;
  }
  #works .grid .card h3 { font-size: 20px; }
  #works .grid .card p { font-size: 15px; }
  #works .grid .card .tags .tag { font-size: 13px; }
  
  /* Services: 4 cards per row with centered last row */
  #services .grid {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--grid-gap);
  }
  #services .grid .card {
    flex: 0 0 calc((100% - 3 * var(--grid-gap)) / 4) !important;
    max-width: calc((100% - 3 * var(--grid-gap)) / 4);
    grid-column: auto !important;
  }
  #services .grid .card:last-child {
    grid-column: auto !important;
  }
  #services .grid .card h3 { font-size: 20px; }
  #services .grid .card p { font-size: 15px; }
  
  /* Contact cards: force 3 per row with centered layout */
  .contact-link {
    flex: 0 0 calc((100% - 2 * 14px) / 3) !important;
    max-width: calc((100% - 2 * 14px) / 3) !important;
    width: auto !important;
  }
}

.work .media{
  position: relative;
  border-radius: var(--radius);
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  aspect-ratio: 10/12;
}

/* Desktop optimization: show a lightweight poster first, load video only on hover */
.card.work .media .video-poster{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center;
  display:block;
  background:#000;
}
.work img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transform: scale(1.02);
  transition: transform .6s ease;
  filter: saturate(1.05) contrast(1.05);
}
.work:hover img{ transform: scale(1.08); }
.work .body{
  padding: 16px 18px 18px;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color: rgba(242,211,138,.92);
  background: rgba(242,211,138,.10);
  border:1px solid rgba(242,211,138,.22);
  padding:6px 10px;
  border-radius: 999px;
}

/* Portfolio tags: multiple independent boxes that wrap lines
   - `.tags` is the wrapper; `.tag` is each individual term box.
   - No rounded corners, tight spacing, and wrap onto multiple lines.
*/
.tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px 10px;
  margin-bottom:8px;
}
.tags .tag{
  display:inline-block;
  font-size:12px;
  color:var(--muted);
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  padding:6px 8px;
  border-radius: 8px; /* rounded corners */
  line-height:1;
  text-decoration:none;
}

/* Highlight animation for service cards when jumped-to from a tag */
/* Snap-style service highlight: apply immediate styles when the class is present.
   We intentionally avoid transitions for the highlighted state so it snaps in/out.
*/
.service-highlight{
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 0 26px 70px rgba(242,211,138,0.18) !important;
  background: linear-gradient(180deg, rgba(242,211,138,0.12), rgba(255,255,255,0.02)) !important;
  border-color: rgba(242,211,138,0.42) !important;
  transition: none !important; /* ensure immediate change */
}

/* Keep other card transitions, but they won't affect the snapped highlight because
   `.service-highlight` forces `transition: none` while present. */
.card{
  transition: transform 280ms cubic-bezier(.2,.9,.2,1),
              box-shadow 360ms cubic-bezier(.2,.9,.2,1),
              background 360ms cubic-bezier(.2,.9,.2,1),
              border-color 360ms cubic-bezier(.2,.9,.2,1);
}

/* Apply the same visual highlight on hover/focus for service cards
   (mirrors the `.service-highlight` snap style but with transitions).
   Only apply on devices that support hover. */
@media (hover: hover){
  #services .card:hover,
  #services .card:focus,
  #services .card:focus-visible{
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 26px 70px rgba(242,211,138,0.18);
    background: linear-gradient(180deg, rgba(242,211,138,0.12), rgba(255,255,255,0.02));
    border-color: rgba(242,211,138,0.42);
    z-index: 2; /* lift above neighbors while hovered */
  }
}
.work h3{ margin:10px 0 8px; font-size: 18px; }
.work p{ margin:0; color:var(--muted); font-size: 14px; }

.about{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 40px;
}
.panel{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  box-shadow: var(--shadow2);
  padding: 20px;
}
/* Remove box chrome for panels inside About section */
#about .panel{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 20px 0 !important;
}
/* Make paragraph and list text inside the About panels match Expertise list size */
#about .panel p,
#about .panel ul,
#about .panel li{
  font-size: 14px;
}
.panel h3{ margin:0 0 10px; font-size:18px; }
.panel p{ margin:0; color:var(--muted); }
.panel ul{ margin: 12px 0 0; padding-left: 18px; }
.panel li{ margin: 6px 0; }

.footer{
  padding: 34px 0 44px;
  border-top:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.22));
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  align-items:start;
}
.small{ color: var(--muted2); font-size: 13px; }
.footer a{ color: var(--muted); }
.footer a:hover{ color: var(--text); }
.footer .links{ display:flex; flex-wrap:wrap; gap: 10px 14px; }

hr.sep{
  border:0;
  height:1px;
  background: rgba(255,255,255,.10);
  margin: 18px 0;
}

@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .about{ grid-template-columns: 1fr; }
  .card{ grid-column: span 6; }
  .work{ grid-column: span 12; }
  .nav-links{ display:none; }
  .mobile-toggle{ display:inline-flex; align-items:center; }

  /* when hero collapses to one column, add breathing room above the emblem stack */
  .hero-card{ margin-top: 28px; }
  .astrolabe-stack{ transform: translateY(0); }

}

/* Mobile dropdown: stack links vertically, each on its own row */
header [data-menu] .panel{ padding: 8px 0; }
header [data-menu] .links{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
}
header [data-menu] .links a{
  display:block;
  padding:10px 12px;
  border-radius:8px;
  background: rgba(255,255,255,0.02);
  color: var(--muted);
}
header [data-menu] .links a:hover{ background: rgba(255,255,255,0.04); color:var(--text); }

/* Updated mobile dropdown: unify colors, remove rounded panel, remove vertical gaps, add 1px separators, align links */
header [data-menu] .panel{
  margin: 0 !important;
  padding: 0 !important;
  background: linear-gradient(180deg, rgba(7,8,18,.78), rgba(7,8,18,.48));
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
}
header [data-menu] .links{
  gap: 0 !important;
  padding: 0 !important;
}
header [data-menu] .links a{
  padding: 12px calc(20px + 38px + 12px) 12px calc(20px + 38px + 12px); /* align with brand name */
  background: transparent;
  border-radius: 0;
  color: var(--muted);
}
header [data-menu] .links a + a{
  border-top: 1px solid rgba(255,255,255,0.06);
}
header [data-menu] .links a:hover{
  background: rgba(255,255,255,0.03);
  color: var(--text);
}

@media (max-width: 560px){
  .card{ grid-column: span 12; }
  .work{ grid-column: span 12; }
  .brand{ min-width:auto; }
  .btn{ padding:10px 12px; }
}


@keyframes astrolabeCounter { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

.astrolabe svg .spin-slow{ transform-origin: 210px 210px; animation: astrolabeSpin 26s linear infinite; }
.astrolabe svg .spin-fast{ transform-origin: 210px 210px; animation: astrolabeSpin 14s linear infinite; opacity:.95; }
.astrolabe svg .counter{ transform-origin: 210px 210px; animation: astrolabeCounter 22s linear infinite; opacity:.9; }

@media (prefers-reduced-motion: reduce){
  .astrolabe svg .spin-slow,
  .astrolabe svg .spin-fast,
  .astrolabe svg .counter{ animation:none !important; }

  /* When the astrolabe is offscreen we add `astrolabe-paused` to the root.
     This pauses CSS animations (rings/spin) and allows JS to avoid updates. */
  :root.astrolabe-paused .astrolabe svg .spin-slow,
  :root.astrolabe-paused .astrolabe svg .spin-fast,
  :root.astrolabe-paused .astrolabe svg .counter{
    animation-play-state: paused !important;
  }
}

/* Slightly tighter cards */
.card{ }
.work .body{ padding: 14px 16px 16px; }


/* === Astrolabe: clearly visible, calm motion === */
@keyframes astro-rotate-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes astro-rotate-reverse {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}
@keyframes astro-breathe {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.025); }
  100% { transform: scale(1); }
}

.astrolabe {
  animation: astro-breathe 18s ease-in-out infinite;
}

.astrolabe .ring-slow {
  transform-origin: 210px 210px;
  animation: astro-rotate-slow 48s linear infinite;
}

.astrolabe .ring-fast {
  transform-origin: 210px 210px;
  animation: astro-rotate-slow 22s linear infinite;
}

.astrolabe .ring-reverse {
  transform-origin: 210px 210px;
  animation: astro-rotate-reverse 34s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .astrolabe,
  .astrolabe *,
  .astrolabe-overlay .astrolabe-svg,
  .astrolabe-overlay-reverse .astrolabe-svg{
    animation: none !important;
  }
}


/* Contact section refinements */
.contact-stack{
  margin-top: 22px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.contact-actions{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.contact-actions .btn{
  width:100%;
  justify-content:center;
  box-shadow:none;
  background: rgba(255,255,255,.05);
}

.contact-actions .btn.primary{
  background: linear-gradient(180deg, rgba(242,211,138,.22), rgba(255,255,255,.05));
}

@media (max-width: 820px){
  .contact-actions{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px){
  .contact-actions{ grid-template-columns: 1fr; }
}


/* Hero-only aurora / wonder glow */
.hero{
  position: relative;
  overflow: hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:-140px -120px -180px -120px;
  background:
    radial-gradient(1200px 700px at 20% 0%, rgba(187,168,255,.22), transparent 58%),
    radial-gradient(900px 600px at 80% 30%, rgba(123,231,255,.18), transparent 62%),
    radial-gradient(1000px 700px at 50% 100%, rgba(242,211,138,.14), transparent 58%);
  filter: blur(0px);
  pointer-events:none;
  z-index: -1;
}
.hero .container{ position: relative; z-index: 2; padding-top:  30px;}

/*
  Desktop: Hero стремится занимать всю высоту окна браузера.
  <main id="top"> уже имеет padding-top равный высоте фиксированного хедера,
  поэтому вычитаем var(--nav-height), чтобы не появлялся лишний скролл.
  На адаптиве (<= 980px) оставляем текущее поведение.
*/
@media (min-width: 981px){
  .hero{
    height: calc(100vh - var(--nav-height));
    display: flex;
    align-items: center;
    padding: 0;
  }
  .hero .container{
    padding-top: 0;
    padding-bottom: 0;
  }
  .hero-grid{ align-items: center; }
}

/* After-hero fade into black */
#works{
  position: relative;
  z-index: 0; /* ensure the section content sits above its pseudo-elements */
  background: var(--dark-section-bg);
  
}

#works::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-250px;
  height: 140px;
  background: linear-gradient(180deg, rgb(from var(--dark-section-bg) r g b / 0), var(--dark-section-bg) 40%);
  pointer-events:none;
  height: 500px;
  z-index: -1; 
}

/* Smooth transition from the portfolio (#works) into the following section (Expertise)
   Implemented as an ::after pseudo-element with a downward fading gradient. */
#works::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -500px;
  /* match the ::before height so the overlap is symmetric */
  height: 500px;
  background: linear-gradient(180deg, var(--dark-section-bg) 0%, rgb(from var(--dark-section-bg) r g b / 0) 40%);
  pointer-events: none;
  z-index: -1; /* place the fade behind subsequent content */
}

/* === Hero astrolabe: prevent clipping + keep breathing room on tablets ===
   1) The hero section uses `overflow:hidden` to contain the aurora glow pseudo-element,
      but that also clips the astrolabe rings when they extend past the hero bounds on
      small screens. On <=980px we allow overflow and add extra bottom padding so the
      composition always fits.
   2) On some portrait tablet widths (still 2-column hero), the rings can visually touch
      the right edge. We add right padding to the hero visual cell only in the 2-column
      range so the stack shifts left a bit, while the 1-column layout stays perfectly centered.
*/

@media (max-width: 980px){
  .hero{ overflow: visible; padding-bottom: 96px; }
}

@media (min-width: 981px) and (max-width: 1200px){
  .hero-card{ padding-right: clamp(16px, 4vw, 72px); }
}



/* Contact section: match the dark section styling used for the Portfolio (#works),
   with only a top gradient transition (footer already continues the dark base). */
#contact{
  position: relative;
  z-index: 0;
  background: var(--dark-section-bg);
}
#contact::before{
  content:"";
  position:absolute;
  left:0; right:0;
  /* Fade from the section above into the dark contact section.
     Intentionally overlaps upward; the previous section's *content* is kept
     above this fade via z-index (see #about > .container below). */
  top: -250px;
  height: 500px;
  background: linear-gradient(180deg, rgb(from var(--dark-section-bg) r g b / 0), var(--dark-section-bg) 40%);
  pointer-events:none;
  z-index: 1;
}

/* Ensure contact content stays above the fade */
#contact > *{ position: relative; z-index: 2; }

/* Keep the About section content above the overlapping contact fade,
   while still allowing the fade to soften the background boundary. */
#about > .container{ position: relative; z-index: 3; }

/* Ensure expertise section sits above the works::after fade.
   Also add a bit of extra top spacing because #works uses an overlapping
   fade (::after) that visually compresses the gap between sections. */
#expertise{
  position: relative;
  z-index: 1;
  padding-top: 110px;
}

.section{ background: transparent; }

/* Expertise two-column layout (used for the new Expertise section) */
.expertise-grid{
  margin-top: 18px;
  display:block; /* single column container - internal rail handles columns */
}
@media (max-width: 980px){
  .expertise-grid{ grid-template-columns: 1fr; }
  .hero .container{  padding-top:  0px;}
  
}
/* Remove boxed panel chrome for the Expertise section: plain text blocks */
.expertise-grid .panel{
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0; /* we rely on surrounding section spacing */
}

/* Expertise rows layout: align left/right list items row-by-row */
.expertise-rail{ position: relative; padding: 12px 0; }
.expertise-headings{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 12px; }
.expertise-headings .expertise-fit{ grid-column: auto; }

/* Keep both columns visually comparable in height and rhythm */
.expertise-headings .expertise-fit .expertise-list{ display:block; }
.expertise-rows{ display:block; }
.expertise-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items:start; padding: 12px 0; }
.expertise-row + .expertise-row{ /* removed row dividers per request */ border-top: none; }
.expertise-row .cell{ color: var(--muted); font-size:14px; }

.expertise-headings h3{
  font-size: 1.05rem !important;
  color: var(--gold) !important;
  font-weight: 600 !important;
}
/* Add small circular bullets to each expertise row cell to mimic unordered lists */
.expertise-row .cell{
  position: relative;
  padding-left: 18px;
}
.expertise-row .cell::before{
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0.95;
}

/* Support the new two-column list structure: keep bullets and spacing consistent */
.expertise-list{ margin-top:8px; }
.expertise-list .cell{ color: var(--muted); font-size:14px; position: relative; padding-left: 18px; margin: 8px 0; border:none !important; border-bottom:none !important; border-top:none !important; box-shadow:none; background:none; }
.expertise-list .cell::before{ content: ""; position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--muted); opacity: 0.95; box-shadow:none; }

@media (max-width:900px){
  .expertise-headings{ grid-template-columns: 1fr 1fr; }
}

@media (max-width:425px){
  .expertise-headings{ grid-template-columns: 1fr; }
  .expertise-row{ grid-template-columns: 1fr; }
}

/* Keep a subtle divider after subsection headings across sections, but
   avoid adding it to card titles (these are visual blocks). */
.card h3{ border-bottom: none; padding-bottom: 0; }

/* Add divider after the section subtitle (`p.sub`) for specific sections only */
/* Section dividers between content blocks: show a dashed divider that spans
   the container width. We place these between specific sections by adding
   an ::after on their `.container` elements. */
#works > .container,
#expertise > .container,
#services > .container,
#about > .container{
  position: relative;
}

#works > .container::after,
#expertise > .container::after,
#services > .container::after,
#about > .container::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  bottom: -60px; /* 
  background-image: repeating-linear-gradient(90deg,
    rgba(255,255,255,var(--divider-opacity)) 0,
    rgba(255,255,255,var(--divider-opacity)) 4px,
    transparent 4px,
    transparent 10px
  );
 */
  pointer-events: none;
}


/* Contact two-column layout */
.contact-grid{
  margin-top: 22px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items:start;
}
@media (max-width: 980px){
  .contact-grid{ grid-template-columns: 1fr; }
}






/* --- Portfolio video cards (tilt + hover video) --- */
.tilt-card{
  transform-style: preserve-3d;
  will-change: transform;
}

.card.work .media img,
.card.work .media video.portfolio-video{
  width:100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display:block;
  background:#000;
}

/* Keep card height consistent when video replaces image */
.card.work{ display:flex; flex-direction:column; touch-action: manipulation; }
.card.work .body{ flex:1; display:flex; flex-direction:column; }

/* Place tags at the bottom of the card body so titles/descriptions appear above */
.card.work .body .tags{ margin-top:auto; }

/* --- About values grid --- */
.values-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 12px;
}
@media (max-width: 720px){
  .values-grid{ grid-template-columns: 1fr; }
}
.value{
  display:flex;
  gap: 16px;
  align-items:stretch; /* allow the left icon block to match the height of the text block */
  padding: 0; /* remove card padding */
  border-radius: 0;
  background: transparent; /* remove card background */
  border: none; /* remove card border */
}
.value-icon{
  width: 56px; /* increased icon container size */
  height: 56px; /* will stretch vertically when needed */
  flex: 0 0 56px; /* ensure fixed width across all items */
  min-width: 56px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(242,211,138,.06); /* subtle tint remains to separate icon visually */
  border: 1px solid rgba(242,211,138,.12);
  color: rgba(242,211,138,.95);
  overflow: hidden; /* prevent replaced svg or unexpected content from expanding container */
}
.value-icon svg{ width:28px; height:28px; }

/* --- Contact cards (from Studio 2 archive, restyled to match v5 palette) --- */
.contact-card-row{
  margin-top: 22px;
  display:flex;
  flex-wrap:wrap;
  gap: 14px;
  justify-content:center;
}

.contact-link{ display:block; width: min(320px, 100%); }


.contact-card{
  height: 100%;
  padding: 18px;
  border-radius: var(--radius2);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow2);
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
  position: relative;
  overflow: hidden;
}

.contact-card::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--mouse-x,50%) var(--mouse-y,50%), var(--card-accent-glow, rgba(187,168,255,0.22)) 0%, transparent 48%);
  opacity: 0;
  transition: opacity 180ms ease, transform 220ms ease;
}

.contact-card:hover::before{ opacity: 0.9; transform: scale(1.03); }

.contact-card:hover{
  border-color: rgba(242,211,138,.30);
  background: rgba(255,255,255,.085);
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.45),
              0 8px 40px var(--card-accent-glow, rgba(187,168,255,0.22)),
              0 0 60px rgba(0,0,0,0.0);
}

.contact-card-icon{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--card-accent, rgba(187,168,255,.95));
  box-shadow: 0 6px 18px rgba(0,0,0,0.28), 0 0 14px var(--card-accent-glow, rgba(187,168,255,0.22));
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

.contact-card-icon svg{ width:20px; height:20px; }

/* Per-card accent variables matching Studio (email/telegram/linkedin/instagram/whatsapp/facebook) */
.contact-card-email{ --card-accent: #c8a96a; --card-accent-rgba: rgba(200,169,106,0.95); --card-accent-glow: rgba(200,169,106,0.30); }
.contact-card-telegram{ --card-accent: #0088cc; --card-accent-rgba: rgba(0,136,204,0.95); --card-accent-glow: rgba(0,136,204,0.30); }
.contact-card-linkedin{ --card-accent: #0077b5; --card-accent-rgba: rgba(0,119,181,0.95); --card-accent-glow: rgba(0,119,181,0.30); }
.contact-card-instagram{ --card-accent: #e1306c; --card-accent-rgba: rgba(225,48,108,0.95); --card-accent-glow: rgba(225,48,108,0.36); }
.contact-card-whatsapp{ --card-accent: #25d366; --card-accent-rgba: rgba(37,211,102,0.95); --card-accent-glow: rgba(37,211,102,0.30); }
.contact-card-facebook{ --card-accent: #1877f2; --card-accent-rgba: rgba(24,119,242,0.95); --card-accent-glow: rgba(24,119,242,0.30); }

/* Use accent color in the lighting pseudo-element (use per-card glow variable) */
.contact-card::before{
  background: radial-gradient(circle at var(--mouse-x,50%) var(--mouse-y,50%), var(--card-accent-glow, rgba(187,168,255,0.22)) 0%, transparent 48%);
}

.contact-card-title{
  margin: 12px 0 6px;
  font-size: 18px;
}

.contact-card-desc{ margin:0; color: var(--muted); }


/* ===== Service cards: subtle colored glow (uses --card-accent-glow if present, otherwise fallback) ===== */
.service-card{
  position: relative;
  overflow: hidden;
  --service-accent-glow: rgba(187,168,255,0.12);
  transition: transform .25s ease, box-shadow .28s ease, background .25s ease;
}

.service-card::before{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--mouse-x,50%) var(--mouse-y,50%), var(--card-accent-glow, var(--service-accent-glow)) 0%, transparent 55%);
  opacity: 0;
  transition: opacity 200ms ease, transform 220ms ease;
}

.service-card:hover::before{ opacity: 0.9; transform: scale(1.02); }

.service-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.36), 0 8px 36px var(--card-accent-glow, var(--service-accent-glow));
}


/* --- Surgical fix: prevent horizontal overflow from hero decorative pseudo-elements in responsive/device toolbar --- */
.hero{
  overflow-x: hidden;
  overflow-x: clip;
}



/* Added breakpoint: Featured Works 3-up between 992px and 1199.98px */
@media (min-width: 992px) and (max-width: 1199.98px){
  #works .grid .card{ grid-column: span 4; }
}


/* --- Rhythm & typography polish (additive, non-breaking) --- */
:root{
  --section-pad: clamp(72px, 8vw, 104px);
  --section-pad-tight: clamp(56px, 6vw, 84px);
  --measure: 68ch;
}

body{
  font-size: clamp(15px, 1.05vw, 17px);
  letter-spacing: 0.01em;
}

.section{
  padding: var(--section-pad) 0;
}

.section h2{
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.15;
}

.section p.sub{
  /*max-width: var(--measure);*/
  margin-bottom: clamp(24px, 4vw, 44px) !important;
}

.section p,
.section li{
  max-width: var(--measure);
}


/* --- Keep max-width from affecting grid/cards --- */
.section .grid p,
.section .grid li,
.section .card p,
.section .card li{
  max-width: none;
}


/* ===== ACHIEVEMENTS SECTION ===== */
.achievements-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  max-width: 1200px;
  margin: 40px auto 0;
  padding: 0;
}

.achievement-card {
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  height: 100%;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1 1 320px;
  max-width: 370px;
}

.achievement-card:hover {
  transform: translateY(-10px);
  border-color: rgba(200, 169, 106, 0.4);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6),
              0 0 0 1px rgba(200, 169, 106, 0.3);
}

.achievement-image {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  flex-shrink: 0;
}

.achievement-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.achievement-card:hover .achievement-image img {
  transform: scale(1.1);
}

.achievement-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(7, 8, 18, 0.8) 100%
  );
  z-index: 1;
}

.achievement-content {
  position: relative;
  padding: 30px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  z-index: 2;
}

.achievement-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(200, 169, 106, 0.25) 0%, rgba(181, 131, 90, 0.25) 100%);
  border: 1px solid rgba(200, 169, 106, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.achievement-card:hover .achievement-badge {
  transform: scale(1.1) rotate(5deg);
}

.achievement-badge svg {
  width: 20px;
  height: 20px;
  stroke: var(--gold);
  fill: none;
}

.achievement-content h3 {
  margin: 0 0 12px 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: -0.01em;
  line-height: 1.3;
  font-family: 'Space Grotesk', sans-serif;
  flex-shrink: 0;
}

.achievement-content p {
  margin: 0;
  color: rgba(243, 244, 255, 0.85);
  line-height: 1.6;
  font-size: 1rem;
  min-height: calc(1.6em * 4);
}

@media (max-width: 768px) {
  .achievements-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .achievement-card {
    min-height: 350px;
  }
  
  .achievement-image {
    height: 180px;
  }
  
  .achievement-content {
    padding: 24px;
  }
  
  .achievement-content h3 {
    font-size: 1.3rem;
  }
  
  .achievement-content p {
    font-size: 0.95rem;
  }
}

/* Old arrow card styles - keeping for reference */
.achievements-arrow-container{
  display: flex;
  flex-direction: column;
  gap: 50px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  position: relative;
  z-index: 3;
}

.achievement-arrow-card{
  position: relative;
  height: 180px;
  width: 85%;
  margin-left: 0;
  transition: all 0.4s ease;
  filter: drop-shadow(0 10px 35px rgba(0,0,0,0.5)) drop-shadow(0 4px 15px rgba(0,0,0,0.3));
}

.achievement-arrow-card.right{
  margin-left: auto;
  margin-right: 0;
}

.achievement-arrow-card:hover{
  transform: translateX(10px);
  filter: drop-shadow(0 10px 35px rgba(0,0,0,0.5)) drop-shadow(0 4px 15px rgba(0,0,0,0.3));
}

.achievement-arrow-card.right:hover{
  transform: translateX(-10px);
}

.arrow-background{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 50%, calc(100% - 40px) 100%, 0 100%);
}

.achievement-arrow-card.right .arrow-background{
  clip-path: polygon(40px 0, 100% 0, 100% 100%, 40px 100%, 0 50%);
}

.arrow-background img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease, filter 0.6s ease;
  filter: brightness(1.0);
}

@media (min-width: 1178px) {
  .achievement-arrow-card:hover .arrow-background img{
    transform: scale(1.1);
    filter: brightness(1.1);
  }
}

.arrow-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.90) 0%,
    rgba(0,0,0,0.20) 50%,
    rgba(0,0,0,0.3) 100%
  );
  z-index: 1;
  clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 50%, calc(100% - 40px) 100%, 0 100%);
}

.achievement-arrow-card.right .arrow-overlay{
  clip-path: polygon(40px 0, 100% 0, 100% 100%, 40px 100%, 0 50%);
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.3) 0%,
    rgba(0,0,0,0.20) 50%,
    rgba(0,0,0,0.90) 100%
  );
}

.arrow-content{
  position: relative;
  z-index: 2;
  padding: 30px 60px 30px 40px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
}

.achievement-arrow-card.right .arrow-content{
  clip-path: polygon(40px 0, 100% 0, 100% 100%, 40px 100%, 0 50%);
  padding: 30px 40px 30px 60px;
  text-align: right;
  align-items: flex-end;
}

.arrow-content h3{
  margin: 0 0 8px 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.arrow-content p{
  margin: 0;
  color: rgba(243,244,255,0.9);
  line-height: 1.5;
  font-size: 0.95rem;
  max-width: 350px;
}

.achievement-arrow-card.right .arrow-content p{
  margin-left: auto;
}

/* Old achievement styles - keeping for potential reuse */
.achievements-timeline{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  margin: 0 auto;
  max-width: 1400px;
  padding: 0;
}

.achievement-item{
  position: relative;
  overflow: hidden;
  background: rgba(0,0,0,0.5);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  transition: all 0.4s ease, grid-column 0.5s ease;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

/* Row 1: Long card (2/3) + Small card (1/3) */
.achievement-item:nth-child(1){
  grid-column: span 4;
  height: 360px;
}

.achievement-item:nth-child(2){
  grid-column: span 2;
  height: 360px;
}

/* Row 2: Small card (1/3) + Long card (2/3) */
.achievement-item:nth-child(3){
  grid-column: span 2;
  height: 360px;
}

.achievement-item:nth-child(4){
  grid-column: span 4;
  height: 360px;
}

/* Row 3: Long card (2/3) + Small card (1/3) */
.achievement-item:nth-child(5){
  grid-column: span 4;
  height: 360px;
}

.achievement-item:nth-child(6){
  grid-column: span 2;
  height: 360px;
}

/* Row 4: Small card (1/3) + Long card (2/3) */
.achievement-item:nth-child(7){
  grid-column: span 2;
  height: 360px;
}

.achievement-item:nth-child(8){
  grid-column: span 4;
  height: 360px;
}

.achievement-item:hover{
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
  z-index: 10;
}

.achievement-image{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.achievement-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.achievement-item:hover .achievement-image img{
  transform: scale(1.08);
}

.achievement-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0,0,0,0.2) 40%,
    rgba(0,0,0,0.85) 100%
  );
  z-index: 1;
}

.achievement-content{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32px 28px 28px;
  z-index: 2;
}

.achievement-badge svg{
  width: 20px;
  height: 20px;
}

.achievement-content p{
  margin: 0;
  color: rgba(243,244,255,0.85);
  line-height: 1.5;
  font-size: 0.9rem;
}

/* ===== WORKS SECTION (Using achievement card structure) ===== */
#works .achievements-timeline{
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.works-row{
  display: flex;
  gap: 24px;
  width: 100%;
}

.works-row.rev{
  flex-direction: row;
}

.works-row .achievement-item{
  flex: 1;
  height: 360px;
}

.works-row .achievement-item:first-child{
  flex: 2;
}

.works-row .achievement-item:last-child{
  flex: 1;
}

.works-row.rev .achievement-item:first-child{
  flex: 1;
}

.works-row.rev .achievement-item:last-child{
  flex: 2;
}

#works .achievement-item{
  /* Default: odd cards are long (2/3), even are short (1/3) */
  transition: transform 0.4s ease, box-shadow 0.4s ease, width 0.6s cubic-bezier(0.4, 0, 0.2, 1), flex 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover resize animations for works rows - only small cards expand */
/* Regular row: small card is last-child, when hovered it grows */
.works-row:not(.rev):has(.achievement-item:last-child:hover) .achievement-item:last-child{
  flex: 2;
}

.works-row:not(.rev):has(.achievement-item:last-child:hover) .achievement-item:first-child{
  flex: 1;
}

/* Rev row: small card is first-child, when hovered it grows */
.works-row.rev:has(.achievement-item:first-child:hover) .achievement-item:first-child{
  flex: 2;
}

.works-row.rev:has(.achievement-item:first-child:hover) .achievement-item:last-child{
  flex: 1;
}

#works .achievement-image video.work-video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

#works .achievement-item:hover .achievement-image video.work-video{
  transform: scale(1.08);
}

#works .achievement-content h3{
  font-size: 1.25rem;
  color: var(--gold);
}

#works .achievement-content p{
  font-size: 0.88rem;
}

/* ===== Works Section Responsive Styles ===== */
@media (max-width: 992px){
  .works-row{
    flex-direction: column;
    gap: 20px;
  }
  
  .works-row.rev{
    flex-direction: column;
  }
  
  .works-row .achievement-item,
  .works-row .achievement-item:first-child,
  .works-row .achievement-item:last-child,
  .works-row.rev .achievement-item:first-child,
  .works-row.rev .achievement-item:last-child{
    flex: none !important;
    width: 100% !important;
    height: 280px;
  }
  
  /* Disable hover resize on mobile */
  .works-row:not(.rev):has(.achievement-item:last-child:hover) .achievement-item:last-child,
  .works-row:not(.rev):has(.achievement-item:last-child:hover) .achievement-item:first-child,
  .works-row.rev:has(.achievement-item:first-child:hover) .achievement-item:first-child,
  .works-row.rev:has(.achievement-item:first-child:hover) .achievement-item:last-child{
    flex: none !important;
    width: 100% !important;
  }
  
  #works .achievement-content{
    padding: 24px 20px 20px;
  }
  
  #works .achievement-content h3{
    font-size: 1.15rem;
  }
  
  #works .achievement-content p{
    font-size: 0.85rem;
  }
}

@media (max-width: 768px){
  .works-row .achievement-item,
  .works-row .achievement-item:first-child,
  .works-row .achievement-item:last-child{
    height: 240px !important;
  }
  
  #works .achievement-content{
    padding: 20px 18px 18px;
  }
  
  #works .achievement-content h3{
    font-size: 1.05rem;
  }
  
  #works .achievement-content p{
    font-size: 0.8rem;
  }
}


/* ===== CLIENTS MARQUEE ===== */
.clients-marquee{
  overflow: hidden;
  background: rgba(242,211,138,0.03);
  border-radius: 0;
  padding: 48px 0;
  position: relative;
  width: 100%;
}

.clients-marquee .container{
  max-width: none;
  padding: 0;
}

.clients-marquee::before,
.clients-marquee::after{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}

.clients-marquee::before{
  left: 0;
  background: linear-gradient(90deg, var(--bg) 0%, transparent 100%);
}

.clients-marquee::after{
  right: 0;
  background: linear-gradient(90deg, transparent 0%, var(--bg) 100%);
}

.clients-track{
  display: flex;
  gap: 80px;
  will-change: transform;
}

.clients-track:hover{
  /* Pause handled by JavaScript */
}

.client-logo{
  flex-shrink: 0;
  width: 160px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.65;
  transition: opacity 0.3s ease, transform 0.3s ease;
  filter: brightness(0) invert(1);
}

.client-logo:hover{
  opacity: 1;
  transform: scale(1.08);
}

.client-logo img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* === Responsive adjustments for Achievements & Clients === */
/* === Responsive adjustments for Achievements & Clients === */
@media (max-width: 992px){
  .achievements-arrow-container{
    padding: 20px 0;
  }
  
  .achievement-arrow-card{
    width: 90%;
    height: 160px;
  }
  
  .arrow-content{
    padding: 25px 50px 25px 30px;
  }
  
  .arrow-content h3{
    font-size: 1.3rem;
  }
  
  .arrow-content p{
    font-size: 0.88rem;
  }
  
  #achievements .achievements-timeline{
    flex-direction: column;
    align-items: center;
    max-width: 320px;
  }
  
  #achievements .achievement-item{
    width: 260px !important;
    height: 300px !important;
    margin: -60px 0 0 0 !important;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  }
  
  #achievements .achievement-item:nth-child(1){
    margin-top: 0 !important;
  }
  
  #achievements .achievement-content{
    padding: 24px 20px 20px;
  }
  
  #achievements .achievement-content h3{
    font-size: 1.2rem;
  }
  
  #achievements .achievement-content p{
    font-size: 0.85rem;
  }
  
  .client-logo{
    width: 120px;
    height: 60px;
  }
  
  .clients-track{
    gap: 60px;
  }
}

/* Tablet blur effect - starts at 975px when cards become smaller */
@media (max-width: 975px) and (min-width: 600px){
  .arrow-overlay{
    background: linear-gradient(
      90deg,
      rgba(0,0,0,var(--achievement-overlay-tablet-start)) 0%,
      rgba(0,0,0,var(--achievement-overlay-tablet-mid)) 50%,
      rgba(0,0,0,var(--achievement-overlay-tablet-end)) 100%
    );
    z-index: 1;
  }
  
  .achievement-arrow-card.right .arrow-overlay{
    background: linear-gradient(
      90deg,
      rgba(0,0,0,var(--achievement-overlay-tablet-end)) 0%,
      rgba(0,0,0,var(--achievement-overlay-tablet-mid)) 50%,
      rgba(0,0,0,var(--achievement-overlay-tablet-start)) 100%
    );
    z-index: 1;
  }
  
  .arrow-background img{
    filter: brightness(1.0) blur(var(--achievement-blur-tablet));
  }
  
  .achievement-arrow-card:hover .arrow-background img{
    filter: brightness(1.0) blur(var(--achievement-blur-tablet));
  }
}

/* Tablet card styling - smaller cards at 768px and below */
@media (max-width: 768px){
  .achievement-arrow-card{
    width: 95%;
    height: 140px;
  }
  
  .arrow-content{
    padding: 20px 35px 20px 25px;
    z-index: 2;
  }
  
  .arrow-content h3{
    font-size: 1.1rem;
    margin-bottom: 6px;
  }
  
  .arrow-content p{
    font-size: 0.82rem;
    line-height: 1.4;
  }
  
  #achievements .achievement-item{
    width: 240px !important;
    height: 280px !important;
  }
  
  #achievements .achievement-badge{
    width: 36px;
    height: 36px;
  }
}

/* Mobile blur effect (single column, smaller screens) - adjust via --achievement-blur-mobile variable */
@media (max-width: 599px){
  .arrow-overlay{
    background: linear-gradient(
      90deg,
      rgba(0,0,0,var(--achievement-overlay-mobile-start)) 0%,
      rgba(0,0,0,var(--achievement-overlay-mobile-mid)) 50%,
      rgba(0,0,0,var(--achievement-overlay-mobile-end)) 100%
    );
    z-index: 1;
  }
  
  .achievement-arrow-card.right .arrow-overlay{
    background: linear-gradient(
      90deg,
      rgba(0,0,0,var(--achievement-overlay-mobile-end)) 0%,
      rgba(0,0,0,var(--achievement-overlay-mobile-mid)) 50%,
      rgba(0,0,0,var(--achievement-overlay-mobile-start)) 100%
    );
    z-index: 1;
  }
  
  .arrow-background img{
    filter: brightness(1.0) blur(var(--achievement-blur-mobile));
  }
  
  /* Keep blur on hover/tap on mobile */
  .achievement-arrow-card:hover .arrow-background img{
    filter: brightness(1.0) blur(var(--achievement-blur-mobile));
  }
}
  #achievements .achievement-badge svg{
    width: 18px;
    height: 18px;
  }
  
  #achievements .achievement-content{
    padding: 20px 18px 18px;
  }
  
  #achievements .achievement-content h3{
    font-size: 1.1rem;
  }
  
  #achievements .achievement-content p{
    font-size: 0.8rem;
  }
}

/* Responsive styles for ribbon achievements */
@media (max-width: 992px){
  .achievements-ribbon-grid{
    max-width: 100%;
    padding: 20px 0;
  }
  
  .ribbon-achievement{
    min-height: 120px;
  }
  
  .ribbon-achievement:nth-child(odd),
  .ribbon-achievement:nth-child(even){
    margin-left: 0;
    margin-right: 0;
  }
  
  .ribbon-icon{
    width: 60px;
    height: 60px;
    margin: 20px;
  }
  
  .ribbon-icon svg{
    width: 28px;
    height: 28px;
  }
  
  .ribbon-content{
    padding: 20px 30px 20px 0;
  }
  
  .ribbon-achievement:nth-child(even) .ribbon-content{
    padding: 20px 0 20px 30px;
  }
  
  .ribbon-content h3{
    font-size: 1.1rem;
  }
  
  .ribbon-content p{
    font-size: 0.85rem;
  }
  
  .ribbon-number{
    font-size: 4rem;
  }
}

@media (max-width: 768px){
  .ribbon-achievement{
    flex-direction: row !important;
    clip-path: polygon(
      0 0,
      calc(100% - 20px) 0,
      100% 50%,
      calc(100% - 20px) 100%,
      0 100%,
      20px 50%
    );
    min-height: auto;
    margin: 0 !important;
  }
  
  .ribbon-icon{
    width: 50px;
    height: 50px;
    margin: 15px;
  }
  
  .ribbon-icon svg{
    width: 24px;
    height: 24px;
  }
  
  .ribbon-content{
    padding: 20px 30px 20px 10px !important;
  }
  
  .ribbon-content h3{
    font-size: 1rem;
  }
  
  .ribbon-content p{
    font-size: 0.8rem;
  }
  
  .ribbon-number{
    display: none;
  }
}