/* =====================================================
   NARGIZ — Quiet Luxury Portfolio
   Palette: True Navy #26374D · Blue Door #536DB2
            Harper's Blue #9DB2BF · Alice Blue #DDE8ED
   Type:    Jost (wordmark/labels)
            Fraunces (display)
            Inter (body)
   ===================================================== */

:root {
  --ink: #141d2b;
  --navy-800: #1c2a3e;
  --navy: #26374d;
  --blue: #536db2;
  --steel: #9db2bf;
  --ice: #dde8ed;
  --mist: #eef3f7;
  --paper: #f7fafc;
  --white: #ffffff;
  --text: #26374d;
  --text-muted: #5b6b7d;
  --text-faint: #8494a5;
  --hairline: rgba(38, 55, 77, 0.14);
  --hairline-light: rgba(221, 232, 237, 0.22);

  --font-label: "Jost", sans-serif;
  --font-display: "Fraunces", serif;
  --font-body: "Inter", sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.3s;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

::selection { background: var(--blue); color: #fff; }

.container { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }

/* ---------- grain texture ---------- */
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  z-index: 1;
}

/* ---------- typography helpers ---------- */
.eyebrow {
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--text-faint);
  display: flex;
  align-items: center;
  gap: 18px;
}

.eyebrow::before {
  content: "";
  width: 44px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0.01em;
}

.display em { font-style: italic; font-weight: 300; }

/* =====================================================
   NAV
   ===================================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
  color: var(--ice);
}

.nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 26px clamp(20px, 4vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: padding var(--dur) var(--ease);
}

.wordmark {
  font-family: var(--font-label);
  font-size: 1.05rem;
  letter-spacing: 0.55em;
  text-transform: uppercase;
  padding-left: 0.55em; /* optical balance for tracking */
}

.nav-links { display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); }

.nav-links a {
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.75;
  position: relative;
  padding: 4px 0;
  transition: opacity var(--dur);
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease);
}

.nav-links a:hover { opacity: 1; }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav.scrolled {
  background: rgba(20, 29, 43, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--hairline-light);
}

.nav.scrolled .nav-inner { padding-top: 16px; padding-bottom: 16px; }

/* nav over light sections when no hero (case pages use .nav-solid) */
.nav-solid {
  background: rgba(20, 29, 43, 0.92);
  backdrop-filter: blur(14px);
}

/* =====================================================
   HERO
   ===================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(90% 70% at 75% 12%, rgba(83, 109, 178, 0.16) 0%, transparent 60%),
    radial-gradient(70% 60% at 15% 90%, rgba(157, 178, 191, 0.1) 0%, transparent 60%),
    linear-gradient(168deg, #16202f 0%, var(--navy-800) 46%, var(--navy) 100%);
  color: var(--ice);
  overflow: hidden;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1240px;
  margin: 0 auto;
  padding: 150px clamp(20px, 4vw, 48px) 110px;
  width: 100%;
}

.hero .eyebrow { color: var(--steel); margin-bottom: clamp(30px, 5vh, 54px); }

.hero-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.7rem, 7vw, 5.8rem);
  line-height: 1.06;
  letter-spacing: 0.005em;
  color: var(--white);
  max-width: 100%;
}

.hero-name em {
  display: block;
  font-style: italic;
  font-weight: 400;
  color: var(--steel);
  padding-left: clamp(0px, 5vw, 84px);
}

.hero-foot {
  margin-top: clamp(40px, 7vh, 72px);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
}

.hero-sub {
  max-width: 44ch;
  font-size: 1.02rem;
  font-weight: 300;
  color: var(--steel);
}

.hero-actions { display: flex; gap: 18px; flex-wrap: wrap; }

.hero-scroll {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-size: 0.68rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--steel);
}

.hero-scroll::after {
  content: "";
  width: 1px;
  height: 64px;
  background: linear-gradient(var(--steel), transparent);
  animation: scrollPulse 2.6s var(--ease) infinite;
}

@keyframes scrollPulse {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* =====================================================
   BUTTONS
   ===================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 17px 34px;
  border: 1px solid;
  cursor: pointer;
  background: transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.btn .arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .arrow { transform: translateX(6px); }

.btn-light { border-color: rgba(221, 232, 237, 0.45); color: var(--ice); }
.btn-light:hover { background: var(--ice); color: var(--navy); border-color: var(--ice); }

.btn-fill-light { background: var(--ice); color: var(--navy); border-color: var(--ice); }
.btn-fill-light:hover { background: transparent; color: var(--ice); border-color: rgba(221, 232, 237, 0.45); }

.btn-dark { border-color: rgba(38, 55, 77, 0.4); color: var(--navy); }
.btn-dark:hover { background: var(--navy); color: var(--ice); border-color: var(--navy); }

.btn-fill-dark { background: var(--navy); color: var(--ice); border-color: var(--navy); }
.btn-fill-dark:hover { background: transparent; color: var(--navy); }

/* =====================================================
   INTRO STRIP
   ===================================================== */
.intro { padding: clamp(90px, 12vw, 150px) 0; background: var(--paper); }

.intro-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: end;
}

.intro h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  max-width: 22ch;
}

.intro-facts { display: grid; gap: 0; border-top: 1px solid var(--hairline); }

.intro-fact {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--hairline);
}

.intro-fact .k {
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.intro-fact .v { font-family: var(--font-display); font-size: 1.35rem; }

/* =====================================================
   SECTION HEAD
   ===================================================== */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 30px;
  margin-bottom: clamp(48px, 6vw, 84px);
}

.section-head h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }

.section-head .eyebrow { margin-bottom: 20px; }

.section-head .aside-note {
  font-size: 0.9rem;
  color: var(--text-muted);
  max-width: 30ch;
  text-align: right;
}

/* =====================================================
   WORK
   ===================================================== */
.work { padding: clamp(90px, 12vw, 150px) 0; background: var(--mist); }

.work-list { display: grid; gap: clamp(56px, 8vw, 110px); }

.work-item {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}

.work-item:nth-child(even) .work-visual { order: 2; }

.work-visual {
  position: relative;
  overflow: hidden;
  background: var(--ice);
  aspect-ratio: 4 / 3;
}

.work-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}

.work-item:hover .work-visual img { transform: scale(1.045); }

/* images with a non-4:3 ratio sit inside the frame instead of being cropped */
.work-visual.fit {
  display: flex;
  align-items: center;
  justify-content: center;
}

.work-visual.fit img {
  width: 86%;
  height: 86%;
  object-fit: contain;
}

.fit-spilk { background: linear-gradient(160deg, #221430 0%, #2c1a40 100%); }

/* typographic covers for web-dev projects */
.cover {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  padding: 24px;
  transition: transform 0.9s var(--ease);
}

.work-item:hover .cover { transform: scale(1.03); }

.cover-mark {
  font-family: var(--font-label);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-size: clamp(1.2rem, 2.4vw, 1.9rem);
  padding-left: 0.4em;
}

.cover-script {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  letter-spacing: 0.02em;
}

.cover-sub {
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: 0.65;
}

.cover-rule { width: 56px; height: 1px; background: currentColor; opacity: 0.4; }

.cover-navy { background: linear-gradient(160deg, #1a2537 0%, var(--navy) 70%, #2e4260 100%); color: var(--ice); }
.cover-ice { background: linear-gradient(160deg, #e7eff4 0%, var(--ice) 60%, #cfdde6 100%); color: var(--navy); }

.work-info .num {
  font-family: var(--font-display);
  font-size: 1rem;
  font-style: italic;
  color: var(--text-faint);
  display: block;
  margin-bottom: 14px;
}

.work-info .cat {
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 18px;
}

.work-info h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  line-height: 1.18;
  max-width: 18ch;
  margin-bottom: 16px;
}

.work-info p {
  color: var(--text-muted);
  max-width: 46ch;
  font-size: 0.98rem;
  margin-bottom: 26px;
}

.work-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy);
  padding-bottom: 6px;
  position: relative;
}

.work-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--navy);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}

.work-link .arrow { transition: transform var(--dur) var(--ease); }
.work-link:hover .arrow { transform: translateX(6px); }
.work-link:hover::after { transform: scaleX(0.4); }

/* =====================================================
   SERVICES
   ===================================================== */
.services { padding: clamp(90px, 12vw, 150px) 0; background: var(--navy); color: var(--ice); position: relative; }

.services .eyebrow { color: var(--steel); }
.services .section-head h2 { color: var(--white); }

.services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--hairline-light);
  border-top: 1px solid var(--hairline-light);
  border-bottom: 1px solid var(--hairline-light);
}

.service {
  background: var(--navy);
  padding: clamp(36px, 5vw, 64px);
  transition: background 0.4s var(--ease);
}

.service:hover { background: #2b3f5a; }

.service .s-num {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--steel);
  display: block;
  margin-bottom: 22px;
}

.service h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  color: var(--white);
  margin-bottom: 14px;
}

.service > p { color: var(--steel); font-size: 0.95rem; font-weight: 300; margin-bottom: 28px; max-width: 44ch; }

.service ul { display: grid; gap: 0; }

.service li {
  padding: 13px 0;
  border-top: 1px solid var(--hairline-light);
  font-size: 0.92rem;
  color: var(--ice);
  font-weight: 300;
  display: flex;
  align-items: center;
  gap: 14px;
}

.service li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--blue);
  flex: 0 0 auto;
}

/* process line */
.process {
  margin-top: clamp(60px, 8vw, 100px);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(16px, 2vw, 32px);
}

.step { border-top: 1px solid var(--hairline-light); padding-top: 20px; }

.step .p-num { font-family: var(--font-display); font-style: italic; color: var(--steel); font-size: 0.95rem; }

.step h4 {
  font-family: var(--font-label);
  font-weight: 400;
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white);
  margin: 10px 0 8px;
}

.step p { font-size: 0.83rem; color: var(--steel); font-weight: 300; line-height: 1.6; }

/* =====================================================
   ABOUT
   ===================================================== */
.about { padding: clamp(90px, 12vw, 150px) 0; background: var(--paper); }

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}

.about-visual { position: relative; max-width: 440px; }

.about-visual img {
  width: 100%;
  filter: saturate(0.82) contrast(1.02);
}

.about-visual::after {
  content: "";
  position: absolute;
  inset: 26px -26px -26px 26px;
  border: 1px solid var(--hairline);
  z-index: -1;
}

.about-text .eyebrow { margin-bottom: 26px; }

.about-text h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); margin-bottom: 26px; max-width: 20ch; }

.about-text p { color: var(--text-muted); margin-bottom: 18px; max-width: 58ch; font-size: 0.99rem; }

.about-langs {
  margin: 30px 0 36px;
  padding: 18px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  display: flex;
  gap: 10px 26px;
  flex-wrap: wrap;
}

.about-langs span {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--navy);
}

