/* ============================================================
   CUSTOM FONTS
============================================================ */
@font-face {
  font-family: 'DxGrafik';
  src: url('assets/fonts/DxGrafik-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DxGrafik';
  src: url('assets/fonts/DxGrafik-BlackItalic.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* ============================================================
   VARIABLES
============================================================ */
:root {
  /* ── Backgrounds ── */
  --bg:           #FAFAF7;          /* off-white — body */
  --surface:      #FFFFFF;          /* card / elevated */
  --bg-alt:       #F4F2EC;          /* section alternation */
  --bg-alt-soft:  #F7F6F3;          /* gentler alt — kept for compat */

  /* ── Borders ── */
  --border:        #E5E2DC;
  --border-strong: #C9C5BC;

  /* ── Text ── */
  --text:       #1A1A1A;
  --text-dim:   #5C5C5C;
  --text-muted: #8F8F8F;

  /* ── Primary (Forest Green) ── */
  --purple:        #346739;          /* Forest 600 — main accent */
  --purple-dim:    rgba(52,103,57,0.1);
  --purple-lt:     #4F8E54;          /* Forest 500 — focus/hover */
  --purple-darker: #1F4423;          /* Forest 800 — deep hover */
  --purple-tint:   #E8F0E9;          /* Forest 50 — soft fill */

  /* ── Secondary (Warm Sand) ── */
  --accent-warm:      #C8956D;       /* highlights, badges */
  --accent-warm-soft: #F5E9DC;       /* gentle fill */

  /* ── Semantic ── */
  --success: #22C55E;
  --warning: #F59E0B;
  --error:   #EF4444;
  --info:    #3B82F6;

  --green:   #22C55E;                /* legacy alias for the pulsing dot */

  /* ── Typography ── */
  --font-hero: 'DxGrafik', 'Bebas Neue', Impact, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-disp:    'Fraunces', 'Playfair Display', Georgia, serif;
  --font-serif:   'Fraunces', 'Playfair Display', Georgia, serif;
  --font-display: 'Fraunces', 'Playfair Display', Georgia, serif;  /* alias */

  /* ── Layout ── */
  --max-w:  1200px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --ease:   cubic-bezier(0.25,0.1,0.25,1);
  --ease-o: cubic-bezier(0,0,0.2,1);
}

/* ============================================================
   QUIET-FOREST ACCENT TOUCHES (skill-recommended)
   Use Warm Sand sparingly — only on premium-feel highlights
============================================================ */
.hero__fullname { color: var(--accent-warm); font-weight: 600; }
.hero__sep { color: var(--accent-warm); opacity: 0.5; }
::selection { background: var(--accent-warm-soft); color: var(--text); }

/* ============================================================
   RESET
============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;border:none;background:none;cursor:pointer}
input,textarea,select{font:inherit}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ============================================================
   LAYOUT
============================================================ */
.container{width:100%;max-width:var(--max-w);margin-inline:auto;padding-inline:var(--gutter);position:relative}
.section{padding-block:clamp(4rem,8vw,7rem)}

/* ============================================================
   TYPOGRAPHY — section headings
============================================================ */
.section-heading{
  font-family:var(--font-hero);
  font-size:clamp(2.25rem,4.5vw,3.75rem);
  line-height:1;
  letter-spacing:0.01em;
  color:var(--text);
  text-transform:uppercase;
  margin-bottom:1.25rem;
}

/* ============================================================
   BUTTONS
============================================================ */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.5rem;border-radius:999px;font-size:.88rem;font-weight:600;letter-spacing:.01em;transition:all .25s var(--ease);white-space:nowrap}
.btn--dark{background:var(--text);color:#fff}
.btn--dark:hover{background:#333;transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.btn--outline{border:1.5px solid var(--text);color:var(--text)}
.btn--outline:hover{background:var(--text);color:#fff;transform:translateY(-2px)}

/* ============================================================
   LIQUID GLASS BUTTON (translated from React component)
============================================================ */
.btn--glass {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 2.25rem;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  color: var(--text);
  background: transparent;
  border: none;
  transition: transform 0.3s cubic-bezier(0.25,0.1,0.25,1),
              filter 0.3s cubic-bezier(0.25,0.1,0.25,1);
  text-decoration: none;
  white-space: nowrap;
  isolation: isolate;
}
.btn--glass:hover { transform: scale(1.05); }
.btn--glass:active { transform: scale(0.97); filter: brightness(0.95); }

/* The glass layer behind the button */
.btn--glass__layer {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  z-index: 0;
  box-shadow:
    0 0 6px rgba(0,0,0,0.03),
    0 2px 6px rgba(0,0,0,0.08),
    inset 3px 3px 0.5px -3px rgba(0,0,0,0.9),
    inset -3px -3px 0.5px -3px rgba(0,0,0,0.85),
    inset 1px 1px 1px -0.5px rgba(0,0,0,0.6),
    inset -1px -1px 1px -0.5px rgba(0,0,0,0.6),
    inset 0 0 6px 6px rgba(0,0,0,0.12),
    inset 0 0 2px 2px rgba(0,0,0,0.06),
    0 0 12px rgba(255,255,255,0.15);
  backdrop-filter: blur(12px) url("#liquid-glass-filter");
  -webkit-backdrop-filter: blur(12px);
  transition: box-shadow 0.3s;
}
.btn--glass:hover .btn--glass__layer {
  box-shadow:
    0 0 8px rgba(0,0,0,0.05),
    0 4px 12px rgba(0,0,0,0.12),
    inset 3px 3px 0.5px -3px rgba(0,0,0,0.9),
    inset -3px -3px 0.5px -3px rgba(0,0,0,0.85),
    inset 1px 1px 1px -0.5px rgba(0,0,0,0.6),
    inset -1px -1px 1px -0.5px rgba(0,0,0,0.6),
    inset 0 0 8px 8px rgba(0,0,0,0.14),
    inset 0 0 2px 2px rgba(0,0,0,0.08),
    0 0 18px rgba(255,255,255,0.2);
}

/* Button text sits above glass layer */
.btn--glass span { position: relative; z-index: 1; }
.btn-pill-outline{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.65rem 1.8rem;border-radius:999px;border:1.5px solid var(--text);font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text);transition:all .25s var(--ease)}
.btn-pill-outline:hover{background:var(--text);color:#fff}
.btn-pill-filled{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.65rem 1.8rem;border-radius:999px;border:1.5px solid var(--purple);background:var(--purple);color:#fff;font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;transition:all .25s var(--ease)}
.btn-pill-filled:hover{background:var(--purple-darker);border-color:var(--purple-darker);transform:translateY(-2px);box-shadow:0 8px 24px rgba(52,103,57,.3)}
.about__ctas{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center}
.btn-submit{width:100%;padding:.8rem 2rem;font-size:.85rem}

/* ============================================================
   FLOATING AVAILABLE BADGE
============================================================ */
.avail-badge{
  position:fixed;
  top:1.25rem;
  left:50%;
  transform:translateX(-50%) translateY(-80px);
  z-index:300;
  display:flex;
  align-items:center;
  gap:.6rem;
  background:#fff;
  border-radius:999px;
  padding:.4rem .9rem .4rem .4rem;
  box-shadow:0 4px 24px rgba(0,0,0,.12);
  border:1px solid rgba(0,0,0,.06);
  opacity:0;
  pointer-events:none;
  transition:transform .45s var(--ease-o), opacity .45s var(--ease-o);
}
.avail-badge.is-visible{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto}
.avail-badge__avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0}
.avail-badge__text{font-size:.8rem;font-weight:600;color:var(--text);white-space:nowrap}
.avail-badge__dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0;box-shadow:0 0 6px var(--green)}

/* ============================================================
   NAVIGATION — centered pill
============================================================ */
.nav{
  position:fixed;
  top:1.25rem;
  left:0;right:0;
  z-index:200;
  display:flex;
  justify-content:center;
  pointer-events:none;
}
.nav__pill{
  display:flex;
  align-items:center;
  gap:1.25rem;
  background:#111;
  border-radius:999px;
  padding:.4rem .5rem .4rem .5rem;
  box-shadow:0 4px 28px rgba(0,0,0,.22);
  pointer-events:auto;
}
.nav__avatar-link{display:flex;align-items:center;flex-shrink:0}
.nav__logo-img{height:32px;width:32px;border-radius:50%;object-fit:cover;filter:invert(1)}
.nav__links{display:flex;align-items:center;gap:.1rem}
.nav__link{font-size:.83rem;font-weight:500;color:rgba(255,255,255,.7);padding:.45rem .85rem;border-radius:999px;transition:all .2s}
.nav__link:hover,.nav__link--active{color:#fff;background:rgba(255,255,255,.1)}
.nav__cta{background:var(--purple);color:#fff;border-radius:999px;padding:.5rem 1.25rem;font-size:.83rem;font-weight:600;letter-spacing:.01em;transition:background .2s,transform .2s}
.nav__cta:hover{background:var(--purple-lt);transform:scale(1.03)}

/* Language switcher (inside nav pill) */
.lang-switch{display:flex;align-items:center;gap:.15rem;padding:.2rem;background:rgba(255,255,255,.08);border-radius:999px;margin-right:.4rem}
.lang-switch__btn{font-size:.7rem;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.55);padding:.35rem .65rem;border-radius:999px;transition:all .2s;text-transform:uppercase;cursor:pointer;background:transparent;border:none}
.lang-switch__btn:hover{color:#fff}
.lang-switch__btn.is-active{background:var(--purple);color:#fff;box-shadow:0 2px 8px rgba(52,103,57,.4)}

[dir="rtl"] .marquee__track{animation-direction:reverse}
[dir="rtl"] .hero__scroll-link svg,[dir="rtl"] .btn svg,[dir="rtl"] .blog-card__link::after{transform:scaleX(-1)}

/* Hamburger */
.nav__hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:36px;height:36px;padding:6px;background:transparent}
.bar{display:block;width:100%;height:1.5px;background:#fff;transition:transform .3s,opacity .3s;transform-origin:center}
.nav__hamburger.is-open .bar:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav__hamburger.is-open .bar:nth-child(2){opacity:0;transform:scaleX(0)}
.nav__hamburger.is-open .bar:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Mobile dropdown */
.nav__mobile{
  display:none;
  position:fixed;
  top:80px;left:1rem;right:1rem;
  background:#111;
  border-radius:16px;
  padding:1.25rem;
  z-index:199;
  flex-direction:column;
  gap:.5rem;
  box-shadow:0 8px 32px rgba(0,0,0,.3);
  pointer-events:auto;
}
.nav__mobile.is-open{display:flex}
.nav__mobile a{font-size:1rem;font-weight:600;color:rgba(255,255,255,.8);padding:.6rem .75rem;border-radius:8px;transition:all .2s}
.nav__mobile a:hover{color:#fff;background:rgba(255,255,255,.1)}

/* ============================================================
   HERO
============================================================ */
.hero{min-height:100svh;display:flex;align-items:stretch;background:var(--bg);padding-top:80px}
.hero__inner{display:flex;flex-direction:column;justify-content:center;padding-bottom:3rem;gap:0}

.hero__toprow{display:flex;align-items:center;justify-content:space-between;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.hero__fullname{font-size:.95rem;font-weight:600;color:var(--text-dim);letter-spacing:.02em}
.hero__meta{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--text-muted)}
.hero__sep{color:var(--border)}

.hero__stage{display:flex;align-items:center;justify-content:space-between;padding-block:clamp(.25rem,1vw,.75rem)}
.hero__word{font-family:var(--font-hero);font-size:clamp(3rem,7.5vw,6.5rem);line-height:.9;color:var(--text);letter-spacing:.01em;flex:1;user-select:none}
.hero__word:first-child{text-align:right;padding-right:clamp(.75rem,2vw,2rem)}
.hero__word--r{text-align:left;padding-left:clamp(.75rem,2vw,2rem)}

.hero__photo-wrap{flex-shrink:0;width:clamp(150px,17vw,250px);position:relative}
.hero__photo{width:100%;aspect-ratio:3/4;border-radius:clamp(75px,9vw,130px);overflow:hidden;background:#e8e5dc;border:1px solid var(--border)}
.hero__photo-img{width:100%;height:100%;object-fit:cover;object-position:top center}

.hero__badge{
  position:absolute;bottom:14%;left:-10%;
  width:clamp(42px,4.5vw,58px);height:clamp(42px,4.5vw,58px);
  background:var(--purple);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.78rem;font-weight:700;color:#fff;
  box-shadow:0 6px 20px rgba(52,103,57,.4);
  animation:float 3.5s ease-in-out infinite;
}

.hero__btmrow{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-top:1rem;border-top:1px solid var(--border);flex-wrap:wrap}
.hero__tagline{font-size:clamp(1.1rem,1.6vw,1.4rem);color:var(--text);line-height:1.55;max-width:36ch;font-weight:500;letter-spacing:-0.005em}
.hero__ctas{display:flex;gap:.75rem;flex-shrink:0}
.hero__scroll-link{display:flex;align-items:center;gap:.45rem;font-size:.72rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);transition:color .2s;flex-shrink:0}
.hero__scroll-link:hover{color:var(--text)}
.hero__scroll-link svg{animation:bounce-y 2s ease-in-out infinite}

/* ============================================================
   SERVICES — accordion
============================================================ */
.services{background:var(--bg);border-top:1px solid var(--border)}
.services__inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.services__sub{font-size:.95rem;color:var(--text-dim);line-height:1.8;margin-bottom:2rem;max-width:48ch}

/* Accordion */
.svc-accordion{display:flex;flex-direction:column;border-top:1px solid var(--border)}
.svc-acc__item{border-bottom:1px solid var(--border);overflow:hidden}
.svc-acc__btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 0;text-align:left;font-family:var(--font-hero);font-size:clamp(1.4rem,2.5vw,2rem);letter-spacing:.04em;color:var(--text);transition:color .2s}
.svc-acc__btn:hover{color:var(--purple)}
.svc-acc__icon{flex-shrink:0;transition:transform .35s var(--ease-o)}
.svc-acc__item.is-open .svc-acc__icon{transform:rotate(180deg)}
.svc-acc__body{max-height:0;overflow:hidden;transition:max-height .4s var(--ease-o)}
.svc-acc__list{padding-bottom:1.25rem;display:flex;flex-direction:column;gap:.5rem}
.svc-acc__list li{font-size:.9rem;color:var(--text-dim);padding-left:1rem;position:relative}
.svc-acc__list li::before{content:'';position:absolute;left:0;top:.7em;width:5px;height:5px;border-radius:50%;background:var(--purple)}

/* Right image */
.services__right{display:flex;align-items:flex-start;justify-content:center;padding-top:1rem}
.services__img-wrap{width:100%;max-width:420px;border-radius:20px;overflow:hidden;transform:rotate(3deg);box-shadow:0 20px 60px rgba(0,0,0,.12);transition:transform .4s var(--ease)}
.services__img-wrap:hover{transform:rotate(0deg)}
.services__img{width:100%;height:380px;object-fit:cover;object-position:top center}

/* ============================================================
   ABOUT
============================================================ */
.about{background:var(--bg-alt);border-top:1px solid var(--border)}
.about__inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.about__bio{font-size:.95rem;color:var(--text-dim);line-height:1.85;margin-bottom:2rem;max-width:52ch}

/* Stats */
.about__stats{display:flex;gap:2.5rem;margin-bottom:2rem;flex-wrap:wrap}
.stat{display:flex;flex-direction:column;gap:.2rem}
.stat__num{font-family:var(--font-hero);font-size:clamp(2.5rem,5vw,4rem);line-height:1;color:var(--purple);letter-spacing:.01em}
.stat__lbl{font-size:.78rem;color:var(--text-dim);max-width:10ch;line-height:1.3}

/* Contact row */
.about__contact-row{display:flex;gap:2rem;margin-bottom:1.5rem;flex-wrap:wrap}
.about__contact-label{display:block;font-size:.75rem;font-weight:700;color:var(--text);margin-bottom:.2rem}
.about__contact-val{font-size:.9rem;color:var(--text-dim);transition:color .2s}
.about__contact-val:hover{color:var(--purple)}

/* Socials */
.about__socials{display:flex;gap:.75rem;margin-bottom:1.75rem}
.social-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--border);color:var(--text);transition:all .2s}
.social-icon:hover{border-color:var(--text);background:var(--text);color:#fff}

/* Right image */
.about__right{display:flex;justify-content:center}
.about__img-wrap{width:100%;max-width:420px;aspect-ratio:4/5;border-radius:20px;overflow:hidden;box-shadow:0 16px 48px rgba(0,0,0,.08)}
.about__img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block;transition:transform .6s var(--ease)}
.about__img-wrap:hover .about__img{transform:scale(1.03)}

/* ============================================================
   PROJECTS — full-width stacked
============================================================ */
.projects{background:var(--bg);border-top:1px solid var(--border)}
.projects__header{margin-bottom:2rem}
.proj-stack{display:flex;flex-direction:column;gap:1.5rem;padding-inline:var(--gutter);max-width:var(--max-w);margin-inline:auto}

.proj-stack-card{
  position:relative;
  display:block;
  border-radius:20px;
  overflow:hidden;
  height:clamp(360px,46vw,540px);
  text-decoration:none;
  cursor:pointer;
  background:#000;
  transition:transform .4s var(--ease-o), box-shadow .4s;
}
.proj-stack-card:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 60px rgba(0,0,0,.18);
}

/* Image — fill card; centered on the laptop/device */
.proj-stack-card__bg{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 55%;   /* nudge slightly down to focus on the laptop screen */
  transition:transform .6s var(--ease);
}
.proj-stack-card:hover .proj-stack-card__bg{transform:scale(1.04)}

/* Bottom gradient overlay for text readability */
.proj-stack-card__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.18) 45%, rgba(0,0,0,0) 70%);
  transition:background .3s;
  pointer-events:none;
}
.proj-stack-card:hover .proj-stack-card__overlay{
  background:linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.30) 50%, rgba(0,0,0,.05) 80%);
}

