@font-face {
  font-family: FCMinimal;
  src: url('../assets/fonts/fc-minimal-semibold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


/* =========================
   SEO HERO — DESKTOP
   ========================= */

.seo-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #0758d7;
}


.seo-hero-media {
  display: block;
  width: 100%;
}


.seo-hero-image {
  display: block;
  width: 100%;
  height: auto;
}


.seo-hero-interface {
  position: absolute;
  inset: 0;
  z-index: 2;
}


/* =========================
   HERO TITLE
   ========================= */

.seo-hero-title {
  position: absolute;

  top: 27.1%;
  left: 38%;

  margin: 0;

  color: #fff;

  font-family: FCMinimal, IBMThai, sans-serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;

  white-space: nowrap;
}


.seo-hero-title-regular {
  font-weight: 400;
}


.seo-hero-title-accent {
  margin-left: 7px;

  color: #ef174d;

  font-weight: 600;
}


/* =========================
   SEARCH BAR
   ========================= */
.seo-hero-search {
  position: absolute;

  top: 34.45%;
  left: 34.45%;

  width: 36%;
  height: 9.15%;

  margin: 0;

  border: 2px solid rgba(255, 255, 255, 0.95);
  border-radius: 999px;

  background: transparent;
}

.seo-hero-input {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;
  box-sizing: border-box;

  border: 0;
  outline: 0;

  padding: 0 8%;

  background: transparent;

  color: #fff;

  font-family: FCMinimal, IBMThai, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;

  text-align: center;
}

.seo-hero-input::placeholder {
  color: rgba(255, 255, 255, 0.86);
  opacity: 1;
}

.seo-hero-input:focus {
  outline: none;
}

.seo-hero-search:focus-within {
  border-color: #fff;
}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 800px) {

  .seo-hero-title {
    top: 36.4%;
    left: 50%;

    width: 90%;

    transform: translateX(-50%);

    font-size: 24px;
    line-height: 1;

    text-align: center;
    white-space: nowrap;
  }


  .seo-hero-title-accent {
    margin-left: 4px;
  }


  .seo-hero-search {
    top: 41.2%;
    left: 18%;

    width: 64%;
    height: 5.25%;

    border-width: 1.5px;
  }


.seo-hero-input {
  padding: 0 7%;

  font-size: 17px;
  text-align: center;
}

}
/* =========================
   SEO — SECTION 01
   ========================= */

.seo-intro {
  width: 100%;
  padding: 92px 40px 110px;
  background: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
}

.seo-intro-grid {
  width: 100%;
  max-width: 1415px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 55px;
}


/* =========================
   SECTION INDEX
   ========================= */

.seo-intro-index {
  display: flex;
  align-items: flex-start;
  gap: 12px;

  padding-top: 9px;

  font-family: IBMThai, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;

  white-space: nowrap;
}


/* =========================
   CONTENT
   ========================= */

.seo-intro-content {
  width: 100%;
  max-width: 990px;
}

.seo-intro-title {
  margin: 0;

  font-family: FCMinimal, IBMThai, sans-serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.08;
}

.seo-intro-detail {
  margin: 20px 0 38px;

  font-family: FCMinimal, IBMThai, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.15;
}

.seo-intro-body {
  width: 100%;
  max-width: 900px;

  font-family: IBMThai, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
}

.seo-intro-body p {
  margin: 0 0 22px;
}

.seo-intro-body p:last-child {
  margin-bottom: 0;
}

.seo-intro-body strong {
  font-weight: 600;
}


/* =========================
   GOAL
   ========================= */

.seo-intro-goal {
  width: 100%;
  max-width: 900px;

  margin: 40px 0 0;
  padding: 27px 0 0;

  border-top: 1px solid var(--ink);

  font-family: IBMThai, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.65;
}


/* =========================
   CTA
   ========================= */

.seo-intro-cta {
  width: 100%;
  max-width: 900px;
  margin-top: 43px;
}

.seo-intro-capture {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;

  width: 100%;
  margin: 0;
}

.seo-intro-capture input {
  width: 100%;
  min-width: 0;
  height: 62px;

  padding: 0 20px;

  border: 1px solid var(--ink);
  border-right: 0;
  border-radius: 0;

  outline: 0;

  background: #fff;
  color: var(--ink);

  font-family: IBMThai, sans-serif;
  font-size: 15px;
  font-weight: 400;
}

.seo-intro-capture input::placeholder {
  color: #6d6961;
  opacity: 1;
}


