/* ===========================================================================
   Services page (page-id 63)
   Same authoring convention as post-61/62.css: every rule is scoped to
   .sts-63. The hero uses the shared .sts-page-header treatment, matching the
   About page header.
   =========================================================================== */

/* --------------------------------------------------------------- page ---- */
/* Two rules, as on the other pages: the WP page title <h1> sits OUTSIDE the
   .sts-63 wrapper, so only the body-class rule reaches it. The hero H1 opts
   back in above. */

/* theme default is .site-content{padding-top:40px} - drop it so the hero
   starts flush against the header (the home page does the same) */
body.sts-page-63 .site-content {
    padding-top: 0;
    padding-bottom: 0;
}

/* ===========================================================================
   2. SERVICES GRID
   Three columns. The featured panel is explicitly placed at column 2 spanning
   rows 2-3; the cards auto-flow around it, so the 11th lands on a 5th row.
   Card treatment matches the About page's Why Us grid.
   =========================================================================== */
.sts-63 .sts-element.sts-element-sv-svc-head {
    --display: flex;
    --flex-direction: column;
    --gap: 18px 18px;
    --row-gap: 18px;
    --column-gap: 18px;
    --overflow: hidden;
    --padding-top: 140px;
    --margin-bottom: 26px;
}

.sts-63 .sts-element.sts-element-sv-svc-h .states-side-heading {
    text-align: center;
    text-transform: capitalize;
    white-space: normal;
}

.sts-63 .sts-element.sts-element-sv-svc-b .states-side-heading {
    text-align: center;
    white-space: normal;
    max-width: 620px;
    margin-inline: auto;
}

.sts-63 .sts-element.sts-element-sv-svc {
    --display: block;
    --padding-top: 20px;
    --padding-bottom: 140px;
}

/* mountain backdrop, as on the About page's Why Us section */
.sts-63 .sts-element.sts-element-sv-svc:not(.sts-motion-effects-element-type-background),
.sts-63 .sts-element.sts-element-sv-svc > .sts-motion-effects-container > .sts-motion-effects-layer {
    background-image: url("../images/mountain.webp");
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: cover;
}

/* ===========================================================================
   Services grid
   Four numbered cards a row. At rest a card shows its number, its icon and its
   title; on hover the artwork fades in behind the number, the arrow appears
   and the description opens beneath the title.
   =========================================================================== */
.sts-63 .sts-services-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

.sts-63 .sts-service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    min-height: 420px;
    padding: 24px 22px 26px;
    border-radius: 22px;
    /* opaque, not translucent: the section sits on the mountain backdrop and
       the resting card in the design reads as a flat dark panel over it */
    background-color: #141414;
    border: 1px solid #FFFFFF0A;
    overflow: hidden;
    text-align: left;
    text-decoration: none;
    transition: border-color .4s ease, transform .4s ease, background-color .4s ease;
}

.sts-63 .sts-service-card:hover {
    border-color: #FFFFFF3D;
    background-color: rgba(26, 26, 26, .92);
    transform: translateY(-6px);
}

/* ---- artwork, revealed on hover ---- */
/* It fills the top of the card, where the number sits, so the two cross-fade:
   the number leaves as the artwork arrives. */
.sts-63 .sts-service-card__art {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 52%;
    background-image: url("../images/card-bg.webp");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0;
    transition: opacity .45s ease;
    pointer-events: none;
}

.sts-63 .sts-service-card:hover .sts-service-card__art { opacity: 1; }

