.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;
}


/* Final override: use the user's glass-card style on small screens and force-hide images
  This block intentionally placed at the end to ensure it wins. */
@media (max-width: 1024px) {
  /* hide all media inside achievements */
  #achievements .achievement-image img,
  #achievements .achievement-image video,
  #achievements .achievement-arrow-card .arrow-background img,
  #achievements .achievement-arrow-card .arrow-background video {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    pointer-events: none !important;
    border-radius: 0px !important;

  }

  /* Apply glass-card visual adapted from user's sample */
  #achievements .achievement-image,
  #achievements .achievement-arrow-card .arrow-background {
    background: rgba(255, 255, 255, 0.4) !important;
    background-image: url('../assets/achievements/award-placeholder.png') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    backdrop-filter: blur(14px) saturate(1.05) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.05) !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      inset 0 -1px 0 rgba(255, 255, 255, 0.1),
      inset 0 0 60px 30px rgba(255, 255, 255, 0.12) !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 0px !important;
  }

  /* horizontal sheen */
  #achievements .achievement-image::before,
  #achievements .achievement-arrow-card .arrow-background::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent) !important;
    pointer-events: none !important;
  }

  /* vertical sheen */
  #achievements .achievement-image::after,
  #achievements .achievement-arrow-card .arrow-background::after {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; width: 1px !important; height: 100% !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.8), transparent, rgba(255,255,255,0.3)) !important;
    pointer-events: none !important;
  }
}

/* Ensure arrow overlay gradient flips for left-side arrow cards
   so dark side appears on the correct side per card orientation. */
#achievements .achievement-arrow-card:not(.right) .arrow-overlay{
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.6) 0%,
    rgba(7,8,18,0.5) 50%,
    rgba(255,255,255,0.02) 100%
  ) !important;
}


/* 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.3;
  --service-card-icon-scale-hover: 1.6;
  --service-card-icon-offset-x: 0px;
  --service-card-icon-offset-y: 0px;
  --service-card-icon-brightness: 0.8;
  --service-card-icon-brightness-hover: 0.9;
}

*{ 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);
}

:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* 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);
  -webkit-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);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav{
    background: rgba(7,8,18,.90);
  }
}

.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{ height:70px; width:auto; border-radius:12px; box-shadow:none; }
.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:20px;
  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;
  isolation: isolate;
}

/* Card-level glass sweep (inside card bounds, not parent) */
#services .card::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  pointer-events: none;
  z-index: 2;
  opacity: .18;
  background-image: linear-gradient(102deg, rgba(255,255,255,0) 0%, rgba(255,240,210,.20) 42%, rgba(255,255,255,.30) 50%, rgba(255,240,210,.18) 58%, rgba(255,255,255,0) 100%);
  background-repeat: no-repeat;
  background-size: 62% 160%;
  background-position: -160% 50%;
  transition: background-position .85s cubic-bezier(.22,.61,.36,1), opacity .35s ease;
  clip-path: inset(0 round var(--radius));
}

/* 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;
  overflow-wrap: break-word;
  word-wrap: break-word;
  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;
  -webkit-filter: brightness(var(--service-card-icon-brightness)) saturate(1.04) contrast(1.04) drop-shadow(0 10px 18px rgba(242,211,138,.10));
  filter: brightness(var(--service-card-icon-brightness)) 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::before,
  #services .card:focus::before,
  #services .card:focus-visible::before{
    opacity: .42;
    background-position: 230% 50%;
  }

  #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));
    -webkit-filter: brightness(var(--service-card-icon-brightness-hover)) saturate(1.1) contrast(1.08) drop-shadow(0 12px 22px rgba(242,211,138,.14));
    filter: brightness(var(--service-card-icon-brightness-hover)) 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%);
  }
}

@media (prefers-reduced-motion: reduce){
  #services .card::before{
    transition: opacity .2s ease;
    background-position: 50% 50%;
  }

  #services .card:hover::before,
  #services .card:focus::before,
  #services .card:focus-visible::before{
    opacity: .34;
  }
}

/* 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; }

/* Footer email contact (left column) */
.footer-contact{ margin-top:10px; }
/* Make footer email match the small copyright text and inherit color */
.footer-email{ display:inline-flex; align-items:center; gap:10px; color:var(--muted2); font-size:13px; text-decoration:none; }
.footer-email:hover{ color:var(--text); }
.footer-email-icon{ display:inline-block; width:18px; height:18px; color:inherit; flex:0 0 18px; }
.footer-email-text{ color:inherit; font-size:inherit; }

