/* ==========================================================================
   BEST PATH RESEARCH — static site styles

   Metrics are transcribed from the original WordPress "detox" theme
   (assets/css/style-theme.css + responsive.css) so the layout matches the
   live site rather than approximating it. Original values are noted inline
   where they are not obvious.

   The original header is absolutely positioned over the hero, so the hero's
   210px top padding is measured from the top of the page. Here the header is
   static and 140px tall (54 + 56px logo + 30), so the hero carries 70px of
   top padding instead — 140 + 70 + 85 lands the h1 at the same place.

   To dial the whole design down or up, change the values in the TYPE SCALE
   and SPACING blocks below; nothing else hard-codes those sizes.
   ========================================================================== */

:root {
  --brand: #1a96ff;
  --brand-dark: #0f7ad9;
  --brand-tint: #f3f7ff;
  --heading: #3b3b3b;          /* original h1/h2/h3 colour */
  --body: #848484;             /* original body colour */
  --ink: #0e1221;
  --line: #e7ecf3;
  --shadow-card: 0 20px 50px 5px #e9eef745;              /* original */
  --shadow-soft: 0 10px 30px 0 rgba(26, 150, 255, .09);  /* original */
  --shadow-pill: 0 1px 10px 2px rgba(99, 119, 238, .05); /* original */
  --radius: 10px;

  /* The original theme stacks are exactly 'Poppins',sans-serif and
     'Roboto',sans-serif with no Japanese family, so Japanese glyphs fall
     through to the OS font (Hiragino on macOS, Yu Gothic on Windows).
     Naming those explicitly keeps that behaviour deterministic instead of
     relying on the generic sans-serif default. Do NOT add a JP webfont
     here — it changes Japanese rendering away from the original. */
  --font-jp: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium",
             "Yu Gothic", Meiryo, sans-serif;
  --font-head: "Poppins", var(--font-jp);
  --font-body: "Roboto", var(--font-jp);

  /* ---- TYPE SCALE (original theme values) ---- */
  --fs-body: 17px;   --lh-body: 32px;
  --fs-h1:   55px;   --lh-h1:   72px;
  --fs-h2:   40px;   --lh-h2:   60px;
  --fs-h3:   22px;   --lh-h3:   30px;
  --fs-nav:  18px;
  --fs-eyebrow: 18px;
  --fs-btn:  17px;

  /* ---- SPACING (original theme values) ---- */
  --container-max: 1200px;   /* .auto-container */
  --container-pad: 15px;
  --header-pad-x: 100px;     /* .outer-container, 30px below 1600 */
  --logo-pad-top: 54px;
  --logo-pad-bottom: 30px;
  --nav-gap: 30px;           /* .navigation > li margin, 20px below 1200 */
  --hero-pad-top: 70px;
  --hero-pad-bottom: 100px;
  --hero-content-offset: 85px;
  --section-pad: 100px;
  --card-pad: 70px 50px 50px;
}

*, *::before, *::after { box-sizing: border-box; }

/* scroll-padding clears the compact pinned header (81px) so in-page anchors
   like /service/#service1 do not land underneath it. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 95px; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--body);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  color: var(--heading);
  font-weight: 700;
  margin: 0 0 20px;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; margin-bottom: 23px; }
h4 { font-size: 20px; line-height: 30px; font-weight: 600; }
h5 { font-size: 18px; line-height: 30px; font-weight: 600; }
p  { margin: 0 0 20px; }
p:last-child { margin-bottom: 0; }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.container.narrow { max-width: 900px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1200;
  background: var(--brand); color: #fff; padding: 12px 20px; border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; color: #fff; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---------- Buttons (original .theme-btn) ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-head);
  font-size: var(--fs-btn);
  line-height: 30px;
  font-weight: 500;
  padding: 15px 58px;
  border-radius: 30px;
  text-align: center;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s, box-shadow .25s;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); color: #fff; }
.btn-outline { background: transparent; border-color: var(--brand); color: var(--brand); }
.btn-outline:hover { background: var(--brand); color: #fff; }
.btn-white { background: #fff; color: var(--brand); }
.btn-white:hover { background: var(--ink); color: #fff; }
.btn[disabled] { opacity: .6; cursor: progress; }

.read-more { font-family: var(--font-head); font-weight: 500; font-size: 16px; color: var(--brand); }
.read-more::after { content: " \2192"; }

/* ---------- Sections & titles ---------- */
section { padding: var(--section-pad) 0; }
.section-tint { background: var(--brand-tint); }

