/* ===== MTL VISIBLE — Production Stylesheet ===== */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

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

:root {
  --ink: #14171A;
  --paper: #FAFAF8;
  --yellow: #F5D907;
  --teal: #0EA5A0;
  --muted: #6B7280;
  --line: #E5E3DC;
}

body { font-family: 'Inter', sans-serif; color: var(--ink); background: var(--paper); }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 48px; }

/* ===== HEADER ===== */
header { border-bottom: 1px solid var(--line); background: var(--paper); position: sticky; top: 0; z-index: 100; }
header .bar { display: flex; justify-content: space-between; align-items: center; padding: 22px 0; }
.wordmark { font-family: 'Bebas Neue', sans-serif; font-size: 24px; letter-spacing: 0.02em; }
.wordmark .dot { color: var(--teal); }
.wordmark-sub { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }

nav { display: flex; align-items: center; }
nav a { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 15px; color: var(--ink); text-decoration: none; margin-left: 30px; }
nav a.active { border-bottom: 2px solid var(--teal); padding-bottom: 3px; }
nav a.cta { background: var(--ink); color: var(--paper); padding: 10px 20px; border-radius: 3px; border-bottom: none; }
.lang-switch { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 600; margin-left: 22px; padding-left: 22px; border-left: 1px solid var(--line); color: var(--muted); }
.lang-switch a { color: var(--muted); text-decoration: none; margin-left: 0; }

/* Mobile nav toggle */
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 4px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; transition: 0.2s; }

/* ===== BUTTONS ===== */
.btn { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 15px; padding: 13px 26px; border-radius: 3px; text-decoration: none; display: inline-block; cursor: pointer; border: none; }
.btn-solid { background: var(--ink); color: var(--paper); }
.btn-ghost { border: 1.5px solid var(--ink); color: var(--ink); background: transparent; }
.btn-yellow { background: var(--yellow); color: var(--ink); }

