/* Reawn — independent web design
   Tokens: Paper, Ink, Muted, Rule, Open. Display: Gloock. Body: Hanken Grotesk. */

@font-face {
  font-family:"Gloock";
  src:url("assets/fonts/gloock-latin.woff2") format("woff2");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
@font-face {
  font-family:"Hanken Grotesk";
  src:url("assets/fonts/hanken-grotesk-latin.woff2") format("woff2");
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
}

:root {
  --paper: #FCFCFA;
  --ink: #14161C;
  --muted: #6B6F7A;
  --rule: #E6E7E9;
  --open: #107A49;
  --open-dark: #0E6E41;
  --soft: #F3F3F1;

  --display: "Gloock", "Bodoni Moda", Georgia, serif;
  --body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --max: 1180px;
  --gutter: clamp(20px, 4vw, 48px);
  --radius: 8px;
}

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

html { scroll-behavior: smooth; scroll-padding-top:28px; }

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

a { color: inherit; text-decoration: none; touch-action:manipulation; }
.icon { display:inline-block; width:20px; height:20px; flex:none; vertical-align:-.2em; }
h1,h2,h3 { text-wrap:balance; }
p { overflow-wrap:break-word; }
::selection { background:var(--ink); color:var(--paper); }
a:focus-visible, .button:focus-visible {
  outline: 2px solid var(--open);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; }
li { list-style: none; }
.skip-link { position:fixed; top:14px; left:14px; z-index:10; padding:10px 16px; background:var(--paper); transform:translateY(-200%); }
.skip-link:focus { transform:none; }
.section-kicker { margin-bottom:18px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }

/* ---------- Masthead ---------- */

.masthead {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px) var(--gutter) 0;
}

.masthead-identity { display:flex; align-items:center; justify-content:space-between; gap:24px; }

.wordmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  animation: rise 0.6s cubic-bezier(.22,1,.36,1) both;
}

.brand-logo { display:block; flex:none; object-fit:contain; }
.wordmark .brand-logo { width:64px; height:64px; }
.wordmark:focus-visible { border-radius:28%; }

.personal-byline { color:var(--muted); font-size:13px; animation:rise .6s cubic-bezier(.22,1,.36,1) .08s both; }

.nav {
  margin-top: 24px;
  padding: 12px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 15px;
}

.nav-links {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

.nav-links a { color:var(--muted); display:inline-flex; align-items:center; min-height:44px; }
.nav-links a:hover { color: var(--ink); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.button {
  display: inline-flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  min-height:44px;
  background: var(--open);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  padding: 9px 16px;
  border-radius: 8px;
  transition: background 180ms cubic-bezier(.22,1,.36,1);
}
.button:hover { background: var(--open-dark); }
.button:active { opacity:.85; }

.button--large {
  font-size: 18px;
  padding: 14px 24px;
  border-radius: 10px;
}

/* ---------- Hero ---------- */

.hero-banner { position:relative; isolation:isolate; margin-bottom:clamp(44px, 6vw, 80px); }
.gradient-waves {
  position:absolute;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
  background-color:var(--paper);
  background-image:radial-gradient(ellipse at 65% 75%, color-mix(in srgb, var(--open) 7%, var(--paper)), transparent 75%);
}
.gradient-waves canvas { display:block; width:100%; height:100%; visibility:hidden; }
.gradient-waves.has-waves canvas { visibility:visible; }
.hero-banner .hero-personal,.hero-banner .section-kicker { color:var(--ink); }


.hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(64px, 9vw, 120px) var(--gutter) clamp(40px, 6vw, 72px);
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:72px;
  align-items:center;
  padding-top:92px;
  padding-bottom:105px;
}

.hero h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(40px, 5.2vw, 70px);
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.hero-statement { animation:rise .7s cubic-bezier(.22,1,.36,1) .08s both; }
.hero-detail { animation:rise .7s cubic-bezier(.22,1,.36,1) .2s both; }
.hero-sub { font-size:18px; line-height:1.65; max-width:36ch; }
.hero-personal { margin-top:16px; color:var(--muted); font-size:15px; line-height:1.65; max-width:38ch; }
.hero-work-link { display:inline-flex; align-items:center; gap:36px; font-size:14px; margin-top:22px; min-height:44px; border-bottom:1px solid var(--ink); }
.hero-entry { display:flex; width:fit-content; align-items:center; gap:12px; min-height:44px; margin-top:14px; color:var(--open-dark); font-size:13px; }
.hero-entry strong { font-weight:600; border-bottom:1px solid currentColor; padding-bottom:2px; }
.hero-entry:hover strong { border-color:transparent; }

/* ---------- Text loop ---------- */

.text-loop { overflow:hidden; margin: -24px 0 0; }
.text-loop-svg { display:block; width:100%; min-width:760px; max-width:1600px; height:auto; position:relative; left:50%; transform:translateX(-50%); }
.text-loop-ribbon { fill:none; stroke:var(--open); stroke-width:72; }
.text-loop-letters,.text-loop-measure { font-family:var(--body); font-size:32px; font-weight:600; letter-spacing:1.5px; white-space:pre; }
.text-loop-letters { fill:var(--paper); user-select:none; }
.text-loop-measure { visibility:hidden; pointer-events:none; }

/* ---------- Sections ---------- */

.section {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(48px, 7vw, 96px) var(--gutter);
  border-top: 1px solid var(--rule);
}

.work { border-top: 0; padding-top: 0; }

.section-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.section-lede {
  margin-top: 12px;
  color: var(--muted);
  max-width: 62ch;
}

.section h3 {
  font-family: var(--body);
  font-weight: 600;
  font-size: 17px;
  margin-bottom: 10px;
}

.plain-list li {
  position: relative;
  padding-left: 18px;
  margin: 6px 0;
}
.plain-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--open);
}

