@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Italiana&display=swap');

:root { color-scheme: dark; font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; background: #050505; }

/* ponytail: Italiana has one weight only; stroke fakes bold for visibility */
.wordmark, h1, .section h2, .services h3, .proof strong, .project__visual > span, .project__meta h3, .quote > p, .process h3, .process li > span, .contact__link { -webkit-text-stroke: 0.6px currentColor; paint-order: stroke fill; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #050505; color: #f2f0eb; font-weight: 300; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
::selection { background: #22d3ee; color: #050505; }

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 100svh;
  /* pull the video full-bleed up behind the transparent sticky nav */
  margin-top: -4.6rem;
  padding-top: 4.6rem;
  overflow: hidden;
  background: #050505 url("assets/kometa-poster.png?v=2") center bottom / cover no-repeat;
}
.hero__video { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; filter: brightness(.96) contrast(1.04); transition: opacity 2.4s ease-in-out; }
.hero__video[data-hero-b] { opacity: 0; }
.hero__overlay { position: absolute; z-index: -1; inset: 0; background: linear-gradient(to bottom, rgb(5 5 5 / .03) 55%, transparent 78%, #050505 100%), radial-gradient(circle at 50% 48%, transparent 0 24%, rgb(5 5 5 / .1) 58%, rgb(5 5 5 / .24) 100%); pointer-events: none; }

.nav {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  padding: .95rem clamp(1.5rem, 4vw, 4.5rem);
  background: transparent;
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(0px);
}
/* no-JS: transparent over the hero, frosts up once you scroll ~140px.
   Gated so unsupported browsers stay transparent instead of frosted. */
@supports (animation-timeline: scroll()) {
  .nav {
    animation: nav-solidify linear both;
    animation-timeline: scroll(root);
    animation-range: 0 140px;
  }
}
@keyframes nav-solidify {
  to {
    background: rgb(5 5 5 / .55);
    border-bottom-color: rgb(242 240 235 / .08);
    backdrop-filter: blur(18px) saturate(1.2);
  }
}
.wordmark { display: inline-flex; align-items: center; width: max-content; font-family: "Italiana", serif; font-size: 27px; font-weight: 400; line-height: 1; letter-spacing: .01em; white-space: nowrap; text-shadow: 0 0 1px rgb(242 240 235 / .45); }
.nav > .wordmark { grid-column: 1; }
.wordmark__name { color: #f2f0eb; -webkit-text-stroke: .15px currentColor; }
.wordmark__name > span { margin-left: .04em; background: linear-gradient(100deg, #7dd3fc, #e5fbff, #22d3ee, #7dd3fc); background-size: 250% 100%; background-clip: text; color: transparent; animation: shimmer 7s ease-in-out infinite; }
.nav nav { grid-column: 2; display: flex; justify-content: center; gap: .35rem; padding: .25rem; border: 1px solid rgb(242 240 235 / .1); border-radius: 999px; background: rgb(255 255 255 / .03); color: #aeb6b9; font-size: .66rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.nav nav a { position: relative; padding: .5rem .95rem; border-radius: 999px; transition: color .2s ease, background .2s ease; }
.nav nav a:hover { color: #050505; background: linear-gradient(110deg, #7dd3fc, #22d3ee); }
.nav__cta { grid-column: 3; justify-self: end; border: 1px solid #f2f0eb; border-radius: 999px; padding: .8rem 1.25rem; background: #f2f0eb; color: #050505; font-size: .66rem; font-weight: 500; letter-spacing: .08em; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.nav__cta:hover { border-color: #22d3ee; background: #22d3ee; box-shadow: 0 0 2rem rgb(34 211 238 / .24); transform: translateY(-2px); }

.hero__content {
  align-self: center;
  width: min(60rem, 76vw);
  margin: 0 auto;
  padding: clamp(3rem, 7vh, 5rem) 0 clamp(5rem, 10vh, 8rem);
  text-align: center;
}
.eyebrow { margin: 0 0 2.3rem; color: #7dd3fc; font-size: .64rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
h1 { margin: 0; font-family: "Italiana", serif; font-size: clamp(4.5rem, 8.5vw, 8.5rem); font-weight: 400; line-height: .7; letter-spacing: -.055em; }
h1 .line { display: block; white-space: nowrap; }
h1 em { display: inline-block; margin-right: -.14em; padding-right: .14em; background: linear-gradient(90deg, #b9effa, #22d3ee); background-clip: text; color: transparent; font-weight: inherit; }
.subhead { max-width: 25rem; margin: 3rem auto 0; color: #aeb6b9; font-size: clamp(.78rem, 1.1vw, .92rem); font-weight: 300; line-height: 1.7; }
.actions { display: flex; justify-content: center; gap: .75rem; margin-top: 2.5rem; }
.button { display: inline-flex; align-items: center; gap: .8rem; border: 1px solid #22d3ee; border-radius: 999px; padding: .9rem 1.35rem; font-size: .68rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; transition: transform .2s ease, background .2s ease, color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button--solid { background: #22d3ee; color: #050505; }
.button--outline:hover { background: #22d3ee; color: #050505; }
.button--solid { border-color: transparent; background: linear-gradient(110deg, #7dd3fc, #22d3ee, #a5f3fc); background-size: 200% 100%; box-shadow: 0 .8rem 2.5rem rgb(34 211 238 / .14); }
.button--solid:hover { background-position: 100% 0; box-shadow: 0 1rem 3rem rgb(34 211 238 / .25); }
.hero .eyebrow, .hero h1, .hero .subhead, .hero .actions { opacity: 0; animation: rise-in .8s cubic-bezier(.22,.8,.25,1) forwards; }
.hero h1 { animation-delay: .1s; }
.hero .subhead { animation-delay: .22s; }
.hero .actions { animation-delay: .34s; }

.section { padding: clamp(7rem, 12vw, 12rem) clamp(1.5rem, 6vw, 6rem); }
.section > * { width: min(1400px, 100%); margin-left: auto; margin-right: auto; }
.section-label { display: flex; align-items: center; gap: .8rem; margin-top: 0; margin-bottom: 0; color: #7dd3fc; font-size: .64rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.section-label::before { width: 1.6rem; height: 1px; background: #22d3ee; content: ""; }
.section-heading { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(17rem, .55fr); gap: clamp(3rem, 8vw, 9rem); align-items: end; margin-top: 2.5rem; }
.section h2 { margin: 0; font-family: "Italiana", serif; font-size: clamp(3rem, 7vw, 7rem); font-weight: 400; line-height: 1; letter-spacing: -.03em; }
.section-heading > p, .contact > p { margin: 0; color: #989894; font-size: clamp(.95rem, 1.2vw, 1.08rem); font-weight: 300; line-height: 1.8; }

.intro { background: #050505; }
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: clamp(5rem, 9vw, 9rem); overflow: hidden; border: 1px solid #202425; border-radius: 1.25rem; background: #202425; }
.services article { position: relative; min-height: 23rem; overflow: hidden; padding: 2rem; background: linear-gradient(145deg, #0b0d0e, #070808); transition: background .35s ease, transform .35s ease; }
.services article::before { position: absolute; top: -8rem; left: 50%; width: 18rem; height: 14rem; border-radius: 50%; background: rgb(34 211 238 / .12); filter: blur(4rem); opacity: 0; transform: translateX(-50%); transition: opacity .4s ease; content: ""; }
.services article:hover { z-index: 1; background: linear-gradient(145deg, #10191c, #080a0b); transform: translateY(-4px); }
.services article:hover::before { opacity: 1; }
.services span, .process li > span { color: #22d3ee; font-size: .64rem; font-weight: 500; letter-spacing: .14em; }
.services h3 { max-width: 15ch; margin: 7rem 0 1.25rem; font-family: "Italiana", serif; font-size: clamp(1.65rem, 2.3vw, 2.2rem); font-weight: 400; line-height: 1.12; letter-spacing: -.02em; }
.services p, .process li p { max-width: 33ch; margin: 0; color: #8a8a85; font-size: .88rem; font-weight: 300; line-height: 1.75; }
.proof { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 1px; border-bottom: 1px solid #202425; }
.proof div { padding: 3rem 0; }
.proof div + div { padding-left: 3rem; border-left: 1px solid #202425; }
.proof strong { display: block; font-family: "Italiana", serif; font-size: clamp(2.4rem, 4.2vw, 4.2rem); font-weight: 400; line-height: 1; letter-spacing: -.025em; }
.proof span { display: block; margin-top: .65rem; color: #747774; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }

.work { background: #090b0c; }
.work .section-heading { display: block; }
.work .section-label { margin-bottom: 2.5rem; }
.projects { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.5rem, 3vw, 3rem); margin-top: 6rem; }
.project__visual { position: relative; display: flex; align-items: flex-end; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid rgb(125 211 252 / .12); border-radius: 1.2rem; padding: clamp(2rem, 4vw, 4rem); background: #101719; box-shadow: inset 0 1px rgb(255 255 255 / .04); transition: border-color .4s ease, box-shadow .4s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
.project__visual::after { position: absolute; inset: 8% 8% auto auto; width: 42%; aspect-ratio: 1; border: 1px solid rgb(125 211 252 / .18); border-radius: 50%; box-shadow: 0 0 80px rgb(34 211 238 / .1), inset 0 0 50px rgb(125 211 252 / .06); content: ""; }
.project:hover .project__visual { border-color: rgb(125 211 252 / .35); box-shadow: 0 2rem 5rem rgb(0 0 0 / .28), inset 0 1px rgb(255 255 255 / .07); transform: translateY(-6px); }
.project:hover .project__visual::after { animation: orbit-pulse 2.8s ease-in-out infinite; }
.project__visual > span { position: relative; z-index: 1; font-family: "Italiana", serif; font-size: clamp(3rem, 6vw, 6rem); line-height: .84; letter-spacing: -.035em; }
.project__visual small { position: absolute; z-index: 1; top: 1.5rem; left: 1.5rem; border: 1px solid rgb(125 211 252 / .28); border-radius: 999px; padding: .55rem .8rem; color: #a6eafa; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
.project__visual--dentist { background: radial-gradient(circle at 76% 24%, #1d6678, transparent 28%), linear-gradient(140deg, #090c0d, #10262b); }
.project__visual--dentist > span { color: #b6f1ff; }
.project__visual--food { background: radial-gradient(circle at 22% 78%, #165164, transparent 30%), linear-gradient(140deg, #080a0b, #142327); }
.project__visual--food > span { color: #f2f0eb; }
.project__meta { display: flex; justify-content: space-between; gap: 1.5rem; align-items: end; padding: 1.25rem .25rem 0; }
.project__meta span { color: #6f7474; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; }
.project__meta h3 { margin: .45rem 0 0; font-family: "Italiana", serif; font-size: clamp(1.4rem, 2vw, 1.85rem); font-weight: 400; letter-spacing: -.02em; }
.project__meta p { margin: 0; color: #8a8a85; font-size: .7rem; }

.quote { padding: clamp(7rem, 12vw, 12rem) clamp(1.5rem, 10vw, 12rem); background: #d9f6fb; color: #071012; }
.quote > p { max-width: 1100px; margin: 0 auto; font-family: "Italiana", serif; font-size: clamp(2.3rem, 4.5vw, 4.8rem); font-weight: 400; line-height: 1.08; letter-spacing: -.025em; }
.quote footer { display: flex; justify-content: space-between; max-width: 1100px; margin: 3.5rem auto 0; padding-top: 1.5rem; border-top: 1px solid rgb(7 16 18 / .2); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.quote footer small { color: #476064; }

.process { background: #050505; }
.process ol { margin-top: 7rem; margin-bottom: 0; padding: 0; list-style: none; border-top: 1px solid #272a2b; }
.process li { display: grid; grid-template-columns: 5rem 1fr auto; gap: 2rem; align-items: center; border-bottom: 1px solid #272a2b; padding: 2.2rem 0; transition: padding .25s ease, color .25s ease; }
.process li:hover { padding-left: 1rem; color: #a6eafa; }
.process h3 { margin: 0 0 .65rem; color: #f2f0eb; font-family: "Italiana", serif; font-size: clamp(1.9rem, 3vw, 3rem); font-weight: 400; line-height: 1.08; letter-spacing: -.01em; -webkit-text-stroke: .1px currentColor; }
.process li > span { font-family: "Italiana", serif; font-size: .9rem; letter-spacing: .05em; }
.process li p { max-width: 42ch; color: #a0a09b; font-size: .95rem; line-height: 1.7; }
.process li small { color: #6f7474; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; }

.contact { padding-top: clamp(9rem, 15vw, 15rem); padding-bottom: clamp(9rem, 15vw, 15rem); text-align: center; background: radial-gradient(circle at 50% 110%, #15576a 0, #071113 30%, #050505 60%); }
.contact h2 { margin-top: 2.5rem; margin-bottom: 2.5rem; }
.contact > p { max-width: 39rem; margin: 0 auto; }
.contact__links { display: flex; justify-content: center; gap: clamp(1.5rem, 4vw, 4rem); width: max-content; margin: 3rem auto 0; }
.contact__link { display: inline-flex; gap: 1rem; align-items: center; margin-top: 3rem; border-bottom: 1px solid #22d3ee; padding: 0 .1rem .6rem; font-family: "Italiana", serif; font-size: clamp(1.4rem, 2.7vw, 2.4rem); font-weight: 400; letter-spacing: -.02em; transition: color .2s ease; }
.contact__links .contact__link { margin-top: 0; }
.contact__link:hover { color: #7dd3fc; }
.contact > small { display: block; margin: 1rem auto 0; color: #686c6c; font-size: .65rem; letter-spacing: .08em; }

body > footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; border-top: 1px solid #242424; padding: 2rem clamp(1.5rem, 6vw, 6rem); background: #050505; }
body > footer p { margin: 0; color: #737674; font-size: .68rem; font-weight: 300; }
body > footer p:last-child { justify-self: end; }

@keyframes rise-in { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes shimmer { 0%, 35% { background-position: 0 0; } 65%, 100% { background-position: 100% 0; } }
@keyframes orbit-pulse { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }

@supports (animation-timeline: view()) {
  .section-heading, .services, .proof, .projects, .process ol, .quote > p, .contact > * {
    animation: section-reveal linear both;
    animation-range: entry 10% cover 30%;
    animation-timeline: view();
  }
  @keyframes section-reveal { from { opacity: 0; transform: translateY(2.5rem); } to { opacity: 1; transform: translateY(0); } }
}

@media (max-width: 768px) {
  /* no-JS mobile: wordmark + CTA on top row, links wrap onto a second row */
  .nav { grid-template-columns: auto 1fr; row-gap: .55rem; padding: .85rem 1.25rem; }
  .nav > .wordmark { grid-column: 1; }
  .nav__cta { grid-column: 2; padding: .6rem 1rem; }
  .nav nav { display: none; }
  .hero__content { width: 88vw; padding: 4rem 0 5rem; }
  h1 { font-size: clamp(2.9rem, 12vw, 4.8rem); }
  .subhead { max-width: 32rem; }
  .section-heading { grid-template-columns: 1fr; gap: 2rem; }
  .services, .projects, .proof { grid-template-columns: 1fr; }
  .services article { min-height: 20rem; }
  .services h3 { margin-top: 5rem; }
  .proof div { padding: 2rem 0; }
  .proof div + div { padding-left: 0; border-top: 1px solid #202425; border-left: 0; }
  .project__meta { display: block; }
  .project__meta p { margin-top: .5rem; }
  .quote footer { text-align: left; }
  .process li { grid-template-columns: 3rem 1fr; gap: 1rem; }
  .process li > small { grid-column: 2; }
  .contact__links { flex-direction: column; gap: 1.25rem; align-items: center; width: 100%; }
  body > footer { grid-template-columns: 1fr; text-align: center; }
  body > footer .wordmark { margin: 0 auto; }
  body > footer p:last-child { justify-self: auto; }
}

@media (max-height: 700px) and (min-width: 769px) {
  .nav { padding-top: 1rem; padding-bottom: 1rem; }
  .hero__content { padding: 1.5rem 0 2.5rem; }
  .eyebrow { margin-bottom: 1.25rem; }
  h1 { font-size: clamp(3.2rem, 8.5vh, 5rem); line-height: .86; }
  .subhead { margin-top: 1.5rem; }
  .actions { margin-top: 1.5rem; }
}

@media (max-width: 480px) {
  .actions { flex-direction: column; align-items: stretch; padding: 0 1rem; }
  .button { justify-content: center; }
  .section h2 br { display: none; }
  .quote footer { display: grid; gap: .5rem; }
  .contact__link { font-size: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .hero .eyebrow, .hero h1, .hero .subhead, .hero .actions { opacity: 1; }
}