/*
Theme Name: ARC Studio
Theme URI: https://example.com/arc-studio
Author: ARC Studio Team
Author URI: https://example.com
Description: Custom high-performance theme with modular CTA banner template parts, glassmorphism split designs, and portfolio filters.
Version: 3.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: arc-studio
*/

/* ============================================================
   CSS VARIABLES & RESET
============================================================ */
/*
 * ================================================================
 *  FORMA STUDIO — main.css
 *  Complete stylesheet for all 5 pages:
 *  index.html · about.html · services.html · work.html · contact.html
 *
 *  Table of Contents
 *  ─────────────────
 *   1.  Google Fonts Import
 *   2.  Design Tokens (CSS Variables)
 *   3.  Reset & Base
 *   4.  Typography System  (H1–H6, body, paragraphs, links)
 *   5.  Layout Utilities
 *   6.  Buttons
 *   7.  Navigation  (navbar, mobile menu)
 *   8.  Page Hero  (index.html)
 *   9.  Page Hero  (inner pages — about / services / work)
 *  10.  Marquee / Ticker
 *  11.  Section Shared Styles
 *  12.  Services Section  (index.html)
 *  13.  Portfolio Grid  (index.html)
 *  14.  Process Section  (index.html)
 *  15.  About / Studio Section  (index.html)
 *  16.  Testimonials  (index.html)
 *  17.  CTA Banner  (index.html)
 *  18.  About Page
 *  19.  Services Page
 *  20.  Work Page
 *  21.  Contact Page
 *  22.  Footer
 *  23.  AOS Animations
 *  24.  Responsive  (≤56.25rem, ≤37.5rem)
 * ================================================================
 */
/* @import url('./root.css'); */

/* ================================================================
   1. GOOGLE FONTS IMPORT
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300;1,9..40,400&display=swap');


/* ================================================================
   2. DESIGN TOKENS
   ================================================================ */
:root {
  /* Backgrounds */
  /* --bg:           #FAFAF8;
  --bg-2:         #F1F0EC;
  --bg-card:      #FFFFFF;
  --bg-footer:    #F1F0EC; */

  /* Brand colours */
  /* --accent:       #F5C842;
  --accent-dim:   #c9a02e; */

  /* Text */
  /* --text:         #161616;
  --muted:        #6B6B6B; */

  /* UI */
  /* --border:       #E2E0DA; */
  /* --radius:       0.375rem; */

  /* Typography */
  --font-head: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;

  /* Typography - Font Sizes */
  --fs-xxs: 0.75rem;
  --fs-xs: 0.78rem;
  --fs-sm: 0.88rem;
  --fs-md: 0.9rem;
  --fs-base: 1rem;
  --fs-lg: 1.1rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 1.8rem;
  --fs-4xl: 2.2rem;
  --fs-5xl: 2.8rem;
  --fs-6xl: 4rem;
  --fs-7xl: 5rem;

  /* Fluid Heading Font Sizes */
  --fs-h1: clamp(3.2rem, 7vw, 4rem);
  --fs-h2: clamp(2.4rem, 4.5vw, 3rem);
  --fs-h3: clamp(1.8rem, 2.5vw, 2.2rem);
  --fs-h4: var(--fs-2xl);
  --fs-h5: var(--fs-xxs);
  --fs-h6: var(--fs-xxs);

  /* Responsive / Media Query Overrides */
  --fs-base-mobile: 0.9375rem;
  --fs-h1-tablet: clamp(2.8rem, 8vw, 4rem);
  --fs-h2-tablet: clamp(2rem, 5vw, 3rem);
  --fs-h3-tablet: var(--fs-3xl);
  --fs-h4-tablet: var(--fs-xl);
  --fs-h1-mobile: clamp(2.4rem, 9vw, 3.2rem);
  --fs-h2-mobile: clamp(1.8rem, 7vw, 2.4rem);
  --fs-h3-mobile: var(--fs-2xl);

  /* Layout */
  --max-w: 90rem;
}


/* ================================================================
   3. RESET & BASE
   ================================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

ul {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Scroll Animation Initial State */
[data-aos] {
  opacity: 0;
  will-change: transform, opacity;
}


/* ================================================================
   4. TYPOGRAPHY SYSTEM
   ================================================================ */

/* ── Headings ── */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-head);
}

h1 {
  font-weight: 800;
  font-size: var(--fs-h1);
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 1.75rem;
}

h2 {
  font-weight: 800;
  font-size: var(--fs-h2);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 3.5rem;
}

h3 {
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 0.875rem;
}

h4 {
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 0.625rem;
}

h5 {
  font-weight: 700;
  font-size: var(--fs-h5);
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.25rem;
}

h6 {
  font-weight: 600;
  font-size: var(--fs-h6);
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.125rem;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}

h6::before {
  content: '';
  display: block;
  width: 1.5rem;
  height: 0.09375rem;
  background: var(--accent);
  flex-shrink: 0;
}

/* em inside headings = accent colour */
h1 em,
h2 em,
h3 em {
  font-style: normal;
  color: var(--accent);
  display: block;
}

/* ── Body text ── */
p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--text);
  margin-bottom: 1.5em;
}

p:last-child {
  margin-bottom: 0;
}

/* Size utilities */
.text-lg {
  font-size: var(--fs-lg);
  line-height: 1.75;
}

.text-sm {
  font-size: var(--fs-md);
  line-height: 1.72;
  color: var(--muted);
}

.text-xs {
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--muted);
}

.text-muted {
  color: var(--muted);
}

.text-accent {
  color: var(--accent);
}

/* ── Links ── */

/* Default inline link */
a.link,
.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.25rem;
  text-decoration-thickness: 0.0625rem;
  text-decoration-color: rgba(245, 200, 66, .4);
  transition: color .25s, text-decoration-color .25s;
}

a.link:hover,
.prose a:hover {
  color: var(--accent-dim);
  text-decoration-color: var(--accent-dim);
}

/* Border-bottom link (used in About, case studies) */
.link-bordered {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 0.0625rem solid rgba(245, 200, 66, .35);
  padding-bottom: 0.125rem;
  transition: border-color .25s, color .25s;
}

.link-bordered:hover {
  color: var(--text);
  border-color: var(--text);
}

/* Arrow CTA link */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  transition: gap .25s, color .25s;
}

.link-arrow:hover {
  gap: 1rem;
  color: var(--text);
}

/* Muted link (footer, sub-nav) */
.link-muted {
  color: var(--muted);
  text-decoration: none;
  font-size: var(--fs-md);
  transition: color .2s;
}

.link-muted:hover {
  color: var(--text);
}


/* ================================================================
   5. LAYOUT UTILITIES
   ================================================================ */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.accent {
  color: var(--accent);
}


/* ================================================================
   6. BUTTONS
   ================================================================ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  background: var(--accent);
  color: #000;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .04em;
  padding: 0.875rem 1.875rem;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: background .25s, transform .2s;
  white-space: nowrap;
}

.btn-primary:hover {
  background: var(--accent-dim);
  transform: translateY(-0.125rem);
}

.btn-primary svg {
  transition: transform .25s;
}

.btn-primary:hover svg {
  transform: translateX(0.25rem);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  border: 0.09375rem solid rgba(0, 0, 0, .15);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .04em;
  padding: 0.875rem 1.875rem;
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  transition: border-color .25s, color .25s;
}

.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  background: #000;
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 1rem 2.125rem;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: background .25s;
  white-space: nowrap;
}

.btn-dark:hover {
  background: #1a1a1a;
}


/* ================================================================
   7. NAVIGATION
   ================================================================ */
#navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 1.375rem 0;
  transition: background .4s ease, padding .3s ease, backdrop-filter .4s ease;
}

/* Solid on scroll — JS adds .scrolled */
#navbar.scrolled,
#navbar.solid {
  background: rgba(250, 250, 248, .92);
  backdrop-filter: blur(0.875rem);
  -webkit-backdrop-filter: blur(0.875rem);
  padding: 0.875rem 0;
  border-bottom: 0.0625rem solid var(--border);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.nav-logo {
  font-family: var(--font-head);
  font-size: var(--fs-2xl);
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--text);
}

.nav-logo span {
  color: var(--accent);
}

.nav-links {
  display: flex;
  gap: 2.25rem;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}

.nav-links>li {
  position: relative;
  display: flex;
  align-items: center;
  padding: 1.25rem 0;
  margin: 0;
}

.nav-links>li>a {
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .25s;
  text-decoration: none;
}

.nav-links>li>a:hover,
.nav-links>li.active>a {
  color: var(--text);
}

/* ====================
   MEGAMENU / DROPDOWN
   ==================== */

/* Submenu container (normal vertical dropdown panel) */
.nav-links .sub-menu,
.nav-links .children {
  position: absolute;
  top: 100%;
  left: 0;
  transform: translateY(0.75rem);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.98);
  border: 0.0625rem solid var(--border);
  border-radius: calc(var(--radius) + 0.25rem);
  box-shadow: 0 1rem 3rem rgba(22, 22, 22, 0.08);
  -webkit-backdrop-filter: blur(0.625rem);
  backdrop-filter: blur(0.625rem);
  padding: 0.2rem;
  z-index: 1000;
  list-style: none;
  margin: 0;
  min-width: 260px;
  display: block;

  transition: opacity 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.28s;
}