/* ---------- Cards ---------- */

.work-intro { display:grid; grid-template-columns:1.1fr 1fr; gap:70px; align-items:end; }
.work-intro .section-title { font-size:clamp(32px,3.8vw,48px); line-height:1.15; }
.work-intro .section-lede { margin:0; max-width:44ch; font-size:16px; }
.collection-note { margin-top:28px; padding-top:18px; border-top:1px solid var(--rule); font-size:12px; color:var(--muted); }
.portfolio-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px 32px; margin-top:35px; }
.portfolio-item { min-width:0; display:flex; flex-direction:column; }
.portfolio-preview { flex:none; display:block; position:relative; width:100%; aspect-ratio:1.46; overflow:hidden; border:1px solid var(--rule); border-radius:6px; background:var(--soft); }
.portfolio-preview iframe { position:absolute; inset:0; width:300%; height:300%; transform:scale(.3333333); transform-origin:0 0; border:0; pointer-events:none; }
.preview-label { position:absolute; right:14px; top:14px; display:flex; align-items:center; gap:18px; padding:9px 14px; background:var(--paper); color:var(--ink); font-size:12px; border:1px solid var(--rule); border-radius:4px; }
.preview-label>.icon { display:inline-block; }
.portfolio-heading { display:flex; justify-content:space-between; align-items:baseline; gap:15px; margin-top:21px; }
.section .portfolio-heading h3 { font-family:var(--display); font-size:30px; font-weight:400; margin:0; line-height:1.2; }
.study-type { font-size:11px; color:var(--muted); white-space:nowrap; }
.portfolio-category { margin-top:7px; font-size:13px; color:var(--muted); }
.portfolio-description { margin-top:16px; font-size:17px; line-height:1.5; max-width:45ch; }
.portfolio-case { margin:22px 0 10px; border-top:1px solid var(--rule); }
.portfolio-case>div { display:grid; grid-template-columns:86px minmax(0,1fr); gap:16px; padding-top:16px; }
.portfolio-case dt { color:var(--muted); font-size:11px; line-height:1.6; padding-top:3px; }
.portfolio-case dd { margin:0; font-size:14px; line-height:1.65; }
.portfolio-case>div:last-child dd { color:var(--open-dark); }
.portfolio-link { display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--rule); font-size:12px; min-height:54px; margin-top:auto; padding-top:12px; }
.collection-close { display:flex; justify-content:space-between; gap:25px; align-items:center; margin-top:55px; padding-top:25px; border-top:1px solid var(--rule); }
.section .collection-close h3 { margin:0 0 8px; font-family:var(--display); font-size:25px; font-weight:400; line-height:1.25; }
.collection-close p { max-width:60ch; font-size:15px; color:var(--muted); }
.collection-close a { flex-shrink:0; font-size:14px; text-decoration:underline; text-underline-offset:5px; min-height:44px; display:flex; align-items:center; gap:25px; }