/* Content sits at the bottom-left over the gradient */
.proj-stack-card__content{
  position:absolute;
  left:0;right:0;bottom:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  padding:1.5rem 2rem 1.75rem;
  gap:.6rem;
}
.proj-pill{
  display:inline-block;
  background:var(--purple);
  color:#fff;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  border-radius:999px;
  padding:.3rem .9rem;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.proj-stack-card__title{
  font-family:var(--font-hero);
  font-size:clamp(2rem,4vw,3rem);
  color:#fff;
  letter-spacing:.03em;
  line-height:1;
  transition:letter-spacing .3s;
  text-shadow:0 2px 12px rgba(0,0,0,.4);
}
.proj-stack-card:hover .proj-stack-card__title{letter-spacing:.06em}
.proj-stack-card__desc{
  font-size:clamp(.85rem,1.05vw,.95rem);
  color:rgba(255,255,255,.85);
  max-width:52ch;
  line-height:1.6;
  text-shadow:0 1px 8px rgba(0,0,0,.4);
}

/* Dual-CTA project card (Velora — Brand Identity + UX/UI) */
.proj-stack-card--dual { cursor: default; }
.proj-stack-card--dual:hover .proj-stack-card__bg { transform: scale(1.02); }
.proj-stack-card__ctas {
  display: flex;
  gap: .6rem;
  margin-top: .85rem;
  flex-wrap: wrap;
}
.proj-card-cta {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem 1.1rem;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  color: var(--text);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  transition: background .25s var(--ease), transform .25s var(--ease), gap .2s;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.proj-card-cta:hover {
  background: var(--purple);
  color: #fff;
  transform: translateY(-2px);
  gap: .65rem;
  box-shadow: 0 8px 22px rgba(52,103,57,.35);
}

/* ============================================================
   PROJECT CARD FLIP
============================================================ */
.proj-flip {
  height: clamp(360px, 46vw, 540px);
  perspective: 1400px;
}
.proj-flip__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}
.proj-flip:hover .proj-flip__inner {
  transform: rotateY(180deg);
}
.proj-flip__front,
.proj-flip__back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 20px;
  overflow: hidden;
}
.proj-flip__front { transform: rotateY(0deg); }
.proj-flip__back {
  transform: rotateY(180deg);
  background: linear-gradient(145deg, #1F1E1B 0%, #2E2C27 55%, #4A4843 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  gap: 1.1rem;
}
.proj-flip__back-pill {
  display: inline-block;
  background: var(--purple);
  color: #fff;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: .3rem .9rem;
}
.proj-flip__back-title {
  font-family: var(--font-hero);
  font-size: clamp(2rem, 4vw, 3rem);
  color: #fff;
  letter-spacing: .03em;
  line-height: 1;
}
.proj-flip__back-desc {
  font-size: clamp(.85rem, 1.05vw, .95rem);
  color: rgba(255,255,255,.72);
  max-width: 44ch;
  line-height: 1.7;
}
.proj-flip__back-ctas {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  margin-top: .5rem;
}
/* Suppress old card hover transform when inside flip */
.proj-flip .proj-stack-card:hover {
  transform: none;
  box-shadow: none;
}
.proj-flip .proj-stack-card {
  height: 100%;
  border-radius: 20px;
}
@media (max-width: 768px) {
  .proj-flip { height: clamp(260px, 55vw, 360px); }
  .proj-flip:hover .proj-flip__inner { transform: rotateY(180deg); }
}

/* ============================================================
   STORY SCROLL (translated from story-scroll.tsx / FlowArt)
============================================================ */
.story-scroll-root {
  width: 100%;
  overflow-x: hidden;
}
.story-section {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
}
.flow-art-container {
  position: relative;
  display: flex;
  min-height: 100vh;
  width: 100%;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2rem);
  padding: clamp(2rem, 8vw, 4vw) 4vw 4vw;
  will-change: transform;
  transform-origin: bottom left;
}
.story-eyebrow {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .7;
  margin: 0;
}
.story-rule {
  border: none;
  border-top: 1px solid currentColor;
  opacity: .3;
  margin: 0;
}
.story-heading {
  font-family: var(--font-hero);
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  font-weight: 700;
  line-height: .92;
  text-transform: uppercase;
  letter-spacing: -.01em;
  margin: 0;
}
.story-body {
  max-width: 50ch;
  font-size: clamp(1rem, 2vw, 1.4rem);
  line-height: 1.6;
  font-weight: 400;
  margin: 0;
}
.story-body--right {
  margin-left: auto;
  text-align: right;
  opacity: .6;
  font-size: clamp(.8rem, 1.2vw, 1rem);
}
.story-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 3vw;
}
.story-col {
  min-width: 180px;
  flex: 1;
}
.story-col-title {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 .5rem;
}
.story-col-text {
  font-size: clamp(.8rem, 1.1vw, .95rem);
  line-height: 1.65;
  opacity: .7;
  margin: 0;
}
@media (max-width: 768px) {
  .story-heading { font-size: clamp(2rem, 10vw, 3.5rem); }
  .story-cols { gap: 1.5rem; }
  .story-col { min-width: 100%; }
}

