/* Hylton Labs — site styles */

:root {
  --paper: #f4f2ed;
  --paper-2: #ebe8e1;
  --ink: #111214;
  --ink-2: #1b1c1f;
  --ink-soft: #4a4b4f;
  --muted: #6b6a66;
  --line: #d9d5cc;
  --line-dark: #2c2d31;
  --accent: #e4572e;
  --accent-ink: #c4441e;

  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wrap: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  --cut: 12px; /* chamfer size, taken from the logo's 45° cut */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

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

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

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 10px 14px; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- Mono label ---------- */
.label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.label b { color: var(--accent); font-weight: 500; }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--ink); --fg: var(--paper);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  background: var(--bg); color: var(--fg);
  font: 500 15px/1 var(--font);
  text-decoration: none; border: 0; cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
  transition: background-color .2s ease;
}
.btn:hover { --bg: var(--accent); }
.btn--accent { --bg: var(--accent); --fg: #fff; }
.btn--accent:hover { --bg: var(--accent-ink); }
.btn--ghost {
  background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
  clip-path: none;
}
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn .arrow { transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244, 242, 237, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; }
.brand img { height: 26px; width: auto; }

.nav { display: flex; align-items: center; gap: 32px; }
.nav a { font-size: 15px; text-decoration: none; color: var(--ink-soft); }
.nav a:hover { color: var(--ink); }
.nav .btn { color: var(--paper); padding: 12px 18px; font-size: 14px; }

.menu-btn {
  display: none; background: none; border: 0; padding: 8px; margin-right: -8px; cursor: pointer;
}
.menu-btn span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; transition: transform .2s ease, opacity .2s ease; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(56px, 8vw, 112px) clamp(56px, 8vw, 96px); }
.hero h1 {
  font-size: clamp(44px, 7.4vw, 104px);
  letter-spacing: -0.045em;
  line-height: 0.98;
  max-width: 14ch;
}
.hero .lede { margin-top: 24px; font-size: clamp(18px, 1.6vw, 21px); color: var(--ink-soft); max-width: 44ch; }
.hero .lede + .lede { margin-top: 14px; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* Hero layout: copy left, product stack right */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px 64px; align-items: center; }
.hero-grid .hero-title { font-size: clamp(44px, 4.8vw, 72px); max-width: none; }

.hero-visual { position: relative; }
.stack { position: relative; aspect-ratio: 1 / 0.92; }
.stack-item {
  position: absolute; margin: 0; width: 76%;
  filter: drop-shadow(0 1px 0 rgba(17,18,20,.06)) drop-shadow(0 24px 40px rgba(17,18,20,.18));
  animation: stack-in 1.2s var(--ease-out, ease) both;
  animation-delay: calc(450ms + var(--d) * 140ms);
  transition: translate .8s var(--ease-out, ease);
}
.stack-item img {
  display: block; width: 100%; height: auto;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}
.stack-item--back  { top: 0;   right: 0; }
.stack-item--mid   { top: 21%; right: 12%; }
.stack-item--front { top: 42%; left: 0; }
@keyframes stack-in { from { opacity: 0; transform: translateY(40px); } }

.stack-caption { display: inline-block; margin-top: 24px; font-size: 15px; color: var(--ink-soft); text-decoration: none; }
.stack-caption:hover { color: var(--ink); }

.strip {
  border-block: 1px solid var(--line);
}
.strip ul {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px;
  padding-block: 18px;
}

/* ---------- Sections ---------- */
.section { padding-block: clamp(80px, 11vw, 140px); }
.section-head { display: grid; grid-template-columns: 1fr 1.4fr; gap: 24px 64px; align-items: end; margin-bottom: clamp(40px, 6vw, 72px); }
.section-head h2 { font-size: clamp(34px, 4.6vw, 60px); }
.section-head p { color: var(--ink-soft); font-size: 18px; max-width: 52ch; }

/* What we build */
.services { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
.service { padding: 32px 32px 8px 0; }
.service + .service { padding-left: 32px; border-left: 1px solid var(--line); }
.service h3 { font-size: 24px; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 16px; }
.service p { color: var(--ink-soft); font-size: 16px; }
.service p + p { margin-top: 12px; }
.service .examples { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; font-size: 14px; }
.service .examples li { padding-left: 14px; position: relative; color: var(--ink); }
.service .examples li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 6px; height: 6px; background: var(--accent); }

