/*
 * Designed page layouts (Home, About Us, Customization, Contact, Fabrics, Track Production).
 *
 * These pages are ordinary WordPress block content, so an admin edits text, images and buttons in the normal page editor.
 * Everything is plain CSS (no Tailwind needed) and is also loaded inside the editor, so what you see there matches the site.
 * Colour comes from --cct-accent (Appearance > Customize > Brand Colors & Fonts); default is near-black.
 */
.cct-section, .cct-hero, .cct-cta-wrap {
  --cct-ink: #0c0a09; --cct-muted: #57534e; --cct-line: #e7e5e4; --cct-soft: #fafaf9;
  --cct-brand: var(--cct-accent, #0c0a09);
  --cct-heading: var(--cct-heading-font, Georgia, "Times New Roman", serif);
  color: var(--cct-ink);
}

/* ---------- layout ---------- */
.cct-section { padding: clamp(56px, 8vw, 104px) 0; margin: 0; }
.cct-section--soft { background: var(--cct-soft); }
.cct-section--dark { background: var(--cct-ink); color: #fff; }
.cct-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.cct-section .wp-block-columns, .cct-hero .wp-block-columns { margin-bottom: 0; }
.cct-section .wp-block-column > *:last-child { margin-bottom: 0; }
.cct-head { max-width: 760px; margin-bottom: 44px; }
.cct-head.is-center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- typography ---------- */
.cct-section h1, .cct-hero h1, .cct-section h2, .cct-hero h2, .cct-section h3 {
  font-family: var(--cct-heading); font-weight: 700; color: inherit; letter-spacing: -0.02em; margin: 0 0 16px;
}
.cct-hero h1 { font-size: clamp(2.25rem, 5.2vw, 4.25rem); line-height: 1.04; margin-bottom: 22px; max-width: 16ch; }
.cct-section h2 { font-size: clamp(1.75rem, 3.5vw, 2.85rem); line-height: 1.1; }
.cct-section h3 { font-size: 1.15rem; line-height: 1.25; letter-spacing: -0.01em; }
.cct-section p, .cct-hero p { line-height: 1.7; margin: 0 0 14px; }
.cct-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: #78716c; margin: 0 0 16px; }
.cct-hero .cct-eyebrow, .cct-section--dark .cct-eyebrow { color: #a8a29e; }
.cct-tagline { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #d6d3d1; margin: 0 0 24px; }
.cct-lead { font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.75; color: var(--cct-muted); max-width: 46rem; }
.cct-hero .cct-lead, .cct-section--dark .cct-lead { color: #d6d3d1; }
.cct-muted { color: var(--cct-muted); font-size: 0.95rem; }

/* ---------- hero ---------- */
.cct-hero { position: relative; overflow: hidden; background: var(--cct-ink); color: #fff; padding: clamp(72px, 11vw, 150px) 0; margin: 0; }
.cct-hero .wp-block-image.cct-hero__bg { position: absolute; inset: 0; margin: 0; z-index: 0; }
.cct-hero .cct-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.36; display: block; }
.cct-hero > .cct-wrap { position: relative; z-index: 1; }

/* ---------- buttons ---------- */
.cct-section .wp-block-buttons, .cct-hero .wp-block-buttons { gap: 12px; margin: 28px 0 0; }
.cct-section .wp-block-button__link, .cct-hero .wp-block-button__link {
  background: var(--cct-brand); color: #fff; border-radius: 999px; padding: 0.95rem 1.8rem; font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; border: 1.5px solid var(--cct-brand); transition: transform .15s, opacity .15s;
}
.cct-section .wp-block-button__link:hover, .cct-hero .wp-block-button__link:hover { transform: translateY(-1px); opacity: 0.92; }
.cct-btn-light .wp-block-button__link { background: #fff !important; color: #0c0a09 !important; border-color: #fff !important; }
.cct-btn-outline .wp-block-button__link { background: transparent !important; color: inherit !important; border-color: currentColor !important; }
.cct-hero .cct-btn-outline .wp-block-button__link, .cct-section--dark .cct-btn-outline .wp-block-button__link { color: #fff !important; border-color: rgba(255,255,255,.55) !important; }

/* ---------- cards ---------- */
.cct-cards { gap: 24px; margin-bottom: 24px; }
.cct-cards > .wp-block-column { display: flex; }
.cct-card { background: #fff; border: 1px solid var(--cct-line); border-radius: 24px; padding: 28px; width: 100%; box-sizing: border-box; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.cct-section--soft .cct-card { background: #fff; }
.cct-card--tight { padding: 22px; border-radius: 20px; }
.cct-card--tight h3 { font-size: 1rem; margin-bottom: 6px; }
.cct-card--tight p { font-size: .88rem; color: var(--cct-muted); margin: 0; }
.cct-card p { color: var(--cct-muted); font-size: .95rem; }
.cct-icon { width: 48px; height: 48px; border-radius: 14px; background: #f5f5f4; display: flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; margin: 0 0 18px !important; }
.cct-check { list-style: none; margin: 14px 0 0; padding: 0; }
.cct-check li { position: relative; padding-left: 26px; margin: 0 0 9px; color: #44403c; font-size: .93rem; line-height: 1.5; list-style: none; }
.cct-check li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--cct-brand); font-weight: 700; }
.cct-tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: #f5f5f4; color: #57534e; border-radius: 999px; padding: 5px 11px; margin: 0 6px 6px 0 !important; }

/* ---------- split (image + text) ---------- */
.cct-split { align-items: center; gap: clamp(28px, 5vw, 64px); }
.cct-split figure, .cct-photos figure { margin: 0; }
.cct-split img { width: 100%; height: auto; border-radius: 28px; display: block; object-fit: cover; }
.cct-photos { gap: 18px; }
.cct-photos img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 22px; display: block; }
.cct-photos figcaption { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #78716c; margin-top: 10px; }

/* ---------- process steps ---------- */
.cct-steps { gap: 20px; margin-bottom: 20px; }
.cct-step { border-top: 2px solid var(--cct-ink); padding-top: 18px; }
.cct-step__num { font-size: 12px; font-weight: 700; letter-spacing: .2em; color: #a8a29e; margin: 0 0 10px !important; }
.cct-step p { color: var(--cct-muted); font-size: .9rem; }
.cct-flow { flex-wrap: wrap !important; gap: 10px; }
.cct-flow > .wp-block-column { flex: 1 1 calc(11.11% - 10px) !important; min-width: 112px; }
.cct-flow__step { background: #fff; border: 1px solid var(--cct-line); border-radius: 18px; padding: 16px 12px; text-align: center; position: relative; }
.cct-flow__step .cct-step__num { margin-bottom: 4px !important; }
.cct-flow__step h3 { font-size: .9rem; margin: 0; }
@media (max-width: 781px) {
  .cct-flow > .wp-block-column { flex: 1 1 calc(33.33% - 10px) !important; min-width: 0; }
  .cct-flow.wp-block-columns { flex-direction: row !important; }
}
@media (min-width: 782px) {
  .cct-flow__step::after { content: "\2192"; position: absolute; right: -14px; top: 50%; transform: translateY(-50%); color: #a8a29e; font-size: 14px; z-index: 1; }
  .cct-flow > .wp-block-column:last-child .cct-flow__step::after { content: none; }
}

/* ---------- stats ---------- */
.cct-stat { text-align: left; }
.cct-stat__value { font-family: var(--cct-heading); font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 700; margin: 0 !important; line-height: 1.1; }
.cct-stat__label { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #78716c; margin: 6px 0 0 !important; }

/* ---------- final call to action ---------- */
.cct-cta { background: var(--cct-ink); color: #fff; text-align: center; border-radius: 32px; padding: clamp(44px, 7vw, 84px) clamp(20px, 5vw, 64px); }
.cct-cta h2 { color: #fff; max-width: 22ch; margin: 0 auto 16px; }
.cct-cta p { color: #d6d3d1; max-width: 44rem; margin: 0 auto; font-size: 1.05rem; }
.cct-cta .wp-block-buttons { justify-content: center; }

/* ---------- misc ---------- */
.cct-contact-line { margin: 0 0 6px !important; font-size: 1.05rem; font-family: var(--cct-heading); font-weight: 700; }
.cct-contact-form-box { background: #fff; border: 1px solid var(--cct-line); border-radius: 28px; padding: clamp(22px, 4vw, 40px); }
.cct-designed-page .entry-content > * { max-width: none; }

/* ---------- fallback: columns work even if WordPress's block stylesheet is not loaded ---------- */
.cct-section .wp-block-columns, .cct-hero .wp-block-columns { display: flex; flex-wrap: wrap; gap: 24px; }
.cct-section .wp-block-column { flex: 1 1 0; min-width: 0; }
.cct-section .wp-block-image img { max-width: 100%; height: auto; }
@media (max-width: 781px) {
  .cct-section .wp-block-columns:not(.is-not-stacked-on-mobile):not(.cct-flow) { flex-direction: column; }
  .cct-section .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: 100% !important; }
}
.cct-section .wp-block-columns.cct-cards { gap: 24px; }
.cct-section .wp-block-columns.cct-split { gap: clamp(28px, 5vw, 64px); }