/* Sayway Studio palette: dark cornflower blue and silver accents */
:root {
  --ink: #191a1a;
  --paper: #deddd8;
  --lime: #c5c7c8;
  --line: rgba(25, 26, 26, 0.24);
  --cornflower: #293b83;
  --cornflower-light: #b8c5f1;
  --silver: #c5c7c8;
  --periwinkle: #c5c7c8;
}

/* Brand notes: concrete base, silver details, one controlled blue surface. */
.brand, .brand span { color: var(--ink); }
.eyebrow span { color: var(--cornflower); }
.page-noise { opacity: .05; mix-blend-mode: multiply; }
.intro, .approach, .contact { border-bottom: 1px solid var(--line); }
.intro-copy, .projects, .service-list { position: relative; z-index: 1; }
.hero-art { background: var(--cornflower-light); }
.orb-one { background: #babcbf; }
.orb-two { background: #d7d8d6; }
.image-luma { background: var(--cornflower-light); color: var(--ink); }
.circle-link:hover { background: var(--cornflower); border-color: var(--cornflower); }
.image-label { color: var(--silver); }
.image-vista { box-shadow: inset 0 0 0 1px var(--silver); }
.services {
  position: relative;
  background-color: var(--cornflower);
  color: #f0efea;
}
.services::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .2;
  background-image:
    radial-gradient(ellipse at 12% 20%, rgba(255,255,255,.2), transparent 28%),
    radial-gradient(ellipse at 88% 72%, rgba(0,0,0,.18), transparent 34%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
  background-blend-mode: soft-light, multiply, overlay;
}
.services .section-number, .services .service-list { position: relative; z-index: 1; }
.service { border-color: rgba(240, 239, 234, .28); }
.service:last-child { border-color: rgba(240, 239, 234, .28); }
.statement-stamp { border-color: var(--cornflower); color: var(--cornflower); }
.cursor-dot { background: var(--cornflower); }
.contact-note { margin: 20px 0 0; font: 10px 'DM Mono', monospace; letter-spacing: .2px; }
.approach-intro { display: grid; grid-template-columns: 1fr .42fr; gap: 10vw; margin: 90px 0 70px 17vw; }
.approach-intro p { margin: 0; font-size: clamp(38px, 5.8vw, 87px); letter-spacing: -.065em; line-height: 1.04; }
.approach-intro em { font: 500 1em 'Playfair Display', serif; }
.approach-intro span, .approach-steps p { font-size: 13px; line-height: 1.55; }
.approach-steps { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.approach-steps article { min-height: 220px; padding: 20px 22px 20px 0; border-right: 1px solid var(--line); }
.approach-steps article + article { padding-left: 22px; }
.approach-steps article:last-child { border-right: 0; }
.approach-steps span { font: 10px 'DM Mono', monospace; }
.approach-steps h3 { margin: 53px 0 13px; font-size: 22px; letter-spacing: -.7px; }
.approach-steps p { margin: 0; max-width: 220px; }
@media (max-width: 700px) { .approach-intro { display: block; margin: 65px 0 50px; } .approach-intro span { display: block; margin-top: 30px; max-width: 300px; } .approach-steps { display: block; } .approach-steps article, .approach-steps article + article { min-height: auto; padding: 22px 0; border-right: 0; border-bottom: 1px solid var(--line); } .approach-steps h3 { margin: 28px 0 8px; } }