/* Hover reveal */
.nav-links li:hover .sub-menu,
.nav-links li:hover .children {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.nav-links .sub-menu li,
.nav-links .children li {
  padding: 0;
  display: block;
  margin-bottom: 0.25rem;
}

.nav-links .sub-menu li:last-child,
.nav-links .children li:last-child {
  margin-bottom: 0;
}

.nav-links .sub-menu a,
.nav-links .children a {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  color: var(--text) !important;
  font-size: 0.88rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  text-decoration: none;
  transition: background 0.25s, color 0.25s;
}

.nav-links .sub-menu a:hover,
.nav-links .children a:hover {
  background: rgba(255, 86, 48, 0.06);
  color: var(--accent) !important;
}

/* Caret indicator for dropdown menu items */
.nav-links .menu-item-has-children>a::after,
.nav-links .page_item_has_children>a::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 0;
  margin-left: 0.375rem;
  border-left: 0.25rem solid transparent;
  border-right: 0.25rem solid transparent;
  border-top: 0.25rem solid var(--muted);
  transition: transform 0.25s, border-top-color 0.25s;
}

.nav-links .menu-item-has-children:hover>a::after,
.nav-links .page_item_has_children:hover>a::after {
  transform: rotate(180deg);
  border-top-color: var(--text);
}

/* Navigation Icons */
.nav-links a i,
.mobile-menu a i {
  color: var(--accent);
  transition: color 0.25s, transform 0.25s;
  display: inline-block;
}

.nav-links a:hover i {
  color: var(--text);
}

.nav-links .sub-menu a:hover i,
.nav-links .children a:hover i {
  color: var(--accent) !important;
}

.mobile-menu a:hover i {
  color: var(--text);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--accent);
  color: #000;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 0.625rem 1.375rem;
  border-radius: var(--radius);
  transition: background .25s, transform .2s;
  white-space: nowrap;
}

.nav-cta:hover {
  background: var(--accent-dim);
  transform: translateY(-0.0625rem);
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 0.3125rem;
  cursor: pointer;
  padding: 0.25rem;
}

.hamburger span {
  display: block;
  width: 1.625rem;
  height: 0.125rem;
  background: var(--text);
  transition: transform .3s, opacity .3s;
}

.hamburger.open span:nth-child(1) {
  transform: translateY(0.4375rem) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
  opacity: 0;
}

.hamburger.open span:nth-child(3) {
  transform: translateY(-0.4375rem) rotate(-45deg);
}

/* Mobile fullscreen menu */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(250, 250, 248, .98);
  z-index: 999;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 7.5rem 1.5rem 3rem;
  gap: 1.75rem;
  overflow-y: auto;
}

.mobile-menu.open {
  display: flex;
}

.mobile-menu li {
  list-style: none;
  text-align: center;
  width: 100%;
}

.mobile-menu li.menu-item-has-children,
.mobile-menu li.page_item_has_children {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mobile-menu a {
  font-family: var(--font-head);
  font-size: var(--fs-4xl);
  font-weight: 700;
  color: var(--text);
  transition: color .2s;
  text-decoration: none;
  display: inline-block;
}

.mobile-menu a:hover {
  color: var(--accent);
}

/* Mobile sub-menu list styling */
.mobile-menu .sub-menu,
.mobile-menu .children {
  list-style: none;
  padding-left: 0;
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
}

.mobile-menu .sub-menu a,
.mobile-menu .children a {
  font-family: var(--font-body);
  font-size: var(--fs-lg) !important;
  font-weight: 500;
  color: var(--muted);
  text-transform: none;
  letter-spacing: normal;
}


/* ================================================================
   8. PAGE HERO  (index.html — home)
   ================================================================ */
#hero {
  position: relative;
  min-height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 8rem 0 6rem 0;
  /* background: url('https://arc44.com/wp-content/uploads/2026/06/arc-hero-bg.webp') no-repeat;
  background-size: cover;
  background-position: center right; */
}

/* Animated gradient mesh */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg::before {
  /* content:  '';
  position: absolute;
  inset:    0;
  background:
    radial-gradient(ellipse 60% 50% at 70% 40%, rgba(245,200,66,.12) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 20% 70%, rgba(245,200,66,.06) 0%, transparent 60%),
    var(--bg); */
  /* animation: meshShift 10s ease-in-out infinite alternate; */
}

/* Grain texture */
.hero-bg::after {
  /* content:          '';
  position:         absolute;
  inset:            0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  opacity:          .35;
  pointer-events:   none; */
}

@keyframes meshShift {
  0% {
    opacity: .8;
  }

  100% {
    opacity: 1;
  }
}

/* Decorative geometric circle */
.hero-geo {
  position: absolute;
  right: -5rem;
  top: 50%;
  transform: translateY(-55%);
  width: 32.5rem;
  height: 32.5rem;
  border: 0.09375rem solid rgba(245, 200, 66, .15);
  border-radius: 50%;
  z-index: 0;
  animation: geoPulse 8s ease-in-out infinite;
  pointer-events: none;
}

.hero-geo::after {
  content: '';
  position: absolute;
  inset: 2.5rem;
  border: 0.09375rem solid rgba(245, 200, 66, .08);
  border-radius: 50%;
}

@keyframes geoPulse {

  0%,
  100% {
    transform: translateY(-55%) scale(1);
    opacity: .6;
  }

  50% {
    transform: translateY(-55%) scale(1.04);
    opacity: 1;
  }
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 48.75rem;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.75rem;
}

.hero-eyebrow::before {
  content: '';
  display: block;
  width: 2rem;
  height: 0.09375rem;
  background: var(--accent);
}

.hero-headline {
  font-family: var(--font-head);
  /* font-size:      clamp(3.2rem, 7vw, 5rem); */
  font-size: clamp(3.2rem, 7vw, 4rem);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -.02em;
  margin-bottom: 1.75rem;
}

.hero-sub {
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 30rem;
  line-height: 1.7;
  margin-bottom: 2.75rem;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Scroll indicator */
.scroll-hint {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--muted);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.scroll-hint .line {
  width: 0.09375rem;
  height: 2.5rem;
  background: linear-gradient(to bottom, var(--accent), transparent);
  animation: scrollLine 2s ease-in-out infinite;
}

@keyframes scrollLine {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }

  50% {
    transform: scaleY(1);
    transform-origin: top;
  }

  51% {
    transform: scaleY(1);
    transform-origin: bottom;
  }

  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}

/* Hero slider */
.hero-slider-wrap {
  width: 100%;
  max-width: 31.25rem;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.hero-slider .slick-list {
  padding: 1.5rem 0 !important;
}

.hero-slider .slick-slide {
  transform: scale(0.82);
  opacity: 0.45;
  transition: transform 0.4s ease, opacity 0.4s ease;
  z-index: 1;
}

.hero-slider .slick-slide img {
  border-radius: 1.25rem;
}

.hero-slider .slick-slide>div {
  padding: 0 0.625rem;
}

.hero-slider .slick-center {
  transform: scale(1.06);
  opacity: 1;
  z-index: 2;
}

.hero-slider img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 1.25rem;
  object-fit: cover;
  display: block;
}

.hero-slider .slick-dots {
  bottom: -1.875rem;
  display: flex !important;
  justify-content: center;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.hero-slider .slick-dots li {
  width: auto;
  height: auto;
  margin: 0;
}

.hero-slider .slick-dots li button {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border-radius: 50%;
  background: var(--muted);
  border: none;
  opacity: 0.4;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  transition: opacity .3s, background .3s, width .3s, border-radius .3s;
}

.hero-slider .slick-dots li button:before {
  display: none;
}

.hero-slider .slick-dots li.slick-active button {
  background: var(--accent);
  opacity: 1;
  width: 1.25rem;
  border-radius: 0.25rem;
}


/* ================================================================
   9. PAGE HERO  (inner pages — about / services / work)
   ================================================================ */
.page-hero {
  padding: 11.25rem 0 6.25rem;
  position: relative;
  overflow: hidden;
  border-bottom: 0.0625rem solid var(--border);
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 70% at 80% 50%, rgba(245, 200, 66, .08) 0%, transparent 65%);
  pointer-events: none;
}

/* Large decorative background letters */
.page-hero-deco {
  position: absolute;
  right: -1.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-head);
  font-size: clamp(14rem, 22vw, 22rem);
  font-weight: 800;
  color: rgba(0, 0, 0, .03);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.page-hero-label {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: var(--fs-xxs);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.5rem;
}

.page-hero-label::before {
  content: '';
  display: block;
  width: 1.5rem;
  height: 0.09375rem;
  background: var(--accent);
}

.page-hero h1 {
  font-family: var(--font-head);
  font-size: clamp(3.5rem, 7vw, 7rem);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.03em;
  max-width: 50rem;
  margin-bottom: 2rem;
}

.page-hero-sub {
  font-size: var(--fs-lg);
  color: var(--muted);
  max-width: 32.5rem;
  line-height: 1.75;
}

/* Work page hero is side-by-side */
.page-hero-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2.5rem;
  flex-wrap: wrap;
}


/* ================================================================
   10. MARQUEE / TICKER
   ================================================================ */
#marquee {
  border-top: 0.0625rem solid var(--border);
  border-bottom: 0.0625rem solid var(--border);
  padding: 0.875rem 0;
  overflow: hidden;
  background: var(--bg-2);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 28s linear infinite;
}

.marquee-track span {
  display: inline-flex;
  align-items: center;
  gap: 1.75rem;
  padding-right: 1.75rem;
  font-family: var(--font-head);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.marquee-track span .dot {
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
}

@keyframes marqueeScroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}


/* ================================================================
   11. SECTION SHARED STYLES
   ================================================================ */
section {
  padding: 7.5rem 0;
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: var(--fs-xxs);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.25rem;
}

