/* SEO service page: shared approved development components, scoped proportions. */
.seo-page .dev-hero::after{background:linear-gradient(180deg,#08090a35,transparent 27%),linear-gradient(90deg,#08090a55,#08090a18 42%,transparent 62%)}
.seo-page .dev-hero-inner{width:85%;max-width:1536px}
.seo-page .dev-hero-copy{width:47%;max-width:660px;transform:none}
.seo-page .dev-hero h1{font-size:clamp(36px,3.5vw,57px);line-height:1.08;letter-spacing:-.035em}
.seo-page .dev-hero .eyebrow{font-size:13px;margin-bottom:18px;gap:16px}
.seo-page .dev-hero .eyebrow::before{width:42px}
.seo-page .dev-hero-copy>p:not(.eyebrow){font-size:clamp(13px,1.3vw,18px);line-height:1.55;max-width:43ch;margin:17px 0 22px}
.seo-page .dev-hero .btn.gold,.seo-page .dev-closing .btn.gold{min-height:53px;padding:16px 25px;font-size:15px;gap:24px}
.seo-page .dev-hero-photo{transform:none}
.seo-page .dev-benefits{padding:24px 0}
.seo-page .dev-benefit-grid{width:87%}
.seo-page .dev-benefit-grid article{padding:0 23px;gap:20px}
.seo-page .dev-benefit-grid article:first-child{padding-left:0}
.seo-page .dev-benefit-grid article:last-child{padding-right:0}
.seo-page .dev-benefit-grid h2{font-size:14px;line-height:1.3;margin-bottom:7px}
.seo-page .dev-benefit-grid p{font-size:12px;line-height:1.5;max-width:25ch}
.seo-page .dev-benefit-grid svg{width:36px;height:36px}
.seo-page .seo-education{grid-template-columns:49% 51%;min-height:250px}
.seo-page .dev-requirements-media{min-height:250px}
.seo-page .seo-search-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%;clip-path:url(#seo-photo-curve)}
.seo-page .dev-requirements-media::after{display:none}
.seo-page .dev-requirements-copy{position:relative;padding:24px 10% 24px 5%;margin-left:-4%;}
.seo-page .dev-requirements-intro{padding:0;border:0}
.seo-page .dev-requirements-intro h2{font-size:30px;line-height:1.2;margin-bottom:7px}
.seo-page .dev-requirements-intro p{font-size:14px;line-height:1.4;margin:0}
.seo-page .dev-requirements ul{display:grid;grid-template-columns:1fr;gap:11px;margin:17px 0 0}
.seo-page .dev-requirements li{font-size:13px;line-height:1.45;gap:14px}
.seo-page .dev-requirements li span{width:19px;height:17px;margin-top:1px;flex-shrink:0}
.seo-page .dev-process{padding:21px 0 27px}
.seo-page .dev-process-grid #process-title{font-size:28px;line-height:1.2;letter-spacing:-.025em;text-transform:none;color:#eeece7;gap:20px}
.seo-page .dev-process-grid>div>p{font-size:13px;line-height:1.5;margin-top:7px}
.seo-page .dev-process ol{margin-top:20px}
.seo-page .dev-number{width:40px;height:40px;font-size:19px;margin-bottom:10px}
.seo-page .dev-process h3{font-size:16px}
.seo-page .dev-process li p{font-size:13px;line-height:1.45;max-width:25ch;padding:0 12px}
.seo-page .dev-closing{padding:25px 0 32px;min-height:176px}
.seo-page .dev-closing h2{font-size:clamp(24px,2.5vw,34px);font-weight:500;margin-bottom:20px}
@media(min-width:701px){
 .seo-page .dev-hero,.seo-page .dev-hero-inner{min-height:clamp(410px,34vw,530px)}
 .seo-page .dev-hero-inner{padding-top:calc(var(--dev-header-height,98px) + 8px);padding-bottom:30px;align-items:center}
 .seo-page .dev-hero-media{inset:0;width:100%;height:100%;transform:none}
 .seo-page .dev-hero-photo{object-position:right center}
}
@media(min-width:701px) and (max-width:1000px){
 .seo-page .dev-hero h1{font-size:34px}
 .seo-page .dev-hero-copy{width:49%}
 .seo-page .dev-hero-copy>p:not(.eyebrow){font-size:13px}
 .seo-page .dev-hero .btn.gold{font-size:13px;padding:14px 20px;gap:18px}
 .seo-page .dev-benefit-grid article{gap:12px;padding:0 12px}
 .seo-page .dev-benefit-grid svg{width:28px;height:28px}
 .seo-page .dev-benefit-grid h2{font-size:12px}
 .seo-page .dev-benefit-grid p{font-size:11px}
 .seo-page .dev-requirements-intro h2{font-size:27px}
 .seo-page .dev-requirements-intro p,.seo-page .dev-requirements li{font-size:12px}
 .seo-page .dev-process li p{font-size:12px}
}
@media(max-width:700px){
 .seo-page .dev-hero-copy{width:100%;max-width:none}
 .seo-page .dev-hero h1{font-size:clamp(31px,8.8vw,42px);line-height:1.1}
 .seo-page .dev-hero .eyebrow{font-size:11px}
 .seo-page .dev-hero-inner{padding-top:calc(var(--dev-header-height,78px) + 26px);padding-bottom:26px}
 .seo-page .dev-hero-copy>p:not(.eyebrow){font-size:13px;margin:17px 0 22px}
 .seo-page .dev-hero .btn.gold,.seo-page .dev-closing .btn.gold{font-size:13px;min-height:50px;padding:14px 20px;gap:18px}
 .seo-page .dev-hero-media{aspect-ratio:1.7}
 .seo-page .dev-hero-photo{width:140%;max-width:none;height:100%;left:auto;right:0;object-position:right center;transform:none}
 .seo-page .dev-benefit-grid{gap:24px 12px}
 .seo-page .dev-benefit-grid article{padding:0;gap:11px}
 .seo-page .dev-benefit-grid h2{font-size:12px}
 .seo-page .dev-benefit-grid p{font-size:11px}
 .seo-page .dev-benefit-grid svg{width:27px;height:27px}
 .seo-page .seo-education{display:flex;flex-direction:column;min-height:0}
 .seo-page .dev-requirements-media{height:220px;min-height:0;width:100%}
 .seo-page .dev-requirements-copy{margin:0;padding:23px 6.5% 28px}
 .seo-page .dev-requirements-intro h2{font-size:28px}
 .seo-page .dev-requirements-intro p{font-size:13px;line-height:1.6}
 .seo-page .dev-requirements li{font-size:12px}
 .seo-page .dev-process-grid #process-title{font-size:26px;gap:12px}
 .seo-page .dev-process-grid #process-title::before,.seo-page .dev-process-grid #process-title::after{width:25px}
 .seo-page .dev-process-grid>div>p{font-size:12px;max-width:33ch}
 .seo-page .dev-process ol{gap:24px 0}
 .seo-page .dev-process li p{font-size:12px}
 .seo-page .dev-process h3{font-size:15px}
 .seo-page .dev-closing{padding:27px 0 31px;min-height:190px}
 .seo-page .dev-closing h2{font-size:25px;max-width:25ch}
}
/* Align the diagonal education copy to the reference's inset and compact timeline. */
@media(min-width:1001px){
 .seo-page .dev-requirements-copy{margin-left:0;padding-left:10%;padding-right:9%}
 .seo-page .dev-requirements-copy::before{content:"";position:absolute;left:4%;top:44px;bottom:39px;width:1px;background:#c5a45166}
 .seo-page .dev-process li p{font-size:12.5px;max-width:30ch;padding:0 10px}
}

/* Keep the text in the left half of the artwork and the graph in the right. */
.seo-page .seo-hero {
  display: flex;
  flex-direction: column;
  min-height: 82.07454937svh;
  background: linear-gradient(#14121022, #14121022),
    #141210 url("/assets/seo-mountain-hero-extension.jpg") center / cover no-repeat;
}
.seo-page .seo-hero .dev-hero-inner { flex: 1; }
@media (min-width: 701px) {
  .seo-page .seo-hero .dev-hero-inner {
    min-height: 82.07454937svh;
    width: 88%;
  }
  .seo-page .seo-hero .dev-hero-copy {
    width: 45%;
    max-width: 700px;
  }
  .seo-page .seo-hero h1 {
    font-size: clamp(28px, 3.65vw, 65px);
  }
  .seo-page .seo-hero .dev-hero-photo {
    object-fit: contain;
    object-position: center;
  }
  .seo-page .seo-hero::after {
    background: linear-gradient(90deg, #100d0b52, transparent 51%);
  }
}
@media (min-width: 701px) and (max-aspect-ratio: 9/5) {
  .seo-page .seo-hero .dev-hero-media {
    inset: 50% 0 auto;
    height: auto;
    aspect-ratio: 1754 / 897;
    transform: translateY(-50%);
    mask-image: linear-gradient(transparent, black 12%, black 88%, transparent);
  }
}
@media (max-width: 700px) {
  .seo-page .seo-hero {
    min-height: 0;
    background: #181410;
  }
  .seo-page .seo-hero .dev-hero-inner {
    order: 0;
    min-height: 0;
    padding-top: calc(var(--dev-header-height, 82px) + 38px);
    padding-bottom: 39px;
  }
  .seo-page .seo-hero .dev-hero-media {
    order: 1;
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1.45;
  }
  .seo-page .seo-hero .dev-hero-photo {
    width: 100%;
    object-position: right center;
  }
  .seo-page .seo-hero::after { display: none; }
}

@media (min-width: 701px) {
  .seo-first-screen {
    display: grid;
    grid-template-rows: 1fr auto;
    min-height: 100svh;
  }
}

/* Use one continuous scene on wide screens. */
@media (min-width: 701px) and (min-aspect-ratio: 9/5) {
  .seo-page .seo-hero {
    background: #141210;
  }
  .seo-page .seo-hero .dev-hero-photo {
    object-fit: fill;
  }
}