/* ========================================================================== 
   ARMAND DIGITAL — CRÉATION DE SITE WEB
   Page-specific styles. Global tokens, header and footer remain untouched.
   ========================================================================== */

.page-creation-site {
    --section-space: clamp(84px, 8vw, 144px);
    --section-content-gap: clamp(52px, 6vw, 96px);
    background: var(--paper);
    color: var(--ink);
}

.page-creation-site main {
    overflow: clip;
}

.service-section,
.vankor-showcase,
.service-method,
.service-next {
    padding-inline: var(--page-gutter);
}

.service-section {
    background: var(--paper);
}

.service-section__index {
    margin: 0;
    color: var(--signal);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.service-section__header {
    display: grid;
    grid-template-columns: minmax(0, 0.62fr) minmax(480px, 1.38fr);
    gap: clamp(48px, 8vw, 150px);
}

.service-section__header h2,
.service-definition h2,
.service-technology h2,
.service-method h2,
.service-next h2 {
    margin: 0;
    font-size: clamp(3.35rem, 6vw, 7.2rem);
    font-weight: 500;
    letter-spacing: -0.067em;
    line-height: 0.9;
}

.service-section__header h2 span,
.service-definition h2 span,
.service-technology h2 span,
.service-method h2 span,
.service-next h2 span {
    display: block;
    color: rgba(8, 8, 8, 0.38);
}

.service-section__header > p:last-child {
    grid-column: 2;
    max-width: 620px;
    margin: 0;
    color: rgba(8, 8, 8, 0.63);
    font-size: clamp(1rem, 1.2vw, 1.2rem);
    line-height: 1.65;
}

/* Hero */

.service-hero {
    position: relative;
    min-height: 100svh;
    padding: 86px var(--page-gutter) 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 78% 38%, rgba(255, 73, 56, 0.12), transparent 28%),
        linear-gradient(112deg, #070707, #0b0b0a 67%, #10100f);
    color: var(--paper);
}

.service-hero__grid {
    position: absolute;
    inset: 0;
    opacity: 0.55;
    background-image:
        linear-gradient(to right, transparent calc(100% - 1px), rgba(255, 255, 255, 0.055) 1px),
        linear-gradient(to bottom, transparent calc(100% - 1px), rgba(255, 255, 255, 0.04) 1px);
    background-size: clamp(110px, 11vw, 210px) 100%, 100% 105px;
    pointer-events: none;
}

.service-hero__inner {
    position: relative;
    z-index: 1;
    width: min(1600px, 100%);
    min-height: calc(100svh - 86px);
    margin: auto;
    display: grid;
    grid-template-rows: clamp(60px, 8vh, 76px) minmax(0, 1fr) auto clamp(58px, 8vh, 78px);
    border-inline: 1px solid var(--paper-12);
}

.service-hero__meta,
.service-hero__footer {
    padding-inline: clamp(24px, 3vw, 52px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-block: 1px solid var(--paper-12);
    color: var(--paper-56);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.11em;
}

.service-hero__breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
}

.service-hero__breadcrumb a {
    transition: color 220ms var(--ease-out);
}

.service-hero__breadcrumb a:hover,
.service-hero__breadcrumb a:focus-visible {
    color: var(--paper);
}

.service-hero__breadcrumb span[aria-current="page"] {
    color: var(--paper);
}

.service-hero__body {
    align-self: center;
    display: grid;
    grid-template-columns: minmax(280px, 0.7fr) minmax(520px, 1.3fr);
    column-gap: clamp(42px, 6vw, 96px);
    padding: clamp(28px, 4vh, 64px) clamp(24px, 5vw, 90px);
}

.service-hero__eyebrow {
    grid-column: 1 / -1;
    margin: 0 0 clamp(18px, 2.4vh, 32px);
    color: var(--signal);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.12em;
}

.service-hero h1 {
    grid-column: 1 / -1;
    max-width: 1390px;
    margin: 0;
    font-size: clamp(4rem, min(7.1vw, 12vh), 8.6rem);
    font-weight: 500;
    letter-spacing: -0.075em;
    line-height: 0.85;
}

.service-hero h1 span {
    display: block;
    color: var(--paper-40);
}

.service-hero__statement {
    grid-column: 1;
    max-width: 900px;
    margin: clamp(22px, 3.2vh, 40px) 0 0;
    font-size: clamp(1.5rem, min(2.6vw, 5vh), 3.2rem);
    letter-spacing: -0.05em;
    line-height: 1.02;
}

.service-hero__statement span {
    color: var(--paper-40);
}

.service-hero__copy {
    grid-column: 2;
    max-width: 900px;
    margin: clamp(22px, 3.2vh, 40px) 0 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(24px, 4vw, 64px);
}

.service-hero__copy p {
    margin: 0;
    color: var(--paper-72);
    font-size: clamp(0.95rem, 1vw, 1.08rem);
    line-height: 1.7;
}

.service-hero__actions {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    border-top: 1px solid var(--paper-12);
}

.service-link {
    min-height: clamp(68px, 9vh, 86px);
    padding: 0 clamp(24px, 3vw, 50px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    font-size: 0.86rem;
    font-weight: 700;
    text-transform: uppercase;
    transition: background 350ms var(--ease-out), color 350ms var(--ease-out);
}

.service-link--primary {
    background: var(--signal);
    color: var(--ink);
}

.service-link--secondary {
    border-left: 1px solid var(--paper-12);
}

.service-link:hover {
    background: var(--paper);
    color: var(--ink);
}

.service-hero__footer {
    justify-content: space-around;
    border-bottom: 0;
}

/* Definition */

.service-definition {
    padding-top: var(--section-space);
    padding-bottom: var(--section-space);
}

.service-definition__layout {
    margin-top: var(--section-content-gap);
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(400px, 0.95fr);
    gap: clamp(60px, 10vw, 190px);
}

.service-definition__answer {
    align-self: end;
    border-top: 1px solid rgba(8, 8, 8, 0.2);
    padding-top: 32px;
}

.service-definition__answer p {
    margin: 0 0 20px;
    color: rgba(8, 8, 8, 0.66);
    font-size: 1rem;
    line-height: 1.72;
}

.service-definition__answer .service-definition__lead {
    color: var(--ink);
    font-size: clamp(1.35rem, 2vw, 2.15rem);
    letter-spacing: -0.025em;
    line-height: 1.3;
}

/* Objective system */

.service-objectives {
    padding-top: var(--section-space);
    padding-bottom: var(--section-space);
    border-top: 1px solid rgba(8, 8, 8, 0.18);
}

.objective-system {
    margin-top: var(--section-content-gap);
    display: grid;
    grid-template-columns: minmax(340px, 0.72fr) minmax(0, 1.28fr);
    border: 1px solid rgba(8, 8, 8, 0.2);
}

.objective-system__choices {
    border-right: 1px solid rgba(8, 8, 8, 0.2);
}

.objective-choice {
    width: 100%;
    min-height: 106px;
    padding: 22px 26px;
    display: grid;
    grid-template-columns: 38px 1fr;
    text-align: left;
    border-bottom: 1px solid rgba(8, 8, 8, 0.16);
    cursor: pointer;
    transition: background 280ms ease, color 280ms ease;
}

.objective-choice:last-child {
    border-bottom: 0;
}

.objective-choice span {
    grid-row: 1 / 3;
    color: rgba(8, 8, 8, 0.45);
    font-family: var(--font-mono);
    font-size: 0.65rem;
}

.objective-choice strong {
    font-size: clamp(1.15rem, 1.5vw, 1.55rem);
    font-weight: 500;
    letter-spacing: -0.03em;
}

.objective-choice small {
    margin-top: 4px;
    color: rgba(8, 8, 8, 0.55);
}

.objective-choice.is-active,
.objective-choice:hover {
    background: var(--ink);
    color: var(--paper);
}

.objective-choice.is-active span,
.objective-choice.is-active small,
.objective-choice:hover span,
.objective-choice:hover small {
    color: var(--paper-56);
}

.objective-system__result {
    min-height: 530px;
    padding: clamp(42px, 6vw, 100px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background:
        linear-gradient(rgba(8, 8, 8, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(8, 8, 8, 0.035) 1px, transparent 1px);
    background-size: 46px 46px;
}

.objective-result__label {
    margin: 0 0 34px;
    color: var(--signal);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
}

.objective-system__result h3 {
    max-width: 800px;
    margin: 0;
    font-size: clamp(2.7rem, 4.8vw, 6.2rem);
    font-weight: 500;
    letter-spacing: -0.065em;
    line-height: 0.92;
}

.objective-system__result > p:not(.objective-result__label) {
    max-width: 660px;
    margin: 34px 0 0;
    color: rgba(8, 8, 8, 0.65);
    line-height: 1.7;
}

.objective-result__architecture {
    margin-top: auto;
    padding-top: 70px;
    display: flex;
    align-items: center;
    color: rgba(8, 8, 8, 0.52);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
}

.objective-result__architecture i {
    flex: 1;
    height: 1px;
    margin: 0 14px;
    background: rgba(8, 8, 8, 0.23);
}

/* Vankor proof */

.vankor-showcase {
    padding-top: var(--section-space);
    padding-bottom: var(--section-space);
    background: var(--ink);
    color: var(--paper);
}

.vankor-showcase__intro {
    width: min(1600px, 100%);
    margin: auto;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(360px, 0.7fr);
    gap: 70px;
}

.vankor-showcase__intro .service-section__index {
    grid-column: 1 / -1;
}

.vankor-showcase__intro h2 {
    margin: 0;
    font-size: clamp(3.5rem, 6.2vw, 7.5rem);
    font-weight: 500;
    letter-spacing: -0.07em;
    line-height: 0.88;
}

.vankor-showcase__intro h2 span {
    display: block;
    color: var(--paper-40);
}

.vankor-showcase__intro > p:last-child {
    align-self: end;
    margin: 0;
    color: var(--paper-72);
    line-height: 1.7;
}

.vankor-showcase__stage {
    width: min(1600px, 100%);
    margin: clamp(80px, 10vw, 160px) auto 0;
    display: grid;
    grid-template-columns: minmax(0, 1.32fr) minmax(330px, 0.68fr);
    gap: clamp(40px, 7vw, 120px);
}

.vankor-showcase__visual {
    position: sticky;
    top: 118px;
    height: min(68vh, 730px);
    padding: clamp(14px, 1.5vw, 24px);
    overflow: hidden;
    border: 1px solid var(--paper-18);
    background: #111;
}

.vankor-frame {
    position: absolute;
    inset: clamp(14px, 1.5vw, 24px);
    margin: 0;
    display: grid;
    place-items: center;
    opacity: 0;
    transform: translateY(24px) scale(0.985);
    transition: opacity 550ms var(--ease-out), transform 700ms var(--ease-out);
}

.vankor-frame.is-active {
    opacity: 1;
    transform: none;
}

.vankor-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.vankor-frame--mobile img {
    padding: 2%;
}

.vankor-showcase__counter {
    position: absolute;
    right: 22px;
    bottom: 18px;
    padding: 8px 11px;
    background: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
}

.vankor-showcase__counter b {
    color: var(--signal);
    font-weight: 500;
}

.vankor-showcase__steps {
    padding-bottom: 0;
}

.vankor-step {
    min-height: 56vh;
    padding: 55px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-top: 1px solid var(--paper-18);
    opacity: 0.34;
    transition: opacity 450ms ease;
}

.vankor-step.is-active {
    opacity: 1;
}

.vankor-step > span {
    color: var(--signal);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
}

.vankor-step h3 {
    margin: 25px 0;
    font-size: clamp(2.15rem, 3vw, 4rem);
    font-weight: 500;
    letter-spacing: -0.055em;
    line-height: 1;
}

.vankor-step p {
    color: var(--paper-72);
    line-height: 1.7;
}

.vankor-step .vankor-step__conclusion {
    margin-top: 34px;
    padding-top: 28px;
    border-top: 1px solid var(--paper-18);
    color: var(--paper-56);
}

/* Formats */

.service-formats {
    padding-top: var(--section-space);
    padding-bottom: var(--section-space);
}

.service-format-grid {
    margin-top: var(--section-content-gap);
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1px;
    background: rgba(8, 8, 8, 0.22);
    border: 1px solid rgba(8, 8, 8, 0.22);
}

.service-format {
    grid-column: span 5;
    min-height: clamp(360px, 34vw, 520px);
    padding: clamp(28px, 4vw, 62px);
    display: flex;
    flex-direction: column;
    background: var(--paper);
}

.service-format--primary,
.service-format--wide {
    grid-column: span 7;
}

.service-format--primary {
    background: var(--ink);
    color: var(--paper);
}

.service-format__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
}

.service-format__meta > span {
    color: var(--signal);
}

.service-format__meta small {
    color: rgba(8, 8, 8, 0.46);
    font: inherit;
}

.service-format--primary .service-format__meta small {
    color: var(--paper-40);
}

.service-format__body {
    margin: auto 0;
    padding: clamp(54px, 7vw, 110px) 0;
}

.service-format h3 {
    max-width: 720px;
    margin: 0 0 24px;
    font-size: clamp(2.25rem, 4.1vw, 5.4rem);
    font-weight: 500;
    letter-spacing: -0.065em;
    line-height: 0.94;
}

.service-format__body p {
    max-width: 590px;
    margin: 0;
    color: rgba(8, 8, 8, 0.64);
    line-height: 1.7;
}

.service-format--primary .service-format__body p {
    color: var(--paper-72);
}

.service-format__outcome {
    margin: 0;
    padding-top: 22px;
    display: grid;
    grid-template-columns: minmax(110px, 0.42fr) minmax(0, 1fr);
    gap: 24px;
    border-top: 1px solid rgba(8, 8, 8, 0.2);
    color: rgba(8, 8, 8, 0.72);
    font-size: 0.88rem;
    line-height: 1.55;
}

.service-format__outcome span {
    color: var(--signal);
    font-family: var(--font-mono);
    font-size: 0.61rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.service-format--primary .service-format__outcome {
    border-color: var(--paper-18);
    color: var(--paper-72);
}

/* Method */

.service-method {
    padding-top: var(--section-space);
    padding-bottom: var(--section-space);
    background: var(--ink);
    color: var(--paper);
}

.service-method__inner {
    width: min(1600px, 100%);
    margin: auto;
    display: grid;
    grid-template-columns: minmax(330px, 0.75fr) minmax(0, 1.25fr);
    gap: clamp(70px, 10vw, 180px);
}

.service-method__heading {
    position: sticky;
    top: 140px;
    align-self: start;
}

.service-method h2 {
    margin-top: 50px;
}

.service-method h2 span {
    color: var(--paper-40);
}

.service-method__heading > p:last-child {
    max-width: 520px;
    margin-top: 35px;
    color: var(--paper-72);
    line-height: 1.7;
}

.service-method__steps {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--paper-18);
}

.service-method__steps li {
    min-height: 190px;
    padding: 36px 0;
    display: grid;
    grid-template-columns: 80px 1fr;
    border-bottom: 1px solid var(--paper-18);
}

.service-method__steps li > span {
    color: var(--signal);
    font-family: var(--font-mono);
    font-size: 0.66rem;
}

.service-method__steps h3 {
    margin: 0 0 16px;
    font-size: clamp(2rem, 3vw, 4rem);
    font-weight: 500;
    letter-spacing: -0.055em;
    line-height: 1;
}

.service-method__steps p {
    max-width: 670px;
    margin: 0;
    color: var(--paper-72);
    line-height: 1.7;
}

/* Foundations */

.service-foundations {
    padding-top: var(--section-space);
    padding-bottom: var(--section-space);
}

.foundation-grid {
    margin-top: var(--section-content-gap);
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1px;
    background: rgba(8, 8, 8, 0.2);
    border: 1px solid rgba(8, 8, 8, 0.2);
}

.foundation-item {
    grid-column: span 4;
    min-height: 360px;
    padding: clamp(28px, 4vw, 62px);
    display: flex;
    flex-direction: column;
    background: var(--paper);
}

.foundation-item--wide {
    grid-column: span 5;
}

.foundation-item:nth-child(2),
.foundation-item:nth-child(5) {
    grid-column: span 3;
}

.foundation-item--signal {
    background: var(--ink);
    color: var(--paper);
}

.foundation-item__meta {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.09em;
}

.foundation-item__meta span {
    color: var(--signal);
}

.foundation-item__meta small {
    color: rgba(8, 8, 8, 0.45);
    font: inherit;
    text-align: right;
}

.foundation-item--signal .foundation-item__meta small {
    color: var(--paper-40);
}

.foundation-item h3 {
    margin: auto 0 20px;
    padding-top: 64px;
    font-size: clamp(2rem, 3vw, 4rem);
    font-weight: 500;
    letter-spacing: -0.06em;
    line-height: 0.96;
}

.foundation-item p {
    max-width: 590px;
    margin: 0 0 34px;
    color: rgba(8, 8, 8, 0.64);
    line-height: 1.7;
}

.foundation-item strong {
    padding-top: 18px;
    border-top: 1px solid rgba(8, 8, 8, 0.18);
    color: rgba(8, 8, 8, 0.78);
    font-size: 0.86rem;
    font-weight: 500;
    line-height: 1.5;
}

.foundation-item--signal p,
.foundation-item--signal strong {
    color: var(--paper-72);
}

.foundation-item--signal strong {
    border-color: var(--paper-18);
}

/* Technology */

.service-technology {
    padding-top: var(--section-space);
    padding-bottom: var(--section-space);
    border-top: 1px solid rgba(8, 8, 8, 0.2);
}

.service-technology__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(400px, 0.88fr);
    gap: clamp(70px, 10vw, 180px);
}

.service-technology h2 {
    margin-top: 52px;
}

.service-technology__copy {
    align-self: end;
}

.service-technology__copy p {
    color: rgba(8, 8, 8, 0.66);
    line-height: 1.75;
}

.service-technology__copy .service-technology__lead {
    color: var(--ink);
    font-size: clamp(1.55rem, 2.3vw, 2.7rem);
    letter-spacing: -0.04em;
    line-height: 1.2;
}

/* Budget */

.service-budget {
    padding-top: var(--section-space);
    padding-bottom: var(--section-space);
    background: #e9e6df;
}

.service-budget__grid {
    margin-top: clamp(40px, 4.5vw, 68px);
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    border: 1px solid rgba(8, 8, 8, 0.2);
}

.service-budget__grid article {
    min-height: 510px;
    padding: clamp(34px, 4.2vw, 68px);
    display: flex;
    flex-direction: column;
}

.service-budget__price {
    background: var(--ink);
    color: var(--paper);
}

.service-budget__time {
    border-left: 1px solid rgba(8, 8, 8, 0.2);
}

.service-budget__grid h3 {
    max-width: 760px;
    margin: 0 0 38px;
    font-size: clamp(2.5rem, 3.25vw, 4.35rem);
    font-weight: 500;
    letter-spacing: -0.06em;
    line-height: 0.96;
}

.service-budget__time h3 span {
    display: block;
}

.service-budget article p {
    margin: 0 0 20px;
    max-width: 690px;
    color: rgba(8, 8, 8, 0.65);
    line-height: 1.7;
}

.service-budget article .service-budget__label {
    margin: 0 0 clamp(54px, 6vw, 92px);
    color: var(--signal);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
}

.service-budget__price > p:not(.service-budget__label) {
    color: var(--paper-72);
}

.service-budget article a {
    width: fit-content;
    margin-top: auto;
    padding: 12px 16px;
    border: 1px solid var(--paper-40);
    font-weight: 700;
    transition: background 260ms var(--ease-out), color 260ms var(--ease-out), border-color 260ms var(--ease-out);
}

.service-budget article a span {
    display: inline-block;
    margin-left: 3px;
    color: var(--signal);
    transition: transform 260ms var(--ease-out);
}

.service-budget article a:hover,
.service-budget article a:focus-visible {
    border-color: var(--paper);
    background: var(--paper);
    color: var(--ink);
}

.service-budget article a:hover span,
.service-budget article a:focus-visible span {
    transform: translate(3px, -3px);
}

.service-budget article .service-budget__signal {
    margin-top: auto;
    margin-bottom: 0;
    padding-top: 22px;
    display: grid;
    grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr);
    gap: 24px;
    border-top: 1px solid rgba(8, 8, 8, 0.2);
    color: rgba(8, 8, 8, 0.78);
}

.service-budget__signal span {
    color: var(--signal);
    font-family: var(--font-mono);
    font-size: 0.61rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* FAQ */

.service-faq {
    padding-top: var(--section-space);
    padding-bottom: var(--section-space);
    display: grid;
    grid-template-columns: minmax(320px, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(60px, 9vw, 160px);
}

.service-faq .service-section__header {
    position: sticky;
    top: 130px;
    align-self: start;
    display: block;
}

.service-faq .service-section__header h2 {
    margin-top: 52px;
    font-size: clamp(3.2rem, 5vw, 6.5rem);
}

.service-faq .service-section__header > p:last-child {
    max-width: 520px;
    margin-top: 38px;
}

.service-faq__list {
    margin: 0;
    border-top: 1px solid rgba(8, 8, 8, 0.22);
}

.service-faq details {
    position: relative;
    border-bottom: 1px solid rgba(8, 8, 8, 0.22);
    transition: background 320ms var(--ease-out), color 320ms var(--ease-out);
}

.service-faq details::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: var(--signal);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 480ms var(--ease-out);
}

.service-faq details[open] {
    background: var(--ink);
    color: var(--paper);
}

.service-faq details[open]::after {
    transform: scaleX(1);
}

.service-faq summary {
    min-height: 126px;
    padding: 24px clamp(20px, 2vw, 34px);
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr) 34px;
    align-items: center;
    gap: clamp(18px, 2vw, 34px);
    cursor: pointer;
    list-style: none;
    font-size: clamp(1.2rem, 1.7vw, 1.75rem);
    letter-spacing: -0.025em;
}

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

.faq-item__meta {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: rgba(8, 8, 8, 0.48);
    font-family: var(--font-mono);
}

.faq-item__meta b {
    color: var(--signal);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.1em;
}

.faq-item__meta small {
    font-size: 0.58rem;
    letter-spacing: 0.09em;
}

.faq-item__question {
    transition: transform 360ms var(--ease-out);
}

.faq-item__icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: var(--signal);
    font-size: 1.5rem;
    transition: transform 360ms var(--ease-out);
}