.sec-title { margin-bottom: 30px; }          /* original */
.sec-title .eyebrow {                        /* original .sec-title p */
  font-family: var(--font-head);
  font-size: var(--fs-eyebrow);
  line-height: 30px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--brand);
  margin-bottom: 14px;
}
.sec-title h2 { margin-bottom: 0; }
.sec-title.centered { text-align: center; }
.sec-lead { max-width: 700px; }
.sec-title.centered + .sec-lead { text-align: center; margin: 0 auto 40px; }

/* ---------- Header ----------
   Full-bleed with 100px side padding — deliberately NOT inside .container,
   which is what puts the logo near the viewport edge on the original. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: #fff;
  transition: box-shadow .3s ease;
}

/* Original behaviour: the tall header gives way to a compact fixed bar once
   you scroll (.sticky-header — logo padding 11px 0 14px, shadow
   0 10px 20px rgba(0,0,0,.2)). Reproduced here by compacting the single
   header instead of rendering a second copy of the nav, which keeps the
   markup to one set of landmarks and avoids any layout jump. */
.site-header.is-compact {
  box-shadow: 0 10px 20px rgba(0, 0, 0, .2);
}
.site-header.is-compact .site-logo {
  padding: 11px 0 14px;                       /* original .sticky-header .logo-box */
}
.site-header.is-compact .main-nav a { padding: 26px 0 25px; }
.site-header.is-compact .lang-switch { margin-top: 14px; padding-top: 0; }

.header-inner {
  display: flex;
  align-items: flex-start;
  padding: 0 var(--header-pad-x);
}
.site-logo {
  display: block;
  padding: var(--logo-pad-top) 0 var(--logo-pad-bottom);
  margin-right: 125px;                        /* original .logo-box */
  flex-shrink: 0;
  transition: padding .3s ease;
}
.site-logo img { width: 250px; height: 56px; }

/* Nav sits immediately after the logo and is pushed no further right; the
   auto margin belongs on the nav's right so the language pill goes to the
   far edge (matching the original float-left menu + float-right button). */
.main-nav { margin-right: auto; }
.main-nav ul { display: flex; list-style: none; margin: 0; padding: 0; }
.main-nav li { margin: 0 var(--nav-gap); }
.main-nav li:first-child { margin-left: 0; }
.main-nav li:last-child { margin-right: 0; }
.main-nav a {
  display: block;
  font-family: var(--font-head);
  font-size: var(--fs-nav);
  line-height: 30px;
  font-weight: 600;
  color: var(--heading);
  padding: 64px 0 20px;                       /* original .navigation > li */
  white-space: nowrap;
  transition: padding .3s ease, color .2s;
}
.main-nav a:hover { color: var(--brand); }
.main-nav li.is-current > a { color: var(--brand); }

/* Original .menu-right-content .btn-box a — a single wide pill. */
.lang-switch { margin-top: 35px; padding-top: 15px; flex-shrink: 0; }
.lang-pill {
  display: inline-block;
  font-family: var(--font-head);
  font-size: var(--fs-nav);
  line-height: 30px;
  font-weight: 600;
  color: var(--heading);
  background: #fff;
  padding: 10px 40px;
  border-radius: 30px;
  box-shadow: var(--shadow-pill);
  border: 1px solid var(--line);
}
.lang-pill:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

