/* FrameCore Kits - shared site styles. Mobile first. No external fonts. */

:root {
  --orange: #ff6600;       /* brand orange: logo, accents, button fill */
  --orange-text: #b34700;  /* orange for text on white (5.5:1 contrast) */
  --black: #111111;
  --ink: #1a1a1a;
  --muted: #555555;
  --line: #e0e0e0;
  --soft: #f5f5f5;
  --white: #ffffff;
  --max: 1120px;
  --radius: 6px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  overflow-wrap: break-word;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
}

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

a { color: var(--orange-text); }
a:hover { color: var(--black); }

h1, h2, h3 { line-height: 1.2; color: var(--black); margin: 0 0 0.6em; }
h1 { font-size: 2rem; font-weight: 800; }
h2 { font-size: 1.5rem; font-weight: 800; }
h3 { font-size: 1.125rem; font-weight: 700; }
p { margin: 0 0 1em; }

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

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--black);
  color: var(--white);
  padding: 10px 14px;
  z-index: 100;
}
.skip-link:focus { left: 10px; top: 10px; }

/* ---------- Header ---------- */

.site-header {
  background: var(--white);
  border-bottom: 3px solid var(--orange);
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.logo {
  display: inline-block;
  padding: 8px 0;
  font-weight: 900;
  font-size: 1.375rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
}
.logo .k { color: var(--black); }
.logo .o { color: var(--orange); }

.nav-toggle {
  display: none;
  min-height: 44px;
  min-width: 64px;
  background: var(--white);
  color: var(--black);
  border: 2px solid var(--black);
  border-radius: var(--radius);
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  padding: 6px 12px;
  cursor: pointer;
}

.site-nav { width: 100%; }
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 4px;
}
.site-nav a {
  display: block;
  padding: 10px 12px;
  min-height: 44px;
  color: var(--black);
  text-decoration: none;
  font-weight: 600;
  border-radius: var(--radius);
}
.site-nav a:hover { background: var(--soft); }
.site-nav a[aria-current="page"]:not(.nav-apply) { box-shadow: inset 0 -3px 0 var(--orange); border-radius: 0; }
.site-nav .nav-apply[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--black); }
.site-nav .nav-apply { background: var(--orange); color: var(--black); }
.site-nav .nav-apply:hover { background: var(--black); color: var(--white); }
.site-nav .nav-login { border: 2px solid var(--black); padding: 8px 10px; }

/* With JS (class set in <head>), the mobile menu collapses behind the button.
   Without JS the full link list stays visible, so the nav is never blank. */
.js .nav-toggle { display: inline-block; }
.js .site-nav { display: none; }
.js .site-nav.is-open { display: block; max-height: calc(100vh - 70px); max-height: calc(100svh - 70px); overflow-y: auto; }
.js .site-nav ul { flex-direction: column; padding: 8px 0 4px; }

@media (min-width: 900px) {
  .js .nav-toggle, .nav-toggle { display: none; }
  .site-nav, .js .site-nav { display: block; width: auto; }
  .js .site-nav ul, .site-nav ul { flex-direction: row; align-items: center; padding: 0; }
  .site-nav a { min-height: 44px; display: flex; align-items: center; padding: 0 10px; }
  .site-nav .nav-login { padding: 0 10px; }
}

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

main { display: block; }

.section { padding: 48px 0; }
.section-soft { background: var(--soft); }
.section-dark { background: var(--black); color: #e6e6e6; }
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--white); }
.section-dark a:not(.btn) { color: var(--orange); }

.lead { font-size: 1.1875rem; color: var(--muted); max-width: 46rem; }
.section-dark .lead { color: #cccccc; }

.eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange-text);
  margin-bottom: 8px;
}
.section-dark .eyebrow { color: var(--orange); }

.hero { padding: 40px 0 48px; }
.hero h1 { font-size: 2.125rem; max-width: 20ch; }
@media (max-width: 360px) { h1, .hero h1 { font-size: 1.75rem; } .wrap { padding: 0 16px; } }
.hero-grid { display: grid; gap: 28px; align-items: center; }