.service-faq details[open] .faq-item__meta {
    color: var(--paper-56);
}

.service-faq details[open] .faq-item__question {
    transform: translateX(8px);
}

.service-faq details[open] .faq-item__icon {
    transform: rotate(45deg);
}

.service-faq details p {
    max-width: 760px;
    margin: -5px 34px 42px calc(118px + clamp(38px, 4vw, 68px));
    color: rgba(8, 8, 8, 0.65);
    line-height: 1.75;
}

.service-faq details[open] p {
    color: var(--paper-72);
}

/* Related service */

.service-related {
    padding-inline: var(--page-gutter);
    background: #e9e6df;
}

.service-related__inner {
    width: min(1600px, 100%);
    min-height: 210px;
    margin: auto;
    display: grid;
    grid-template-columns: minmax(150px, 0.42fr) minmax(360px, 1fr) auto;
    align-items: center;
    gap: clamp(32px, 6vw, 100px);
    border-top: 1px solid rgba(8, 8, 8, 0.2);
}

.service-related h2 {
    margin: 0;
    font-size: clamp(1.8rem, 3vw, 3.6rem);
    font-weight: 500;
    letter-spacing: -0.055em;
    line-height: 1;
}

.service-related__inner > div p {
    max-width: 620px;
    margin: 16px 0 0;
    color: rgba(8, 8, 8, 0.62);
    line-height: 1.6;
}

