/*
 * FILE: assets/css/services/predmetna-fotozjomka-odyagu-u-kyyevi-fotostudiya-art-focus.css
 *
 * Сторінка: Предметна зйомка одягу
 * Префікс селекторів: .svc-od
 * Залежить від: assets/css/global.css (CSS-змінні)
 *
 * Breakpoints: 1200 / 1024 / 768 / 480 / 380px
 */

/* ─── Локальні токени ────────────────────────────────────────────────────── */
.svc-od {
    --od-bg:          #0d0d0d;
    --od-bg-alt:      #111111;
    --od-bg-card:     #161616;
    --od-accent:      #6c4e4c;
    --od-accent-h:    #7d5a58;
    --od-soft:        #e6d6d3;
    --od-white:       #fff;
    --od-muted:       #888;
    --od-border:      rgba(230, 214, 211, 0.13);
    --od-bs:          rgba(255, 255, 255, 0.06);
    --od-font:        'Unbounded', 'Segoe UI', sans-serif;
    --od-max-w:       1500px;
    --od-r:           3px;
    --od-tr:          0.25s ease;
}

/* ─── Base ───────────────────────────────────────────────────────────────── */
.svc-od,
.svc-od * {
    box-sizing: border-box;
}

.svc-od {
    font-family: var(--od-font);
    background:  var(--od-bg);
    color:       var(--od-white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* ─── Container ─────────────────────────────────────────────────────────── */
.svc-od-w {
    max-width:    var(--od-max-w);
    width:        100%;
    margin-inline: auto;
    padding-inline: 66px;
}

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.svc-od-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    padding:         13px 26px;
    font-family:     var(--od-font);
    font-size:       11px;
    font-weight:     600;
    letter-spacing:  0.1em;
    text-transform:  uppercase;
    text-decoration: none;
    border:          none;
    cursor:          pointer;
    border-radius:   var(--od-r);
    transition:      all var(--od-tr);
    white-space:     nowrap;
}

.svc-od-btn--fill {
    background: var(--od-accent);
    color:      #fff;
}

.svc-od-btn--fill:hover {
    background:  var(--od-accent-h);
    transform:   translateY(-2px);
    box-shadow:  0 8px 24px rgba(108, 78, 76, 0.32);
}

.svc-od-btn--ghost {
    background:  transparent;
    color:       #fff;
    border:      1px solid rgba(255, 255, 255, 0.2);
}

.svc-od-btn--ghost:hover {
    border-color: var(--od-soft);
    color:        var(--od-soft);
}

.svc-od-btn--wide {
    width: 100%;
}

/* ─── Section ────────────────────────────────────────────────────────────── */
.svc-od__sec {
    padding: 80px 0;
}

.svc-od__sec--alt {
    background: var(--od-bg-alt);
}

.svc-od__h2 {
    font-family:    var(--od-font);
    font-size:      clamp(22px, 3vw, 48px);
    font-weight:    200;
    letter-spacing: -0.02em;
    color:          #fff;
    line-height:    1.1;
    margin-bottom:  40px;
}

.svc-od__h2 strong {
    font-weight: 700;
}

.svc-od__div {
    height:     1px;
    background: linear-gradient(90deg, transparent, var(--od-bs) 30%, var(--od-bs) 70%, transparent);
}

/* ─── HERO ───────────────────────────────────────────────────────────────── */
.svc-od__hero {
    position:       relative;
    min-height:     90vh;
    display:        flex;
    align-items:    flex-end;
    padding-bottom: 72px;
    overflow:       hidden;
}

.svc-od__hero-bg {
    position: absolute;
    inset:    0;
    z-index:  0;
}

.svc-od__hero-bg img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

.svc-od__hero-bg::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(150deg, rgba(13,13,13,.96) 0%, rgba(13,13,13,.72) 45%, rgba(13,13,13,.25) 100%);
    z-index:    1;
}

.svc-od__hero-bg::after {
    content:    '';
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    height:     35%;
    background: linear-gradient(to top, var(--od-bg) 0%, transparent 100%);
    z-index:    2;
}

.svc-od__hero-inner {
    position: relative;
    z-index:  2;
    width:    100%;
}

.svc-od__breadcrumbs {
    margin-bottom: 20px;
    font-size:     12px;
    color:         var(--od-muted);
}

.svc-od__hero-content {
    max-width: 1100px;
}

.svc-od__hero-pre {
    display:        block;
    font-size:      10px;
    font-weight:    500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color:          var(--od-soft);
    opacity:        0.55;
    margin-bottom:  18px;
}

