/* ============================================================
   SylanOps - the four illustrated sections of the public site
   (about, values, process, contact)

   Everything here is scoped under .sx so it cannot reach the
   rest of the site. Tones are set on a wrapper with .tone-*
   and read back through two variables, so one class colours a
   whole card - icon tile, rule, number and wash together.
   ============================================================ */

.sx {
  position: relative;
  padding: 1.5rem 0 1.9rem;
  background: linear-gradient(180deg, #fbfdff 0%, #f4f9fd 100%);
  overflow: hidden;
}
/* The container is the one in style.css; these sections sit slightly wider in
   from the edge, matching the design. */
.sx .container { padding-inline: clamp(1.1rem, 4.3vw, 5rem); }

/* ---------- tones ---------- */
.tone-blue   { --tone: #2f7fe0; --tone-soft: #c9e2fe; --tone-soft-2: #e6f1ff; }
.tone-green  { --tone: #2bc0a0; --tone-soft: #aef5ea; --tone-soft-2: #e0fbf6; }
.tone-purple { --tone: #8b7ef0; --tone-soft: #e8ddfd; --tone-soft-2: #f4efff; }
.tone-amber  { --tone: #f0a93c; --tone-soft: #fee2bc; --tone-soft-2: #fff5e6; }
.tone-mint   { --tone: #4ec97f; --tone-soft: #cef8d4; --tone-soft-2: #eafcee; }
.tone-pink   { --tone: #f2879c; --tone-soft: #fddfe6; --tone-soft-2: #fff0f3; }

.sx .container { position: relative; z-index: 1; }

/* ---------- section heading ---------- */
.sx-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; margin-bottom: 1rem; }
.sx-head-main { flex: 1 1 auto; min-width: 0; }
.sx-head-note { flex: none; }

.sx-eyebrow {
  display: inline-flex; align-items: center; gap: .75rem; margin-bottom: .55rem;
  font-size: .84rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--cyan);
}
.sx-eyebrow i { width: 26px; height: 2px; background: var(--cyan); border-radius: 2px; }

.sx h2 {
  font-size: clamp(1.75rem, 2.7vw, 2.5rem); font-weight: 800; letter-spacing: -.03em;
  line-height: 1.1; margin: 0 0 .5rem; color: #0f2743; text-wrap: balance;
}
/* The highlight runs from blue into cyan across the phrase, which is what the
   design does - a flat blue reads noticeably colder. */
.sx h2 .hl {
  background: linear-gradient(95deg, #2f7fe0 10%, #0891b2 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sx-sub { color: #64758a; font-size: .98rem; margin: 0; line-height: 1.55; max-width: 62ch; }

/* the handwritten aside */
.sx-head-note { position: relative; flex: none; text-align: left; padding: .2rem 0 0; }
.sx .script { font-size: 1.62rem; color: #12233c; }

/* Two of these are inked in navy in the design and two in cyan, so the colour
   is set per section rather than once. */
.sx .swoosh { color: #1fa9cc; }
.sx-process .sx-head-note .swoosh,
.sx-contact .sx-head-note .swoosh { color: #1c2548; }
.sx .swoosh { width: 152px; height: 26px; margin: -.15rem 0 0 1.9rem; }

/* About, values and process are deliberately plain: a label, a dark heading,
   and content in neutral cards or a numbered row - no handwriting, colour
   washes or decorative lines. Contact still uses the handwritten note above. */
.sx-about, .sx-values, .sx-process { padding: 3.5rem 0; }
.sx-about .sx-head, .sx-values .sx-head, .sx-process .sx-head { margin-bottom: 1.6rem; }

/* ============================================================
   ABOUT - just the copy
   ============================================================ */
.about-lead { color: #4f6378; font-size: 1.02rem; line-height: 1.65; margin: 0 0 1rem; max-width: 70ch; }
.about-lead:last-of-type { margin-bottom: 0; }

/* ============================================================
   VALUES - four plain principle cards
   ============================================================ */
.principles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.principle {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.3rem 1.4rem; border-radius: 14px;
  background: #fff; border: 1px solid var(--line);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.principle:hover { border-color: #b9cde0; box-shadow: 0 10px 28px rgba(13, 32, 51, .06); }
.principle-ico {
  flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  color: var(--blue); background: #f0f5fb; border: 1px solid var(--line);
}
.principle-ico svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.principle h3 { font-size: 1.05rem; font-weight: 700; margin: .1rem 0 .3rem; color: #0f2743; }
.principle p { margin: 0; color: #5a6e82; font-size: .92rem; line-height: 1.55; }

/* ============================================================
   PROCESS - a numbered row joined by one thin line
   ============================================================ */
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(var(--steps, 5), minmax(0, 1fr)); gap: 1.6rem;
}
.step { position: relative; padding-top: 1.3rem; border-top: 2px solid #dbe6f0; }
/* The first step's line is drawn in the brand blue - where you start. */
.step:first-child { border-top-color: var(--blue); }
.step-no { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .08em; color: var(--blue); margin-bottom: .45rem; }
.step h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 .35rem; color: #0f2743; }
.step p { margin: 0; color: #5a6e82; font-size: .9rem; line-height: 1.55; }

/* ============================================================
   CONTACT - the enquiry form
   ============================================================ */
/* One centred column for the heading and the form, so neither stretches
   across a wide screen. */
.sx-contact .sx-head,
.contact-cols { max-width: 960px; margin-inline: auto; }

.form-card {
  background: #fff; border: 1px solid #e8f1f8; border-radius: 20px;
  padding: 1.45rem 1.6rem; box-shadow: 0 14px 40px rgba(31, 78, 128, .08);
}

.cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .72rem 1.3rem; }
.cf-field { display: flex; flex-direction: column; gap: .42rem; min-width: 0; }
.cf-field.full, .cf-actions.full { grid-column: 1 / -1; }

.cf-field label {
  display: flex; align-items: center; gap: .5rem;
  font-size: .85rem; font-weight: 600; color: #26405a;
}
.cf-ico { display: inline-flex; color: #8fa8bf; }
.cf-ico svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; }

.cf-field input,
.cf-field select,
.cf-field textarea {
  width: 100%; font: inherit; font-size: .95rem; color: var(--ink);
  background: #fff; border: 1px solid #dfeaf4; border-radius: 11px; padding: .68rem .9rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cf-field textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.cf-field input::placeholder, .cf-field textarea::placeholder { color: #9db2c6; }
.cf-field input:focus, .cf-field select:focus, .cf-field textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31, 111, 235, .12);
}
.cf-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2364809b' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 10px; padding-right: 2.4rem;
}

.cf-phone { display: flex; gap: .5rem; }
.cf-prefix {
  display: inline-flex; align-items: center; gap: .4rem; flex: none;
  padding: .72rem .8rem; border: 1px solid #dfeaf4; border-radius: 11px;
  background: #fff; font-size: .95rem; color: #26405a;
}
.cf-prefix .flag { font-size: 1.05rem; line-height: 1; }
.cf-prefix svg { width: 10px; height: 6px; color: #64809b; }

.cf-count { align-self: flex-end; font-size: .78rem; color: #9db2c6; margin-top: -.2rem; }

.cf-actions { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-top: .3rem; }
.btn-send {
  display: inline-flex; align-items: center; gap: .6rem; cursor: pointer;
  padding: .72rem 1.4rem; border: 0; border-radius: 999px;
  background: linear-gradient(100deg, var(--blue), var(--cyan)); color: #fff;
  font: inherit; font-size: .98rem; font-weight: 700;
  box-shadow: 0 10px 24px rgba(31, 111, 235, .28);
  transition: transform .16s ease, box-shadow .16s ease;
}
.btn-send:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(31, 111, 235, .34); }
.btn-send svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.btn-send .go { margin-left: .4rem; opacity: .9; display: inline-flex; }

.cf-secure { display: flex; align-items: center; gap: .7rem; padding-left: 1.2rem; border-left: 1px solid #e6eff7; font-size: .8rem; line-height: 1.45; color: var(--ink-3); }
.cf-secure strong { color: #35506c; font-weight: 600; }
.cf-lock { color: #8fa8bf; display: inline-flex; }
.cf-lock svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.7; }

/* ============================================================
   narrower screens
   ============================================================ */
@media (max-width: 1100px) {
  .sx-head { flex-direction: column; }
}

@media (max-width: 900px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem 1.4rem; }
  .principles { grid-template-columns: 1fr; }
  .cf-grid { grid-template-columns: 1fr; }
  .cf-secure { padding-left: 0; border-left: 0; }
}

@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; }
}