/* ============================================================================
   Dealgan — shadcn.css · straight Motto visual clone (wearemotto.com) on the
   Dealgan structure. Two-color contrast scheme: cream page × forest ink.
   Accent (lime) appears ONLY in the brand dot. Rubik everywhere; display
   uppercase, line-height 1.0; the whole scale tracks the viewport (vw).
   Raw values ONLY in :root; components consume var(--token). Transitions:
   explicit properties, ease-out. Slop canon: projects/oss/unslop.
   ============================================================================ */

/* ---- tokens ---------------------------------------------------------------- */
:root {
  /* two-color scheme + single accent */
  --cream: oklch(0.945 0.012 95);
  --paper: oklch(0.995 0.002 95);
  --forest: oklch(0.29 0.055 155);
  --forest-deep: oklch(0.24 0.05 155);
  --lime: oklch(0.92 0.185 120);

  --background: var(--cream);
  --foreground: var(--forest);
  --muted-foreground: oklch(0.45 0.03 155);
  --border: oklch(0.82 0.02 120);
  --input-border: oklch(0.55 0.03 155);
  --ring: var(--forest);
  --on-dark: oklch(0.96 0.012 110);
  --on-dark-muted: oklch(0.8 0.03 130);

  --radius: 0.54rem;      /* Motto inputs: 8.64px */

  --font-sans: "Rubik", sans-serif;

  /* oversized vw scale — everything tracks the viewport */
  --display-xl: 10vw;
  --display-lg: 7.4vw;
  --text-xl: 3.1vw;
  --text-ui: clamp(1.0625rem, 1.5vw, 1.625rem);
  --text-body: clamp(1rem, 1.3vw, 1.375rem);
  --label-size: clamp(0.875rem, 1.1vw, 1.1875rem);

  --space-x: 5.5vw;
  --header-h: clamp(4.5rem, 6.5vw, 7.5rem);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur-med: 200ms;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.4;
  color: var(--foreground);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
}

h1, h2 { margin: 0; font-weight: 400; }
p { margin: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* display voice — uppercase, light 300, leading 1.0 */
.hero-title, .plate-title, .contact-marquee {
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0;
}

/* small parenthetical labels — sentence case, like "(Scroll)" */
.tag-label {
  font-size: var(--label-size);
  font-weight: 400;
  color: var(--muted-foreground);
}

/* underlined links */
.link-under {
  display: inline-block;
  padding: 0.25rem 0;
  color: inherit;
  font-size: var(--text-ui);
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 0.45em;
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness var(--dur-fast) var(--ease-out);
}
.link-under:hover { text-decoration-thickness: 2px; }
.link-under:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }

.link-nav {
  font-size: var(--text-ui);
  font-weight: 400;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.5em;
  text-decoration-thickness: 1px;
  padding: 0.5rem 0;
}
.site-header .link-nav { margin-left: auto; }
.link-nav:hover { text-decoration-thickness: 2px; }
.link-nav:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }

/* ---- brand (solid geometric wordmark, BOLD reference) ----------------------- */
.brand { display: inline-flex; align-items: center; color: inherit; text-decoration: none; }
.brand-word { height: clamp(1.5rem, 2vw, 2.25rem); width: auto; display: block; }

/* ---- header ---------------------------------------------------------------- */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 2rem;
  height: var(--header-h);
  padding: 0 var(--space-x);
  color: var(--foreground);
}
.site-nav { display: flex; gap: 2.25vw; margin-inline: auto; }
.site-nav a {
  color: var(--foreground);
  text-decoration: none;
  font-size: var(--text-ui);
  font-weight: 400;
  padding: 0.5rem 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.site-nav a:hover { opacity: 0.6; }

/* ---- hero (Motto home 1:1) ------------------------------------------------- */
.hero {
  position: relative;
  padding: calc(var(--header-h) + 8vh) var(--space-x) 0;
  background: var(--background);
}
.hero-title { display: block; }
.hero-line { display: block; white-space: nowrap; width: fit-content; }
.hero-title, .hero-line { font-size: var(--display-xl); }
.hero-line.-l1 { margin-left: 5%; }
.hero-line.-l2 { margin-left: 40%; }
.hero-line.-l3 { margin-left: 24%; }
.hero-ast, .hero-dot { color: inherit; }
.hero-ast { margin-right: 0.02em; }

.hero-lede {
  max-width: 30vw;
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.4;
}
.hero-arrow { color: var(--foreground); }
.hero-arrow svg { width: 5.7vw; height: auto; }

@media (min-width: 64rem) {
  /* anchor to headline rows: lede sits beside line 2, arrow beside line 3 */
  .hero-lede {
    position: absolute;
    left: var(--space-x);
    top: calc(var(--header-h) + 8vh + 1.3 * var(--display-xl));
  }
  .hero-arrow {
    position: absolute;
    left: calc(var(--space-x) + 0.25rem);
    top: calc(var(--header-h) + 8vh + 2.5 * var(--display-xl));
  }
}
@media (max-width: 63.9rem) {
  .hero-line { white-space: normal; margin-left: 0 !important; }
  .hero-lede { margin-top: 2rem; }
  .hero-arrow { margin-top: 1.5rem; }
  .hero-arrow svg { width: 12vw; height: auto; }
}

.hero-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 8vh;
}
.hero-strip {
  position: relative; /* keep the image above the next section's background */
  z-index: 2;
  padding-top: 5vh;
  /* pull the bottom half of the image over the next section */
  margin-bottom: calc((100vw - 2 * var(--space-x)) / -4);
}
.hero-figure { margin: 0; width: 100%; }
.hero-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border-radius: var(--radius);
}