.svc-od__hero h1,
.svc-od__hero-title {
    font-family:    var(--od-font);
    font-size:      clamp(28px, 5vw, 72px);
    font-weight:    200;
    line-height:    1.04;
    letter-spacing: -0.025em;
    color:          #fff;
    margin-bottom:  20px;
}

.svc-od__hero-title em {
    font-style: normal;
    color:      var(--od-soft);
}

.svc-od__hero-title strong {
    display:     block;
    font-weight: 600;
    color:       var(--od-soft);
}

.svc-od__hero-sub {
    font-size:     clamp(13px, 1.3vw, 15px);
    font-weight:   300;
    color:         #fff;
    max-width:     480px;
    margin-bottom: 40px;
    line-height:   1.75;
}

.svc-od__hero-cta {
    display:   flex;
    gap:       11px;
    flex-wrap: wrap;
}

/* Stats */
.svc-od__hero-stats {
    position:    absolute;
    right:       0;
    bottom:      72px;
    z-index:     2;
    display:     flex;
    border-left: 1px solid var(--od-border);
}

.svc-od__stat {
    padding:      20px 31px;
    border-right: 1px solid var(--od-border);
    text-align:   center;
}

.svc-od__stat b {
    display:     block;
    font-family: var(--od-font);
    font-size:   28px;
    font-weight: 200;
    color:       var(--od-soft);
    line-height: 1;
}

.svc-od__stat span {
    display:        block;
    font-size:      9px;
    font-weight:    500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color:          var(--od-muted);
    margin-top:     4px;
}

/* ─── КАТЕГОРІЇ ─────────────────────────────────────────────────────────── */
.svc-od__cats {
    display:               grid;
    grid-template-columns: repeat(5, 1fr);
    gap:                   6px;
}

.svc-od__cat {
    position:     relative;
    overflow:     hidden;
    aspect-ratio: 2 / 3;
    display:      block;
    text-decoration: none;
    background:   var(--od-bg-card);
}

.svc-od__cat img {
    width:      100%;
    height:     85%;
    object-fit: cover;
    display:    block;
    transition: transform 0.6s ease, opacity 0.35s;
    opacity:    0.75;
}

.svc-od__cat:hover img {
    transform: scale(1.06);
    opacity:   0.95;
}

.svc-od__cat-ov {
    position:   absolute;
    inset:      0;
    background: linear-gradient(to top, rgba(0,0,0,.9) 0%, transparent 55%);
    transition: 0.28s;
}

.svc-od__cat:hover .svc-od__cat-ov {
    background: linear-gradient(to top, rgba(10,8,8,.95) 0%, rgba(108,78,76,.06) 100%);
}

.svc-od__cat-foot {
    position:        absolute;
    bottom:          0;
    left:            0;
    right:           0;
    padding:         20px 15px 18px;
    display:         flex;
    justify-content: space-between;
    align-items:     center;
}

.svc-od__cat-name {
    font-size:      10px;
    font-weight:    600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          #fff;
    transition:     color 0.22s;
    line-height:    1.3;
}

.svc-od__cat:hover .svc-od__cat-name {
    color: var(--od-soft);
}

.svc-od__cat-arr {
    color:      var(--od-soft);
    opacity:    0;
    transform:  translateX(-6px);
    transition: 0.22s ease;
    flex-shrink: 0;
    display:    flex;
    align-items: center;
}

.svc-od__cat:hover .svc-od__cat-arr {
    opacity:   1;
    transform: translateX(0);
}

/* ─── ПРОЦЕС ─────────────────────────────────────────────────────────────── */
.svc-od__steps {
    display:               grid;
    grid-template-columns: repeat(5, 1fr);
    gap:                   0;
    position:              relative;
}

.svc-od__steps::before {
    content:    '';
    position:   absolute;
    top:        28px;
    left:       10%;
    right:      10%;
    height:     1px;
    background: linear-gradient(90deg, transparent, var(--od-border) 25%, var(--od-border) 75%, transparent);
}

.svc-od__step {
    text-align: center;
    padding:    0 13px;
    position:   relative;
    z-index:    1;
}

.svc-od__step-n {
    width:           56px;
    height:          56px;
    border-radius:   50%;
    border:          1px solid var(--od-border);
    background:      var(--od-bg-alt);
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin:          0 auto 18px;
    font-family:     var(--od-font);
    font-size:       12px;
    font-weight:     500;
    letter-spacing:  0.1em;
    color:           var(--od-soft);
    transition:      0.25s;
}

