@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600&family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500&display=swap');

/* ============================================================
   Brandamin: styles.css
   Cinematic Studio aesthetic - deep onyx, atmospheric vignette,
   Fraunces display serif, Geist body, gold-tinted accents,
   double-bezel CTAs, floating glass nav pill, film-grain overlay.
   ============================================================ */

/* --- Design tokens --------------------------------------- */

:root {
  --bg: #07080f;
  --bg-2: #14152a;
  --text: #f3eee2;
  --text-muted: rgba(243, 238, 226, 0.65);
  --text-faint: rgba(243, 238, 226, 0.45);
  --accent: #6c8fff;
  --accent-warm: #e8b974;
  --hairline: rgba(255, 255, 255, 0.07);
  --hairline-strong: rgba(255, 255, 255, 0.12);
  --surface-glass: rgba(255, 255, 255, 0.04);
  --surface-glass-strong: rgba(255, 255, 255, 0.07);
  --ease-cinematic: cubic-bezier(0.32, 0.72, 0, 1);
}

/* --- Reset & base ----------------------------------------- */

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

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: 'Geist', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  background:
    radial-gradient(ellipse 70% 50% at 50% -10%, #1a1d33 0%, transparent 70%),
    radial-gradient(ellipse 100% 70% at 80% 100%, #14152a 0%, transparent 60%),
    #07080f;
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.6;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* Film-grain overlay (fixed, blend overlay) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.7'/></svg>");
  opacity: 0.35;
  mix-blend-mode: overlay;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

/* --- Focus states ----------------------------------------- */

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

/* --- Buttons ---------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  font-family: 'Geist', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.003em;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: transform 600ms var(--ease-cinematic),
              box-shadow 600ms var(--ease-cinematic),
              background-color 400ms var(--ease-cinematic),
              border-color 400ms var(--ease-cinematic),
              color 400ms var(--ease-cinematic);
}

/* Primary CTA: double-bezel pill with button-in-button arrow */
.btn-primary {
  background: linear-gradient(180deg, #1c2244 0%, #0f1330 100%);
  color: var(--text);
  border-radius: 999px;
  padding: 0.95rem 0.95rem 0.95rem 1.85rem;
  gap: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 14px 36px -18px rgba(0, 0, 0, 0.7);
}

.btn-primary::after {
  content: '';
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.06);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23f3eee2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  transition: transform 500ms var(--ease-cinematic),
              background-color 400ms var(--ease-cinematic);
}

.btn-primary:hover {
  transform: scale(1.012);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 22px 44px -18px rgba(0, 0, 0, 0.75);
}

.btn-primary:hover::after {
  transform: translate(2px, -1px);
  background-color: rgba(255, 255, 255, 0.15);
}

.btn-primary:active {
  transform: scale(0.985);
}

.btn-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-primary:disabled:hover {
  transform: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 14px 36px -18px rgba(0, 0, 0, 0.7);
}

.btn-outline {
  background: var(--surface-glass-strong);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 500;
}

.btn-outline:hover {
  background-color: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.18);
}

/* --- Header: floating glass pill -------------------------- */

.site-header {
  position: fixed;
  top: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: max-content;
  max-width: calc(100% - 1.5rem);
  padding: 0.6rem 0.65rem 0.6rem 1.4rem;
  background: rgba(12, 14, 26, 0.55);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.6);
}

.header-logo {
  display: inline-flex;
  align-items: center;
}

.header-logo img {
  height: 26px;
  width: auto;
  display: block;
}

.header-nav {
  display: inline-flex;
  align-items: center;
}

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

.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding-top: 12rem;
  padding-bottom: 9rem;
  overflow: hidden;
}

#hero-anim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  padding: 0 clamp(1.5rem, 5vw, 3.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.hero-eyebrow {
  font-family: 'Geist', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent-warm);
  opacity: 0.85;
  margin-bottom: 0.7rem;
}

.hero-content h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-variation-settings: "opsz" 144;
  font-size: clamp(3.25rem, 7.5vw, 7rem);
  line-height: 0.96;
  letter-spacing: -0.028em;
  max-width: 22ch;
  color: #f7f1e3;
}

.hero-content h1::after {
  content: '.';
  color: var(--accent-warm);
  font-weight: 500;
}