@media (max-width: 600px){
  .footer-contact{ margin-top:8px; }
  .footer-email-text{ display:inline-block; word-break:break-all; }
}

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);
  
}

/* Make Featured Works full-screen on the homepage (body without a `data-page` attr).
   Cards and rows are resized to evenly fill the viewport while keeping existing
   styling, hover interactions and responsive rules. This is scoped to the
   homepage so other pages that also include `#works` are unaffected. */
body:not([data-page]) #works{
  min-height: calc(100vh - var(--nav-height));
  display: flex;
  align-items: center;
}

body:not([data-page]) #works > .container{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  max-width: 100% !important; /* allow full-bleed layout on homepage */
  width: 100% !important;
  padding-left: 20px !important; /* keep at least 20px side inset */
  padding-right: 20px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Let the timeline take the remaining vertical space and distribute rows */
body:not([data-page]) #works .achievements-timeline{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Make the timeline span the full container width (respecting 20px inset).
   This aligns the rows/cards with the section title and subtitle. */
body:not([data-page]) #works .achievements-timeline{
  max-width: none;
  width: 100%;
}

/* Each works-row becomes a flexible band that shares the available height */
body:not([data-page]) #works .works-row{
  display: flex;
  gap: 24px;
  align-items: stretch;
  /* do not force rows to share vertical space; keep them stacked naturally */
  min-height: 0;
}

/* Cards stretch to the full height of their row; keep card internals in column flow */
body:not([data-page]) #works .works-row .achievement-item{
  /* do not override global flex ratios here; preserve original
     long/short card proportions and hover-resize functionality */
  height: auto !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* Ensure the media area fills the card without forcing the card to reflow
   when sibling flex values change. The content area (title/desc) is fixed
   so only widths animate. This prevents the temporary height collapse. */
body:not([data-page]) #works .works-row .achievement-item .achievement-image{
  flex: 1 1 auto;
  min-height: 0;
}

body:not([data-page]) #works .works-row .achievement-item .achievement-content{
  flex: 0 0 auto;
}

/* Smoothly animate flex changes (widths) while keeping height stable. */
body:not([data-page]) #works .works-row .achievement-item{
  transition: flex 520ms cubic-bezier(.22,.61,.36,1), transform 360ms ease, box-shadow 360ms ease;
}

/* Make the image/video area fill the available vertical space inside the card */
body:not([data-page]) #works .achievement-image{
  height: 100%;
  flex: 1 1 auto;
  position: relative;

  /* Ensure media fills card without changing card height during flex animation */
  min-height: 0;
}

/* Desktop-only: lock the visual card height so it doesn't change mid-transition.
   Keep the existing 500px baseline used elsewhere; mobile rules below still apply. */
@media (min-width: 992px){
  body:not([data-page]) #works .works-row{
    /* provide a stable row baseline so cross-axis sizing doesn't collapse */
    min-height: 500px;
  }

  body:not([data-page]) #works .works-row .achievement-item{
    /* lock the card height for the duration of the animation */
    height: 500px !important;
    min-height: 500px;
    max-height: none;
    /* ensure we do NOT transition height (only flex/transform/box-shadow) */
    transition: flex 520ms cubic-bezier(.22,.61,.36,1), transform 360ms ease, box-shadow 360ms ease;
    overflow: hidden;
  }
}

body:not([data-page]) #works .achievement-image img,
body:not([data-page]) #works .achievement-image video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Slightly reduce in-card content padding so titles/descriptions remain visible */
body:not([data-page]) #works .achievement-content{
  padding: 18px 20px;
}

/* Remove the decorative fades that previously extended beyond the section on
   the homepage (these caused the following `#expertise` section to appear
   visually overlaid). The global fades remain for other pages. */
/* Keep the decorative fades so the section transitions remain subtle.
   (Do not hide ::before/::after on the homepage.) */

#works::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-250px;
  height: 140px;
  background: linear-gradient(180deg, transparent, 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%, transparent 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, transparent, 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: 28px; margin-bottom: 12px; }
.expertise-headings > .expertise-combined,
.expertise-headings > .expertise-fit{
  max-width: 560px; /* reduce line length so columns leave a visible gap */
  justify-self: center; /* center each column in its grid cell */
}
.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 spacing between subsection title (strong) and its list below */
.expertise-headings > .expertise-combined > strong,
.expertise-headings > .expertise-fit > strong{
  display: block;
  margin-bottom: 20px;
}
/* Add small circular bullets to each expertise row cell to mimic unordered lists */
.expertise-row .cell{
  position: relative;
  padding-left: 26px;
}
/* Replace the plain circular bullet with a slightly larger checkmark that inherits color */
/* Previously used pseudo-element checkmarks were replaced by lucide icons
   injected into the DOM for reliability on hosted environments. Icons are
   positioned via the `.expertise-check` class below. */