.svc-od__step:hover .svc-od__step-n {
    border-color: var(--od-accent);
    background:   rgba(108, 78, 76, 0.1);
}

.svc-od__step h3 {
    font-family:    var(--od-font);
    font-size:      11px;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom:  9px;
    color:          #fff;
}

.svc-od__step p {
    font-size:   12px;
    color:       var(--od-muted);
    line-height: 1.6;
}

.svc-od__step-text {
    flex: 1;
}

/* ─── ПРАЙС ──────────────────────────────────────────────────────────────── */
.svc-od__price-wrap {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   4px;
    margin-bottom:         4px;
}

.svc-od__pcard {
    background: var(--od-bg-card);
    padding:    40px 40px 36px;
    border:     1px solid transparent;
    transition: 0.25s;
    position:   relative;
}

.svc-od__pcard:hover {
    border-color: var(--od-border);
}

.svc-od__pcard--feat {
    background:   linear-gradient(140deg, #181210, #130f0e);
    border-color: rgba(108, 78, 76, 0.4) !important;
}

.svc-od__pcard-lbl,
.svc-od__popt-lbl {
    display:        block;
    font-size:      9px;
    font-weight:    600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color:          var(--od-accent);
    margin-bottom:  8px;
}

.svc-od__pcard h3,
.svc-od__popt h3 {
    font-family: var(--od-font);
    font-size:   17px;
    font-weight: 300;
    color:       #fff;
    margin-bottom: 3px;
}

.svc-od__pcard-price {
    font-family: var(--od-font);
    font-size:   48px;
    font-weight: 200;
    color:       var(--od-soft);
    line-height: 1;
    margin:      14px 0 4px;
}

.svc-od__pcard-price sup {
    font-size:      16px;
    vertical-align: super;
    font-weight:    300;
}

.svc-od__pcard-price small {
    font-size:   16px;
    color:       var(--od-muted);
    font-weight: 300;
}

.svc-od__pcard-per {
    font-size:     11px;
    color:         var(--od-muted);
    margin-bottom: 20px;
}

.svc-od__pcard-list,
.svc-od__popt-list {
    list-style:     none;
    display:        flex;
    flex-direction: column;
    gap:            8px;
}

.svc-od__pcard-list li,
.svc-od__popt-list li {
    font-size:   12.5px;
    color:       rgba(255, 255, 255, 0.62);
    display:     flex;
    align-items: baseline;
    gap:         8px;
}

.svc-od__pcard-list li::before {
    content:    '—';
    color:      var(--od-accent);
    flex-shrink: 0;
}

.svc-od__popt-list li {
    font-size: 12px;
    color:     var(--od-muted);
    gap:       6px;
}

.svc-od__popt-list li::before {
    content: '·';
    color:   var(--od-accent);
}

/* Side options */
.svc-od__price-side {
    display:        flex;
    flex-direction: column;
    gap:            4px;
}

.svc-od__popt {
    background: var(--od-bg-card);
    padding:    24px 29px;
    border:     1px solid transparent;
    transition: 0.25s;
    flex:       1;
}

.svc-od__popt:hover {
    border-color: var(--od-border);
}

.svc-od__popt-price {
    font-family: var(--od-font);
    font-size:   30px;
    font-weight: 200;
    color:       var(--od-soft);
    line-height: 1;
    margin:      8px 0 4px;
}

.svc-od__popt-price small {
    font-size:   13px;
    color:       var(--od-muted);
    font-weight: 300;
}

/* Extras bar */
.svc-od__pextras {
    background: var(--od-bg-card);
    padding:    20px 40px;
    display:    grid;
    grid-template-columns: repeat(4, 1fr);
    gap:        11px;
    border:     1px solid transparent;
    transition: 0.25s;
    margin-bottom: 24px;
}

.svc-od__pextras:hover {
    border-color: var(--od-border);
}

.svc-od__pext-lbl {
    display:        block;
    font-size:      9px;
    font-weight:    500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color:          var(--od-muted);
    margin-bottom:  3px;
}

.svc-od__pext-val {
    font-family: var(--od-font);
    font-size:   18px;
    font-weight: 300;
    color:       #fff;
}

.svc-od__pext-val small {
    font-size: 10px;
    color:     var(--od-muted);
}

.svc-od__pext-val--muted {
    font-size:   12px;
    color:       var(--od-muted);
    font-weight: 300;
    padding-top: 2px;
}

.svc-od__price-cta {
    display:     flex;
    align-items: center;
    gap:         20px;
    flex-wrap:   wrap;
}

/* ─── КАЛЬКУЛЯТОР ─────────────────────────────────────────────────────────── */
.svc-od__calc {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   4px;
}

.svc-od__calc-form {
    background:     var(--od-bg-card);
    padding:        40px;
    display:        flex;
    flex-direction: column;
    gap:            20px;
    min-width:      0;
    overflow:       hidden;
}

.svc-od__calc-field {
    display:        flex;
    flex-direction: column;
}

.svc-od__flbl {
    display:        block;
    font-size:      9px;
    font-weight:    600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color:          var(--od-muted);
    margin-bottom:  8px;
}

.svc-od__finput {
    width:         100%;
    background:    #0a0a0a;
    border:        1px solid rgba(255, 255, 255, 0.1);
    color:         #fff;
    font-family:   var(--od-font);
    font-size:     19px;
    font-weight:   300;
    padding:       10px 13px;
    border-radius: var(--od-r);
    outline:       none;
    transition:    0.22s;
    -moz-appearance:    textfield;
    appearance:         textfield;
}

.svc-od__finput::-webkit-inner-spin-button,
.svc-od__finput::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.svc-od__finput:focus {
    border-color: var(--od-accent);
}

/* Radio group */
.svc-od__radios {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
}

.svc-od__rlbl {
    cursor:    pointer;
    min-width: 0;
}

.svc-od__rlbl input {
    display: none;
}

.svc-od__rbtn {
    display:        block;
    text-align:     center;
    padding:        9px 6px;
    font-family:    var(--od-font);
    font-size:      9px;
    font-weight:    600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--od-muted);
    background:     #0a0a0a;
    border:         1px solid rgba(255, 255, 255, 0.1);
    border-right:   none;
    transition:     0.2s;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
}

