/* Enkay Studio — the custom-software arm at /services/.
   Loaded only by that page. Every colour comes from the tokens in
   styles.css, so this file inherits light and dark mode for free and the
   two halves of the site cannot drift apart. Classes are prefixed sv- to
   keep them from colliding with the product page. */

/* ---- Hero -------------------------------------------------------------- */

.sv-hero { padding: clamp(48px, 7vw, 84px) 0 clamp(44px, 6vw, 72px); }
.sv-hero > .wrap { max-width: 1240px; }
.sv-hero-grid { display: grid; grid-template-columns: 1fr; gap: clamp(34px, 4vw, 52px); align-items: center; }
@media (min-width: 1000px) { .sv-hero-grid { grid-template-columns: 1fr 1.05fr; } }

.sv-hero h1 { font-size: clamp(2.05rem, 4.9vw, 3.15rem); font-weight: 800; }
.sv-hero .sv-sub { margin-top: var(--sp-4); font-size: clamp(1.02rem, 2vw, 1.12rem); max-width: 48ch; }

/* The list of things we build, as chips rather than a sentence: a visitor
   scanning for "app" or "CRM" finds their own word in under a second. */
.sv-marks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-5); }
.sv-marks span {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid rgba(255,255,255,.18); border-radius: 100px;
  padding: 7px 14px; font-size: .82rem; font-weight: 600; color: #EAF0F8;
  background: rgba(255,255,255,.04);
}
.sv-marks i { width: 6px; height: 6px; border-radius: 50%; background: var(--c, #7FB2FF); flex-shrink: 0; }

/* One system, every screen. A browser frame with a phone lapping its corner
   says "web + mobile from the same build" without a word of copy. */
.sv-screens { position: relative; padding-bottom: 34px; }
.sv-win {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden;
}
.sv-win-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 14px; border-bottom: 1px solid var(--line-soft); background: var(--bg);
}
.sv-win-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.sv-win-bar em {
  font-style: normal; margin-left: 8px; font-size: .7rem; color: var(--muted);
  background: var(--white); border: 1px solid var(--line); border-radius: 100px;
  padding: 3px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sv-win-body { padding: 16px; display: grid; gap: 12px; }

.sv-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sv-kpi { border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 12px; background: var(--bg); }
.sv-kpi b { display: block; font-family: Manrope, sans-serif; font-size: 1.25rem; font-weight: 800; color: var(--navy); line-height: 1.1; font-variant-numeric: tabular-nums; }
.sv-kpi span { font-size: .68rem; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; font-weight: 600; }

.sv-chart { display: flex; align-items: flex-end; gap: 6px; height: 92px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.sv-chart i { flex: 1; border-radius: 3px 3px 0 0; background: color-mix(in srgb, var(--blue) 28%, transparent); height: var(--h); }
.sv-chart i:nth-last-child(-n+2) { background: var(--blue); }

.sv-rows { display: grid; gap: 7px; }
.sv-row { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px; background: var(--bg); font-size: .78rem; }
.sv-row s { text-decoration: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .62rem; font-weight: 700; color: #fff; background: var(--c, var(--blue)); }
.sv-row b { color: var(--navy); font-weight: 600; }
.sv-row em { font-style: normal; font-size: .68rem; font-weight: 700; padding: 3px 9px; border-radius: 100px; background: var(--soft); color: var(--blue); }

/* The phone sits outside the frame on wide screens and tucks back into the
   flow on narrow ones, where an overlap would only cover the content. */
.sv-phone {
  width: 148px; border-radius: 22px; background: var(--white);
  border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  padding: 9px; margin: -22px auto 0;
}
@media (min-width: 620px) {
  .sv-phone { position: absolute; right: 0; bottom: 0; margin: 0; }
  /* Reserve the gutter the phone sits in. The window narrows and its body
     keeps a wider right inset, so the phone laps the card's edge without
     covering a status chip. */
  .sv-screens { padding-right: 120px; }
  .sv-win-body { padding-right: 58px; }
}
.sv-phone-top { display: flex; justify-content: center; margin-bottom: 8px; }
.sv-phone-top i { width: 34px; height: 4px; border-radius: 100px; background: var(--line); }
.sv-phone-screen { background: var(--bg); border: 1px solid var(--line-soft); border-radius: 14px; padding: 10px; display: grid; gap: 7px; }
.sv-pl { height: 8px; border-radius: 100px; background: var(--line); }
.sv-pl.w70 { width: 70%; } .sv-pl.w45 { width: 45%; } .sv-pl.w85 { width: 85%; }
.sv-pcard { border: 1px solid var(--line); border-radius: 9px; padding: 8px; background: var(--white); display: grid; gap: 5px; }
.sv-pbtn { border-radius: 8px; background: var(--blue); color: #fff; font-size: .6rem; font-weight: 700; text-align: center; padding: 7px; }

/* ---- Section furniture ------------------------------------------------- */

.sv-head { max-width: 60ch; }
.sv-head .sec-title { margin-top: var(--sp-3); }

/* ---- What we build ----------------------------------------------------- */

.sv-caps { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: var(--sp-6); }
@media (min-width: 620px) { .sv-caps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .sv-caps { grid-template-columns: repeat(3, 1fr); } }

.sv-cap {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 22px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color .15s ease, transform .15s ease;
}
.band .sv-cap, .tint .sv-cap { background: var(--white); }
.sv-cap:hover { border-color: color-mix(in srgb, var(--blue) 38%, transparent); }
.sv-cap-ic {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--c) 13%, var(--white)); color: var(--c);
}
.sv-cap-ic svg { width: 21px; height: 21px; }
.sv-cap h3 { font-size: 1.02rem; }
.sv-cap p { font-size: .89rem; color: var(--muted); }
/* The delivery list is the part a buyer actually checks against their own
   requirement, so it is a list and not prose. */
.sv-cap ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.sv-cap li { display: grid; grid-template-columns: 15px 1fr; gap: 8px; align-items: start; font-size: .82rem; color: var(--muted); }
.sv-cap li svg { width: 15px; height: 15px; color: var(--c); margin-top: 3px; }

/* ---- Where you're starting from --------------------------------------- */

.sv-paths { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: var(--sp-6); }
@media (min-width: 860px) { .sv-paths { grid-template-columns: repeat(3, 1fr); } }
.sv-path {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--white); padding: 24px; display: flex; flex-direction: column; gap: 12px;
}
.sv-path .sv-quote { font-size: .95rem; color: var(--navy); font-weight: 600; line-height: 1.45; }
.sv-path .sv-quote::before { content: "\201C"; color: var(--blue); }
.sv-path .sv-quote::after { content: "\201D"; color: var(--blue); }
.sv-path p { font-size: .88rem; color: var(--muted); }
.sv-path-tag {
  align-self: flex-start; margin-top: auto; font-size: .72rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--white));
  border-radius: 100px; padding: 5px 12px;
}