.section-label::before {
  content: '';
  display: block;
  width: 1.5rem;
  height: 0.09375rem;
  background: var(--accent);
}

.section-heading {
  font-family: var(--font-head);
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  margin-bottom: 3.75rem;
}

/* Inner-page section headings are slightly smaller */
.section-heading-md {
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  /* margin-bottom: 3.5rem; */
  margin-bottom: 1rem;
}


/* ================================================================
   12. SERVICES SECTION  (index.html)
   ================================================================ */
#services {
  background: var(--bg);
}

.services-header,
.work-header,
.process-header,
.testimonials-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2.5rem;
  margin-bottom: 3.75rem;
  flex-wrap: wrap;
}

.services-header .section-heading,
.work-header .section-heading,
.process-header .section-heading,
.testimonials-header .section-heading {
  margin-bottom: 0;
}

.services-subtitle,
.section-subtitle {
  font-size: .95rem;
  color: var(--muted);
  line-height: 1.7;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  gap: 0.125rem;
}

.service-card {
  background: var(--bg-card);
  padding: 2.75rem 2.25rem;
  border: 0.0625rem solid var(--border);
  position: relative;
  overflow: hidden;
  cursor: default;
  transition: border-color .3s, transform .3s;
  width: 100%;
}

.service-card::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0.1875rem;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}

.service-card:hover {
  border-color: rgba(245, 200, 66, .3);
  transform: translateY(-0.25rem);
}

.service-card:hover::before {
  transform: scaleX(1);
}

.service-icon {
  width: 3.25rem;
  height: 3.25rem;
  border: 0.09375rem solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.75rem;
  color: var(--accent);
  transition: border-color .3s;
}

.service-card:hover .service-icon {
  border-color: var(--accent);
}

.service-num {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  font-family: var(--font-head);
  font-size: var(--fs-7xl);
  font-weight: 800;
  color: rgba(0, 0, 0, .035);
  line-height: 1;
  user-select: none;
}

.service-title {
  font-family: var(--font-head);
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 0.875rem;
  letter-spacing: .01em;
}

.service-desc {
  font-size: var(--fs-md);
  color: var(--muted);
  line-height: 1.7;
}


/* ================================================================
   13. PORTFOLIO GRID  (index.html)
   ================================================================ */
#work {
  background: var(--bg-2);
}

.work-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.work-header .section-heading {
  margin-bottom: 0;
}

.filter-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.filter-tab {
  padding: 0.5rem 1.25rem;
  border: 0.09375rem solid var(--border);
  border-radius: 6.25rem;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .04em;
  cursor: pointer;
  transition: all .25s;
  background: transparent;
  color: var(--muted);
}

.filter-tab.active,
.filter-tab:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* .portfolio-grid {
  display:               grid;
  grid-template-columns: repeat(12, 1fr);
  gap:                   1rem;
} */

.portfolio-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  cursor: pointer;
}

.portfolio-thumb {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform .55s cubic-bezier(.16, 1, .3, 1);
  overflow: hidden;
}

.portfolio-thumb img {
  width: 100%;
  height: auto;
  display: block;
}

.portfolio-item:hover .portfolio-thumb {
  transform: scale(1.06);
}

/* .portfolio-overlay {
  position:       absolute;
  inset:          0;
  background:     rgba(13,13,13,.82);
  display:        flex;
  flex-direction: column;
  justify-content: flex-end;
  padding:        1.75rem;
  opacity:        0;
  transform:      translateY(0.5rem);
  transition:     opacity .35s, transform .35s;
}
.portfolio-item:hover .portfolio-overlay { opacity: 1; transform: translateY(0); } */

.portfolio-tag {
  display: inline-block;
  background: var(--accent);
  color: #000;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  border-radius: 6.25rem;
  margin-bottom: 0.625rem;
  width: fit-content;
}

.portfolio-name {
  font-family: var(--font-head);
  font-size: 1.3rem;
  font-weight: 700;
}

/* Gradient placeholder thumbnails */
/* .thumb-1 { background: linear-gradient(135deg,#1a1a2e,#16213e,#0f3460); }
.thumb-2 { background: linear-gradient(135deg,#2d1b69,#11998e); }
.thumb-3 { background: linear-gradient(135deg,#642b73,#c6426e); }
.thumb-4 { background: linear-gradient(135deg,#134e5e,#71b280); }
.thumb-5 { background: linear-gradient(135deg,#1a1a1a,#3d3d3d); }
.thumb-6 { background: linear-gradient(135deg,#0d0d0d,#1a1a1a,#2a1f0d,#3d2e08); } */


/* ================================================================
   14. PROCESS SECTION  (index.html)
   ================================================================ */
#process {
  background: var(--bg);
}

/* .process-steps {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr));
  gap:                   0;
  position:              relative;
} */

/* .process-steps::before {
  content:    '';
  position:   absolute;
  top:        2.25rem;
  left:       calc(12.5% + 1.25rem);
  right:      calc(12.5% + 1.25rem);
  height:     0.0625rem;
  background: linear-gradient(to right, var(--accent), transparent);
  z-index:    0;
} */

.process-step-inner {
  padding: 0 2rem 0 0;
  position: relative;
  z-index: 1;
  width: 100%;
}

.process-step:last-child {
  padding-right: 0;
}

.step-num {
  font-family: var(--font-head);
  font-size: var(--fs-xxs);
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--accent);
  margin-bottom: 1.125rem;
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

/* .step-num::after {
  content:       '';
  display:       block;
  width:         0.625rem;
  height:        0.625rem;
  border:        0.125rem solid var(--accent);
  border-radius: 50%;
  background:    var(--bg);
  flex-shrink:   0;
} */

.step-title {
  font-family: var(--font-head);
  font-size: var(--fs-2xl);
  font-weight: 700;
  margin-bottom: 0.75rem;
  letter-spacing: -.01em;
}

.step-desc {
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.7;
}


/* ================================================================
   15. ABOUT / STUDIO SECTION  (index.html)
   ================================================================ */
#about {
  background: var(--bg-2);
}

/* .about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
} */

.stats-col {
  display: flex;
  flex-direction: column;
}

.stat-item {
  padding: 2.25rem 0;
  border-bottom: 0.0625rem solid var(--border);
}

.stat-item:first-child {
  padding-top: 0;
}

.stat-value {
  font-family: var(--font-head);
  font-size: clamp(3rem, 5vw, 5rem);
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -.03em;
}

.stat-label {
  font-size: .85rem;
  color: var(--muted);
  margin-top: 0.375rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.about-pull {
  font-family: var(--font-head);
  font-size: clamp(1.8rem, 2.5vw, 2.4rem);
  font-weight: 700;
  line-height: 1.2;
  border-left: 0.1875rem solid var(--accent);
  padding-left: 1.5rem;
  margin-bottom: 2.25rem;
}

.text-col p {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}

.text-col p:last-of-type {
  margin-bottom: 2.5rem;
}

.about-link {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 0.0625rem solid var(--accent);
  padding-bottom: 0.25rem;
  transition: gap .25s;
}

.about-link:hover {
  gap: 1rem;
}


/* ================================================================
   16. TESTIMONIALS  (index.html)
   ================================================================ */
#testimonials {
  background: var(--bg);
}

/* .testimonials-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));
  gap:                   1.5rem;
} */

.testimonial-card {
  background: var(--bg-card);
  border: 0.0625rem solid var(--border);
  padding: 2.5rem;
  border-radius: var(--radius);
  position: relative;
  transition: border-color .3s;
}

.testimonial-card:hover {
  border-color: rgba(245, 200, 66, .25);
}

.testimonial-quote {
  font-size: var(--fs-6xl);
  line-height: .6;
  font-family: var(--font-head);
  color: var(--accent);
  margin-bottom: 1.25rem;
  display: block;
}

.testimonial-text {
  font-size: 1rem;
  color: var(--text);
  line-height: 1.75;
  margin-bottom: 2rem;
  font-style: italic;
  font-weight: 300;
}

.testimonial-meta {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.testimonial-avatar {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-dim));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-md);
  color: #000;
  flex-shrink: 0;
}

.testimonial-name {
  font-weight: 600;
  font-size: var(--fs-md);
}

.testimonial-company {
  font-size: .8rem;
  color: var(--muted);
}


/* ================================================================
   17. CTA BANNER  (index.html)
   ================================================================ */
#cta-banner {
  padding: 7.5rem 0;
  background: var(--accent);
  position: relative;
  overflow: hidden;
}

#cta-banner::before {
  content: 'ARC44';
  position: absolute;
  right: -3.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-head);
  font-size: 22vw;
  font-weight: 800;
  color: rgba(0, 0, 0, .07);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.cta-inner {
  position: relative;
  z-index: 1;
  text-align: center;
}

.cta-heading {
  font-family: var(--font-head);
  font-size: clamp(2.5rem, 5vw, 5rem);
  font-weight: 800;
  color: #fff;
  line-height: .95;
  letter-spacing: -.03em;
  margin-bottom: 1.25rem;
}

.cta-sub {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, .85);
  margin-bottom: 3rem;
}