.svc-od__rlbl:first-child .svc-od__rbtn {
    border-radius: var(--od-r) 0 0 var(--od-r);
}

.svc-od__rlbl:last-child .svc-od__rbtn {
    border-right:  1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0 var(--od-r) var(--od-r) 0;
}

.svc-od__rlbl input:checked + .svc-od__rbtn {
    border-color: var(--od-accent);
    background:   rgba(108, 78, 76, 0.12);
    color:        var(--od-soft);
    z-index:      1;
    position:     relative;
}

/* Checkboxes */
.svc-od__checks {
    display:        flex;
    flex-direction: column;
    gap:            8px;
}

.svc-od__clbl {
    display:      flex;
    align-items:  flex-start;
    gap:          9px;
    cursor:       pointer;
    font-size:    12px;
    color:        rgba(255, 255, 255, 0.55);
    transition:   color 0.2s;
    line-height:  1.5;
}

.svc-od__clbl:hover {
    color: #fff;
}

.svc-od__clbl input[type="checkbox"] {
    display: none;
}

.svc-od__cbox {
    width:           14px;
    height:          14px;
    min-width:       14px;
    border:          1px solid rgba(255, 255, 255, 0.18);
    border-radius:   2px;
    flex-shrink:     0;
    margin-top:      1px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      0.2s;
    background:      #0a0a0a;
}

.svc-od__clbl input:checked ~ .svc-od__cbox {
    background:   var(--od-accent);
    border-color: var(--od-accent);
}

.svc-od__cbox::after {
    content:     '✓';
    font-size:   8px;
    color:       #fff;
    opacity:     0;
    font-weight: 700;
}

.svc-od__clbl input:checked ~ .svc-od__cbox::after {
    opacity: 1;
}

/* Результат */
.svc-od__calc-res {
    background:      #080706;
    border:          1px solid rgba(108, 78, 76, 0.3);
    padding:         40px;
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    overflow:        hidden;
    min-width:       0;
}

.svc-od__res-lbl {
    font-size:      9px;
    font-weight:    600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color:          var(--od-accent);
    margin-bottom:  6px;
}

.svc-od__res-sub {
    font-size:     12px;
    color:         var(--od-muted);
    margin-bottom: 2px;
}

.svc-od__res-price {
    font-family:  var(--od-font);
    font-size:    clamp(36px, 5vw, 72px);
    font-weight:  200;
    color:        var(--od-soft);
    line-height:  1;
    margin-bottom: 2px;
    word-break:   break-word;
}

.svc-od__res-cur {
    font-size:   20px;
    font-weight: 300;
    color:       var(--od-muted);
}