/* ---- How we work ------------------------------------------------------- */

.sv-proc { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: var(--sp-6); }
@media (min-width: 700px) { .sv-proc { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1060px) { .sv-proc { grid-template-columns: repeat(6, 1fr); } }
/* Column layout so the timing label sits on the card's bottom edge. The six
   cards are different lengths; without this the labels stagger and the row
   stops reading as one sequence. */
.sv-step {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--white); padding: 16px 15px;
  display: flex; flex-direction: column;
}
.tint .sv-step { background: var(--white); }
.sv-step .n {
  display: inline-grid; align-self: flex-start; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--soft); color: var(--blue); font-size: .72rem; font-weight: 800;
  font-variant-numeric: tabular-nums; margin-bottom: 10px;
}
.sv-step b { display: block; font-size: .92rem; color: var(--navy); font-weight: 700; }
.sv-step p { margin-top: 5px; font-size: .81rem; color: var(--muted); }
.sv-step em { display: block; margin-top: auto; padding-top: 12px; font-style: normal; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--blue); }

/* The promise that matters most in this section gets pulled out of the grid
   rather than buried as the seventh card. */
.sv-proc-note { margin-top: var(--sp-5); }

/* ---- Stack ------------------------------------------------------------- */

.sv-stack { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: var(--sp-6); }
@media (min-width: 760px) { .sv-stack { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .sv-stack { grid-template-columns: repeat(4, 1fr); } }
.sv-layer { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; background: var(--white); }
.band .sv-layer { background: var(--bg); }
.sv-layer b { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.sv-layer ul { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 7px; }
.sv-layer li { font-size: .8rem; font-weight: 600; color: var(--navy); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; }
.band .sv-layer li { background: var(--white); }

/* ---- Case study -------------------------------------------------------- */

.sv-case { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 48px); align-items: center; }
@media (min-width: 940px) { .sv-case { grid-template-columns: 1fr 1fr; } }
.sv-case-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: var(--sp-5); }
@media (min-width: 520px) { .sv-case-stats { grid-template-columns: repeat(4, 1fr); } }
.sv-stat { border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); padding: 14px; background: rgba(255,255,255,.04); }
.sv-stat b { display: block; font-family: Manrope, sans-serif; font-weight: 800; font-size: 1.35rem; color: #fff; line-height: 1.1; }
.sv-stat span { font-size: .72rem; color: #A9BCD4; }

/* ---- Engagement models ------------------------------------------------- */

.sv-eng { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: var(--sp-6); align-items: start; }
@media (min-width: 900px) { .sv-eng { grid-template-columns: repeat(3, 1fr); } }
.sv-model {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 26px; display: flex; flex-direction: column; gap: 14px; height: 100%;
}
.tint .sv-model { background: var(--white); }
.sv-model.featured { border-color: var(--blue); box-shadow: var(--shadow); }
.sv-model h3 { font-size: 1.08rem; }
.sv-model > p { font-size: .88rem; color: var(--muted); }
.sv-price { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.sv-price small { font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); width: 100%; }
.sv-price b { font-family: Manrope, sans-serif; font-weight: 800; font-size: 1.95rem; color: var(--navy); letter-spacing: -.03em; line-height: 1; }
.sv-price span { font-size: .85rem; color: var(--muted); }
.sv-model ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; font-size: .87rem; color: var(--muted); }
.sv-model li { display: grid; grid-template-columns: 17px 1fr; gap: 9px; align-items: start; }
.sv-model li svg { width: 17px; height: 17px; color: var(--blue); margin-top: 2px; }
.sv-model .btn { margin-top: auto; width: 100%; }

.sv-eng-note { margin-top: var(--sp-5); }

/* ---- Assurances -------------------------------------------------------- */

.sv-assure { display: grid; grid-template-columns: 1fr; gap: 1px; margin-top: var(--sp-6); background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 640px) { .sv-assure { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .sv-assure { grid-template-columns: repeat(3, 1fr); } }
.sv-as { background: var(--white); padding: 20px; display: grid; grid-template-columns: 34px 1fr; gap: 13px; align-items: start; }
.sv-as-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 13%, var(--white)); color: var(--c); }
.sv-as-ic svg { width: 18px; height: 18px; }
.sv-as b { display: block; font-size: .94rem; color: var(--navy); font-weight: 700; }
.sv-as p { margin-top: 4px; font-size: .84rem; color: var(--muted); }

