/* ==========================================================================
   Kredosys v2 — page skin (loads after style.css and v2-core.css)
   Re-skins the legacy components of every inner page in the v2 language:
   grey canvas, white cards, ink type in Plus Jakarta Sans, mono labels and
   buttons, framed heroes, dark rounded bands.
   ========================================================================== */

:root {
  --font-display: var(--sans);
  --font-body: var(--sans);
  --surface: #fff;
  --radius: 22px;
  --line-strong: rgba(11, 11, 12, .14);
  --fill: #E7E7E9;
  --fill-2: #EAEAEC;
  --fill-3: #DEDEE1;
  --muted-3: rgba(255, 255, 255, .62);
}

body { background: var(--bg); font-family: var(--sans); color: var(--ink); }
h1, h2, h3, h4 { font-family: var(--sans); }
a:hover { color: inherit; }
html { scroll-padding-top: 100px; }

/* -------------------------------------------------------------- type */

.page-title {
  font-size: clamp(40px, 6vw, 84px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.035em;
}
.section-title {
  font-size: clamp(32px, 4.4vw, 64px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.032em;
}
.page-lede, .section-lede { font-size: clamp(16px, 1.3vw, 18.5px); line-height: 1.6; color: var(--muted); }
.section-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 72px); }
.section-head .section-title { margin-top: 18px; }