.service-related nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.service-related a {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--signal);
    font-weight: 700;
    transition: color 220ms var(--ease-out);
}

.service-related a:hover,
.service-related a:focus-visible {
    color: var(--signal);
}

/* Final conversion */

.service-next {
    padding-top: var(--section-space);
    background: var(--ink);
    color: var(--paper);
}

.service-next__inner {
    width: min(1600px, 100%);
    margin: auto;
}

.service-next h2 {
    max-width: 1400px;
    margin-top: 54px;
}

.service-next h2 span {
    color: var(--paper-40);
}

.service-next__inner > p:not(.service-section__index) {
    max-width: 710px;
    margin: 44px 0 90px auto;
    color: var(--paper-72);
    font-size: clamp(1rem, 1.2vw, 1.16rem);
    line-height: 1.75;
}

.service-next__actions {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    border-top: 1px solid var(--paper-18);
}

.service-next__actions a {
    min-height: 170px;
    padding: 34px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-content: center;
    gap: 10px 28px;
    border-right: 1px solid var(--paper-18);
    transition: background 300ms var(--ease-out), color 300ms var(--ease-out);
}

.service-next__actions a:last-child {
    border-right: 0;
}

.service-next__actions a:hover {
    background: var(--paper);
    color: var(--ink);
}

