:root {
    --ink      : #0a0a0a;
    --paper    : #ffffff;
    --gray-900 : #1c1c1c;
    --gray-600 : #5b5b5b;
    --gray-400 : #9a9a9a;
    --gray-200 : #dcdcdc;
    --gray-100 : #efefef;
    --gray-050 : #f7f7f7;
    --cta      : #3a3a3a;
    --cta-hover: #0a0a0a;
    --line     : #d6d6d6;
    --serif    : "Zen Kaku Gothic New", sans-serif;
    --sans     : "Noto Sans JP", sans-serif;
    --latin    : "Outfit", sans-serif;
    --maxw     : 1180px;
}

* {
    margin    : 0;
    padding   : 0;
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    font-family           : var(--sans);
    color                 : var(--ink);
    background            : var(--paper);
    line-height           : 1.85;
    font-weight           : 400;
    -webkit-font-smoothing: antialiased;
    overflow-x            : hidden;
}

::selection {
    background: var(--ink);
    color     : var(--paper)
}

a {
    color          : inherit;
    text-decoration: none
}

.wrap {
    max-width: var(--maxw);
    margin   : 0 auto;
    padding  : 0 32px
}

.reveal {
    opacity   : 0;
    transform : translateY(26px);
    transition: opacity 1s cubic-bezier(.16, 1, .3, 1), transform 1s cubic-bezier(.16, 1, .3, 1)
}

.reveal.in {
    opacity  : 1;
    transform: none
}

/* ---------- HEADER ---------- */
header {
    position       : fixed;
    top            : 0;
    left           : 0;
    width          : 100%;
    z-index        : 100;
    background     : rgba(255, 255, 255, .82);
    backdrop-filter: blur(14px);
    border-bottom  : 1px solid transparent;
    transition     : border-color .4s, background .4s;
}

header.scrolled {
    border-color: var(--line)
}

.nav {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    height         : 78px
}

.logo {
    font-family   : var(--serif);
    font-weight   : 900;
    font-size     : 20px;
    letter-spacing: .12em
}

.logo span {
    display       : block;
    font-family   : var(--latin);
    font-size     : 9px;
    letter-spacing: .42em;
    color         : var(--gray-400);
    font-weight   : 800;
    margin-top    : 2px
}

.nav-links {
    display       : flex;
    gap           : 38px;
    align-items   : center;
    font-size     : 13px;
    letter-spacing: .06em;
    color         : var(--gray-600)
}

.nav-links a {
    position  : relative;
    padding   : 6px 0;
    transition: color .3s
}

.nav-links a::after {
    content   : "";
    position  : absolute;
    left      : 0;
    bottom    : 0;
    width     : 0;
    height    : 1px;
    background: var(--ink);
    transition: width .35s ease
}

.nav-links a:hover {
    color: var(--ink)
}

.nav-links a:hover::after {
    width: 100%
}

.nav-cta {
    border        : 1px solid var(--ink);
    padding       : 11px 22px;
    font-size     : 12px;
    letter-spacing: .1em;
    color         : var(--ink);
    transition    : .35s;
    background    : transparent
}

.nav-cta:hover {
    background: var(--ink);
    color     : var(--paper)
}

.burger {
    display       : none;
    flex-direction: column;
    gap           : 5px;
    cursor        : pointer;
    background    : none;
    border        : none;
    padding       : 8px
}

.burger span {
    width     : 24px;
    height    : 1.5px;
    background: var(--ink);
    transition: .3s
}

/* ---------- HERO ---------- */
.hero {
    padding : 190px 0 130px;
    position: relative
}