.page-head { padding: 40px 0 28px; border-bottom: 1px solid var(--line); }
.page-head h1 { margin-bottom: 0.3em; }
.page-head .lead { margin-bottom: 0; }

@media (min-width: 900px) {
  h1 { font-size: 2.5rem; }
  .hero h1 { font-size: 3rem; }
  .hero-grid { grid-template-columns: 1.1fr 1fr; gap: 48px; }
  .section { padding: 72px 0; }
}

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

.btn {
  display: inline-block;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: var(--radius);
  border: 2px solid var(--orange);
  background: var(--orange);
  color: var(--black);
  cursor: pointer;
}
.btn:hover { background: var(--black); border-color: var(--black); color: var(--white); }
.btn-outline { background: transparent; border-color: var(--black); color: var(--black); }
.btn-outline:hover { background: var(--black); color: var(--white); }
.section-dark .btn-outline { border-color: var(--white); color: var(--white); }
.section-dark .btn-outline:hover { background: var(--white); color: var(--black); }
.section-dark .btn:hover { background: var(--white); border-color: var(--white); color: var(--black); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
@media (max-width: 420px) {
  .btn-row .btn { flex: 1 1 100%; text-align: center; }
  .form .btn { width: 100%; }
}
.btn[disabled] { opacity: 0.6; cursor: wait; }

/* ---------- Grids and cards ---------- */

.grid { display: grid; gap: 20px; }
@media (min-width: 640px) { .grid-2, .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--orange);
  border-radius: var(--radius);
  padding: 20px;
}
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
.card .slot { margin: -20px -20px 16px; width: calc(100% + 40px); border-radius: 0; }
.card .slot > img { border-radius: 0; }

.ticks { list-style: none; padding: 0; margin: 0 0 1em; }
.ticks li { position: relative; padding-left: 20px; margin-bottom: 6px; }
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 9px;
  background: var(--orange);
}

.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: 16px; }
.steps li { counter-increment: step; position: relative; padding: 4px 0 0 52px; min-height: 40px; }
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  font-weight: 900;
  background: var(--orange);
  color: var(--black);
  border-radius: 50%;
}
.steps h3 { margin-bottom: 0.2em; }
.steps p { margin: 0; }
@media (min-width: 900px) { .steps-row { grid-template-columns: repeat(4, 1fr); } }

.split { display: grid; gap: 28px; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } }

.cta-band { text-align: left; }
.cta-band h2 { margin-bottom: 0.3em; }

/* ---------- Image slots ----------
   Each slot is drop-in: save the photo as public/images/img-XX.jpg and it
   covers the numbered placeholder. If the file is missing, the img's onerror
   removes it and the placeholder shows. See docs/IMAGE_SLOTS.md.
   <div class="slot r-4x3"><span class="slot-num">IMG-01</span><span class="slot-size">1600 x 1200</span><img src="/images/img-01.jpg" alt="..." width="1600" height="1200" onerror="this.remove()"></div>
   Ratio classes: r-16x9, r-4x3, r-3x2, r-1x1, r-21x9. */

.slot {
  position: relative;
  width: 100%;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: #d9d9d9;
  border: 2px dashed #8a8a8a;
  color: #333333;
  text-align: center;
  padding: 8px;
}
.slot-num { font-weight: 800; font-size: 2rem; line-height: 1.1; letter-spacing: 0.04em; }
.slot-size { font-weight: 700; font-size: 0.8125rem; }
@media (min-width: 900px) { .slot-num { font-size: 2.5rem; } }
.slot > img {
  position: absolute;
  top: -2px;
  left: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  max-width: none;
  object-fit: cover;
  border-radius: var(--radius);
}
.section-photo { padding-top: 32px; padding-bottom: 32px; }
@media (min-width: 900px) { .section-photo { padding-top: 48px; padding-bottom: 48px; } }
.section > .section-photo { padding-bottom: 0; }
.r-16x9 { aspect-ratio: 16 / 9; }
.r-21x9 { aspect-ratio: 21 / 9; }
.r-4x3 { aspect-ratio: 4 / 3; }
.r-3x2 { aspect-ratio: 3 / 2; }
.r-1x1 { aspect-ratio: 1 / 1; }