/* eyebrow pill -> mono label */
.eyebrow,
.eyebrow-on-white,
.eyebrow-dark {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none !important;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.kicker { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }

/* -------------------------------------------------------------- buttons */

.btn-primary { background: var(--dark); color: #fff; box-shadow: none; }
.btn-primary:hover { color: #fff; background: #000; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .55); }
.btn-ghost { background: transparent; border-color: var(--line-2); color: var(--ink); }
.btn-ghost:hover { color: var(--ink); border-color: var(--ink); }
.btn-onDark { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #fff; border-radius: var(--r-sm); }
.btn-onDark:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, .12); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 11.5px; border-radius: 10px; box-shadow: none; }
.cta .btn-primary, .post-cta .btn-primary { background: #fff; color: var(--ink); box-shadow: none; }
.cta .btn-primary:hover, .post-cta .btn-primary:hover { color: var(--ink); background: #fff; box-shadow: 0 16px 34px -16px rgba(0, 0, 0, .6); }
.link-more { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.link-more:hover { color: var(--accent); }

/* -------------------------------------------------------------- page heroes */

/* Light page heads become a framed white card under the floating header. */
.page-head {
  position: relative;
  max-width: none;
  margin: var(--frame);
  padding: clamp(130px, 13vw, 176px) var(--gutter) clamp(56px, 7vw, 96px);
  border-radius: var(--r-xl);
  background: var(--card);
  overflow: hidden;
  isolation: isolate;
}
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgba(11, 11, 12, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11, 11, 12, .045) 1px, transparent 1px);
  background-size: 72px 72px;
  background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 35%, #000 25%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 80% at 50% 35%, #000 25%, transparent 100%);
}
.page-head::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -70%;
  z-index: -1;
  width: min(1100px, 150vw);
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(109, 59, 236, .3), rgba(185, 161, 255, .14) 55%, transparent);
  pointer-events: none;
}
.page-head > * { max-width: 1040px; margin-inline: auto; }
.page-head-center { text-align: center; }
.page-head .page-title { margin-top: 18px; }
.page-head .page-lede { max-width: 640px; margin-top: 22px; }
.page-head-center .page-lede { margin-inline: auto; }
.breadcrumb { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; }
.page-head-center .breadcrumb { justify-content: center; }

/* /it dark hero -> framed dark card. */
.sw-hero-band {
  margin: var(--frame);
  border-radius: var(--r-xl);
  border-bottom: 0;
  background: var(--dark);
}
.sw-hero-band .eyebrow { color: rgba(255, 255, 255, .7); }
.swh { padding-top: clamp(130px, 12vw, 160px); }
.swh-title { font-weight: 600; letter-spacing: -0.035em; }
.swh-actions .btn-light { border-radius: var(--r-sm); }

/* -------------------------------------------------------------- sections and bands */

.band { background: transparent; border: 0; }
.sw-feature-band { background: transparent; border: 0; }
/* Social reels stay a dark band, framed like the home page's dark sections. */
.sm-reels-band { margin: 0 var(--frame); border-radius: var(--r-xl); background: var(--dark); }
.sm-reels-band .eyebrow { color: rgba(255, 255, 255, .62); }
.section { padding-top: clamp(80px, 9vw, 130px); padding-bottom: clamp(80px, 9vw, 130px); }

/* Cards: white on grey, no hairlines, soft shadow on hover. */
.service-card,
.sw-industry,
.sw-step,
.sm-cover-item,
.tour-card,
.post-card,
.tl-proof-card,
.tl-shift,
.sw-app,
.sm-guide,
.tl-dash,
.feature-card {
  border: 0;
  border-radius: var(--r-lg);
  background: var(--card);
}
.service-card:hover, .sw-industry:hover, .post-card:hover, .tour-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 50px -32px rgba(0, 0, 0, .4);
}
.service-icon, .sw-step-num { border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.service-card h3, .service-card h4, .sw-cap-grid .service-card h4 { font-family: var(--sans); font-weight: 600; letter-spacing: -0.015em; }
.sw-cap-title { font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .1em; color: var(--muted); }
.sw-step { background: var(--card); }
.sw-industry-proof { border-top-color: var(--line); color: var(--accent); }
.sw-shot, .sw-feature-shot { border: 0; border-radius: var(--r-lg); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .5); }
.sw-shot::before, .sw-feature-shot::before { background: #F4F4F5; border-bottom-color: var(--line); }
.sw-facets li, .sw-jump a span { border-color: var(--line); }
.sw-kind { font-family: var(--mono); font-weight: 500; letter-spacing: .1em; }
.tl-shift li + li { border-top-color: var(--line); }

/* Tixibo feature band on /it: a white framed card. */
.sw-feature-band { padding-top: 0; padding-bottom: 0; }
.sw-feature {
  margin: 0 auto;
  padding: clamp(28px, 4vw, 52px);
  border-radius: var(--r-xl);
  background: var(--card);
  max-width: calc(var(--shell) - 2 * var(--gutter));
}

/* /it on-page navigation sits under the floating header. */
.sw-jump { top: calc(var(--frame) + var(--head-h) + 8px); background: transparent; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.sw-jump-inner { width: max-content; max-width: calc(100vw - 2 * var(--frame)); margin: 0 auto; padding: 6px; border-radius: 14px; background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 14px 34px -22px rgba(0, 0, 0, .45); }
.sw-jump a { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; border-radius: 10px; }
.sw-jump a.is-active { background: var(--dark); }
.sw-jump ~ section[id] { scroll-margin-top: 70px; }
.site-head.is-pill ~ main .sw-jump { top: calc(var(--frame) + 64px); }

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

.faq { gap: 10px; }
.faq-item { border: 0; border-radius: var(--r-md); background: var(--card); transition: box-shadow .4s; }
.faq-item.is-open { box-shadow: 0 20px 40px -30px rgba(0, 0, 0, .35); }
.faq-q { padding: 22px 22px 22px 26px; font-family: var(--sans); font-size: clamp(16.5px, 1.4vw, 19px); font-weight: 500; letter-spacing: -0.01em; }
.faq-icon { width: 34px; height: 34px; border-radius: 10px; background: var(--bg); color: var(--ink); font-size: 18px; }
.faq-q[aria-expanded="true"] .faq-icon { transform: rotate(135deg); background: var(--dark); color: #fff; }
.faq-a p { padding: 0 26px 24px; font-size: 16px; line-height: 1.65; }

/* -------------------------------------------------------------- contact CTA */

.section-contact { padding-bottom: clamp(64px, 7vw, 96px); }
.cta { border-radius: var(--r-xl); background: var(--dark); padding: clamp(56px, 7vw, 100px) clamp(22px, 5vw, 64px); }
.cta-glow { top: auto; bottom: -60%; width: 900px; height: 600px; background: radial-gradient(closest-side, rgba(109, 59, 236, .5), transparent); }
.cta-title { max-width: 20ch; font-size: clamp(32px, 4.6vw, 64px); font-weight: 500; letter-spacing: -0.032em; }
.cta-lede { color: rgba(255, 255, 255, .66); }

/* -------------------------------------------------------------- blog index + articles */

.topics .topic { border: 0; background: var(--card); font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; border-radius: 10px; }
.topics .topic[aria-pressed="true"] { background: var(--dark); color: #fff; }
.post-card { overflow: hidden; }
.post-card h2, .post-card h3 { font-family: var(--sans); font-weight: 600; letter-spacing: -0.015em; }
.post-meta { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }

.post {
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 56px) clamp(20px, 5vw, 64px);
  border-radius: var(--r-xl);
  background: var(--card);
}
.post-cover { border-radius: var(--r-lg); }
.post-body { font-size: 17.5px; line-height: 1.75; color: #2C2C31; }
.post-body h2 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; }
.post-body h3 { font-weight: 600; letter-spacing: -0.015em; }
.post-body a { text-decoration-color: rgba(109, 59, 236, .4); }
.post-body table { border-radius: 14px; overflow: hidden; }
.post-body th { background: var(--bg); font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.toc { margin: 28px 0 8px; padding: 20px 24px; border: 0; border-radius: var(--r-md); background: var(--bg); }
.toc li + li { margin-top: 6px; }
.standfirst { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--ink-2); margin-top: 26px; }
.toc h2 { font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.callout { border: 0; border-left: 3px solid var(--accent); border-radius: 0 14px 14px 0; background: var(--accent-soft); }
.post-cta { border-radius: var(--r-lg); background: var(--dark); }
.post-cta h2 { font-weight: 500; letter-spacing: -0.02em; font-size: clamp(24px, 2.6vw, 32px); }
.related { padding-top: clamp(64px, 8vw, 100px); }
.related h2 { font-size: clamp(28px, 3vw, 40px); font-weight: 500; letter-spacing: -0.03em; }

/* About page reading column. */
.section-narrow .post-body { padding: clamp(24px, 4vw, 44px); border-radius: var(--r-lg); background: var(--card); }

/* -------------------------------------------------------------- 360° tours page */

.tours-hero .page-title { max-width: 18ch; }
.tour-card { padding: 12px; }
.tour-media { border-radius: 16px; }
.tour-tag, .tour-open, .tour-scenes { font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.tour-card-meta h3 { font-weight: 600; letter-spacing: -0.015em; }

/* -------------------------------------------------------------- social page */

.sm-cover-item h3, .sm-guide h3 { font-weight: 600; letter-spacing: -0.015em; }

/* -------------------------------------------------------------- client estimate band */

.estimate-band { margin: var(--frame); border-radius: var(--r-xl); }
.estimate-band:not([hidden]) ~ .page-head,
.estimate-band:not([hidden]) ~ .sw-hero-band { margin-top: 0; }

/* -------------------------------------------------------------- responsive */

@media (max-width: 960px) {
  .sw-jump { top: calc(var(--frame) + 66px); }
}
@media (max-width: 600px) {
  .sm-reels-band { margin: 0 var(--frame); border-radius: 22px; }
  .page-head { padding: 112px 18px 52px; border-radius: 22px; }
  .page-title { font-size: clamp(36px, 10.5vw, 48px); }
  .section-title { font-size: clamp(30px, 8.8vw, 40px); }
  .sw-hero-band { border-radius: 22px; }
  .post { padding: 22px 18px 28px; border-radius: 22px; }
  .post-body { font-size: 16.5px; }
  .cta { border-radius: 22px; }
  .sw-feature { padding: 22px 18px; border-radius: 22px; }
  .sw-jump-inner { width: auto; }
}

/* Article meta under the title: readable sans, items never split mid-way. */
.page-head .post-meta { flex-wrap: wrap; gap: 6px 10px; font-family: var(--sans); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--muted); }
.page-head .post-meta time, .page-head .post-meta a { white-space: nowrap; }
.page-head .post-meta .kicker { white-space: nowrap; }

/* /it: breathing room between the live-work strip and the section bar. */
.vmq + .sw-jump, .vmq ~ .sw-jump { margin-top: 18px; }
.vh-frame + .vmq { padding-bottom: 8px; }

/* Spec / rhythm cards (social, tours): borderless white like every other card. */
.spec { border: 0; border-radius: var(--r-lg); background: var(--card); }
.spec dt { font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }