/**
 * Swiftmov design refinement.
 *
 * Applies the transferable rules of the Apple design system: a real display
 * type scale, generous section rhythm, one radius grammar, hairline depth
 * instead of shadow, restrained motion, and 44px touch targets.
 *
 * TWO THINGS THIS DELIBERATELY DOES NOT DO:
 *
 * 1. It never changes a brand colour. Every rule here is size, weight, tracking,
 *    leading, spacing, radius, blur or motion. Where a hairline is needed for
 *    depth it is derived from currentColor, so it takes whatever colour the
 *    surface already uses and introduces no new hue.
 *
 * 2. It does not swap the fonts. The reference specifies SF Pro / Inter, but
 *    Montserrat and Lato are this brand's voice. What transfers is the LADDER
 *    and the RHYTHM, not the typeface.
 */

/* ============================================================
   1. Display type scale

   The theme ran h1 at 36px and h2 at 26px, which is brochure sizing. The
   reference puts hero display at 56px and tile headlines at 40px, with
   tracking tightening as size grows. Scaled fluidly so the jump does not
   break small screens.
   ============================================================ */

.swm-refine h1,
.swm-refine .tp-caption h1 {
    font-size: clamp(34px, 5.4vw, 62px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.swm-refine h2 {
    font-size: clamp(26px, 3.2vw, 40px);
    font-weight: 600;
    line-height: 1.10;
    letter-spacing: -0.022em;
}

.swm-refine h3 {
    font-size: clamp(19px, 1.5vw, 22px);
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -0.014em;
}

.swm-refine h4 { font-weight: 600; line-height: 1.28; letter-spacing: -0.01em; }

/* Balance the rag. A 600/700 heading is wider than the hairline it replaced,
   so two-word titles broke badly ("Cargo" / "Express"). Progressive: older
   browsers ignore it. */
.swm-refine h1,
.swm-refine h2,
.swm-refine h3,
.swm-refine h4 { text-wrap: balance; }

/* ============================================================
   2. Reading pace

   Prose takes the body spec, 17px at 1.47. Card microcopy keeps 14px, because
   the reference has a caption spec for exactly this and inflating grid
   captions would burst a four-column row, but picks up the caption's tighter
   leading and negative tracking.
   ============================================================ */

.swm-refine .inner-padding > p,
.swm-refine .wpb_text_column p,
.swm-refine .entry-content > p {
    font-size: 17px;
    line-height: 1.47;
    letter-spacing: -0.011em;
    max-width: 68ch;
}

.swm-refine .box-icon-small .text p,
.swm-refine .light-text p,
.swm-refine .box-icon p,
.swm-refine .service-item p {
    line-height: 1.43;
    letter-spacing: -0.016em;
}

.swm-refine .inner-padding > p,
.swm-refine .box-icon-small .text p,
.swm-refine .light-text p { text-wrap: pretty; }

.swm-refine .text-center .inner-padding > p { margin-left: auto; margin-right: auto; }

/* ============================================================
   3. Rhythm

   The reference gives sections 80px of vertical padding and asks for real air
   above a headline. This is the change that most separates "premium" from
   "template": cramped vertical spacing is the tell.

   Rows carrying a vc_custom_* class have padding a human chose in the page
   builder, so those are left alone; only the untouched ones are opened up.
   ============================================================ */

.swm-refine .wpb_row:not([class*="vc_custom_"]) {
    padding-top: 80px;
    padding-bottom: 80px;
}

@media (max-width: 767px) {
    .swm-refine .wpb_row:not([class*="vc_custom_"]) {
        padding-top: 48px;
        padding-bottom: 48px;
    }
}

.swm-refine h2 { margin-top: 0; margin-bottom: 28px; }
.swm-refine h3 { margin-bottom: 12px; }
.swm-refine .wpb_content_element { margin-bottom: 28px; }
.swm-refine .inner-padding > p + p { margin-top: 17px; }

/* Grid items need room to read as separate things. */
.swm-refine .box-icon-small,
.swm-refine .box-icon { margin-bottom: 32px; }

/* ============================================================
   4. Card structure

   First attempt here boxed each service item: 28px of padding, an 18px radius
   and a hairline all the way round. On a wide grid that reads well. In THIS
   layout the items sit two-up inside a half-width column, so 56px of
   horizontal padding took the measure down to about ninety pixels and the copy
   laddered one word per line. A card that makes its own text unreadable is a
   worse card.

   So the structure is a rule, not a box: a hairline above each item and space
   below it. It gives the grid the same "this was built" reading without
   spending any horizontal room, which is the constraint that actually governs
   this column.

   The hairline is color-mix(currentColor, transparent), literally the text
   colour at 14%, so it works on the light grid and the dark band alike and
   names no new colour.
   ============================================================ */

.swm-refine .box-icon-small {
    padding-top: 24px;
    border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    transition: border-color .28s ease;
}

.swm-refine .box-icon-small:hover {
    border-top-color: color-mix(in srgb, currentColor 34%, transparent);
}

/* ============================================================
   5. One radius grammar

   The page mixed 2px, 30px, 50% and 100%. The reference allows four: square
   for full-bleed, 8px for compact controls, 18px for cards, pill for actions.
   ============================================================ */

.swm-refine .vc_btn3,
.swm-refine .btn,
.swm-refine button,
.swm-refine input[type="submit"],
.swm-refine .ot-button { border-radius: 9999px; }

.swm-refine input[type="text"],
.swm-refine input[type="email"],
.swm-refine input[type="tel"],
.swm-refine input[type="search"],
.swm-refine textarea,
.swm-refine select { border-radius: 8px; }

.swm-refine .wpb_single_image img,
.swm-refine .vc_single_image-img,
.swm-refine .post-thumb img { border-radius: 18px; }

/* Full-bleed imagery stays rectangular: rounding a corner that runs to the
   edge of the viewport just looks like a mistake. */
.swm-refine .vc_parallax .wpb_single_image img,
.swm-refine [class*="full-width"] .wpb_single_image img,
.swm-refine .rev_slider img { border-radius: 0; box-shadow: none; }

/* ============================================================
   6. Depth

   "Apple uses exactly one drop-shadow, and it is applied to photographic
   imagery, never to cards, never to buttons, never to text." So the one
   shadow goes on content photography and nothing else gets one.
   ============================================================ */

.swm-refine .wpb_single_image img,
.swm-refine .vc_single_image-img {
    box-shadow: rgba(0, 0, 0, .22) 3px 5px 30px 0;
}

.swm-refine .vc_btn3,
.swm-refine .btn,
.swm-refine button,
.swm-refine .box-icon-small,
.swm-refine .wpb_column { box-shadow: none; }

.swm-refine h1,
.swm-refine h2,
.swm-refine h3,
.swm-refine p { text-shadow: none; }

/* ============================================================
   7. Sticky navigation

   The reference floats its bar over content with saturate(180%) blur(20px)
   rather than a solid block, so the page reads as one continuous surface.
   ============================================================ */

.swm-refine .swm-nav-stuck,
.swm-refine .is-sticky #header,
.swm-refine #header.sticky {
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
}

.swm-refine #navigation a,
.swm-refine .main-navigation a,
.swm-refine .nav-menu a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    letter-spacing: -0.01em;
}