/* ============================================================
   FAQ
============================================================ */
.faq{background:var(--bg-alt);border-top:1px solid var(--border)}
.faq__inner{display:grid;grid-template-columns:1fr 1.6fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.faq__sub{font-size:.9rem;color:var(--text-dim);line-height:1.8;max-width:36ch}
.faq__list{display:flex;flex-direction:column;padding-top:.5rem}

.faq__item{border-bottom:1px solid var(--border);overflow:hidden}
.faq__item:first-child{border-top:1px solid var(--border)}
.faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.2rem 0;text-align:left;font-family:var(--font-hero);font-size:clamp(1.1rem,1.8vw,1.4rem);letter-spacing:.04em;color:var(--text-dim);transition:color .2s}
.faq__q:hover,.faq__item.is-open .faq__q{color:var(--text)}
.faq__icon{flex-shrink:0;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.9rem;color:var(--text-muted);transition:border-color .25s,color .25s,transform .35s var(--ease)}
.faq__icon::before{content:'+'}
.faq__item.is-open .faq__icon{border-color:var(--purple);color:var(--purple);transform:rotate(45deg)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease-o)}
.faq__a p{padding-bottom:1.25rem;font-size:.9rem;color:var(--text-dim);line-height:1.8}
.faq__a p a{color:var(--purple);border-bottom:1px solid rgba(52,103,57,.3)}
.faq__a p a:hover{border-color:var(--purple)}