.hero::before {
    content           : "";
    position          : absolute;
    inset             : 0;
    background-image  : linear-gradient(var(--gray-100) 1px, transparent 1px), linear-gradient(90deg, var(--gray-100) 1px, transparent 1px);
    background-size   : 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 70% 30%, #000 0%, transparent 70%);
    mask-image        : radial-gradient(ellipse 80% 60% at 70% 30%, #000 0%, transparent 70%);
    opacity           : .6;
    z-index           : -1;
}

.hero-tag {
    font-family   : var(--latin);
    font-size     : 12px;
    letter-spacing: .34em;
    color         : var(--gray-600);
    display       : flex;
    align-items   : center;
    gap           : 16px;
    margin-bottom : 34px
}

.hero-tag::before {
    content   : "";
    width     : 46px;
    height    : 1px;
    background: var(--gray-400)
}

.hero h1 {
    font-family   : var(--serif);
    font-weight   : 900;
    font-size     : clamp(38px, 6.4vw, 82px);
    line-height   : 1.32;
    letter-spacing: .02em;
    color         : var(--ink);
    margin-bottom : 36px
}

.hero h1 .thin {
    font-weight: 500;
    color      : var(--gray-600)
}

.hero h1 .mark {
    position: relative;
    display : inline-block
}

.hero h1 .mark::after {
    content   : "";
    position  : absolute;
    left      : -2px;
    right     : -2px;
    bottom    : 6px;
    height    : 12px;
    background: var(--gray-200);
    z-index   : -1
}

.hero p {
    font-size    : 17px;
    color        : var(--gray-600);
    max-width    : 560px;
    line-height  : 2.1;
    margin-bottom: 54px;
    font-weight  : 400
}

.hero p.hero-sub {
    position   : relative;
    max-width  : 600px;
    padding    : 6px 0 6px 28px;
    border-left: 2px solid var(--ink);
    line-height: 2.25;
}

.hero p.hero-sub::before {
    content   : "";
    position  : absolute;
    left      : -2px;
    top       : 0;
    width     : 2px;
    height    : 22px;
    background: var(--gray-400);
}

.hero p.hero-sub .k {
    color      : var(--ink);
    font-weight: 700;
    position   : relative;
    white-space: nowrap;
}

.hero p.hero-sub .k::after {
    content   : "";
    position  : absolute;
    left      : -2px;
    right     : -2px;
    bottom    : 1px;
    height    : 8px;
    background: var(--gray-200);
    z-index   : -1;
}

.hero p.hero-sub .lead-en {
    display       : block;
    font-family   : var(--latin);
    font-size     : 11px;
    letter-spacing: .28em;
    color         : var(--gray-400);
    margin-bottom : 14px;
    font-weight   : 500;
}

.hero-actions {
    display    : flex;
    gap        : 18px;
    align-items: center;
    flex-wrap  : wrap
}

.btn-primary {
    background    : var(--cta);
    color         : var(--paper);
    padding       : 21px 46px;
    font-size     : 15px;
    letter-spacing: .08em;
    font-weight   : 500;
    display       : inline-flex;
    align-items   : center;
    gap           : 14px;
    transition    : background .4s, transform .4s, box-shadow .4s;
    box-shadow    : 0 14px 34px -16px rgba(0, 0, 0, .5)
}

.btn-primary:hover {
    background: var(--cta-hover);
    transform : translateY(-3px);
    box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .6)
}

.btn-primary .arr {
    transition: transform .4s
}

.btn-primary:hover .arr {
    transform: translateX(6px)
}

.btn-ghost {
    font-size     : 14px;
    letter-spacing: .06em;
    color         : var(--gray-600);
    display       : inline-flex;
    align-items   : center;
    gap           : 10px;
    padding       : 18px 6px;
    border-bottom : 1px solid var(--gray-300);
    transition    : .35s
}

.btn-ghost:hover {
    color       : var(--ink);
    border-color: var(--ink)
}

.hero-meta {
    display    : flex;
    gap        : 54px;
    margin-top : 86px;
    padding-top: 40px;
    border-top : 1px solid var(--line);
    flex-wrap  : wrap
}

.hero-meta div {
    display       : flex;
    flex-direction: column;
    gap           : 6px
}

.hero-meta .num {
    font-family: var(--latin);
    font-size  : 34px;
    font-weight: 500;
    color      : var(--ink);
    line-height: 1
}

.hero-meta .lbl {
    font-size     : 12px;
    color         : var(--gray-600);
    letter-spacing: .05em
}

/* ---------- SECTION FRAME ---------- */
section {
    position: relative
}

.sec-head {
    display      : flex;
    align-items  : baseline;
    gap          : 22px;
    margin-bottom: 64px
}

.sec-no {
    font-family   : var(--latin);
    font-size     : 13px;
    color         : var(--gray-400);
    letter-spacing: .2em;
    border        : 1px solid var(--line);
    padding       : 7px 13px;
    flex-shrink   : 0
}

.sec-title {
    font-family   : var(--serif);
    font-weight   : 700;
    font-size     : clamp(26px, 3.6vw, 40px);
    letter-spacing: .04em;
    line-height   : 1.5
}