.svc-od__res-note {
    font-size:     10.5px;
    color:         var(--od-muted);
    font-style:    italic;
    margin-bottom: 22px;
    margin-top:    4px;
    overflow:      hidden;
    word-break:    break-word;
}

.svc-od__res-bdown {
    border-top:     1px solid var(--od-bs);
    padding-top:    13px;
    margin-bottom:  22px;
    display:        flex;
    flex-direction: column;
    gap:            7px;
}

.svc-od__res-row {
    display:         flex;
    justify-content: space-between;
    font-size:       12px;
    color:           var(--od-muted);
    gap:             8px;
}

.svc-od__res-row span:last-child {
    color:       rgba(255, 255, 255, 0.7);
    font-weight: 500;
    text-align:  right;
}

/* ─── USP ────────────────────────────────────────────────────────────────── */
.svc-od__usp {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   4px;
}

.svc-od__ucard {
    padding:    31px 26px;
    background: var(--od-bg-card);
    border:     1px solid transparent;
    transition: 0.25s;
    position:   relative;
    overflow:   hidden;
}

.svc-od__ucard::after {
    content:    '';
    position:   absolute;
    top:        0;
    left:       0;
    width:      2px;
    height:     0;
    background: var(--od-accent);
    transition: height 0.35s ease;
}

.svc-od__ucard:hover {
    border-color: var(--od-border);
}

.svc-od__ucard:hover::after {
    height: 100%;
}

.svc-od__ucard h3 {
    font-family:    var(--od-font);
    font-size:      11px;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          #fff;
    margin-bottom:  8px;
}

.svc-od__ucard p {
    font-size:   12px;
    color:       var(--od-muted);
    line-height: 1.7;
}

/* ─── ПОРТФОЛІО ─────────────────────────────────────────────────────────── */
.svc-od__port {
    display:               grid;
    grid-template-columns: repeat(5, 1fr);
    gap:                   4px;
}

.svc-od__pi {
    position:     relative;
    overflow:     hidden;
    cursor:       pointer;
    background:   var(--od-bg-card);
    aspect-ratio: 1 / 1;
}

.svc-od__pi img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform 0.5s ease, opacity 0.28s;
    opacity:    0.8;
}

.svc-od__pi:hover img,
.svc-od__pi:focus img {
    transform: scale(1.06);
    opacity:   1;
}

.svc-od__pi__cap,
.svc-od__pi-cap {
    position:       absolute;
    bottom:         0;
    left:           0;
    right:          0;
    padding:        11px 13px;
    background:     linear-gradient(to top, rgba(0,0,0,.8), transparent);
    font-size:      10px;
    font-weight:    500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          rgba(255, 255, 255, 0.6);
    opacity:        0;
    transform:      translateY(4px);
    transition:     0.22s;
}

.svc-od__pi:hover .svc-od__pi-cap,
.svc-od__pi:focus .svc-od__pi-cap {
    opacity:   1;
    transform: translateY(0);
}

/* Lightbox */
.svc-od__lb {
    position:        fixed;
    inset:           0;
    background:      rgba(0, 0, 0, 0.95);
    z-index:         9999;
    display:         none;
    align-items:     center;
    justify-content: center;
    backdrop-filter: blur(8px);
}

.svc-od__lb:not([hidden]) {
    display: flex;
}

.svc-od__lb img {
    max-width:  88vw;
    max-height: 88vh;
    object-fit: contain;
}

.svc-od__lb-x {
    position:   absolute;
    top:        18px;
    right:      22px;
    background: none;
    border:     none;
    color:      #fff;
    font-size:  26px;
    cursor:     pointer;
    opacity:    0.5;
    transition: 0.2s;
    line-height: 1;
    padding:    4px 8px;
}

.svc-od__lb-x:hover {
    opacity: 1;
}

/* ─── ВІДГУКИ ────────────────────────────────────────────────────────────── */
.svc-od__review {
    display:     flex;
    align-items: center;
    gap:         31px;
    padding:     44px 48px;
    background:  var(--od-bg-card);
    border:      1px solid var(--od-bs);
    flex-wrap:   wrap;
}

.svc-od__review-score {
    font-family: var(--od-font);
    font-size:   72px;
    font-weight: 200;
    color:       var(--od-soft);
    line-height: 1;
    flex-shrink: 0;
}

.svc-od__review-sep {
    width:        1px;
    height:       56px;
    background:   var(--od-bs);
    flex-shrink:  0;
}