/* ---------- Spec ---------- */

.spec-intro { max-width:65ch; color:var(--muted); margin-top:22px; line-height:1.65; }

.offer-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:36px; }
.offer { display:flex; flex-direction:column; padding:clamp(24px,3vw,36px); border:1px solid var(--rule); border-radius:var(--radius); }
.offer--launch { border-color:color-mix(in srgb,var(--open) 35%,var(--rule)); background:color-mix(in srgb,var(--open) 4%,var(--paper)); }
.offer-eyebrow { margin-bottom:22px; color:var(--muted); font-size:11px; letter-spacing:.05em; text-transform:uppercase; }
.section .offer h3 { font-family:var(--display); font-weight:400; font-size:30px; margin:0; }
.offer-price { display:flex; align-items:baseline; flex-wrap:wrap; gap:10px; margin-top:20px; color:var(--open-dark); font-family:var(--display); font-size:68px; line-height:1; letter-spacing:-.04em; }
.offer-price span { color:var(--muted); font-family:var(--body); font-size:12px; letter-spacing:0; line-height:1.5; }
.offer-price--custom { font-size:38px; min-height:68px; align-items:center; letter-spacing:-.025em; color:var(--ink); }
.offer-description { margin-top:24px; max-width:43ch; color:var(--muted); font-size:15px; line-height:1.65; }
.offer .plain-list { margin:25px 0; font-size:14px; line-height:1.6; }
.offer .plain-list li { margin:10px 0; }
.offer-delivery { margin-top:auto; margin-bottom:22px; font-size:13px; line-height:1.55; color:var(--muted); }
.offer .button { justify-content:space-between; }
.offer-button--custom { background:var(--ink); }
.offer-button--custom:hover { background:var(--muted); }
.offer-note { max-width:80ch; margin-top:22px; color:var(--muted); font-size:13px; line-height:1.65; }




/* ---------- Steps ---------- */

.steps {
  margin-top: 28px;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px;
}

.steps li {
  counter-increment: step;
  padding-top: 14px;
  border-top: 2px solid var(--ink);
}

.steps li::before {
  content: counter(step);
  display: block;
  font-family: var(--display);
  font-size: 26px;
  line-height: 1;
  margin-bottom: 12px;
}

.steps p {
  color: var(--muted);
  font-size: 15px;
}

/* ---------- About / Contact ---------- */

.about { display:grid; grid-template-columns:1fr 1.2fr; gap:80px; }
.about-heading .section-title { font-size:clamp(30px,3.2vw,40px); line-height:1.2; }
.about-caption { margin-top:22px; color:var(--muted); font-size:14px; max-width:25ch; }
.about-body {
  max-width: 54ch;
  display: flex;
  flex-direction: column;
  gap: 20px;
  line-height:1.75;
}
.personal-signoff { margin-top:8px; }
.personal-name {
  display:inline-flex;
  align-items:center;
  gap:.3em;
  padding:.12em .42em .18em;
  border-radius:999px;
  background:color-mix(in srgb,var(--open) 8%,var(--paper));
  color:var(--open-dark);
  font-family:var(--display);
  font-size:1.08em;
  font-weight:400;
  line-height:1.15;
  letter-spacing:-.025em;
  white-space:nowrap;
}
.personal-name .name-icon { width:.94em; height:.94em; transform:rotate(-8deg); }
.signature-name { line-height:1; }
.personal-name--signature { font-size:38px; padding:.18em .46em .22em; }
.signature-caption { color:var(--muted); font-size:12px; margin-top:8px; }
.about-tools { margin-top:12px; padding-top:20px; border-top:1px solid var(--rule); color:var(--muted); font-size:13px; line-height:1.7; }
.questions-list { margin-top:32px; }
.questions-list details { border-top:1px solid var(--rule); }
.questions-list details:last-child { border-bottom:1px solid var(--rule); }
.questions-list summary { cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:25px; list-style:none; min-height:64px; padding-block:16px; font-size:17px; }
.questions-list summary::-webkit-details-marker { display:none; }
.disclosure-icon { display:grid; place-items:center; flex:none; width:24px; height:24px; }
.disclosure-icon .icon { grid-area:1/1; }
.disclosure-icon .icon:last-child { display:none; }
.questions-list details[open] .icon:first-child { display:none; }
.questions-list details[open] .icon:last-child { display:block; }
.questions-list details>p { padding:0 35px 24px 0; max-width:65ch; color:var(--muted); font-size:16px; line-height:1.65; }
.questions-list summary:focus-visible { outline:2px solid var(--open); outline-offset:4px; }
.contact .section-title { font-size:clamp(32px,4.5vw,55px); line-height:1.15; }

