/* ---------------------------------------------------------------
     AKOI SEO landing - all page styles.
     Every rule lives here; the markup below carries class names only.
     --------------------------------------------------------------- */

  /* Base */
  * { box-sizing: border-box; }
  body { margin: 0; overflow-x: clip; }
  a { color: #17b3a2; text-decoration: none; }
  a:hover { color: #0f8a7d; }
  ul { margin: 0; padding: 0; }

  .ak-page { background: #ffffff; font-family: 'Mulish', sans-serif; color: #52606d; overflow-x: clip; max-width: 100vw; }

  /* Shared layout wrappers */
  .ak-wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
  .ak-wrap-center { max-width: 1240px; margin: 0 auto; padding: 0 24px; text-align: center; }
  .ak-wrap-narrow { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
  .ak-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .ak-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .ak-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .ak-center-36 { text-align: center; margin: 36px 0 0; }
  .ak-center-44 { text-align: center; margin-top: 44px; }
  .ak-mt-20 { margin-top: 20px; }
  .ak-accent { color: #17b3a2; }
  .ak-ink { color: #17323b; }
  .is-hidden { display: none; }

  /* Shared buttons */
  .ak-btn-outline { display: inline-block; background: #fff; color: #17b3a2; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 15px; padding: 15px 34px; border-radius: 40px; border: 2px solid #17b3a2; }
  .ak-btn-dark { display: inline-block; background: #0f1720; color: #fff; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 15px; padding: 14px 38px; border-radius: 40px; }
  .ak-btn-dark-sm { display: inline-block; background: #0f1720; color: #fff; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 14px; padding: 13px 32px; border-radius: 40px; }
  .ak-btn-dark-lg { display: inline-block; background: #0f1720; color: #fff; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 15px; padding: 15px 42px; border-radius: 40px; }
  .ak-btn-dark-xl { display: inline-block; background: #0f1720; color: #fff; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 15px; padding: 16px 40px; border-radius: 40px; }
  .ak-btn-ghost { display: inline-flex; align-items: center; gap: 12px; border: 1px solid #d5dde1; color: #17323b; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px; padding: 14px 28px; border-radius: 40px; }
  .ak-btn-submit { margin-top: 30px; background: #333; color: #fff; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 15px; padding: 14px 40px; border: none; border-radius: 40px; cursor: pointer; }

  /* Image slots: fill the box, keep the aspect ratio */
  .ak-img { display: block; width: 100%; height: 100%; object-fit: contain; }

  /* Hero */
  .ak-hero { max-width: 1240px; margin: 0 auto; padding: 56px 24px 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
  .ak-hero-title { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 44px; line-height: 1.18; color: #17323b; margin: 0 0 20px; }
  .ak-hero-text { font-size: 16px; line-height: 1.65; margin: 0 0 30px; max-width: 520px; }
  .ak-hero-media { aspect-ratio: 1 / 0.7; border-radius: 16px; display: grid; place-items: center; padding: 16px; }

  /* Marquees (client logos, tools, technologies) */
  @keyframes ak-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  .ak-marquee { overflow: hidden; }
  .ak-marquee-track { display: flex; align-items: center; gap: 40px; width: max-content; animation: ak-marquee 30s linear infinite; }
  .ak-marquee-track:hover { animation-play-state: paused; }
  /* The client strip holds all 63 logos, so it needs a longer cycle to keep the original scroll speed. */
  .ak-marquee-logos { animation-duration: 190s; }
  .ak-logos { background: linear-gradient(90deg, #0f2e37, #123a44); padding: 15px 0; margin-top: 24px; }
  .ak-logo-slot { flex: 0 0 auto; width: 170px; display: grid; place-items: center; padding: 8px; }
  .ak-logo-slot img { max-width: 100%; max-height: 100%; width: auto; height: 60px; object-fit: contain; }
  .ak-brand-slot { flex: 0 0 auto; width: 170px; height: 80px; border: 1px solid #e7edef; border-radius: 12px; background: #fff; display: grid; place-items: center; padding: 14px; box-shadow: 0 6px 16px rgba(20,40,50,.04); }
  .ak-brand-slot img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

  /* Why choose AKOI */
  .ak-why { background: linear-gradient(180deg, #eef8f6, #ffffff); padding: 70px 0; }
  .ak-why-title { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 40px; line-height: 1.2; color: #17323b; text-align: center; margin: 0 0 46px; }
  .ak-why-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
  .ak-why-card { background: #fff; border: 1px solid #e7edef; border-radius: 14px; padding: 24px; box-shadow: 0 8px 24px rgba(20,40,50,.06); }
  .ak-why-card-alt { background: #18a897; border-radius: 14px; padding: 24px; box-shadow: 0 8px 24px rgba(20,40,50,.06); }
  .ak-why-card-title { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 20px; color: #17b3a2; margin: 0 0 12px; }
  .ak-why-card-title-alt { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 20px; color: #fff; margin: 0 0 12px; }
  .ak-why-card-text { font-size: 14px; line-height: 1.6; margin: 0; }
  .ak-why-card-text-alt { font-size: 14px; line-height: 1.6; margin: 0; color: #eafaf7; }
  .ak-why-summary { font-size: 16px; line-height: 1.8; text-align: justify; max-width: 1010px; margin: 40px auto 0; }

  /* ---- Proven SEO Track Record ---------------------------------------
     Two rows of colour stat boxes that auto-scroll in opposite directions,
     reusing the .ak-marquee / .ak-marquee-track machinery. New rules only. */
  .ak-track { padding: 60px 0 66px; overflow: hidden; }
  .ak-track-title { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 38px; line-height: 1.2; color: #17323b; text-align: center; margin: 0 auto 40px; max-width: 1240px; padding: 0 24px; text-wrap: balance; }
  .ak-track-rows { display: flex; flex-direction: column; gap: 24px; }
  /* Overrides the marquee defaults: tighter gap, slower cycle for readability. */
  .ak-track-row { gap: 24px; animation-duration: 55s; }
  .ak-track-row-rev { animation-direction: reverse; }
  .ak-track-box { flex: 0 0 auto; width: 300px; min-height: 152px; border-radius: 16px; padding: 26px 26px 28px; display: flex; align-items: center; color: rgba(255,255,255,.9); font-size: 15px; line-height: 1.55; }
  .ak-track-box strong { color: #fff; font-weight: 800; }
  .ak-tb-teal { background: #2bb2a2; }
  .ak-tb-blue { background: #1c7dc1; }
  .ak-tb-gold { background: #e7b02e; }
  .ak-tb-green { background: #22a45e; }
  @media (prefers-reduced-motion: reduce) {
    /* No motion: let the rows be scrolled by hand instead. */
    .ak-track-rows .ak-marquee { overflow-x: auto; }
    .ak-track-row { animation: none; }
  }

  /* Case studies */
  .ak-cases { background: linear-gradient(180deg, #ffffff, #eef8f6); padding: 20px 0 70px; }
  .ak-cases-title { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 38px; line-height: 1.2; text-align: center; margin: 0 0 20px; }
  .ak-cases-text { max-width: 1000px; margin: 0 auto 46px; text-align: center; font-size: 16px; line-height: 1.75; }
  .ak-cases-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .ak-case { position: relative; background: #fff; border: 1px solid #eaeff1; border-radius: 14px; padding: 22px 22px 24px; box-shadow: 0 8px 24px rgba(20,40,50,.05); display: flex; flex-direction: column; overflow: visible; }
  .ak-case-quote { position: absolute; top: -14px; left: 16px; font-family: Georgia, serif; font-weight: 700; font-size: 56px; color: #17b3a2; line-height: 1; z-index: 2; }
  .ak-case-media { width: 100%; aspect-ratio: 1 / 0.6; background: repeating-linear-gradient(45deg, #e6ebef, #e6ebef 10px, #f1f4f6 10px, #f1f4f6 20px); border-radius: 10px; display: grid; place-items: center; color: #8a97a3; font: 600 11px 'Courier New', monospace; text-align: center; padding: 10px; margin: 6px 0 18px; }
  .ak-case-name { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 16px; color: #17323b; }
  .ak-case-industry { font-size: 14px; margin-bottom: 14px; }
  .ak-case-service { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .5px; color: #17b3a2; text-transform: uppercase; margin-bottom: 8px; }
  .ak-case-result { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 16px; color: #17323b; line-height: 1.35; flex: 1; }
  .ak-case-link { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px; margin-top: 20px; display: inline-block; }
  /* Added for the dynamic case studies - new rules only, nothing above changed.
     The image is absolutely positioned, so it ignores the box's padding and
     can't stretch its aspect ratio. Cards with no featured image are untouched
     and keep the striped placeholder exactly as before. */
  /* 1-3 cards: centre them instead of leaving a gap in the 4-column track.
     Capped so two cards stay card-shaped rather than stretching to half the page. */
  .ak-cases-grid-1 { grid-template-columns: minmax(0, 420px); justify-content: center; }
  .ak-cases-grid-2 { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; }
  .ak-cases-grid-3 { grid-template-columns: repeat(3, minmax(0, 380px)); justify-content: center; }
  .ak-case-media { position: relative; }
  .ak-case-media > a { position: absolute; inset: 0; display: block; }
  .ak-case-media img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
  .ak-case-name a { color: inherit; }
  .ak-case-name a:hover { color: #17b3a2; }

  /* SEO services */
  .ak-services { max-width: 1240px; margin: 0 auto; padding: 40px 24px 60px; }
  .ak-services-title { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 40px; line-height: 1.2; color: #17323b; text-align: center; margin: 0 0 20px; }
  .ak-services-text { max-width: 1000px; margin: 0 auto 56px; text-align: center; font-size: 16px; line-height: 1.75; }
  /* text-wrap:balance keeps a two-line heading split evenly instead of
     stranding one word on the second line. */
  .ak-services-sub { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 26px; color: #17323b; text-align: center; margin: 0 0 30px; text-wrap: balance; }
  .ak-services-sub-2 { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 26px; color: #17323b; text-align: center; margin: 64px 0 30px; text-wrap: balance; }
  .ak-services-sub-3 { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 26px; color: #17323b; text-align: center; margin: 60px 0 30px; text-wrap: balance; }
  .ak-core-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 1000px; margin: 0 auto 20px; }
  .ak-core-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1000px; margin: 0 auto; }
  .ak-service { background: #fff; border: 1px solid #e7edef; border-radius: 12px; padding: 22px; box-shadow: 0 6px 18px rgba(20,40,50,.05); transition: background .25s ease, color .25s ease, border-color .25s ease; }
  .ak-service:hover { background: #33BCAD; border-color: #33BCAD; box-shadow: 0 12px 26px rgba(51,188,173,.28); }
  .ak-service:hover, .ak-service:hover p, .ak-service:hover strong { color: #fff; }
  .ak-service-text { margin: 0; font-size: 15px; line-height: 1.6; }
  .ak-service-label { font-family: 'Poppins', sans-serif; color: #17323b; }

  /* Horizontal carousels (advanced + industry services) */
  .ak-scroll::-webkit-scrollbar { height: 8px; }
  .ak-scroll::-webkit-scrollbar-thumb { background: #cfd8dd; border-radius: 8px; }
  .ak-noscroll { scrollbar-width: none; -ms-overflow-style: none; }
  .ak-noscroll::-webkit-scrollbar { display: none; }
  .ak-carousel { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 60px) / 4); gap: 20px; overflow-x: auto; padding-bottom: 4px; }
  .ak-slide { border: 1px solid #eef2f4; border-radius: 14px; padding: 26px 22px; box-shadow: 0 6px 18px rgba(20,40,50,.04); }
  .ak-slide-num { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 56px; color: #eef1f3; line-height: .9; margin-bottom: 20px; }
  .ak-slide-title { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 16px; color: #17323b; line-height: 1.35; margin-bottom: 8px; }
  .ak-slide-text { margin: 0; font-size: 14px; line-height: 1.6; }

  /* SEO / AEO / GEO approach */
  .ak-approach { padding: 56px 0 0; }
  /* Sits directly in the section, so it carries the page gutter itself. */
  .ak-approach-title { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 40px; line-height: 1.2; color: #17323b; text-align: center; margin: 0 auto 40px; max-width: 1240px; padding: 0 24px; text-wrap: balance; }
  .ak-approach-band { background: #e9f6f3; padding: 56px 0; }
  .ak-approach-h3 { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 32px; color: #17323b; margin: 60px 0 16px; }
  .ak-approach-text { max-width: 720px; font-size: 16px; line-height: 1.7; margin: 0 0 32px; }
  .ak-card { position: relative; z-index: 0; padding: 34px 30px 30px; transition: color .25s ease; }
  .ak-shape { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
  .ak-shape path { fill: #fff; stroke: #17323b; stroke-width: 1.5; transition: fill .25s ease, stroke .25s ease; }
  .ak-card:hover .ak-shape path { fill: #33BCAD; stroke: #33BCAD; }
  .ak-card:hover, .ak-card:hover * { color: #fff; }
  /* The card outline (drawn in JS) notches out the top-right corner:
     66px wide, 60px deep. The card's own 30px gutter isn't enough, so the
     heading reserves the remaining 36px (+4px breathing room) to clear it. */
  .ak-card-title { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 20px; color: #17323b; margin: 0 0 16px; padding-right: 40px; text-wrap: balance; }
  .ak-card-list { list-style: none; font-size: 15px; line-height: 1.85; }

  /* Work process - intro band */
  .ak-wp-intro { background: #18b3a2; padding: 56px 0; }
  .ak-wp-intro-grid { max-width: 1240px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
  .ak-wp-intro-title { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 38px; line-height: 1.2; color: #fff; margin: 0; }
  .ak-wp-intro-text { font-size: 16px; line-height: 1.8; color: #eafaf7; margin: 0; }

  /* Work process - pinned desktop panel */
  .wp-pin { position: relative; height: 1000vh; }
  .ak-wp-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
  .ak-wp-panel { padding: 0 40px; display: flex; flex-direction: column; justify-content: center; }
  .ak-wp-panel-inner { max-width: 560px; margin-left: auto; width: 100%; padding-left: 24px; }
  .ak-wp-meta { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
  .ak-wp-count { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 15px; color: #18b3a2; letter-spacing: 1px; }
  .ak-wp-bar { flex: 1; height: 4px; background: #e6ecee; border-radius: 4px; overflow: hidden; }
  .ak-wp-bar-fill { height: 100%; background: #18b3a2; border-radius: 4px; width: 10%; transition: width .35s ease; }
  .ak-wp-title { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 26px; color: #17323b; margin: 0 0 14px; }
  .ak-wp-desc { font-size: 16px; line-height: 1.7; margin: 0; }
  .ak-wp-listtitle { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 2px; color: #17323b; text-transform: uppercase; margin: 22px 0 12px; }
  .ak-wp-list { list-style: none; font-size: 15px; line-height: 1.9; }
  .ak-wp-extra { font-size: 16px; line-height: 1.7; margin: 18px 0 0; }
  .ak-wp-btnwrap { margin-top: 26px; }
  .ak-wp-media { padding: 40px; display: grid; place-items: center; background: #7fb2f4; transition: background .4s ease; }
  .ak-wp-media-blue { background: #7fb2f4; }
  .ak-wp-media-yellow { background: #f7dc4d; }
  .ak-wp-media-teal { background: #18b3a2; }
  .ak-wp-media-grey { background: #e9edf0; }
  .ak-wp-shot { width: 100%; aspect-ratio: 1 / 0.62; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.12); }

  /* Work process - stacked mobile steps */
  .wp-mobile { display: none; }
  .ak-wpm-step { border-bottom: 1px solid #eef2f4; padding: 34px 22px; }
  .ak-wpm-title { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 22px; color: #17323b; margin: 0 0 12px; }
  .ak-wpm-desc { font-size: 15px; line-height: 1.7; margin: 0; }
  .ak-wpm-note { font-size: 15px; line-height: 1.7; margin: 16px 0 0; }
  .ak-wpm-listtitle { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 2px; color: #17323b; text-transform: uppercase; margin: 18px 0 10px; }
  .ak-wpm-list { list-style: none; font-size: 14px; line-height: 1.85; }
  .ak-wpm-media { padding: 24px; margin-top: 20px; border-radius: 14px; }
  .ak-wpm-media-blue { background: #7fb2f4; }
  .ak-wpm-media-yellow { background: #f7dc4d; }
  .ak-wpm-media-teal { background: #18b3a2; }
  .ak-wpm-media-grey { background: #e9edf0; }
  .ak-wpm-shot { width: 100%; aspect-ratio: 1 / 0.6; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 8px 22px rgba(0,0,0,.1); }

  /* Tools + technologies */
  .ak-tools { padding: 64px 0 30px; text-align: center; }
  .ak-tech { padding: 44px 0 30px; text-align: center; }
  .ak-eyebrow { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 6px; color: #17b3a2; text-transform: uppercase; margin-bottom: 10px; }
  .ak-section-title { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 34px; color: #17323b; margin: 0 0 22px; }
  .ak-section-text { font-size: 16px; line-height: 1.75; margin: 0 0 40px; }

  /* Testimonials */
  .ak-testi-section { padding: 56px 0 40px; }
  .ak-testi-text { max-width: 1000px; margin: 0 auto 40px; font-size: 16px; line-height: 1.75; }
  .ak-testi-row { display: flex; align-items: center; gap: 16px; }
  /* Carousel arrows. The chevron is an SVG rather than a text glyph so it stays
     crisp and centred - buttons don't inherit the page font, so "‹" was
     rendering as a thin Arial character. */
  .testi-arrow { flex: 0 0 auto; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid #d5dde1; background: #fff; color: #3a4a54; cursor: pointer; display: grid; place-items: center; transition: background .2s ease, border-color .2s ease, color .2s ease; }
  .testi-arrow svg { display: block; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .testi-arrow:hover { background: #17b3a2; border-color: #17b3a2; color: #fff; }
  .testi-arrow:active { transform: scale(.94); }
  .testi-arrow:focus-visible { outline: 2px solid #17b3a2; outline-offset: 2px; }
  .ak-testi { display: grid; grid-auto-flow: column; grid-auto-columns: calc(33.333% - 14px); gap: 20px; overflow-x: auto; padding-bottom: 8px; flex: 1; }
  /* One or two testimonials can't fill the 3-up track, so they don't scroll:
     centre them instead of leaving a stranded gap on the right. */
  .ak-testi-1 { grid-auto-columns: min(720px, 100%); justify-content: center; overflow-x: visible; }
  .ak-testi-2 { grid-auto-columns: calc(50% - 10px); overflow-x: visible; }
  .ak-testi-card { border: 1px solid #eaeff1; border-radius: 16px; padding: 26px; text-align: left; box-shadow: 0 8px 22px rgba(20,40,50,.05); }
  .ak-testi-person { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
  .ak-testi-photo { width: 74px; height: 74px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; }
  .ak-testi-name { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 17px; color: #17b3a2; }
  .ak-testi-role { font-size: 13px; line-height: 1.4; }
  .ak-testi-result { font-family: 'Poppins', sans-serif; font-weight: 700; font-style: italic; font-size: 18px; color: #17323b; line-height: 1.35; margin-bottom: 18px; }
  .ak-testi-quote { font-size: 14px; font-style: italic; line-height: 1.7; margin: 0; }

  /* Contact */
  .ak-contact { padding: 60px 0; }
  .contact-grid { max-width: 1240px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
  .contact-illus { aspect-ratio: 1 / 0.86; border-radius: 16px; display: grid; place-items: center; padding: 16px; }
  .ak-contact-title { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 38px; line-height: 1.2; margin: 0 0 30px; }
  .ak-contact-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 30px; }
  .ak-field { border: none; border-bottom: 1px solid #d5dde1; padding: 10px 2px; font-size: 15px; font-family: 'Mulish', sans-serif; outline: none; background: transparent; }
  .ak-field-full { grid-column: 1 / 3; resize: vertical; }

  /* ---- Contact Form 7 -------------------------------------------------
     CF7 renders its own markup, so the design is reapplied here. Each field
     sits in its own <p>, which becomes a grid cell; the message and the
     submit row span both columns. -------------------------------------- */
  .ak-contact-form .wpcf7-form { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 30px; align-items: end; }
  .ak-contact-form .wpcf7-form > p { margin: 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; }
  /* Full-width rows. :has() covers it automatically; add class="ak-full" to a
     paragraph in the CF7 form template if you need to force it. */
  .ak-contact-form .wpcf7-form > p.ak-full,
  .ak-contact-form .wpcf7-form > p:has(textarea),
  .ak-contact-form .wpcf7-form > p:has(input[type="submit"]),
  .ak-contact-form .wpcf7-form > .wpcf7-response-output { grid-column: 1 / 3; }
  .ak-contact-form .wpcf7-form-control-wrap { display: block; min-width: 0; }
  .ak-contact-form label { display: block; font-size: 15px; font-family: 'Mulish', sans-serif; min-width: 0; }
  .ak-contact-form input[type="text"],
  .ak-contact-form input[type="email"],
  .ak-contact-form input[type="tel"],
  .ak-contact-form input[type="url"],
  .ak-contact-form input[type="date"],
  .ak-contact-form input[type="number"],
  .ak-contact-form select,
  .ak-contact-form textarea {
    width: 100%; border: none; border-bottom: 1px solid #d5dde1; border-radius: 0;
    padding: 10px 2px; font-size: 15px; font-family: 'Mulish', sans-serif;
    outline: none; background: transparent; color: #52606d;
  }
  .ak-contact-form select { appearance: none; cursor: pointer; }
  .ak-contact-form textarea { resize: vertical; min-height: 84px; }
  .ak-contact-form input::placeholder,
  .ak-contact-form textarea::placeholder { color: #8a97a3; opacity: 1; }
  .ak-contact-form input:focus,
  .ak-contact-form select:focus,
  .ak-contact-form textarea:focus { border-bottom-color: #17b3a2; }
  .ak-contact-form input[type="submit"] {
    margin-top: 4px; background: #333; color: #fff; font-family: 'Poppins', sans-serif;
    font-weight: 700; font-size: 15px; padding: 14px 40px; border: none;
    border-radius: 40px; cursor: pointer; width: auto; justify-self: start; align-self: flex-start;
  }
  .ak-contact-form input[type="submit"]:hover { background: #17b3a2; }
  /* CF7 status + validation messaging */
  .ak-contact-form .wpcf7-spinner { margin: 0 0 0 12px; }
  .ak-contact-form .wpcf7-not-valid-tip { color: #d63638; font-size: 13px; margin-top: 6px; }
  .ak-contact-form .wpcf7-not-valid { border-bottom-color: #d63638; }
  .ak-contact-form .wpcf7-response-output { margin: 0; padding: 12px 16px; border-radius: 8px; font-size: 14px; border-width: 1px; }
  .ak-contact-form .screen-reader-response { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }

  /* Blog */
  .ak-blog { padding: 40px 0 60px; }
  /* Wrapper for a blog shortcode, when $akoi_blog_shortcode is set. */
  .ak-blog-feed { min-width: 0; }
  .ak-blog-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 34px; }
  .ak-blog-title { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 34px; color: #17323b; margin: 0; }
  .ak-post { border: 1px solid #eaeff1; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 22px rgba(20,40,50,.05); }
  .ak-post-media { position: relative; aspect-ratio: 1 / 0.6; background: repeating-linear-gradient(45deg, #e6ebef, #e6ebef 12px, #f1f4f6 12px, #f1f4f6 24px); display: grid; place-items: center; color: #8a97a3; font: 600 11px 'Courier New', monospace; overflow: hidden; }
  /* Featured image fills the card's media box; the stripes stay as the no-image
     fallback. The image is taken out of flow so it can't stretch the box's
     aspect ratio - the grid row would otherwise grow to the image's height. */
  .ak-post-media > a,
  .ak-post-media > img { position: absolute; inset: 0; display: block; }
  .ak-post-media img { width: 100%; height: 100%; object-fit: cover; }
  .ak-post-media-label { padding: 0 14px; text-align: center; }
  .ak-post-title a { color: inherit; }
  .ak-post-title a:hover { color: #17b3a2; }
  .ak-post-body { padding: 22px; }
  .ak-post-tag { display: inline-block; background: #f1f4f6; color: #3a4a54; font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 20px; margin-bottom: 16px; }
  .ak-post-title { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 22px; color: #17323b; line-height: 1.3; margin: 0 0 22px; }
  .ak-post-meta { display: flex; justify-content: space-between; align-items: center; }
  .ak-post-author { color: #17b3a2; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px; }
  .ak-post-date { font-size: 14px; }

  /* Long-form SEO copy */
  .ak-seo-copy { max-width: 1000px; margin: 0 auto; padding: 20px 24px 60px; color: #9aa6ad; font-size: 13px; line-height: 1.7; }
  .ak-seo-heading { font-weight: 700; color: #7a8892; }
  .ak-seo-list { list-style: none; }
  /* Read More / Read Less: the body clamps to a fixed height with a soft fade
     until the button toggles the .is-clamped class off. */
  .ak-seo-body.is-clamped { max-height: 300px; overflow: hidden; position: relative; }
  .ak-seo-body.is-clamped::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 130px; background: linear-gradient(rgba(255,255,255,0), #fff); pointer-events: none; }
  .ak-seo-more { text-align: center; margin-top: 18px; }
  .ak-seo-toggle { display: inline-flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; padding: 6px 4px; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 14px; color: #17b3a2; }
  .ak-seo-toggle:hover { color: #0f8a7d; }
  .ak-seo-toggle::after { content: "\25BE"; font-size: 11px; line-height: 1; transition: transform .2s ease; }
  .ak-seo-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }

  /* Closing CTA banner */
  .ak-cta { background: #18b3a2; padding: 60px 24px; text-align: center; position: relative; overflow: hidden; }
  .ak-cta-overlay { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
  .ak-cta-inner { max-width: 900px; margin: 0 auto; position: relative; z-index: 1; }
  .ak-cta-title { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 34px; color: #fff; margin: 0 0 16px; line-height: 1.25; }
  .ak-cta-text { font-size: 16px; line-height: 1.7; color: #eafaf7; margin: 0 0 30px; }

  /* FAQ */
  .ak-faq { padding: 64px 0; }
  .ak-faq-title { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 38px; line-height: 1.25; color: #17323b; text-align: center; margin: 0 0 46px; }
  /* Each question is its own outlined card, stacked with a gap. */
  .ak-faq-item { background: #fff; border: 1px solid #e4e9ec; border-radius: 14px; padding: 22px 26px; margin-bottom: 14px; transition: border-color .2s ease, box-shadow .2s ease; }
  .ak-faq-item:last-child { margin-bottom: 0; }
  .ak-faq-item:hover { border-color: #cfe0dd; }
  .ak-faq-item.is-open { box-shadow: 0 6px 18px rgba(20,40,50,.05); }
  .ak-faq-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; cursor: pointer; }
  .ak-faq-q { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 16px; color: #17b3a2; line-height: 1.4; }
  .ak-faq-sign { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 20px; color: #17323b; flex: 0 0 auto; line-height: 1; }
  .ak-faq-body { display: none; }
  .ak-faq-item.is-open .ak-faq-body { display: block; }
  .ak-faq-answer { font-size: 14px; line-height: 1.75; margin: 12px 0 0; max-width: 1100px; }

  /* Responsive */
  @media (max-width: 1024px) {
    .ak-why-grid { grid-template-columns: repeat(2, 1fr); }
    .ak-cases-grid { grid-template-columns: repeat(2, 1fr); }
    /* 3-up here leaves the notched cards too narrow for their headings. */
    .ak-grid-3,
    .ak-grid-4 { grid-template-columns: repeat(2, 1fr); }
    header nav { gap: 20px; flex-wrap: wrap; justify-content: flex-end; }
    .ak-carousel { grid-auto-columns: calc((100% - 40px) / 2.2); }
  }
  @media (max-width: 768px) {
    .ak-why-grid,
    .ak-cases-grid,
    .ak-grid-2,
    .ak-grid-3,
    .ak-grid-4,
    .ak-core-row-3,
    .ak-core-row,
    .ak-hero,
    .ak-wp-intro-grid,
    .contact-grid,
    .ak-contact-fields { grid-template-columns: 1fr; }
    .ak-contact-fields > *,
    .ak-contact-form .wpcf7-form > p { grid-column: auto; }
    .ak-contact-form .wpcf7-form { grid-template-columns: 1fr; }
    .ak-carousel { grid-auto-columns: 80%; scroll-snap-type: x mandatory; }
    .ak-carousel > div { scroll-snap-align: center; }
    .ak-testi { grid-auto-columns: 100%; scroll-snap-type: x mandatory; }
    /* one card per screen; the centred desktop variants must scroll again here */
    .ak-testi-1,
    .ak-testi-2 { grid-auto-columns: 100%; justify-content: start; overflow-x: auto; }
    .ak-testi > div { scroll-snap-align: start; }
    .ak-hero-title { font-size: 30px; line-height: 1.2; }
    .ak-why-title,
    .ak-services-title,
    .ak-approach-title,
    .ak-faq-title { font-size: 25px; line-height: 1.25; }
    .ak-contact-title { font-size: 26px; }
    .ak-cases-title,
    .ak-wp-intro-title,
    .ak-section-title,
    .ak-blog-title,
    .ak-track-title,
    .ak-cta-title { font-size: 24px; line-height: 1.25; }
    .ak-track-box { width: 250px; min-height: 140px; padding: 22px; font-size: 14px; }
    header nav { gap: 12px; flex-wrap: wrap; justify-content: center; font-size: 13px; }
    .wp-pin { display: none; }
    .wp-mobile { display: block; }
    .contact-illus { aspect-ratio: 1 / 0.66; }
    .contact-grid { gap: 30px; }
    .testi-arrow { display: none; }
  }