.nav-toggle {
  display: none;
  margin: 30px 0 30px auto;
  width: 46px; height: 46px;
  border: 1px solid var(--line); border-radius: 8px;
  background: #fff; cursor: pointer; padding: 0;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px; margin: 4px auto;
  background: var(--heading); border-radius: 2px;
  transition: transform .25s, opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Hero (original .banner-section) ---------- */
.hero {
  padding: var(--hero-pad-top) 0 var(--hero-pad-bottom);
  background: #fff;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
}
.hero-content {
  padding-top: var(--hero-content-offset);   /* original .content-box */
  margin-right: 60px;
}
.hero h1 { margin-bottom: 31px; }            /* original */
.hero p { margin-bottom: 40px; }             /* original */
.hero-art { position: relative; }
.hero-art .art-main { margin: 0 auto; width: 100%; }
.hero-art .art-float { position: absolute; width: 20%; }
.hero-art .art-1 { left: 3%;  top: 21%;  animation: float 6s ease-in-out infinite; }
.hero-art .art-2 { right: 5%; top: 11%;  animation: float 7s ease-in-out infinite .6s; }
.hero-art .art-3 { left: 17%; bottom: 3%; animation: float 8s ease-in-out infinite 1.2s; }
.hero-art .art-4 { right: 11%; bottom: 11%; animation: float 6.5s ease-in-out infinite 1.8s; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* ---------- Page banner (inner pages) ---------- */
.page-banner {
  padding: 70px 0;
  background: linear-gradient(120deg, #f4f9ff 0%, #eef4ff 100%);
  border-bottom: 1px solid var(--line);
}
.page-banner h1 { font-size: 42px; line-height: 54px; margin-bottom: 10px; }
.breadcrumb { font-size: 16px; font-family: var(--font-head); color: var(--body); }
.breadcrumb a { color: var(--body); }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb span + span::before { content: " / "; color: #b9c3d1; }

/* ---------- Grids ---------- */
.grid { display: grid; gap: 30px; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }

/* original .feature-block-one .inner-box */
.feature-card {
  display: flex; flex-direction: column;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--card-pad);
  text-align: center;
  transition: transform .25s, box-shadow .25s;
}
.feature-card:hover { transform: translateY(-5px); box-shadow: 0 24px 50px rgba(26, 150, 255, .16); }
.feature-card .icon {
  width: 80px; height: 80px;
  margin: 0 auto 30px;
  border-radius: 50%;
  background: var(--brand-tint); color: var(--brand);
  display: grid; place-items: center;
  transition: background-color .25s, color .25s;
}
.feature-card .icon svg { width: 36px; height: 36px; }
.feature-card:hover .icon { background: var(--brand); color: #fff; }
.feature-card h3 a { color: inherit; }
.feature-card h3 a:hover { color: var(--brand); }
.feature-card p { margin-bottom: 20px; }
.feature-card .read-more { margin-top: auto; padding-top: 5px; }

.step-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 50px 40px 45px;
}
.step-card .step-num {
  font-family: var(--font-head);
  font-size: 16px; font-weight: 700; letter-spacing: 2px;
  color: var(--brand); display: block; margin-bottom: 12px;
}

/* ---------- Split sections ---------- */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 60px;
  align-items: center;
}
.check-list { list-style: none; margin: 0 0 30px; padding: 0; }
.check-list li {
  position: relative; padding-left: 32px; margin-bottom: 10px;
  font-family: var(--font-head); color: var(--heading); font-weight: 500;
}
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--brand);
  box-shadow: inset 0 0 0 3px #fff, 0 0 0 3px rgba(26, 150, 255, .2);
}

/* ---------- Service rows ---------- */
.service-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: 55px;
  align-items: center;
  padding: 55px 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: 95px;
}
.service-row:first-of-type { border-top: 0; padding-top: 0; }
.service-row img { border-radius: var(--radius); box-shadow: var(--shadow-soft); width: 100%; }
.service-row h2 { font-size: 32px; line-height: 44px; }
@media (min-width: 46rem) { .service-row.reverse .service-media { order: 2; } }