.hero-subline {
  font-family: 'Geist', sans-serif;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  font-weight: 300;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 42ch;
  margin-top: 1.75rem;
}

.hero-content .btn-primary {
  align-self: flex-start;
  margin-top: 0.5rem;
}

.hook-intro {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.hook-intro > p:first-child {
  font-size: 0.95rem;
  color: var(--text-muted);
  font-weight: 300;
  max-width: 50ch;
}

#hook-mount {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 0;
}

/* --- Hook Analyzer widget --------------------------------- */

.hook-mode-toggle {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.hook-mode-btn {
  background: transparent;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  color: rgba(243, 238, 226, 0.6);
  cursor: pointer;
  font-family: 'Geist', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1;
  padding: 0.5rem 1.1rem;
  transition: background-color 400ms var(--ease-cinematic),
              color 400ms var(--ease-cinematic),
              border-color 400ms var(--ease-cinematic);
}

.hook-mode-btn:hover:not(:disabled) {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.22);
}

.hook-mode-btn.is-active {
  background-color: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

.hook-mode-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.hook-input-row {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.hook-input-row[hidden] {
  display: none;
}

@media (min-width: 540px) {
  .hook-input-row:not(:has(.hook-textarea)) {
    flex-direction: row;
    align-items: stretch;
  }
}

.hook-input {
  background-color: var(--surface-glass);
  border: 1px solid var(--hairline-strong);
  border-radius: 0.6rem;
  color: var(--text);
  font-family: 'Geist', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  padding: 0.875rem 1.1rem;
  width: 100%;
  transition: border-color 300ms var(--ease-cinematic),
              background-color 300ms var(--ease-cinematic);
  -webkit-appearance: none;
  appearance: none;
}

.hook-input::placeholder {
  color: rgba(243, 238, 226, 0.35);
}

.hook-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
  background-color: rgba(255, 255, 255, 0.06);
}

.hook-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.hook-textarea {
  resize: vertical;
  min-height: 8rem;
  line-height: 1.55;
}

/* Hook analyze button: same double-bezel as .btn-primary but more compact */
.hook-analyze-btn.btn-primary {
  padding: 0.75rem 0.75rem 0.75rem 1.4rem;
  gap: 0.7rem;
  font-size: 0.9rem;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: flex-start;
}

.hook-analyze-btn.btn-primary::after {
  width: 1.6rem;
  height: 1.6rem;
}

.hook-analyze-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.hook-error {
  font-size: 0.875rem;
  color: #ff8a8a;
  background-color: rgba(255, 100, 100, 0.06);
  border: 1px solid rgba(255, 100, 100, 0.2);
  border-radius: 999px;
  padding: 0.6rem 1rem;
  line-height: 1.5;
}

.hook-stage {
  font-size: 0.85rem;
  color: rgba(108, 143, 255, 0.7);
  font-style: italic;
  font-family: 'Geist', sans-serif;
}

.hook-out {
  background-color: var(--surface-glass);
  border: 1px solid var(--hairline-strong);
  border-radius: 1rem;
  color: rgba(243, 238, 226, 0.9);
  font-family: 'Geist Mono', ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9rem;
  line-height: 1.65;
  padding: 1.25rem 1.5rem;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 24rem;
  overflow-y: auto;
}

.hook-privacy {
  font-size: 0.78rem;
  color: rgba(243, 238, 226, 0.45);
  line-height: 1.5;
}

.hook-privacy-link {
  text-decoration: underline;
  text-decoration-color: var(--hairline-strong);
  color: inherit;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.hook-privacy-link:hover {
  color: var(--text);
  text-decoration-color: var(--text-muted);
}

/* --- Section shared --------------------------------------- */

.section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 6rem) clamp(1.25rem, 5vw, 3.5rem);
}

/* --- Work section ----------------------------------------- */

#work {
  background-color: transparent;
}

#work h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-variation-settings: "opsz" 144;
  font-size: clamp(2rem, 4vw, 3.25rem);
  letter-spacing: -0.022em;
  line-height: 1.02;
  margin-bottom: 1.75rem;
  color: #f7f1e3;
}

