/* ==========================================================================
   JD WEB DESIGN. CHARCOAL AND CHAMPAGNE GOLD DESIGN SYSTEM
   ========================================================================== */

:root {
  --bg-black: #060709;
  --bg-charcoal-dark: #0a0c10;
  --bg-charcoal: #101319;
  --bg-charcoal-elevated: #151922;
  --bg-card: #12151c;
  --bg-card-hover: #181d26;
  --bg-input: #090b0f;

  --border-subtle: rgba(212, 175, 55, 0.12);
  --border-medium: rgba(212, 175, 55, 0.22);
  --border-accent: rgba(212, 175, 55, 0.4);

  --champagne-200: #e8dbb0;
  --champagne-300: #dbc78e;
  --champagne-400: #e3c887;
  --gold-500: #d4af37;
  --gold-600: #b89127;

  /* Text - warm champagne tones, nothing approaching white */
  --text-heading: #dcbf6d;
  --text-primary: #dbcfab;
  --text-body: #c5b997;
  --text-muted: #ac9f83;
  --text-subtle: #8e8269;

  --font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  --shadow-dark: 0 8px 30px rgba(0, 0, 0, 0.8);
  --shadow-gold: 0 4px 20px rgba(212, 175, 55, 0.18);
  --shadow-gold-hover: 0 8px 28px rgba(212, 175, 55, 0.32);
}

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

html {
  font-family: var(--font-main);
  background-color: var(--bg-black);
  color: var(--text-body);
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Ambient gold light that trails the pointer. Kept faint on purpose, and it exists at
   all only on devices with a fine pointer, gated in both CSS and JS: a touch screen has
   no persistent cursor position for it to track, so it would just sit stuck in one
   corner. See initCursorGlow() in main.js for the JS half of that gate. */
.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(220, 191, 109, 0.05) 0%, rgba(220, 191, 109, 0.018) 42%, transparent 70%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.cursor-glow.is-active { opacity: 1; }
@media (hover: none), (pointer: coarse) {
  .cursor-glow { display: none; }
}

body {
  background-color: var(--bg-black);
  color: var(--text-body);
  line-height: 1.65;
  overflow-x: hidden;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-heading);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

p { color: var(--text-body); font-size: 1rem; line-height: 1.65; }
a { color: inherit; text-decoration: none; }

.container-custom {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
}
@media (min-width: 768px) {
  .container-custom { padding: 0 2rem; }
}

/* Top bar */
.top-bar {
  background-color: #040507;
  border-bottom: 1px solid var(--border-medium);
  padding: 11px 0;
  z-index: 50;
  position: relative;
}
.top-bar-text {
  margin: 0;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--champagne-300);
}
@media (min-width: 768px) {
  .top-bar { padding: 13px 0; }
  .top-bar-text { font-size: 1.0625rem; }
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 45;
  background-color: rgba(6, 7, 9, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-subtle);
  transition: all 0.25s ease;
}
.site-header.scrolled {
  background-color: rgba(6, 7, 9, 0.98);
  border-bottom: 1px solid var(--border-medium);
  box-shadow: var(--shadow-dark);
}

.site-nav {
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 84px;
}
@media (min-width: 768px)  { .site-nav { height: 106px; } }
@media (min-width: 1024px) { .site-nav { height: 116px; } }
@media (min-width: 1280px) { .site-nav { height: 128px; } }

.nav-link {
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  transition: color 0.2s ease, background-color 0.2s ease;
}
.nav-link:hover,
.nav-link:focus-visible,
.nav-link[aria-current="page"] {
  color: var(--champagne-200);
  background-color: rgba(212, 175, 55, 0.09);
}

.mobile-nav-link[aria-current="page"] { color: var(--champagne-200); }

.brand-link[aria-current="page"] { pointer-events: none; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-main);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  padding: 0.75rem 1.375rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.22s ease-in-out;
  text-align: center;
}