/* ---------- Post cards ---------- */
.post-card {
  display: flex; flex-direction: column;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform .25s, box-shadow .25s;
}
.post-card:hover { transform: translateY(-5px); box-shadow: 0 24px 50px rgba(26, 150, 255, .16); }
.post-card .thumb { aspect-ratio: 16 / 10; overflow: hidden; background: var(--brand-tint); }
.post-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-card .card-body { padding: 30px 30px 34px; display: flex; flex-direction: column; flex: 1; }
.post-meta {
  font-family: var(--font-head); font-size: 15px; color: var(--body);
  margin-bottom: 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.tag {
  display: inline-block; background: var(--brand-tint); color: var(--brand);
  border-radius: 20px; padding: 2px 12px;
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
}
.post-card h3 { font-size: 19px; line-height: 28px; margin-bottom: 12px; }
.post-card h3 a { color: var(--heading); }
.post-card h3 a:hover { color: var(--brand); }
.post-card p { font-size: 16px; line-height: 28px; margin-bottom: 18px; }
.post-card .read-more { margin-top: auto; }

/* ---------- Single post ---------- */
.post-header { padding: 60px 0 0; }
.post-header h1 { font-size: 38px; line-height: 52px; margin-bottom: 16px; }
.post-body { padding: 34px 0 var(--section-pad); overflow-wrap: break-word; }
.post-body .container { max-width: 860px; }
.post-body a { overflow-wrap: anywhere; }
.post-body h2 { font-size: 30px; line-height: 42px; margin: 44px 0 18px; }
.post-body h3 { font-size: 24px; line-height: 34px; margin: 34px 0 14px; }
.post-body img { border-radius: var(--radius); margin: 30px auto; box-shadow: var(--shadow-soft); }
.post-body ul, .post-body ol { padding-left: 24px; margin: 0 0 22px; }
.post-body li { margin-bottom: 8px; }
.post-body pre {
  background: #0f1729; color: #e6edf7; padding: 18px 20px; border-radius: 8px;
  overflow-x: auto; font-size: 15px; line-height: 26px;
}
.post-body :not(pre) > code {
  background: var(--brand-tint); color: var(--brand-dark);
  padding: 2px 6px; border-radius: 4px;
}
.post-body table { width: 100%; border-collapse: collapse; margin: 24px 0; }
.post-body th, .post-body td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; }
.post-nav {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 50px; padding-top: 26px; border-top: 1px solid var(--line);
  font-family: var(--font-head); font-weight: 500; font-size: 16px;
}
.post-nav a { max-width: 22rem; }

/* ---------- Team ---------- */
.team-member {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 40px;
  padding: 46px 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.team-member:first-of-type { border-top: 0; padding-top: 0; }
.team-photo img { border-radius: var(--radius); box-shadow: var(--shadow-soft); width: 100%; }
.team-member h3 { font-size: 26px; line-height: 36px; margin-bottom: 6px; }
.team-member .role { color: var(--brand); font-family: var(--font-head); font-weight: 500; margin-bottom: 18px; }
.pub-list { list-style: none; margin: 16px 0 0; padding: 0; }
.pub-list li {
  font-size: 15px; line-height: 26px;
  padding: 12px 0 12px 18px; border-left: 3px solid var(--brand-tint); margin-bottom: 6px;
}
.pub-list li p { font-size: inherit; line-height: inherit; margin: 0; }
details.pubs > summary {
  cursor: pointer; font-family: var(--font-head); font-weight: 600;
  color: var(--brand); margin-top: 14px;
}

/* ---------- Company table ---------- */
.info-table { width: 100%; border-collapse: collapse; }
.info-table th, .info-table td {
  border-bottom: 1px solid var(--line);
  padding: 18px 16px; text-align: left; vertical-align: top;
  font-size: 16px; line-height: 28px;
}
.info-table th {
  width: 220px; font-family: var(--font-head); font-weight: 600;
  color: var(--heading); background: #fafcff;
}
.map-embed { margin-top: 40px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); line-height: 0; }
.map-embed iframe { width: 100%; height: 420px; border: 0; }

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 55px; align-items: start;
}
.contact-info { background: var(--brand-tint); border-radius: var(--radius); padding: 40px 36px; }
.contact-info h3 { font-size: 22px; margin-bottom: 20px; }
.contact-info dl { margin: 0; }
.contact-info dt {
  font-family: var(--font-head); font-weight: 600; color: var(--heading);
  margin-top: 22px; font-size: 16px;
}
.contact-info dt:first-child { margin-top: 0; }
.contact-info dd { margin: 4px 0 0; font-size: 16px; line-height: 28px; }