/* ---------- FAQ ---------- */

.faq { max-width: 50rem; }
.faq h2 { margin-top: 1.6em; }
.faq h2:first-child { margin-top: 0; }
.faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq summary {
  cursor: pointer;
  font-weight: 700;
  padding: 12px 28px 12px 0;
  position: relative;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 10px;
  font-weight: 900;
  color: var(--orange-text);
}
.faq details[open] summary::after { content: "-"; }
.faq details p { margin: 0 0 14px; color: #333333; }

/* ---------- Design (embed) page ---------- */

.embed-slot {
  border: 3px dashed var(--orange);
  border-radius: var(--radius);
  background: var(--soft);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}
.embed-placeholder { text-align: center; color: var(--muted); padding: 24px; margin: 0; }
.embed-credit { font-size: 0.8125rem; color: var(--muted); text-align: right; margin-top: 8px; }

/* Full-width designer. The Redline snippet may be an iframe, or a script
   that injects its own container (with an iframe inside). Either fills the
   slot at 100% width and --embed-h tall, and the placeholder hides as soon
   as anything is in the slot.
   Desktop and tablet: about 80vh, never shorter than 520px.
   Phones (under 768px): edge to edge, as tall as the visible screen minus
   the sticky header. svh (the screen with browser bars showing) is used
   rather than dvh, so the designer does not resize while the bars slide in
   and out; vh is the fallback. --header-h is measured by site.js; 78px is
   the closed header height if the script has not run. */
:root { --header-h: 78px; }
.embed-full { --embed-h: max(520px, 80vh); padding: 48px 12px; }
.embed-full .embed-slot { min-height: var(--embed-h); }
.embed-slot > :not(.embed-placeholder):not(script):not(style):not(link):not(noscript) {
  display: block;
  width: 100%;
  max-width: 100%;
  height: var(--embed-h, 520px);
  min-height: 0;
  margin: 0 auto;
  border: 0;
}
.embed-slot > :not(.embed-placeholder):not(script):not(style):not(link):not(noscript) iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.embed-slot:has(> :not(.embed-placeholder):not(script):not(style):not(link):not(noscript)) { border: 0; background: transparent; }
.embed-slot:has(> :not(.embed-placeholder):not(script):not(style):not(link):not(noscript)) .embed-placeholder { display: none; }
.embed-full .embed-credit { padding: 0 8px; }
.embed-full .embed-note { text-align: center; margin: 16px 0 0; }
@media (min-width: 900px) { .embed-full { padding: 48px 24px; } }

.steps-3 { margin-top: 20px; }
@media (min-width: 900px) { .steps-3 { grid-template-columns: repeat(3, 1fr); } }

@media (max-width: 767.98px) {
  /* 48px of page above and below the designer, so a finger outside it can
     always scroll the page past it. The sticky header also scrolls the page. */
  .embed-full { --embed-h: calc(100vh - var(--header-h)); padding: 48px 0; }
  .embed-full .embed-slot { border: 0; border-radius: 0; }
  .embed-full .embed-credit, .embed-full .embed-note { padding: 0 16px; }

  /* Compact heading and steps, so the designer is close to the top. */
  .page-head-design { padding: 20px 0 16px; }
  .page-head-design h1 { font-size: 1.625rem; margin-bottom: 0.25em; }
  .page-head-design .lead { font-size: 1rem; line-height: 1.5; }
  .page-head-design .steps-3 { margin-top: 14px; gap: 10px; }
  .page-head-design .steps li { padding: 0 0 0 38px; min-height: 28px; }
  .page-head-design .steps li::before { width: 28px; height: 28px; line-height: 28px; font-size: 0.9375rem; }
  .page-head-design .steps h3 { font-size: 1rem; line-height: 1.3; margin: 0; }
  .page-head-design .steps p { font-size: 1rem; line-height: 1.4; }
}
@supports (height: 100svh) {
  @media (max-width: 767.98px) { .embed-full { --embed-h: calc(100svh - var(--header-h)); } }
}
.embed-credit a { color: var(--muted); }

/* ---------- Forms ---------- */

.form { max-width: 40rem; }
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 700; margin-bottom: 6px; }
.field .hint { font-weight: 400; color: var(--muted); font-size: 1rem; }
.field input, .field textarea {
  width: 100%;
  font: inherit;
  padding: 10px 12px;
  border: 2px solid #8a8a8a;
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
}
.field input:focus, .field textarea:focus { border-color: var(--black); outline: 3px solid var(--orange); outline-offset: 0; }
.field textarea { min-height: 140px; resize: vertical; }
.field-row { display: grid; gap: 0 16px; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { padding: 14px 16px; border-radius: var(--radius); font-weight: 700; margin: 0 0 16px; }
.form-status[hidden] { display: none; }
.form-status.ok { background: #e7f6ec; border: 2px solid #1e7a3c; color: #14532d; }
.form-status.err { background: #fdecea; border: 2px solid #b42318; color: #7a1a12; }

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

.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.contact-list strong { display: block; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.contact-list a { font-size: 1.25rem; font-weight: 700; overflow-wrap: anywhere; display: inline-block; padding: 6px 0; min-height: 44px; }

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

.site-footer { background: var(--soft); border-top: 3px solid var(--orange); padding: 36px 0 28px; font-size: 1rem; }
.footer-grid { display: grid; gap: 20px; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0; }
.site-footer li a { display: inline-block; padding: 10px 0; min-height: 44px; overflow-wrap: anywhere; }
.site-footer .logo { padding: 10px 0; }
.site-footer a { color: var(--black); }
.site-footer .fine { color: var(--muted); margin-top: 20px; font-size: 0.8125rem; }

/* ---------- Commission example ---------- */

.calc {
  background: #1f1f1f;
  border: 1px solid #333333;
  border-top: 4px solid var(--orange);
  border-radius: var(--radius);
  padding: 20px;
}
.calc table { width: 100%; border-collapse: collapse; font-size: 1.0625rem; }
.calc th { text-align: left; font-weight: 600; color: #cccccc; padding: 10px 0; }
.calc td { text-align: right; font-weight: 800; color: var(--white); padding: 10px 0; white-space: nowrap; }
.calc tr + tr th, .calc tr + tr td { border-top: 1px solid #333333; }
.calc .calc-total th, .calc .calc-total td { color: var(--orange); font-size: 1.25rem; border-top: 2px solid var(--orange); }
.calc-note { font-size: 1rem; color: #aaaaaa; margin: 12px 0 0; }

/* ---------- Home showcase (photos only, no links) ---------- */

.showcase figure { margin: 0; }
.showcase figcaption { margin-top: 10px; font-weight: 800; font-size: 1.125rem; color: var(--black); }

/* ---------- Dealer deal strip ---------- */

.deal-band { background: var(--orange); padding: 28px 0; }
.deal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}
.deal li {
  background: var(--black);
  color: #e6e6e6;
  border-radius: var(--radius);
  padding: 16px 14px;
}
.deal strong { display: block; color: var(--orange); font-size: 1.75rem; font-weight: 900; line-height: 1.1; margin-bottom: 4px; }
.deal span { display: block; font-size: 1rem; line-height: 1.4; }
@media (max-width: 360px) { .deal { grid-template-columns: 1fr; } .deal strong { font-size: 1.5rem; } }
@media (min-width: 900px) { .deal { grid-template-columns: repeat(4, 1fr); gap: 16px; } .deal li { padding: 20px; } .deal strong { font-size: 2rem; } }