.cta-form {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-form input {
  flex: 1 1 17.5rem;
  max-width: 22.5rem;
  padding: 0.875rem 1.25rem;
  background: rgba(0, 0, 0, .12);
  border: 0.09375rem solid rgba(0, 0, 0, .2);
  border-radius: var(--radius);
  font-size: var(--fs-md);
  color: #000;
  outline: none;
  transition: border-color .25s;
}

.cta-form input::placeholder {
  color: rgba(0, 0, 0, .45);
}

.cta-form input:focus {
  border-color: rgba(0, 0, 0, .5);
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.875rem;
  background: #fff;
  color: #000;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: background .25s, color .25s;
}

.cta-btn:hover {
  background: #000;
  color: #fff;
}

.cta-or {
  color: rgba(0, 0, 0, .5);
  font-size: .85rem;
  align-self: center;
}

.cta-book {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.875rem;
  border: 0.125rem solid rgba(0, 0, 0, .25);
  color: #000;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .04em;
  transition: border-color .25s, background .25s;
}

.cta-book:hover {
  border-color: rgba(0, 0, 0, .5);
  background: rgba(0, 0, 0, .08);
}



/* ================================================================
   17.1 CTA BANNER - VARIATION 2 (Dark Glassmorphic Split)
   ================================================================ */
#cta-banner-v2,
.cta-banner-v2 {
  padding: 6.5rem 0;
  background-color: #0c0d11 !important;
  background-image: 
    radial-gradient(circle at 85% 20%, rgba(255, 86, 48, 0.18), transparent 45%),
    radial-gradient(circle at 10% 80%, rgba(255, 86, 48, 0.1), transparent 40%) !important;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cta-banner-v2 .cta-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  background: rgba(255, 86, 48, 0.12);
  border: 1px solid rgba(255, 86, 48, 0.3);
  border-radius: 6.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.25rem;
}

.cta-banner-v2 .cta-live-dot {
  width: 0.45rem;
  height: 0.45rem;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  animation: livePulse 2s infinite;
}

@keyframes livePulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.cta-banner-v2 .cta-heading-v2 {
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: 1.25rem;
}

.cta-banner-v2 .cta-heading-v2 em {
  font-style: italic;
  color: var(--accent);
}

.cta-banner-v2 .cta-desc-v2 {
  font-size: 1.05rem;
  color: #E2E0DA;
  line-height: 1.65;
  max-width: 32rem;
  margin-bottom: 2rem;
}

.cta-banner-v2 .cta-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.cta-banner-v2 .cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius);
  font-size: 0.8125rem;
  font-weight: 500;
  color: #ffffff;
}

.cta-banner-v2 .cta-glass-card {
  background: rgba(20, 22, 28, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(1.25rem);
  backdrop-filter: blur(1.25rem);
  border-radius: 1.25rem;
  padding: 2.5rem;
  box-shadow: 0 1.25rem 3.125rem rgba(0, 0, 0, 0.5);
  position: relative;
}

.cta-banner-v2 .glass-card-title {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.5rem;
}

.cta-banner-v2 .glass-card-sub {
  font-size: 0.9375rem;
  color: #c5c4bf;
  margin-bottom: 1.75rem;
  line-height: 1.5;
}

.cta-banner-v2 .cta-btn-v2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  padding: 1rem 1.75rem;
  background: var(--accent);
  color: #ffffff;
  border-radius: var(--radius);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 0.5rem 1.25rem rgba(255, 86, 48, 0.35);
}

.cta-banner-v2 .cta-btn-v2:hover {
  background: #ff6f4d;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 0.75rem 1.75rem rgba(255, 86, 48, 0.5);
}

.cta-banner-v2 .glass-card-footer {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.75);
}

.cta-banner-v2 .glass-card-footer a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ================================================================
   17.2 CTA BANNER - VARIATION 3 (Kinetic Marquee & Inset Island)
   ================================================================ */
.cta-banner-v3 {
  padding: 5rem 0;
  background: var(--bg);
}

.cta-banner-v3 .cta-island {
  background: #111216;
  border-radius: 1.75rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 1.5rem 4rem -0.9375rem rgba(0, 0, 0, 0.35);
  position: relative;
}

.cta-banner-v3 .cta-marquee-wrap {
  background: rgba(255, 86, 48, 0.1);
  border-bottom: 1px solid rgba(255, 86, 48, 0.2);
  padding: 0.75rem 0;
  overflow: hidden;
  white-space: nowrap;
}

.cta-banner-v3 .cta-marquee-track {
  display: inline-flex;
  align-items: center;
  animation: marqueeScroll 25s linear infinite;
}

.cta-banner-v3 .cta-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.5rem;
  font-family: var(--font-head);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.cta-banner-v3 .cta-marquee-item .sparkle {
  color: #fff;
}

.cta-banner-v3 .cta-island-body {
  padding: 4.5rem 2rem;
  text-align: center;
  position: relative;
}

.cta-banner-v3 .cta-island-label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.cta-banner-v3 .cta-island-title {
  font-family: var(--font-head);
  font-size: clamp(2.4rem, 5.5vw, 4.6rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.05;
  letter-spacing: -0.025em;
  max-width: 66rem;
  margin: 0 auto 1.25rem auto;
}

.cta-banner-v3 .cta-island-sub {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.75);
  max-width: 46rem;
  margin: 0 auto 2.75rem auto;
  line-height: 1.6;
}

.cta-banner-v3 .cta-action-group {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.cta-banner-v3 .btn-primary-v3 {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9375rem 2rem;
  background: var(--accent);
  color: #fff;
  border-radius: 6.25rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 0.5rem 1.25rem rgba(255, 86, 48, 0.35);
}

.cta-banner-v3 .btn-primary-v3:hover {
  background: #ff6f4d;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 0.75rem 1.75rem rgba(255, 86, 48, 0.5);
}

.cta-banner-v3 .btn-ghost-v3 {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9375rem 2rem;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6.25rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.cta-banner-v3 .btn-ghost-v3:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}


/* ================================================================
   17.3 CTA BANNER - VARIATION 4 (Architectural Minimalist Swiss)
   ================================================================ */
.cta-banner-v4 {
  padding: 6.5rem 0;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
}

.cta-banner-v4 .cta-meta-tag {
  font-family: var(--font-head);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.5rem;
}

.cta-banner-v4 .cta-arch-title {
  font-family: var(--font-head);
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 0;
}

.cta-banner-v4 .cta-arch-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.cta-banner-v4 .cta-arch-desc {
  font-size: 1.125rem;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 2rem;
}

.cta-banner-v4 .cta-check-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2.25rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.cta-banner-v4 .cta-check-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text);
}

.cta-banner-v4 .cta-check-list li svg {
  color: var(--accent);
  flex-shrink: 0;
}

.cta-banner-v4 .cta-arch-action {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 2rem;
  background: var(--text);
  color: #fff;
  border-radius: var(--radius);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background 0.25s ease, transform 0.25s ease;
}

.cta-banner-v4 .cta-arch-action:hover {
  background: var(--accent);
  color: #fff;
  transform: translateX(4px);
}

.cta-banner-v4 .cta-arch-action svg {
  transition: transform 0.25s ease;
}

.cta-banner-v4 .cta-arch-action:hover svg {
  transform: translateX(6px);
}

/* Variant Preview Label Badge */
.cta-variant-label {
  display: inline-block;
  background: #111;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  border-radius: 0.25rem;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(255,255,255,0.2);
}

/* ================================================================
   18. ABOUT PAGE
   ================================================================ */

/* Manifesto */
#manifesto {
  background: var(--bg);
  padding: 6.25rem 0;
}

.manifesto-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.manifesto-left .big-quote {
  font-family: var(--font-head);
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  border-left: 0.1875rem solid var(--accent);
  padding-left: 1.75rem;
  margin-bottom: 2.5rem;
}

.manifesto-right p {
  font-size: 1.02rem;
  color: var(--muted);
  line-height: 1.85;
  margin-bottom: 1.375rem;
}

.manifesto-right p:last-child {
  margin-bottom: 0;
}

/* Philosophy pillars */
#philosophy {
  background: var(--bg-2);
}

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.125rem;
}

.pillar {
  background: var(--bg-card);
  padding: 3.25rem 2.5rem;
  border: 0.0625rem solid var(--border);
  position: relative;
  overflow: hidden;
  transition: border-color .3s;
}

.pillar:hover {
  border-color: rgba(245, 200, 66, .3);
}

.pillar-num {
  font-family: var(--font-head);
  font-size: 5.5rem;
  font-weight: 800;
  color: rgba(0, 0, 0, .045);
  line-height: 1;
  position: absolute;
  top: 1rem;
  right: 1.25rem;
}

.pillar-icon {
  width: 3rem;
  height: 3rem;
  border: 0.09375rem solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin-bottom: 1.75rem;
  transition: border-color .3s;
}

.pillar:hover .pillar-icon {
  border-color: var(--accent);
}

.pillar h3 {
  font-family: var(--font-head);
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0.875rem;
  letter-spacing: .01em;
}

.pillar p {
  font-size: var(--fs-md);
  color: var(--muted);
  line-height: 1.72;
}

/* Team */
#team {
  background: var(--bg);
}

.team-intro {
  max-width: 37.5rem;
  margin-bottom: 4rem;
}

.team-intro p {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.8;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16.25rem, 1fr));
  gap: 1.75rem;
}

.team-card {
  background: var(--bg-card);
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .3s, transform .3s;
}

.team-card:hover {
  border-color: rgba(245, 200, 66, .25);
  transform: translateY(-0.25rem);
}

.team-photo {
  width: 100%;
  aspect-ratio: 3/3.5;
  display: flex;
  align-items: flex-end;
  padding: 1.25rem;
  position: relative;
  overflow: hidden;
}

.team-photo-bg {
  position: absolute;
  inset: 0;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}

.team-card:hover .team-photo-bg {
  transform: scale(1.05);
}