.svc-od__review-info {
    display:        flex;
    flex-direction: column;
    gap:            4px;
    flex-shrink:    0;
}

.svc-od__review-stars {
    font-size:      15px;
    color:          var(--od-accent);
    letter-spacing: 2px;
}

.svc-od__review-lbl {
    font-size:      10px;
    font-weight:    500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          var(--od-muted);
}

.svc-od__review-txt {
    font-size:   13.5px;
    font-weight: 300;
    color:       rgba(255, 255, 255, 0.45);
    max-width:   500px;
    line-height: 1.7;
    flex:        1;
    min-width:   180px;
}

/* ─── FAQ ────────────────────────────────────────────────────────────────── */
.svc-od__faq {
    border: 1px solid var(--od-bs);
}

.svc-od__fitem {
    border-bottom: 1px solid var(--od-bs);
}

.svc-od__fitem:last-child {
    border-bottom: none;
}

.svc-od__fq {
    width:           100%;
    background:      none;
    border:          none;
    color:           #fff;
    text-align:      left;
    padding:         18px 29px;
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    gap:             12px;
    cursor:          pointer;
    font-family:     var(--od-font);
    font-size:       13px;
    font-weight:     400;
    transition:      background 0.2s;
}

.svc-od__fq:hover {
    background: var(--od-bg-card);
}

.svc-od__fq[aria-expanded="true"] {
    background: var(--od-bg-card);
    color:      var(--od-soft);
}

.svc-od__fic {
    width:           20px;
    height:          20px;
    min-width:       20px;
    border:          1px solid rgba(255, 255, 255, 0.14);
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    font-size:       13px;
    font-weight:     300;
    color:           var(--od-soft);
    transition:      0.2s;
}

.svc-od__fq[aria-expanded="true"] .svc-od__fic {
    background:  var(--od-accent);
    border-color: var(--od-accent);
    color:       #fff;
    transform:   rotate(45deg);
}

.svc-od__fa {
    padding:     0 29px 15px;
    font-size:   12.5px;
    color:       var(--od-muted);
    line-height: 1.75;
    background:  var(--od-bg-card);
}

/* ─── КОНТАКТИ ───────────────────────────────────────────────────────────── */
.svc-od__contacts {
    display:               grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:                   4px;
}

.svc-od__cb {
    padding:    40px 35px;
    background: var(--od-bg-card);
    min-width:  0;
    overflow:   hidden;
}

.svc-od__cb--dark {
    background: #080706;
}