/* ============================================================
   BLOG / INSIGHTS
============================================================ */
.blog{background:var(--bg);border-top:1px solid var(--border)}
.blog__header{margin-bottom:2.5rem}
.blog__sub{font-size:.95rem;color:var(--text-dim);line-height:1.8;max-width:52ch}
.blog__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.ai-tag-eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--purple);background:var(--purple-tint);border:1px solid rgba(52,103,57,.2);border-radius:999px;padding:.35rem .9rem;margin-bottom:1rem}
.ai-tag-eyebrow::before{content:'✦';font-size:.85em}
.blog-card__img--placeholder{display:flex;align-items:center;justify-content:center;position:relative}
.blog-card__placeholder-label{position:relative;z-index:1;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.blog-card__img-photo{width:100%;height:100%;object-fit:cover;display:block}

.blog-card{border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s}
.blog-card:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(0,0,0,.08)}
.blog-card__img{height:220px;position:relative;overflow:hidden}
.blog-card__img-overlay{position:absolute;inset:0;background:rgba(0,0,0,.15)}
.blog-card__body{padding:1.5rem}
.blog-card__meta{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem}
.blog-card__tag{font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;background:var(--purple-dim);color:var(--purple);border-radius:999px;padding:.25rem .7rem}
.blog-card__date{font-size:.78rem;color:var(--text-muted)}
.blog-card__title{font-size:1.1rem;font-weight:700;color:var(--text);line-height:1.3;margin-bottom:.6rem}
.blog-card__desc{font-size:.85rem;color:var(--text-dim);line-height:1.7;margin-bottom:1rem}
.blog-card__link{font-size:.82rem;font-weight:600;color:var(--purple);transition:letter-spacing .2s}
.blog-card__link:hover{letter-spacing:.03em}

