/* =================================================================
   AXDYAN.COM — "Engineered Intelligence"
   McKinsey editorial authority × Porsche precision-instrument
   ================================================================= */

:root{
  /* palette */
  --ink:      #0A1A24;
  --ink-2:    #0E232F;
  --ink-3:    #14303D;
  --paper:    #F2EFE9;
  --paper-2:  #E9E4DA;
  --steel:    #5E6B73;
  --steel-2:  #8A949A;
  --accent:   #C5022E;   /* Guards red — used sparingly */
  --accent-2: #E11138;

  --line-d:   rgba(242,239,233,.14);  /* hairline on dark  */
  --line-l:   rgba(10,26,36,.14);     /* hairline on light */

  /* type */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Archivo", system-ui, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, monospace;

  /* metrics */
  --pad: clamp(20px, 5vw, 84px);
  --maxw: 1500px;
  --ease: cubic-bezier(.22,1,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
img,svg{ display:block; max-width:100%; }
::selection{ background:var(--accent); color:#fff; }

/* ---------- grain ---------- */
.grain{
  position:fixed; inset:0; z-index:9000; pointer-events:none;
  opacity:.045; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- registration crosshairs ---------- */
.reg{ position:fixed; width:13px; height:13px; z-index:8000; pointer-events:none; opacity:.5; }
.reg::before,.reg::after{ content:""; position:absolute; background:var(--accent); }
.reg::before{ left:50%; top:0; width:1px; height:100%; transform:translateX(-.5px); }
.reg::after{ top:50%; left:0; height:1px; width:100%; transform:translateY(-.5px); }
.reg--tl{ top:48px; left:14px; } .reg--tr{ top:48px; right:14px; }
.reg--bl{ bottom:14px; left:14px; } .reg--br{ bottom:14px; right:14px; }

/* ---------- custom cursor ---------- */
.cursor{ position:fixed; top:0; left:0; z-index:9500; pointer-events:none; mix-blend-mode:difference; }
.cursor__dot{ position:absolute; width:5px; height:5px; border-radius:50%; background:#fff; transform:translate(-50%,-50%); }
.cursor__ring{
  position:absolute; width:34px; height:34px; border:1px solid rgba(255,255,255,.6);
  border-radius:50%; transform:translate(-50%,-50%) scale(1);
  transition:width .3s var(--ease), height .3s var(--ease), opacity .3s;
}
.cursor.is-hot .cursor__ring{ width:54px; height:54px; border-color:var(--accent-2); }
@media (hover:none){ .cursor{ display:none; } }

/* ---------- spec bar ---------- */
.specbar{
  position:fixed; top:0; left:0; right:0; z-index:1100;
  display:flex; justify-content:space-between; align-items:center;
  padding:9px var(--pad); font-family:var(--mono); font-size:10.5px;
  letter-spacing:.14em; color:var(--steel-2);
  border-bottom:1px solid var(--line-d);
  background:var(--ink); color:var(--steel-2);
  transition:background .5s var(--ease), color .5s var(--ease), border-color .5s;
}
.specbar__item--center{ color:var(--paper); }
body.scrolled .specbar{ background:var(--paper); border-color:var(--line-l); color:var(--steel); }
body.scrolled .specbar .specbar__item--center{ color:var(--ink); }
@media (max-width:720px){ .specbar__item:first-child,.specbar__item:last-child{ display:none; } .specbar{ justify-content:center; } }

/* ---------- nav ---------- */
.nav{
  position:fixed; top:33px; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--pad);
  color:var(--paper);
  transition:background .5s var(--ease), color .5s var(--ease), box-shadow .5s, padding .4s;
}
body.scrolled .nav{
  background:rgba(242,239,233,.86);
  backdrop-filter:blur(14px) saturate(1.2);
  color:var(--ink);
  box-shadow:0 1px 0 var(--line-l);
  padding-top:13px; padding-bottom:13px;
}
.nav__brand{ display:flex; align-items:center; gap:12px; }
.nav__mark{
  display:grid; place-items:center; width:34px; height:34px;
  font-family:var(--serif); font-weight:600; font-size:20px;
  border:1px solid currentColor; position:relative; flex:none;
}
.nav__mark::after{ content:""; position:absolute; bottom:5px; left:8px; right:8px; height:2px; background:var(--accent); }
.nav__name{ font-size:13px; font-weight:600; letter-spacing:.18em; display:flex; align-items:center; }
.nav__dot{ width:5px; height:5px; background:var(--accent); border-radius:50%; margin-left:5px; }

.nav__links{ display:flex; gap:38px; }
.nav__links a{
  font-size:13px; font-weight:500; letter-spacing:.04em; position:relative;
  display:flex; align-items:baseline; gap:7px; padding:4px 0; opacity:.85;
  transition:opacity .3s;
}
.nav__links a:hover{ opacity:1; }
.nav__idx{ font-family:var(--mono); font-size:9.5px; color:var(--accent); letter-spacing:0; }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0; background:currentColor;
  transition:width .4s var(--ease);
}
.nav__links a:hover::after{ width:100%; }

.nav__cta{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12px; font-weight:600; letter-spacing:.03em;
  padding:11px 18px; border:1px solid currentColor; border-radius:40px;
  transition:background .35s var(--ease), color .35s var(--ease), gap .3s;
}
.nav__cta:hover{ background:var(--accent); border-color:var(--accent); color:#fff; gap:14px; }
.nav__cta svg{ transition:transform .35s var(--ease); }
.nav__cta:hover svg{ transform:translateX(3px); }

.nav__burger{ display:none; width:42px; height:42px; border:1px solid currentColor; background:none; color:inherit; cursor:pointer; position:relative; border-radius:4px; }
.nav__burger span{ position:absolute; left:11px; right:11px; height:1.5px; background:currentColor; transition:transform .35s var(--ease), opacity .25s; }
.nav__burger span:nth-child(1){ top:17px; } .nav__burger span:nth-child(2){ bottom:17px; }
body.menu-open .nav__burger span:nth-child(1){ transform:translateY(3px) rotate(45deg); }
body.menu-open .nav__burger span:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }

@media (max-width:1000px){
  .nav__links,.nav__cta{ display:none; }
  .nav__burger{ display:block; }
}

/* ---------- mobile sheet ---------- */
.sheet{
  position:fixed; inset:0; z-index:990; background:var(--ink); color:var(--paper);
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  padding:0 var(--pad); opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
body.menu-open .sheet{ opacity:1; visibility:visible; transform:none; }
.sheet a{ font-family:var(--serif); font-size:clamp(34px,11vw,58px); font-weight:400; display:flex; align-items:baseline; gap:16px; padding:8px 0; border-bottom:1px solid var(--line-d); }
.sheet a i{ font-family:var(--mono); font-size:13px; color:var(--accent); font-style:normal; }
.sheet__foot{ display:flex; justify-content:space-between; margin-top:32px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--steel-2); }

/* ---------- eyebrow ---------- */
.eyebrow{ font-family:var(--mono); font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--steel); display:flex; align-items:center; gap:11px; }
.eyebrow--light{ color:var(--steel-2); }
.eyebrow__tick{ width:26px; height:1px; background:var(--accent); display:inline-block; }

/* =================================================================
   HERO
   ================================================================= */
.hero{
  position:relative; min-height:100svh; background:var(--ink); color:var(--paper);
  display:flex; flex-direction:column; justify-content:center;
  padding:160px var(--pad) 120px; overflow:hidden;
}
.hero__grid{
  position:absolute; inset:0; opacity:.5;
  background-image:
    linear-gradient(var(--line-d) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-d) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 30% 40%, #000 35%, transparent 80%);
          mask-image:radial-gradient(ellipse 80% 70% at 30% 40%, #000 35%, transparent 80%);
}
.hero__inner{ position:relative; max-width:var(--maxw); margin:0 auto; width:100%; }
.hero__eyebrow{ margin-bottom:38px; }

.hero__title{
  font-family:var(--serif); font-weight:330;
  font-size:clamp(40px, 8.4vw, 124px); line-height:.98; letter-spacing:-.018em;
}
.hero__title .line{ display:block; overflow:hidden; }
.hero__title em{ font-style:italic; font-weight:380; position:relative; }
.hero__title em::after{
  content:""; position:absolute; left:0; right:0; bottom:.08em; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  animation:underline 1.1s var(--ease) 1.5s forwards;
}
@keyframes underline{ to{ transform:scaleX(1); } }

.hero__meta{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:40px; margin-top:54px; }
.hero__lede{ max-width:46ch; font-size:clamp(15px,1.6vw,18px); line-height:1.65; color:#C9CFD3; }
.hero__scroll{ display:inline-flex; flex-direction:column; gap:12px; }
.hero__scroll-label{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; }
.hero__scroll-line{ width:130px; height:1px; background:var(--line-d); position:relative; overflow:hidden; }
.hero__scroll-line::after{ content:""; position:absolute; inset:0; width:40%; background:var(--accent); animation:slide 2.4s var(--ease) infinite; }
@keyframes slide{ 0%{ transform:translateX(-100%);} 60%,100%{ transform:translateX(330%);} }

.hero__chart{ position:absolute; right:var(--pad); bottom:140px; width:min(40vw,460px); height:160px; opacity:.9; }
.hero__chart svg{ width:100%; height:100%; }
.chart__line{ fill:none; stroke:var(--accent-2); stroke-width:2; stroke-linecap:round; stroke-dasharray:1400; stroke-dashoffset:1400; animation:draw 2.6s var(--ease) 1.1s forwards; }
.chart__area{ opacity:0; animation:fadein 1.6s ease 2.6s forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes fadein{ to{ opacity:1; } }
.hero__chart-labels{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; color:var(--steel-2); margin-top:8px; }
@media (max-width:1000px){ .hero__chart{ display:none; } }

.hero__stamp{ position:absolute; left:var(--pad); bottom:48px; display:flex; gap:14px; font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; color:var(--steel-2); }
.hero__stamp span:first-child{ color:var(--accent); }

/* =================================================================
   MARQUEE
   ================================================================= */
.marquee{ background:var(--ink-2); color:var(--paper); border-top:1px solid var(--line-d); border-bottom:1px solid var(--line-d); overflow:hidden; padding:20px 0; }
.marquee__track{ display:flex; align-items:center; gap:30px; white-space:nowrap; width:max-content; animation:march 34s linear infinite; }
.marquee__track span{ font-family:var(--serif); font-style:italic; font-size:clamp(20px,2.6vw,32px); font-weight:340; }
.marquee__track i{ color:var(--accent); font-style:normal; font-size:13px; }
@keyframes march{ to{ transform:translateX(-50%); } }
.marquee:hover .marquee__track{ animation-play-state:paused; }

/* =================================================================
   SECTIONS (light)
   ================================================================= */
.section{ max-width:var(--maxw); margin:0 auto; padding:clamp(90px,12vw,170px) var(--pad); }
.section__head{ display:grid; grid-template-columns:1fr; gap:26px; margin-bottom:clamp(50px,7vw,86px); }
.section__title{ font-family:var(--serif); font-weight:340; font-size:clamp(32px,5.4vw,68px); line-height:1.02; letter-spacing:-.02em; }

/* ---------- work index ---------- */
.index{ border-top:1px solid var(--line-l); }
.index__row{ border-bottom:1px solid var(--line-l); }
.index__link{
  display:grid; align-items:center;
  grid-template-columns:84px minmax(0,1.55fr) minmax(0,.9fr) 130px 70px 40px;
  gap:24px; padding:30px 8px; position:relative; transition:padding .45s var(--ease), color .35s;
}
.index__link::before{ content:""; position:absolute; inset:0; background:var(--ink); transform:scaleY(0); transform-origin:bottom; transition:transform .5s var(--ease); z-index:-1; }
.index__row:hover .index__link{ color:var(--paper); padding-left:30px; padding-right:30px; }
.index__row:hover .index__link::before{ transform:scaleY(1); }

.index__no{ font-family:var(--mono); font-size:14px; color:var(--accent); }
.index__title{ font-family:var(--serif); font-weight:360; font-size:clamp(22px,2.9vw,38px); line-height:1.04; letter-spacing:-.01em; }
.index__desc{ font-size:13.5px; color:var(--steel); line-height:1.5; max-width:52ch; margin-top:9px; max-height:0; opacity:0; overflow:hidden; transition:max-height .5s var(--ease), opacity .4s, margin .4s, color .35s; }
.index__row:hover .index__desc{ max-height:80px; opacity:1; color:#AEB7BC; }

.index__tags{ display:flex; flex-wrap:wrap; gap:7px; }
.index__tags li{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:5px 9px; border:1px solid var(--line-l); border-radius:30px; color:var(--steel); transition:border-color .35s, color .35s; }
.index__row:hover .index__tags li{ border-color:var(--line-d); color:#AEB7BC; }

.index__spark{ width:110px; height:38px; }
.index__spark path{ fill:none; stroke:var(--steel-2); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; transition:stroke .35s; }
.index__row:hover .index__spark path{ stroke:var(--accent-2); }

.index__year{ font-family:var(--mono); font-size:12px; color:var(--steel); text-align:right; }
.index__arrow{ justify-self:end; transform:rotate(-45deg) scale(.85); opacity:.4; transition:transform .45s var(--ease), opacity .35s; }
.index__row:hover .index__arrow{ transform:rotate(0) scale(1); opacity:1; color:var(--accent-2); }

@media (max-width:1000px){
  .index__link{ grid-template-columns:54px 1fr 40px; gap:16px; padding:24px 4px; }
  .index__tags,.index__spark,.index__year{ display:none; }
  .index__desc{ max-height:none; opacity:1; color:var(--steel); }
  .index__row:hover .index__link{ padding-left:8px; padding-right:8px; }
}

/* ---------- about ---------- */
.about{ background:var(--paper-2); max-width:none; }
.about__grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,7vw,110px); }
.about__left{ display:flex; flex-direction:column; gap:34px; }
.about__quote{ font-family:var(--serif); font-weight:330; font-style:italic; font-size:clamp(28px,3.7vw,50px); line-height:1.12; letter-spacing:-.015em; }
.about__body{ font-size:clamp(15px,1.5vw,17.5px); line-height:1.75; color:#33424B; margin-bottom:22px; max-width:54ch; }
.about__body strong{ font-weight:600; color:var(--ink); }

.stats{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-l); border:1px solid var(--line-l); margin-top:42px; }
.stat{ background:var(--paper-2); padding:26px 24px; display:flex; flex-direction:column; gap:8px; }
.stat__num{ font-family:var(--serif); font-weight:380; font-size:clamp(38px,5vw,60px); line-height:1; letter-spacing:-.02em; }
.stat__label{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--steel); }

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

/* ---------- capabilities ---------- */
.caps__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-l); border:1px solid var(--line-l); }
.cap{ background:var(--paper); padding:clamp(28px,3vw,46px) clamp(24px,2.4vw,38px); display:flex; flex-direction:column; gap:14px; position:relative; transition:background .4s var(--ease); min-height:230px; }
.cap::after{ content:""; position:absolute; left:0; top:0; width:0; height:2px; background:var(--accent); transition:width .5s var(--ease); }
.cap:hover{ background:var(--ink); color:var(--paper); }
.cap:hover::after{ width:100%; }
.cap__no{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--accent); }
.cap h3{ font-family:var(--serif); font-weight:380; font-size:clamp(20px,2.1vw,27px); line-height:1.1; margin-top:auto; }
.cap p{ font-size:13.5px; line-height:1.6; color:var(--steel); transition:color .4s; }
.cap:hover p{ color:#AEB7BC; }

.stack{ margin-top:48px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 10px; padding-top:34px; border-top:1px solid var(--line-l); }
.stack__label{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--steel); margin-right:14px; }
.stack ul{ display:flex; flex-wrap:wrap; gap:9px; }
.stack li{ font-size:13px; font-weight:500; padding:8px 15px; border:1px solid var(--line-l); border-radius:40px; transition:background .3s, color .3s, border-color .3s; }
.stack li:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

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

/* =================================================================
   CONTACT / FOOTER
   ================================================================= */
.contact{ position:relative; background:var(--ink); color:var(--paper); padding:clamp(90px,12vw,160px) var(--pad) 40px; overflow:hidden; }
.contact__grid-bg{
  position:absolute; inset:0; opacity:.4;
  background-image:linear-gradient(var(--line-d) 1px,transparent 1px),linear-gradient(90deg,var(--line-d) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 80% 30%,#000,transparent 75%);
          mask-image:radial-gradient(ellipse 70% 80% at 80% 30%,#000,transparent 75%);
}
.contact > *{ position:relative; max-width:var(--maxw); margin-left:auto; margin-right:auto; }
.contact .eyebrow{ margin-bottom:34px; }
.contact__title{ font-family:var(--serif); font-weight:330; font-size:clamp(38px,7vw,104px); line-height:.98; letter-spacing:-.02em; margin-bottom:54px; }

.contact__mail{
  display:inline-flex; align-items:center; gap:18px; flex-wrap:wrap;
  font-family:var(--serif); font-style:italic; font-weight:340;
  font-size:clamp(24px,4.4vw,58px); line-height:1.1; letter-spacing:-.01em;
  border-bottom:1px solid var(--line-d); padding-bottom:18px;
  transition:color .35s, gap .35s, border-color .35s;
}
.contact__mail:hover{ color:var(--accent-2); gap:26px; border-color:var(--accent); }
.contact__mail svg{ flex:none; transition:transform .35s var(--ease); }
.contact__mail:hover svg{ transform:translateX(6px); }

.contact__row{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; margin-top:54px; }
.contact__social{ display:flex; gap:30px; flex-wrap:wrap; }
.contact__social a{ font-size:14px; font-weight:500; letter-spacing:.02em; position:relative; color:#C9CFD3; transition:color .3s; }
.contact__social a:hover{ color:var(--paper); }
.contact__loc{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--steel-2); }

.contact__base{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;
  margin-top:clamp(60px,9vw,110px); padding-top:24px; border-top:1px solid var(--line-d);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--steel-2);
}
.contact__base-center{ color:var(--accent); }
@media (max-width:680px){ .contact__base{ justify-content:flex-start; gap:8px; } .contact__base-center{ order:3; } }

/* =================================================================
   REVEAL
   ================================================================= */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal-d="1"]{ transition-delay:.05s; }
[data-reveal-d="2"]{ transition-delay:.16s; }
[data-reveal-d="3"]{ transition-delay:.27s; }
[data-reveal-d="4"]{ transition-delay:.42s; }
[data-reveal-d="5"]{ transition-delay:.58s; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  [data-reveal]{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
  .cursor{ display:none; }
}