.team-photo-bg.p1 {
  background: linear-gradient(160deg, #1a1a2e, #0f3460, #16213e);
}

.team-photo-bg.p2 {
  background: linear-gradient(160deg, #2d1b69, #11998e);
}

.team-photo-bg.p3 {
  background: linear-gradient(160deg, #3a1a1a, #642b35);
}

.team-photo-bg.p4 {
  background: linear-gradient(160deg, #1a2d1a, #2e6b2e);
}

.team-initials {
  position: relative;
  z-index: 1;
  font-family: var(--font-head);
  font-size: 3rem;
  font-weight: 800;
  color: rgba(255, 255, 255, .15);
  line-height: 1;
}

.team-info {
  padding: 1.5rem;
}

.team-name {
  font-family: var(--font-head);
  font-size: var(--fs-lg);
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.team-role {
  font-size: .82rem;
  color: var(--accent);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 0.75rem;
}

.team-bio {
  font-size: .86rem;
  color: var(--muted);
  line-height: 1.65;
}

/* Stats band */
#stats-band {
  padding: 5rem 0;
  background: var(--accent);
  position: relative;
  overflow: hidden;
}

#stats-band::before {
  content: 'ARC44';
  position: absolute;
  left: -2.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-head);
  font-size: 18vw;
  font-weight: 800;
  color: rgba(0, 0, 0, .07);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
  z-index: 1;
}

.stat-block {
  padding: 1.5rem 2.5rem;
  border-right: 0.0625rem solid rgba(0, 0, 0, .12);
  text-align: center;
}

.stat-block:last-child {
  border-right: none;
}

.stat-block .val {
  font-family: var(--font-head);
  font-size: clamp(3rem, 4.5vw, 4.5rem);
  font-weight: 800;
  color: #000;
  line-height: 1;
  letter-spacing: -.03em;
  margin-bottom: 0.375rem;
}

.stat-block .lbl {
  font-size: .82rem;
  color: rgba(0, 0, 0, .6);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* Recognition */
#recognition {
  background: var(--bg-2);
}

.recognition-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.125rem;
}

.rec-item {
  background: var(--bg-card);
  padding: 2.5rem 2.75rem;
  border: 0.0625rem solid var(--border);
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  transition: border-color .3s;
}

.rec-item:hover {
  border-color: rgba(245, 200, 66, .2);
}

.rec-year {
  font-family: var(--font-head);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--accent);
  padding-top: 0.25rem;
  min-width: 3rem;
}

.rec-content h4 {
  font-family: var(--font-head);
  font-size: var(--fs-lg);
  font-weight: 700;
  margin-bottom: 0.375rem;
}

.rec-content p {
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.6;
}


/* ================================================================
   19. SERVICES PAGE
   ================================================================ */

/* Accordion list */
#service-list {
  background: var(--bg);
  padding: 6.25rem 0;
}

.service-list-header {
  display: grid;
  grid-template-columns: 1fr 21.25rem;
  gap: 5rem;
  align-items: start;
  margin-bottom: 4rem;
}

.service-list-header .section-heading-md {
  margin-bottom: 0;
}

.service-list-intro {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.8;
  padding-top: 0.75rem;
}

.service-item {
  border-top: 0.0625rem solid var(--border);
  padding: 2.5rem 0;
  display: grid;
  grid-template-columns: 5rem 1fr auto;
  gap: 2rem;
  align-items: start;
  cursor: pointer;
}

.service-item:last-child {
  border-bottom: 0.0625rem solid var(--border);
}

.service-item:hover .service-item-title {
  color: var(--accent);
}

.si-num {
  font-family: var(--font-head);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--accent);
  padding-top: 0.375rem;
}

.service-item-title {
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.1;
  transition: color .3s;
}

.service-item-desc {
  font-size: .92rem;
  color: var(--muted);
  line-height: 1.75;
  max-width: 36.25rem;
  margin-top: 1rem;
  display: none;
}

.service-item.open .service-item-desc {
  display: block;
}

.service-item-deliverables {
  margin-top: 1.25rem;
  display: none;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.service-item.open .service-item-deliverables {
  display: flex;
}

.deliverable-tag {
  display: inline-block;
  padding: 0.3125rem 0.875rem;
  border: 0.09375rem solid var(--border);
  border-radius: 6.25rem;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--muted);
  transition: border-color .25s, color .25s;
}

.service-item.open .deliverable-tag {
  border-color: rgba(245, 200, 66, .3);
  color: var(--text);
}

.si-toggle {
  width: 2.5rem;
  height: 2.5rem;
  border: 0.09375rem solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  flex-shrink: 0;
  margin-top: 0.25rem;
  transition: border-color .25s, color .25s, transform .3s;
}

.service-item:hover .si-toggle {
  border-color: var(--accent);
  color: var(--accent);
}

.service-item.open .si-toggle {
  border-color: var(--accent);
  color: var(--accent);
  transform: rotate(45deg);
}

/* Process deep dive */
#process-detail {
  background: var(--bg-2);
}

.process-deep-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}

.process-sticky-col {
  position: sticky;
  top: 7.5rem;
}

.process-sticky-col h2 {
  font-family: var(--font-head);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  margin-bottom: 1.5rem;
}

.process-sticky-col p {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 2rem;
}

.process-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  background: var(--accent);
  color: #000;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .04em;
  padding: 0.875rem 1.875rem;
  border-radius: var(--radius);
  transition: background .25s, transform .2s;
}

.process-cta:hover {
  background: var(--accent-dim);
  transform: translateY(-0.125rem);
}

.process-steps-list {
  display: flex;
  flex-direction: column;
}

.process-step-item {
  padding: 2.25rem 0;
  border-bottom: 0.0625rem solid var(--border);
  display: grid;
  grid-template-columns: 3.75rem 1fr;
  gap: 1.5rem;
  align-items: start;
}

.process-step-item:first-child {
  padding-top: 0;
}

.psi-num {
  font-family: var(--font-head);
  font-size: var(--fs-xxs);
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--accent);
  padding-top: 0.25rem;
}

.psi-body h4 {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.625rem;
}

.psi-body p {
  font-size: var(--fs-md);
  color: var(--muted);
  line-height: 1.72;
}

.psi-duration {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: var(--fs-xxs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  border: 0.0625rem solid rgba(245, 200, 66, .25);
  padding: 0.25rem 0.75rem;
  border-radius: 6.25rem;
}

/* Pricing packages */
#packages {
  background: var(--bg);
}

.packages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.package-card {
  background: var(--bg-card);
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius);
  padding: 2.75rem 2.25rem;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: border-color .3s, transform .3s;
}

.package-card:hover {
  transform: translateY(-0.25rem);
}

.package-card.featured {
  border-color: var(--accent);
}

.package-card.featured::before {
  content: 'Most Popular';
  position: absolute;
  top: 1.25rem;
  right: -1.875rem;
  background: var(--accent);
  color: #000;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 0.3125rem 2.5rem;
  transform: rotate(45deg) translate(-0.625rem, -0.625rem);
}