/* ---- Enquiry ----------------------------------------------------------- */

.sv-contact { display: grid; grid-template-columns: 1fr; gap: clamp(30px, 4vw, 48px); align-items: start; }
@media (min-width: 940px) { .sv-contact { grid-template-columns: 1fr 1.05fr; } }

.sv-form { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); }
.sv-two { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 560px) { .sv-two { grid-template-columns: 1fr 1fr; } }
.sv-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.sv-field label { font-size: .85rem; font-weight: 600; color: var(--navy); }
.sv-field input, .sv-field select, .sv-field textarea {
  font: 400 .95rem Inter, sans-serif; color: var(--text);
  background: var(--white); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px; width: 100%;
}
.sv-field textarea { resize: vertical; min-height: 92px; }
.sv-field input:focus, .sv-field select:focus, .sv-field textarea:focus { outline: 3px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.sv-field[data-invalid="true"] input, .sv-field[data-invalid="true"] select, .sv-field[data-invalid="true"] textarea { border-color: var(--overdue); }
.sv-err { font-size: .8rem; color: var(--overdue); min-height: 1.1em; }
.sv-phone-in { display: flex; align-items: center; gap: 0; }
.sv-phone-in .cc {
  font-size: .92rem; font-weight: 600; color: var(--muted);
  border: 1px solid var(--line); border-right: 0; border-radius: 10px 0 0 10px;
  padding: 12px 12px; background: var(--bg); white-space: nowrap;
}
.sv-phone-in input { border-radius: 0 10px 10px 0; }

.sv-ok {
  display: none; align-items: flex-start; gap: 12px; margin-top: var(--sp-4);
  border: 1px solid color-mix(in srgb, var(--won) 34%, transparent);
  background: var(--won-soft); color: var(--won);
  border-radius: var(--radius); padding: 16px 18px; font-size: .92rem;
}
.sv-ok.on { display: flex; }
.sv-ok strong { color: var(--won); }

/* What happens after you press send. Stated plainly, because "we'll get back
   to you" is the line every visitor has been let down by before. */
.sv-next { display: grid; gap: 12px; }
.sv-next-row { display: grid; grid-template-columns: 30px 1fr; gap: 13px; align-items: start; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); padding: 15px 17px; }
.tint .sv-next-row { background: var(--white); }
.sv-next-row s { text-decoration: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: .76rem; font-weight: 800; background: var(--soft); color: var(--blue); }
.sv-next-row b { display: block; font-size: .92rem; color: var(--navy); font-weight: 700; }
.sv-next-row p { margin-top: 3px; font-size: .84rem; color: var(--muted); }

/* ---- Cross-link to the product ---------------------------------------- */

.sv-xlink {
  display: grid; grid-template-columns: 1fr; gap: 18px; align-items: center;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--white); padding: clamp(22px, 3vw, 30px);
}
@media (min-width: 820px) { .sv-xlink { grid-template-columns: 1fr auto; } }
.sv-xlink h3 { font-size: 1.12rem; }
.sv-xlink p { margin-top: 6px; font-size: .92rem; color: var(--muted); max-width: 62ch; }

/* ---- Dark-band corrections --------------------------------------------
   styles.css lightens headings, body copy and checks on a dark band, but not
   these four — on the product page they never sit on one. Scoped here rather
   than in the shared sheet so the product page is untouched. */

.dark-band .hl { color: #A5A0FA; }
.dark-band .sec-sub { color: #A9BCD4; }
.dark-band .pill-label {
  background: rgba(255,255,255,.09);
  color: #C8D8EE;
  border: 1px solid rgba(255,255,255,.14);
}
.dark-band .crumbs, .dark-band .crumbs a { color: #8FA3BD; }
.dark-band .crumbs a:hover { color: #fff; }
.dark-band .sv-cap, .dark-band .sv-layer { background: rgba(255,255,255,.04); }