#work-filters {
  margin-bottom: 1.5rem;
  min-height: 0;
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* --- Positioning band ------------------------------------- */

.positioning-band {
  position: relative;
  background: transparent;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.positioning-band > .section-inner {
  position: relative;
  padding-left: clamp(3rem, 7vw, 5rem);
}

.positioning-band > .section-inner::before {
  content: '';
  position: absolute;
  left: clamp(1.25rem, 5vw, 3.5rem);
  top: 4rem;
  bottom: 4rem;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent,
    var(--accent-warm) 30%,
    var(--accent-warm) 70%,
    transparent
  );
  opacity: 0.55;
}

@media (max-width: 768px) {
  .positioning-band > .section-inner {
    padding-left: 2rem;
  }
  .positioning-band > .section-inner::before {
    left: 0.75rem;
    top: 2rem;
    bottom: 2rem;
  }
}

.positioning-copy {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: rgba(243, 238, 226, 0.9);
  max-width: 860px;
}

/* --- Brief mount section ---------------------------------- */

#brief-mount {
  background-color: transparent;
}

#brief-mount h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-variation-settings: "opsz" 144;
  font-size: clamp(2rem, 4vw, 3.25rem);
  letter-spacing: -0.022em;
  line-height: 1.02;
  margin-bottom: 1rem;
  color: #f7f1e3;
}

.brief-intro {
  font-size: 1rem;
  color: var(--text-muted);
  margin-bottom: 2rem;
  max-width: 620px;
  font-weight: 300;
}

#brief-mount-form {
  min-height: 0;
}

/* --- Contact section -------------------------------------- */

#contact {
  background-color: transparent;
}

#contact h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-variation-settings: "opsz" 144;
  font-size: clamp(2rem, 4vw, 3.25rem);
  letter-spacing: -0.022em;
  line-height: 1.02;
  margin-bottom: 2rem;
  color: #f7f1e3;
}

/* --- Anchor scroll offset (clears floating header) -------- */

section[id],
#contact {
  scroll-margin-top: 6rem;
}

/* --- Contact form ----------------------------------------- */

#contact-form {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.field label,
.field .consent-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(243, 238, 226, 0.75);
}

.field input[type="text"],
.field input[type="email"],
.field select,
.field textarea {
  background-color: var(--surface-glass);
  border: 1px solid var(--hairline-strong);
  border-radius: 0.6rem;
  color: var(--text);
  font-family: 'Geist', sans-serif;
  font-size: 1rem;
  padding: 0.75rem 1rem;
  width: 100%;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.field input[type="text"]::placeholder,
.field input[type="email"]::placeholder,
.field textarea::placeholder {
  color: rgba(243, 238, 226, 0.35);
}

.field input[type="text"]:focus-visible,
.field input[type="email"]:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
  background-color: rgba(255, 255, 255, 0.06);
}

.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23e8b974' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  padding-right: 2.25rem;
  cursor: pointer;
}

.field select option {
  background-color: #131829;
  color: var(--text);
}

.field textarea {
  resize: vertical;
  min-height: 6rem;
  line-height: 1.5;
}

/* --- Budget slider ---------------------------------------- */

.budget-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

#budget {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  outline: none;
  cursor: ew-resize;
  padding: 0.5rem 0;
}

/* Track: hairline */
#budget::-webkit-slider-runnable-track {
  height: 2px;
  background: var(--hairline-strong);
  border-radius: 2px;
  border: none;
}

#budget::-moz-range-track {
  height: 2px;
  background: var(--hairline-strong);
  border-radius: 2px;
  border: none;
}

/* Thumb: white-to-cream circle, gold focus ring */
#budget::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff, var(--text));
  border: none;
  box-shadow:
    0 0 0 1px var(--hairline-strong),
    0 4px 10px -4px rgba(0, 0, 0, 0.6);
  cursor: ew-resize;
  margin-top: -8px;
  transition: box-shadow 200ms var(--ease-cinematic),
              transform 200ms var(--ease-cinematic);
}

#budget::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff, var(--text));
  border: none;
  box-shadow:
    0 0 0 1px var(--hairline-strong),
    0 4px 10px -4px rgba(0, 0, 0, 0.6);
  cursor: ew-resize;
  transition: box-shadow 200ms var(--ease-cinematic),
              transform 200ms var(--ease-cinematic);
}

