/* =========================================================================
   OTTOBIT — pagine servizio (es. /services/yacht-rendering/)
   Impaginato editoriale: tanto bianco, una colonna di lettura, immagini ampie.
   ========================================================================= */
html.svc-page, .svc-body {
    height: auto;
    overflow: auto;                         /* style.css blocca lo scroll per la home */
}
.svc-body {
    background: var(--paper, #fff);
    color: var(--ink, #1a1a1a);
}
.svc {
    --gutter: clamp(20px, 5vw, 72px);
    --measure: 62ch;
    width: min(1280px, 100% - 2 * var(--gutter));
    margin: 0 auto;
    padding-block: clamp(96px, 14vh, 160px) 0;
    font-weight: 300;
    font-size: clamp(16px, 1.1vw, 18px);
    line-height: 1.65;
}
.svc p { margin: 0; }

/* apertura */
.svc-hero { max-width: 900px; margin-bottom: clamp(40px, 6vw, 80px); }
.svc-eyebrow {
    font-size: 12px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase;
    color: var(--stone, #6f6b64); margin-bottom: 20px !important;
}
.svc-title {
    margin: 0 0 24px;
    font-weight: 300;
    font-size: clamp(40px, 6.4vw, 92px);
    line-height: 1.02;
    letter-spacing: -.015em;
    text-wrap: balance;
}
.svc-lead { font-size: clamp(18px, 1.6vw, 24px); line-height: 1.5; max-width: 34ch; }

/* immagini */
.svc figure { margin: 0; background: #ffffff; }
.svc img { display: block; width: 100%; height: auto; }
.svc-wide { margin-bottom: clamp(56px, 8vw, 120px) !important; }
.svc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2vw, 28px); }
.svc-caption { margin: 14px 0 clamp(56px, 8vw, 120px) !important; font-size: 13px; color: var(--stone, #6f6b64); }

/* blocchi di testo */
.svc-block { margin-bottom: clamp(56px, 8vw, 120px); }
.svc-h2 {
    margin: 0 0 clamp(20px, 2.4vw, 32px);
    font-size: 12px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase;
    color: var(--stone, #6f6b64);
    padding-top: 18px; border-top: 1px solid var(--line, rgba(26,26,26,.14));
}
.svc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); }
.svc-cols p { font-size: clamp(17px, 1.35vw, 21px); line-height: 1.6; max-width: var(--measure); }

/* processo */
.svc-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 40px); }
.svc-steps li { display: grid; gap: 10px; align-content: start; }
.svc-steps__n { font-size: 13px; font-weight: 400; letter-spacing: .12em; color: var(--stone, #6f6b64); font-variant-numeric: tabular-nums; }
.svc-steps h3 { margin: 0; font-size: clamp(20px, 1.7vw, 26px); font-weight: 400; letter-spacing: -.005em; }

/* dati essenziali */
.svc-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); padding: clamp(28px, 3vw, 40px) 0; border-top: 1px solid var(--line, rgba(26,26,26,.14)); border-bottom: 1px solid var(--line, rgba(26,26,26,.14)); }
.svc-facts__k { font-size: 12px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--stone, #6f6b64); margin-bottom: 10px !important; }
.svc-facts__v { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.5; }

/* clienti */
.svc-clients { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px clamp(28px, 4vw, 64px); }
.svc-clients li { font-size: clamp(22px, 2.2vw, 34px); font-weight: 300; letter-spacing: -.01em; }

/* domande frequenti */
.svc-faq__item { border-bottom: 1px solid var(--line, rgba(26,26,26,.14)); }
.svc-faq__item summary {
    list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative;
    font-size: clamp(18px, 1.4vw, 22px); font-weight: 400;
}
.svc-faq__item summary::-webkit-details-marker { display: none; }
.svc-faq__item summary::after {
    content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; margin-top: -8px;
    border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg);
    transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.svc-faq__item[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
.svc-faq__item summary:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.svc-faq__item p { padding: 0 0 24px; max-width: var(--measure); }

/* chiusura */
.svc-cta { text-align: center; padding: clamp(64px, 9vw, 140px) 0; border-top: 1px solid var(--line, rgba(26,26,26,.14)); }
.svc-cta__line { font-size: clamp(28px, 3.6vw, 52px); font-weight: 300; letter-spacing: -.01em; margin-bottom: 32px !important; }
.svc-cta__btn {
    display: inline-block; padding: 16px 44px; border: 1px solid var(--ink, #1a1a1a); color: var(--ink, #1a1a1a);
    text-decoration: none; font-size: 12px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase;
    transition: background-color .3s ease, color .3s ease;
}
.svc-cta__btn:hover, .svc-cta__btn:focus-visible { background: var(--ink, #1a1a1a); color: #fff; }
.svc-cta__mail { margin-top: 18px !important; font-size: 14px; color: var(--stone, #6f6b64); user-select: all; }
.svc-cta__more { margin-top: 28px !important; font-size: 14px; }
.svc-cta__more a { color: inherit; text-underline-offset: 4px; }

.svc-footer { text-align: center; font-size: 12px; color: var(--stone, #6f6b64); padding: 28px 20px 40px; }

@media (max-width: 900px) {
    .svc-cols, .svc-facts { grid-template-columns: 1fr; }
    .svc-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .svc { padding-top: 110px; }
}
@media (max-width: 520px) {
    .svc-pair, .svc-steps { grid-template-columns: 1fr; }
}

/* indice dei servizi e testi grandi */
.svc-index { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 36px; }
.svc-index a {
    color: inherit; text-decoration: none; font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
    padding-bottom: 4px; border-bottom: 1px solid var(--line, rgba(26,26,26,.14)); transition: border-color .3s ease;
}
.svc-index a:hover, .svc-index a:focus-visible { border-bottom-color: var(--ink, #1a1a1a); }
.svc-big { font-size: clamp(22px, 2.1vw, 32px) !important; line-height: 1.3 !important; letter-spacing: -.01em; }
.svc-block[id] { scroll-margin-top: 100px; }
.svc-pair--wide { grid-template-columns: 1.6fr 1fr; align-items: start; }
@media (max-width: 520px) { .svc-pair--wide { grid-template-columns: 1fr; } }
html.svc-page { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html.svc-page { scroll-behavior: auto; } }

/* immagini che entrano con la tendina bianca, come in Work:
   la tendina si abbassa solo quando l'immagine è arrivata */
.svc-reveal { position: relative; overflow: hidden; }
.svc-reveal::after {
    content: ""; position: absolute; inset: 0; z-index: 2; background: #ffffff; pointer-events: none;
    transform: translateY(0);
    transition: transform 1.6s cubic-bezier(.65,0,.25,1) var(--entry-delay, 0ms);
}
.svc-reveal.is-visible::after { transform: translateY(101%); }
@media (prefers-reduced-motion: reduce) { .svc-reveal::after { display: none; } }