/* =============================================================================
   OWW — HIRE ME PAGE
   assets/css/page-hire.css | Version: 3.7.0
   Scope: .oww-hire / body.oww-page--hire
   ============================================================================= */

/* ── HERO ─────────────────────────────────────────────────────────────────── */

.oww-hire__hero {
    padding:   clamp(6rem, 14vw, 10rem) 0 clamp(4rem, 8vw, 6rem);
    position:  relative;
    overflow:  hidden;
}

.oww-hire__hero::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: radial-gradient(ellipse 60% 50% at 80% 0%, rgba(205,165,100,.07) 0%, transparent 70%);
    pointer-events: none;
}

.oww-hire__hero-eyebrow {
    display:        block;
    font-size:      .65rem;
    font-weight:    700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color:          var(--oww-amber);
    margin-bottom:  var(--oww-space-md);
}

.oww-hire__hero-title {
    font-family: var(--oww-ff-display);
    font-size:   clamp(2.2rem, 6vw, 4.5rem);
    font-weight: 200;
    color:       var(--oww-cream);
    line-height: 1.05;
    margin:      0 0 var(--oww-space-lg);
    max-width:   620px;
}

.oww-hire__hero-copy {
    font-size:   clamp(.95rem, 1.5vw, 1.1rem);
    line-height: 1.75;
    color:       var(--oww-cream-muted);
    max-width:   540px;
    margin:      0 0 var(--oww-space-xl);
}

/* ── SERVICES GRID ────────────────────────────────────────────────────────── */

.oww-hire__services {
    padding:    clamp(3rem, 6vw, 5rem) 0;
    border-top: 1px solid var(--oww-bronze-20);
}

.oww-hire__services-title {
    font-family:   var(--oww-ff-display);
    font-size:     clamp(1.4rem, 3vw, 2rem);
    font-weight:   300;
    color:         var(--oww-cream);
    margin:        0 0 clamp(2rem, 4vw, 3rem);
}

.oww-hire__services-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap:                   1.25rem;
    margin-bottom:         clamp(3rem, 6vw, 5rem);
}

@media (min-width: 768px)  { .oww-hire__services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .oww-hire__services-grid { grid-template-columns: repeat(4, 1fr); } }

/* ── SERVICE CARD ─────────────────────────────────────────────────────────── */

.oww-service-card {
    background:     var(--oww-bg-card);
    border:         1px solid var(--oww-bronze-10);
    border-radius:  var(--oww-radius-md);
    padding:        1.75rem 1.5rem;
    display:        flex;
    flex-direction: column;
    gap:            1rem;
    position:       relative;
    overflow:       hidden;
    transition:     border-color .25s var(--oww-ease-out),
                    transform    .25s var(--oww-ease-out),
                    box-shadow   .25s var(--oww-ease-out);
}

.oww-service-card:hover {
    border-color: var(--oww-bronze-30);
    transform:    translateY(-3px);
    box-shadow:   var(--oww-shadow-md);
}

.oww-service-card::before {
    content:    '';
    position:   absolute;
    top:        0;
    left:       0;
    right:      0;
    height:     2px;
    background: linear-gradient(90deg, var(--oww-amber-deep), transparent);
    opacity:    0;
    transition: opacity .25s var(--oww-ease-out);
}

.oww-service-card:hover::before { opacity: 1; }

.oww-service-card__icon {
    width:  40px;
    height: 40px;
    color:  var(--oww-amber);
    opacity: .85;
}

.oww-service-card__title {
    font-family: var(--oww-ff-display);
    font-size:   clamp(1.2rem, 2.2vw, 1.5rem);
    font-weight: 400;
    color:       var(--oww-cream);
    line-height: 1.2;
    margin:      0;
}

.oww-service-card__desc {
    font-size:   .875rem;
    color:       var(--oww-cream-muted);
    line-height: 1.7;
    margin:      0;
    flex:        1;
}

.oww-service-card__detail {
    list-style:  none;
    padding:     0;
    margin:      0;
    border-top:  1px solid var(--oww-bronze-10);
    padding-top: .85rem;
}

.oww-service-card__detail li {
    display:     flex;
    align-items: center;
    gap:         .5rem;
    font-size:   .78rem;
    color:       var(--oww-cream-muted);
    line-height: 1.5;
    padding:     .2rem 0;
}

