:root {
  --ink: #141516;
  --ink-2: #202224;
  --paper: #f1efe9;
  --muted: #a8a8a5;
  --line: rgba(241, 239, 233, .14);
  --bronze: #c4cbd4;
  --display: "Space Grotesk", "Manrope", Arial, sans-serif;
}

.wordmark { font-family: var(--display); letter-spacing: .23em; font-weight: 600; }
.brand-symbol { position: relative; display: block; flex: 0 0 38px; width: 38px; height: 38px; overflow: hidden; border-radius: 50%; background: #080909; box-shadow: 0 0 0 1px rgba(196,203,212,.55),0 0 24px rgba(196,203,212,.12); }
.brand-symbol img { position: absolute; top: 0; left: -21px; width: 77px; height: auto; max-width: none; }
.wordmark-copy { display: grid; gap: 3px; line-height: 1; }
.wordmark-copy strong { font-size: 16px; letter-spacing: .27em; font-weight: 600; }
.wordmark-copy small { color: #aaa9a2; font: 6px var(--mono); letter-spacing: .15em; white-space: nowrap; }
.footer-wordmark .brand-symbol { flex-basis: 38px; width: 38px; height: 38px; }
.footer-wordmark .wordmark-copy strong { font-size: 15px; }
.hero h1, .section-heading h2, .intro h2, .studio h2, .quote h2 {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -.07em;
}
.hero h1 em, .section-heading h2 em, .intro h2 span, .studio h2 em, .quote h2 em {
  font-family: var(--serif);
  font-weight: 400;
}
.button-primary { background: var(--bronze); color: #151617; }
.service-icon { border-color: rgba(197, 173, 136, .38); }
.hero-art { height: 520px; aspect-ratio: 1.18; border: 1px solid rgba(197,173,136,.24); border-radius: 38px; overflow: hidden; background: #080909; box-shadow: 0 34px 90px rgba(0,0,0,.3),0 0 55px rgba(197,173,136,.07); }
.hero-brand-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: inherit; }

.process-grid article {
  position: relative;
  min-height: 320px;
  padding-top: 20px;
  background: linear-gradient(155deg, rgba(255,255,255,.025), transparent 68%);
}
.process-grid article > span { margin-bottom: 18px; }
.process-grid article > span i { font-size: 8px; letter-spacing: .12em; }
.process-grid h3 { font-family: var(--display); font-weight: 600; }
.process-art {
  height: 96px;
  margin: 0 0 21px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(197,173,136,.2);
  background: linear-gradient(145deg,#242728,#1b1d1f);
  display: grid;
  place-items: center;
  color: var(--bronze);
}
.idea-art::before, .idea-art::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(197,173,136,.28);
  border-radius: 50%;
  width: 66px;
  height: 66px;
}
.idea-art::after { width: 43px; height: 43px; border-style: dashed; opacity: .75; }
.idea-art b { font-size: 28px; font-weight: 400; color: #e0cfb4; z-index: 1; }
.idea-art i { position: absolute; width: 4px; height: 4px; background: var(--bronze); border-radius: 50%; }
.idea-art i:nth-of-type(1) { left: 25%; top: 26%; }
.idea-art i:nth-of-type(2) { right: 24%; top: 31%; }
.idea-art i:nth-of-type(3) { right: 31%; bottom: 20%; }
.design-art {
  background-image: linear-gradient(rgba(197,173,136,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(197,173,136,.08) 1px,transparent 1px);
  background-size: 16px 16px;
}
.wire-cube { position: relative; width: 47px; height: 47px; transform: rotate(30deg) skew(-8deg); border: 1px solid #d6c09b; }
.wire-cube::before, .wire-cube::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(214,192,155,.65); transform: rotate(45deg); }
.wire-cube::after { inset: 15px; transform: rotate(0); }
.design-art > b { position: absolute; right: 12px; bottom: 8px; font: 9px var(--mono); color: #e3d5bd; }
.analysis-art { background: radial-gradient(circle at 50% 50%,rgba(197,173,136,.16),transparent 60%),#1c2021; }
.analysis-ring {
  width: 60px; height: 60px; border-radius: 50%; border: 1px solid rgba(197,173,136,.65);
  background: repeating-conic-gradient(from 0deg,transparent 0 14deg,rgba(196,203,212,.42) 15deg 16deg,transparent 17deg 30deg);
  mask: radial-gradient(circle,transparent 43%,#000 45%);
}
.analysis-art > b { position: absolute; font: 9px var(--mono); letter-spacing: .1em; }
.analysis-art > i { position: absolute; right: 12px; top: 10px; color: #d6c09b; font-style: normal; }
.make-art { background: linear-gradient(135deg,#252729,#181a1b); }
.layer-stack { position: relative; width: 62px; height: 53px; transform: skewY(-18deg); }
.layer-stack i { display: block; height: 8px; margin-bottom: 2px; border: 1px solid #c5ad88; background: linear-gradient(90deg,rgba(197,173,136,.28),transparent); }
.layer-stack i:nth-child(even) { width: 82%; margin-left: 18%; }
.make-art > b { position: absolute; font: italic 20px var(--serif); right: 20px; bottom: 10px; color: #f1dfc2; }

.studio-card {
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at 95% 10%,rgba(197,173,136,.1),transparent 36%),linear-gradient(140deg,#202224,#17191a);
}
.studio-card::after {
  content: "FARIO";
  position: absolute;
  right: -.02em;
  bottom: -.26em;
  font: 600 clamp(120px,22vw,300px)/1 var(--display);
  letter-spacing: .12em;
  color: rgba(241,239,233,.025);
  pointer-events: none;
}
.studio-top, .studio-content, .studio-bottom { position: relative; z-index: 1; }

/* Softer geometry echoes the flowing lattice emblem. */
.site-header { border-bottom-color: rgba(241,239,233,.09); }
.main-nav .nav-cta { border-radius: 999px; padding-inline: 20px; }
.button { border-radius: 999px; padding-inline: 23px; }
.hero-art { border-radius: 38px; }
.intro { border-color: rgba(241,239,233,.1); }
.capability-strip { border-radius: 999px; padding: 18px 26px; border-color: rgba(241,239,233,.12); background: linear-gradient(90deg,rgba(255,255,255,.018),rgba(197,173,136,.035),rgba(255,255,255,.012)); }
.service-list { display: grid; gap: 12px; border: 0; }
.service-row { min-height: 126px; border: 1px solid rgba(241,239,233,.1); border-radius: 24px; padding: 20px 24px; background: linear-gradient(110deg,rgba(255,255,255,.025),rgba(255,255,255,.006)); }
.service-row:hover { padding-inline: 30px; border-color: rgba(196,203,212,.42); background: linear-gradient(110deg,rgba(197,173,136,.09),rgba(255,255,255,.012)); }
.service-icon { border-radius: 50%; width: 48px; height: 48px; }
.process-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; border: 0; }
.process-grid article, .process-grid article + article, .process-grid article:nth-child(3), .process-grid article:nth-child(4) {
  min-height: 314px; padding: 22px; border: 1px solid rgba(241,239,233,.09); border-radius: 28px; background: linear-gradient(155deg,rgba(255,255,255,.035),rgba(255,255,255,.008) 70%);
}
.process-grid article:hover { border-color: rgba(197,173,136,.35); transform: translateY(-3px); transition: transform .25s,border-color .25s; }
.process-art { border-radius: 20px; }
.project-placeholder { border-radius: 32px; border-color: rgba(241,239,233,.1); background: rgba(255,255,255,.012); }
.placeholder-grid { border-radius: 24px; overflow: hidden; }
.studio-card { border-radius: 38px; border-color: rgba(197,173,136,.2); }
.quote-form input:not([type=checkbox]):not([type=file]), .quote-form textarea { border: 1px solid rgba(241,239,233,.13); border-radius: 16px; padding: 14px 17px; background: rgba(255,255,255,.025); }
.upload-field input[type=file] { border-radius: 18px; background: rgba(255,255,255,.018); }
.form-submit { margin-top: 2px; }

@media (max-width: 900px) {
  .hero-art { height: 420px; }
  .process-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .process-grid article, .process-grid article + article, .process-grid article:nth-child(3), .process-grid article:nth-child(4) {
    min-height: 300px; padding: 22px; border: 1px solid rgba(241,239,233,.09); border-radius: 26px;
  }
  .process-grid article { min-height: 340px; }
  .process-grid article:nth-child(3), .process-grid article:nth-child(4) { border-top: 1px solid var(--line); }
}
@media (max-width: 650px) {
  .brand-symbol { flex-basis: 32px; width: 32px; height: 32px; }
  .brand-symbol img { width: 69px; left: -20px; }
  .wordmark-copy strong { font-size: 14px; }
  .wordmark-copy small { font-size: 5px; }
  .process-grid article, .process-grid article + article, .process-grid article:nth-child(3), .process-grid article:nth-child(4) {
    min-height: 0; padding: 20px 0 22px;
  }
  .process-art { height: 112px; margin-bottom: 17px; }
  .process-grid article > span { margin-bottom: 14px; }
  .studio-card::after { font-size: 30vw; right: -.04em; }
  .hero-art { width: 100%; height: auto; aspect-ratio: 1.08; border-radius: 28px; }
  .capability-strip { border-radius: 22px; padding: 16px 18px; }
  .service-row { grid-template-columns: 24px 40px 1fr 14px; gap: 10px; padding: 17px 13px; border-radius: 20px; }
  .service-row:hover { padding-inline: 15px; }
  .service-icon { width: 36px; height: 36px; }
  .process-grid { grid-template-columns: 1fr; gap: 12px; }
  .process-grid article, .process-grid article + article, .process-grid article:nth-child(3), .process-grid article:nth-child(4) { min-height: 0; padding: 19px; border-radius: 24px; border: 1px solid rgba(241,239,233,.09); }
  .process-art { height: 118px; margin-bottom: 17px; border-radius: 18px; }
  .project-placeholder { border-radius: 25px; }
  .placeholder-grid { border-radius: 19px; }
  .studio-card { border-radius: 28px; }
  .quote-form input:not([type=checkbox]):not([type=file]), .quote-form textarea, .upload-field input[type=file] { border-radius: 13px; }
}