/* Use a masked SVG checkmark drawn from background-color (var(--gold)).
   This mirrors the approach used elsewhere and ensures the color is controlled
   via the `background-color` property on the pseudo-element. */
.expertise-row .cell::before{
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-color: var(--gold);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9.5 16.2l-4.2-4.2 1.4-1.4 2.8 2.8 6.8-6.8 1.4 1.4z'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9.5 16.2l-4.2-4.2 1.4-1.4 2.8 2.8 6.8-6.8 1.4 1.4z'/></svg>") center/contain no-repeat;
}

.expertise-list .cell::before{
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-color: var(--gold);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9.5 16.2l-4.2-4.2 1.4-1.4 2.8 2.8 6.8-6.8 1.4 1.4z'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9.5 16.2l-4.2-4.2 1.4-1.4 2.8 2.8 6.8-6.8 1.4 1.4z'/></svg>") center/contain no-repeat;
}

/* 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: 26px; margin: 20px 0; border:none !important; border-bottom:none !important; border-top:none !important; box-shadow:none; background:none; }
.expertise-list .cell { padding-left: 40px; list-style: none !important; display: block !important; }

/* Allow the expertise section subtitle to span the full measure (no max-width)
   so the two-sentence subtitle appears as one sentence per line. Other
   sections keep the usual measure constraint. */
#expertise .sub{
  max-width: none;
  width: 100%;
}

/* Disable tilt transforms / transitions on touch/coarse pointer devices so
   hover-only animations do not trigger on tap. This keeps desktop hover
   behaviour intact while preventing mobile clicks from animating cards. */
@media (hover: none), (pointer: coarse) {
  .tilt-card, .tilt-card * {
    transition: none !important;
    transform: none !important;
    will-change: auto !important;
  }
  /* Hide glare element created by VanillaTilt to avoid visual noise */
  .tilt-card .js-tilt-glare, .tilt-card .js-tilt-glare-inner { display: none !important; }
}
.expertise-row .cell { padding-left: 40px; list-style: none !important; display: block !important; }

/* Extra specificity to override any global list or marker styles that may load
   from other stylesheets when hosted. Targets possible parent roots too. */
.expertise-headings .expertise-list .cell,
.expertise-headings .expertise-list .cell *{
  list-style: none !important;
}

/* Stack expertise columns vertically on common mobile/tablet widths so
   "What We Do" and "When We Are A Good Fit" appear one below another. */
@media (max-width: 980px) {
  .expertise-headings{ grid-template-columns: 1fr; gap: 18px; }
  .expertise-headings > .expertise-combined,
  .expertise-headings > .expertise-fit{
    max-width: none;
    justify-self: stretch;
    width: 100%;
  }
  .expertise-row{ grid-template-columns: 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; }
  /* When the form stacks above, keep cards two-per-row and let them fill the container */
  .contact-cards{ grid-template-columns: repeat(2, 1fr); }
  .contact-link{ width: 100%; max-width: none; margin: 0; }
}






/* --- 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: 100%; max-width: 320px; margin: 0 auto; }

/* Ensure full-width cards when the contact form stacks above (responsive override)
   This rule must come after the default to win the cascade. */