.btn-primary {
  background: linear-gradient(135deg, #e0d4a8 0%, #cdb060 50%, #b89127 100%);
  color: #060709;
  box-shadow: var(--shadow-gold);
  border-color: #cdb060;
  font-weight: 700;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #e8dbb0 0%, #d4af37 50%, #cdb060 100%);
  transform: translateY(-1px);
  box-shadow: var(--shadow-gold-hover);
}

.btn-secondary {
  background: var(--bg-charcoal);
  color: var(--text-primary);
  border: 1px solid var(--border-medium);
}
.btn-secondary:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-accent);
  transform: translateY(-1px);
}

.btn-outline {
  background: transparent;
  color: var(--champagne-300);
  border: 1px solid var(--border-medium);
}
.btn-outline:hover {
  background: rgba(212, 175, 55, 0.08);
  border-color: var(--champagne-400);
  transform: translateY(-1px);
}

.btn-lg { padding: 0.875rem 1.75rem; font-size: 1rem; }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.875rem; }

/* Badges */
/* Cards */
.card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 2rem;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
  position: relative;
}
.card:hover {
  border-color: var(--border-accent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  transform: translateY(-2px);
}

/* Portfolio */
.portfolio-card {
  background-color: var(--bg-charcoal);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}
.portfolio-card:hover {
  border-color: var(--border-accent);
  transform: translateY(-3px);
  box-shadow: var(--shadow-dark);
}

.showcase-preview {
  background: linear-gradient(180deg, #090b10 0%, #0f1218 100%);
  padding: 2rem 1.5rem;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-bottom: 1px solid var(--border-subtle);
}

/* An actual live preview, for the one demo that has a real site behind it. The iframe
   is set to 400% of the frame's own width, then scaled back to 25%: the browser lays
   the page out at four times the frame's pixel width (a properly "desktop" width, so
   the embedded site's own responsive header and layout render the way they are meant
   to) and the transform shrinks the result back down to fit, at any card width, with
   no per-breakpoint tuning needed. pointer-events is off so it reads as a picture of
   the site, not a tiny scrollable copy of it. */
.showcase-preview--live {
  padding: 0;
  min-height: 0;
  height: 240px;
  overflow: hidden;
  position: relative;
  background-color: #050505;
}
.showcase-preview--live iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 300%;
  height: 720px;
  border: 0;
  pointer-events: none;
  transform: scale(0.3333);
  transform-origin: top left;
}
@media (min-width: 768px) {
  .showcase-preview--live { height: 280px; }
  .showcase-preview--live iframe { height: 840px; }
}

/* Service Box */
.service-box {
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.22s ease;
}
.service-box:hover {
  border-color: var(--border-medium);
  background-color: var(--bg-card-hover);
}

/* Timeline */
.timeline-card {
  background-color: var(--bg-charcoal);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
}
.timeline-card:hover { border-color: var(--border-medium); }
.timeline-badge {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--champagne-300);
  margin-bottom: 0.75rem;
}

/* FAQ */
.faq-item {
  background-color: var(--bg-charcoal);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: 0.75rem;
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.faq-item.active { border-color: var(--border-medium); background-color: var(--bg-charcoal-elevated); }
.faq-trigger {
  width: 100%;
  padding: 1.25rem 1.5rem;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text-heading);
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  gap: 1rem;
}
.faq-icon { font-size: 0.875rem; color: var(--champagne-400); transition: transform 0.25s ease; }
.faq-item.active .faq-icon { transform: rotate(45deg); }
.faq-content {
  display: none;
  padding: 0 1.5rem 1.25rem 1.5rem;
  color: var(--text-body);
  font-size: 0.9375rem;
  line-height: 1.65;
}
.faq-item.active .faq-content { display: block; }

/* Form */
.form-input {
  width: 100%;
  background-color: var(--bg-input);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  padding: 0.8125rem 1rem;
  color: var(--text-primary);
  font-family: var(--font-main);
  font-size: 0.9375rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-input:focus { border-color: var(--champagne-400); box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15); }
.form-input::placeholder { color: var(--text-subtle); }
.form-label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.375rem; }