/* ============================================================
   CONTACT
============================================================ */
.contact{background:var(--bg-alt);border-top:1px solid var(--border)}
.contact__inner{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(2rem,6vw,5rem);align-items:start}

/* Photo side */
.contact__photo-side{display:flex;justify-content:center}
.contact__photo-wrap{position:relative;width:100%;max-width:340px}
.contact__photo{width:100%;border-radius:20px;object-fit:cover;object-position:top center;height:460px;display:block}
.contact__hi{
  position:absolute;bottom:-10px;left:-16px;
  width:68px;height:68px;
  background:var(--purple);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.88rem;font-weight:700;color:#fff;
  box-shadow:0 6px 20px rgba(52,103,57,.4);
  animation:float 3.5s ease-in-out infinite;
}

/* Form side */
.contact__sub{font-size:.95rem;color:var(--text-dim);line-height:1.8;margin-bottom:1.75rem;max-width:44ch}
.contact__form{display:flex;flex-direction:column;gap:1rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-group{display:flex;flex-direction:column;gap:.35rem}
.form-label{font-size:.78rem;font-weight:600;color:var(--purple);letter-spacing:.02em}
.form-input{width:100%;background:#fff;border:1.5px solid var(--border);border-radius:10px;padding:.75rem 1rem;color:var(--text);font-size:.9rem;outline:none;transition:border-color .2s,box-shadow .2s;appearance:none}
.form-input::placeholder{color:var(--text-muted)}
.form-input:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(52,103,57,.12)}
.form-select{cursor:pointer}
.form-select option{background:#fff}
.form-textarea{resize:vertical;min-height:120px;line-height:1.6}

/* ============================================================
   FOOTER — purple
============================================================ */
.footer{background:var(--purple);color:#fff}
.footer__top{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;padding-top:3rem;padding-bottom:2rem}
.footer__col-label{display:block;font-size:.75rem;font-weight:600;opacity:.6;margin-bottom:.4rem;letter-spacing:.06em}
.footer__col-val{font-size:1rem;font-weight:600;color:#fff;transition:opacity .2s}
.footer__col-val:hover{opacity:.75}
.footer__socials{display:flex;gap:.6rem;margin-top:.5rem}
.footer__social{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);color:#fff;transition:all .2s}
.footer__social:hover{background:rgba(255,255,255,.15);border-color:#fff}
.footer__divider{border:none;border-top:1px solid rgba(255,255,255,.2);margin-inline:var(--gutter)}
.footer__bottom{display:flex;align-items:center;justify-content:space-between;padding-block:1.5rem;flex-wrap:wrap;gap:1rem}
.footer__bottom p{font-size:.82rem;opacity:.65}
.footer__back-top{font-size:.82rem;font-weight:600;opacity:.8;transition:opacity .2s}
.footer__back-top:hover{opacity:1}

/* ============================================================
   SCROLL REVEAL
============================================================ */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease-o),transform .6s var(--ease-o)}
[data-reveal].is-visible{opacity:1;transform:translateY(0)}

/* ============================================================
   KEYFRAMES
============================================================ */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes bounce-y{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ============================================================
   RESPONSIVE — ≤ 900px
============================================================ */
/* ============================================================
   RESPONSIVE — ≤ 900px  (tablets)
============================================================ */
@media(max-width:900px){
  .hero__meta{display:none}
  .services__inner{grid-template-columns:1fr}
  .services__right{display:none}
  .about__inner{grid-template-columns:1fr}
  .about__right{display:none}
  .about__bio{max-width:100%}
  .faq__inner{grid-template-columns:1fr}
  .contact__inner{grid-template-columns:1fr}
  .contact__photo-side{display:none}
  .blog__grid{grid-template-columns:1fr 1fr}
  .footer__top{grid-template-columns:1fr 1fr}
  .proj-stack-card{height:clamp(280px,48vw,420px)}
  .story-cols{flex-direction:column;gap:1.25rem}
  .story-col{min-width:100%}
}

/* ============================================================
   RESPONSIVE — ≤ 768px  (large phones / small tablets)
============================================================ */
@media(max-width:768px){
  .section-heading{font-size:clamp(2rem,7vw,3rem)}
  .blog__grid{grid-template-columns:1fr}
  .hero__ctas{flex-direction:column;align-items:flex-start;gap:.75rem}
  .hero__ctas .btn{width:100%;justify-content:center}
  .about__stats{grid-template-columns:repeat(2,1fr);gap:1.25rem}
  .about__contact-row{flex-direction:column;gap:.5rem}
  .about__ctas{flex-direction:column;align-items:flex-start;gap:.75rem}
  .svc-accordion{margin-top:1.25rem}
  .marquee{font-size:.9rem}
}

/* ============================================================
   RESPONSIVE — ≤ 600px  (phones)
============================================================ */
@media(max-width:600px){
  .nav__links{display:none}
  .nav__cta{display:none}
  .lang-switch{display:none}
  .nav__hamburger{display:flex}
  .nav__pill{gap:.5rem;padding:.3rem .4rem}
  .nav__logo-img{height:28px;width:28px}

  .hero__stage{flex-direction:column;align-items:center;gap:1.25rem;padding-block:1.25rem}
  .hero__word{font-size:clamp(3rem,16vw,5rem);text-align:center!important;padding-inline:0!important;flex:none}
  .hero__photo-wrap{width:min(180px,52vw)}
  .hero__btmrow{flex-direction:column;align-items:center;gap:1.25rem;text-align:center}
  .hero__tagline{max-width:100%}
  .hero__ctas{align-items:center;width:100%}
  .hero__ctas .btn{width:auto;min-width:160px}
  .hero__scroll-link{display:none}
  .hero__toprow{justify-content:center}

  .proj-stack-card{height:clamp(240px,60vw,320px)}
  .proj-flip{height:clamp(240px,60vw,320px)}

  .about__stats{grid-template-columns:1fr 1fr;gap:1rem}
  .form-row{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr}
  .footer__bottom{flex-direction:column;align-items:flex-start}

  .story-section{min-height:auto}
  .flow-art-container{min-height:auto;padding:2rem 5vw}
  .story-heading{font-size:clamp(2rem,10vw,3rem)}
  .story-body{font-size:clamp(.9rem,4vw,1.1rem);max-width:100%}
  .story-body--right{text-align:left;margin-left:0}
}

/* ============================================================
   RESPONSIVE — ≤ 480px  (small phones)
============================================================ */
@media(max-width:480px){
  :root{--gutter:1rem}
  .section-heading{font-size:clamp(1.75rem,8vw,2.5rem)}
  .hero__word{font-size:clamp(2.5rem,15vw,4rem)}
  .hero__photo-wrap{width:min(150px,48vw)}
  .about__stats{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr;gap:1.25rem}
  .blog-card__img{height:180px}
  .proj-flip{height:clamp(220px,70vw,300px)}
  .svc-acc__btn{font-size:clamp(1.1rem,5vw,1.5rem)}
  .faq__q{font-size:clamp(1rem,4vw,1.2rem)}
}