#budget:hover::-webkit-slider-thumb {
  transform: scale(1.06);
  box-shadow:
    0 0 0 1px var(--hairline-strong),
    0 6px 14px -4px rgba(0, 0, 0, 0.7);
}

#budget:hover::-moz-range-thumb {
  transform: scale(1.06);
  box-shadow:
    0 0 0 1px var(--hairline-strong),
    0 6px 14px -4px rgba(0, 0, 0, 0.7);
}

#budget:focus-visible {
  outline: none;
}

#budget:focus-visible::-webkit-slider-thumb {
  box-shadow:
    0 0 0 1px var(--hairline-strong),
    0 0 0 4px rgba(232, 185, 116, 0.35),
    0 4px 10px -4px rgba(0, 0, 0, 0.6);
}

#budget:focus-visible::-moz-range-thumb {
  box-shadow:
    0 0 0 1px var(--hairline-strong),
    0 0 0 4px rgba(232, 185, 116, 0.35),
    0 4px 10px -4px rgba(0, 0, 0, 0.6);
}

#budget-out {
  font-family: 'Geist', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--accent-warm);
  white-space: nowrap;
  min-width: 6rem;
  text-align: right;
}

/* --- Consent checkbox ------------------------------------- */

.field-consent .consent-label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  cursor: pointer;
  line-height: 1.5;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.field-consent input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--accent);
  margin-top: 0.2rem;
  flex-shrink: 0;
  cursor: pointer;
}

/* --- Honeypot (visually hidden) --------------------------- */

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

/* --- Contact status / error messages ---------------------- */

#contact-status {
  font-size: 0.9rem;
  min-height: 1.4em;
  color: #ff8a8a;
}

#contact-status:empty {
  display: none;
}

/* --- Form success state ----------------------------------- */

.form-done {
  font-size: 1.1rem;
  color: rgba(243, 238, 226, 0.85);
  padding: 1.5rem 0;
  max-width: 560px;
  line-height: 1.6;
}

/* --- Submit button spacing -------------------------------- */

#contact-form .btn {
  align-self: flex-start;
  margin-top: 0.25rem;
}

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

.site-footer {
  background-color: transparent;
  border-top: 1px solid var(--hairline);
  padding: 3rem clamp(1.25rem, 5vw, 3.5rem);
  margin-top: 6rem;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2.5rem;
}

.footer-logo img {
  height: 24px;
  width: auto;
}

.footer-email {
  color: var(--text-muted);
  font-size: 0.9rem;
  transition: color 0.15s ease;
}

.footer-email:hover {
  color: var(--text);
}

.footer-copy {
  font-size: 0.85rem;
  color: var(--text-faint);
  margin-left: auto;
}

/* --- Portfolio filter chips ------------------------------- */

#work-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1.5rem;
}

.chip {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  background-color: transparent;
  color: rgba(243, 238, 226, 0.55);
  font-family: 'Geist', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 400ms var(--ease-cinematic),
              color 400ms var(--ease-cinematic),
              border-color 400ms var(--ease-cinematic);
  line-height: 1;
}

.chip:hover {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.22);
}

.chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 999px;
}

.chip.is-active {
  background-color: var(--text);
  border-color: var(--text);
  color: var(--bg);
}

/* --- Portfolio cards -------------------------------------- */

#work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.work-card {
  background-color: rgba(17, 20, 42, 0.85);
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid var(--hairline);
  transition: transform 500ms var(--ease-cinematic),
              border-color 400ms var(--ease-cinematic),
              box-shadow 500ms var(--ease-cinematic);
  display: flex;
  flex-direction: column;
}

.work-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.14);
}

.work-card h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--text);
  padding: 1rem 1rem 0.25rem;
}

.work-cat {
  font-family: 'Geist', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--accent-warm);
  padding: 0 1rem 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
}

.work-note {
  font-size: 0.9rem;
  color: var(--text-muted);
  padding: 0 1rem 1rem;
  line-height: 1.55;
  flex: 1;
}

/* --- Work thumbnail (16:9 button) ------------------------- */

.work-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: none;
  background: #080b14;
  cursor: pointer;
  overflow: hidden;
}