/* ===== HOME — HERO ===== */
.hero { padding: 90px 0 70px 0; }
.hero-eyebrow { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; font-size: 13px; color: var(--teal); }
.hero h1 { font-family: 'Bebas Neue', sans-serif; font-size: 64px; line-height: 0.95; text-transform: uppercase; margin-top: 14px; max-width: 640px; }
.hero h1 .accent { color: var(--teal); }
.hero-sub { font-family: 'Inter', sans-serif; font-size: 17px; line-height: 1.6; color: #3F4448; max-width: 480px; margin-top: 20px; }
.hero-ctas { margin-top: 28px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ===== HOME — STRIP ===== */
.strip { border-top: 1px solid var(--line); padding: 40px 0; display: flex; }
.strip .cell { flex: 1; padding-right: 30px; border-right: 1px solid var(--line); }
.strip .cell:last-child { border-right: none; }
.strip .cell-inner { padding-left: 0; }
.strip .label { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 17px; text-transform: uppercase; }
.strip .desc { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--muted); margin-top: 6px; max-width: 220px; }

/* ===== HOME — CASE PANEL ===== */
.case-panel { background: var(--ink); border-radius: 6px; padding: 50px; margin: 70px 0; display: flex; align-items: center; gap: 50px; }
.case-panel .txt { flex: 1.2; }
.case-eyebrow { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; font-size: 12px; color: var(--yellow); }
.case-panel h2 { font-family: 'Bebas Neue', sans-serif; font-size: 38px; color: var(--paper); text-transform: uppercase; margin-top: 8px; }
.case-panel p { font-family: 'Inter', sans-serif; font-size: 14px; color: #C9CDD3; margin-top: 12px; line-height: 1.6; max-width: 420px; }
.case-panel .link { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; color: var(--yellow); font-size: 14px; margin-top: 18px; display: inline-block; text-decoration: none; }
.case-img { flex: 1; height: 200px; border-radius: 4px; background: repeating-linear-gradient(45deg, rgba(255,255,255,0.06), rgba(255,255,255,0.06) 10px, rgba(255,255,255,0.02) 10px, rgba(255,255,255,0.02) 20px); display: flex; align-items: center; justify-content: center; color: #6B7280; font-family: 'Barlow Condensed', sans-serif; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; }

/* ===== CTA BAND ===== */
.cta-band { text-align: center; padding: 70px 0 90px 0; }
.cta-band h2 { font-family: 'Bebas Neue', sans-serif; font-size: 42px; text-transform: uppercase; }
.cta-band h2 .accent { color: var(--teal); }

/* ===== PAGE HEADER ===== */
.page-head { padding: 56px 0 30px 0; }
.page-eyebrow { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; font-size: 13px; color: var(--teal); }
.page-head h1 { font-family: 'Bebas Neue', sans-serif; font-size: 52px; text-transform: uppercase; margin-top: 10px; }
.page-sub { font-family: 'Inter', sans-serif; font-size: 16px; color: var(--muted); margin-top: 10px; max-width: 520px; }

/* ===== ABOUT ===== */
.story-section { padding: 40px 0 60px 0; border-top: 1px solid var(--line); }
.story-txt h2 { font-family: 'Bebas Neue', sans-serif; font-size: 34px; text-transform: uppercase; }
.story-txt p { font-family: 'Inter', sans-serif; font-size: 16px; color: #3F4448; line-height: 1.7; margin-top: 16px; max-width: 600px; }
.quote-panel { background: var(--ink); border-radius: 6px; padding: 34px 40px; margin-top: 32px; max-width: 620px; }
.quote-panel p { font-family: 'Bebas Neue', sans-serif; font-size: 26px; color: var(--paper); text-transform: none; line-height: 1.3; }
.quote-panel p .accent { color: var(--yellow); }
.cred-strip { padding: 40px 0; border-top: 1px solid var(--line); display: flex; gap: 20px; }
.cred-box { flex: 1; border: 1px solid var(--line); border-radius: 6px; padding: 20px; background: #fff; }
.cred-box .name { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 15px; }
.cred-box .detail { font-family: 'Inter', sans-serif; font-size: 12.5px; color: var(--muted); margin-top: 4px; }

/* ===== SERVICES ===== */
.tiers { display: flex; gap: 20px; padding: 30px 0 20px 0; border-top: 1px solid var(--line); }
.tier { flex: 1; border: 1px solid var(--line); border-radius: 6px; padding: 26px; background: #fff; }
.tier.featured { border: 2px solid var(--ink); position: relative; }
.tier.featured .flag { position: absolute; top: -12px; left: 26px; background: var(--yellow); color: var(--ink); font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 2px; }
.tier-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 13px; color: var(--muted); }
.tier-price { font-family: 'Bebas Neue', sans-serif; font-size: 42px; margin-top: 4px; }
.tier-price .cad { font-family: 'Barlow Condensed', sans-serif; font-size: 14px; color: var(--muted); }
.tier ul { list-style: none; margin-top: 16px; }
.tier li { font-family: 'Inter', sans-serif; font-size: 13px; color: #3F4448; padding-left: 16px; position: relative; margin-bottom: 8px; }
.tier li::before { content: "—"; position: absolute; left: 0; color: var(--teal); }
.hosting-band { background: var(--ink); border-radius: 6px; padding: 26px 30px; margin: 40px 0; }
.hosting-band h3 { font-family: 'Bebas Neue', sans-serif; font-size: 26px; color: var(--paper); text-transform: uppercase; }
.hosting-band h3 .accent { color: var(--yellow); }
.hosting-band p { font-family: 'Inter', sans-serif; font-size: 13.5px; color: #C9CDD3; margin-top: 8px; max-width: 560px; }
.addons { display: flex; gap: 20px; padding-bottom: 40px; }
.addon { flex: 1; border: 1px dashed var(--line); border-radius: 6px; padding: 20px; background: #FCFBF8; }
.addon .name { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 16px; text-transform: uppercase; }
.addon .price { font-family: 'Bebas Neue', sans-serif; font-size: 26px; color: var(--teal); margin-top: 4px; }
.addon .desc { font-family: 'Inter', sans-serif; font-size: 12.5px; color: var(--muted); margin-top: 6px; }

/* ===== PORTFOLIO ===== */
.case-study { border-top: 1px solid var(--line); padding: 40px 0 50px 0; }
.case-title { font-family: 'Bebas Neue', sans-serif; font-size: 40px; text-transform: uppercase; }
.case-meta { display: flex; flex-wrap: wrap; margin-top: 14px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.case-meta .m { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-right: 30px; margin-bottom: 6px; }
.case-meta .m b { color: var(--ink); font-weight: 600; }
.case-grid { display: flex; gap: 44px; margin-top: 28px; }
.case-col { flex: 1; }
.case-h { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 8px; }
.case-p { font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.6; color: #3F4448; }
.scope { margin-top: 30px; }
.scope-list { display: flex; flex-wrap: wrap; margin-top: 12px; gap: 10px; }
.scope-item { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 500; padding: 8px 14px; border: 1px solid var(--line); border-radius: 3px; background: #fff; }
.case-note { margin-top: 28px; background: var(--ink); border-radius: 6px; padding: 20px 24px; }
.case-note .lbl { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--yellow); display: block; margin-bottom: 6px; }
.case-note p { font-family: 'Inter', sans-serif; font-size: 13.5px; color: #C9CDD3; line-height: 1.55; }
.more-band { background: var(--ink); border-radius: 6px; padding: 40px 44px; margin: 60px 0; }
.more-band h2 { font-family: 'Bebas Neue', sans-serif; font-size: 30px; color: var(--paper); text-transform: uppercase; }
.more-band p { font-family: 'Inter', sans-serif; font-size: 14px; color: #C9CDD3; margin-top: 10px; max-width: 480px; }

/* ===== CONTACT ===== */
.contact-grid { display: flex; gap: 60px; border-top: 1px solid var(--line); padding: 40px 0 50px 0; }
.contact-info { flex: 1; }
.contact-info .row { padding: 16px 0; border-top: 1px solid var(--line); }
.contact-info .row:first-child { border-top: none; }
.contact-info .label { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.contact-info .val { font-family: 'Inter', sans-serif; font-size: 16px; margin-top: 3px; }
.contact-form { flex: 1; }
.contact-form label { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 600; margin: 14px 0 6px 0; text-transform: uppercase; letter-spacing: 0.04em; }
.contact-form label:first-of-type { margin-top: 0; }
.contact-form input, .contact-form textarea { width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: 4px; font-family: 'Inter', sans-serif; font-size: 14px; background: #fff; }
.contact-form textarea { min-height: 90px; resize: vertical; }
.contact-form button { margin-top: 18px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 15px; padding: 12px 26px; border-radius: 3px; background: var(--ink); color: var(--paper); border: none; cursor: pointer; }
.divider-band { display: flex; align-items: center; margin: 0 0 40px 0; }
.divider-band .line { flex: 1; height: 1px; background: var(--line); }
.divider-band .txt { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 14px; color: var(--muted); text-align: center; white-space: nowrap; padding: 0 20px; }
.ready-section { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 40px 44px; margin-bottom: 70px; }
.ready-eyebrow { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-size: 12px; color: var(--teal); }
.ready-section h2 { font-family: 'Bebas Neue', sans-serif; font-size: 30px; text-transform: uppercase; margin-top: 6px; }
.ready-section .sub { font-family: 'Inter', sans-serif; font-size: 14px; color: var(--muted); margin-top: 8px; max-width: 480px; }
.ready-grid { display: flex; gap: 30px; margin-top: 26px; }
.ready-col { flex: 1; }
.ready-col label { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 600; margin: 14px 0 6px 0; text-transform: uppercase; letter-spacing: 0.04em; }
.ready-col label:first-of-type { margin-top: 0; }
.ready-col input, .ready-col select, .ready-col textarea { width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: 4px; font-family: 'Inter', sans-serif; font-size: 14px; background: var(--paper); }
.ready-col textarea { min-height: 80px; resize: vertical; }
.radio-row { display: flex; flex-wrap: wrap; margin-top: 4px; }
.radio-row label { display: flex; align-items: center; font-family: 'Inter', sans-serif; font-size: 14px; text-transform: none; font-weight: 400; margin: 0 22px 6px 0; letter-spacing: 0; white-space: nowrap; }
.radio-row input[type="radio"] { flex-shrink: 0; width: 15px; height: 15px; margin: 0 6px 0 0; }
.ready-section button { margin-top: 24px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 15px; padding: 13px 28px; border-radius: 3px; background: var(--teal); color: #fff; border: none; cursor: pointer; }

/* ===== FOOTER ===== */
footer { border-top: 1px solid var(--line); padding: 30px 0; }
footer .foot-row { display: flex; justify-content: space-between; align-items: center; }
footer .foot-contact { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--muted); text-align: right; line-height: 1.6; }

/* ===== MOBILE — max 768px ===== */
@media (max-width: 768px) {
  .wrap { padding: 0 22px; }

  /* Header */
  header .bar { padding: 16px 0; flex-wrap: wrap; }
  .nav-toggle { display: block; margin-left: auto; }
  nav { display: none; flex-direction: column; align-items: flex-start; width: 100%; padding: 16px 0 10px 0; border-top: 1px solid var(--line); margin-top: 12px; }
  nav.open { display: flex; }
  nav a { margin-left: 0; margin-bottom: 14px; font-size: 18px; }
  nav a.cta { margin-top: 4px; display: inline-block; }
  .lang-switch { margin-left: 0; padding-left: 0; border-left: none; margin-bottom: 14px; }

  /* Hero */
  .hero { padding: 50px 0 40px 0; }
  .hero h1 { font-size: 44px; }
  .hero-sub { font-size: 15px; }
  .hero-ctas { flex-direction: column; gap: 10px; }
  .hero-ctas .btn { text-align: center; }

  /* Strip */
  .strip { flex-direction: column; }
  .strip .cell { border-right: none; border-bottom: 1px solid var(--line); padding-right: 0; padding-bottom: 22px; margin-bottom: 22px; }
  .strip .cell:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
  .strip .cell-inner { padding-left: 0 !important; }

  /* Case panel */
  .case-panel { flex-direction: column; padding: 32px 26px; gap: 24px; margin: 40px 0; }
  .case-img { width: 100%; }

  /* CTA band */
  .cta-band { padding: 50px 0 60px 0; }
  .cta-band h2 { font-size: 32px; }

  /* Page head */
  .page-head { padding: 36px 0 20px 0; }
  .page-head h1 { font-size: 36px; }

  /* About */
  .quote-panel { padding: 24px 22px; }
  .quote-panel p { font-size: 20px; }
  .cred-strip { flex-direction: column; gap: 12px; }

  /* Services */
  .tiers { flex-direction: column; }
  .addons { flex-direction: column; }

  /* Portfolio */
  .case-grid { flex-direction: column; gap: 28px; }

  /* Contact */
  .contact-grid { flex-direction: column; gap: 30px; }
  .ready-grid { flex-direction: column; gap: 0; }
  .ready-section { padding: 28px 22px; }

  /* Footer */
  footer .foot-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  footer .foot-contact { text-align: left; }
}

/* ===== TABLET — 769px to 1024px ===== */
@media (min-width: 769px) and (max-width: 1024px) {
  .wrap { padding: 0 32px; }
  .hero h1 { font-size: 52px; }
  .case-panel { padding: 36px; gap: 30px; }
  .ready-section { padding: 30px; }
}