/* sixtydegrees.ai — marketing site
   Palette: deep-water ink, logo teal, fog text, brass reserved for "a person decides". */
:root {
  --ink: #06181d;        /* page */
  --ink-2: #0a252c;      /* raised surfaces */
  --line: #18404a;       /* rules, tracks */
  --fog: #d6e6e6;        /* body text */
  --mist: #8fb0b2;       /* secondary text */
  --teal: #04e7d3;       /* logo signal */
  --teal-deep: #079bab;  /* logo shade */
  --brass: #e2b25a;      /* human-in-the-loop only */

  --display: "Outfit", system-ui, sans-serif;
  --body: "Hanken Grotesk", system-ui, sans-serif;

  --gutter: clamp(20px, 5vw, 72px);
  --max: 1240px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--fog);
  font: 400 1.0625rem/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; max-width: 62ch; }
h1, h2, h3 { font-family: var(--display); font-weight: 200; margin: 0; letter-spacing: -0.02em; line-height: 1.04; color: #fff; }
h2 { font-size: clamp(2.2rem, 4.6vw, 3.75rem); }
h3 { font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 300; }

:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 2px; }

.skip { position: absolute; left: -999px; top: 8px; background: var(--teal); color: var(--ink); padding: 8px 14px; z-index: 50; }
.skip:focus { left: 8px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* Buttons & links */
.btn {
  display: inline-block;
  font: 500 1rem/1 var(--body);
  text-decoration: none;
  color: var(--ink);
  background: var(--teal);
  padding: 16px 26px;
  border-radius: 999px;
  transition: background .2s, transform .2s;
}
.btn:hover { background: #7ff5ea; }
.btn:active { transform: translateY(1px); }
.btn-small { padding: 11px 18px; font-size: .9375rem; }
.btn-large { padding: 20px 34px; font-size: 1.125rem; }
.link { color: var(--fog); text-underline-offset: 6px; text-decoration-color: var(--teal-deep); }
.link:hover { text-decoration-color: var(--teal); }

/* Nav */
.nav {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  display: flex; align-items: center; gap: 32px;
  padding: 16px var(--gutter);
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.nav.scrolled { border-bottom-color: var(--line); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 300 1.3rem/1 var(--display); color: #fff; letter-spacing: -0.01em; }
.dot-ai { color: var(--teal); }
.nav nav { display: flex; gap: 28px; margin-left: auto; }
.nav nav a { text-decoration: none; color: var(--mist); font-size: .9375rem; }
.nav nav a:hover { color: #fff; }

/* Hero */
.hero {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(48px, 9vh, 110px) var(--gutter) clamp(64px, 12vh, 140px);
  display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: center;
  min-height: calc(100vh - 70px);
}
.hero h1 { font-size: clamp(2.5rem, 4.6vw, 4.25rem); }
.hero h1 span { display: block; text-wrap: balance; }
.hero-mark .sextant { width: 112%; max-width: none; }
.lede { font-size: clamp(1.125rem, 1.5vw, 1.3rem); color: var(--fog); margin: 32px 0 40px; max-width: 34em; }
.hero-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

.hero-mark { position: relative; }
.sextant { width: 100%; overflow: visible; }
.sextant .numerals { fill: #ffffff; color: #ffffff; opacity: .1; }
.sextant .needle { transform-box: view-box; transform-origin: 790px 641px; }
.sextant .hub { filter: drop-shadow(0 0 14px rgba(4, 231, 211, .7)); }

/* One orchestrated load sequence: arcs sweep in, needle swings to sixty, ticks land. */
@media (prefers-reduced-motion: no-preference) {
  .sextant .numerals { animation: numerals 1.6s ease-out both; }
  .sextant .arc { animation: fadeIn .8s ease-out both; }
  .sextant .arc-right { animation-delay: .25s; }
  .sextant .needle { animation: swing 2s cubic-bezier(.2,.9,.25,1.12) .2s both; }
  .sextant .ticks circle { animation: tick .5s ease-out both; }
  .sextant .ticks circle:nth-child(1) { animation-delay: 1.5s; }
  .sextant .ticks circle:nth-child(2) { animation-delay: 1.65s; }
  .sextant .ticks circle:nth-child(3) { animation-delay: 1.8s; }
  .sextant .ticks circle:nth-child(4) { animation-delay: 1.95s; }
  .sextant .ticks circle:nth-child(5) { animation-delay: 2.1s; }
  .sextant .ticks circle:nth-child(6) { animation-delay: 2.25s; }
  .hero-copy > * { animation: rise .9s ease-out both; }
  .hero-copy .lede { animation-delay: .15s; }
  .hero-copy .hero-actions { animation-delay: .3s; }
}
@keyframes numerals { from { opacity: 0; } to { opacity: .1; } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes swing { from { transform: rotate(-78deg); opacity: 0; } 15% { opacity: 1; } to { transform: rotate(0); } }
@keyframes tick { from { opacity: 0; transform: scale(.2); } }
.sextant .ticks circle { transform-box: fill-box; transform-origin: center; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* Drift */
.drift { padding: clamp(80px, 12vw, 160px) 0; border-top: 1px solid var(--line); }
.drift .wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.statement { font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
.drift-body p { font-size: 1.1875rem; }
.drift-body p:last-child { color: #fff; font-weight: 500; }

/* Stark line — the one place type gets very big after the hero */
.stark {
  padding: clamp(80px, 14vw, 200px) var(--gutter);
  background: var(--ink-2);
  border-block: 1px solid var(--line);
}
.stark p {
  max-width: none; margin: 0 auto; max-width: var(--max);
  font: 200 clamp(3rem, 8.4vw, 8rem)/0.98 var(--display);
  letter-spacing: -0.04em; color: #fff;
}
.stark span { color: var(--teal); }

/* Section heads */
.section-head { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: end; margin-bottom: clamp(48px, 7vw, 96px); }
.section-head p { color: var(--mist); font-size: 1.125rem; margin: 0; }

/* GEO pillars */
.geo { padding: clamp(96px, 12vw, 170px) 0; }
.pillar {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px);
  padding: clamp(40px, 5vw, 64px) 0;
  border-top: 1px solid var(--line);
}
.pillar-q { font: 300 1.375rem/1.3 var(--display); color: var(--teal); margin: 12px 0 20px; }
.pillar-visual { margin: 0; align-self: center; }

.guard ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--teal-deep); }
.guard li { position: relative; padding: 14px 0 14px 28px; color: var(--fog); }
.guard li + li { border-top: 1px solid var(--line); }
.guard .g-ok, .guard .g-hold { position: absolute; left: -7px; top: 22px; width: 12px; height: 12px; border-radius: 50%; background: var(--teal); }
.guard li.human { border-top: 1px dashed var(--brass); margin-top: 12px; padding-top: 22px; color: #fff; }
.guard .g-hold { background: var(--brass); top: 30px; }
.guard em { display: block; font-style: normal; color: var(--brass); font-size: .9375rem; margin-top: 4px; }

.record { background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px; padding: 24px 28px; }
.record figcaption { color: var(--mist); font-size: .875rem; margin-bottom: 14px; }
.record dl { margin: 0; }
.record dl div { display: grid; grid-template-columns: 8.5em 1fr; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.record dt { color: var(--mist); font-size: .9375rem; }
.record dd { margin: 0; color: #fff; }
.record dd.done { color: var(--teal); }

.frontier svg { width: 100%; max-width: 440px; }
.frontier .axis { stroke: var(--line); stroke-width: 1.5; fill: none; }
.frontier text { fill: var(--mist); font: 400 12px var(--body); }
.frontier .front { stroke: var(--teal-deep); stroke-width: 2; fill: none; stroke-dasharray: 4 5; }
.frontier .opt circle { fill: var(--line); }
.frontier .pick { fill: var(--teal); }
.frontier .pick-ring { fill: none; stroke: var(--teal); stroke-opacity: .4; }
.frontier figcaption { color: var(--mist); font-size: .9375rem; margin-top: 12px; }

/* Autonomy dial */
.autonomy { padding: clamp(96px, 12vw, 170px) 0; background: var(--ink-2); border-block: 1px solid var(--line); }
.autonomy-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.autonomy h2 { margin-bottom: 24px; }
.autonomy .intro { color: var(--mist); font-size: 1.125rem; }
.field { display: block; color: var(--mist); font-size: .875rem; margin: 28px 0 10px; padding: 0; }
select {
  width: 100%; max-width: 30rem;
  font: 500 1.0625rem var(--body); color: #fff;
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2304e7d3' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") no-repeat right 18px center;
  border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 44px 14px 16px; appearance: none;
}
.levels legend { float: left; width: 100%; }
.levels { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.levels label { cursor: pointer; }
.levels input { position: absolute; opacity: 0; }
.levels span {
  display: inline-block; padding: 10px 15px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--mist); font-size: .9375rem;
  transition: background .2s, color .2s, border-color .2s;
}
.levels label:hover span { color: #fff; border-color: var(--teal-deep); }
.levels input:checked + span { background: var(--teal); border-color: var(--teal); color: var(--ink); font-weight: 600; }
.levels input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 3px; }
.outcome { margin-top: 28px; min-height: 5.2em; font-size: 1.1875rem; color: #fff; border-left: 2px solid var(--teal); padding-left: 18px; }
.outcome.needs-person { border-left-color: var(--brass); }

.dial svg { width: 100%; max-width: 460px; margin-left: auto; overflow: visible; }
.dial-track { fill: none; stroke: var(--line); stroke-width: 18; stroke-linecap: round; }
.dial-fill { fill: none; stroke: var(--teal); stroke-width: 18; stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray .7s cubic-bezier(.3,.8,.3,1); }
.dial-marks circle { fill: var(--ink); stroke: var(--mist); stroke-width: 2; }
.dial-needle { transform-origin: 340px 340px; transition: transform .7s cubic-bezier(.3,1.3,.4,1); }
.dial-needle line { stroke: var(--teal); stroke-width: 5; stroke-linecap: round; }
.dial-needle circle { fill: var(--teal); filter: drop-shadow(0 0 10px rgba(4,231,211,.7)); }
.dial-pivot { fill: #fff; }
.dial.needs-person .dial-needle circle { fill: var(--brass); filter: drop-shadow(0 0 10px rgba(226,178,90,.6)); }
@media (prefers-reduced-motion: reduce) { .dial-fill, .dial-needle { transition: none; } }

/* Platform loop */
.platform { padding: clamp(96px, 12vw, 170px) 0; }
.loop { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); counter-reset: step; position: relative; }
.loop::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: linear-gradient(90deg, var(--teal-deep), var(--teal)); }
.loop li { counter-increment: step; padding: 40px 28px 0 0; position: relative; }
.loop li::before { content: ""; position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); border: 2px solid var(--teal); }
.loop h3 { margin-bottom: 14px; }
.loop h3::before { content: counter(step); display: block; font: 400 .9375rem/1 var(--body); color: var(--teal); margin-bottom: 14px; letter-spacing: 0; }
.loop p { color: var(--mist); }
.loop-return { margin-top: 40px; color: #fff; font-size: 1.125rem; }

/* Formats */
.formats { padding: clamp(80px, 10vw, 140px) 0; border-top: 1px solid var(--line); }
.formats-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.formats h2 { margin-bottom: 24px; }
.formats-grid > div p { color: var(--mist); font-size: 1.125rem; }
.format-cloud { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.format-cloud li { border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; color: var(--fog); font-size: .9375rem; }

/* Company */
.company { padding: clamp(96px, 12vw, 170px) 0; background: var(--ink-2); border-block: 1px solid var(--line); }
.company-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 96px); }
.company p { font-size: 1.1875rem; }
.company strong { color: #fff; font-weight: 600; }
.company p:last-child { color: #fff; }

/* CTA */
.cta { padding: clamp(120px, 16vw, 220px) 0; text-align: center; }
.cta h2 { font-size: clamp(3rem, 8vw, 7rem); margin-bottom: 28px; }
.cta p { margin: 0 auto 44px; color: var(--mist); font-size: 1.1875rem; max-width: 36em; }

/* Footer */
.footer { border-top: 1px solid var(--line); padding: 56px 0 40px; }
.footer-grid { display: grid; grid-template-columns: auto 1fr; gap: 24px 48px; align-items: center; }
.footer-logo { width: 140px; height: auto; }
.footer nav { display: flex; flex-wrap: wrap; gap: 24px; justify-content: flex-end; }
.footer nav a { color: var(--mist); text-decoration: none; font-size: .9375rem; }
.footer nav a:hover { color: #fff; }
.fine { grid-column: 1 / -1; color: var(--mist); font-size: .875rem; margin: 16px 0 0; }

/* Responsive */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-mark { order: -1; max-width: 520px; margin: 0 auto; width: 100%; }
  .hero-mark .sextant { width: 100%; }
  .drift .wrap, .section-head, .pillar, .autonomy-grid, .formats-grid, .company-grid { grid-template-columns: 1fr; }
  .loop { grid-template-columns: 1fr 1fr; row-gap: 48px; }
  .loop::before { display: none; }
  .dial svg { margin: 0 auto; max-width: 340px; }
}
@media (max-width: 720px) {
  .nav { gap: 16px; }
  .nav nav { display: none; }
  .nav .btn-small { margin-left: auto; }
  .loop { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer nav { justify-content: flex-start; }
  .record dl div { grid-template-columns: 1fr; gap: 2px; }
}
@media (max-width: 420px) {
  .brand span { font-size: 1.1rem; }
  .btn-small { padding: 10px 14px; font-size: .875rem; }
}

.dial-label { font: 300 1.5rem/1.2 var(--display); fill: #fff; }
.dial-sub { font: 400 13px var(--body); fill: var(--mist); }

/* Messy data */
.messy { padding: clamp(96px, 12vw, 170px) 0; border-top: 1px solid var(--line); }
.messy h2 { margin-bottom: 24px; }
.messy .formats-grid > div p { color: var(--mist); font-size: 1.125rem; }
.cta .cta-email { margin: 24px auto 0; font-size: 1rem; }
.cta-email span { color: #fff; user-select: all; }

.section-head .geo-words { font: 300 clamp(1.35rem, 2vw, 1.7rem)/1.2 var(--display); color: var(--teal); letter-spacing: -0.01em; }

/* Why: personas + AI assistant comparison */
.why { padding: clamp(96px, 12vw, 170px) 0; }
.personas { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); }
.persona { border-top: 2px solid var(--teal-deep); padding-top: 32px; min-width: 0; }
.persona-q { font: 300 clamp(1.4rem, 2.2vw, 1.85rem)/1.25 var(--display); color: var(--teal); margin: 14px 0 24px; text-wrap: balance; }
.persona p:not(.persona-q) { color: var(--fog); }
.persona p:last-child { color: #fff; }
.versus { margin-top: clamp(80px, 10vw, 140px); }
.versus h3 { max-width: 22ch; text-wrap: balance; }
.versus-lede { color: var(--mist); font-size: 1.125rem; margin: 20px 0 40px; }
.table-scroll { overflow-x: auto; }
.versus table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 1rem; }
.versus th, .versus td { text-align: left; vertical-align: top; padding: 18px 20px 18px 0; border-top: 1px solid var(--line); }
.versus thead th { border-top: 0; font: 500 .9375rem var(--body); color: var(--mist); padding-bottom: 14px; }
.versus thead th:last-child { color: var(--teal); }
.versus tbody th { color: #fff; font-weight: 600; width: 22%; }
.versus tbody td { color: var(--mist); width: 33%; }
.versus tbody td:last-child { color: #fff; width: 45%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 960px) { .personas { grid-template-columns: 1fr; } }