/* skills */
.skills-band { padding-bottom: clamp(90px, 12vw, 150px); background: var(--paper); }

.skills-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(28px, 4vw, 60px);
  border-top: 1px solid var(--hairline);
  padding-top: clamp(40px, 5vw, 64px);
}

.skill-col h4 {
  font-family: var(--font-label);
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 20px;
}

.skill-col li {
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.94rem;
  color: var(--text);
}

/* =====================================================
   CONTACT
   ===================================================== */
.contact {
  position: relative;
  padding: clamp(110px, 15vw, 190px) 0;
  background:
    radial-gradient(80% 90% at 80% 10%, rgba(83, 109, 178, 0.14) 0%, transparent 55%),
    linear-gradient(170deg, #16202f 0%, var(--navy-800) 55%, var(--navy) 100%);
  color: var(--ice);
  text-align: center;
  overflow: hidden;
}

.contact .eyebrow { justify-content: center; color: var(--steel); margin-bottom: 30px; }
.contact .eyebrow::before { display: none; }

.contact h2 {
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  color: var(--white);
  max-width: 16ch;
  margin: 0 auto 22px;
}

.contact-mail {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  font-style: italic;
  color: var(--steel);
  margin-bottom: 46px;
  position: relative;
  transition: color var(--dur);
}

.contact-mail:hover { color: var(--white); }

.contact-actions { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; position: relative; z-index: 2; }

/* footer */
.footer {
  background: var(--ink);
  color: var(--steel);
  padding: 34px 0;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px 30px;
  flex-wrap: wrap;
}

.footer .socials { display: flex; gap: 26px; }

.footer a { opacity: 0.8; transition: opacity var(--dur), color var(--dur); }
.footer a:hover { opacity: 1; color: var(--ice); }

/* =====================================================
   CASE STUDY PAGES
   ===================================================== */
.case-hero {
  position: relative;
  padding: 190px 0 90px;
  background: linear-gradient(168deg, #16202f 0%, var(--navy-800) 50%, var(--navy) 100%);
  color: var(--ice);
  overflow: hidden;
}

.case-hero .eyebrow { color: var(--steel); margin-bottom: 28px; }

.case-hero h1 { font-size: clamp(2.2rem, 5vw, 4rem); color: var(--white); max-width: 20ch; }

.case-meta {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  border-top: 1px solid var(--hairline-light);
  padding-top: 28px;
}

.case-meta .k {
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--steel);
  display: block;
  margin-bottom: 8px;
}

.case-meta .v { font-size: 0.95rem; color: var(--ice); font-weight: 300; }

.case-body { padding: clamp(70px, 9vw, 120px) 0; }

.case-section { margin-bottom: clamp(60px, 8vw, 100px); }

.case-section:last-child { margin-bottom: 0; }

.case-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}

.case-grid h2 {
  font-family: var(--font-label);
  font-weight: 400;
  font-size: 0.85rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-faint);
  position: sticky;
  top: 110px;
}

.case-grid .case-content p { color: var(--text-muted); margin-bottom: 18px; max-width: 62ch; }

.case-content p strong { color: var(--navy); font-weight: 600; }

.case-content h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.6rem;
  margin: 34px 0 12px;
  color: var(--navy);
}

.case-content ul { display: grid; gap: 10px; margin: 8px 0 18px; }

.case-content li {
  color: var(--text-muted);
  padding-left: 22px;
  position: relative;
  max-width: 60ch;
}

.case-content li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 6px; height: 1px;
  background: var(--blue);
}

.case-figure { margin: clamp(50px, 7vw, 90px) 0; }

.case-figure img { width: 100%; }

.case-figure figcaption {
  margin-top: 14px;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* outcome cards */
.outcomes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}

.outcome { background: var(--paper); padding: 34px 30px; }

.outcome .o-title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  color: var(--navy);
  margin-bottom: 8px;
  line-height: 1.25;
}

.outcome p { font-size: 0.88rem; color: var(--text-muted); }

/* prev / next */
.case-nav {
  border-top: 1px solid var(--hairline);
  background: var(--mist);
}

.case-nav-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 200px;
}

.case-nav a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 44px clamp(20px, 4vw, 48px);
  transition: background 0.4s var(--ease);
}

.case-nav a:hover { background: var(--ice); }

.case-nav a + a { border-left: 1px solid var(--hairline); text-align: right; align-items: end; }

.case-nav .dir {
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.case-nav .t { font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.9rem); color: var(--navy); }

/* =====================================================
   REVEAL ANIMATIONS
   ===================================================== */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}