.svc-od__cb--cta {
    background: linear-gradient(140deg, #1a1210, #100c0b);
    border:     1px solid rgba(108, 78, 76, 0.3);
    display:    flex;
    flex-direction: column;
    justify-content: center;
    gap:        15px;
}

.svc-od__cb h3 {
    font-family:   var(--od-font);
    font-size:     18px;
    font-weight:   200;
    color:         #fff;
    margin-bottom: 13px;
    line-height:   1.25;
}

.svc-od__cb--cta h3 {
    font-size:     20px;
    margin-bottom: 6px;
}

.svc-od__cb-links {
    display:        flex;
    flex-direction: column;
    gap:            11px;
    overflow:       hidden;
}

.svc-od__cb-links a {
    display:     flex;
    align-items: flex-start;
    gap:         9px;
    font-size:   12.5px;
    color:       rgba(255, 255, 255, 0.55);
    text-decoration: none;
    transition:  color 0.2s;
    overflow:    hidden;
    word-break:  break-word;
    min-width:   0;
}

.svc-od__cb-links a:hover {
    color: var(--od-soft);
}

.svc-od__sched {
    list-style:     none;
    display:        flex;
    flex-direction: column;
    gap:            8px;
}

.svc-od__sched li {
    display:         flex;
    justify-content: space-between;
    font-size:       12px;
    color:           var(--od-muted);
    padding-bottom:  8px;
    border-bottom:   1px solid var(--od-bs);
}

.svc-od__sched li:last-child {
    border-bottom: none;
}

.svc-od__sched li span:last-child {
    color:       rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

.svc-od__cb--cta p {
    font-size:   12px;
    color:       var(--od-muted);
    line-height: 1.65;
}

.svc-od__cb-btns {
    display:        flex;
    flex-direction: column;
    gap:            8px;
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════ */

/* ── 1200px ── */
@media (max-width: 1200px) {
    .svc-od-w { padding-inline: 36px; }
    .svc-od__hero-stats { display: none; }
    .svc-od__cats { grid-template-columns: repeat(4, 1fr); }
}

/* ── 1024px ── */
@media (max-width: 1024px) {
    .svc-od-w { padding-inline: 24px; }

    .svc-od__sec { padding: 58px 0; }
    .svc-od__hero { min-height: 88vh; padding-bottom: 48px; }
    .svc-od__hero-title { font-size: clamp(26px, 5vw, 56px); }

    .svc-od__cats { grid-template-columns: repeat(3, 1fr); }

    .svc-od__steps { grid-template-columns: repeat(3, 1fr); row-gap: 26px; }
    .svc-od__steps::before { display: none; }

    .svc-od__price-wrap { grid-template-columns: 1fr; }
    .svc-od__price-side { flex-direction: row; }
    .svc-od__pextras { grid-template-columns: repeat(2, 1fr); padding: 18px 22px; }

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

    .svc-od__usp { grid-template-columns: repeat(2, 1fr); }
    .svc-od__port { grid-template-columns: repeat(4, 1fr); }

    .svc-od__review { padding: 26px; gap: 20px; }
    .svc-od__review-sep { display: none; }

    .svc-od__contacts { grid-template-columns: 1fr 1fr; }
    .svc-od__cb--cta { grid-column: 1 / -1; }
    .svc-od__cb { padding: 26px 22px; }
}

/* ── 768px ── */
@media (max-width: 768px) {
    .svc-od-w { padding-inline: 16px; }
    .svc-od__sec { padding: 40px 0; }
    .svc-od__h2 { font-size: clamp(18px, 5.5vw, 28px); margin-bottom: 22px; letter-spacing: -0.015em; }

    .svc-od__hero { min-height: 100svh; padding-bottom: 36px; }
    .svc-od__hero-title { font-size: clamp(22px, 7vw, 38px); line-height: 1.06; margin-bottom: 15px; }
    .svc-od__hero-pre { font-size: 9px; letter-spacing: 0.2em; margin-bottom: 13px; }
    .svc-od__hero-sub { font-size: 13px; margin-bottom: 24px; max-width: 100%; }
    .svc-od__hero-cta { flex-direction: column; gap: 9px; }
    .svc-od__hero-cta .svc-od-btn { width: 100%; padding: 14px 20px; font-size: 11px; }

    .svc-od__cats { grid-template-columns: repeat(2, 1fr); gap: 3px; }
    .svc-od__cat { aspect-ratio: 3 / 4; }

    .svc-od__steps { grid-template-columns: 1fr; gap: 0; }
    .svc-od__steps::before { display: none; }
    .svc-od__step { display: flex; align-items: flex-start; gap: 18px; text-align: left; padding: 18px 0; border-bottom: 1px solid var(--od-border); }
    .svc-od__step:last-child { border-bottom: none; }
    .svc-od__step-n { margin: 0; flex-shrink: 0; width: 44px; height: 44px; font-size: 12px; }
    .svc-od__step h3 { font-size: 11px; margin-bottom: 5px; }
    .svc-od__step p { font-size: 12px; }

    .svc-od__price-side { flex-direction: column; }
    .svc-od__pcard { padding: 22px 18px; }
    .svc-od__pcard-price { font-size: 36px; }
    .svc-od__pcard-list li { font-size: 12px; }
    .svc-od__popt { padding: 20px 18px; }
    .svc-od__pextras { grid-template-columns: 1fr 1fr; padding: 15px 18px; gap: 11px; }
    .svc-od__pext-val { font-size: 16px; }
    .svc-od__price-cta { flex-direction: column; align-items: stretch; gap: 11px; }
    .svc-od__price-cta .svc-od-btn { width: 100%; }

    .svc-od__calc-form { padding: 22px 18px; gap: 18px; }
    .svc-od__calc-res { padding: 22px 18px; }
    .svc-od__res-price { font-size: 40px; }
    .svc-od__rbtn { font-size: 9px; padding: 10px 4px; letter-spacing: 0.04em; }
    .svc-od__clbl { font-size: 13px; }

    .svc-od__usp { grid-template-columns: 1fr 1fr; }
    .svc-od__ucard { padding: 24px 18px; }

    .svc-od__port { grid-template-columns: repeat(3, 1fr); }

    .svc-od__review { padding: 22px 18px; gap: 13px; flex-direction: column; align-items: flex-start; }
    .svc-od__review-score { font-size: 52px; }
    .svc-od__review-txt { font-size: 12.5px; min-width: 0; }

    .svc-od__fq { padding: 15px 18px; font-size: 13px; }
    .svc-od__fa { padding: 0 18px 15px; font-size: 12.5px; }

    .svc-od__contacts { display: flex; flex-direction: column; gap: 3px; }
    .svc-od__cb { padding: 22px 18px; width: 100%; }
    .svc-od__cb--cta { grid-column: auto; width: 100%; }
    .svc-od__cb h3 { font-size: 16px; margin-bottom: 11px; }
    .svc-od__cb--cta h3 { font-size: 17px; }
    .svc-od__cb-btns { gap: 9px; }
    .svc-od__cb-btns .svc-od-btn { width: 100%; padding: 14px 20px; }
    .svc-od__cb-links a { font-size: 12.5px; }
    .svc-od__sched li { font-size: 12px; }
}

/* ── 480px ── */
@media (max-width: 480px) {
    .svc-od-w { padding-inline: 12px; }
    .svc-od__sec { padding: 30px 0; }
    .svc-od__h2 { font-size: clamp(16px, 5vw, 22px); margin-bottom: 18px; }

    .svc-od__hero { padding-bottom: 26px; }
    .svc-od__hero-pre { display: none; }
    .svc-od__hero-title { font-size: clamp(20px, 7.5vw, 30px); }
    .svc-od__hero-sub { font-size: 12.5px; margin-bottom: 20px; }

    .svc-od__cats { grid-template-columns: 1fr 1fr; gap: 2px; }
    .svc-od__cat { aspect-ratio: 2 / 3; }
    .svc-od__cat-name { font-size: 8.5px; letter-spacing: 0.06em; }
    .svc-od__cat-foot { padding: 13px 11px 11px; }

    .svc-od__pcard { padding: 18px 15px; }
    .svc-od__pcard-price { font-size: 30px; }
    .svc-od__pextras { grid-template-columns: 1fr 1fr; padding: 13px 15px; gap: 9px; }
    .svc-od__pext-val { font-size: 14px; }
    .svc-od__pext-lbl { font-size: 8px; }

    .svc-od__calc-form { padding: 18px 15px; gap: 15px; }
    .svc-od__calc-res { padding: 18px 15px; }
    .svc-od__res-price { font-size: 34px; }
    .svc-od__flbl { font-size: 8px; letter-spacing: 0.2em; }
    .svc-od__finput { font-size: 16px; padding: 9px 12px; }
    .svc-od__radios { grid-template-columns: 1fr; }
    .svc-od__rbtn {
        padding: 11px 10px; font-size: 9px; letter-spacing: 0.07em;
        border-right: 1px solid rgba(255,255,255,.1) !important;
        border-bottom: none; border-radius: 0;
    }
    .svc-od__rlbl:first-child .svc-od__rbtn { border-radius: var(--od-r) var(--od-r) 0 0; }
    .svc-od__rlbl:last-child .svc-od__rbtn { border-bottom: 1px solid rgba(255,255,255,.1) !important; border-radius: 0 0 var(--od-r) var(--od-r); }

    .svc-od__usp { grid-template-columns: 1fr; }
    .svc-od__ucard { padding: 20px 15px; }

    .svc-od__port { grid-template-columns: repeat(2, 1fr); gap: 2px; }

    .svc-od__review { padding: 18px 15px; gap: 9px; }
    .svc-od__review-score { font-size: 42px; }

    .svc-od__fq { padding: 13px 15px; font-size: 12.5px; }
    .svc-od__fa { padding: 0 15px 13px; font-size: 12px; }
    .svc-od__fic { width: 18px; height: 18px; min-width: 18px; font-size: 12px; }

    .svc-od__cb { padding: 18px 15px; }
    .svc-od__cb h3 { font-size: 15px; margin-bottom: 9px; }
    .svc-od__cb--cta h3 { font-size: 15px; }
    .svc-od__cb-btns .svc-od-btn { padding: 13px 16px; font-size: 10.5px; }
}

/* ── 380px ── */
@media (max-width: 380px) {
    .svc-od-w { padding-inline: 10px; }
    .svc-od__h2 { font-size: 17px; }
    .svc-od__hero-title { font-size: 20px; }
    .svc-od__pextras { grid-template-columns: 1fr; }
    .svc-od__cats { gap: 2px; }
    .svc-od__cat-name { font-size: 8px; }
    .svc-od__port { grid-template-columns: 1fr 1fr; }
    .svc-od__fq { font-size: 11.5px; padding: 11px 10px; }
    .svc-od__cb-links a { font-size: 11.5px; }
}