.service-next__actions small {
    color: var(--paper-56);
}

.service-next__actions a:hover small {
    color: rgba(8, 8, 8, 0.56);
}

.service-next__actions strong {
    font-size: clamp(1.05rem, 1.35vw, 1.4rem);
}

.service-next__actions a > span:last-child {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    color: var(--signal);
}

.service-next__actions .service-next__primary {
    background: var(--signal);
    color: var(--ink);
    font-size: clamp(1.3rem, 2vw, 2.2rem);
    font-weight: 600;
}

/* Responsive */

@media (max-width: 1100px) {
    .page-creation-site {
        --section-space: clamp(76px, 10vw, 112px);
        --section-content-gap: clamp(46px, 7vw, 72px);
    }

    .service-section__header,
    .service-definition__layout,
    .service-technology__layout,
    .service-method__inner,
    .vankor-showcase__intro {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .service-section__header > p:last-child {
        grid-column: 1;
    }

    .service-method__heading {
        position: static;
    }

    .service-faq {
        grid-template-columns: 1fr;
    }

    .service-faq .service-section__header {
        position: static;
    }

    .foundation-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .foundation-item,
    .foundation-item--wide,
    .foundation-item:nth-child(2),
    .foundation-item:nth-child(5) {
        grid-column: span 1;
    }

    .service-next__actions {
        grid-template-columns: 1fr 1fr;
    }

    .service-next__primary {
        grid-column: 1 / -1;
    }
}

@media (max-width: 780px) {
    .page-creation-site {
        --section-space: 72px;
        --section-content-gap: 46px;
    }

    .service-section,
    .vankor-showcase,
    .service-method,
    .service-related,
    .service-next {
        padding-inline: 18px;
    }

    .service-hero {
        min-height: 0;
        padding: 86px 18px 0;
    }

    .service-hero__inner {
        min-height: 0;
        grid-template-rows: 64px auto auto auto;
    }

    .service-hero__meta span:last-child {
        display: none;
    }

    .service-hero__body {
        grid-template-columns: 1fr;
        padding: 42px 10px 48px;
    }

    .service-hero h1 {
        font-size: clamp(3.1rem, 14.5vw, 5.25rem);
        line-height: 0.9;
    }

    .service-hero__statement {
        grid-column: 1;
        margin-top: 35px;
        font-size: clamp(1.65rem, 8vw, 2.7rem);
    }

    .service-hero__copy {
        grid-column: 1;
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .service-related__inner {
        min-height: 0;
        padding-block: 46px;
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .service-related a {
        justify-self: start;
    }

    .service-hero__actions,
    .service-budget__grid,
    .service-format-grid,
    .foundation-grid,
    .service-next__actions {
        grid-template-columns: 1fr;
    }

    .service-link--secondary {
        border-top: 1px solid var(--paper-12);
        border-left: 0;
    }

    .service-hero__footer {
        padding-block: 22px;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .service-hero__footer span {
        width: calc(50% - 12px);
    }

    .service-section__header h2,
    .service-definition h2,
    .service-technology h2,
    .service-method h2,
    .service-next h2,
    .vankor-showcase__intro h2 {
        font-size: clamp(2.9rem, 13vw, 4.65rem);
        line-height: 0.92;
    }

    .objective-system {
        grid-template-columns: 1fr;
    }

    .objective-system__choices {
        border-right: 0;
        border-bottom: 1px solid rgba(8, 8, 8, 0.2);
    }

    .objective-system__result {
        min-height: 470px;
        padding: 38px 25px;
    }

    .objective-result__architecture {
        padding-top: 55px;
    }

    .vankor-showcase__stage {
        grid-template-columns: 1fr;
    }

    .vankor-showcase__visual {
        position: sticky;
        z-index: 2;
        top: 86px;
        height: min(46svh, 360px);
        background: #111;
    }

    .vankor-showcase__steps {
        padding: 0;
    }

    .vankor-step {
        min-height: 62svh;
        padding: 44px 0;
        opacity: 1;
    }

    .service-format-grid article {
        min-height: 250px;
    }

    .service-format {
        grid-column: 1;
        padding: 30px 24px;
    }

    .service-format__body {
        padding: 70px 0;
    }

    .service-format__outcome {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .foundation-item {
        grid-column: 1;
        min-height: 320px;
        padding: 30px 24px;
    }

    .foundation-item h3 {
        padding-top: 54px;
    }

    .service-method__steps li {
        grid-template-columns: 50px 1fr;
    }

    .service-budget__grid article {
        min-height: 0;
        padding: 38px 24px 42px;
    }

    .service-budget__time {
        border-top: 1px solid rgba(8, 8, 8, 0.2);
        border-left: 0;
    }

    .service-budget article .service-budget__label {
        margin-bottom: 48px;
    }

    .service-budget__grid h3 {
        font-size: clamp(2.45rem, 11vw, 3.65rem);
    }

    .service-budget article .service-budget__signal {
        margin-top: 42px;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .service-faq__list {
        margin-left: 0;
    }

    .service-faq summary {
        min-height: 112px;
        padding-inline: 18px;
        grid-template-columns: 72px minmax(0, 1fr) 28px;
        gap: 14px;
    }

    .faq-item__meta small {
        max-width: 66px;
        overflow-wrap: anywhere;
    }

    .service-faq details p {
        margin: 0 28px 34px 104px;
    }

    .service-next__inner > p:not(.service-section__index) {
        margin: 34px 0 60px;
    }

    .service-next__actions a {
        grid-column: 1;
        border-right: 0;
        border-bottom: 1px solid var(--paper-18);
    }
}

@media (max-width: 420px) {
    .service-hero {
        padding-inline: 12px;
    }

    .service-hero__meta {
        padding-inline: 14px;
    }

    .service-hero__body {
        padding-inline: 14px;
    }

    .service-hero__footer span {
        width: 100%;
    }

    .objective-choice {
        padding-inline: 18px;
    }

    .objective-result__architecture {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .objective-result__architecture i {
        width: 1px;
        height: 18px;
        flex: none;
        margin: 0 0 0 5px;
    }

    .service-faq summary {
        min-height: 88px;
        font-size: 1.08rem;
    }

    .service-faq details p {
        margin-left: 18px;
    }
}

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