/* =========================================================
   SB Global Solution — Components — shared sections used on the home page and other pages (cards, carousels, forms, FAQ, quick links, CTA …). Loaded on every page.
   Same rules as html-work/css/style.css.
   ========================================================= */
.hero {
  position: relative;
  display: grid;                       /* slides share one cell, so height fits the tallest slide */
  min-height: clamp(580px, calc(100vh - 136px), 760px);
  background: var(--navy-950);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero-slide {
  position: relative; grid-area: 1 / 1;
  display: flex; align-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity 1s ease, visibility 1s ease;
}
.hero-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.hero-slide__bg { position: absolute; inset: 0; z-index: -2; }
.hero-slide__bg picture { display: contents; } /* Home: desktop / tablet / mobile image — the <img> keeps filling the slide */
.hero-slide__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 7s linear; }
.hero-slide.is-active .hero-slide__bg img { transform: scale(1); }
/* Navy overlay: dark on the left for the text, lighter on the right to show the photo */
.hero-slide::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(14,20,64,.94) 0%, rgba(14,20,64,.82) 38%, rgba(14,20,64,.45) 70%, rgba(14,20,64,.25) 100%),
    linear-gradient(0deg, rgba(14,20,64,.85) 0%, rgba(14,20,64,0) 40%);
}
/* Orange arc taken from the logo's swoosh */
.hero-slide::after {
  content: ""; position: absolute; z-index: -1;
  right: -120px; top: 50%; width: 520px; height: 520px; transform: translateY(-55%);
  border-radius: 50%;
  border: 2px solid rgba(255,122,26,.35);
  border-left-color: transparent; border-bottom-color: transparent;
  opacity: .8;
}
.hero__content { width: 100%; padding-block: 72px 200px; }
.hero__inner { max-width: 720px; }
.hero__label {
  display: inline-flex; align-items: center;
  margin-bottom: 20px; padding: 8px 16px;
  border-left: 4px solid var(--orange-500);
  background: rgba(255,255,255,.1); backdrop-filter: blur(6px);
  font-family: var(--font-head); font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.hero h1, .hero h2 {
  margin: 0;
  font-family: var(--font-head); font-size: clamp(34px, 5vw, 58px); font-weight: 800; line-height: 1.1; letter-spacing: -.02em;
  color: #fff;
}
.hero .text-accent { color: var(--orange-500); }
.hero__text { max-width: 600px; margin: 22px 0 0; font-size: 18px; color: rgba(255,255,255,.86); }
.hero .btn-group { margin-top: 36px; }
.hero .btn { padding: 14px 26px; font-size: 15px; }
/* Content entrance on slide change */
.hero-slide .hero__inner > * { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.hero-slide.is-active .hero__inner > * { opacity: 1; transform: none; }
.hero-slide.is-active .hero__inner > :nth-child(2) { transition-delay: .12s; }
.hero-slide.is-active .hero__inner > :nth-child(3) { transition-delay: .24s; }
.hero-slide.is-active .hero__inner > :nth-child(4) { transition-delay: .36s; }
/* Bottom: labelled progress dots + trust strip */
.hero-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; }
.hero-trust { background: rgba(14,20,64,.85); backdrop-filter: blur(8px); border-top: 1px solid rgba(255,255,255,.1); }
.hero-trust ul { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 28px; padding-block: 16px; }
.hero-trust li { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: rgba(255,255,255,.9); }
.hero-trust .ic { color: var(--orange-500); }
@media (max-width: 1150px) {
  .hero-slide::after { display: none; }
}
@media (max-width: 960px) {
  .hero-trust ul { justify-content: center; }
  .hero-slide::before { background: linear-gradient(0deg, rgba(14,20,64,.95) 0%, rgba(14,20,64,.75) 55%, rgba(14,20,64,.6) 100%); }
}
@media (max-width: 767px) {
  .hero { min-height: 640px; }
  .hero__content { padding-block: 48px 210px; }
  .hero__text { font-size: 16px; }
  .hero .btn-group .btn { flex: 1 1 auto; }
  .hero-trust ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding-block: 12px; }
  .hero-trust li { font-size: 13px; gap: 6px; }
  .hero-trust .ic { width: 16px; height: 16px; }
}
.faq-item strong { text-wrap: balance; }
/* Numbers strip */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 30px 20px; margin-bottom: 64px; border-radius: 24px;
  background: var(--navy-900); box-shadow: 0 24px 50px -28px rgba(20,28,85,.6);
}
.stat { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 6px 12px; }
.stat + .stat { border-left: 1px solid rgba(255,255,255,.14); }
.stat svg { width: 46px; height: 46px; flex-shrink: 0; fill: none; stroke: var(--orange-500); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.stat b { display: block; font-family: var(--font-head); font-size: 32px; font-weight: 800; line-height: 1.1; color: #fff; }
.stat span { font-size: 15px; color: #C8D3E6; }
.stat b span { font-size: inherit; color: inherit; }
.carousel-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 28px; }
.carousel-btn {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--line); color: var(--navy-800);
  box-shadow: 0 6px 16px -8px rgba(15,23,42,.3); transition: background .2s, color .2s, border-color .2s;
}
.carousel-btn:hover { background: var(--orange-500); border-color: var(--orange-500); color: #fff; }
.carousel-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.carousel-dots { display: flex; gap: 8px; }
.carousel-dots button { width: 8px; height: 8px; border-radius: 999px; background: #CBD3E1; transition: width .3s, background .3s; }
.carousel-dots button.is-active { width: 26px; background: var(--orange-500); }
/* CTA banner */
.cta-band {
  display: flex; align-items: center; gap: 28px; margin-top: 56px;
  padding: 34px 48px; border-radius: 24px; color: #fff;
  background: linear-gradient(100deg, #FF8A3D 0%, #FF6A1A 40%, #3B4FD8 100%);
  box-shadow: 0 24px 50px -26px rgba(232,97,28,.6);
}
.cta-band__ic { width: 64px; height: 64px; flex-shrink: 0; fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cta-band__text { flex: 1; }
.cta-band h2 { margin: 0; font-family: var(--font-head); font-size: clamp(24px, 2.8vw, 32px); font-weight: 800; color: #fff; }
.cta-band p { margin: 6px 0 0; font-size: 16.5px; color: rgba(255,255,255,.9); }
.cta-band__btn {
  display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0;
  padding: 16px 30px; border-radius: 999px; background: #fff; color: var(--orange-600);
  font-family: var(--font-head); font-weight: 800; font-size: 16px; transition: transform .2s, box-shadow .2s;
}
.cta-band__btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(0,0,0,.35); }
.cta-band__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1100px) {
  .stats { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
  .stat:nth-child(3) { border-left: 0; }
}
@media (max-width: 767px) {
  .stats { padding: 22px 8px; margin-bottom: 56px; border-radius: 20px; }
  .stat { flex-direction: column; text-align: center; gap: 8px; padding: 4px; }
  .stat svg { width: 34px; height: 34px; }
  .stat b { font-size: 24px; }
  .stat span { font-size: 13px; }
  .cta-band { flex-direction: column; text-align: center; gap: 16px; padding: 32px 22px; margin-top: 48px; }
  .cta-band__ic { width: 50px; height: 50px; }
  .cta-band__btn { width: 100%; justify-content: center; }
}
/* =========================================================
   Trusted By Clients (testimonials)
   ========================================================= */
.reviews { padding: var(--sec-pad) 0; background: #fff; overflow: hidden; }
.reviews__inner { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 2.15fr); gap: 48px; align-items: center; }
.reviews__intro { padding-bottom: 72px; }
.reviews__intro .sec-title { font-size: clamp(28px, 2.9vw, 38px); }
.reviews__sub { margin: 16px 0 0; font-size: 17.5px; line-height: 1.7; color: var(--text); }
.reviews__slider { min-width: 0; }
.reviews__track {
  --per: 3; --gap: 22px;
  display: flex; gap: var(--gap);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 12px 2px 28px; margin: -12px -2px -28px;
  scrollbar-width: none;
}
.reviews__track::-webkit-scrollbar { display: none; }
.review {
  flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per)); scroll-snap-align: start;
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  margin: 0; padding: 36px 30px 30px; border-radius: 20px;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 16px 36px -26px rgba(15,23,42,.4);
  transition: transform .25s, box-shadow .25s;
}
.review:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -26px rgba(15,23,42,.5); }
.review blockquote { margin: 0; font-size: 16px; line-height: 1.75; color: var(--text); }
.review blockquote::first-letter { color: var(--orange-600); font-weight: 800; }
.review figcaption b { display: block; font-family: var(--font-head); font-size: 17px; font-weight: 800; color: var(--navy-900); }
.review figcaption span { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); }
@media (max-width: 1100px) {
  .reviews__inner { grid-template-columns: 1fr; gap: 36px; }
  .reviews__intro { text-align: center; padding-bottom: 0; }
  .reviews__track { --per: 2; }
}
@media (max-width: 767px) {
  .reviews { padding: var(--sec-pad) 0; }
  .reviews__track { --per: 1; --gap: 16px; }
  .review { padding: 28px 22px 24px; }
}
/* =========================================================
   Our Process (6-step journey on a light band)
   ========================================================= */
.process {
  --process-bg: #F6F8FC;
  position: relative; padding: var(--sec-pad) 0; overflow: hidden;
  background:
    radial-gradient(520px 320px at 6% 8%, rgba(255,122,26,.08), transparent 70%),
    radial-gradient(620px 360px at 96% 92%, rgba(59,79,216,.08), transparent 70%),
    var(--process-bg);
}
.steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.step { position: relative; text-align: center; }
.step__node {
  position: relative; z-index: 1; width: 80px; height: 80px; margin: 0 auto 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; border: 2px solid var(--line);
  box-shadow: 0 0 0 8px var(--process-bg), 0 14px 30px -14px rgba(15,23,42,.35);   /* ring cuts the line neatly around the node */
  transition: background .3s, border-color .3s, transform .3s;
}
.step__node svg { width: 32px; height: 32px; fill: none; stroke: var(--orange-500); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.step__num {
  position: absolute; top: -4px; right: -6px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-head); font-size: 11.5px; font-weight: 800;
  background: var(--navy-800); color: #fff; border: 2px solid #fff;
}
.step:hover .step__node { background: var(--orange-500); border-color: var(--orange-500); transform: translateY(-4px); }
.step:hover .step__node svg { stroke: #fff; }
.step:hover .step__num { background: var(--orange-600); }
.step__body h3 { margin: 0 0 8px; font-family: var(--font-head); font-size: 19px; font-weight: 800; color: var(--navy-900); }
.step__body p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--text); }
/* Curved dashed arrows between steps (desktop + tablet), alternating up / down */
.step:not(:last-child)::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: calc(50% + 46px); width: calc(100% - 92px + 20px); height: 40px;
  background: no-repeat center / 100% 100%;
  opacity: 0; transition: opacity .6s ease;
}
.step:nth-child(odd):not(:last-child)::after {
  top: 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cpath d='M4 34C40 2 80 2 112 30' fill='none' stroke='%23FF7A1A' stroke-width='2' stroke-dasharray='5 6' stroke-linecap='round' vector-effect='non-scaling-stroke' opacity='.75'/%3E%3Cpath d='M103 31l10 1-3-9' fill='none' stroke='%23FF7A1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
.step:nth-child(even):not(:last-child)::after {
  top: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cpath d='M4 6C40 38 80 38 112 10' fill='none' stroke='%233B4FD8' stroke-width='2' stroke-dasharray='5 6' stroke-linecap='round' vector-effect='non-scaling-stroke' opacity='.7'/%3E%3Cpath d='M103 9l10-1-3 9' fill='none' stroke='%233B4FD8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
/* arrows appear one after another when the section scrolls into view */
.steps.is-visible .step::after { opacity: 1; }
.steps.is-visible .step:nth-child(2)::after { transition-delay: .15s; }
.steps.is-visible .step:nth-child(3)::after { transition-delay: .3s; }
.steps.is-visible .step:nth-child(4)::after { transition-delay: .45s; }
.steps.is-visible .step:nth-child(5)::after { transition-delay: .6s; }
/* Tablet: 3 + 3 (no arrow from the end of row 1 to the start of row 2) */
@media (max-width: 1100px) {
  /* 3 on top, 2 centred below */
  .steps { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 44px; }
  .step { grid-column: span 2; }
  .step:nth-child(4) { grid-column: 2 / span 2; }
  .step:nth-child(3)::after { display: none; }
}
/* Phone: clean stacked cards, no connectors */
@media (max-width: 767px) {
  .process { padding: var(--sec-pad) 0; }
  .steps { grid-template-columns: 1fr; row-gap: 14px; }
  .step, .step:nth-child(4) { grid-column: auto; }
  /* undo the tablet 3+2 centring */
  .step::after { display: none; }
  .step {
    display: flex; align-items: flex-start; gap: 16px; text-align: left;
    padding: 18px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1);
  }
  .step__node { width: 56px; height: 56px; margin: 0; flex-shrink: 0; }
  .step__node svg { width: 24px; height: 24px; }
  .step__num { width: 22px; height: 22px; font-size: 9.5px; }
  .step__body { padding-top: 2px; }
  .step__body h3 { font-size: 17px; margin-bottom: 4px; }
  .step__body p { font-size: 14.5px; }
}
/* =========================================================
   Let's Talk About Your Project (contacts + enquiry form)
   ========================================================= */
.talk {
  position: relative; padding: var(--sec-pad) 0; overflow: hidden; color: var(--text);
  background: #fff;
}
.talk::before {               /* soft indigo glow, bottom-left */
  content: ""; position: absolute; left: -160px; bottom: -160px; width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, rgba(59,79,216,.14), transparent 70%); pointer-events: none;
}
.talk::after {                /* soft orange glow, top-right */
  content: ""; position: absolute; right: -140px; top: -140px; width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,122,26,.14), transparent 70%); pointer-events: none;
}
.talk__layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 64px; align-items: center; }
.talk__line { display: block; width: 70px; height: 4px; margin-top: 22px; border-radius: 4px; background: linear-gradient(90deg, var(--orange-500), #FFA25C); }
.talk__text { margin: 18px 0 0; font-size: 17px; line-height: 1.65; }
.talk__contacts { display: grid; gap: 16px; margin-top: 32px; }
.talk__contact {
  display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 16px;
  border: 1px solid var(--line); background: #fff;
  box-shadow: 0 10px 26px -18px rgba(15,23,42,.35);
  transition: border-color .2s, transform .2s;
}
.talk__contact:hover { border-color: var(--orange-500); transform: translateY(-2px); }
.talk__ic { width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--orange-500), var(--orange-600)); }
.talk__ic--wa { background: #25D366; }
.talk__ic svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.talk__contact small { display: block; font-size: 13px; color: var(--muted); }
.talk__contact strong { display: block; font-family: var(--font-head); font-size: 17px; color: var(--ink); overflow-wrap: anywhere; }
.talk__contact > span:last-child { min-width: 0; }
.talk-form {
  padding: 40px; border-radius: 24px; border-top: 5px solid var(--orange-500);
  background: #fff; color: var(--text);
  border-left: 1px solid var(--line); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  box-shadow: 0 40px 80px -40px rgba(30,42,120,.45), 0 8px 20px -12px rgba(15,23,42,.12);
}
.talk-form h3 { margin: 0; font-family: var(--font-head); font-size: 22px; font-weight: 800; color: var(--navy-900); }
.talk-form > p { margin: 6px 0 26px; font-size: 15px; color: var(--muted); }
.talk-form__actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 24px; }
.talk-form__actions .btn { width: 100%; padding: 15px 18px; }
/* Form fields */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.form-field--full { grid-column: 1 / -1; }
.form-label { font-size: 14px; font-weight: 600; color: var(--navy-900); }
.form-label .req { color: var(--orange-600); }
.form-control {
  width: 100%; min-height: 50px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px;
  background: #fff; color: var(--ink); font: inherit; font-size: 15px; transition: border-color .2s, box-shadow .2s;
}
.form-control::placeholder { color: #98A2B3; }
.form-control:focus { outline: none; border-color: var(--blue-600); box-shadow: 0 0 0 4px rgba(59,79,216,.12); }
.form-control.is-invalid { border-color: #D92D20; box-shadow: 0 0 0 4px rgba(217,45,32,.1); }
select.form-control {
  appearance: none; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E2A78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 18px;
}
textarea.form-control { min-height: 110px; resize: vertical; line-height: 1.5; }
.form-success {
  display: none; align-items: flex-start; gap: 12px; margin: 16px 0 0; padding: 16px 18px; border-radius: 12px;
  background: #ECFDF3; color: #05603A; font-size: 15px;
}
.form-success .ic { margin-top: 2px; }
.form-success.is-visible { display: flex; }
@media (max-width: 1100px) {
  .talk__layout { grid-template-columns: minmax(0, 1fr); gap: 48px; }
}
@media (max-width: 767px) {
  .talk { padding: var(--sec-pad) 0; }
  .talk-form { padding: 26px 20px; border-radius: 20px; }
  .talk-form__actions { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
}
.faq { padding: var(--sec-pad) 0; background: #F6F8FC; }
.faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; align-items: start; }
.faq-list { display: grid; gap: 14px; }
.faq-item { border: 1px solid var(--line); border-radius: 16px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.faq-item[open] { border-color: var(--orange-500); box-shadow: 0 12px 28px -20px rgba(15,23,42,.35); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 22px; cursor: pointer; list-style: none;
  font-family: var(--font-head); font-weight: 700; font-size: 16px; color: var(--navy-900);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-ic {
  flex-shrink: 0; width: 28px; height: 28px; padding: 6px; border-radius: 50%;
  background: var(--orange-50); fill: none; stroke: var(--orange-600); stroke-width: 2.2; stroke-linecap: round;
  transition: transform .25s, background .25s, stroke .25s;
}
.faq-item[open] .faq-ic { transform: rotate(45deg); background: var(--orange-500); stroke: #fff; }
.faq-item p { margin: 0; padding: 0 22px 20px; font-size: 15.5px; line-height: 1.65; color: var(--text); }
.faq-help {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px;
  margin-top: 40px; padding: 24px 28px; border-radius: 20px;
  border: 1px solid var(--line); border-left: 4px solid var(--orange-500); background: #fff;
}
.faq-help__text { display: flex; align-items: center; gap: 16px; }
.faq-help__ic { width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: var(--orange-50); }
.faq-help__ic svg { width: 26px; height: 26px; fill: none; stroke: var(--orange-600); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.faq-help__text strong { display: block; font-family: var(--font-head); font-size: 18px; color: var(--navy-900); }
.faq-help__text p { margin: 2px 0 0; font-size: 15px; color: var(--muted); }
.faq-help__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.quick { padding: 56px 0; background: #fff; border-top: 1px solid var(--line); }
.quick__inner { display: flex; align-items: center; gap: 24px 56px; }
.quick__head { flex-shrink: 0; }
.quick__head .sec-eyebrow { margin-bottom: 6px; }
.quick h2 { margin: 0; font-family: var(--font-head); font-size: 24px; font-weight: 800; color: var(--navy-900); }
.quick-links { display: flex; flex-wrap: wrap; gap: 10px; }
.quick-link {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; font-size: 14px; font-weight: 600; color: var(--navy-900);
  transition: border-color .2s, background .2s, color .2s;
}
.quick-link svg { width: 15px; height: 15px; fill: none; stroke: var(--orange-600); stroke-width: 2; stroke-linecap: round; }
.quick-link:hover { border-color: var(--orange-500); background: var(--orange-50); color: var(--orange-600); }
@media (max-width: 960px) {
  .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .quick__inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 767px) {
  .faq { padding: var(--sec-pad) 0; }
  .faq-item summary { padding: 18px; font-size: 15px; }
  .faq-item p { padding: 0 18px 18px; }
  .faq-help { padding: 20px; }
  .faq-help__actions { width: 100%; }
  .faq-help__actions .btn { flex: 1 1 auto; }
  .quick { padding: 44px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide, .hero-slide__bg img, .hero-slide .hero__inner > * { transition: none; }
}
.review, .faq-item, .talk__contact, .faq-help { box-shadow: var(--shadow-1); }
.review { border-color: rgba(229,233,242,.8); }
.review:hover, .talk__contact:hover { box-shadow: var(--shadow-2); }
.faq-item[open] { box-shadow: var(--shadow-2); }
.carousel-btn { box-shadow: var(--shadow-1); }
/* ---- Glass ---- */
.hero-trust {
  background: rgba(14,20,64,.45);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-top: 1px solid rgba(255,255,255,.14);
}
.hero__label { border: 1px solid rgba(255,255,255,.18); border-left: 4px solid var(--orange-500); backdrop-filter: blur(10px); }
/* ---- Stats strip: rich indigo gradient with a soft top highlight ---- */
.stats {
  background:
    radial-gradient(420px 160px at 15% 0%, rgba(255,122,26,.22), transparent 70%),
    linear-gradient(135deg, #141C55 0%, #1E2A78 55%, #2E3FB8 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), var(--shadow-3);
}
/* ---- Gradient borders on key cards ---- */
.talk-form {
  border: 2px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, var(--grad-brand) border-box;
  box-shadow: var(--shadow-3);
}
.cta-band {
  position: relative; isolation: isolate;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 30px 60px -28px rgba(255,106,26,.55), 0 20px 50px -30px rgba(59,79,216,.6);
}
.cta-band::before {           /* thin glowing white edge */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.5px;
  background: linear-gradient(120deg, rgba(255,255,255,.7), rgba(255,255,255,.05) 40%, rgba(255,255,255,.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.faq-help__ic {
  background: linear-gradient(145deg, #FFF7F0 0%, #FFE2CC 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -3px 8px rgba(255,122,26,.14), 0 10px 20px -12px rgba(255,122,26,.6);
}
.talk__ic {
  background: linear-gradient(145deg, #FF9A4D 0%, #FF6A1A 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 10px 20px -10px rgba(255,106,26,.7);
}
.talk__ic--wa {
  background: linear-gradient(145deg, #4BE38A 0%, #1FB85A 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 10px 20px -10px rgba(31,184,90,.7);
}
.step__node {
  background: linear-gradient(160deg, #FFFFFF 0%, #F1F4FC 100%);
  box-shadow: 0 0 0 8px var(--process-bg), inset 0 1px 0 #fff, inset 0 -3px 8px rgba(30,42,120,.06), var(--shadow-2);
}
.step:hover .step__node { background: linear-gradient(145deg, #FF9A4D 0%, #FF6A1A 100%); }
/* =========================================================
   MOTION LAYER (refresh step 4)
   ========================================================= */
/* ---- 3D tilt on hover (JS sets --rx / --ry from the mouse position) ---- */
.tilt {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px));
  transition: transform .25s ease, box-shadow .25s ease;
  will-change: transform;
}
.tilt:hover { --ty: -6px; }
.tilt.is-tilting { transition: transform .08s linear, box-shadow .25s ease; }
/* ---- Fade up when scrolled into view (uses `translate`, so it never fights the tilt) ---- */
.reveal { opacity: 0; translate: 0 28px; transition: opacity .8s cubic-bezier(.2,.7,.2,1), translate .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }
.reveal.is-in { opacity: 1; translate: 0 0; }
/* ---- Gradient text for the key words in the hero heading ---- */
.hero .text-accent {
  background: linear-gradient(90deg, #FF8A3D 0%, #FFB27A 55%, #FF6A1A 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; translate: none; transition: none; }
  .tilt { transform: none !important; transition: none; }
}
/* Process on phones: step circles sit inside white cards, so drop the background-coloured ring */
@media (max-width: 767px) {
  .step__node { box-shadow: inset 0 1px 0 #fff, 0 8px 18px -10px rgba(30,42,120,.35); }
}
/* =========================================================
   RESPONSIVE FIXES (full-page audit)
   ========================================================= */
/* 1. Hero: slides may never grow wider than the screen; long buttons wrap */
.hero-slide, .hero__content, .hero__inner { min-width: 0; }
@media (max-width: 767px) {
  .hero .btn { white-space: normal; text-align: center; line-height: 1.3; }
}
/* =========================================================
   Thin tool/platform strip at the bottom of each Services tab
   ========================================================= */
.tech-strip {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 14px; min-width: 0;
  margin-top: 4px; padding: 6px 6px 6px 8px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1);
}
.tech-strip__label {
  flex-shrink: 0; padding: 6px 14px; border-radius: 999px;
  background: var(--navy-800); color: #fff;
  font-family: var(--font-head); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.tech-strip__viewport {
  flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.tech-strip__track { display: flex; width: max-content; animation: techScroll 38s linear infinite; }
.tech-strip:hover .tech-strip__track { animation-play-state: paused; }
.tech-strip__track span {
  display: inline-flex; align-items: center; gap: 10px; padding: 0 14px;
  font-family: var(--font-head); font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap;
}
.tech-strip__track span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--orange-500); opacity: .8; }
@media (max-width: 767px) {
  .tech-strip { gap: 8px; padding: 5px 5px 5px 6px; }
  .tech-strip__label { padding: 5px 10px; font-size: 10.5px; }
  .tech-strip__track span { font-size: 13px; padding: 0 10px; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .tech-strip__track { animation: none; }
  .tech-strip__viewport { overflow-x: auto; }
}

/* =========================================================
   PAGE BANNER (inner pages — template-parts/component-page-banner.php)
   Compact dark banner with breadcrumb, H1 and text (same as html-work .page-hero).
   ========================================================= */
.page-hero {
  position: relative; overflow: hidden; padding: 72px 0 64px; color: #C8D3E6; text-align: center;
  background:
    radial-gradient(520px 320px at 10% 10%, rgba(255,122,26,.22), transparent 70%),
    radial-gradient(620px 380px at 92% 100%, rgba(59,79,216,.55), transparent 70%),
    linear-gradient(135deg, #0E1440 0%, #141C55 55%, #1E2A78 100%);
}
.page-hero::after {            /* faint grid texture */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 44px 44px,
              linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.page-hero__inner { position: relative; z-index: 1; max-width: 820px; }
.crumbs {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; padding: 7px 16px; border-radius: 999px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px);
  font-size: 13.5px; font-weight: 500;
}
.crumbs a { color: #C8D3E6; transition: color .2s; }
.crumbs a:hover { color: #fff; }
.crumbs svg { width: 14px; height: 14px; fill: none; stroke: var(--orange-500); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.crumbs span { color: #fff; }
.page-hero h1 { margin: 0; font-family: var(--font-head); font-size: clamp(32px, 4.6vw, 54px); font-weight: 800; line-height: 1.12; letter-spacing: -.025em; color: #fff; }
.page-hero h1 .text-accent { background: linear-gradient(90deg, #FF8A3D, #FFB27A 55%, #FF6A1A); -webkit-background-clip: text; background-clip: text; color: transparent; }
.page-hero p { margin: 16px auto 0; max-width: 620px; font-size: 17.5px; line-height: 1.7; }
@media (max-width: 767px) {
  .page-hero { padding: 52px 0 44px; }
  .page-hero p { font-size: 16px; }
}
/* Hidden bot-trap field in Contact Form 7 forms (inc/contact-forms.php) — never shown to people */
.sbg-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
/* =========================================================
   SHARED CONTENT SECTIONS (About, Careers, How We Work, Partner, Contact)
   Mission/Vision cards, value cards, service items (.wwd-item), Work With Us card,
   office cards — template-parts/component-values.php, component-join.php,
   component-offices.php; .mv-card / .wwd-item markup in the page templates / [sbg_services style="wwd"].
   Same rules as html-work/css/style.css.
   ========================================================= */
.wwd-item b { text-wrap: balance; }
/* ---- Mission & Vision cards ---- */
.mv__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.mv-card { position: relative; overflow: hidden; padding: 40px 36px; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); transition: transform .25s, box-shadow .25s; }
.mv-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); }
.mv-card::after { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; opacity: .5; pointer-events: none; }
.mv-card--mission::after { background: radial-gradient(circle, rgba(255,122,26,.18), transparent 70%); }
.mv-card--vision::after { background: radial-gradient(circle, rgba(59,79,216,.18), transparent 70%); }
.mv-card__head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.mv-card__ic { display: grid; place-items: center; flex-shrink: 0; width: 60px; height: 60px; border-radius: 18px; }
.mv-card__head .mv-card__label { margin: 0; }
.mv-card__ic svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mv-card--mission .mv-card__ic { background: linear-gradient(145deg, #FF9A4D, #FF6A1A); box-shadow: 0 12px 24px -12px rgba(255,106,26,.7); }
.mv-card--vision .mv-card__ic { background: linear-gradient(145deg, #5B6FF0, #2E3FB8); box-shadow: 0 12px 24px -12px rgba(46,63,184,.7); }
.mv-card__label { margin: 0 0 8px; font-family: var(--font-head); font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-600); }
.mv-card--vision .mv-card__label { color: var(--blue-600); }
.mv-card h3 { margin: 0 0 10px; font-family: var(--font-head); font-size: 21px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.mv-card > p:last-child { margin: 0; font-size: 16px; line-height: 1.75; color: var(--text); }

/* ---- Core values ---- */
.values { padding: var(--sec-pad) 0; background: #fff; }
.values__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.value-card { display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); transition: transform .25s, box-shadow .25s; }
.value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.value-card__ic {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; margin-bottom: 6px;
  background: linear-gradient(145deg, #FFF7F0, #FFE2CC);
  box-shadow: inset 0 1px 0 #fff, inset 0 -3px 8px rgba(255,122,26,.14), 0 10px 20px -12px rgba(255,122,26,.6);
}
.value-card__ic svg { width: 25px; height: 25px; fill: none; stroke: var(--orange-600); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.value-card h3 { margin: 0; font-family: var(--font-head); font-size: 18.5px; font-weight: 800; color: var(--ink); }
.value-card p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--text); }

/* ---- Service items (colour cycle as the home page service cards) ---- */
.wwd-item {
  --c: #F07A1A; --bg1: #FFF6EE; --bg2: #FFFFFF;
  display: flex; flex-direction: column; gap: 10px; padding: 22px 20px; border-radius: 20px;
  background: linear-gradient(135deg, var(--bg1), var(--bg2));
  border: 1px solid rgba(15,23,42,.05); box-shadow: var(--shadow-1); transition: transform .25s, box-shadow .25s;
}
.wwd-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); }
.wwd-item:nth-child(6n+2) { --c: #7C3AED; --bg1: #F6F1FF; }
.wwd-item:nth-child(6n+3) { --c: #2563EB; --bg1: #EEF4FF; }
.wwd-item:nth-child(6n+4) { --c: #16A34A; --bg1: #ECFAF2; }
.wwd-item:nth-child(6n+5) { --c: #0284C7; --bg1: #ECF6FD; }
.wwd-item:nth-child(6n+6) { --c: #DB2777; --bg1: #FDEFF5; }
.wwd-item__top { display: flex; align-items: center; gap: 12px; }
.wwd-item__ic { display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px; background: #fff; box-shadow: 0 8px 18px -10px rgba(15,23,42,.3); }
.wwd-item__ic svg { width: 23px; height: 23px; fill: none; stroke: var(--c); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wwd-item b { font-family: var(--font-head); font-size: 16.5px; font-weight: 800; line-height: 1.3; color: var(--ink); }
.wwd-item__txt { font-size: 14.5px; line-height: 1.6; color: var(--text); }

/* ---- Work With Us ---- */
.join { padding: var(--sec-pad) 0; background: #F6F8FC; }
.join__card {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: center;
  padding: 52px 52px; border-radius: 28px;
  background:
    radial-gradient(420px 300px at 0% 0%, rgba(255,122,26,.10), transparent 70%),
    radial-gradient(480px 340px at 100% 100%, rgba(59,79,216,.12), transparent 70%),
    #fff;
  border: 1px solid var(--line); box-shadow: var(--shadow-2);
}
.join__text .sec-title { font-size: clamp(28px, 3vw, 38px); }
.join__text > p:not(.sec-eyebrow) { margin: 16px 0 0; font-size: 16.5px; line-height: 1.75; color: var(--text); }
.join__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 28px; }
.join__btn { gap: 10px; padding-left: 8px; }
.join__ic { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.22); }
.join__ic svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.join__steps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.join__steps li { display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px; border-radius: 18px; background: rgba(255,255,255,.9); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.join__steps li > span { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px; background: var(--grad-brand); color: #fff; font-family: var(--font-head); font-weight: 800; }
.join__steps b { display: block; font-family: var(--font-head); font-size: 16.5px; font-weight: 800; color: var(--ink); }
.join__steps p { margin: 3px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--text); }

/* ---- Offices (no embedded maps: each card links to Google Maps — .office-card__map-link) ---- */
.offices { padding: var(--sec-pad) 0; background: #fff; }
.offices__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.office-card { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; overflow: hidden; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.office-card__body { padding: 28px 26px; }
.office-card__tag { display: inline-block; margin-bottom: 6px; padding: 4px 12px; border-radius: 999px; background: var(--orange-50); color: var(--orange-600); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.office-card h3 { margin: 0 0 16px; font-family: var(--font-head); font-size: 20px; font-weight: 800; color: var(--ink); }
.office-card ul { display: grid; gap: 12px; }
.office-card li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.6; color: var(--text); }
.office-card li a { color: var(--text); transition: color .2s; }
.office-card li a:hover { color: var(--orange-600); }
.office-card li svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 3px; fill: none; stroke: var(--blue-600); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.office-card__map-link { margin-top: 18px; }
.offices + .talk, .talk + .offices { padding-top: 0; }   /* both white: avoid a double gap */

@media (max-width: 1100px) {
  .values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .join__card { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 40px 36px; }
  .offices__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .mv__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .mv-card { padding: 28px 22px; }
  .mv-card h3 { font-size: 19px; }
  .values__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .value-card { padding: 22px; }
  .wwd-item { padding: 18px 16px; }
  .wwd-item__ic { width: 40px; height: 40px; border-radius: 12px; }
  .wwd-item__ic svg { width: 20px; height: 20px; }
  .wwd-item b { font-size: 16px; }
  .wwd-item__txt { font-size: 14px; }
  .join__card { padding: 30px 20px; border-radius: 22px; }
  .join__steps li { padding: 14px 16px; }
  .office-card { grid-template-columns: minmax(0, 1fr); }
  .office-card__body { padding: 22px 20px; }
}
/* =========================================================
   PARTNER-STYLE SHARED SECTIONS (Partner With Us, How We Work, Website Development, Growth Call)
   Partnership models (.values.models + wide card), icon grid (.informed — component-informed.php),
   ticked points in the Let's Talk intro (.call-points). Same rules as html-work/css/style.css.
   ========================================================= */
.models .values__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.informed { padding: var(--sec-pad) 0; background: #F6F8FC; }
.informed__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.join + .faq { padding-top: 0; }   /* both light grey: avoid a double gap (How We Work) */
.informed + .join { padding-top: 0; }   /* both light grey: avoid a double gap (Careers, How We Work) */
/* Full-width card (e.g. Professional Collaboration) */
.value-card--wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 22px; padding: 26px 30px; background: linear-gradient(135deg, #FFF6EE, #EEF1FD); }
.value-card--wide .value-card__ic { flex-shrink: 0; margin-bottom: 0; background: #fff; }
.value-card__body { flex: 1; display: grid; gap: 6px; }
@media (max-width: 767px) {
  .value-card--wide { flex-direction: column; align-items: flex-start; padding: 22px; }
}
@media (max-width: 1100px) {
  .models .values__grid, .informed__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .models .values__grid { grid-template-columns: minmax(0, 1fr); }
  .informed__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
/* Ticked points (Let's Talk intro "Points") */
.call-points { display: grid; gap: 14px; margin: 26px 0 28px; padding: 0; list-style: none; }
.call-points li { display: flex; align-items: flex-start; gap: 12px; }
.call-points svg { width: 24px; height: 24px; flex-shrink: 0; margin-top: 1px; fill: none; stroke: var(--orange-500); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.call-points b { display: block; font-family: var(--font-head); font-size: 16.5px; font-weight: 700; color: var(--ink); }
.call-points span { font-size: 15px; line-height: 1.6; color: var(--text); }
/* CTA band section wrapper (All Services; later blog, case study, service pages) — same rule as html-work/css/style.css */
.srv-cta { padding: 0 0 var(--sec-pad); background: #fff; }

/* =========================================================
   SERVICE / CASE STUDY SHARED SECTIONS — single-image banner (.hero.svc-banner), image cards
   (.inc, .inc-card), CTA band spacing (.srv-cta.svc-cta). Same rules as html-work/css/style.css.
   ========================================================= */
/* Banner: same look as the home hero, single image, no slider */
.svc-banner { min-height: clamp(520px, calc(100vh - 136px), 680px); }
.svc-banner .hero__content { padding-block: 72px 130px; }
@media (max-width: 767px) { .svc-banner .hero__content { padding-block: 56px 190px; } }
.inc { padding: var(--sec-pad) 0; background: #fff; }
.inc__list { display: grid; gap: 24px; }
.inc-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); overflow: hidden; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); transition: transform .25s, box-shadow .25s; }
.inc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.inc-card:nth-child(even) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.inc-card:nth-child(even) .inc-card__media { order: 2; }
.inc-card__media { min-height: 260px; background: var(--blue-50); }
.inc-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.inc-card__body {
  position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 34px 38px;
  /* raised text panel: soft tint, light top edge and a shadow cast onto the photo */
  background: linear-gradient(160deg, #FFFFFF 0%, #F7F9FF 100%);
  box-shadow: inset 0 1px 0 #fff, -18px 0 34px -16px rgba(14,20,64,.32);
}
.inc-card:nth-child(even) .inc-card__body { box-shadow: inset 0 1px 0 #fff, 18px 0 34px -16px rgba(14,20,64,.32); }
.inc-card__num { font-family: var(--font-head); font-size: 14px; font-weight: 800; letter-spacing: .12em; color: var(--orange-600); }
.inc-card h3 { margin: 0; font-family: var(--font-head); font-size: 23px; font-weight: 800; color: var(--ink); }
.inc-card p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--text); }
.inc-card__pts { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.inc-card__pts li { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; background: var(--blue-50); color: var(--navy-900); font-size: 13.5px; font-weight: 600; }
.inc-card__pts svg { width: 14px; height: 14px; fill: none; stroke: var(--orange-500); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.srv-cta.svc-cta { padding-top: var(--sec-pad); }
@media (max-width: 860px) {
  .inc-card, .inc-card:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .inc-card:nth-child(even) .inc-card__media { order: 0; }
  .inc-card__media { min-height: 0; }
  .inc-card__media img { aspect-ratio: 16 / 9; height: auto; }
  .inc-card__body { padding: 24px 22px; }
  .inc-card__body, .inc-card:nth-child(even) .inc-card__body { box-shadow: inset 0 1px 0 #fff, 0 -16px 30px -16px rgba(14,20,64,.32); }
  .inc-card h3 { font-size: 20px; }
}
@media (max-width: 767px) {
  .inc-card p { font-size: 15.5px; }
}

/* Case study cards: "Use Cases" and "Benefits" labels + benefits list (component-inc.php) */
.inc-card__label { margin: 8px 0 0 !important; font-family: var(--font-head); font-size: 12.5px !important; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--orange-600) !important; }
.inc-card__benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; margin: 4px 0 0; padding: 0; list-style: none; }
.inc-card__benefits li { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.inc-card__benefits svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: #16A34A; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 600px) { .inc-card__benefits { grid-template-columns: minmax(0, 1fr); } }

/* Search box in a dark banner — 404 page + search results (component-hero-search.php) */
.hero-search {
  display: flex; align-items: center; gap: 8px; max-width: 560px; margin: 26px auto 0; padding: 6px 6px 6px 18px; border-radius: 999px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(8px); transition: background .2s, border-color .2s;
}
.hero-search:focus-within { background: #fff; border-color: #fff; }
.hero-search > svg { width: 19px; height: 19px; flex-shrink: 0; fill: none; stroke: #C8D3E6; stroke-width: 2; stroke-linecap: round; }
.hero-search input { flex: 1; min-width: 0; padding: 10px 4px; border: 0; background: transparent; font: inherit; font-size: 15.5px; color: #fff; outline: none; }
.hero-search input::placeholder { color: #AEB9D0; }
.hero-search input::-webkit-search-cancel-button { filter: invert(1); }
.hero-search:focus-within input { color: var(--ink); }
.hero-search:focus-within input::-webkit-search-cancel-button { filter: none; }
.hero-search:focus-within > svg { stroke: var(--muted); }
.hero-search .btn { flex-shrink: 0; }

/* Helpful Links cards — 404 page + search with no results (component-helpful-links.php) */
.help-links { padding: var(--sec-pad) 0; background: #fff; }
.help-links__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.help-link {
  display: flex; flex-direction: column; gap: 10px; padding: 26px 24px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.help-link:hover { transform: translateY(-5px); border-color: var(--orange-500); box-shadow: var(--shadow-2); }
.help-link__ic { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 4px; border-radius: 16px; background: var(--grad-brand); box-shadow: 0 14px 26px -14px rgba(59,79,216,.8); }
.help-link__ic svg { width: 25px; height: 25px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.help-link b { font-family: var(--font-head); font-size: 18px; font-weight: 800; line-height: 1.3; color: var(--ink); }
.help-link__text { flex-grow: 1; font-size: 15px; line-height: 1.65; color: var(--text); }
.help-link .link-arrow { margin-top: 4px; font-size: 14.5px; }
.help-link:hover .link-arrow svg { transform: translateX(4px); }
@media (max-width: 1100px) { .help-links__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .help-links__grid { grid-template-columns: minmax(0, 1fr); }
  .hero-search { padding-left: 14px; }
  .hero-search .btn { padding: 10px 14px; }
}