.sec-title small {
    display       : block;
    font-family   : var(--latin);
    font-size     : 12px;
    letter-spacing: .34em;
    color         : var(--gray-400);
    font-weight   : 400;
    margin-bottom : 14px
}

/* ---------- PROBLEM ---------- */
.problem {
    padding      : 120px 0;
    background   : var(--gray-050);
    border-top   : 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.problem-lead {
    font-family  : var(--serif);
    font-size    : clamp(22px, 3vw, 32px);
    font-weight  : 600;
    line-height  : 1.85;
    max-width    : 820px;
    margin-bottom: 60px
}

.problem-lead .em {
    background: linear-gradient(transparent 62%, var(--gray-200) 62%)
}

.p-grid {
    display              : grid;
    grid-template-columns: repeat(3, 1fr);
    gap                  : 0;
    border               : 1px solid var(--line);
    background           : var(--paper)
}

.p-card {
    padding     : 46px 38px;
    border-right: 1px solid var(--line);
    position    : relative;
    transition  : background .4s
}

.p-card:last-child {
    border-right: none
}

.p-card:hover {
    background: var(--gray-050)
}

.p-card .q {
    font-family   : var(--latin);
    font-size     : 13px;
    color         : var(--gray-400);
    letter-spacing: .2em;
    margin-bottom : 22px
}

.p-card h3 {
    font-family  : var(--serif);
    font-size    : 19px;
    font-weight  : 600;
    line-height  : 1.7;
    margin-bottom: 14px
}

.p-card p {
    font-size  : 14px;
    color      : var(--gray-600);
    line-height: 2
}

/* ---------- WHY ---------- */
.why {
    padding: 130px 0
}

.why-lead {
    margin               : -26px 0 56px;
    padding              : 34px 0 0;
    border-top           : 1px solid var(--line);
    display              : grid;
    grid-template-columns: auto 1fr;
    gap                  : 34px;
    align-items          : start
}

.why-lead .mk {
    font-family   : var(--latin);
    font-size     : 13px;
    letter-spacing: .2em;
    color         : var(--gray-400);
    padding-top   : 8px;
    white-space   : nowrap
}

.why-lead p {
    font-family   : var(--serif);
    font-weight   : 600;
    font-size     : clamp(19px, 2.4vw, 26px);
    line-height   : 1.85;
    color         : var(--gray-900);
    letter-spacing: .02em;
    margin        : 0
}

.why-lead p .hl {
    position: relative
}

.why-lead p .hl::after {
    content   : "";
    position  : absolute;
    left      : -2px;
    right     : -2px;
    bottom    : 3px;
    height    : 9px;
    background: var(--gray-200);
    z-index   : -1
}

@media(max-width:640px) {
    .why-lead {
        grid-template-columns: 1fr;
        gap                  : 14px;
        margin-top           : -10px
    }
}

.why-row {
    display  : block;
}

.why-visual {
    aspect-ratio   : 1/1.08;
    border         : 1px solid var(--line);
    position       : relative;
    display        : flex;
    align-items    : center;
    justify-content: center;
    overflow       : hidden;
    background     : var(--gray-050)
}

.why-visual .ring {
    position     : absolute;
    border       : 1px solid var(--gray-300);
    border-radius: 50%
}

.why-visual .r1 {
    width : 88%;
    height: 88%
}

.why-visual .r2 {
    width : 62%;
    height: 62%
}

.why-visual .r3 {
    width       : 36%;
    height      : 36%;
    border-color: var(--gray-400)
}

.why-visual .core {
    font-family     : var(--serif);
    font-weight     : 700;
    font-size       : 22px;
    letter-spacing  : .16em;
    writing-mode    : vertical-rl;
    text-orientation: upright;
    color           : var(--ink)
}

.why-visual .crn {
    position: absolute;
    width   : 18px;
    height  : 18px;
    border  : 1px solid var(--ink)
}

.why-visual .crn.tl {
    top          : 18px;
    left         : 18px;
    border-right : 0;
    border-bottom: 0
}

.why-visual .crn.tr {
    top          : 18px;
    right        : 18px;
    border-left  : 0;
    border-bottom: 0
}

.why-visual .crn.bl {
    bottom      : 18px;
    left        : 18px;
    border-right: 0;
    border-top  : 0
}

.why-visual .crn.br {
    bottom     : 18px;
    right      : 18px;
    border-left: 0;
    border-top : 0
}

.why-body h2 {
    font-family   : var(--serif);
    font-weight   : 700;
    font-size     : clamp(24px, 3.2vw, 36px);
    line-height   : 1.6;
    margin-bottom : 28px;
    letter-spacing: .03em
}

.why-body h2 .u {
    position: relative
}

.why-body h2 .u::after {
    content   : "";
    position  : absolute;
    left      : 0;
    right     : 0;
    bottom    : 2px;
    height    : 8px;
    background: var(--gray-200);
    z-index   : -1
}

.why-body p {
    font-size    : 15px;
    color        : var(--gray-600);
    line-height  : 2.15;
    margin-bottom: 22px
}

.why-list {
    margin-top: 38px;
    border-top: 1px solid var(--line)
}

.why-list li {
    list-style   : none;
    display      : flex;
    gap          : 20px;
    align-items  : flex-start;
    padding      : 22px 0;
    border-bottom: 1px solid var(--line)
}

.why-list .n {
    font-family   : var(--latin);
    font-size     : 13px;
    color         : var(--gray-400);
    letter-spacing: .15em;
    flex-shrink   : 0;
    padding-top   : 2px
}

.why-list .t strong {
    font-family  : var(--serif);
    font-size    : 16px;
    font-weight  : 600;
    display      : block;
    margin-bottom: 5px
}

.why-list .t span {
    font-size: 13.5px;
    color    : var(--gray-600)
}

.why-eg {
    border     : 1px solid var(--line);
    border-left: 3px solid var(--ink);
    background : var(--gray-050);
    padding    : 26px 30px;
    margin     : 6px 0 26px;
}

.why-eg .eg-lbl {
    font-family   : var(--latin);
    font-size     : 11px;
    letter-spacing: .24em;
    color         : var(--gray-400);
    display       : flex;
    align-items   : center;
    gap           : 12px;
    margin-bottom : 14px
}

.why-eg .eg-lbl::before {
    content   : "";
    width     : 22px;
    height    : 1px;
    background: var(--gray-400)
}

.why-eg p {
    font-size  : 14px;
    color      : var(--gray-900);
    line-height: 2.05;
    margin     : 0
}

.why-eg p strong {
    font-family: var(--serif);
    color      : var(--ink);
    font-weight: 700
}

/* ---------- SERVICES ---------- */
.services {
    padding   : 130px 0;
    background: var(--ink);
    color     : var(--paper)
}

.services .sec-no {
    border-color: #3a3a3a;
    color       : var(--gray-400)
}

.services .sec-title {
    color: var(--paper)
}

.services .sec-title small {
    color: var(--gray-400)
}

.svc-grid {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    gap                  : 1px;
    background           : #2a2a2a;
    border               : 1px solid #2a2a2a
}

.svc {
    background: var(--ink);
    padding   : 64px 56px;
    position  : relative;
    transition: background .45s
}

.svc:hover {
    background: #141414
}

.svc .idx {
    font-family   : var(--latin);
    font-size     : 13px;
    letter-spacing: .3em;
    color         : var(--gray-400);
    margin-bottom : 30px
}

.svc h3 {
    font-family   : var(--serif);
    font-size     : 28px;
    font-weight   : 700;
    margin-bottom : 8px;
    letter-spacing: .05em
}

.svc .sub {
    font-family   : var(--latin);
    font-size     : 12px;
    letter-spacing: .28em;
    color         : var(--gray-400);
    margin-bottom : 30px
}

.svc p {
    font-size    : 14.5px;
    color        : #bdbdbd;
    line-height  : 2.1;
    margin-bottom: 32px
}

.svc ul {
    border-top: 1px solid #2f2f2f
}

.svc ul li {
    list-style   : none;
    font-size    : 13.5px;
    color        : #cfcfcf;
    padding      : 15px 0;
    border-bottom: 1px solid #2f2f2f;
    display      : flex;
    gap          : 14px;
    align-items  : center
}

.svc ul li::before {
    content    : "";
    width      : 6px;
    height     : 6px;
    border     : 1px solid var(--gray-400);
    flex-shrink: 0
}

.svc-link {
    display       : inline-flex;
    align-items   : center;
    gap           : 12px;
    margin-top    : 34px;
    font-size     : 13px;
    letter-spacing: .08em;
    color         : var(--paper);
    border-bottom : 1px solid #4a4a4a;
    padding-bottom: 6px;
    transition    : .35s
}

.svc-link:hover {
    border-color: var(--paper);
    gap         : 18px
}

/* ---------- FLOW ---------- */
.flow {
    padding: 130px 0
}

.flow-grid {
    display              : grid;
    grid-template-columns: repeat(4, 1fr);
    gap                  : 0;
    border-top           : 1px solid var(--line)
}

.step {
    padding     : 44px 30px 44px 0;
    border-right: 1px solid var(--line);
    position    : relative
}

.step:last-child {
    border-right : none;
    padding-right: 0
}

.step .sn {
    font-family  : var(--latin);
    font-size    : 48px;
    font-weight  : 400;
    color        : var(--gray-200);
    line-height  : 1;
    margin-bottom: 24px
}

.step h4 {
    font-family  : var(--serif);
    font-size    : 18px;
    font-weight  : 600;
    margin-bottom: 12px
}

.step p {
    font-size    : 13.5px;
    color        : var(--gray-600);
    line-height  : 1.95;
    padding-right: 24px
}

/* ---------- CREDO (brand thread) ---------- */
.credo {
    padding   : 140px 0;
    background: var(--gray-050);
    border-top: 1px solid var(--line);
    text-align: center;
    position  : relative;
    overflow  : hidden
}

.credo .ghost {
    position      : absolute;
    font-family   : var(--serif);
    font-weight   : 800;
    font-size     : clamp(120px, 22vw, 300px);
    color         : var(--gray-100);
    letter-spacing: .05em;
    top           : 50%;
    left          : 50%;
    transform     : translate(-50%, -50%);
    white-space   : nowrap;
    z-index       : 0;
    user-select   : none
}

.credo .inner {
    position : relative;
    z-index  : 1;
    max-width: 760px;
    margin   : 0 auto
}

.credo .label {
    font-family   : var(--latin);
    font-size     : 12px;
    letter-spacing: .36em;
    color         : var(--gray-400);
    margin-bottom : 36px
}

.credo blockquote {
    font-family   : var(--serif);
    font-weight   : 900;
    font-size     : clamp(26px, 4.4vw, 46px);
    line-height   : 1.75;
    letter-spacing: .04em;
    margin-bottom : 38px
}

.credo blockquote .g {
    color: var(--gray-400)
}

.credo .note {
    font-size  : 14.5px;
    color      : var(--gray-600);
    line-height: 2.1;
    max-width  : 560px;
    margin     : 0 auto
}

.credo .note p {
    margin: 0
}

.credo .note p+p {
    margin-top: 18px
}

.credo .note strong {
    color      : var(--ink);
    font-weight: 700
}

.credo .recruit {
    display       : inline-flex;
    align-items   : center;
    gap           : 12px;
    margin-top    : 46px;
    font-size     : 13px;
    letter-spacing: .08em;
    color         : var(--gray-600);
    border-bottom : 1px solid var(--gray-400);
    padding-bottom: 6px;
    transition    : .35s
}

.credo .recruit:hover {
    color       : var(--ink);
    border-color: var(--ink);
    gap         : 18px
}

/* ---------- CTA ---------- */
.cta {
    padding : 150px 0 130px;
    position: relative
}

.cta-box {
    border    : 1px solid var(--ink);
    padding   : 84px 70px;
    position  : relative;
    background: var(--paper)
}

.cta-box::before {
    content       : "";
    position      : absolute;
    inset         : 9px;
    border        : 1px solid var(--line);
    pointer-events: none
}

.cta-grid {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    gap                  : 70px;
    align-items          : start
}

.cta-left .tag {
    font-family   : var(--latin);
    font-size     : 12px;
    letter-spacing: .32em;
    color         : var(--gray-400);
    margin-bottom : 28px
}

.cta-left h2 {
    font-family   : var(--serif);
    font-weight   : 900;
    font-size     : clamp(30px, 4.2vw, 52px);
    line-height   : 1.45;
    letter-spacing: .03em;
    margin-bottom : 26px
}

.cta-left p {
    font-size    : 15px;
    color        : var(--gray-600);
    line-height  : 2.15;
    margin-bottom: 40px
}

.cta-points li {
    list-style   : none;
    display      : flex;
    gap          : 14px;
    align-items  : center;
    font-size    : 14px;
    color        : var(--gray-600);
    padding      : 11px 0;
    border-bottom: 1px dashed var(--gray-200)
}

.cta-points li::before {
    content: "—";
    color  : var(--gray-400)
}

form {
    display       : flex;
    flex-direction: column;
    gap           : 20px
}

.field {
    display       : flex;
    flex-direction: column;
    gap           : 9px
}

.field label {
    font-size     : 12px;
    letter-spacing: .08em;
    color         : var(--gray-600)
}

.field label .req {
    color      : var(--ink);
    font-size  : 11px;
    margin-left: 6px;
    border     : 1px solid var(--ink);
    padding    : 1px 6px
}

.field input,
.field textarea,
.field select {
    font-family: var(--sans);
    font-size  : 14px;
    color      : var(--ink);
    border     : 1px solid var(--line);
    background : var(--gray-050);
    padding    : 14px 16px;
    transition : .3s;
    width      : 100%
}

.field input:focus,
.field textarea:focus,
.field select:focus {
    outline     : none;
    border-color: var(--ink);
    background  : var(--paper)
}

.field textarea {
    resize    : vertical;
    min-height: 96px
}

.form-submit {
    background     : var(--cta);
    color          : var(--paper);
    border         : none;
    padding        : 20px;
    font-family    : var(--sans);
    font-size      : 15px;
    letter-spacing : .1em;
    cursor         : pointer;
    transition     : .4s;
    margin-top     : 6px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 12px
}

.form-submit:hover {
    background    : var(--cta-hover);
    letter-spacing: .16em
}

.form-note {
    font-size  : 11.5px;
    color      : var(--gray-400);
    line-height: 1.8;
    text-align : center
}

/* ---------- FOOTER ---------- */
footer {
    background: var(--ink);
    color     : var(--gray-400);
    padding   : 90px 0 40px
}

.f-top {
    display              : grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap                  : 40px;
    padding-bottom       : 60px;
    border-bottom        : 1px solid #2a2a2a
}

.f-brand .logo {
    color    : var(--paper);
    font-size: 22px
}

.f-brand .logo span {
    color: var(--gray-600)
}

.f-brand p {
    font-size  : 13px;
    line-height: 2;
    margin-top : 22px;
    max-width  : 280px
}

.f-col h5 {
    color         : var(--paper);
    font-size     : 12px;
    letter-spacing: .18em;
    margin-bottom : 22px;
    font-weight   : 500;
    font-family   : var(--latin)
}

.f-col a {
    display   : block;
    font-size : 13px;
    padding   : 8px 0;
    transition: .3s
}

.f-col a:hover {
    color       : var(--paper);
    padding-left: 6px
}

.f-bottom {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    padding-top    : 34px;
    font-size      : 12px;
    flex-wrap      : wrap;
    gap            : 12px
}

.f-bottom .corp {
    line-height: 1.9
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px) {
    .nav-links {
        display: none
    }

    .burger {
        display: flex
    }

    .hero {
        padding: 150px 0 90px
    }

    .hero-meta {
        gap: 34px
    }

    .p-grid {
        grid-template-columns: 1fr
    }

    .p-card {
        border-right : none;
        border-bottom: 1px solid var(--line)
    }

    .p-card:last-child {
        border-bottom: none
    }

    .why-row {
        grid-template-columns: 1fr;
        gap                  : 48px
    }

    .svc-grid {
        grid-template-columns: 1fr
    }

    .flow-grid {
        grid-template-columns: 1fr 1fr
    }

    .step {
        border-right : none;
        border-bottom: 1px solid var(--line);
        padding      : 34px 0
    }

    .step:nth-child(odd) {
        padding-right: 24px;
        border-right : 1px solid var(--line)
    }

    .cta-grid {
        grid-template-columns: 1fr;
        gap                  : 48px
    }

    .cta-box {
        padding: 48px 28px
    }

    .f-top {
        grid-template-columns: 1fr 1fr;
        gap                  : 30px
    }
}

@media(max-width:560px) {
    .wrap {
        padding: 0 22px
    }

    .flow-grid {
        grid-template-columns: 1fr
    }

    .step,
    .step:nth-child(odd) {
        border-right : none;
        padding-right: 0
    }

    .f-top {
        grid-template-columns: 1fr
    }

    .sec-head {
        flex-direction: column;
        gap           : 16px
    }

    .cta-box::before {
        inset: 6px
    }
}