/* =========================
   PRIMARY CTA
   ========================= */

.seo-intro-submit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px;
  align-items: stretch;

  width: 100%;
  height: 62px;

  margin: 0;
  padding: 0;

  border: 1px solid var(--ink);
  border-radius: 0;

  background: var(--yellow);
  color: var(--ink);

  font-family: IBMThai, sans-serif;
  font-size: 17px;
  font-weight: 400;

  cursor: pointer;

  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
}

.seo-intro-submit-copy {
  display: flex;
  align-items: center;

  padding: 0 18px;

  text-align: left;
}

.seo-intro-submit-arrow {
  display: grid;
  place-items: center;

  border-left: 1px solid var(--ink);

  font-family: FCMinimal, sans-serif;
  font-size: 25px;
  line-height: 1;
}

.seo-intro-submit:hover,
.seo-intro-submit:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 3px 3px 0 var(--ink);
}


/* =========================
   SECONDARY CONTACT
   ========================= */

.seo-intro-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;

  width: 100%;
}

.seo-intro-contact a {
  min-height: 52px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--ink);
  border-top: 0;

  color: var(--ink);
  background: transparent;

  text-decoration: none;

  font-family: FCMinimal, IBMThai, sans-serif;
  font-size: 17px;
  font-weight: 400;

  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
}

.seo-intro-contact a + a {
  border-left: 0;
}

.seo-intro-contact a:hover,
.seo-intro-contact a:focus-visible {
  position: relative;
  z-index: 2;

  transform: translate(-2px, -2px);
  box-shadow: 3px 3px 0 var(--ink);
}


/* =========================
   SEO — SECTION 01 MOBILE
   ========================= */

@media (max-width: 800px) {

  .seo-intro {
    padding: 62px 22px 72px;
  }

  .seo-intro-grid {
    display: block;
  }

  .seo-intro-index {
    padding: 0;
    margin: 0 0 28px;

    font-size: 14px;
  }

  .seo-intro-content {
    max-width: none;
  }

  .seo-intro-title {
    font-size: 25px;
    line-height: 1.08;
  }

  .seo-intro-detail {
    margin: 16px 0 31px;

    font-size: 20px;
    line-height: 1.15;
  }

  .seo-intro-body {
    max-width: none;

    font-size: 15px;
    line-height: 1.65;
  }

  .seo-intro-body p {
    margin-bottom: 20px;
  }

  .seo-intro-body p:last-child {
    margin-bottom: 0;
  }

  .seo-intro-goal {
    max-width: none;

    margin-top: 32px;
    padding-top: 23px;

    font-size: 15px;
    line-height: 1.6;
  }

  .seo-intro-cta {
    max-width: none;
    margin-top: 35px;
  }

  .seo-intro-capture {
    grid-template-columns: 1fr;
  }

  .seo-intro-capture input {
    height: 52px;

    border-right: 1px solid var(--ink);
    border-bottom: 0;

    padding: 0 15px;

    font-size: 15px;
  }

  .seo-intro-submit {
    height: 56px;

    grid-template-columns: minmax(0, 1fr) 48px;

    font-size: 16px;
  }

  .seo-intro-submit-copy {
    padding: 0 15px;
  }

  .seo-intro-submit-arrow {
    font-size: 23px;
  }

  .seo-intro-contact a {
    min-height: 49px;
    font-size: 17px;
  }

}
/* =========================================================
SEO — SECTION 02 SEARCH STRATEGY
========================================================= */


.seo-strategy {

  width: 100%;

  padding: 110px 40px 120px;

  background: var(--paper);

  color: var(--ink);

}



.seo-strategy-grid {

  width: 100%;

  max-width: 1420px;

  margin: 0 auto;


  display: grid;

  grid-template-columns: 520px minmax(420px, 1fr);

  gap: 100px;

}



/* =========================================================
LEFT CONTENT
========================================================= */


.seo-strategy-content {

  width: 100%;

}



.seo-strategy-index {

  display: flex;

  align-items: center;

  gap: 12px;


  margin-bottom: 28px;


  font-family: IBMThai, sans-serif;

  font-size: 14px;

  font-weight: 600;

}



.seo-strategy-title {

  margin: 0;


  font-family: FCMinimal, IBMThai, sans-serif;

  font-size: 34px;

  font-weight: 400;

  line-height: 1.1;

}



