/* ==========================================================================
   Pathway IT — content-writing.css
   Banner hero, colour-coded service cards, a dark six-step process with
   numbered markers, an SEO dashboard mock, a dark stats band, FAQ and CTA.
   ========================================================================== */

.cw-section { padding-block: clamp(3.5rem, 7vw, 5.5rem); background: var(--paper); }
.cw-section--tint { background: #FAFBFE; }
.cw-dark { padding-block: clamp(3.5rem, 7vw, 5rem); background: #060B1C; }
.cw-stats-wrap { padding-block: clamp(2rem, 4vw, 3rem); background: var(--paper); }
.cw-cta-wrap { padding-block: 0 clamp(3.5rem, 7vw, 5.5rem); background: var(--paper); }

/* Icon slots are filled with an SVG by content-writing.js. */
span[data-icon]:not([class]) { display: inline-flex; flex: none; vertical-align: middle; }
span[data-icon]:not([class]) svg { width: 1em; height: 1em; }

/* -------------------------------------------------------------------------- */
/* Hero banner                                                                */
/* -------------------------------------------------------------------------- */
.cw-hero { background: #04060F; padding-top: var(--header-h); }
.cw-hero-media { position: relative; max-width: 1600px; margin-inline: auto; }
.cw-banner { display: block; width: 100%; height: auto; }

/* Transparent overlay sitting exactly on the "Enquire Now" button baked into
   each banner. Percentages are measured from the artwork. */
.cw-hot {
  position: absolute; border: 0; background: transparent; padding: 0;
  cursor: pointer; border-radius: var(--r-pill);
  transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.cw-hot:hover { transform: scale(1.03); box-shadow: 0 10px 30px rgba(59, 130, 246, .45); }
.cw-hot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.cw-hot--desktop { left: 4.13%; top: 72.89%; width: 12.61%; height: 7.82%; }
.cw-hot--mobile  { left: 7.54%; top: 33.15%; width: 33.87%; height: 4.22%; display: none; }

@media (max-width: 760px) {
  .cw-hot--desktop { display: none; }
  .cw-hot--mobile  { display: block; }
}

/* -------------------------------------------------------------------------- */
/* Section headings                                                           */
/* -------------------------------------------------------------------------- */
.cw-head { text-align: center; max-width: 680px; margin: 0 auto clamp(2.2rem, 4.5vw, 3.2rem); }
.cw-head h2 {
  margin-top: 1rem;
  font-size: clamp(1.4rem, 2.7vw, 1.95rem);
  line-height: 1.3; letter-spacing: -.02em; color: var(--slate-900);
}
.cw-head > p { margin-top: .8rem; font-size: .86rem; line-height: 1.65; color: var(--slate-500); }

.cw-head--dark h2 { color: #fff; }
.cw-head--dark > p { color: #8A93B4; }
.eyebrow--dark {
  background: rgba(59, 130, 246, .14); border-color: rgba(96, 165, 250, .3); color: #93C5FD;
}

/* -------------------------------------------------------------------------- */
/* Services (3 x 2, colour-coded icon tiles)                                  */
/* -------------------------------------------------------------------------- */
.cw-serv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.cw-serv {
  position: relative;
  background: var(--paper); border: 1px solid #E7EAF4; border-radius: 14px;
  padding: 1.4rem 1.3rem 3.2rem;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.cw-serv:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(20, 22, 70, .09); border-color: #CFD5F5; }
.cw-serv-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; margin-bottom: 1rem; }
.cw-serv-ico svg { width: 19px; height: 19px; }
/* One tint per service, mirroring the reference palette. */
.cw-serv-ico.t-indigo { background: #EEF0FE; color: #4F46E5; }
.cw-serv-ico.t-green  { background: #E7F8EF; color: #16A34A; }
.cw-serv-ico.t-rose   { background: #FDECEC; color: #E11D48; }
.cw-serv-ico.t-amber  { background: #FDF4E3; color: #D97706; }
.cw-serv-ico.t-teal   { background: #E4F6F6; color: #0D9488; }
.cw-serv-ico.t-blue   { background: #E8F1FE; color: #2563EB; }

.cw-serv h3 { font-size: .95rem; margin-bottom: .5rem; color: var(--slate-900); }
.cw-serv p { font-size: .81rem; line-height: 1.6; color: var(--slate-500); }
.cw-serv-go {
  position: absolute; right: 1.2rem; bottom: 1.2rem;
  display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--indigo-50); color: var(--indigo);
  transition: background var(--t) var(--ease), color var(--t) var(--ease), transform var(--t) var(--ease);
}
.cw-serv-go svg { width: 13px; height: 13px; }
.cw-serv-go:hover { background: var(--indigo); color: #fff; transform: translateX(2px); }

@media (max-width: 1000px) { .cw-serv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cw-serv-grid { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------- */
/* Process (6 steps, light markers with a numbered badge)                     */
/* -------------------------------------------------------------------------- */
.cw-steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; list-style: none; }
.cw-step { position: relative; text-align: center; padding-inline: .2rem; }
.cw-step-mark { position: relative; z-index: 1; display: inline-block; margin-bottom: .8rem; }
.cw-step-ico {
  display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 50%; background: #F2F4FD; color: #1E2A56;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .06);
}
.cw-step-ico svg { width: 19px; height: 19px; }
.cw-step-n {
  position: absolute; top: -4px; right: -6px;
  display: grid; place-items: center; width: 19px; height: 19px;
  border-radius: 50%; background: var(--indigo); color: #fff;
  border: 2px solid #060B1C;
  font-size: .58rem; font-weight: 700; line-height: 1;
}
.cw-step:not(:last-child)::after {
  content: ""; position: absolute; top: 23px; height: 0;
  border-top: 1px dashed rgba(255, 255, 255, .18);
  left: calc(50% + 29px); right: calc(-50% + 29px);
}
.cw-step h3 { font-size: .84rem; margin-bottom: .35rem; color: #fff; }
.cw-step p { font-size: .72rem; line-height: 1.55; color: #8A93B4; }

@media (max-width: 1080px) {
  .cw-steps { grid-template-columns: repeat(3, 1fr); gap: 2rem 1rem; }
  .cw-step:nth-child(3n)::after { display: none; }
}
@media (max-width: 560px) {
  .cw-steps { grid-template-columns: repeat(2, 1fr); }
  .cw-step::after { display: none; }
}

/* -------------------------------------------------------------------------- */
/* Content that performs (mock + checklist)                                   */
/* -------------------------------------------------------------------------- */
.cw-split { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1.8rem, 4vw, 3.2rem); align-items: center; }
.cw-split-copy h2 {
  margin-top: 1rem;
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  line-height: 1.3; letter-spacing: -.02em; color: var(--slate-900);
}
.cw-checks { margin-top: 1.5rem; display: grid; gap: .8rem; }
.cw-checks li { display: flex; align-items: flex-start; gap: .6rem; font-size: .83rem; line-height: 1.5; color: var(--slate-700, #46506E); }
.cw-checks svg { width: 16px; height: 16px; color: var(--indigo); flex: none; margin-top: .1rem; }

@media (max-width: 900px) {
  .cw-split { grid-template-columns: 1fr; }
  .cw-mock { order: 2; }
  .cw-split-copy { order: 1; }
}

/* --- SEO dashboard mock (decorative) --- */
.cw-mock {
  background: var(--paper); border: 1px solid #E4E8F4; border-radius: 16px;
  box-shadow: 0 20px 50px rgba(20, 22, 70, .08);
  padding: 1.2rem;
}
.cw-mock-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.cw-mock-head b { font-size: .82rem; color: var(--slate-900); }
.cw-mock-pick {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid #E4E8F4; border-radius: 7px; padding: .28rem .55rem;
  font-size: .62rem; color: var(--slate-500);
}
.cw-mock-pick i {
  width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent;
  border-top: 4px solid var(--slate-400, #94A0BD);
}

.cw-mock-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin-bottom: 1.1rem; }
.cw-mock-kpis span { display: block; font-size: .55rem; color: var(--slate-400, #94A0BD); }
.cw-mock-kpis b { display: block; margin-top: .18rem; font-size: 1rem; letter-spacing: -.02em; color: var(--slate-900); }
.cw-mock-kpis em { font-style: normal; font-size: .55rem; color: #16A34A; }
/* Position falling is a win, but the reference shows the delta in red. */
.cw-mock-kpis em.down { color: #E11D48; }

.cw-mock-chart { position: relative; padding-left: 26px; }
.cw-mock-chart svg { display: block; width: 100%; height: 130px; }
.cw-mock-line { fill: none; stroke: var(--indigo); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.cw-mock-dot { fill: #fff; stroke: var(--indigo); stroke-width: 2; }
.cw-mock-yaxis {
  position: absolute; left: 0; top: 0; height: 130px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.cw-mock-yaxis li { font-size: .5rem; color: var(--slate-400, #94A0BD); }
.cw-mock-xaxis {
  display: flex; justify-content: space-between; margin-top: .35rem;
  padding-top: .35rem; border-top: 1px solid #EEF0F8;
}
.cw-mock-xaxis li { font-size: .5rem; color: var(--slate-400, #94A0BD); }

@media (max-width: 560px) { .cw-mock-kpis { grid-template-columns: repeat(2, 1fr); gap: .8rem .6rem; } }

/* -------------------------------------------------------------------------- */
/* Dark stats band                                                            */
/* -------------------------------------------------------------------------- */
.cw-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem 1rem;
  background: #060B1C; border-radius: 16px;
  padding: clamp(1.5rem, 3.2vw, 2.1rem) clamp(1.2rem, 3vw, 2rem);
  background-image: radial-gradient(120% 170% at 50% 0%, rgba(59, 130, 246, .16) 0%, transparent 62%);
}
.cw-stats li { display: flex; align-items: center; gap: .8rem; justify-content: center; }
.cw-stat-ico {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  border-radius: 11px; color: #93C5FD;
  background: rgba(59, 130, 246, .16); border: 1px solid rgba(96, 165, 250, .28);
}
.cw-stat-ico svg { width: 18px; height: 18px; }
.cw-stats b { display: block; font-size: clamp(1.15rem, 2.4vw, 1.5rem); letter-spacing: -.02em; color: #fff; line-height: 1.15; }
.cw-stats li span { font-size: .74rem; color: #98A2C0; }
.cw-stats li + li { border-left: 1px solid rgba(255, 255, 255, .08); }

@media (max-width: 860px) {
  .cw-stats { grid-template-columns: repeat(2, 1fr); }
  .cw-stats li + li { border-left: 0; }
  .cw-stats li { justify-content: flex-start; }
}
@media (max-width: 400px) { .cw-stats { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------- */
/* FAQ                                                                        */
/* -------------------------------------------------------------------------- */
.cw-faq { max-width: 780px; margin-inline: auto; }

/* -------------------------------------------------------------------------- */
/* Closing CTA band                                                           */
/* -------------------------------------------------------------------------- */
.cw-cta {
  display: flex; align-items: center; justify-content: space-between; gap: clamp(1.6rem, 4vw, 3rem);
  background: #060B1C; border-radius: 18px;
  padding: clamp(1.8rem, 3.6vw, 2.6rem) clamp(1.6rem, 3.6vw, 2.8rem);
  background-image: radial-gradient(110% 150% at 15% 0%, rgba(59, 130, 246, .2) 0%, transparent 60%);
}
.cw-cta-copy h2 { font-size: clamp(1.2rem, 2.2vw, 1.55rem); line-height: 1.35; color: #fff; letter-spacing: -.01em; }
.cw-cta-copy p { margin-top: .6rem; font-size: .86rem; line-height: 1.6; color: #98A2C0; }

.cw-cta-action { flex: none; }
.cw-cta-form { display: flex; gap: .7rem; }
.cw-cta-form input {
  width: clamp(200px, 22vw, 260px);
  background: #111935; border: 1px solid #24304F; color: #fff;
  border-radius: 10px; padding: .8rem 1rem; font-size: .88rem;
}
.cw-cta-form input::placeholder { color: #6E779B; }
.cw-cta-form input:focus-visible { outline: 2px solid #60A5FA; outline-offset: 1px; }
.cw-cta-btn {
  background: var(--indigo); color: #fff; border-radius: 10px;
  padding: .8rem 1.3rem; font-size: .88rem; white-space: nowrap; gap: .45rem;
}
.cw-cta-btn:hover { background: #4338CA; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(79, 70, 229, .38); }

.cw-cta-points { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 1rem; }
.cw-cta-points li { display: flex; align-items: center; gap: .4rem; font-size: .76rem; color: #98A2C0; }
.cw-cta-points svg { width: 13px; height: 13px; color: #93C5FD; flex: none; }

@media (max-width: 940px) {
  .cw-cta { flex-direction: column; align-items: flex-start; }
  .cw-cta-copy h2 br { display: none; }
  .cw-cta-action { width: 100%; }
  .cw-cta-form input { width: 100%; flex: 1; }
}
@media (max-width: 520px) {
  .cw-cta-form { flex-direction: column; }
  .cw-cta-btn { justify-content: center; }
}