/* Products (dark) */
.section--dark { background: var(--ink); color: var(--paper); }
.section--dark .label { color: #9a9892; }
.section--dark .section-head p { color: #b9b6ae; }

.products { display: grid; gap: 16px; }
.product {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  background: var(--ink-2);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
}
.product-body { padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; }
.product h3 { font-size: clamp(30px, 3.4vw, 44px); }
.product .tagline { margin-top: 10px; color: var(--accent); font-weight: 500; }
.product .desc { margin-top: 20px; color: #c9c6be; max-width: 48ch; }
.product .meta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 20px 48px; padding-top: 20px; border-top: 1px solid var(--line-dark); }
.product .meta dt { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #8a8882; }
.product .meta dd { margin: 4px 0 0; font-size: 15px; }
.product .link { margin-top: auto; padding-top: 32px; }
.product .link a { font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.product .link a:hover { color: var(--accent); }

/* Product screenshot: full image, framed inside the right-hand panel */
.product-visual {
  display: grid; place-items: center;
  min-width: 0;
  padding: clamp(24px, 3vw, 40px);
  background: #1f2023;
}
.product-visual img {
  display: block; width: 100%; max-width: 100%; height: auto; min-width: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 20px 50px rgba(0,0,0,0.45);
  transition: transform .4s ease;
}
@media (prefers-reduced-motion: reduce) {
  .product-visual img { transition: none; }
  .product:hover .product-visual img { transform: none; }
}

/* In the lab */
.lab { border-top: 1px solid var(--ink); }
.lab li {
  display: grid; grid-template-columns: 1fr 1.5fr auto; gap: 24px; align-items: baseline;
  padding-block: 32px; border-bottom: 1px solid var(--line);
}
.lab h3 { font-size: 24px; letter-spacing: -0.02em; line-height: 1.2; }
.lab p { color: var(--ink-soft); }
.tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 10px; border: 1px solid var(--line); color: var(--ink-soft); white-space: nowrap;
}
.tag::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--accent); margin-right: 8px; vertical-align: 1px; }

/* Industries */
.section--tint { background: var(--paper-2); }
.industries { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.industry {
  background: var(--paper); padding: 28px 24px 32px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}
.industry h3 { font-size: 20px; letter-spacing: -0.015em; line-height: 1.2; margin: 0 0 12px; }
.industry p { color: var(--ink-soft); font-size: 15px; }

/* Foundation */
.foundation { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px 80px; align-items: start; }
.foundation h2 { font-size: clamp(34px, 4.6vw, 60px); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li {
  font-family: var(--mono); font-size: 13px; padding: 8px 12px;
  border: 1px solid var(--line); background: var(--paper);
}
.foundation .closing { margin-top: 32px; font-size: 19px; color: var(--ink-soft); max-width: 50ch; }
.foundation .closing strong { color: var(--ink); font-weight: 500; }

/* Closing CTA */
.cta { background: var(--ink); color: var(--paper); }
.cta .wrap { padding-block: clamp(80px, 11vw, 140px); display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px 80px; align-items: end; }
.cta h2 { font-size: clamp(38px, 5.6vw, 76px); letter-spacing: -0.04em; max-width: 13ch; }
.cta p { color: #b9b6ae; font-size: 18px; margin-bottom: 28px; }
.cta .btn { --bg: var(--accent); --fg: #fff; }
.cta .btn:hover { --bg: var(--paper); --fg: var(--ink); }

/* Footer */
.site-footer { background: var(--ink); color: #b9b6ae; border-top: 1px solid var(--line-dark); }
.site-footer .wrap { padding-block: 48px; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: start; }
.site-footer img { height: 24px; width: auto; }
.site-footer .loc { margin-top: 16px; font-size: 15px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 12px 28px; font-size: 15px; }
.site-footer nav a { text-decoration: none; }
.site-footer nav a:hover { color: var(--paper); }
.site-footer .legal { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--line-dark); font-size: 13px; font-family: var(--mono); }

/* ---------- Contact page ---------- */
.contact { padding-block: clamp(56px, 9vw, 110px) clamp(80px, 10vw, 130px); }
.contact .wrap { max-width: calc(720px + 2 * var(--gutter)); }
.contact h1 { font-size: clamp(40px, 6vw, 72px); letter-spacing: -0.04em; line-height: 1; }
.contact .intro { margin-top: 20px; font-size: 19px; color: var(--ink-soft); max-width: 46ch; }

.email-link {
  display: inline-block; margin-top: 48px;
  font-size: clamp(28px, 4.4vw, 52px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1;
  text-decoration: none; word-break: break-word;
  border-bottom: 2px solid var(--accent); padding-bottom: 4px;
  transition: color .2s ease;
}
.email-link:hover { color: var(--accent); }

.email-notes { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); color: var(--ink-soft); }
.email-notes p + ul, .email-notes ul + p { margin-top: 12px; }
.email-notes ul { display: grid; gap: 6px; }
.email-notes li { padding-left: 16px; position: relative; color: var(--ink); }
.email-notes li::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 6px; background: var(--accent); }
.email-notes ul + p { margin-top: 24px; }

.site-footer .loc a { text-decoration: none; }
.site-footer .loc a:hover { color: var(--paper); }

/* ---------- Motion ---------- */
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); }

/* Scroll reveal */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* Hero: headline rises in word by word, then the supporting copy */
.hero-title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.hero-title .w > span { display: inline-block; animation: word-up 1.1s var(--ease-out) both; animation-delay: calc(80ms + var(--i) * 55ms); }
.hero-in { animation: fade-up 1s var(--ease-out) both; animation-delay: calc(500ms + var(--d) * 110ms); }
@keyframes word-up { from { transform: translateY(105%); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } }

/* Product screenshots: uncovered by a 45° wipe, the logo's angle */
.js .product .product-visual img {
  clip-path: polygon(-10% -10%, -10% -10%, -40% 120%, -10% 120%);
  transform: scale(1.04);
  transition: clip-path 1.3s var(--ease-out) .2s, transform 1.6s var(--ease-out) .2s;
}
.js .product.is-in .product-visual img { clip-path: polygon(-10% -10%, 140% -10%, 110% 120%, -10% 120%); transform: none; }
.js .product.is-in:hover .product-visual img { transform: translateY(-4px); transition: transform .4s ease; }

/* Page-to-page: new page sweeps in over the old one with an angled edge */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-group(site-header) { animation: none; }
::view-transition-old(root) { animation: vt-recede .7s var(--ease-out) both; }
::view-transition-new(root) { animation: vt-sweep .7s var(--ease-out) both; }
@keyframes vt-recede { to { opacity: .4; transform: translateX(-4%); } }
@keyframes vt-sweep {
  from { clip-path: polygon(calc(100% + 14vw) 0, 130% 0, 130% 100%, 100% 100%); }
  to   { clip-path: polygon(0 0, 130% 0, 130% 100%, -14vw 100%); }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .hero-title .w > span, .hero-in, .stack-item { animation: none; }
  .js .product .product-visual img { clip-path: none; transform: none; transition: none; }
  @view-transition { navigation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

[hidden] { display: none !important; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-grid .hero-title { font-size: clamp(44px, 7.4vw, 84px); }
  .hero-visual { max-width: 640px; }
  .industries { grid-template-columns: repeat(2, 1fr); }
  .lab li { grid-template-columns: 1fr auto; }
  .lab li p { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .menu-btn { display: block; }
  .nav {
    position: absolute; top: 72px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 24px;
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 14px 0; font-size: 18px; border-bottom: 1px solid var(--line); }
  .nav .btn { margin-top: 16px; justify-content: center; font-size: 16px; padding: 16px; border: 0; }

  .section-head, .foundation, .cta .wrap { grid-template-columns: 1fr; }
  .services { grid-template-columns: 1fr; }
  .service, .service + .service { padding: 32px 0; border-left: 0; }
  .service + .service { border-top: 1px solid var(--line); }
  .product { grid-template-columns: 1fr; }
  .product-visual { order: -1; }
  .site-footer .wrap { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .industries { grid-template-columns: 1fr; }
  .service .examples { grid-template-columns: 1fr; }
  .lab li { grid-template-columns: 1fr; gap: 10px; }
  .lab li p { grid-column: auto; }
  .lab .tag { justify-self: start; }
  .hero .actions .btn { flex: 1 1 auto; justify-content: center; }
  .strip ul { justify-content: flex-start; }
}