.seo-strategy-intro {

  margin: 28px 0 18px;


  font-family: IBMThai, sans-serif;

  font-size: 16px;

  line-height: 1.7;

}



.seo-strategy-description {

  margin: 0;


  max-width: 480px;


  font-family: IBMThai, sans-serif;

  font-size: 16px;

  line-height: 1.7;

}



/* =========================================================
IMAGE
========================================================= */


.seo-strategy-image {

  position: relative;


  width: 100%;


  margin-top: 45px;

}



.seo-strategy-image img {

  display: block;


  width: 100%;

  max-width: 560px;

}



/* IMAGE TEXT */


.seo-strategy-image-overlay {

  position: absolute;


  top: 10%;

  left: 50%;


  transform: translateX(-50%);


  width: 90%;

  max-width: 420px;


  text-align: center;


  color: #fff;

}



.seo-strategy-image-overlay h3 {

  margin: 0 0 10px;


  font-family: FCMinimal, IBMThai, sans-serif;


  font-size: 34px;

  font-weight: 500;


  line-height: 1.1;

}



.seo-strategy-image-overlay p {

  margin: 0 0 24px;


  font-family: IBMThai, sans-serif;


  font-size: 17px;


  line-height: 1.5;

}



/* CTA */


.seo-strategy-image-cta {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  height: 48px;

  padding: 0 28px;

  border: 1px solid var(--ink);

  background: var(--yellow);

  color: var(--ink);

  font-family: IBMThai, sans-serif;

  font-size: 16px;

  cursor: pointer;

  transition:
    transform 160ms ease,
    box-shadow 160ms ease;

}


/* HOVER */

.seo-strategy-image-cta:hover {

  transform: translate(-3px, -3px);

  box-shadow: 5px 5px 0 var(--ink);

}



/* =========================================================
STRATEGY LIST
========================================================= */


.seo-strategy-list {


  display: grid;


  grid-template-columns: repeat(2, 1fr);


  align-content: start;


  border-top: 1px solid var(--ink);

}



.seo-strategy-item {

  min-height: 190px;

  padding: 32px 30px;

  border-right: 1px solid rgba(17,17,17,.25);

  border-bottom: 1px solid rgba(17,17,17,.25);

  background: transparent;

  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;

}


@media (min-width:801px) {

  .seo-strategy-item:hover {

    transform: translate(-3px,-3px);

    background: #fff;

    box-shadow: 5px 5px 0 var(--ink);

  }

}



.seo-strategy-item:nth-child(even) {


  border-right: 0;

}



.seo-strategy-item h3 {

  margin: 0 0 15px;

  font-family: FCMinimal, IBMThai, sans-serif;

  font-size: 22px;

  font-weight: 400;

  transition: color 160ms ease;

}


@media (min-width:801px) {

  .seo-strategy-item:hover h3 {

    color: #d71920;

  }

}



.seo-strategy-item p {


  margin: 0;


  font-family: IBMThai, sans-serif;


  font-size: 15px;


  line-height: 1.65;

}
.seo-strategy-item p {

margin: 0;

font-family: IBMThai, sans-serif;

font-size: 15px;

line-height: 1.65;

}


/* SEO STRATEGY ITEM TITLE — DESKTOP */

.seo-strategy-item summary {

margin: 0 0 15px;

font-family: FCMinimal, IBMThai, sans-serif;

font-size: 22px;

font-weight: 400;

line-height: 1.2;

}
/* =========================================================
SEO SECTION 02
MOBILE ONLY
========================================================= */

@media (max-width:800px){

.seo-strategy{
padding:64px 22px 72px;
}

.seo-strategy-grid{
display:block;
}

.seo-strategy-index{
margin-bottom:22px;
}

.seo-strategy-title{
font-size:25px;
}

.seo-strategy-intro{
margin-top:20px;
font-size:15px;
}

.seo-strategy-description{
font-size:15px;
}


/* IMAGE */

.seo-strategy-image{
margin-top:35px;
}


/* STRATEGY LIST */

.seo-strategy-list{

display:block;

margin-top:42px;

border-top:1px solid rgba(17,17,17,.72);

}


/* ITEM */

.seo-strategy-item{

min-height:0;

padding:18px 0;

border-right:0;

border-bottom:1px solid rgba(17,17,17,.72);

background;

}


/* TITLE */

.seo-strategy-item summary{

margin:0 0 10px;

font-size:18px;

line-height:1.15;

}


/* CONTENT */

.seo-strategy-item p{

display:block;

margin:0;

font-size:15px;

line-height:1.65;

}


}
/* =========================================================
SEO FAQ FIX
Accordion + Mobile spacing
========================================================= */