/* ---- number ---- */
.sts-63 .sts-service-card__num {
    position: relative;
    color: #ffffff;
    font-size: clamp(30px, 2.6vw, 44px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.02em;
    transition: opacity .35s ease;
}

.sts-63 .sts-service-card:hover .sts-service-card__num { opacity: 0; }

/* ---- arrow, revealed on hover ---- */
.sts-63 .sts-service-card__arrow {
    position: absolute;
    top: 22px;
    right: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: var(--color-primary, #f25b09);
    color: #ffffff;
    opacity: 0;
    transform: scale(.7);
    transition: opacity .35s ease, transform .35s ease;
    pointer-events: none;
}

.sts-63 .sts-service-card__arrow svg { width: 20px; height: 20px; }

.sts-63 .sts-service-card:hover .sts-service-card__arrow {
    opacity: 1;
    transform: scale(1);
}

/* ---- foot: icon, title, description ---- */
.sts-63 .sts-service-card__body {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
}

.sts-63 .sts-service-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(160deg, #F5701F 0%, #C83C00 100%);
    color: #ffffff;
}

.sts-63 .sts-service-card__icon svg { width: 19px; height: 19px; }

.sts-63 .sts-service-card__title {
    color: #ffffff;
    font-size: clamp(15px, 1.15vw, 18px);
    font-weight: 500;
    line-height: 1.3;
}

/* Opened with max-height rather than the 0fr grid trick: the copy is a bare
   text node, and an anonymous grid item cannot be collapsed the way a real
   child can. The cap only has to exceed the tallest description. */
.sts-63 .sts-service-card__text {
    display: block;
    max-height: 0;
    overflow: hidden;
    color: #FFFFFFA6;
    font-size: 13px;
    line-height: 1.6;
    opacity: 0;
    transition: max-height .45s ease, opacity .35s ease, margin-top .45s ease;
}

.sts-63 .sts-service-card:hover .sts-service-card__text {
    max-height: 200px;
    opacity: 1;
}

@media (max-width: 1200px) {
    .sts-63 .sts-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Touch has no hover, so the cards would never open. There they show their
   artwork and copy from the start instead. */
@media (hover: none) {
    .sts-63 .sts-service-card__num { opacity: 0; }
    .sts-63 .sts-service-card__art { opacity: 1; }
    .sts-63 .sts-service-card__text { max-height: 200px; opacity: 1; }
    .sts-63 .sts-service-card__arrow { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
    .sts-63 .sts-services-grid { grid-template-columns: minmax(0, 1fr); }
    .sts-63 .sts-service-card { min-height: 320px; }
}
/* the icon nudges up; it stays white since the gradient is already orange */
.sts-63 .sts-service-card:hover .sts-service-card__icon {
    transform: translateY(-2px);
}
.sts-63 .sts-service-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 12px;
    width: 100%;
}
.sts-63 .sts-service-card__title,
.sts-63 h3.sts-service-card__title {
    color: #ffffff;
    font-size: clamp(17px, 1.2vw, 20px);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -.01em;
    text-transform: capitalize;
}

.sts-63 .sts-service-card__text {
    color: #FFFFFF99;
    font-size: 14px;
    line-height: 1.65;
    transition: color .4s ease;
}

.sts-63 .sts-service-card:hover .sts-service-card__text { color: #FFFFFFD9; }

/* ------------------------------------------------------------- tablet ---- */
@media (max-width: 1024px) {
    .sts-63 .sts-element.sts-element-sv-svc-head { --padding-top: 96px; }
    .sts-63 .sts-element.sts-element-sv-svc { --padding-bottom: 96px; }

    /* two columns: the panel spans the full row instead of a centre column */
    .sts-63 .sts-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }}

/* ------------------------------------------------------------- mobile ---- */
@media (max-width: 767px) {
    .sts-63 .sts-element.sts-element-sv-svc-head { --padding-top: 70px; }
    .sts-63 .sts-element.sts-element-sv-svc { --padding-bottom: 70px; }

    .sts-63 .sts-services-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .sts-63 .sts-service-card {
        padding: 28px 24px 30px;
        gap: 28px;
    }}

/* ===========================================================================
   Section headings: every H2 renders at the same 92px display size, matching
   the About page. The hero H1 caps higher, so the hierarchy still reads.
   =========================================================================== */
.sts-63 .sts-element .states-side-heading:is(h2),
.sts-63 h2.states-side-heading {
    font-size: clamp(34px, 5.6vw, 92px);
    line-height: 1.0;
}

@media (max-width: 767px) {
    .sts-63 .sts-element .states-side-heading:is(h2),
    .sts-63 h2.states-side-heading {
        font-size: clamp(30px, 8.4vw, 46px);
    }
}

/* =======================================================================
   3. APPS WE'VE BUILT - ported from the home page (post-61.css).
   Ids are prefixed sv-ap- so these rules cannot collide with the home
   page instance of the same section.
   ======================================================================= */
.sts-63 .sts-element.sts-element-sv-ap-74b6ce{--display:flex;--padding-top:55px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}
.sts-63 .sts-element.sts-element-sv-ap-74b6ce:not(.sts-motion-effects-element-type-background), .sts-63 .sts-element.sts-element-sv-ap-74b6ce > .sts-motion-effects-container > .sts-motion-effects-layer{background-color:#FFFFFF;}
.sts-63 .sts-element.sts-element-sv-ap-695be2{--display:flex;--overflow:hidden;}
.sts-63 .sts-element.sts-element-sv-ap-5f5c86 .states-side-heading{text-transform: capitalize;white-space:normal;color:#000000;}
.sts-63 .sts-element.sts-element-sv-ap-appsbo .states-side-heading{text-align:left;text-transform:none;color:rgba(0,0,0,0.6);white-space:normal;max-width:520px;margin-top:14px;}
.sts-63 .sts-element.sts-element-sv-ap-2a9147{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}
.sts-63 .sts-element.sts-element-sv-ap-1e18f2{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:flex-end;--gap:12px 282px;--row-gap:12px;--column-gap:282px;--overflow:hidden;}
.sts-63 .sts-element.sts-element-sv-ap-5c7708 .states-side-heading{font-weight: 500;line-height:0.7em;white-space:normal;color:#00000066;}
.sts-63 .sts-element.sts-element-sv-ap-718899{text-align:left;}
.sts-63 .sts-element.sts-element-sv-ap-ee73e5{--display:flex;--gap:30px 30px;--row-gap:30px;--column-gap:30px;--overflow:hidden;}
.sts-63 .sts-element.sts-element-sv-ap-53fa9b{text-align:left;}
/* Section top spacing (replaces removed [ 0X ] eyebrow blocks) */
.sts-63 .sts-element.sts-element-639882bf,
.sts-63 .sts-element.sts-element-58fe31b2,
.sts-63 .sts-element.sts-element-16fd7af7,
.sts-63 .sts-element.sts-element-sv-ap-74b6ce,
.sts-63 .sts-element.sts-element-24aeff4f,
.sts-63 .sts-element.sts-element-71847952,
.sts-63 .sts-element.sts-element-1af57dff,
.sts-63 .sts-element.sts-element-5649c808,
.sts-63 .sts-element.sts-element-4025e600,
.sts-63 .sts-element.sts-element-30e3cf4b,
.sts-63 .sts-element.sts-element-64a73c19{--padding-top:120px}
@media (max-width:767px) {
    .sts-63 .sts-element.sts-element-sv-ap-74b6ce{--padding-top:30px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}
    .sts-63 .sts-element.sts-element-sv-ap-21a4f0 .posts-grid{column-gap:8px;row-gap:8px;}
    .sts-63 .sts-element.sts-element-sv-ap-21a4f0 .portfolio-columns{column-gap:8px;row-gap:8px;}
    .sts-63 .sts-element.sts-element-sv-ap-21a4f0 .portfolio--masonry{column-gap:8px;row-gap:8px;}
    .sts-63 .sts-element.sts-element-sv-ap-21a4f0 .states-side-archive-portfolio .columns-2{margin-top:0px;}
    .sts-63 .sts-element.sts-element-sv-ap-53fa9b{text-align:center;}
}
@media (min-width:768px) {
    .sts-63 .sts-element.sts-element-sv-ap-1e18f2{--width:auto;}
}

/* ===========================================================================
   4. FREQUENTLY ASKED QUESTIONS
   Uses the theme's states-side-accordion widget, which ships its own open/close
   JS (frontend/element_ready/states-side-accordion.default) and styling.
   =========================================================================== */
.sts-63 .sts-element.sts-element-sv-faq {
    --display: flex;
    --flex-direction: column;
    --gap: 46px 46px;
    --row-gap: 46px;
    --column-gap: 46px;
    --overflow: hidden;
    --padding-top: 130px;
    --padding-bottom: 140px;
}

/* 18ch forced mid-word breaks on "FREQUENTLY" - let the line find its own
   wrap and only guard against very long words */
.sts-63 .sts-element.sts-element-sv-faq-h .states-side-heading {
    text-align: center;
    text-transform: capitalize;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

.sts-63 .sts-element/* matches the home page FAQ section's --content-width */
.sts-element-sv-faq-a {
    width: 100%;
    max-width: 856px;
    margin-inline: auto;
}

/* light band, so heading and accordion copy run dark */
.sts-63 .sts-element.sts-element-sv-faq:not(.sts-motion-effects-element-type-background),
.sts-63 .sts-element.sts-element-sv-faq > .sts-motion-effects-container > .sts-motion-effects-layer {
    background-color: #FFFFFF;
}

.sts-63 .sts-element.sts-element-sv-faq-h .states-side-heading { color: #000000; }

.sts-63 .states-side-accordion__title {
    color: #000000;
    font-size: clamp(17px, 1.3vw, 21px);
    line-height: 1.35;
}

.sts-63 .states-side-accordion__content p {
    color: rgba(0, 0, 0, .68);
    font-size: 15px;
    line-height: 1.65;
    margin: 0;
}

/* the open item keeps the theme's orange fill, so its copy stays white */
.sts-63 .states-side-accordion__item.open .states-side-accordion__title,
.sts-63 .states-side-accordion__item.open .states-side-accordion__content p {
    color: #ffffff;
}

@media (max-width: 767px) {
    .sts-63 .sts-element.sts-element-sv-faq {
        --padding-top: 70px;
        --padding-bottom: 80px;
        --gap: 30px 30px;
        --row-gap: 30px;
    }
    .sts-63 .sts-element.sts-element-sv-faq-h .states-side-heading { max-width: 100%; }
}

/* ===========================================================================
   5. CLOSING CTA
   =========================================================================== */
.sts-63 .sts-element.sts-element-sv-cta {
    --display: flex;
    --flex-direction: column;
    --gap: 30px 30px;
    --row-gap: 30px;
    --column-gap: 30px;
    --overflow: hidden;
    --padding-top: 150px;
    --padding-bottom: 60px;
}

.sts-63 .sts-element.sts-element-sv-cta-h .states-side-heading {
    text-align: center;
    font-size: clamp(38px, 5.6vw, 92px);
    line-height: .98em;
    text-transform: capitalize;
    white-space: normal;
}

.sts-63 .sts-element.sts-element-sv-cta-b .states-side-heading {
    text-align: center;
    white-space: normal;
    max-width: 640px;
    margin-inline: auto;
}

.sts-63 .sts-element.sts-element-sv-cta-btn { text-align: center; }

@media (max-width: 767px) {
    .sts-63 .sts-element.sts-element-sv-cta {
        --padding-top: 90px;
        --padding-bottom: 50px;
    }
}

/* --------------------------------------------------------------- hero ---- */
/* The artwork is 1905x909 in a much taller hero, so object-cover crops the
   sides. The phone sits just left of centre, so centring keeps it in frame at
   every width. */
.sts-63 .sts-page-header .entry-thumbnail img {
    object-position: center center;
}

/* 0deg runs bottom-to-top: solid black at the foot, clear at the head, so the
   bottom-aligned copy sits on the darkest part and the artwork is untouched
   above it. Scoped here rather than in page-header.css, so the other hero
   pages keep the shared overlay. */
.sts-63 .sts-page-header .overlay {
    background-image: linear-gradient(0deg, #000000, #00000000);
}