.contact { text-align: center; }

.contact-lede {
  margin: 14px auto 28px;
  max-width: 56ch;
  color: var(--muted);
}

/* ---------- Footer ---------- */

.footer {
  max-width: var(--max);
  margin: 0 auto;
  padding: 28px var(--gutter) 48px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 14px;
}

.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-brand { display:inline-flex; align-items:center; gap:10px; min-height:44px; color:var(--ink); }
.footer-brand .brand-logo { width:28px; height:28px; }
.footer-mail { min-height:44px; display:inline-flex; align-items:center; }
.footer-mail:hover { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }

/* ---------- Sub-pages ---------- */

.error-page { max-width:var(--max); margin:0 auto; padding:clamp(64px,12vw,160px) var(--gutter); min-height:65vh; }
.error-page h1 { font-family:var(--display); font-weight:400; font-size:clamp(38px,6vw,72px); line-height:1.15; }
.error-page>p:not(.section-kicker) { max-width:48ch; margin:24px 0; color:var(--muted); }

/* ---------- Motion ---------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media(hover:hover) and (pointer:fine) {
  .preview-label>.icon,.portfolio-link>.icon,.hero-work-link>.icon { transition:transform 220ms cubic-bezier(.22,1,.36,1); }
  .portfolio-preview:hover .preview-label>.icon,.portfolio-link:hover>.icon { transform:translate(2px,-2px); }
  .hero-work-link:hover>.icon { transform:translateY(3px); }
  .portfolio-preview:hover { border-color:var(--muted); }
  .portfolio-heading a:hover,.questions-list summary:hover { text-decoration:underline; text-underline-offset:5px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wordmark,.personal-byline,.hero-statement,.hero-detail { animation: none; }
  .button,.preview-label>.icon,.portfolio-link>.icon,.hero-work-link>.icon { transition:none; }
  .portfolio-preview:hover .preview-label>.icon,.portfolio-link:hover>.icon,.hero-work-link:hover>.icon { transform:none; }
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .hero { gap:35px; padding-top:72px; padding-bottom:80px; }
  .about { gap:40px; }
  .work-intro { gap:35px; }
  .portfolio-grid { gap:45px 24px; }
  .steps { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .hero-banner { margin-bottom:40px; }
  .text-loop { margin-top:-14px; }
  body { font-size: 16px; }
  .masthead { padding-top:24px; }
  .wordmark .brand-logo { width:48px; height:48px; }
  .masthead-identity { flex-direction:column; align-items:flex-start; gap:12px; }
  .personal-byline { font-size:12px; line-height:1.45; }
  .nav { gap:12px; padding-block:10px 16px; }
  .nav-links { column-gap:16px; row-gap:0; font-size:14px; }
  .nav-actions { width:100%; }
  .nav-actions .button { width:100%; }
  .hero { display:block; padding-top:48px; padding-bottom:62px; }
  .hero h1 { font-size:clamp(34px,9.2vw,54px); }
  .hero-detail { margin-top:26px; }
  .hero-sub { font-size:17px; }
  .work-intro { display:block; }
  .work-intro .section-lede { margin-top:22px; }
  .portfolio-grid { grid-template-columns:1fr; gap:42px; }
  .portfolio-preview { aspect-ratio:1.25; }
  .collection-close { align-items:flex-start; flex-direction:column; gap:10px; margin-top:35px; }
  .about { grid-template-columns:1fr; gap:30px; }
  .about-caption { max-width:none; margin-top:16px; }
  .about-body { gap:18px; }
  .questions-list summary { font-size:16px; }
  .offer-grid { grid-template-columns:1fr; gap:20px; }
  .offer-price { font-size:60px; }
  .offer-price--custom { font-size:34px; min-height:0; }
  .portfolio-case>div { grid-template-columns:1fr; gap:5px; }
  .steps { grid-template-columns: 1fr; gap: 20px; }
  .portfolio-heading { gap:12px; }
  .study-type { font-size:10px; }
}