.work-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.work-thumb:hover img,
.work-thumb:focus-visible img {
  transform: scale(1.04);
  opacity: 0.85;
}

.work-thumb:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 0;
}

.work-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.25rem;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  transition: transform 0.15s ease, color 0.15s ease;
}

.work-thumb:hover .work-play,
.work-thumb:focus-visible .work-play {
  transform: scale(1.15);
  color: #ffffff;
}

/* --- Embedded YouTube iframe ------------------------------ */

.work-card iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
}

/* --- Brief Generator form --------------------------------- */

#brief-form {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.brief-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.brief-field > label,
.brief-placements-fieldset > legend {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(243, 238, 226, 0.9);
  line-height: 1.4;
}

.brief-field-hint {
  font-size: 0.82rem;
  color: var(--text-faint);
  line-height: 1.5;
  margin-top: 0.1rem;
}

.brief-field-hint-inline {
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--text-faint);
  margin-left: 0.25rem;
}

.brief-optional {
  font-weight: 400;
  font-size: 0.8rem;
  color: rgba(243, 238, 226, 0.45);
}

.brief-required {
  font-weight: 400;
  font-size: 0.8rem;
  color: rgba(232, 185, 116, 0.85);
}

.brief-field input[type="text"],
.brief-field input[type="email"],
.brief-field input[type="url"],
.brief-field select,
.brief-field textarea {
  background-color: var(--surface-glass);
  border: 1px solid var(--hairline-strong);
  border-radius: 0.6rem;
  color: var(--text);
  font-family: 'Geist', sans-serif;
  font-size: 0.975rem;
  padding: 0.75rem 1rem;
  width: 100%;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.brief-field input[type="text"]::placeholder,
.brief-field input[type="email"]::placeholder,
.brief-field input[type="url"]::placeholder,
.brief-field textarea::placeholder {
  color: rgba(243, 238, 226, 0.35);
}

.brief-field input[type="text"]:focus-visible,
.brief-field input[type="email"]:focus-visible,
.brief-field input[type="url"]:focus-visible,
.brief-field select:focus-visible,
.brief-field textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
  background-color: rgba(255, 255, 255, 0.06);
}

.brief-field textarea {
  resize: vertical;
  min-height: 5rem;
  line-height: 1.55;
}

.brief-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23e8b974' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  padding-right: 2.25rem;
  cursor: pointer;
}

.brief-field select option {
  background-color: #131829;
  color: var(--text);
}

/* Placements fieldset */

.brief-placements-fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

.brief-placements-fieldset > legend {
  margin-bottom: 0.75rem;
}

.brief-placements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.5rem;
}

.brief-placement-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--surface-glass);
  border: 1px solid var(--hairline-strong);
  border-radius: 0.6rem;
  padding: 0.6rem 0.875rem;
  font-size: 0.875rem;
  color: rgba(243, 238, 226, 0.75);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
  line-height: 1;
}

.brief-placement-label:hover {
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--text);
}

.brief-placement-label input[type="checkbox"] {
  accent-color: var(--accent);
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  cursor: pointer;
}

.brief-placement-label:has(input:checked) {
  border-color: rgba(232, 185, 116, 0.6);
  background-color: rgba(232, 185, 116, 0.06);
  color: var(--text);
}

/* Consent */

.brief-consent-field {
  gap: 0.6rem;
}

.brief-consent-label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.brief-consent-label input[type="checkbox"] {
  accent-color: var(--accent);
  width: 1rem;
  height: 1rem;
  margin-top: 0.2rem;
  flex-shrink: 0;
  cursor: pointer;
}

.brief-consent-link {
  text-decoration: underline;
  color: inherit;
  transition: color 0.15s ease;
}

.brief-consent-link:hover {
  color: rgba(243, 238, 226, 0.85);
}

.brief-privacy-note {
  font-size: 0.75rem;
  color: var(--text-faint);
  line-height: 1.5;
}

/* Error / stage messages */

.brief-error {
  font-size: 0.875rem;
  color: #ff8a8a;
  background-color: rgba(255, 100, 100, 0.06);
  border: 1px solid rgba(255, 100, 100, 0.2);
  border-radius: 0.6rem;
  padding: 0.6rem 0.875rem;
  line-height: 1.5;
  max-width: 640px;
}