/* The header over light content.

   The theme's header is a transparent overlay with WHITE links, which is only
   legible because the homepage opens on a dark photograph. On every inner page
   the backdrop is white, so the navigation measured a contrast ratio of 1.0:
   literally invisible. The theme's own shrink state sets a white background
   without touching the link colour, so it would fail too.

   The surface here is the exact colour the script measured behind the header,
   so the bar matches its page rather than introducing a colour, and the ink is
   the page's own body colour. !important is deliberate and confined to these
   two properties: the theme sets the link colour from an id selector, and a
   navigation nobody can read is not a style preference to lose politely.
   ============================================================ */
.swm-refine header.swm-nav-onlight,
.swm-refine .swm-nav-onlight {
    background-color: color-mix(in srgb, var(--swm-nav-surface, #ffffff) 85%, transparent) !important;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid color-mix(in srgb, var(--swm-nav-ink, #333333) 12%, transparent);
}

/* TOP-LEVEL ITEMS ONLY.
   The first version of this rule used a descendant selector, so the dark ink
   also landed on the dropdown items, which sit on the theme's dark #222 panel:
   measured contrast 1.26, unreadable. The submenu was never the problem, it was
   already white on dark, so the fix is simply not to touch it. Direct-child
   selectors keep the ink on the bar and leave the panel alone. */
.swm-refine .swm-nav-onlight #mainmenu > li > a,
.swm-refine .swm-nav-onlight .nav-menu > li > a,
.swm-refine .swm-nav-onlight .main-navigation > ul > li > a {
    color: var(--swm-nav-ink, #333333) !important;
}

/* No rule for dropdown items on purpose.
   An earlier "belt and braces" reset used color:inherit here. It out-specified
   the theme's own `#mainmenu a { color: #fff }`, so the items inherited the
   generic link red instead: 3.17 against the #222 panel, worse than the bug it
   was meant to guard. The panel was always fine on its own. The correct amount
   of CSS for it is none. */

/* ============================================================
   8. Motion

   Entrance is the one place this layer adds rather than removes: content
   rising a few pixels as it enters is what makes a page feel considered.
   Staggered by position so a grid resolves row by row instead of snapping.

   Opt-in via a class the script adds, so with JavaScript off, or motion
   reduced, the page is simply visible.
   ============================================================ */

.swm-refine .swm-rise {
    opacity: 0;
    transform: translateY(18px);
}

.swm-refine .swm-rise.swm-in {
    opacity: 1;
    transform: none;
    transition: opacity .7s cubic-bezier(.22, 1, .36, 1),
                transform .7s cubic-bezier(.22, 1, .36, 1);
}

/* One micro-interaction for the whole site: a 0.95 press. */
.swm-refine .vc_btn3,
.swm-refine .btn,
.swm-refine button,
.swm-refine input[type="submit"],
.swm-refine .ot-button { transition: transform .18s ease; }

.swm-refine .vc_btn3:active,
.swm-refine .btn:active,
.swm-refine button:active,
.swm-refine input[type="submit"]:active,
.swm-refine .ot-button:active { transform: scale(.95); }

.swm-refine a:focus-visible,
.swm-refine button:focus-visible,
.swm-refine input:focus-visible,
.swm-refine textarea:focus-visible,
.swm-refine select:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* ============================================================
   9. Restraint

   Italic is for quotation, not for interface labels. The service cards used
   italic "View Details", the decorative default that makes a template look
   like a template.
   ============================================================ */

.swm-refine .vc_btn3,
.swm-refine .btn,
.swm-refine .read-more,
.swm-refine .more-link,
.swm-refine .ot-button {
    font-style: normal;
    font-weight: 600;
    letter-spacing: -0.01em;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* The service card's action link. Inline, so it must NOT get the button's
   min-height/flex treatment, only its weight and tracking, otherwise it stops
   sitting on the text baseline. */
.swm-refine .btn-arrow {
    font-style: normal;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* ============================================================
   10. The tracking component opts out

   swm-track.css already implements this system with its own tokens, so the
   global scale above must not reach into it.
   ============================================================ */

.swm-refine .swm-result p,
.swm-refine .swm-form-wrap p {
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    max-width: none;
}

.swm-refine .swm-result h2,
.swm-refine .swm-form__title { font-size: clamp(20px, 3vw, 26px); }
.swm-refine .swm-result h3 { font-size: 16px; letter-spacing: -0.01em; margin: 0; }
.swm-refine .swm-result img,
.swm-refine .swm-map img { box-shadow: none; border-radius: 0; }
.swm-refine .swm-panel,
.swm-refine .swm-head,
.swm-refine .swm-rail { box-shadow: var(--shadow); }

/* ============================================================
   11. Motion preference
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .swm-refine .swm-rise,
    .swm-refine .swm-rise.swm-in { opacity: 1; transform: none; transition: none; }
    .swm-refine .box-icon-small,
    .swm-refine .vc_btn3,
    .swm-refine .btn,
    .swm-refine button { transition: none; }
    .swm-refine .box-icon-small:hover { transform: none; }
}