.oww-service-card__detail li::before {
    content:    '◆';
    color:      var(--oww-amber);
    font-size:  .45rem;
    flex-shrink: 0;
}

/* ── HOW IT WORKS ─────────────────────────────────────────────────────────── */

.oww-hire__process {
    padding:       clamp(3rem, 6vw, 5rem) 0;
    border-top:    1px solid var(--oww-bronze-20);
    border-bottom: 1px solid var(--oww-bronze-20);
    margin-bottom: clamp(3rem, 6vw, 5rem);
}

.oww-hire__process-title {
    font-family:   var(--oww-ff-display);
    font-size:     clamp(1.4rem, 3vw, 2rem);
    font-weight:   300;
    color:         var(--oww-cream);
    margin:        0 0 clamp(2rem, 4vw, 3rem);
}

.oww-hire__process-steps {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   2rem;
    position:              relative;
}

.oww-hire__process-steps::before {
    content:     '';
    position:    absolute;
    top:         24px;
    left:        calc(33.33% - 1px);
    right:       calc(33.33% - 1px);
    height:      1px;
    background:  linear-gradient(90deg, var(--oww-bronze-20), var(--oww-bronze-20));
    pointer-events: none;
}

@media (max-width: 640px) {
    .oww-hire__process-steps {
        grid-template-columns: 1fr;
    }
    .oww-hire__process-steps::before { display: none; }
}

.oww-hire__step {
    display:        flex;
    flex-direction: column;
    gap:            .85rem;
}

.oww-hire__step-num {
    width:           48px;
    height:          48px;
    border-radius:   50%;
    background:      var(--oww-bg-mid);
    border:          1px solid var(--oww-bronze-30);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-family:     var(--oww-ff-display);
    font-size:       1.3rem;
    font-weight:     300;
    color:           var(--oww-amber);
    flex-shrink:     0;
}

.oww-hire__step-title {
    font-family: var(--oww-ff-display);
    font-size:   1.1rem;
    font-weight: 400;
    color:       var(--oww-cream);
    margin:      0;
}

.oww-hire__step-desc {
    font-size:   .85rem;
    color:       var(--oww-cream-muted);
    line-height: 1.65;
    margin:      0;
}

/* ── AUTHORITY STRIP ──────────────────────────────────────────────────────── */

.oww-hire__authority {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             1.5rem;
    flex-wrap:       wrap;
    padding:         1.5rem;
    background:      var(--oww-bg-mid);
    border:          1px solid var(--oww-bronze-20);
    border-radius:   var(--oww-radius-md);
    margin-bottom:   clamp(3rem, 6vw, 5rem);
    text-align:      center;
}

.oww-hire__authority-item {
    font-size:      .7rem;
    font-weight:    600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:          var(--oww-cream-muted);
    display:        flex;
    align-items:    center;
    gap:            .4rem;
}

.oww-hire__authority-item::before {
    content:    '◆';
    color:      var(--oww-amber);
    font-size:  .4rem;
}

/* ── ENQUIRY CTA ──────────────────────────────────────────────────────────── */

.oww-hire__cta {
    background:    var(--oww-bg-card);
    border:        1px solid var(--oww-bronze-20);
    border-radius: var(--oww-radius-lg);
    padding:       clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem);
    text-align:    center;
    margin-bottom: clamp(3rem, 6vw, 5rem);
    position:      relative;
    overflow:      hidden;
}

.oww-hire__cta::before {
    content:    '';
    position:   absolute;
    top:        0;
    left:       0;
    right:      0;
    height:     2px;
    background: linear-gradient(90deg, transparent, var(--oww-amber-deep) 30%, var(--oww-amber) 50%, var(--oww-amber-deep) 70%, transparent);
}

.oww-hire__cta h2 {
    font-family: var(--oww-ff-display);
    font-size:   clamp(1.6rem, 4vw, 2.5rem);
    font-weight: 300;
    color:       var(--oww-cream);
    margin:      0 0 .75rem;
}

.oww-hire__cta p {
    font-size:   1rem;
    color:       var(--oww-cream-muted);
    max-width:   440px;
    margin:      0 auto 2rem;
    line-height: 1.7;
}

.oww-hire__cta-buttons {
    display:         flex;
    justify-content: center;
    gap:             1rem;
    flex-wrap:       wrap;
}

@media (prefers-reduced-motion: reduce) {
    .oww-service-card { transition: none; }
    .oww-service-card::before { transition: none; }
}