.faq-item summary {
    list-style: none;
    cursor: pointer;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}


.faq-answer {
    display: none;
}


.faq-item[open] .faq-answer {
    display: block;
}


.faq-trigger b {
    transition: transform .2s ease;
}


.faq-item[open] .faq-trigger b {
    transform: rotate(45deg);
}



/* =========================
MOBILE FAQ
========================= */

@media(max-width:800px){


.faq{
    padding:70px 22px 80px;
}


.faq .section-grid{
    display:block;
}


.faq-intro h2{

    font-size:32px;
    line-height:1.05;
    margin:20px 0 18px;

}


.faq-intro>p{

    max-width:280px;

    font-size:15px;
    line-height:1.55;

}



.faq-list{

    margin-top:45px;

}



.faq-trigger{

    grid-template-columns:42px minmax(0,1fr) 28px;

    min-height:78px;

    gap:0;

}



.faq-trigger small{

    font-size:13px;

    color:#777;

}



.faq-trigger span{

    font-size:18px;

    line-height:1.35;

    padding-right:12px;

}



.faq-trigger b{

    font-size:26px;

}



.faq-answer{

    padding:

    0 15px 25px 42px;

}



.faq-answer p{

    font-size:15px;

    line-height:1.65;

}



}
@media (min-width:801px){

.faq-intro h2{
    font-size:30px;
    line-height:1.08;
}

.faq-intro > p{
    font-size:14px;
    line-height:1.55;
}

}
/* =========================================================
   SEO PAGE — SECTION 03 PROCESS
   ========================================================= */

.seo-process {
  background:#0d0d0d;
  color:#f5f4ef;
  padding-top:98px;
  padding-bottom:104px;
}


.seo-process .section-number {
  color:#ffc829;
}


.seo-process .pov-content h2 {

  max-width:920px;

  font:400 clamp(28px,2vw,36px)/1.08
  FCMinimal,
  IBMThai,
  sans-serif;

  margin-bottom:62px;

}



.seo-process .pov-console {

  width:1044px;
  max-width:100%;

  min-height:470px;

  display:grid;

  grid-template-columns:
  310px
  minmax(0,1fr);

  border-top:1px solid #d0d0d0;
  border-bottom:1px solid #d0d0d0;

}



.seo-process .pov-nav {

  border-right:1px solid #d0d0d0;

}



.seo-process .pov-tab {

  min-height:72px;

  padding:0 20px;

  border:0;

  border-bottom:1px solid #777;

  background:transparent;

  color:#f5f4ef;

  display:flex;

  align-items:center;

  gap:26px;

  font:

  400 17px/1.15
  FCMinimal,
  IBMThai,
  sans-serif;

}



.seo-process .pov-tab small {

  color:#ffc829;

  font:

  600 13px
  IBMThai,
  sans-serif;

}



.seo-process .pov-tab.is-active {

  background:#ffc829;

  color:#111;

}



.seo-process .pov-tab.is-active small {

  color:#111;

}



.seo-process .pov-reading {

  padding:

  46px 58px 78px;

}



.seo-process .pov-index {

  color:#ffc829;

  font:

  600 14px
  IBMThai,
  sans-serif;

  margin-bottom:28px;

}



.seo-process .pov-reading h3 {

  font:

  400 30px/1.08
  FCMinimal,
  IBMThai,
  sans-serif;

  max-width:560px;

  margin-bottom:22px;

}



.seo-process .pov-copy {

  max-width:620px;

  font-size:16px;

  line-height:1.58;

}



/* =========================
   MOBILE
   ========================= */


@media(max-width:800px){


.seo-process {

padding:70px 22px 74px;

}
.seo-process .pov-content {
padding:0 0;
}



.seo-process .pov-content h2 {

  font-size:24px;

  line-height:1.08;

  margin-bottom:36px;

}



.seo-process .pov-console {

  display:block;

  width:100%;

  min-height:0;

}



.seo-process .pov-nav {

  border-right:0;

}



.seo-process .pov-tab {

  min-height:65px;

  font-size:16px;

}



.seo-process .pov-reading {

  min-height:430px;

  padding:

  32px 22px 75px;

}



.seo-process .pov-reading h3 {

  font-size:24px;

}



.seo-process .pov-copy {

  font-size:15px;

  line-height:1.55;

}


}