/* ---- service sections (flat flow, Motto rhythm) ---------------------------- */
.services { position: relative; z-index: 1; } /* paint above the hero surface */
.service {
  padding: 11vh var(--space-x) 12vh;
}
/* section rhythm: alternating paper / cream instead of divider lines */
.services .service:nth-child(odd) { background: var(--paper); }
.services .service:first-child { padding-top: calc((100vw - 2 * var(--space-x)) / 4 + 8vh); }
.plate-inner { display: grid; gap: 2vw; }
.plate-title {
  font-size: var(--display-lg);
  line-height: 1.04;
  max-width: 16ch;
}
/* inline image chip inside the headline — "IDEAS [img] THAT SHAPE FUTURE" */
.h2-chip {
  display: inline-block;
  height: 0.82em;
  width: 1.45em;
  object-fit: cover;
  vertical-align: -0.08em;
  border-radius: calc(var(--radius) * 1.5);
  margin: 0 0.06em;
}

.plate-cols { display: grid; gap: 2.5rem; }
.plate-head > p {
  max-width: 34ch;
  font-weight: 400;
  color: var(--muted-foreground);
}
.plate-head .link-under { margin-top: 1.75vw; }

@media (min-width: 64rem) {
  .plate-cols {
    grid-template-columns: minmax(0, 38vw) minmax(0, 1fr);
    gap: 3vw 8vw;
  }
}

/* ---- FAQ ------------------------------------------------------------------- */
.plate-faq { border-top: 1px solid var(--border); }
.faq { border-bottom: 1px solid var(--border); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  padding: 1.1vw 0;
  font-size: var(--text-ui);
  font-weight: 400;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  font-weight: 400;
  font-size: clamp(1.375rem, 1.8vw, 2rem);
  line-height: 1;
  color: var(--muted-foreground);
  transition: rotate var(--dur-med) var(--ease-out);
}
.faq[open] summary::after { rotate: 45deg; }
.faq > p {
  max-width: 58ch;
  padding: 0 0 1.4vw;
  color: var(--muted-foreground);
}
.faq summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* ---- footer: Motto /contact clone ------------------------------------------ */
.site-footer {
  background: var(--background);
  color: var(--foreground);
  padding-top: 5vh;
}

/* CONTACT ✳ CONTACT marquee */
.contact-marquee {
  overflow: hidden;
  font-size: var(--display-xl);
  white-space: nowrap;
}
.marquee-track {
  display: inline-flex;
  gap: 0.5em;
  padding-right: 0.5em;
  will-change: transform;
  animation: marquee 26s linear infinite;
}
.marquee-track em { font-style: normal; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 0.25em)); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

.contact-wrap {
  padding: 6vh var(--space-x) 8vh;
}
.form-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.form-bar p { font-size: var(--text-ui); font-weight: 400; }

/* form grid — Motto: 2 columns, label above, bordered rounded inputs */
.contact-form {
  display: grid;
  gap: 2.5vw 2.5vw;
  margin-top: 2.5vw;
}
@media (min-width: 48rem) {
  .contact-form { grid-template-columns: 1fr 1fr; }
  .field.-wide, .check, .btn-submit, .form-note { grid-column: 1 / -1; }
}
.field { display: grid; gap: 0.75rem; position: relative; }
.field label { font-size: var(--text-ui); font-weight: 400; }
.field label em { font-style: normal; }
.field input,
.field select,
.field textarea {
  padding: 1.3vw 1.4vw;
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--foreground);
  font: inherit;
  font-size: var(--text-ui);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.field input::placeholder, .field textarea::placeholder { color: oklch(0.6 0.02 155); }
.field select { appearance: none; cursor: pointer; }
.field:has(select)::after {
  content: "";
  position: absolute;
  right: 1.4vw;
  bottom: 1.9vw;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid var(--foreground);
  border-bottom: 2px solid var(--foreground);
  rotate: 45deg;
  pointer-events: none;
}
.field textarea { resize: vertical; min-height: 22vh; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--foreground); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 1px;
  border-color: transparent;
}

.check {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--text-ui);
  cursor: pointer;
  width: fit-content;
}
.check input {
  width: 1.375rem;
  height: 1.375rem;
  accent-color: var(--forest);
}
.check input:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

.btn-submit {
  justify-self: start;
  min-width: 14vw;
  min-height: 3.25rem;
  padding: 0.9vw 3vw;
  border: none;
  border-radius: var(--radius);
  background: var(--forest);
  color: var(--on-dark);
  font: inherit;
  font-size: var(--text-ui);
  font-weight: 400;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.btn-submit:hover { background: var(--forest-deep); }
.btn-submit:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.btn-submit:disabled { cursor: default; opacity: 0.6; }
.form-note { font-weight: 400; font-size: var(--text-ui); }

/* legal strip — the dark half of the two-color scheme */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 2vw var(--space-x);
  background: var(--forest);
  color: var(--on-dark);
}
.footer-legal > p { font-size: var(--label-size); color: var(--on-dark-muted); }

/* ---- small screens --------------------------------------------------------- */
@media (max-width: 63.9rem) {
  .site-nav { display: none; }
  :root {
    --display-xl: 13.5vw;
    --display-lg: 9vw;
    --text-xl: 6vw;
  }
  .hero-title, .plate-title, .contact-marquee { font-weight: 400; }
  .hero-lede { max-width: 100%; }
}