.form-row { margin-bottom: 20px; }
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 0 20px;
}
label {
  display: block; font-family: var(--font-head); font-weight: 600;
  font-size: 16px; color: var(--heading); margin-bottom: 8px;
}
label .req { color: #d9534f; margin-left: 3px; }
input[type="text"], input[type="email"], input[type="tel"], textarea {
  width: 100%; font-family: var(--font-body);
  font-size: max(16px, 16px); line-height: 28px; color: var(--heading);
  background: #fff; border: 1px solid #d9e2ec; border-radius: 8px;
  padding: 13px 16px;
  transition: border-color .2s, box-shadow .2s;
}
input:focus, textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(26, 150, 255, .15);
}
textarea { min-height: 170px; resize: vertical; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: #d9534f; }
.field-error { color: #d9534f; font-size: 15px; line-height: 24px; margin: 6px 0 0; display: none; }
.field-error.is-visible { display: block; }

.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { margin-top: 20px; padding: 14px 18px; border-radius: 8px; display: none; font-size: 16px; }
.form-status.is-visible { display: block; }
.form-status.ok  { background: #e9f7ee; color: #1c7a41; border: 1px solid #b9e5c9; }
.form-status.err { background: #fdecea; color: #a3312a; border: 1px solid #f5c2be; }

/* ---------- Partners ---------- */
.partner-strip { display: flex; flex-wrap: wrap; gap: 46px; align-items: center; justify-content: center; }
.partner-strip img { max-height: 62px; width: auto; opacity: .85; transition: opacity .2s; }
.partner-strip img:hover { opacity: 1; }

/* ---------- CTA ---------- */
.cta {
  background: linear-gradient(120deg, var(--brand) 0%, #4fb0ff 100%);
  color: #fff; text-align: center; padding: 80px 0;
}
.cta h2 { color: #fff; margin-bottom: 30px; }

/* ---------- Footer ---------- */
.site-footer {
  background: #0e1221; color: rgba(255, 255, 255, .72);
  padding: 80px 0 0; font-size: 16px; line-height: 30px;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 40px;
}
.site-footer h3 {
  color: #fff; font-size: 18px; letter-spacing: 1px;
  text-transform: uppercase; margin-bottom: 22px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 9px; }
.site-footer a { color: rgba(255, 255, 255, .72); }
.site-footer a:hover { color: var(--brand); }
.footer-logo { background: #fff; border-radius: 8px; padding: 12px 16px; display: inline-block; margin-bottom: 22px; }
.footer-logo img { width: 180px; }
.footer-bottom {
  margin-top: 60px; padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 15px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}

/* ---------- Utilities ---------- */
.center { text-align: center; }
.more-link { margin-top: 40px; }
.post-crumb { margin-bottom: 14px; }
.error-page { padding: 120px 0; }
.error-page .eyebrow {
  font-family: var(--font-head); font-size: 18px; font-weight: 600;
  letter-spacing: 3px; color: var(--brand); margin-bottom: 14px;
}
.error-lead { margin-bottom: 30px; }
.error-page .btn + .btn { margin-left: 10px; }

/* ==========================================================================
   Responsive — breakpoints follow the original theme's responsive.css
   ========================================================================== */

/* Original: .outer-container padding 0 30px; .logo-box margin-right 30px */
@media only screen and (max-width: 1599px) {
  :root { --header-pad-x: 30px; }
  .site-logo { margin-right: 30px; }
}

/* Original: .navigation > li margin 0 20px; .content-box margin-right 0 */
@media only screen and (max-width: 1200px) {
  :root { --nav-gap: 20px; }
  .hero-content { margin-right: 0; }
}

/* Original: .main-menu hidden, mobile toggler shown, logo-box padding 30px 0,
   banner content-box padding-top 0 */
@media only screen and (max-width: 991px) {
  :root { --logo-pad-top: 30px; --logo-pad-bottom: 30px; --hero-content-offset: 0px; }
  /* The original hides .sticky-header below 991px, so the header simply
     scrolls away on mobile rather than pinning. */
  .site-header { position: static; }
  .site-header.is-compact { box-shadow: none; }
  .site-header.is-compact .site-logo { padding: 30px 0; }
  .nav-toggle { display: block; }
  .header-inner { flex-wrap: wrap; align-items: center; }
  .site-logo { margin-right: auto; }
  .main-nav {
    display: none;
    order: 10;
    flex-basis: 100%;
    margin: 0 0 20px;
    border-top: 1px solid var(--line);
  }
  .main-nav.is-open { display: block; }
  .main-nav ul { flex-direction: column; }
  .main-nav li { margin: 0; border-bottom: 1px solid var(--line); }
  .main-nav li:last-child { border-bottom: 0; }
  .main-nav a { padding: 14px 0; white-space: normal; }
  .lang-switch { margin: 0 12px 0 0; padding-top: 0; order: 5; }
  .lang-pill { padding: 8px 22px; font-size: 16px; }
  .nav-toggle { margin: 0; order: 6; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-content { margin-bottom: 40px; }
  .hero-art { max-width: 480px; margin: 0 auto; }
  .team-member { grid-template-columns: 1fr; }
  .team-photo { max-width: 260px; }
  :root { --section-pad: 70px; --card-pad: 50px 35px 40px; }
}

/* Original: .banner-section padding 150px 0 70px */
@media only screen and (max-width: 767px) {
  :root { --hero-pad-top: 40px; --hero-pad-bottom: 70px; }
  .page-banner { padding: 45px 0; }
  .page-banner h1 { font-size: 32px; line-height: 44px; }
}

/* Original: banner h1 36/45, sec-title h2 30/40 */
@media only screen and (max-width: 599px) {
  :root {
    --fs-h1: 36px; --lh-h1: 45px;
    --fs-h2: 30px; --lh-h2: 40px;
    --fs-eyebrow: 16px;
    --section-pad: 55px;
    --card-pad: 40px 26px 34px;
    --container-pad: 18px;
  }
  body { font-size: 16px; line-height: 30px; }
  .btn { padding: 13px 34px; }
  .post-header h1 { font-size: 27px; line-height: 38px; }
  .post-body h2 { font-size: 24px; line-height: 34px; }
  .contact-info { padding: 28px 24px; }
  .footer-bottom { flex-direction: column; gap: 6px; }
}

@media only screen and (max-width: 544px) {
  .info-table, .info-table tbody, .info-table tr,
  .info-table th, .info-table td { display: block; width: 100%; }
  .info-table tr { border-bottom: 1px solid var(--line); padding: 8px 0; }
  .info-table th { background: transparent; border-bottom: 0; padding-bottom: 0; }
  .info-table td { border-bottom: 0; padding-top: 2px; }
}

/* The original hides the language switcher below 500px. Kept visible here —
   dropping the only route between the two languages hurts more than the
   space it saves — but shrunk so it never crowds the toggle. */
@media only screen and (max-width: 420px) {
  .lang-pill { padding: 7px 16px; font-size: 15px; }
  .site-logo img { width: 190px; height: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   MOTION
   Reproduces the interactive behaviour of the original theme. The keyframes
   below are written from scratch (a fade, a slide, a scale, a rotation) so
   nothing is copied out of the theme's bundled animate.css; the names mirror
   the originals only so the mapping stays readable.

   Original effects reproduced:
     .feature-block-one   icon fills with brand colour, glyph turns white,
                          card shadow deepens, orbiting dot group starts
                          rotating on hover (service_hexagon, paused at rest),
                          dots pulse at 5s / 4s / 3s (zoom-fade-two)
     .news-block-one      thumbnail scales to 1.05, a brand circle expands
                          from the corner (scale 5, opacity .9, .15s delay),
                          arrow scales 0 -> 1 on the same delay
     .theme-btn           two angled pseudo-elements wipe in from either side
     .btn-box a           same wipe on the language pill
     .links-widget a      underline grows from the left
     .scroll-top          appears on scroll, shadow deepens on hover
     WOW.js               fadeInUp / slideIn* / flipInY entrance animations,
                          here driven by IntersectionObserver
     zoom-fade            5s breathing loop on the hero's floating art
   ========================================================================== */

@keyframes bpr-orbit      { from { transform: rotate(0deg); }   to { transform: rotate(360deg); } }
@keyframes bpr-pulse      { 0%, 100% { transform: scale(1.5); } 50% { transform: scale(1); } }
@keyframes bpr-breathe    { 0%, 100% { transform: scale(.9); }  50% { transform: scale(1); } }

/* ---------- Feature icon: orbiting, pulsing dots ---------- */
.feature-card .icon { position: relative; overflow: visible; }
.feature-card .icon svg { position: relative; z-index: 2; transition: color .5s ease; }

/* The filled disc that floods with brand colour on hover. */
.feature-card .icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--brand-tint);
  z-index: 1;
  transition: background-color .5s ease;
}
.feature-card:hover .icon::after { background: var(--brand); }
.feature-card:hover .icon { color: #fff; }
.feature-card:hover { box-shadow: 0 10px 30px 3px rgba(26, 150, 255, .4); }

/* Dot group: rotates only while hovered, matching the original's
   animation-play-state: paused -> running. */
.anim-icon {
  position: absolute;
  inset: 0;
  z-index: 3;
  animation: bpr-orbit 3s infinite linear;
  animation-play-state: paused;
  pointer-events: none;
}
.feature-card:hover .anim-icon { animation-play-state: running; }
.anim-icon .dot { position: absolute; border-radius: 50%; background: rgba(26, 150, 255, .8); }
.anim-icon .dot-1 { width: 20px; height: 20px; left: -25px; top: 60px; animation: bpr-pulse 5s infinite linear; }
.anim-icon .dot-2 { width: 20px; height: 20px; left: 10px;  top: -20px; animation: bpr-pulse 4s infinite linear; }
.anim-icon .dot-3 { width: 12px; height: 12px; right: 0;    top: 15px;  animation: bpr-pulse 3s infinite linear; }

/* ---------- Post card thumbnail ---------- */
.post-card .thumb { position: relative; }
.post-card .thumb img { transition: transform .5s ease; }
.post-card:hover .thumb img { transform: scale(1.05); }

/* Brand circle that expands out of the bottom-right corner. */
.post-card .thumb-fx {
  position: absolute;
  right: -10px; bottom: -20px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--brand);
  opacity: 0;
  z-index: 1;
  transition: all .35s ease;
}
.post-card:hover .thumb-fx { opacity: .9; transform: scale(5); transition-delay: .15s; }

.post-card .thumb-arrow {
  position: absolute;
  right: 30px; bottom: 14px;
  z-index: 2;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  transform: scale(0);
  transition: transform .5s ease;
}
.post-card:hover .thumb-arrow { transform: scale(1); transition-delay: .15s; }

/* ---------- Button wipe ----------
   The original slides two angled shapes in from either edge
   (translateX ±100% at rest, ±40% on hover). */
.btn { position: relative; overflow: hidden; z-index: 1; }
.btn::before, .btn::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 100%;
  z-index: -1;
  background: var(--brand-dark);
  transition: transform .5s ease;
}
.btn::before { left: 0;  transform: translateX(-100%) skewX(-12deg); }
.btn::after  { right: 0; transform: translateX(100%)  skewX(-12deg); }
.btn:hover::before { transform: translateX(-40%) skewX(-12deg); }
.btn:hover::after  { transform: translateX(40%)  skewX(-12deg); }

.btn-outline::before, .btn-outline::after { background: var(--brand); }
.btn-white::before,   .btn-white::after   { background: var(--ink); }

/* Language pill uses the same wipe (original .btn-box a). */
.lang-pill { position: relative; overflow: hidden; z-index: 1; }
.lang-pill::before, .lang-pill::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 100%;
  z-index: -1;
  background: var(--brand);
  transition: transform .5s ease;
}
.lang-pill::before { left: 0;  transform: translateX(-100%) skewX(-12deg); }
.lang-pill::after  { right: 0; transform: translateX(100%)  skewX(-12deg); }
.lang-pill:hover::before { transform: translateX(-40%) skewX(-12deg); }
.lang-pill:hover::after  { transform: translateX(40%)  skewX(-12deg); }

/* ---------- Footer link underline grows from the left ---------- */
.site-footer li a { position: relative; }
.site-footer li a::before {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 1px;
  background: var(--brand);
  transition: width .3s ease;
}
.site-footer li a:hover::before { width: 100%; }

/* ---------- Hero floating art: original zoom-fade breathing loop ---------- */
.hero-art .art-float { animation: bpr-breathe 5s infinite linear; }
.hero-art .art-1 { animation-duration: 5s; }
.hero-art .art-2 { animation-duration: 6s; }
.hero-art .art-3 { animation-duration: 7s; }
.hero-art .art-4 { animation-duration: 4.5s; }

/* ---------- Scroll-to-top ---------- */
.scroll-top {
  position: fixed;
  right: 30px; bottom: 30px;
  width: 50px; height: 50px;
  border: 0; border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s, visibility .3s, transform .3s, box-shadow .3s;
  z-index: 800;
}
.scroll-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top:hover { box-shadow: 0 5px 5px rgba(0, 0, 0, .5); background: var(--brand-dark); }

/* ---------- Scroll-triggered entrance animations (WOW.js equivalent) ----------
   Elements carry data-anim="<effect>". JS adds .is-revealed when they enter
   the viewport. If JS never runs, the .no-js guard leaves everything visible. */
[data-anim] { opacity: 0; }
html.no-anim [data-anim] { opacity: 1; transform: none !important; }

[data-anim="fadeInUp"]    { transform: translateY(40px); }
[data-anim="slideInUp"]   { transform: translateY(70px); }
[data-anim="slideInDown"] { transform: translateY(-70px); }
[data-anim="slideInLeft"] { transform: translateX(-70px); }
[data-anim="slideInRight"]{ transform: translateX(70px); }
[data-anim="fadeInLeft"]  { transform: translateX(-40px); }
[data-anim="fadeInRight"] { transform: translateX(40px); }
[data-anim="flipInY"]     { transform: perspective(400px) rotateY(70deg); }

[data-anim].is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity .8s ease, transform .8s cubic-bezier(.22, .68, .32, 1);
}

/* Stagger siblings inside a grid so cards arrive in sequence. */
.grid > [data-anim]:nth-child(2).is-revealed { transition-delay: .12s; }
.grid > [data-anim]:nth-child(3).is-revealed { transition-delay: .24s; }
.grid > [data-anim]:nth-child(4).is-revealed { transition-delay: .36s; }
.grid > [data-anim]:nth-child(5).is-revealed { transition-delay: .48s; }
.grid > [data-anim]:nth-child(6).is-revealed { transition-delay: .60s; }

/* Motion is decoration — drop all of it when the visitor asks for less. */
@media (prefers-reduced-motion: reduce) {
  [data-anim] { opacity: 1 !important; transform: none !important; }
  .anim-icon { animation: none; }
  .hero-art .art-float { animation: none; }
  .post-card .thumb-fx, .post-card .thumb-arrow { transition: none; }
  .btn::before, .btn::after,
  .lang-pill::before, .lang-pill::after { display: none; }
}

/* ==========================================================================
   DECORATIVE PATTERN LAYERS

   The original theme placed absolutely-positioned divs carrying pattern PNGs
   from its own asset folder. Those PNGs are Envato-licensed, so the shapes
   here are our own SVGs (assets/img/pattern-*.svg) plus a couple of radial
   gradients. Positions, sizes and motion are taken from the theme's rules:

     .banner-section .pattern-box .pattern-1   top:0    right:0  1085x760  slideInDown
     .banner-section .pattern-box .pattern-2   left:0   bottom:0  270x290  zoom-fade 5s
     .process-section .pattern-box .pattern-1  top:0    right:0   920x755  slideInDown
     .news-section .pattern-layer              left:0   top:100px 270x290  zoom-fade 5s
     .cta-section .pattern-1                   left:-30 top:-30   435x405  zoom-fade 5s
     .cta-section .pattern-2                   right:30 bottom:-30 365x195 zoom-fade 5s
   ========================================================================== */

.hero, .cta, .section-tint { position: relative; overflow: hidden; }
.hero > .container, .cta > .container, .section-tint > .container { position: relative; z-index: 2; }

.pattern {
  position: absolute;
  display: block;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

.pattern-panel {
  top: 0; right: 0;
  width: 1085px; height: 760px;
  max-width: 72vw;
  background-image: url("/assets/img/pattern-panel.svg");
  background-position: top right;
}
.pattern-wedge-bl {
  left: 0; bottom: 0;
  width: 270px; height: 290px;
  background-image: url("/assets/img/pattern-wedge.svg");
  animation: bpr-breathe 5s infinite linear;
}
.pattern-wedge-lg {
  top: 0; right: 0;
  width: 920px; height: 755px;
  max-width: 65vw;
  background-image: url("/assets/img/pattern-wedge-lg.svg");
  background-position: top right;
}
.pattern-wedge-news {
  left: 0; top: 100px;
  width: 270px; height: 290px;
  background-image: url("/assets/img/pattern-wedge.svg");
  animation: bpr-breathe 5s infinite linear;
}

/* The CTA shapes are white at ~5% over the blue band — cheap as gradients. */
.pattern-cta-1 {
  left: -30px; top: -30px;
  width: 435px; height: 405px;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .13), rgba(255, 255, 255, 0) 70%);
  animation: bpr-breathe 5s infinite linear;
}
.pattern-cta-2 {
  right: 30px; bottom: -30px;
  width: 365px; height: 195px;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 70%);
  animation: bpr-breathe 6s infinite linear;
}

/* Purely decorative: drop below the mobile breakpoint where they only
   compete with the content, and whenever reduced motion is requested. */
@media only screen and (max-width: 767px) {
  .pattern-panel, .pattern-wedge-lg { display: none; }
  .pattern-wedge-bl, .pattern-wedge-news { width: 150px; height: 160px; opacity: .7; }
}
@media (prefers-reduced-motion: reduce) {
  .pattern { animation: none !important; }
}