@media (max-width: 980px){
  .contact-grid .contact-cards .contact-link{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

/* Contact form layout: form left, cards right */
.contact-grid{
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 24px;
  align-items: start;
}

.contact-form-wrapper{
  background: rgba(255,255,255,0.02);
  padding: 24px;
  border-radius: 12px;
}

.contact-form label{ display:block; margin-top:12px; font-weight:600; }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea{
  width:100%; padding:10px 12px; margin-top:8px; background: rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); color:var(--text); border-radius:8px;
}
.contact-form button{ margin-top:14px; }

/* Make contact cards appear in two columns to save vertical space */
.contact-cards{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

/* Prevent the message textarea from being resized which breaks layout */
.contact-form textarea{ resize: none; }

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

@media (max-width: 540px){
  .contact-cards{ grid-template-columns: 1fr; }
}

@media (max-width: 540px){
  .contact-link{ width: 100%; max-width: none; margin: 0; }
}

/* Pricing CTA used on service pages — reuse for form send button */
.pricing-cta {
  background: linear-gradient(90deg, #c8a96a 0%, #f2d38a 100%);
  color: #070812;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.8rem 0.9rem;
  box-shadow: 0 6px 20px rgba(200,169,106,0.12);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s;
  cursor: pointer;
  letter-spacing: 0.02em;
  width: 100%;
  display: inline-block;
  text-align: center;
}
.pricing-cta:hover, .pricing-cta:focus{ 
  background: linear-gradient(90deg, #ffe9b8 0%, #ffd98a 50%, #f7d48a 100%);
  box-shadow: inset 0 8px 24px rgba(242,211,138,0.18), 0 12px 32px rgba(242,211,138,0.12);
  transform: translateY(-2px) scale(1.02);
  outline: none;
}

/* Contact status modal */
.status-modal{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 12000;
}
.status-modal[hidden]{ display: none; }
.status-modal-backdrop{
  position: absolute; inset: 0; background: rgba(7,8,18,0.6); backdrop-filter: blur(4px);
}
.status-modal-panel{
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  padding: 20px 20px 16px 20px;
  width: min(520px, 92%);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(2,6,23,0.6);
  color: var(--text);
  z-index: 2;
}
.status-close{
  position: absolute; right: 10px; top: 8px; border: none; background: transparent; color: var(--muted); font-size: 22px; cursor: pointer;
}
.status-modal h3{ margin-top: 6px; margin-bottom: 8px; }
.status-modal p{ margin: 0 0 14px 0; color: var(--muted); }
.status-actions{ display:flex; justify-content:flex-end; }
.status-ok{ min-width:120px; }


.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;
  /* Avoid `all` to prevent height from being animated — list explicit properties */
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 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;
  /* badge only needs transform and visual property transitions */
  transition: transform 0.3s ease, background 0.3s ease, border-color 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.2em * 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;
  }

  /* On small screens for the Awards section only, remove heavy background imagery
     and use a 'glass' card. This keeps portfolio/works unchanged. */
  #achievements .achievement-image img,
  #achievements .achievement-image video {
    display: none !important;
  }

  #achievements .achievement-image {
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255, 245, 220, 0.02));
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 12px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.35) inset;
    position: relative;
    overflow: hidden;
  }

  /* Subtle glare / dispersion pseudo-element for Awards */
  #achievements .achievement-image::before{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(1200px 400px at 10% 10%, rgba(255,255,255,0.06), transparent 12%),
                linear-gradient(120deg, rgba(255,255,255,0.02), rgba(200,169,106,0.02));
    mix-blend-mode: overlay;
    opacity: 0.9;
  }
}

/* Prevent tap movement only for Awards (do not affect portfolio cards) */
@media (hover: none), (pointer: coarse) {
  #achievements .achievement-item,
  #achievements .achievement-item:active,
  #achievements .achievement-item:focus,
  #achievements .achievement-item:focus-visible {
    transform: none !important;
    transition: none !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3) !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
  }

  #achievements .achievement-item:active .achievement-image img,
  #achievements .achievement-item:active .achievement-content,
  #achievements .achievement-item:focus .achievement-image img {
    transform: none !important;
  }
}

/* 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: transform 0.4s ease, filter 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);
  /* Avoid animating height: be explicit so only transform/visuals animate */
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 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: 500px;
}

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

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

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

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

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

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

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

.works-row:not(.rev) .achievement-item:last-child:hover,
.works-row.rev .achievement-item:first-child:hover{
  /* No transforms on hover — only flex-based width animation should run.
     This prevents any visual shift or jump in position. */
  transform: none !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
  z-index: 10;
}

/* Neutralize any inline transforms that may have been left by the tilt library
   specifically for works cards. This ensures JS-injected `style.transform`
   won't cause jumps. Contact cards (outside `.works-row`) keep tilt. */
.works-row .tilt-card{
  transform: none !important;
}

.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;
}

.works-row:not(.rev) .achievement-item:last-child:hover .achievement-image img,
.works-row.rev .achievement-item:first-child:hover .achievement-image img{
  /* Keep media static during the width-flex animation to avoid compounded visual changes */
  transform: none;
}

.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: 500px;
}

.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 */
/* Class-based fallback for browsers without :has() support */
.works-row:not(.rev).is-hover-expand-end .achievement-item:last-child{
  flex: 2;
}

.works-row:not(.rev).is-hover-expand-end .achievement-item:first-child{
  flex: 1;
}

.works-row.rev.is-hover-expand-start .achievement-item:first-child{
  flex: 2;
}