.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-scroll::after { animation: none; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 960px) {
  .intro-grid, .about-grid { grid-template-columns: 1fr; }
  .work-item, .work-item:nth-child(even) { grid-template-columns: 1fr; }
  .work-item:nth-child(even) .work-visual { order: 0; }
  .services-grid { grid-template-columns: 1fr; }
  .process { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .skills-cols { grid-template-columns: 1fr; gap: 34px; }
  .case-grid { grid-template-columns: 1fr; }
  .case-grid h2 { position: static; }
  .case-meta { grid-template-columns: repeat(2, 1fr); }
  .outcomes { grid-template-columns: 1fr; }
  .section-head { flex-direction: column; align-items: start; }
  .section-head .aside-note { text-align: left; }
  .about-visual::after { display: none; }
}

@media (max-width: 640px) {
  .nav-links a:not(.nav-cta) { display: none; }
  .wordmark { letter-spacing: 0.4em; }
  .hero-name { font-size: clamp(2.4rem, 11vw, 3.2rem); }
  .hero-name em { padding-left: 0; }
  .case-nav-inner { grid-template-columns: 1fr; }
  .case-nav a + a { border-left: 0; border-top: 1px solid var(--hairline); }
  .footer-inner { justify-content: center; text-align: center; }
}

/* =====================================================
   VARIANT C — Apple-style tech minimalism
   Near-white surfaces, near-black ink, one blue accent,
   tight grotesque headlines, mono technical labels.
   ===================================================== */
:root {
  --font-display: "Inter Tight", sans-serif;
  --font-label: "JetBrains Mono", monospace;
  --font-body: "Inter", sans-serif;
  --ink: #000000;
  --navy-800: #101012;
  --navy: #1d1d1f;
  --blue: #0071e3;
  --steel: #86868b;
  --ice: #f5f5f7;
  --mist: #f5f5f7;
  --paper: #fbfbfd;
  --text: #1d1d1f;
  --text-muted: #6e6e73;
  --text-faint: #86868b;
  --hairline: rgba(0, 0, 0, 0.09);
  --hairline-light: rgba(255, 255, 255, 0.14);
}

::selection { background: #0071e3; color: #fff; }

/* clean surfaces — no grain */
.grain::before { display: none; }

/* tight bold headlines, no italic flourishes */
.display, .hero-name, .work-info h3, .service h3, .contact h2,
.case-nav .t, .outcome .o-title, .case-content h3 {
  font-weight: 600;
  letter-spacing: -0.022em;
  font-style: normal;
}

.display em, .hero-name em { font-style: normal; font-weight: 600; }

/* mono labels, calmer tracking */
.eyebrow { letter-spacing: 0.16em; font-size: 0.72rem; }
.eyebrow::before { width: 28px; }

.wordmark { font-family: var(--font-display); font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 1.15rem; padding-left: 0; }

.nav-links a { text-transform: none; letter-spacing: 0.01em; font-size: 0.9rem; }

/* Apple pill buttons */
.btn {
  border-radius: 980px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 14px 30px;
}

.btn-fill-light, .hero .btn-fill-light { background: #0071e3; border-color: #0071e3; color: #fff; }
.btn-fill-light:hover, .hero .btn-fill-light:hover { background: #0077ed; color: #fff; border-color: #0077ed; }
.btn-light { border-color: rgba(255, 255, 255, 0.35); }
.btn-fill-dark { background: #1d1d1f; border-color: #1d1d1f; }
.btn-fill-dark:hover { background: #000; color: #fff; border-color: #000; }
.btn-dark:hover { background: #1d1d1f; border-color: #1d1d1f; }

/* hero: light, centered, product-page calm */
.hero {
  background: var(--paper);
  color: var(--text);
  text-align: center;
}

.hero-inner { display: flex; flex-direction: column; align-items: center; }
.hero .eyebrow { color: var(--text-faint); justify-content: center; }
.hero .eyebrow::before { display: none; }
.hero-name { color: var(--navy); font-size: clamp(2.8rem, 7vw, 6rem); line-height: 1.04; }
.hero-name em { display: inline; color: var(--steel); padding-left: 0; }
.hero-sub { color: var(--text-muted); font-weight: 400; }
.hero-foot { flex-direction: column; align-items: center; gap: 28px; margin-top: 40px; }
.hero-scroll { color: var(--text-faint); }
.hero-scroll::after { background: linear-gradient(#c7c7cc, transparent); }

/* nav: frosted light glass */
.nav { color: var(--navy); }
.nav.scrolled { background: rgba(251, 251, 253, 0.78); box-shadow: 0 1px 0 var(--hairline); color: var(--navy); }
.nav-solid { background: rgba(16, 16, 18, 0.85); color: var(--ice); }

/* soft rounded cards */
.work-visual, .cover, .fit-spilk { border-radius: 22px; }
.work-visual img { border-radius: 0; }
.work { background: #fff; }
.work-info .num { font-family: var(--font-label); font-style: normal; font-size: 0.8rem; color: var(--text-faint); }
.work-info .cat { color: var(--blue); letter-spacing: 0.18em; font-family: var(--font-label); font-size: 0.72rem; }
.work-link { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--blue); font-size: 0.95rem; }
.work-link::after { background: var(--blue); }

/* dark sections: true black */
.services { background: #0b0b0c; }
.service { background: #0b0b0c; }
.service:hover { background: #131316; }
.service .s-num, .step .p-num { font-family: var(--font-label); font-style: normal; font-size: 0.78rem; color: var(--steel); }
.service li::before { background: var(--blue); }
.services-grid, .service li, .step { border-color: rgba(255, 255, 255, 0.12); }

.contact { background: #0b0b0c; }
.contact-mail { font-family: var(--font-display); font-style: normal; font-weight: 500; color: var(--blue); }
.contact-mail:hover { color: #2997ff; }

.case-hero { background: #0b0b0c; }
.case-hero .eyebrow { color: var(--steel); }

.footer { background: #000; color: #86868b; }

/* about frame: simple rounded photo, no offset border */
.about-visual::after { display: none; }
.about-visual img { border-radius: 22px; }
.about-langs span { font-family: var(--font-body); font-style: normal; font-size: 0.92rem; color: var(--text-muted); }
.intro-fact .v { font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; }

.tag { border-radius: 980px; }
.outcomes, .outcome { border-radius: 0; }

/* =====================================================
   VARIANT C — Pantone remap
   Silver Shadow #939097 · Gibraltar Sea #133951
   Liquid chrome highlights over deep-sea ink.
   ===================================================== */
:root {
  --blue: #133951;          /* accent: Gibraltar Sea */
  --steel: #939097;         /* Silver Shadow */
  --ice: #f2f2f4;
  --paper: #f7f7f9;
  --text: #191b20;
  --text-muted: #6d6a72;
  --text-faint: #939097;
}

::selection { background: #133951; color: #fff; }

/* accent surfaces */
.btn-fill-light, .hero .btn-fill-light { background: #133951; border-color: #133951; color: #fff; }
.btn-fill-light:hover, .hero .btn-fill-light:hover { background: #1b4a70; border-color: #1b4a70; color: #fff; }
.btn-fill-dark { background: #133951; border-color: #133951; }
.btn-fill-dark:hover { background: #0d2a3f; color: #fff; border-color: #0d2a3f; }
.btn-dark { border-color: rgba(19, 57, 81, 0.45); color: #133951; }
.btn-dark:hover { background: #133951; border-color: #133951; color: #fff; }

.work-info .cat, .work-link { color: #133951; }
.work-link::after { background: #133951; }
.service li::before { background: #939097; }

/* deep-sea dark sections */
.services, .service, .contact, .case-hero, .nav-solid {
  background: linear-gradient(172deg, #0a1420 0%, #0e2437 55%, #133951 100%);
}
.service { background: transparent; }
.service:hover { background: rgba(19, 57, 81, 0.55); }
.services { background: linear-gradient(172deg, #0a1420 0%, #0e2437 60%, #123249 100%); }
.footer { background: #081019; }
.nav.scrolled { background: rgba(247, 247, 249, 0.8); }
.nav-solid { background: rgba(10, 20, 32, 0.88); }

/* liquid-chrome surname */
.hero-name em {
  background: linear-gradient(105deg, #a4a2a9 0%, #eef0f3 28%, #8f8c95 52%, #dcdce1 74%, #939097 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.contact-mail { color: #c5c4ca; }
.contact-mail:hover { color: #ffffff; }

.hero-scroll::after { background: linear-gradient(#939097, transparent); }

/* ---------- name in Gibraltar Sea + silver glint on hover ---------- */
.hero-name, .hero-name em {
  background-image: linear-gradient(
    110deg,
    #133951 0%, #133951 40%,
    #eceef1 50%, #96939b 55%, #dcdce1 58%,
    #133951 68%, #133951 100%
  );
  background-size: 320% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  cursor: default;
}

.hero-name:hover, .hero-name:hover em {
  animation: nameShine 1.15s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes nameShine {
  from { background-position: 100% 0; }
  to   { background-position: 0% 0; }
}

/* secondary hero button visible on light surface */
.hero .btn-light { border-color: rgba(25, 27, 32, 0.28); color: var(--text); }
.hero .btn-light:hover { background: #133951; border-color: #133951; color: #fff; }

/* surname back to liquid silver; blue + shimmer stays on the first name */
.hero-name em {
  background-image: linear-gradient(105deg, #a4a2a9 0%, #eef0f3 28%, #8f8c95 52%, #dcdce1 74%, #939097 100%);
  background-size: 100% 100%;
  background-position: 0 0;
}

.hero-name:hover em { animation: none; }

/* ---------- slow letter-by-letter silver sparkle ---------- */
.hero-name:hover, .hero-name:hover em { animation: none; } /* replace the single sweep */

.hero-name .lt { color: transparent; }

.hero-name:hover .lt {
  animation: letterShine 1.8s ease-in-out both;
  animation-delay: calc(var(--i) * 0.12s);
}

@keyframes letterShine {
  0%   { color: transparent; }
  35%  { color: #f0f1f4; }
  55%  { color: #b9b8bf; }
  100% { color: transparent; }
}

/* keep descenders (g, y, j) inside the clipped background area */
.hero-name {
  line-height: 1.16;
  padding-bottom: 0.14em;
  margin-bottom: -0.1em;
}

/* =====================================================
   VARIANT C — "Blue July" silk edition
   Pantone #AABECD · silvery satin calm · Outfit type
   Narcissus mark in the wordmark.
   ===================================================== */
:root {
  --font-display: "Outfit", sans-serif;
  --font-body: "Outfit", sans-serif;
  --blue: #46617c;             /* deep Blue July for accents */
  --steel: #8fa0b0;
  --ice: #eef2f6;
  --mist: #eef2f6;
  --paper: #f5f7fa;
  --text: #26303b;
  --text-muted: #5d6b7a;
  --text-faint: #8fa0b0;
}

::selection { background: #46617c; color: #fff; }

/* wordmark with narcissus mark */
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; }
.wordmark .mark { width: 25px; height: 25px; flex: 0 0 auto; }

/* headings a touch lighter — Outfit reads elegant at 500 */
.display, .hero-name, .work-info h3, .service h3, .contact h2,
.case-nav .t, .outcome .o-title, .case-content h3 {
  font-weight: 500;
  letter-spacing: -0.015em;
}

/* hero: satin sheen — soft diagonal silk folds in Blue July */
.hero {
  background:
    radial-gradient(90% 70% at 18% 6%, rgba(255, 255, 255, 0.75) 0%, transparent 55%),
    radial-gradient(70% 55% at 85% 30%, rgba(255, 255, 255, 0.35) 0%, transparent 60%),
    linear-gradient(115deg, #eef2f6 0%, #d5dfe8 30%, #aabecd 58%, #c2d0dc 78%, #9db3c4 100%);
}

/* name: deep blue july first name, silver silk surname */
.hero-name, .hero-name em {
  background-image: linear-gradient(
    110deg,
    #46617c 0%, #46617c 40%,
    #f2f4f7 50%, #93a4b3 55%, #dde5eb 58%,
    #46617c 68%, #46617c 100%
  );
  background-size: 320% 100%;
  background-position: 100% 0;
}

.hero-name em {
  background-image: linear-gradient(105deg, #aab6c1 0%, #f2f5f8 28%, #8d9dab 52%, #dde4ea 74%, #9fb2c2 100%);
  background-size: 100% 100%;
}

.hero-sub { color: #46617c; }
.hero .eyebrow { color: #5d6b7a; }

/* buttons in deep blue july */
.btn-fill-light, .hero .btn-fill-light, .btn-fill-dark { background: #46617c; border-color: #46617c; color: #fff; }
.btn-fill-light:hover, .hero .btn-fill-light:hover, .btn-fill-dark:hover { background: #56718c; border-color: #56718c; color: #fff; }
.btn-dark { border-color: rgba(70, 97, 124, 0.45); color: #46617c; }
.btn-dark:hover { background: #46617c; border-color: #46617c; color: #fff; }
.hero .btn-light { border-color: rgba(38, 48, 59, 0.26); color: #26303b; }
.hero .btn-light:hover { background: #46617c; border-color: #46617c; color: #fff; }

.work-info .cat, .work-link { color: #46617c; }
.work-link::after { background: #46617c; }
.service li::before { background: #aabecd; }

/* dark sections: dusk-blue satin */
.services { background: linear-gradient(168deg, #232d38 0%, #2f3d4c 55%, #3d5064 100%); }
.service { background: transparent; }
.service:hover { background: rgba(170, 190, 205, 0.1); }
.contact { background: linear-gradient(168deg, #232d38 0%, #2f3d4c 55%, #46617c 100%); }
.case-hero { background: linear-gradient(168deg, #232d38 0%, #2f3d4c 55%, #3d5064 100%); }
.nav-solid { background: rgba(35, 45, 56, 0.88); }
.nav.scrolled { background: rgba(245, 247, 250, 0.8); }
.footer { background: #1d252e; color: #8fa0b0; }

.contact-mail { color: #aabecd; }
.contact-mail:hover { color: #ffffff; }
.hero-scroll::after { background: linear-gradient(#8fa0b0, transparent); }

/* work section on silk-white */
.work { background: #fff; }
.fit-spilk { background: linear-gradient(160deg, #221430 0%, #2c1a40 100%); }
.cover-navy { background: linear-gradient(160deg, #2a3644 0%, #3d5064 70%, #56718c 100%); }
.cover-ice { background: linear-gradient(160deg, #eef2f6 0%, #d5dfe8 60%, #aabecd 100%); color: #2f3d4c; }

/* surname silver: a touch deeper so it stays legible on the satin sheen */
.hero-name em {
  background-image: linear-gradient(105deg, #7f92a3 0%, #e6ebf0 30%, #6e8093 55%, #cfd9e2 78%, #7f92a3 100%);
}

/* =====================================================
   VARIANT C — "narsha" type edition
   Thin rounded monoline display (Comfortaa Light),
   lowercase identity. Spilk backdrop joins the silk family.
   ===================================================== */
:root { --font-display: "Comfortaa", sans-serif; }

.display, .hero-name, .work-info h3, .service h3, .contact h2,
.case-nav .t, .outcome .o-title, .case-content h3 {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: 0.01em;
}

/* identity in calm lowercase, narsha-style */
.wordmark span { text-transform: lowercase; font-family: var(--font-display); font-weight: 400; letter-spacing: 0.04em; }
.hero-name { text-transform: lowercase; font-size: clamp(2.5rem, 6vw, 5.2rem); }

/* headings breathe a little more with the rounded type */
.hero h1, .section-head h2, .contact h2 { line-height: 1.18; }

/* spilk card backdrop matches the silk family */
.fit-spilk { background: linear-gradient(160deg, #eef2f6 0%, #d5dfe8 60%, #aabecd 100%); }

/* surname: deeper graphite-silver — darker than the sheen, distinct from the blue */
.hero-name em {
  background-image: linear-gradient(105deg, #5c6873 0%, #c2ccd4 30%, #4e5a66 55%, #aeb9c2 78%, #5c6873 100%);
}

/* all case study cards share the same size */
.work-item, .work-item:nth-child(even) { grid-template-columns: 1fr 1fr; }

@media (max-width: 960px) {
  .work-item, .work-item:nth-child(even) { grid-template-columns: 1fr; }
}

/* ---------- silk-in-the-breeze: light drifting across the hero ---------- */
.hero::before, .hero::after {
  content: "";
  display: block;
  position: absolute;
  inset: -30%;
  opacity: 1;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}

.hero::before {
  background:
    radial-gradient(42% 58% at 30% 38%, rgba(255, 255, 255, 0.55) 0%, transparent 70%),
    radial-gradient(48% 62% at 74% 62%, rgba(143, 168, 189, 0.42) 0%, transparent 72%);
  filter: blur(34px);
  animation: silkDriftA 19s ease-in-out infinite alternate;
}

.hero::after {
  background:
    radial-gradient(38% 52% at 70% 24%, rgba(170, 190, 205, 0.48) 0%, transparent 70%),
    radial-gradient(34% 48% at 24% 76%, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
  filter: blur(40px);
  animation: silkDriftB 26s ease-in-out infinite alternate;
}

@keyframes silkDriftA {
  from { transform: translate3d(-4%, -2%, 0) rotate(-2deg) scale(1); }
  to   { transform: translate3d(5%, 3%, 0) rotate(2.5deg) scale(1.07); }
}

@keyframes silkDriftB {
  from { transform: translate3d(4%, 2.5%, 0) rotate(2deg) scale(1.05); }
  to   { transform: translate3d(-5%, -3%, 0) rotate(-2.2deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after { animation: none; }
}

/* ---------- surname as glass letters: thin blue outline, drifting pearl fill ---------- */
.hero-name em {
  -webkit-text-stroke: 1.3px rgba(70, 97, 124, 0.85);
  background-image: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0.75) 0%,
    rgba(170, 190, 205, 0.28) 30%,
    rgba(255, 255, 255, 0.65) 52%,
    rgba(143, 168, 189, 0.3) 74%,
    rgba(255, 255, 255, 0.7) 100%
  );
  background-size: 230% 100%;
  background-position: 0% 0;
  animation: pearlDrift 14s ease-in-out infinite alternate;
}

@keyframes pearlDrift {
  from { background-position: 0% 0; }
  to   { background-position: 100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-name em { animation: none; }
}

/* ---------- deeper silk: stronger shadows so the moving light reads ---------- */
.hero {
  background:
    radial-gradient(90% 70% at 18% 6%, rgba(255, 255, 255, 0.7) 0%, transparent 55%),
    linear-gradient(115deg, #e6ecf2 0%, #c3d1dd 26%, #93abbf 52%, #b7c7d4 72%, #7e97ad 100%);
}

/* drifting layers: light AND shadow moving together, like folds in fabric */
.hero::before {
  background:
    radial-gradient(42% 58% at 28% 36%, rgba(255, 255, 255, 0.8) 0%, transparent 68%),
    radial-gradient(50% 64% at 76% 64%, rgba(70, 97, 124, 0.42) 0%, transparent 70%);
  filter: blur(38px);
}

.hero::after {
  background:
    radial-gradient(40% 55% at 72% 22%, rgba(93, 118, 141, 0.5) 0%, transparent 68%),
    radial-gradient(36% 50% at 22% 78%, rgba(255, 255, 255, 0.7) 0%, transparent 68%),
    radial-gradient(30% 44% at 50% 50%, rgba(70, 97, 124, 0.25) 0%, transparent 70%);
  filter: blur(44px);
}

/* wider, still unhurried sweep */
@keyframes silkDriftA {
  from { transform: translate3d(-7%, -4%, 0) rotate(-3deg) scale(1); }
  to   { transform: translate3d(8%, 5%, 0) rotate(3.5deg) scale(1.1); }
}

@keyframes silkDriftB {
  from { transform: translate3d(7%, 4%, 0) rotate(3deg) scale(1.08); }
  to   { transform: translate3d(-8%, -5%, 0) rotate(-3.2deg) scale(1); }
}

/* =====================================================
   Surname pressed into the silk (embossed), and
   light/dark silk bands slowly trading places.
   ===================================================== */

/* --- surname: debossed in the fabric --- */
.hero-name em {
  -webkit-text-stroke: 0;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: rgba(84, 106, 128, 0.6);
  text-shadow:
    0 1px 1px rgba(255, 255, 255, 0.8),
    0 2px 6px rgba(255, 255, 255, 0.25),
    0 -1px 1px rgba(43, 61, 79, 0.3);
  animation: none;
}

.hero-name em .lt { color: inherit; }

/* --- silk curtain: wide soft bands drifting across, swapping zones --- */
.hero::before {
  inset: -25% -65%;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0)   0%,
    rgba(255, 255, 255, 0.7) 9%,
    rgba(126, 151, 173, 0.5) 20%,
    rgba(255, 255, 255, 0.15) 30%,
    rgba(70, 97, 124, 0.42)  41%,
    rgba(255, 255, 255, 0.75) 53%,
    rgba(147, 171, 191, 0.45) 65%,
    rgba(255, 255, 255, 0.2) 76%,
    rgba(94, 118, 141, 0.48) 87%,
    rgba(255, 255, 255, 0.55) 100%
  );
  filter: blur(46px);
  animation: curtainSway 34s ease-in-out infinite alternate;
}

.hero::after {
  background:
    radial-gradient(36% 50% at 70% 26%, rgba(255, 255, 255, 0.55) 0%, transparent 68%),
    radial-gradient(32% 46% at 26% 72%, rgba(70, 97, 124, 0.3) 0%, transparent 70%);
  filter: blur(48px);
  animation: silkDriftB 26s ease-in-out infinite alternate;
}

@keyframes curtainSway {
  0%   { transform: translate3d(-9%, 0, 0) rotate(-1.5deg) scaleY(1); }
  50%  { transform: translate3d(0%, 1.5%, 0) rotate(0.5deg) scaleY(1.05); }
  100% { transform: translate3d(9%, -1%, 0) rotate(1.8deg) scaleY(1); }
}

/* =====================================================
   Etheral Shadow — ported from the React component
   (feTurbulence + rotating hue + displacement), tinted
   to the Blue July silk palette.
   ===================================================== */
.etheral {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.etheral-shadow {
  position: absolute;
  inset: -100px;
  background-color: rgba(70, 97, 124, 0.6);
  -webkit-mask-image: url("../assets/etheral-mask.png");
  mask-image: url("../assets/etheral-mask.png");
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  filter: url(#etheral-filter) blur(4px);
}

.etheral-noise {
  position: absolute;
  inset: 0;
  background-image: url("../assets/etheral-noise.png");
  background-size: 240px;
  background-repeat: repeat;
  opacity: 0.4;
}

/* the etheral layer replaces the band/glow pseudo layers */
.hero::before, .hero::after { display: none; }

/* calmer base so the smoke shadows carry the scene */
.hero {
  background:
    radial-gradient(90% 70% at 20% 8%, rgba(255, 255, 255, 0.65) 0%, transparent 55%),
    linear-gradient(115deg, #ecf1f5 0%, #ccd8e3 40%, #a4bac9 75%, #93abbf 100%);
}

/* ---------- name in Italiana: thin high-fashion serif ---------- */
.hero-name {
  font-family: "Italiana", serif;
  font-weight: 400;
  text-transform: none;
  font-size: clamp(2.9rem, 7.2vw, 6.4rem);
  letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: reduce) {
  .etheral-shadow { filter: none; opacity: 0.35; }
}

/* refine: silk-fine noise, softer shadow ink */
.etheral-noise { opacity: 0.1; background-size: 340px; }
.etheral-shadow { background-color: rgba(70, 97, 124, 0.5); }

/* silver letter shimmer only on the first name */
.hero-name:hover em .lt { animation: none; }

/* logo type matches the hero name (Italiana) */
.wordmark span {
  font-family: "Italiana", serif;
  font-weight: 400;
  text-transform: none;
  font-size: 1.45rem;
  letter-spacing: 0.09em;
}

/* stacked lockup: surname drops to its own line, slightly to the right */
.hero-name em {
  display: block;
  margin-top: 0.06em;
  transform: translateX(clamp(24px, 7vw, 110px));
}
/* name and surname side by side on one line */
.hero-name em {
  display: inline;
  margin: 0;
  transform: none;
}

/* keep the same shadow composition at every viewport size (stretch, not cover) */
.etheral-shadow {
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* ---------- always-visible base shadows + animated layer on top ---------- */
/* the SVG-filtered layer can weaken on large screens; this static twin
   guarantees the composition reads at every size */
.etheral-shadow.etheral-static {
  filter: blur(9px);
  background-color: rgba(70, 97, 124, 0.44);
  animation: staticBreath 22s ease-in-out infinite alternate;
}

.etheral-shadow:not(.etheral-static) {
  background-color: rgba(70, 97, 124, 0.32);
}

@keyframes staticBreath {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to   { transform: translate3d(1.5%, 1%, 0) scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .etheral-shadow.etheral-static { animation: none; }
}

/* =====================================================
   Unified elegant typography
   Italiana — every heading, matching the hero name
   Jost    — body, labels, UI: light, airy, easy to read
   ===================================================== */
:root {
  --font-display: "Italiana", serif;
  --font-label: "Jost", sans-serif;
  --font-body: "Jost", sans-serif;
}

body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 17px;
  letter-spacing: 0.01em;
}

strong { font-weight: 500; }

/* headings all in Italiana (single 400 weight) */
.display, .hero-name, .work-info h3, .service h3, .contact h2,
.case-nav .t, .outcome .o-title, .case-content h3,
.section-head h2, .about-text h2, .intro h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.015em;
  line-height: 1.18;
}

/* labels: airy letterspaced Jost instead of mono */
.eyebrow, .work-info .cat, .case-grid h2, .case-meta .k,
.skill-col h4, .cover-sub, .hero-scroll {
  font-family: var(--font-label);
  font-weight: 400;
}

.eyebrow { letter-spacing: 0.34em; font-size: 0.74rem; }

/* numerals join the serif family */
.work-info .num, .service .s-num, .step .p-num {
  font-family: var(--font-display);
  font-size: 1rem;
}

/* buttons & nav: calm Jost */
.btn { font-family: var(--font-body); font-weight: 400; letter-spacing: 0.06em; }
.nav-links a { font-weight: 400; }

/* body copy: slightly larger, relaxed rhythm — easy on the eyes */
.work-info p, .service > p, .case-content p, .about-text p, .hero-sub {
  font-weight: 300;
  line-height: 1.75;
}

/* =====================================================
   Guaranteed silk folds: painted into the base hero
   background itself — visible even if the mask image
   or SVG filter ever fails to load.
   ===================================================== */
.hero {
  background:
    /* soft diagonal fold shadows */
    linear-gradient(118deg,
      rgba(70, 97, 124, 0)    0%,
      rgba(70, 97, 124, 0.22) 8%,
      rgba(255, 255, 255, 0.35) 16%,
      rgba(70, 97, 124, 0.16) 27%,
      rgba(255, 255, 255, 0.3) 38%,
      rgba(70, 97, 124, 0.26) 52%,
      rgba(255, 255, 255, 0.4) 66%,
      rgba(70, 97, 124, 0.18) 78%,
      rgba(255, 255, 255, 0.28) 90%,
      rgba(70, 97, 124, 0.22) 100%),
    radial-gradient(90% 70% at 20% 8%, rgba(255, 255, 255, 0.6) 0%, transparent 55%),
    linear-gradient(115deg, #e9eef3 0%, #c7d4df 40%, #9fb5c5 75%, #8ea6b9 100%);
}

/* stronger static shadow layer */
.etheral-shadow.etheral-static { background-color: rgba(60, 86, 112, 0.52); }

/* =====================================================
   Bordeaux whispers (#401F28) — a few quiet touches
   ===================================================== */
.wordmark .mark { color: #401f28; }
.eyebrow::before { background: #5a2c38; opacity: 0.8; }
.work-info .cat { color: #5a2c38; }
.work-info .num, .service .s-num, .step .p-num { color: #7a4a56; }

/* =====================================================
   Crumpled silk in motion — two interfering fold layers
   in the powder-blue / cream palette, slowly gathering
   and releasing like fabric.
   ===================================================== */
.hero::before, .hero::after {
  content: "";
  display: block;
  position: absolute;
  inset: -22%;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}

.hero::before {
  background: repeating-linear-gradient(115deg,
    rgba(94, 118, 141, 0)    0px,
    rgba(94, 118, 141, 0.3)  70px,
    rgba(233, 226, 218, 0.42) 150px,
    rgba(181, 197, 212, 0.28) 225px,
    rgba(255, 255, 255, 0.38) 300px,
    rgba(94, 118, 141, 0)    380px);
  filter: blur(24px);
  animation: crumpleA 15s ease-in-out infinite alternate;
}

.hero::after {
  background: repeating-linear-gradient(78deg,
    rgba(70, 97, 124, 0)     0px,
    rgba(255, 255, 255, 0.3) 90px,
    rgba(70, 97, 124, 0.24)  190px,
    rgba(233, 226, 218, 0.3) 280px,
    rgba(70, 97, 124, 0)     370px);
  filter: blur(32px);
  animation: crumpleB 22s ease-in-out infinite alternate;
}

@keyframes crumpleA {
  0%   { transform: translate3d(-4%, -2%, 0) skewX(-3deg) scaleX(1); }
  50%  { transform: translate3d(1%, 1.5%, 0) skewX(1.5deg) scaleX(1.06); }
  100% { transform: translate3d(4.5%, 2.5%, 0) skewX(3deg) scaleX(0.97); }
}

@keyframes crumpleB {
  0%   { transform: translate3d(4%, 2%, 0) skewX(2.5deg) scaleY(1.04); }
  50%  { transform: translate3d(-1%, -1%, 0) skewX(-1deg) scaleY(0.99); }
  100% { transform: translate3d(-4.5%, -2.5%, 0) skewX(-3deg) scaleY(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after { animation: none; }
}

/* =====================================================
   NS monogram — thin ring seal, Italiana letters
   ===================================================== */
.mark-ns {
  font-family: "Italiana", serif;
  font-weight: 400;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border: 1px solid rgba(64, 31, 40, 0.75);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.98rem;
  letter-spacing: 0.08em;
  text-indent: 0.08em; /* optical centering */
  color: #401f28;
  padding-top: 1px;
  transition: background 0.3s ease, color 0.3s ease;
}

.wordmark:hover .mark-ns { background: #401f28; color: #f5f7fa; }

/* on dark surfaces (case pages, scrolled nav) the seal turns cream */
.nav-solid .mark-ns, .nav.scrolled .mark-ns {
  border-color: rgba(233, 226, 218, 0.6);
  color: #e9e2da;
}
.nav-solid .wordmark:hover .mark-ns, .nav.scrolled .wordmark:hover .mark-ns {
  background: #e9e2da;
  color: #401f28;
}

/* bordeaux retired — accents return to deep Blue July */
.wordmark .mark { color: inherit; }
.eyebrow::before { background: currentColor; opacity: 0.5; }
.work-info .cat { color: #46617c; }
.work-info .num, .service .s-num, .step .p-num { color: #46617c; }
.services .s-num, .services .p-num, .step .p-num { color: #8fa0b0; }

.mark-ns { border-color: rgba(70, 97, 124, 0.7); color: #46617c; }
.wordmark:hover .mark-ns { background: #46617c; color: #f5f7fa; }
.nav-solid .mark-ns, .nav.scrolled .mark-ns { border-color: rgba(233, 231, 226, 0.55); color: #e9ecef; }
.nav-solid .wordmark:hover .mark-ns, .nav.scrolled .wordmark:hover .mark-ns { background: #e9ecef; color: #2f3d4c; }

/* crumple motion: wider travel, brisker (still calm) rhythm */
.hero::before { animation-duration: 11s; }
.hero::after { animation-duration: 16s; }

@keyframes crumpleA {
  0%   { transform: translate3d(-8%, -3.5%, 0) skewX(-4deg) scaleX(1); }
  50%  { transform: translate3d(2%, 2%, 0) skewX(2deg) scaleX(1.08); }
  100% { transform: translate3d(8%, 4%, 0) skewX(4.5deg) scaleX(0.95); }
}

@keyframes crumpleB {
  0%   { transform: translate3d(7.5%, 3.5%, 0) skewX(3.5deg) scaleY(1.06); }
  50%  { transform: translate3d(-2%, -1.5%, 0) skewX(-1.5deg) scaleY(0.98); }
  100% { transform: translate3d(-8%, -4%, 0) skewX(-4.5deg) scaleY(1.07); }
}

/* let the moving folds read above the static shadow */
.hero::before, .hero::after { z-index: 1; opacity: 0.95; }
.etheral { z-index: 0; }

/* =====================================================
   Bordeaux as a full accent system (#401F28)
   quiet warmth threaded through the cold silk
   ===================================================== */
::selection { background: #401f28; color: #f5efe8; }

/* monogram */
.mark-ns { border-color: rgba(64, 31, 40, 0.75); color: #401f28; }
.wordmark:hover .mark-ns { background: #401f28; color: #f5efe8; }

/* primary buttons — deep bordeaux fill */
.btn-fill-light, .hero .btn-fill-light, .btn-fill-dark {
  background: #401f28;
  border-color: #401f28;
  color: #f2e9e2;
}
.btn-fill-light:hover, .hero .btn-fill-light:hover, .btn-fill-dark:hover {
  background: #5a2c38;
  border-color: #5a2c38;
  color: #fff;
}

/* secondary buttons flirt with wine on hover */
.hero .btn-light:hover, .btn-dark:hover { background: #401f28; border-color: #401f28; color: #f2e9e2; }
.btn-dark { border-color: rgba(64, 31, 40, 0.4); color: #401f28; }

/* links & labels */
.work-link { color: #5a2c38; }
.work-link::after { background: #5a2c38; }
.work-info .cat { color: #5a2c38; }
.work-info .num, .service .s-num, .step .p-num { color: #7a4a56; }
.eyebrow::before { background: #5a2c38; opacity: 0.8; }
.case-grid h2, .skill-col h4 { color: #7a4a56; }

/* small marks on dark sections stay legible: soft rosewood */
.services .s-num, .services .p-num, .step .p-num { color: #c9a3ab; }
.service li::before { background: #c9a3ab; }

/* contact email warms on hover */
.contact-mail:hover { color: #e8c9cf; }

/* footer link hover */
.footer a:hover { color: #d9b3ba; }

/* =====================================================
   Surname in bordeaux (embossed silk kept) +
   logo reduced to a refined double-ring NS seal
   ===================================================== */
.hero-name em {
  color: rgba(64, 31, 40, 0.68);
  text-shadow:
    0 1px 1px rgba(255, 255, 255, 0.75),
    0 2px 6px rgba(255, 255, 255, 0.2),
    0 -1px 1px rgba(32, 12, 17, 0.35);
}

/* wordmark: seal only, no text */
.wordmark span { display: none; }

.mark-ns {
  width: 46px;
  height: 46px;
  font-size: 1.2rem;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  border: 1px solid rgba(64, 31, 40, 0.8);
  outline: 1px solid rgba(64, 31, 40, 0.3);
  outline-offset: 3.5px;
  transition: background 0.35s ease, color 0.35s ease, outline-color 0.35s ease;
}

.wordmark:hover .mark-ns { outline-color: rgba(64, 31, 40, 0.6); }

.nav-solid .mark-ns, .nav.scrolled .mark-ns {
  outline-color: rgba(233, 226, 218, 0.3);
}
.nav-solid .wordmark:hover .mark-ns, .nav.scrolled .wordmark:hover .mark-ns {
  outline-color: rgba(233, 226, 218, 0.6);
}

/* scrolled nav is light-frosted here — the seal stays bordeaux on it */
.nav.scrolled .mark-ns {
  border-color: rgba(64, 31, 40, 0.8);
  outline-color: rgba(64, 31, 40, 0.3);
  color: #401f28;
}
.nav.scrolled .wordmark:hover .mark-ns {
  background: #401f28;
  color: #f5efe8;
  outline-color: rgba(64, 31, 40, 0.6);
}

/* hide only the wordmark text — never the seal itself */
.wordmark span.mark-ns { display: inline-flex; }
.wordmark span:not(.mark-ns) { display: none; }

/* =====================================================
   Richer cherry-wine bordeaux (#6E1B2F family)
   surname, seal, buttons, and the main headings
   ===================================================== */

/* surname: vivid wine, still pressed into the silk */
.hero-name em {
  color: rgba(110, 27, 47, 0.82);
  text-shadow:
    0 1px 1px rgba(255, 255, 255, 0.65),
    0 2px 6px rgba(255, 255, 255, 0.18),
    0 -1px 1px rgba(46, 8, 18, 0.35);
}

/* seal */
.mark-ns { border-color: rgba(110, 27, 47, 0.85); outline-color: rgba(110, 27, 47, 0.32); color: #6e1b2f; }
.wordmark:hover .mark-ns { background: #6e1b2f; color: #f5ebe9; outline-color: rgba(110, 27, 47, 0.6); }
.nav.scrolled .mark-ns { border-color: rgba(110, 27, 47, 0.85); outline-color: rgba(110, 27, 47, 0.32); color: #6e1b2f; }
.nav.scrolled .wordmark:hover .mark-ns { background: #6e1b2f; color: #f5ebe9; }

/* buttons in the same wine */
.btn-fill-light, .hero .btn-fill-light, .btn-fill-dark { background: #5e1a2b; border-color: #5e1a2b; }
.btn-fill-light:hover, .hero .btn-fill-light:hover, .btn-fill-dark:hover { background: #74222f; border-color: #74222f; }
.hero .btn-light:hover, .btn-dark:hover { background: #5e1a2b; border-color: #5e1a2b; }

/* main headings on light sections — deep wine */
.section-head h2, .intro h2, .about-text h2 { color: #521626; }
.work-info h3 { color: #521626; }

/* headings on dark sections — soft blush so they stay readable */
.services .section-head h2, .contact h2 { color: #e6c6cd; }
.case-hero h1 { color: #e6c6cd; }

/* =====================================================
   TRIAL: Deep Forest Green accent system
   Nargiz #5F708B · Safaraliyeva #2F5D50 · hover #23473D
   ===================================================== */
::selection { background: #2f5d50; color: #eef5f2; }

/* first name: calm blue-gray */
.hero-name {
  background-image: linear-gradient(
    110deg,
    #5f708b 0%, #5f708b 40%,
    #f2f4f7 50%, #93a4b3 55%, #dde5eb 58%,
    #5f708b 68%, #5f708b 100%
  );
}

/* surname: deep forest green, pressed into the silk */
.hero-name em {
  color: rgba(47, 93, 80, 0.85);
  text-shadow:
    0 1px 1px rgba(255, 255, 255, 0.65),
    0 2px 6px rgba(255, 255, 255, 0.18),
    0 -1px 1px rgba(14, 34, 28, 0.35);
}

/* primary buttons */
.btn-fill-light, .hero .btn-fill-light, .btn-fill-dark { background: #2f5d50; border-color: #2f5d50; color: #eef5f2; }
.btn-fill-light:hover, .hero .btn-fill-light:hover, .btn-fill-dark:hover { background: #23473d; border-color: #23473d; color: #fff; }
.hero .btn-light:hover, .btn-dark:hover { background: #2f5d50; border-color: #2f5d50; color: #eef5f2; }
.btn-dark { border-color: rgba(47, 93, 80, 0.45); color: #2f5d50; }

/* seal follows the accent */
.mark-ns, .nav.scrolled .mark-ns { border-color: rgba(47, 93, 80, 0.85); outline-color: rgba(47, 93, 80, 0.32); color: #2f5d50; }
.wordmark:hover .mark-ns, .nav.scrolled .wordmark:hover .mark-ns { background: #2f5d50; color: #eef5f2; outline-color: rgba(47, 93, 80, 0.6); }

/* links, labels, numerals */
.work-link { color: #2f5d50; }
.work-link::after { background: #2f5d50; }
.work-info .cat { color: #33604f; }
.work-info .num, .service .s-num, .step .p-num { color: #4a7566; }
.eyebrow::before { background: #2f5d50; }
.case-grid h2, .skill-col h4 { color: #4a7566; }

/* headings: deep green on light, soft sage on dark */
.section-head h2, .intro h2, .about-text h2, .work-info h3 { color: #23473d; }
.services .section-head h2, .contact h2, .case-hero h1 { color: #cfe0d8; }

/* dark-section small marks: sage */
.services .s-num, .services .p-num, .step .p-num { color: #a8c5bb; }
.service li::before { background: #a8c5bb; }
.contact-mail:hover { color: #cfe0d8; }
.footer a:hover { color: #a8c5bb; }

/* =====================================================
   TRIAL: Dark Plum accent system
   Nargiz #697B94 · Safaraliyeva #5A3A52 · hover #462C40
   ===================================================== */
::selection { background: #5a3a52; color: #f3edf1; }

.hero-name {
  background-image: linear-gradient(
    110deg,
    #697b94 0%, #697b94 40%,
    #f2f4f7 50%, #98a6b8 55%, #dde5eb 58%,
    #697b94 68%, #697b94 100%
  );
}

.hero-name em {
  color: rgba(90, 58, 82, 0.86);
  text-shadow:
    0 1px 1px rgba(255, 255, 255, 0.65),
    0 2px 6px rgba(255, 255, 255, 0.18),
    0 -1px 1px rgba(35, 18, 31, 0.35);
}

.btn-fill-light, .hero .btn-fill-light, .btn-fill-dark { background: #5a3a52; border-color: #5a3a52; color: #f3edf1; }
.btn-fill-light:hover, .hero .btn-fill-light:hover, .btn-fill-dark:hover { background: #462c40; border-color: #462c40; color: #fff; }
.hero .btn-light:hover, .btn-dark:hover { background: #5a3a52; border-color: #5a3a52; color: #f3edf1; }
.btn-dark { border-color: rgba(90, 58, 82, 0.45); color: #5a3a52; }

.mark-ns, .nav.scrolled .mark-ns { border-color: rgba(90, 58, 82, 0.85); outline-color: rgba(90, 58, 82, 0.32); color: #5a3a52; }
.wordmark:hover .mark-ns, .nav.scrolled .wordmark:hover .mark-ns { background: #5a3a52; color: #f3edf1; outline-color: rgba(90, 58, 82, 0.6); }

.work-link { color: #5a3a52; }
.work-link::after { background: #5a3a52; }
.work-info .cat { color: #5f4058; }
.work-info .num, .service .s-num, .step .p-num { color: #7c5a73; }
.eyebrow::before { background: #5a3a52; }
.case-grid h2, .skill-col h4 { color: #7c5a73; }

.section-head h2, .intro h2, .about-text h2, .work-info h3 { color: #462c40; }
.services .section-head h2, .contact h2, .case-hero h1 { color: #ddc9d8; }

.services .s-num, .services .p-num, .step .p-num { color: #c3a8bc; }
.service li::before { background: #c3a8bc; }
.contact-mail:hover { color: #ddc9d8; }
.footer a:hover { color: #c3a8bc; }

/* =====================================================
   Hero layout: editorial left composition
   name staircase left · copy bottom-left · CTAs right
   ===================================================== */
.hero { text-align: left; }

.hero-inner {
  display: block;
  padding-top: 170px;
  padding-bottom: 120px;
}

.hero .eyebrow {
  justify-content: flex-start;
  color: var(--text-faint);
}

.hero .eyebrow::before {
  display: block;
  width: 44px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

/* staircase: roman first name, italic surname stepping right */
.hero-name {
  display: block;
  text-align: left;
  font-size: clamp(2.9rem, 7.4vw, 6.2rem);
}

.hero-name em {
  display: block;
  font-style: italic;
  margin-top: 0.02em;
  margin-left: 1.3em;
}

/* bottom row: copy left, buttons right */
.hero-foot {
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-top: clamp(48px, 8vh, 90px);
}

.hero-sub {
  text-align: left;
  max-width: 38ch;
  margin: 0;
}

/* rectangular editorial buttons */
.hero .btn {
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.8rem;
  padding: 19px 38px;
}

@media (max-width: 860px) {
  .hero-foot { flex-direction: column; align-items: flex-start; gap: 30px; }
  .hero-name em { margin-left: 0.7em; }
}

/* =====================================================
   Back to the centered hero — with a subtle dynamic
   offset: first name nudged left, surname nudged down,
   copy and buttons stacked right under the name.
   ===================================================== */
.hero { text-align: center; }

.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 150px;
  padding-bottom: 110px;
}

.hero .eyebrow { justify-content: center; }
.hero .eyebrow::before { display: none; }

.hero-name {
  display: inline-block;
  text-align: center;
  font-size: clamp(2.5rem, 6vw, 5.2rem);
}

/* the dynamic nudge */
.hero-name > .lt { position: relative; left: -26px; }
.hero-name em {
  display: inline-block;
  font-style: normal;
  margin: 0;
  transform: translateY(0.1em);
}

/* copy + buttons centered right under the name */
.hero-foot {
  flex-direction: column;
  align-items: center;
  gap: 30px;
  margin-top: clamp(34px, 5vh, 56px);
}

.hero-sub { text-align: center; max-width: 46ch; }

/* buttons back to soft pills */
.hero .btn {
  border-radius: 980px;
  text-transform: none;
  letter-spacing: 0.06em;
  font-size: 0.95rem;
  padding: 15px 32px;
}

@media (max-width: 640px) {
  .hero-name > .lt { left: -10px; }
}

/* fix: margin-based nudge — position:relative broke background-clip glyph paint */
.hero-name > .lt { position: static; left: auto; }
.hero-name > .lt:first-child { margin-left: -26px; }
.hero-name em { margin-left: 26px; }

@media (max-width: 640px) {
  .hero-name > .lt:first-child { margin-left: -10px; }
  .hero-name em { margin-left: 10px; }
}

/* final nudge approach: shift the whole h1 box left (background travels with it),
   widen the word gap so the surname stays put — no glyph ever leaves the paint box */
.hero-name { margin-left: -26px; }
.hero-name > .lt:first-child { margin-left: 0; }

@media (max-width: 640px) {
  .hero-name { margin-left: -10px; }
  .hero-name > .lt:first-child { margin-left: 0; }
}

/* name and surname back on the same baseline, no offsets */
.hero-name { margin-left: 0; }
.hero-name em { transform: none; margin-left: 0; }

/* readable eyebrow and scroll label on the silk */
.hero .eyebrow { color: #46566a; }

.hero-scroll { color: #4f5f70; font-weight: 400; }
.hero-scroll::after { background: linear-gradient(#4f5f70, transparent); }

/* =====================================================
   Satin gloss: sharp specular ridges gliding over the
   folds — the organza-shine from the reference.
   ===================================================== */
.etheral-gloss {
  position: absolute;
  inset: -20%;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.85;
  background:
    repeating-linear-gradient(112deg,
      transparent 0px, transparent 110px,
      rgba(255, 255, 255, 0.25) 128px,
      rgba(255, 255, 255, 0.85) 140px,
      rgba(255, 255, 255, 0.3) 152px,
      transparent 170px, transparent 300px),
    repeating-linear-gradient(74deg,
      transparent 0px, transparent 200px,
      rgba(255, 255, 255, 0.2) 220px,
      rgba(255, 255, 255, 0.55) 230px,
      rgba(255, 255, 255, 0.18) 240px,
      transparent 260px, transparent 460px);
  filter: blur(7px);
  animation: glossGlide 13s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes glossGlide {
  0%   { transform: translate3d(-5%, -2%, 0) skewX(-2deg); }
  100% { transform: translate3d(5%, 2.5%, 0) skewX(2.5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .etheral-gloss { animation: none; }
}

/* =====================================================
   Gloss v2 — chaotic: scattered single streaks, varied
   angles / widths / brightness, two desynced layers
   ===================================================== */
.etheral-gloss {
  background:
    linear-gradient(104deg, transparent 43%, rgba(255,255,255,0.8) 50%, transparent 57%) no-repeat 6% 0 / 34% 100%,
    linear-gradient(121deg, transparent 46%, rgba(255,255,255,0.45) 50%, transparent 54%) no-repeat 38% 0 / 52% 100%,
    linear-gradient(93deg,  transparent 47.5%, rgba(255,255,255,0.9) 50%, transparent 52.5%) no-repeat 71% 0 / 16% 100%,
    linear-gradient(132deg, transparent 41%, rgba(255,255,255,0.3) 50%, transparent 59%) no-repeat 84% 0 / 46% 100%,
    linear-gradient(86deg,  transparent 48%, rgba(255,255,255,0.55) 50%, transparent 52%) no-repeat 22% 0 / 12% 100%;
  animation-duration: 17s;
}

/* second, slower counter-drifting layer breaks any symmetry */
.etheral-gloss::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(112deg, transparent 45%, rgba(255,255,255,0.5) 50%, transparent 55%) no-repeat 52% 0 / 26% 100%,
    linear-gradient(98deg,  transparent 42%, rgba(255,255,255,0.35) 50%, transparent 58%) no-repeat 12% 0 / 58% 100%,
    linear-gradient(126deg, transparent 47%, rgba(255,255,255,0.7) 50%, transparent 53%) no-repeat 92% 0 / 14% 100%;
  animation: glossGlideB 23s ease-in-out infinite alternate;
}

@keyframes glossGlideB {
  0%   { transform: translate3d(6%, 2%, 0) skewX(3deg) scaleX(1.06); }
  100% { transform: translate3d(-6%, -2.5%, 0) skewX(-2deg) scaleX(0.97); }
}

@media (prefers-reduced-motion: reduce) {
  .etheral-gloss::after { animation: none; }
}

/* bend the gloss: run the streaks through the turbulence filter
   so no reflection is ever a dead-straight line */
.etheral-gloss {
  filter: url(#etheral-filter) blur(5px);
}

/* gloss experiment retired — back to the calm silk */
.etheral-gloss, .etheral-gloss::after { display: none; animation: none; }

/* =====================================================
   Gloss returns — the two loudest streaks removed,
   no turbulence warp, just soft drifting sheen
   ===================================================== */
.etheral-gloss, .etheral-gloss::after { display: block; }

.etheral-gloss {
  filter: blur(9px);
  opacity: 0.75;
  background:
    linear-gradient(121deg, transparent 46%, rgba(255,255,255,0.42) 50%, transparent 54%) no-repeat 38% 0 / 52% 100%,
    linear-gradient(132deg, transparent 41%, rgba(255,255,255,0.3) 50%, transparent 59%) no-repeat 84% 0 / 46% 100%,
    linear-gradient(86deg,  transparent 47%, rgba(255,255,255,0.5) 50%, transparent 53%) no-repeat 22% 0 / 14% 100%;
  animation: glossGlide 17s ease-in-out infinite alternate;
}

.etheral-gloss::after {
  animation: glossGlideB 23s ease-in-out infinite alternate;
  background:
    linear-gradient(112deg, transparent 45%, rgba(255,255,255,0.42) 50%, transparent 55%) no-repeat 52% 0 / 26% 100%,
    linear-gradient(98deg,  transparent 42%, rgba(255,255,255,0.32) 50%, transparent 58%) no-repeat 12% 0 / 58% 100%,
    linear-gradient(126deg, transparent 46%, rgba(255,255,255,0.4) 50%, transparent 54%) no-repeat 92% 0 / 18% 100%;
}

/* =====================================================
   Gloss, now scattered: odd angles, partial heights,
   uneven positions — soft but unruly
   ===================================================== */
.etheral-gloss {
  background:
    linear-gradient(63deg,  transparent 44%, rgba(255,255,255,0.38) 50%, transparent 56%) no-repeat 8% 78% / 34% 72%,
    linear-gradient(118deg, transparent 46%, rgba(255,255,255,0.44) 50%, transparent 54%) no-repeat 41% 6% / 47% 88%,
    linear-gradient(141deg, transparent 40%, rgba(255,255,255,0.28) 50%, transparent 60%) no-repeat 87% 30% / 41% 64%,
    linear-gradient(97deg,  transparent 47%, rgba(255,255,255,0.5) 50%, transparent 53%) no-repeat 19% 12% / 11% 95%;
}

.etheral-gloss::after {
  background:
    linear-gradient(79deg,  transparent 45%, rgba(255,255,255,0.4) 50%, transparent 55%) no-repeat 63% 88% / 24% 58%,
    linear-gradient(108deg, transparent 42%, rgba(255,255,255,0.3) 50%, transparent 58%) no-repeat 5% 40% / 56% 76%,
    linear-gradient(130deg, transparent 46%, rgba(255,255,255,0.42) 50%, transparent 54%) no-repeat 96% 66% / 17% 83%,
    linear-gradient(71deg,  transparent 44%, rgba(255,255,255,0.26) 50%, transparent 56%) no-repeat 74% 4% / 30% 52%;
  animation-delay: -9s;
}

@keyframes glossGlide {
  0%   { transform: translate3d(-5%, -2%, 0) rotate(-1.6deg) skewX(-2deg); }
  100% { transform: translate3d(5%, 2.5%, 0) rotate(1.2deg) skewX(2.5deg); }
}

@keyframes glossGlideB {
  0%   { transform: translate3d(6%, 3%, 0) rotate(1.8deg) scaleX(1.07); }
  100% { transform: translate3d(-6.5%, -2.5%, 0) rotate(-1.4deg) scaleX(0.96); }
}

/* fixed-width streaks: same density on every screen, no spreading */
.etheral-gloss {
  background:
    linear-gradient(63deg,  transparent 44%, rgba(255,255,255,0.38) 50%, transparent 56%) no-repeat 8% 78% / 430px 72%,
    linear-gradient(118deg, transparent 46%, rgba(255,255,255,0.44) 50%, transparent 54%) no-repeat 41% 6% / 580px 88%,
    linear-gradient(141deg, transparent 40%, rgba(255,255,255,0.28) 50%, transparent 60%) no-repeat 87% 30% / 510px 64%,
    linear-gradient(97deg,  transparent 47%, rgba(255,255,255,0.5) 50%, transparent 53%) no-repeat 19% 12% / 150px 95%;
}

.etheral-gloss::after {
  background:
    linear-gradient(79deg,  transparent 45%, rgba(255,255,255,0.4) 50%, transparent 55%) no-repeat 63% 88% / 310px 58%,
    linear-gradient(108deg, transparent 42%, rgba(255,255,255,0.3) 50%, transparent 58%) no-repeat 5% 40% / 690px 76%,
    linear-gradient(130deg, transparent 46%, rgba(255,255,255,0.42) 50%, transparent 54%) no-repeat 96% 66% / 220px 83%,
    linear-gradient(71deg,  transparent 44%, rgba(255,255,255,0.26) 50%, transparent 56%) no-repeat 74% 4% / 380px 52%;
}

/* =====================================================
   Renderer-proof depth: strengthen the layers every
   browser draws identically (plain blur + gradients),
   lean less on the SVG-filtered layer
   ===================================================== */

/* static mask shadows carry more weight */
.etheral-shadow.etheral-static { background-color: rgba(52, 76, 100, 0.62); filter: blur(8px); }

/* SVG-filtered layer becomes a light bonus only */
.etheral-shadow:not(.etheral-static) { background-color: rgba(70, 97, 124, 0.22); }

/* crumple folds a touch deeper */
.hero::before { opacity: 1; }
.hero::after { opacity: 1; }

/* gloss slightly brighter so it reads on every panel */
.etheral-gloss { opacity: 0.9; }

/* =====================================================
   Content halo: a soft light veil behind the hero copy —
   identical in every renderer, keeps text readable over
   the moving silk on any machine
   ===================================================== */
.hero-inner { position: relative; }

.hero-inner::before {
  content: "";
  position: absolute;
  inset: -6% -14%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(56% 60% at 50% 46%,
    rgba(248, 250, 253, 0.72) 0%,
    rgba(248, 250, 253, 0.38) 55%,
    transparent 78%);
}

/* firmer copy colors on top of the veil */
.hero-sub { color: #3e4e60; }
.hero .eyebrow { color: #3e4e60; }

/* deeper creases: darker static shadows, higher fold contrast */
.etheral-shadow.etheral-static { background-color: rgba(40, 62, 86, 0.72); }

.hero::before { filter: blur(24px) contrast(1.14); }
.hero::after  { filter: blur(32px) contrast(1.12); }

/* =====================================================
   Determinism pass: drop the SVG-filtered layer (renders
   differently across machines); recreate its softness
   with plain gaussian blur that every browser draws
   identically.
   ===================================================== */
.etheral-shadow:not(.etheral-static) { display: none; }

.etheral-shadow.etheral-static {
  filter: blur(24px);
  background-color: rgba(44, 68, 92, 0.66);
}

/* =====================================================
   FINAL EQUALIZER: the silk is now a pre-rendered image
   — pixel-identical on every machine and browser.
   Motion stays as light gradient layers on top.
   ===================================================== */
.hero {
  background: #dfe6ec url("../assets/hero-silk.jpg") center / cover no-repeat;
}

/* live-rendered layers retired — their look is baked into the image */
.etheral-shadow, .etheral-gloss { display: none !important; }

/* gentle motion overlays remain (plain gradients, deterministic) */
.hero::before { opacity: 0.55; }
.hero::after { opacity: 0.5; }

/* =====================================================
   Living sheen over the baked silk + glassmorphism
   ===================================================== */

/* crumple motion more present over the image */
.hero::before { opacity: 0.85; }
.hero::after { opacity: 0.72; }

/* soft travelling light, screen-blended over the folds */
.etheral-gloss {
  display: block !important;
  opacity: 0.5;
  filter: blur(26px);
}

/* ---------- glass surfaces ---------- */
/* frosted nav bar once scrolled */
.nav.scrolled {
  background: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 8px 24px rgba(44, 68, 92, 0.08);
}

/* secondary hero button becomes a glass pill */
.hero .btn-light {
  background: rgba(255, 255, 255, 0.32);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-color: rgba(255, 255, 255, 0.65);
  color: #2e3b49;
}
.hero .btn-light:hover {
  background: #5a3a52;
  border-color: #5a3a52;
  color: #f3edf1;
}

/* project tag pills: frosted */
.tag {
  background: rgba(255, 255, 255, 0.38);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-color: rgba(255, 255, 255, 0.6);
}

/* case-study meta block: glass card on the dark hero */
.case-meta {
  background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  padding: 28px;
  border-radius: 18px;
}

/* =====================================================
   v31: bare NS wordmark (no circle) · always-on gentle
   name shimmer · blue-tinted travelling sheen
   ===================================================== */

/* logo: just the letters, no ring */
.mark-ns {
  border: 0;
  outline: none;
  border-radius: 0;
  width: auto;
  height: auto;
  padding: 0;
  font-size: 1.6rem;
  letter-spacing: 0.16em;
  text-indent: 0;
  transition: color 0.3s ease, opacity 0.3s ease;
}

.wordmark:hover .mark-ns { background: none; color: #2e3b49; }
.nav.scrolled .wordmark:hover .mark-ns, .nav-solid .wordmark:hover .mark-ns { background: none; }
.nav-solid .mark-ns { color: #e9e2da; }
.nav.scrolled .mark-ns { color: #5a3a52; }

/* name shimmer: permanent, slow, quiet — no hover needed */
.hero-name > .lt {
  animation: letterGlint 7.5s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.28s);
}

.hero-name:hover > .lt { animation-name: letterGlint; } /* hover changes nothing */
.hero-name em .lt { animation: none !important; }

@keyframes letterGlint {
  0%   { color: transparent; }
  5%   { color: rgba(226, 233, 240, 0.9); }
  11%  { color: transparent; }
  100% { color: transparent; }
}

/* travelling sheen tinted pale blue */
.etheral-gloss {
  background:
    linear-gradient(63deg,  transparent 44%, rgba(186, 212, 240, 0.5) 50%, transparent 56%) no-repeat 8% 78% / 430px 72%,
    linear-gradient(118deg, transparent 46%, rgba(200, 222, 244, 0.55) 50%, transparent 54%) no-repeat 41% 6% / 580px 88%,
    linear-gradient(141deg, transparent 40%, rgba(180, 208, 238, 0.4) 50%, transparent 60%) no-repeat 87% 30% / 510px 64%,
    linear-gradient(97deg,  transparent 47%, rgba(214, 231, 248, 0.6) 50%, transparent 53%) no-repeat 19% 12% / 150px 95%;
}

.etheral-gloss::after {
  background:
    linear-gradient(79deg,  transparent 45%, rgba(190, 214, 240, 0.5) 50%, transparent 55%) no-repeat 63% 88% / 310px 58%,
    linear-gradient(108deg, transparent 42%, rgba(178, 206, 236, 0.4) 50%, transparent 58%) no-repeat 5% 40% / 690px 76%,
    linear-gradient(130deg, transparent 46%, rgba(206, 226, 246, 0.52) 50%, transparent 54%) no-repeat 96% 66% / 220px 83%,
    linear-gradient(71deg,  transparent 44%, rgba(184, 210, 238, 0.36) 50%, transparent 56%) no-repeat 74% 4% / 380px 52%;
}

@media (prefers-reduced-motion: reduce) {
  .hero-name > .lt { animation: none; }
}

/* surname: lighter presence — thin like the first name */
.hero-name em {
  color: rgba(90, 58, 82, 0.76);
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

/* surname: true regular weight — no synthetic bold */
.hero-name em { font-weight: 400; }

/* =====================================================
   v35: legible small copy · glint flows through the
   surname too · N·S wordmark
   ===================================================== */

/* --- readability: small texts no longer washed out --- */
:root {
  --text-muted: #48545f;
  --text-faint: #66727e;
}

.work-info p, .service > p, .case-content p, .about-text p,
.step p, .outcome p, .aside-note, .intro-fact .k,
.case-meta .k, .case-figure figcaption, .eyebrow {
  font-weight: 400;
}

.case-grid h2, .skill-col h4 { color: #63465c; }
.work-info .num, .service .s-num, .step .p-num { color: #63465c; }

.service > p, .step p { color: #b9c4ce; }
.services .s-num, .services .p-num, .step .p-num { color: #cbb3c4; }
.case-meta .v { color: #e6ebf0; }
.case-meta .k { color: #aeb9c4; }
.footer { color: #a9b2bb; }

/* --- glint continues across the surname (its own resting color) --- */
.hero-name em .lt {
  animation: letterGlintEm 7.5s ease-in-out infinite !important;
  animation-delay: calc(var(--i) * 0.28s) !important;
}

@keyframes letterGlintEm {
  0%   { color: rgba(90, 58, 82, 0.76); }
  5%   { color: rgba(226, 233, 240, 0.95); }
  11%  { color: rgba(90, 58, 82, 0.76); }
  100% { color: rgba(90, 58, 82, 0.76); }
}

/* --- N·S dot --- */
.mark-dot {
  font-style: normal;
  font-size: 0.55em;
  opacity: 0.75;
  margin: 0 0.1em;
  vertical-align: 0.14em;
}

@media (prefers-reduced-motion: reduce) {
  .hero-name em .lt { animation: none !important; }
}

/* hero buttons: equal width, centered content */
.hero-actions .btn {
  min-width: 232px;
  justify-content: center;
}

/* faster glint: shorter cycle, tighter wave */
.hero-name > .lt {
  animation-duration: 4.2s;
  animation-delay: calc(var(--i) * 0.15s);
}

.hero-name em .lt {
  animation-duration: 4.2s !important;
  animation-delay: calc(var(--i) * 0.15s) !important;
}

/* =====================================================
   Live browser mock — a real screen recording framed
   as if it were open in a Safari/Chrome window.
   ===================================================== */
.walkthrough { display: grid; gap: clamp(56px, 8vw, 96px); margin-top: clamp(40px, 6vw, 64px); }

.walkthrough-item { display: grid; gap: clamp(24px, 4vw, 40px); }

.walkthrough-item .case-content { max-width: none; }

.browser-mock {
  border-radius: 18px;
  overflow: hidden;
  background: #eef0f3;
  box-shadow: 0 30px 70px -20px rgba(20, 20, 30, 0.35), 0 2px 8px rgba(20, 20, 30, 0.08);
  border: 1px solid rgba(20, 20, 30, 0.06);
}

.browser-mock-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 20px;
  background: linear-gradient(#fbfbfc, #f2f3f5);
  border-bottom: 1px solid rgba(20, 20, 30, 0.08);
}

.browser-mock-dots { display: flex; gap: 8px; flex: 0 0 auto; }

.browser-mock-dots span {
  width: 12px; height: 12px; border-radius: 50%; display: block;
}

.browser-mock-dots span:nth-child(1) { background: #ff5f57; }
.browser-mock-dots span:nth-child(2) { background: #ffbd2e; }
.browser-mock-dots span:nth-child(3) { background: #28c93f; }

.browser-mock-url {
  flex: 1 1 auto;
  background: #fff;
  border: 1px solid rgba(20, 20, 30, 0.1);
  border-radius: 980px;
  padding: 7px 18px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: #6b7078;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 420px;
}

.browser-mock-url svg { width: 13px; height: 13px; flex: 0 0 auto; opacity: 0.65; }

.browser-mock video {
  display: block;
  width: 100%;
  height: auto;
  background: #eef0f3;
}

@media (max-width: 640px) {
  .browser-mock-url { max-width: 220px; font-size: 0.72rem; }
  .browser-mock-bar { padding: 10px 14px; gap: 12px; }
  .browser-mock-dots span { width: 10px; height: 10px; }
}

/* =====================================================
   Deep case-study components — audit screenshots,
   before/after comparisons, score cards, code, placeholders.
   ===================================================== */
.audit-shot {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px -20px rgba(20, 20, 30, 0.3);
  border: 1px solid rgba(20, 20, 30, 0.08);
  margin-top: clamp(24px, 4vw, 32px);
}
.audit-shot img { display: block; width: 100%; height: auto; }
.audit-shot figcaption {
  padding: 12px 18px;
  font-size: 0.82rem;
  color: var(--text-muted);
  background: #fff;
  border-top: 1px solid rgba(20, 20, 30, 0.06);
}

.audit-findings { display: grid; gap: 13px; margin-top: clamp(20px, 3vw, 28px); }
.audit-findings li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 0.95rem; line-height: 1.6; color: var(--text-body, var(--ink));
}
.audit-findings li::before { content: "—"; color: #5a3a52; flex: 0 0 auto; }

.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 3vw, 28px);
  margin-top: clamp(24px, 4vw, 36px);
}
.compare-card { padding: clamp(20px, 3vw, 28px); border-radius: 14px; }
.compare-card.before { background: rgba(163, 80, 80, 0.06); border: 1px solid rgba(163, 80, 80, 0.16); }
.compare-card.after { background: rgba(90, 58, 82, 0.06); border: 1px solid rgba(90, 58, 82, 0.18); }
.compare-card h4 {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em;
  margin-bottom: 14px; font-family: var(--font-body);
}
.compare-card.before h4 { color: #a35050; }
.compare-card.after h4 { color: #5a3a52; }
.compare-card ul { display: grid; gap: 9px; }
.compare-card li { font-size: 0.9rem; line-height: 1.55; padding-left: 20px; position: relative; }
.compare-card.before li::before { content: "✕"; position: absolute; left: 0; top: 0.1em; color: #a35050; font-size: 0.75rem; }
.compare-card.after li::before { content: "✓"; position: absolute; left: 0; top: 0.1em; color: #5a3a52; font-size: 0.75rem; }
@media (max-width: 720px) { .compare-grid { grid-template-columns: 1fr; } }

.score-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: clamp(24px, 4vw, 36px);
}
.score-card {
  text-align: center;
  padding: 22px 10px;
  border-radius: 14px;
  background: rgba(90, 58, 82, 0.05);
  border: 1px solid rgba(90, 58, 82, 0.12);
}
.score-card .num { font-family: var(--font-display); font-size: 2.1rem; line-height: 1; }
.score-card .num.good { color: #3f7a4f; }
.score-card .num.mid { color: #b5842b; }
.score-card .num.poor { color: #a35050; }
.score-card .lbl { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.6; margin-top: 8px; }
.score-note { font-size: 0.85rem; color: var(--text-muted); margin-top: 16px; line-height: 1.6; max-width: 60ch; }
@media (max-width: 640px) { .score-grid { grid-template-columns: repeat(2, 1fr); } }

.code-block {
  margin-top: clamp(24px, 4vw, 32px);
  background: #1d1a22;
  color: #e6e1ea;
  border-radius: 14px;
  padding: clamp(20px, 3vw, 28px);
  overflow-x: auto;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.82rem;
  line-height: 1.7;
  box-shadow: 0 24px 60px -20px rgba(20, 20, 30, 0.35);
}
.code-block pre { margin: 0; white-space: pre; }
.code-block .c-com { color: #8a8398; }
.code-block .c-kw { color: #c896d6; }
.code-block .c-fn { color: #8fc7e8; }
.code-block .c-str { color: #e0b96e; }
.code-caption { font-size: 0.82rem; color: var(--text-muted); margin-top: 12px; }

.placeholder-block {
  border: 1.5px dashed rgba(90, 58, 82, 0.35);
  border-radius: 14px;
  padding: clamp(28px, 5vw, 44px);
  text-align: center;
  background: rgba(90, 58, 82, 0.03);
  margin-top: clamp(24px, 4vw, 32px);
}
.placeholder-block .ph-icon { font-size: 1.6rem; margin-bottom: 10px; opacity: 0.55; }
.placeholder-block .ph-label {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: #5a3a52; margin-bottom: 10px; font-weight: 600;
}
.placeholder-block p { font-size: 0.9rem; color: var(--text-muted); max-width: 520px; margin: 0 auto; line-height: 1.6; }

.pattern-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: clamp(24px, 4vw, 32px);
}
.pattern-card { background: var(--paper); padding: 22px 20px; border-radius: 12px; }
.pattern-card p.p-title { font-family: var(--font-display); font-size: 1rem; margin-bottom: 8px; }
.pattern-card p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.55; }
@media (max-width: 860px) { .pattern-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pattern-grid { grid-template-columns: 1fr; } }