.pkg-tier {
  font-size: var(--fs-xxs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.pkg-name {
  font-family: var(--font-head);
  font-size: 1.6rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.pkg-desc {
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 2rem;
}

.pkg-price {
  font-family: var(--font-head);
  font-size: var(--fs-5xl);
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: 0.25rem;
}

.pkg-price span {
  font-size: 1rem;
  color: var(--muted);
  font-weight: 400;
}

.pkg-timeline {
  font-size: .8rem;
  color: var(--muted);
  margin-bottom: 2rem;
}

.pkg-divider {
  height: 0.0625rem;
  background: var(--border);
  margin-bottom: 1.75rem;
}

.pkg-features {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 2.25rem;
  flex: 1;
}

.pkg-feature {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.pkg-feature .check {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: rgba(245, 200, 66, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.0625rem;
}

.pkg-feature .check svg {
  color: var(--accent);
}

.pkg-btn {
  display: block;
  text-align: center;
  padding: 0.8125rem;
  border: 0.09375rem solid var(--border);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .04em;
  transition: all .25s;
}

.package-card:hover .pkg-btn,
.package-card.featured .pkg-btn {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
}

/* Why Forma */
#why-forma {
  background: var(--bg-2);
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.125rem;
}

.why-item {
  background: var(--bg-card);
  padding: 3rem 2.75rem;
  border: 0.0625rem solid var(--border);
  transition: border-color .3s;
}

.why-item:hover {
  border-color: rgba(245, 200, 66, .2);
}

.why-icon {
  width: 2.75rem;
  height: 2.75rem;
  border: 0.09375rem solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin-bottom: 1.5rem;
  transition: border-color .3s;
}

.why-item:hover .why-icon {
  border-color: var(--accent);
}

.why-item h3 {
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.why-item p {
  font-size: var(--fs-md);
  color: var(--muted);
  line-height: 1.72;
}


/* ================================================================
   20. WORK PAGE
   ================================================================ */

/* Sticky filter bar */
.filter-bar {
  padding: 1.75rem 0;
  border-bottom: 0.0625rem solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 4.25rem;
  z-index: 100;
}

.filter-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.filter-count {
  font-size: .82rem;
  color: var(--muted);
}

.filter-count span {
  color: var(--accent);
  font-weight: 600;
}

/* Portfolio grid (work page — full layout) */
#portfolio-grid {
  padding: 3.75rem 0 7.5rem;
  background: var(--bg);
}

.grid-wrap {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.25rem;
}

.p-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  cursor: pointer;
  border: 0.0625rem solid transparent;
  transition: border-color .3s;
}

.p-item:hover {
  border-color: rgba(245, 200, 66, .2);
}

.p-item.large {
  grid-column: span 8;
}

.p-item.medium {
  grid-column: span 6;
}

.p-item.small {
  grid-column: span 4;
}

.p-item.full {
  grid-column: span 12;
}

.p-item.third {
  grid-column: span 4;
}

.p-thumb {
  width: 100%;
  display: block;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}

.p-item.large .p-thumb {
  aspect-ratio: 16/9;
}

.p-item.medium .p-thumb {
  aspect-ratio: 4/3;
}

.p-item.small .p-thumb {
  aspect-ratio: 4/3;
}

.p-item.full .p-thumb {
  aspect-ratio: 21/7;
}

.p-item.third .p-thumb {
  aspect-ratio: 4/3;
}

.p-item:hover .p-thumb {
  transform: scale(1.05);
}

/* Work page gradient thumbnails */
.g1 {
  background: linear-gradient(145deg, #0a0a1a, #1a1a3e, #0f3460);
}

.g2 {
  background: linear-gradient(145deg, #1a0a00, #3d1f00, #c9a02e);
}

.g3 {
  background: linear-gradient(145deg, #0a1a1a, #0d4d4d, #0e7676);
}

.g4 {
  background: linear-gradient(145deg, #1a001a, #4d004d, #7a007a);
}

.g5 {
  background: linear-gradient(145deg, #001a0a, #004d20, #007a32);
}

.g6 {
  background: linear-gradient(145deg, #1a0a0a, #4d1010, #8a1a1a);
}

.g7 {
  background: linear-gradient(145deg, #0a0a0a, #1a1a1a, #2e2e2e);
}

.g8 {
  background: linear-gradient(145deg, #0a0d1a, #1a2340, #2e3c6e);
}

.p-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13, 13, 13, .9) 0%, rgba(13, 13, 13, .2) 50%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.75rem;
  opacity: 0;
  transition: opacity .35s;
}

.p-item:hover .p-overlay {
  opacity: 1;
}

.p-tag {
  display: inline-block;
  background: var(--accent);
  color: #000;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  border-radius: 6.25rem;
  margin-bottom: 0.5rem;
  width: fit-content;
}

.p-name {
  font-family: var(--font-head);
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 0.375rem;
}

.p-year {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, .5);
}

.p-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem 1.25rem;
  background: linear-gradient(to top, rgba(13, 13, 13, .85), transparent);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.p-label-name {
  font-family: var(--font-head);
  font-size: .95rem;
  font-weight: 700;
}

.p-label-tag {
  font-size: .72rem;
  color: var(--accent);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Case study */
#case-study {
  background: var(--bg-2);
  padding: 6.875rem 0;
}

.case-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.case-visual {
  position: relative;
}

.case-main-thumb {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: var(--radius);
  background: linear-gradient(145deg, #1a1a2e, #16213e, #0f3460);
}

.case-sub-thumb {
  position: absolute;
  bottom: -1.75rem;
  right: -1.75rem;
  width: 52%;
  aspect-ratio: 1;
  border-radius: var(--radius);
  background: linear-gradient(145deg, #F5C842, #c9a02e);
  border: 0.25rem solid var(--bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.case-sub-thumb .mark {
  font-family: var(--font-head);
  font-size: var(--fs-6xl);
  font-weight: 800;
  color: rgba(0, 0, 0, .15);
}

.case-label {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: var(--fs-xxs);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.25rem;
}

.case-label::before {
  content: '';
  display: block;
  width: 1.5rem;
  height: 0.09375rem;
  background: var(--accent);
}

.case-content h2 {
  font-family: var(--font-head);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  margin-bottom: 1.25rem;
}

.case-content p {
  font-size: .96rem;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 2rem;
}

.case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2.25rem;
}

.case-tag {
  padding: 0.375rem 1rem;
  border: 0.09375rem solid var(--border);
  border-radius: 6.25rem;
  font-size: var(--fs-xs);
  color: var(--muted);
}

.case-link {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 0.0625rem solid var(--accent);
  padding-bottom: 0.25rem;
  transition: gap .25s;
}

.case-link:hover {
  gap: 1rem;
}

/* Work stats */
#work-stats {
  background: var(--bg);
  padding: 3.75rem 0;
  border-top: 0.0625rem solid var(--border);
  border-bottom: 0.0625rem solid var(--border);
}

.work-stats-row {
  display: flex;
  justify-content: space-between;
}

.ws-item {
  text-align: center;
  flex: 1;
  padding: 1.25rem;
  border-right: 0.0625rem solid var(--border);
}

.ws-item:last-child {
  border-right: none;
}

.ws-val {
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -.02em;
  margin-bottom: 0.375rem;
}

.ws-lbl {
  font-size: var(--fs-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* Work CTA strip */
#work-cta {
  background: var(--accent);
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}

#work-cta::before {
  content: 'READY?';
  position: absolute;
  right: -2.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-head);
  font-size: 18vw;
  font-weight: 800;
  color: rgba(0, 0, 0, .07);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.work-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.work-cta-inner h2 {
  font-family: var(--font-head);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 800;
  color: #000;
  line-height: 1;
  letter-spacing: -.02em;
}

.work-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  background: #000;
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 1rem 2.125rem;
  border-radius: var(--radius);
  white-space: nowrap;
  transition: background .25s;
}

.work-cta-btn:hover {
  background: #1a1a1a;
}


/* ================================================================
   21. CONTACT PAGE
   ================================================================ */
#contact-hero {
  min-height: 100vh;
  display: flex;
  position: relative;
  overflow: hidden;
}

#contact-hero .container {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

#contact-hero .row {
  flex: 1;
  display: flex;
  align-items: stretch;
}

/* Left info pane */
.ch-left {
  flex: 1;
  padding: 11.25rem 4rem 5rem;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* border-right: 0.0625rem solid var(--border); */
}

/* .ch-left::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 0% 50%, rgba(245, 200, 66, .07) 0%, transparent 65%);
  pointer-events: none;
} */

.ch-label {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: var(--fs-xxs);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.75rem;
}

.ch-label::before {
  content: '';
  display: block;
  width: 1.5rem;
  height: 0.09375rem;
  background: var(--accent);
}

/* .ch-left h1 {
  font-size: clamp(3rem, 5.5vw, 5.5rem);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.03em;
  margin-bottom: 2.25rem;
} */

.ch-body {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.8;
  max-width: 28.75rem;
  margin-bottom: 3rem;
}

.ch-contacts {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.ch-contact-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.125rem 1.25rem;
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius);
  transition: border-color .3s;
}

.ch-contact-item:hover {
  border-color: rgba(245, 200, 66, .25);
}

.ch-contact-icon {
  width: 2.5rem;
  height: 2.5rem;
  border: 0.09375rem solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}

.ch-contact-label {
  font-size: .72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 0.125rem;
}

.ch-contact-val {
  font-size: .96rem;
  font-weight: 500;
}

.ch-contact-val a:hover {
  color: var(--accent);
}

.ch-social {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ch-social-label {
  font-size: var(--fs-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-right: 0.25rem;
}

/* Right form pane */
.ch-right {
  flex: 1;
  padding: 11.25rem 4rem 5rem;
  /* background: var(--bg-card); */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-form-wrap h2 {
  font-family: var(--font-head);
  font-size: var(--fs-3xl);
  font-weight: 800;
  letter-spacing: -.01em;
  margin-bottom: 0.5rem;
}

.contact-form-wrap p {
  font-size: var(--fs-md);
  color: var(--muted);
  margin-bottom: 2.5rem;
  line-height: 1.7;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.form-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.8125rem 1rem;
  background: var(--bg);
  border: 0.09375rem solid var(--border);
  border-radius: var(--radius);
  font-size: .92rem;
  color: var(--text);
  outline: none;
  transition: border-color .25s;
  appearance: none;
  resize: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: rgba(0, 0, 0, .32);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--accent);
}

.form-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}

.form-select option {
  background: var(--bg-card);
}

.form-textarea {
  min-height: 8.125rem;
  line-height: 1.6;
}

.budget-group {
  margin-bottom: 1.5rem;
}

.budget-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.budget-option {
  padding: 0.5rem 1rem;
  border: 0.09375rem solid var(--border);
  border-radius: 6.25rem;
  font-size: .8rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: all .2s;
  user-select: none;
}

.budget-option:hover {
  border-color: rgba(245, 200, 66, .4);
  color: var(--text);
}

.budget-option.selected {
  border-color: var(--accent);
  color: var(--accent);
}

.form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
  margin-bottom: 1.75rem;
}

.form-check input {
  display: none;
}

.check-box {
  width: 1.125rem;
  height: 1.125rem;
  border: 0.09375rem solid var(--border);
  border-radius: 0.1875rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .2s, background .2s;
}

.form-check:hover .check-box {
  border-color: var(--accent);
}

.form-check input:checked~.check-box {
  background: var(--accent);
  border-color: var(--accent);
}

.form-check input:checked~.check-box::after {
  content: '';
  display: block;
  width: 0.3125rem;
  height: 0.5625rem;
  border: 0.125rem solid #000;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translateY(-0.0625rem);
}

.check-label {
  font-size: .86rem;
  color: var(--muted);
  line-height: 1.6;
}

.check-label a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.1875rem;
}

.form-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.9375rem;
  background: var(--accent);
  color: #000;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .25s, transform .2s;
}

.form-submit:hover {
  background: var(--accent-dim);
  transform: translateY(-0.125rem);
}

.form-submit svg {
  transition: transform .25s;
}

.form-submit:hover svg {
  transform: translateX(0.25rem);
}

.form-success {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1.5rem;
  gap: 1.25rem;
}

.form-success.show {
  display: flex;
}

.success-icon {
  width: 4rem;
  height: 4rem;
  background: rgba(245, 200, 66, .12);
  border: 0.09375rem solid var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.form-success h3 {
  font-family: var(--font-head);
  font-size: var(--fs-3xl);
  font-weight: 800;
}

.form-success p {
  font-size: .92rem;
  color: var(--muted);
  line-height: 1.7;
  max-width: 21.25rem;
}

/* FAQ */
#faq {
  background: var(--bg-2);
  padding: 6.875rem 0;
}

.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 5rem;
  align-items: start;
}

.faq-left h2 {
  font-family: var(--font-head);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  margin-bottom: 1.25rem;
}

.faq-left p {
  font-size: .96rem;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 2rem;
}

.faq-direct {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 0.0625rem solid var(--accent);
  padding-bottom: 0.25rem;
  transition: gap .25s;
}

.faq-direct:hover {
  gap: 1rem;
}

.faq-items {
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-bottom: 0.0625rem solid var(--border);
  padding: 1.5rem 0;
  cursor: pointer;
}

.faq-item:first-child {
  border-top: 0.0625rem solid var(--border);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.faq-question h4 {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.faq-toggle {
  width: 2rem;
  height: 2rem;
  border: 0.09375rem solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  flex-shrink: 0;
  transition: border-color .25s, color .25s, transform .3s;
}

.faq-item.open .faq-toggle {
  border-color: var(--accent);
  color: var(--accent);
  transform: rotate(45deg);
}

.faq-answer {
  font-size: var(--fs-md);
  color: var(--muted);
  line-height: 1.75;
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease, padding .3s;
}

.faq-item.open .faq-answer {
  max-height: 12.5rem;
  padding-top: 0.875rem;
}


/* ================================================================
   22. FOOTER  (shared across all pages)
   ================================================================ */
footer {
  background: var(--bg-footer);
  border-top: 0.0625rem solid var(--border);
  padding: 1.5rem 0;
}

.footer-minimum {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.footer-left .nav-logo {
  font-size: 1.6rem;
  display: block;
}

.footer-legal-menu {
  display: flex;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-legal-menu a {
  font-size: var(--fs-sm);
  color: var(--muted);
  text-decoration: none;
  transition: color .2s;
}

.footer-legal-menu a:hover {
  color: var(--text);
}

.social-links {
  display: flex;
  gap: 1rem;
}

.social-link {
  width: 2.375rem;
  height: 2.375rem;
  border: 0.09375rem solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: border-color .25s, color .25s;
}

.social-link:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.social-link i {
  font-size: var(--fs-md);
  display: flex;
}


/* ================================================================
   23. AOS  (Animate On Scroll — override defaults)
   ================================================================ */
[data-aos] {
  will-change: transform, opacity;
}


/* ================================================================
   24. RESPONSIVE
   ================================================================ */

/* ── Tablet  ≤ 56.25rem ── */
@media (max-width: 56.25rem) {

  /* Nav */
  .nav-links,
  .nav-cta {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  /* Sections */
  section {
    padding: 5rem 0;
  }

  .section-heading {
    margin-bottom: 2.5rem;
  }

  .section-heading-md {
    margin-bottom: 2.25rem;
  }

  /* Typography scale-down */
  h1 {
    font-size: var(--fs-h1-tablet);
  }

  h2 {
    font-size: var(--fs-h2-tablet);
    margin-bottom: 2.5rem;
  }

  h3 {
    font-size: var(--fs-h3-tablet);
  }

  h4 {
    font-size: var(--fs-h4-tablet);
  }

  /* Home hero */
  .hero-geo {
    display: none;
  }

  /* Index about */
  .about-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  /* Index portfolio */
  .portfolio-grid {
    grid-template-columns: 1fr;
  }

  .portfolio-item {
    grid-column: span 1 !important;
  }

  /* Index process */
  .process-steps::before {
    display: none;
  }

  .process-steps {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }

  /* About page */
  .manifesto-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .pillars-grid {
    grid-template-columns: 1fr;
  }

  .stats-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-block {
    border-bottom: 0.0625rem solid rgba(0, 0, 0, .12);
  }

  .recognition-grid {
    grid-template-columns: 1fr;
  }

  /* Services page */
  .service-list-header {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .service-item {
    grid-template-columns: 3.75rem 1fr auto;
    gap: 1.25rem;
  }

  .process-deep-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .process-sticky-col {
    position: static;
  }

  .packages-grid {
    grid-template-columns: 1fr;
    max-width: 30rem;
    margin: 0 auto;
  }

  .why-grid {
    grid-template-columns: 1fr;
  }

  /* Work page */
  .p-item.large,
  .p-item.medium,
  .p-item.full {
    grid-column: span 12;
  }

  .p-item.small,
  .p-item.third {
    grid-column: span 6;
  }

  .p-overlay {
    opacity: 1;
    transform: none;
  }

  .case-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .case-sub-thumb {
    display: none;
  }

  .work-cta-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Contact page */
  #contact-hero {
    flex-direction: column;
    min-height: auto;
  }

  .ch-left {
    flex: none;
    padding: 8.75rem 2rem 3.75rem;
    border-right: none;
    border-bottom: 0.0625rem solid var(--border);
  }

  .ch-right {
    flex: none;
    padding: 3.75rem 2rem 5rem;
  }

  .faq-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  /* Services index header */
  .services-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .services-subtitle {
    text-align: left;
  }

  .work-header {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Footer */
  .footer-minimum {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
  }

  .footer-legal-menu {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }
}

/* ── Mobile  ≤ 37.5rem ── */
@media (max-width: 37.5rem) {

  /* Typography */
  body {
    font-size: var(--fs-base-mobile);
  }

  h1 {
    font-size: var(--fs-h1-mobile);
    letter-spacing: -0.025em;
  }

  h2 {
    font-size: var(--fs-h2-mobile);
    margin-bottom: 2rem;
  }

  h3 {
    font-size: var(--fs-h3-mobile);
  }

  p {
    font-size: .95rem;
  }

  /* Process */
  .process-steps {
    grid-template-columns: 1fr;
  }

  /* Work page grid */
  .p-item.small,
  .p-item.third {
    grid-column: span 12;
  }

  .work-stats-row {
    flex-wrap: wrap;
  }

  .ws-item {
    flex: 1 1 40%;
    border-bottom: 0.0625rem solid var(--border);
  }

  /* About stats */
  .stats-row {
    grid-template-columns: 1fr 1fr;
  }

  /* Team */
  .team-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Service accordion */
  .service-item {
    grid-template-columns: 3rem 1fr auto;
    gap: 0.875rem;
  }

  /* Contact */
  .ch-left,
  .ch-right {
    padding-inline: 1.25rem;
  }
}

/* Portfolio Lightbox */
.portfolio-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.portfolio-lightbox.active {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-overlay {
  position: absolute;
  inset: 0;
  background: rgba(13, 13, 13, 0.95);
  backdrop-filter: blur(0.625rem);
}

.lightbox-content {
  position: relative;
  z-index: 1;
  max-width: 90%;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-content img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 0.5rem;
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.5);
  transform: scale(0.95);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.portfolio-lightbox.active img {
  transform: scale(1);
}

.lightbox-close {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  width: 3rem;
  height: 3rem;
  background: rgba(255, 255, 255, 0.05);
  border: 0.0625rem solid rgba(255, 255, 255, 0.1);
  color: var(--text);
  font-size: 2rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
}

.lightbox-close:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  transform: scale(1.05);
}

/* ────────────────────────────────────────────────────────────────
   PORTFOLIO SIDEBAR & FILTERING
   ──────────────────────────────────────────────────────────────── */
.portfolio-skeleton {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.skeleton-item {
  background: var(--bg-card);
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius);
  aspect-ratio: 16/11;
  /* standard portfolio thumbnail ratio */
  overflow: hidden;
  position: relative;
  width: 100%;
}

.portfolio-thumb-skeleton {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      rgba(0, 0, 0, 0.03) 25%,
      rgba(0, 0, 0, 0.08) 50%,
      rgba(0, 0, 0, 0.03) 75%);
  background-size: 200% 100%;
  animation: shimmer-effect 1.5s infinite linear;
}

@keyframes shimmer-effect {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

.portfolio-grid {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.portfolio-grid.portfolio-grid-loading {
  opacity: 0 !important;
  transform: scale(0.98);
  height: 0;
  overflow: hidden;
}

.portfolio-grid.portfolio-grid-filtering {
  opacity: 0 !important;
  transform: scale(0.985);
}

.portfolio-sidebar {
  position: sticky;
  top: 6.25rem;
  padding-right: 1.5rem;
}

.sidebar-title {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text);
  border-bottom: 0.125rem solid var(--accent);
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
}

.portfolio-filters {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.portfolio-filters li {
  margin-bottom: 0;
}

.portfolio-filter-btn {
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius);
  background: var(--bg-2);
  border: 0.0625rem solid var(--border);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.portfolio-filter-btn::after {
  content: '';
  width: 0.3rem;
  height: 0.3rem;
  background-color: var(--muted);
  border-radius: 50%;
  transition: all 0.3s ease;
  flex-shrink: 0;
  margin-left: 0.6rem;
}

.portfolio-filter-btn:hover {
  background: var(--accent);
  color: #ffffff !important;
  border-color: var(--accent);
}

.portfolio-filter-btn:hover::after {
  background-color: #ffffff;
  transform: scale(1.2);
}

.portfolio-filter-btn.active {
  background: var(--text);
  color: var(--bg) !important;
  border-color: var(--text);
}

.portfolio-filter-btn.active::after {
  background-color: var(--accent);
  transform: scale(1.5);
}

#portfolio-list .portfolio-item-col {
  width: calc(33.333% - 10px);
  /* 3 columns on desktop */
  margin: 5px;
  box-sizing: border-box;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

@media (max-width: 61.9375rem) {
  #portfolio-list .portfolio-item-col {
    width: calc(50% - 10px);
    /* 2 columns on tablet */
  }
}

@media (max-width: 37.5rem) {
  #portfolio-list .portfolio-item-col {
    width: calc(100% - 10px);
    /* 1 column on mobile */
  }
}

.portfolio-item-col.filtered-out {
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
}

@media (max-width: 61.9375rem) {
  .portfolio-sidebar {
    position: relative;
    top: 0;
    padding-right: 0;
    margin-bottom: 2.5rem;
  }

  .portfolio-filters {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .portfolio-filters li {
    margin-bottom: 0;
  }

  .portfolio-filter-btn {
    width: auto;
    padding: 0.35rem 0.75rem;
  }

  .portfolio-filter-btn::after {
    display: inline-block;
  }
}

/* Borderless Clean Stats Row */
#stats-clean {
  background: var(--bg);
  padding: 6.25rem 0;
  border-top: 0.0625rem solid var(--border);
  border-bottom: 0.0625rem solid var(--border);
}

.stat-number {
  font-family: var(--font-head);
  font-size: clamp(3.5rem, 6vw, 5.5rem);
  font-weight: 800;
  color: var(--accent);
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin-bottom: 0.75rem;
}

.stat-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1.4;
}

/* Page Template Styles */
.site-main-content {
  background: var(--bg);
  min-height: 50vh;
}

.page-entry-title {
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 2rem;
  border-bottom: 0.0625rem solid var(--border);
  padding-bottom: 1.5rem;
}

.entry-content {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--muted);
}

.entry-content p {
  margin-bottom: 1.5rem;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
  font-family: var(--font-head);
  color: var(--text);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

.entry-content h2 {
  font-size: var(--fs-2xl);
}

.entry-content h3 {
  font-size: var(--fs-xl);
}

.entry-content ul,
.entry-content ol {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

.entry-content li {
  margin-bottom: 0.5rem;
}

/* ================================================================
   15. SERVICE DETAIL TEMPLATE STYLES
   ================================================================ */
.service-detail-page {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
}

/* Service Hero */
.service-hero {
  padding: 11.25rem 0 7.5rem;
  position: relative;
  overflow: hidden;
  border-bottom: 0.0625rem solid var(--border);
}

.service-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 70% at 85% 50%, rgba(255, 86, 48, 0.05) 0%, transparent 65%);
  pointer-events: none;
}

.service-hero-title {
  font-family: var(--font-head);
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin-bottom: 2rem;
}

.service-hero-desc {
  font-size: var(--fs-lg);
  line-height: 1.8;
  color: var(--muted);
  margin-bottom: 2.5rem;
  max-width: 36rem;
}

.service-hero-img-wrap {
  position: relative;
  background: rgba(255, 255, 255, 0.45);
  border: 0.0625rem solid rgba(255, 255, 255, 0.6);
  border-radius: calc(var(--radius) + 0.5rem);
  padding: 0.75rem;
  -webkit-backdrop-filter: blur(0.375rem);
  backdrop-filter: blur(0.375rem);
  box-shadow: 0 0.5rem 2rem rgba(22, 22, 22, 0.05);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.service-hero-img-wrap:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 1rem 3rem rgba(22, 22, 22, 0.08);
}

.hero-service-img {
  border-radius: var(--radius);
  width: 100%;
  height: auto;
  display: block;
}

.hero-service-badge {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  background: var(--accent);
  color: #FFFFFF;
  padding: 0.5rem 1rem;
  border-radius: 6.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 0.25rem 0.75rem rgba(255, 86, 48, 0.3);
}

.hero-service-badge .badge-num {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-sm);
  opacity: 0.9;
}

.hero-service-badge .badge-txt {
  font-size: var(--fs-xxs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Capabilities Cards */
.service-capabilities {
  padding: 7.5rem 0;
  border-bottom: 0.0625rem solid var(--border);
}

.capabilities-intro-text {
  font-size: var(--fs-base);
  line-height: 1.75;
}

.capability-card {
  background: var(--bg-card);
  border: 0.0625rem solid var(--border);
  border-radius: calc(var(--radius) + 0.25rem);
  padding: 2.5rem;
  height: 100%;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s, box-shadow 0.3s;
}

.capability-card:hover {
  transform: translateY(-0.375rem);
  border-color: var(--accent);
  box-shadow: 0 1rem 2.5rem rgba(22, 22, 22, 0.04);
}

.cap-icon {
  width: 3rem;
  height: 3rem;
  background: rgba(255, 86, 48, 0.06);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin-bottom: 1.5rem;
  transition: background 0.3s, color 0.3s;
}

.capability-card:hover .cap-icon {
  background: var(--accent);
  color: #FFFFFF;
}

.capability-card h3 {
  font-family: var(--font-head);
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
}

.capability-card p {
  font-size: var(--fs-md);
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 0;
}

/* Logo Portfolio Showcase */
.service-logo-showcase {
  padding: 7.5rem 0;
  border-bottom: 0.0625rem solid var(--border);
}

.logo-portfolio-grid .portfolio-item {
  padding: 0.75rem;
  background: #FFFFFF;
  border: 0.0625rem solid var(--border);
}

.logo-portfolio-grid .portfolio-thumb {
  background: #F9F9F8;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  border-radius: var(--radius);
  aspect-ratio: 4/3;
  overflow: hidden;
}

.logo-portfolio-grid .portfolio-thumb img {
  max-height: 8.5rem;
  width: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.logo-portfolio-grid .portfolio-item:hover .portfolio-thumb img {
  transform: scale(1.05);
}

.logo-portfolio-grid .p-caption h5 {
  font-family: var(--font-head);
  font-size: var(--fs-lg);
  font-weight: 700;
}

/* Process Timeline */
.service-process {
  padding: 7.5rem 0;
  background: var(--bg);
  border-bottom: 0.0625rem solid var(--border);
}

.process-timeline-wrapper {
  position: relative;
  margin-top: 4rem;
}

.timeline-line {
  position: absolute;
  top: 1.5rem;
  left: 0;
  right: 0;
  height: 0.0625rem;
  background: var(--border);
  z-index: 1;
}

.timeline-step {
  position: relative;
  z-index: 2;
  background: var(--bg);
  padding-right: 1.5rem;
}

.timeline-step .step-badge {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--fs-lg);
  color: var(--accent);
  background: var(--bg-card);
  border: 0.0625rem solid var(--accent);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.75rem;
  box-shadow: 0 0 0 0.375rem var(--bg);
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}

.timeline-step:hover .step-badge {
  background: var(--accent);
  color: #FFFFFF;
  border-color: var(--accent);
}

.timeline-step h4 {
  font-family: var(--font-head);
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
}

.timeline-step p {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: 0.75rem;
}

.step-duration {
  font-size: var(--fs-xxs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
}

/* Custom Accordion for FAQs */
.service-faqs {
  padding: 7.5rem 0;
}

.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.faq-item {
  border-bottom: 0.0625rem solid var(--border);
  padding-bottom: 1.5rem;
}

.faq-question {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: var(--font-head);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  padding: 0.75rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  transition: color 0.25s;
  outline: none;
}

.faq-question:hover {
  color: var(--accent);
}

.faq-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: 1rem;
  pointer-events: none;
}

.faq-icon svg {
  pointer-events: none;
}

.faq-item.active .faq-question {
  color: var(--accent);
}

.faq-item.active .faq-icon {
  transform: rotate(45deg);
  color: var(--accent);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease, padding 0.35s ease;
  opacity: 0;
  font-size: var(--fs-base);
  color: var(--muted);
  line-height: 1.7;
  padding-top: 0;
}

.faq-item.active .faq-answer {
  max-height: 320px; /* Safe upper bound for text blocks */
  opacity: 1;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.faq-answer p {
  margin-bottom: 0;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(0.25rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Customizations */
@media (max-width: 61.9375rem) {
  .service-hero {
    padding: 9.5rem 0 5rem;
  }

  .service-hero-title {
    font-size: var(--fs-h1-tablet);
  }

  .service-capabilities,
  .service-logo-showcase,
  .service-process,
  .service-faqs {
    padding: 5rem 0;
  }
}

@media (max-width: 47.9375rem) {
  .timeline-line {
    display: none;
  }

  .timeline-step {
    padding-right: 0;
    margin-bottom: 2rem;
    border-left: 0.0625rem solid var(--border);
    padding-left: 1.5rem;
  }

  .timeline-step .step-badge {
    margin-bottom: 1rem;
    position: relative;
    left: -3.0625rem;
    box-shadow: 0 0 0 0.375rem var(--bg);
  }

  .timeline-step h4,
  .timeline-step p,
  .timeline-step .step-duration {
    position: relative;
    top: -2.5rem;
    margin-bottom: -1.75rem;
  }

  .timeline-step .step-duration {
    display: block;
    margin-top: 0.25rem;
  }
}