.brief-stage {
  font-size: 0.85rem;
  color: rgba(108, 143, 255, 0.7);
  font-style: italic;
  max-width: 640px;
}

/* Submit button */

.brief-submit-btn {
  align-self: flex-start;
  margin-top: 0.25rem;
}

.brief-submit-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Streamed brief output */

.brief-out {
  background-color: var(--surface-glass);
  border: 1px solid var(--hairline-strong);
  border-radius: 1rem;
  color: rgba(243, 238, 226, 0.9);
  font-family: 'Geist Mono', ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9rem;
  line-height: 1.7;
  padding: 1.5rem;
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 760px;
  margin-top: 2rem;
  overflow-y: auto;
}

/* Done / confirmation block */

.brief-done {
  max-width: 640px;
  margin-top: 2rem;
  background-color: rgba(17, 20, 42, 0.85);
  border: 1px solid var(--hairline);
  border-radius: 1rem;
  padding: 1.75rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
}

.brief-done[hidden] {
  display: none;
}

.brief-done-sent {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--text);
}

.brief-done-body {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.brief-done-cta {
  margin-top: 0.5rem;
}

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

@media (max-width: 768px) {
  .hero {
    min-height: auto;
    padding-top: 7rem;
    padding-bottom: 5rem;
  }

  .hero-content {
    gap: 1.25rem;
  }

  .hook-intro {
    margin-top: 2rem;
    padding-top: 2rem;
  }
}

@media (max-width: 640px) {
  .site-header {
    top: 0.75rem;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    gap: 0.85rem;
    max-width: calc(100% - 1.5rem);
  }

  .header-logo img {
    height: 22px;
  }

  .btn-outline {
    padding: 0.45rem 0.95rem;
    font-size: 0.8rem;
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-copy {
    margin-left: 0;
  }
}

@media (min-width: 1280px) {
  .hero-content {
    max-width: 1000px;
  }
}

/* --- Small-mobile hero refinements (Pass 2) ---------------- */
@media (max-width: 374px) {
  .hero-content h1 {
    max-width: none;
    font-size: clamp(2.5rem, 11vw, 3.25rem);
    letter-spacing: -0.022em;
  }
}

/* --- Scroll-reveal motion (Pass 2) ------------------------- */
/*
   Elements marked with [data-reveal] enter the page with a soft fade-up.
   Stagger via [data-reveal-delay] (transition-delay). Mirrored by JS in
   app.js, which adds .is-revealed on intersect.
*/

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 900ms var(--ease-cinematic),
    transform 900ms var(--ease-cinematic);
  will-change: opacity, transform;
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

[data-reveal][data-reveal-delay="1"] { transition-delay: 80ms; }
[data-reveal][data-reveal-delay="2"] { transition-delay: 160ms; }
[data-reveal][data-reveal-delay="3"] { transition-delay: 240ms; }
[data-reveal][data-reveal-delay="4"] { transition-delay: 320ms; }
[data-reveal][data-reveal-delay="5"] { transition-delay: 400ms; }

/*
   The hero CTA is a [data-reveal] element AND uses .btn-primary hover physics
   (scale transform). Once .is-revealed lands, the inline transform resolves
   to `none`, so the .btn-primary:hover transform takes over cleanly.

   Belt-and-suspenders: the JS skips the observer entirely under reduced
   motion and reveals everything immediately, but we also guard via CSS so
   that no element is left hidden if the JS fails to run.
*/
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   Conversion Narrative Framework wordmark
   Carried from appvideos.co (same animated-gradient technique).
   Indigo swapped to brandamin's #6c8fff; teal/mint bridges kept
   so the wordmark reads as the studio's framework treatment
   wherever it appears across both sites.
   ============================================================ */

@keyframes brandamin-cnf-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.cnf-mark {
  background: linear-gradient(90deg, #94c7be, #6c8fff, #addbd8, #6c8fff, #94c7be);
  background-size: 300% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  animation: brandamin-cnf-flow 6s ease infinite;
  font-weight: 500;
  display: inline;
}

@media (prefers-reduced-motion: reduce) {
  .cnf-mark { animation: none; }
}