.channel-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  background-color: var(--bg-input);
  border: 1px solid var(--border-medium);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  transition: all 0.2s ease;
  user-select: none;
}
.channel-pill:hover { border-color: var(--border-accent); color: var(--text-primary); }
.channel-pill.active { background-color: rgba(212, 175, 55, 0.14); border-color: var(--champagne-400); color: var(--champagne-200); }

.section-padding { padding: 5rem 0; }
@media (min-width: 768px) { .section-padding { padding: 6.5rem 0; } }
.section-divider { border-top: 1px solid var(--border-subtle); }

.mobile-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(6, 7, 9, 0.96);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--border-medium);
  padding: 0.75rem 1rem;
  z-index: 40;
  display: flex;
  gap: 0.75rem;
}
@media (min-width: 1024px) { .mobile-bottom-bar { display: none; } }


/* --------------------------------------------------------------------------
   Brand lockup
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Brand lockup

   Sizes are set on each image explicitly. A blanket `.brand-link img { height: auto }`
   outranks a single-class rule like `.brand-word`, which previously let the artwork
   render at its natural 662px and blow out of the sticky header.
   -------------------------------------------------------------------------- */

/* Header: wordmark over strapline. The monogram is left out here because beside its
   own wordmark it just repeats the name. It carries the footer instead. */
.brand-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  width: 212px;
  max-width: 52vw;
}
.brand-word { display: block; width: 100%; height: auto; }

/* Vector text, so the strapline is sharp at any size rather than being scaled up
   out of the source artwork. textLength pins it to the wordmark's exact width. */
.brand-strap { display: block; width: 100%; height: auto; overflow: visible; }
.brand-strap text {
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 600;
  fill: var(--champagne-300);
}

@media (min-width: 480px)  { .brand-link { width: 250px; } }
@media (min-width: 768px)  { .brand-link { width: 300px; gap: 8px; } }
@media (min-width: 1024px) { .brand-link { width: 340px; } }
@media (min-width: 1280px) { .brand-link { width: 400px; gap: 10px; } }

/* Footer: monogram above a "WEB DESIGN" wordmark, cropped from the same source art with
   the leading "JD" removed. Standing next to its own monogram, spelling the initials out
   twice just repeats the name. Both images are sized by height with width left intrinsic,
   not stretched to 100%, so the container can be exactly as wide as the wider of the two.
   That is what centers the wordmark on the monogram, rather than merely on empty space. */
.brand-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 253px;
  max-width: 100%;
}
.brand-lockup-mono { display: block; width: auto; height: 128px; }
.brand-lockup-word { display: block; width: auto; height: 32px; }
@media (min-width: 768px) {
  .brand-lockup { width: 316px; gap: 13px; }
  .brand-lockup-mono { height: 162px; }
  .brand-lockup-word { height: 40px; }
}

/* A quiet rule under the strapline, the width of the wordmark above it */
.brand-strap-rule {
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 7px;
  background: linear-gradient(90deg, transparent 0%, rgba(220, 191, 109, 0.6) 18%, rgba(220, 191, 109, 0.6) 82%, transparent 100%);
}
@media (min-width: 768px) { .brand-strap-rule { margin-top: 9px; height: 1.5px; } }

/* --------------------------------------------------------------------------
   About: running prose, and the practical side note beside it
   -------------------------------------------------------------------------- */
.prose-hand p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-body);
  max-width: 62ch;
}
.prose-hand p + p { margin-top: 1.25rem; }
@media (min-width: 768px) {
  .prose-hand p { font-size: 1.0625rem; }
}

.side-note {
  border-left: 2px solid var(--border-medium);
  padding: 0.25rem 0 0.25rem 1.5rem;
}
.side-note-label {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 1.25rem;
}
.side-note-list dt {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--champagne-400);
  margin-bottom: 0.3rem;
}
.side-note-list dd {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0 0 1.35rem 0;
}
.side-note-list dd:last-of-type { margin-bottom: 0; }
.side-note-foot {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--text-subtle);
}


/* --------------------------------------------------------------------------
   Service lists: plain text, no tick glyphs
   -------------------------------------------------------------------------- */