.works-row.rev.is-hover-expand-start .achievement-item:last-child{
  flex: 1;
}

/* 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 .works-row:not(.rev) .achievement-item:last-child:hover .achievement-image video.work-video,
#works .works-row.rev .achievement-item:first-child:hover .achievement-image video.work-video{
  transform: none;
}

#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;
  }
}

/* Strong overrides: ensure Awards use frosted-glass cards and hide background media
  on small screens only. Placed at end so these rules win. */
@media (max-width: 1024px) {
  #achievements .achievement-image img,
  #achievements .achievement-image video {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    pointer-events: none !important;
  }
  #achievements .achievement-image {
    /* stronger frosted glass look */
    background-color: rgba(255,255,255,0.035) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(12px) saturate(1.2) contrast(1.05) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.2) contrast(1.05) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18) !important;
    position: relative !important;
    overflow: hidden !important;
    background-image: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00));
  }

  /* Sheen layer: soft highlight across top-left */
  #achievements .achievement-image::before{
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.00) 28%) !important;
    mix-blend-mode: overlay !important;
    opacity: 0.95 !important;
    transform: translateZ(0);
  }

  /* Bottom shadow to add depth */
  #achievements .achievement-image::after{
    content: "" !important;
    position: absolute !important;
    left: 0; right: 0; bottom: 0; height: 42% !important;
    background: linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.24)) !important;
    pointer-events: none !important;
    border-radius: 0 0 12px 12px !important;
  }

  /* Very subtle grain using repeating-linear-gradient for texture */
  #achievements .achievement-image .__glass-noise{ /* fallback element if present */
    position: absolute; inset: 0; pointer-events: none; opacity: 0.03; mix-blend-mode: overlay;
    background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, rgba(0,0,0,0.00) 1px 2px);
  }
}

/* Arrow-card: hide background image and make arrow background a glass panel
  for award arrow cards on touch / small screens */
@media (max-width: 1024px) {
  #achievements .achievement-arrow-card .arrow-background img,
  #achievements .achievement-arrow-card .arrow-background video {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    pointer-events: none !important;
  }

  /* Preserve clip-path while using a glass-like background */
  #achievements .achievement-arrow-card .arrow-background {
    background-color: rgba(255,255,255,0.035) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(12px) saturate(1.15) contrast(1.04) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.15) contrast(1.04) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18) !important;
    position: absolute !important;
    inset: 0 !important;
    overflow: hidden !important;
    background-image: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
    background-size: cover !important;
    background-position: center !important;
    border-radius: 0px !important;
  }

  #achievements .achievement-arrow-card .arrow-background::before{
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.00)) !important;
    mix-blend-mode: overlay !important;
    opacity: 0.95 !important;
  }

  #achievements .achievement-arrow-card .arrow-background::after{
    content: "" !important;
    position: absolute !important;
    left: 0; right: 0; bottom: 0; height: 42% !important;
    background: linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.26)) !important;
    pointer-events: none !important;
    border-radius: 0 0 12px 12px !important;
  }

  /* optional micro-grain for arrow background */
  #achievements .achievement-arrow-card .arrow-background .__glass-noise{
    position: absolute; inset: 0; pointer-events: none; opacity: 0.03; mix-blend-mode: overlay;
    background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, rgba(0,0,0,0.00) 1px 2px);
  }

  /* Slightly adjust overlay so text remains readable */
  #achievements .achievement-arrow-card .arrow-overlay{
    background: linear-gradient(
      90deg,
      rgba(255,255,255,0.02) 0%,
      rgba(7,8,18,0.5) 50%,
      rgba(0,0,0,0.6) 100%
    ) !important;
    mix-blend-mode: normal !important;
  }

}

/* Final homepage overrides: make sure homepage-scoped works rules take precedence
   over earlier global rules (prevents transient height collapse and ensures
   the long/short proportions and hover flex animations remain smooth). */
body:not([data-page]) #works .works-row{
  align-items: stretch;
}
body:not([data-page]) #works .works-row .achievement-item{
    /* keep height auto but enforce a generous minimum so small cards don't
      collapse to a thin line. Matches earlier desktop baseline (500px). */
    /* Fix: enforce fixed desktop card height so it never animates smaller */
    height: 500px !important;
    min-height: 500px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  will-change: flex, transform !important;
  transition: flex 520ms cubic-bezier(.22,.61,.36,1) !important;
}
body:not([data-page]) #works .works-row .achievement-item .achievement-image{
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
body:not([data-page]) #works .works-row .achievement-item .achievement-content{
  flex: 0 0 auto !important;
}