.service-list {
  list-style: none;
  margin: 0;
  padding: 1rem 0 0 0;
  border-top: 1px solid var(--border-subtle);
}
.service-list li {
  position: relative;
  padding-left: 0.9rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.service-list li + li { margin-top: 0.6rem; }
.service-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 4px;
  height: 1px;
  background-color: var(--champagne-400);
}

.services-note {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-subtle);
  max-width: 68ch;
}
.services-note h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 0.75rem;
}
.services-note p {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--text-body);
}

.side-note-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 1.25rem;
}
.side-note-actions .btn { flex: 1 1 9rem; }

.btn-whatsapp {
  background-color: rgba(37, 211, 102, 0.12);
  color: #86e8ac;
  border: 1px solid rgba(37, 211, 102, 0.35);
}
.btn-whatsapp:hover {
  background-color: rgba(37, 211, 102, 0.2);
  border-color: rgba(37, 211, 102, 0.6);
  color: #a6f0c4;
}

/* --------------------------------------------------------------------------
   Mobile and tablet
   -------------------------------------------------------------------------- */

/* Nothing may push the page sideways */
img, svg, video { max-width: 100%; }
.faq-trigger span, .side-note-list dd, p, li, h1, h2, h3, h4 { overflow-wrap: break-word; }

/* Fixed bottom bar: clear the iPhone home indicator, and keep it off the footer */
.mobile-bottom-bar {
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  padding-left: calc(1rem + env(safe-area-inset-left, 0px));
  padding-right: calc(1rem + env(safe-area-inset-right, 0px));
}
@media (max-width: 1023.98px) {
  body { padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)); }
}

/* Every tappable thing big enough to hit with a thumb */
.btn, .nav-link, .mobile-nav-link, .faq-trigger, .channel-pill {
  min-height: 44px;
  -webkit-tap-highlight-color: rgba(212, 175, 55, 0.15);
}
.btn { touch-action: manipulation; }

/* 16px minimum, otherwise iOS Safari zooms the page on focus */
.form-input,
select.form-input,
textarea.form-input {
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
  border-radius: var(--radius-md);
}
select.form-input {
  background-image: linear-gradient(45deg, transparent 50%, var(--champagne-400) 50%),
                    linear-gradient(135deg, var(--champagne-400) 50%, transparent 50%);
  background-position: calc(100% - 20px) 1.15em, calc(100% - 15px) 1.15em;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.75rem;
}

@media (max-width: 767.98px) {
  .section-padding { padding: 3.5rem 0; }
  h1 { letter-spacing: -0.015em; }
  .card, .service-box { padding: 1.5rem; }
  .faq-trigger { padding: 1.125rem 1.125rem; font-size: 0.9375rem; }
  .faq-content { padding: 0 1.125rem 1.125rem 1.125rem; }
  .side-note { padding-left: 1.125rem; }
  .showcase-preview { padding: 1.5rem 1rem; min-height: 0; }
  .btn-lg { width: 100%; }
}

/* Coarse pointers get no hover-lift, it only causes sticky states */
@media (hover: none) {
  .card:hover, .service-box:hover, .portfolio-card:hover,
  .timeline-card:hover, .btn:hover { transform: none; }
}

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


/* --------------------------------------------------------------------------
   Home page: short teaser list linking out to the Services page
   -------------------------------------------------------------------------- */
.home-service-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 0;
}
@media (min-width: 640px) {
  .home-service-list { grid-template-columns: 1fr 1fr; }
}
.home-service-list li {
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background-color: var(--bg-charcoal);
  transition: border-color 0.2s ease;
}
.home-service-list li:hover { border-color: var(--border-medium); }
.home-service-list a {
  display: block;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--text-heading);
  margin-bottom: 0.35rem;
}
.home-service-list span {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--text-muted);
}

/* Form failure message. Sits above the submit button, hidden until needed. */
.form-error {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #f0a9a9;
  background-color: rgba(190, 60, 60, 0.12);
  border: 1px solid rgba(190, 60, 60, 0.35);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
}
.form-error.hidden { display: none; }