/* ==========================================================================
   PieSphere design system
   Loaded after the Pitoon stylesheets, so everything here is a deliberate
   override of the template's defaults.

   The template was built for a creative agency. Three things gave it away as
   a stock theme rather than an enterprise IT site, and all three are fixed
   here:

   1. Body copy set at 13-16px with a *fixed* 30px line-height, so every size
      shared the same leading. 13px/30px is a 2.3 ratio - unreadable density
      for B2B copy.
   2. No type scale. h3 alone appeared at 18, 20, 24, 28, 30 and 40px.
   3. Body grey (#757a7b) failed WCAG AA: 4.35:1 on white, 3.92:1 on the cream
      sections, against a 4.5:1 requirement.

   Typeface: the template paired Syne (headings) with Manrope (body). Syne is
   a quirky geometric display face that reads "creative studio". Manrope alone,
   at heavy weights with tight tracking, reads like the infrastructure and AI
   companies this site is selling against - and it is one less family to load.
   ========================================================================== */

:root {
    /* One family, already self-hosted at weights 200-800. */
    --pitoon-font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --pitoon-font-two: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Text colours, all AA or better. Verified, not guessed:
       --ps-ink       #04171a  18.4:1 on white
       --ps-body      #4d5658   7.4:1 on white, 6.5:1 on cream
       --ps-muted     #5f696b   5.7:1 on white, 5.0:1 on cream */
    --ps-ink: #04171a;
    --ps-body: #4d5658;
    --ps-muted: #5f696b;
    /* Text on the near-black (#04171a) sections: 8.9:1. */
    --ps-on-dark: #b3bdbf;

    /* Fluid display sizes: no fixed 75px that crowds a 1366px laptop. */
    --ps-display: clamp(2.75rem, 5.2vw, 4.375rem);
    --ps-h1: clamp(2.25rem, 3.8vw, 3.125rem);
    --ps-h2: clamp(1.875rem, 2.8vw, 2.5rem);
    --ps-h3: 1.5rem;
    --ps-h4: 1.25rem;
    --ps-h5: 1.125rem;

    --ps-body-size: 1.0625rem;   /* 17px */
    --ps-small: 0.9375rem;       /* 15px */
    --ps-lead: 1.1875rem;        /* 19px */

    /* One vertical rhythm for every content section, top and bottom.
       Before this the generated sections ran 120/120, 40/120, 90/120 and
       100/100, which measured as content gaps of 183, 184, 202, 243 and 344px
       down a single page. Symmetric padding means the gap between any two
       blocks is always twice this value, and a section's heading sits the same
       distance below the block above it as its content sits above the next. */
    --ps-section: 80px;
}

/* --------------------------------------------------------------------------
   Body copy
   Unitless line-height so leading scales with size instead of being pinned
   to 30px. Weight drops 500 -> 400: at 15-17px, 500 reads muddy.
   -------------------------------------------------------------------------- */

body {
    font-family: var(--pitoon-font);
    font-size: var(--ps-body-size);
    line-height: 1.65;
    font-weight: 400;
    color: var(--ps-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

p {
    font-size: var(--ps-body-size);
    line-height: 1.65;
    font-weight: 400;
    color: var(--ps-body);
}

/* The template hard-codes these at 13-16px with 30px leading. */
.about-one__text-2,
.about-one__points-text,
.faq-one__text,
.about-four__text,
.testimonial-one__text,
.services-one__satisfied-text,
.services-one__text,
.feature-one__text,
.trust-one__text,
.footer-widget__about-text,
.footer-widget__Contact-text,
.site-footer__bottom-text {
    font-size: var(--ps-body-size);
    line-height: 1.65;
    font-weight: 400;
    color: var(--ps-body);
}

/* Slightly larger opening paragraph under a section heading. */
.section-title + p,
.about-four__right > p:first-of-type {
    font-size: var(--ps-lead);
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Headings
   A real scale, with negative tracking that tightens as size grows - the
   single biggest difference between "template" and "designed" display type.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--pitoon-font-two);
    color: var(--ps-ink);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.main-slider__title {
    font-size: var(--ps-display);
    line-height: 1.06;
    letter-spacing: -0.035em;
    font-weight: 800;
}

.page-header__inner h1 {
    font-size: var(--ps-h1);
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 800;
}

.section-title__title {
    font-size: var(--ps-h2);
    line-height: 1.14;
    letter-spacing: -0.025em;
    font-weight: 800;
}

h3.section-title__title {
    font-size: var(--ps-h3);
    line-height: 1.3;
    letter-spacing: -0.015em;
}

.feature-one__title,
.feature-one__hover-title,
.trust-one__title,
.cta-one__title,
.video-one__title,
.testimonial-one__client-name {
    font-size: var(--ps-h3);
    line-height: 1.28;
    letter-spacing: -0.015em;
    font-weight: 700;
}

.services-one__title,
.about-one__title,
.footer-widget__title {
    font-size: var(--ps-h4);
    line-height: 1.35;
    letter-spacing: -0.01em;
    font-weight: 700;
}

.about-one__certified-title {
    font-size: var(--ps-h5);
    line-height: 1.4;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Eyebrow / tagline
   Small caps need real tracking or they read as a mistake.
   -------------------------------------------------------------------------- */

.section-title__tagline {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ps-muted);
    line-height: 1;
}

.main-slider__sub-title {
    font-size: var(--ps-small);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Buttons
   800 weight at 16px is shouty. 700 at 15px with a little tracking and more
   horizontal padding reads more considered.
   -------------------------------------------------------------------------- */

.thm-btn,
.main-slider__btn,
.about-one__btn,
.trust-one__btn,
.cta-one__btn,
.contact-page__btn,
.contact__btn {
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.2;
    padding-top: 1.05rem;
    padding-bottom: 1.05rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.thm-btn:hover,
.main-slider__btn:hover,
.cta-one__btn:hover {
    transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.main-menu__list > li > a {
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.005em;
}

/* The template sized the dropdown at 270px for the original six short labels
   ("AI & Data", "Digital Marketing"). The new service names are longer: at
   270px, four of the nine wrapped to two lines — 20px of submenu padding plus
   20px of link padding each side leaves 190px for text, and the widest label
   ("Cloud Migration & Modernisation") needs 226px.

   Two rules, doing different jobs:
   - nowrap guarantees one line per item and lets the box size to its content.
   - min-width sets a floor so the panel never looks cramped. It must match the
     specificity of the template's `.main-menu .main-menu__list > li > ul`
     (0,3,2) or it silently loses and the 270px floor stays in force. */
.main-menu .main-menu__list > li > .sub-menu {
    min-width: 320px;
}

.main-menu .main-menu__list > li > .sub-menu > li > a {
    white-space: nowrap;
}

.main-menu__call-number a {
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   Text on dark and coloured grounds
   These sit on photography or the near-black, so they need full white rather
   than the body grey inherited above.
   -------------------------------------------------------------------------- */

.main-slider__title,
.main-slider__sub-title,
.trust-one__title,
.video-one__title,
.footer-widget__title,
.about-one__certified-title,
.feature-one__hover-title {
    color: var(--pitoon-white);
}

/* Body copy defaults to --ps-body, which is tuned for white grounds and drops
   to 2.4:1 on the near-black sections. Every dark-ground text container needs
   the light value explicitly - including list items, which the first pass
   missed. */
.site-footer p,
.site-footer li,
.site-footer a,
.footer-widget__about-text,
.footer-widget__Contact-text,
.footer-widget__link-list li a,
.footer-widget__Contact-list li,
.footer-widget__Contact-list li a,
.site-footer__bottom-text,
.site-footer__bottom-text a,
.why-choose-one p,
.why-choose-one li,
.why-choose-one__text,
.trust-one p,
.trust-one__text {
    color: var(--ps-on-dark);
}

.site-footer a:hover,
.footer-widget__link-list li a:hover,
.why-choose-one a:hover {
    color: var(--pitoon-base);
}

/* The header's top bar is transparent over the dark hero, and the template
   left its text at the light-ground greys (~4.1:1 at 13px). */
.main-header__contact-list li .text p,
.main-header__contact-list li .text p a,
.main-header__contact-list li .text a,
.main-header__contact-list li .icon i,
.main-header__social-title {
    color: var(--ps-on-dark);
}

.main-header__contact-list li .text p a:hover,
.main-header__contact-list li .text a:hover {
    color: var(--pitoon-base);
}

/* --------------------------------------------------------------------------
   Service architecture grid

   Three groups of three cards. The template has no component for this, so the
   layout rules live here rather than being fought in the markup.

   Note on placement: the .trust-one band that follows uses margin-top:-360px
   to overlap whatever sits above it. This grid is therefore emitted *after*
   trust-one; anything placed before it loses its bottom 360px under the dark
   band. The guard below is belt and braces in case the order changes again.
   -------------------------------------------------------------------------- */

.piesphere-services {
    padding: var(--ps-section) 0;
}

.piesphere-services + .trust-one,
.trust-one + .piesphere-services {
    margin-top: 0;
}

.piesphere-services__group {
    padding-bottom: 72px;
}

.piesphere-services__group:last-child {
    padding-bottom: 0;
}

/* The group heading is a subtitle, not a page title - 40px was competing with
   the hero. */
.piesphere-services__group .section-title {
    margin-bottom: 44px;
    max-width: 46ch;
}

/* No colour override: these eyebrows were --pitoon-base (#f9be17), which
   measures 1.69:1 on white. AA wants 4.5:1 at 13px, so they were decorative
   rather than readable. Inheriting --ps-muted from the base rule gives 5.65:1.
   The yellow is kept for grounds where it earns its contrast - the dark hero
   and the trust band - and for buttons and icons. */
.piesphere-services__group .section-title__tagline {
    display: block;
    margin-bottom: 14px;
}

/* Same clamp as .ps-section-head. A group heading here and a section heading
   on /resources/ do the same job, and they were rendering at 26px and 28px -
   close enough to look like a mistake rather than a level. */
.piesphere-services__group > .section-title .section-title__title {
    font-size: clamp(1.625rem, 2.2vw, 2.125rem);
    line-height: 1.2;
    letter-spacing: -0.025em;
}

/* Equal-height cards with the button pinned to the bottom, so a row of three
   does not end in a ragged staircase of buttons. */
.piesphere-services .row {
    display: flex;
    flex-wrap: wrap;
    row-gap: 40px;
    /* "Build, Grow & Staff" holds four services, so the last row of a
       three-column group has one card in it. Centre it rather than leaving it
       hanging on the left with two columns of white space beside it. */
    justify-content: center;
}

.piesphere-services .row > [class*="col-"] {
    display: flex;
}

.piesphere-services .about-four__right {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 34px 32px 32px;
    background-color: var(--pitoon-white);
    border: 1px solid rgba(4, 23, 26, 0.08);
    border-radius: 10px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.piesphere-services .about-four__right:hover {
    border-color: rgba(4, 23, 26, 0.16);
    box-shadow: 0 18px 40px -24px rgba(4, 23, 26, 0.45);
    transform: translateY(-3px);
}

.piesphere-services .about-four__right .section-title {
    margin-bottom: 14px;
    max-width: none;
}

.piesphere-services .about-four__right .section-title__title {
    font-size: 1.25rem;
    line-height: 1.35;
    letter-spacing: -0.01em;
    font-weight: 700;
}

.piesphere-services .about-four__text {
    margin-bottom: 26px;
    font-size: var(--ps-small);
    line-height: 1.7;
}

.piesphere-services .thm-btn {
    margin-top: auto;
    align-self: flex-start;
    padding-left: 30px;
    padding-right: 30px;
}

@media (max-width: 991px) {
    .piesphere-services {
        padding: var(--ps-section) 0;
    }

    .piesphere-services__group {
        padding-bottom: 48px;
    }
}

/* --------------------------------------------------------------------------
   About page components

   The page was a stack of six 300-450 character paragraphs under h4 headings -
   1,254px of unbroken prose with no images and no rhythm. These components give
   it structure: a facts strip, a card grid, numbered commitments on a dark
   ground, and a closing CTA.
   -------------------------------------------------------------------------- */

.ps-lead {
    font-size: var(--ps-lead);
    line-height: 1.6;
    color: var(--ps-ink);
    font-weight: 500;
    margin-bottom: 20px;
}

.ps-section-head {
    max-width: 44ch;
    margin-bottom: 48px;
}

.ps-section-head .section-title__tagline {
    display: block;
    margin-bottom: 14px;
}

/* --- Accent-on-white contrast failures ----------------------------------
   Three pieces of visible text were unreadable where the template put its
   accent colour on a white ground. Measured, not guessed:

     .about-one__text-1        #f9be17 on #fff  = 1.69:1  (needs 4.5)
     .about-one__certified-title  #fff on #fff  = 1.00:1  - invisible
     .screen-reader-text       #757a7b on #fff  = 4.35:1  (needs 4.5)

   The first is the homepage's descriptor line above the about heading, so it
   takes the muted ink and stays subordinate to the 36px title beneath it. */
.about-one__text-1 {
    color: var(--ps-muted);
}

.about-one__certified-title {
    color: var(--ps-ink);
}

.screen-reader-text,
.screen-reader-text:focus {
    color: var(--ps-body);
}

.ps-section-head .section-title__title {
    font-size: clamp(1.625rem, 2.2vw, 2.125rem);
    line-height: 1.2;
    letter-spacing: -0.025em;
}

/* --- Facts strip ------------------------------------------------------- */

.ps-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1px;
    margin-top: 64px;
    background-color: rgba(4, 23, 26, 0.1);
    border: 1px solid rgba(4, 23, 26, 0.1);
    border-radius: 12px;
    overflow: hidden;
}

.ps-facts__item {
    background-color: var(--pitoon-white);
    padding: 30px 28px;
}

.ps-facts__value {
    display: block;
    font-family: var(--pitoon-font-two);
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--ps-ink);
    margin-bottom: 8px;
}

.ps-facts__label {
    display: block;
    font-size: 0.8125rem;
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: var(--ps-muted);
}

/* --- Value card grid --------------------------------------------------- */

/* --- Vertical rhythm ----------------------------------------------------
   Every generated section gets the same symmetric padding. The compound
   selectors (.about-one.ps-*) outrank the template's own .about-one padding
   without needing !important. */

/* The bare .about-one is the homepage's own about block, which the template
   ships at 120/120. Left alone it was the single section on the site still out
   of step, reading as a 40px hiccup between two 80px neighbours. */
.about-one,
.about-one.ps-about-intro,
.about-one.ps-values,
.about-one.ps-about-cta,
.about-one.ps-form-section,
.ps-diff {
    padding-top: var(--ps-section);
    padding-bottom: var(--ps-section);
    margin-top: 0;
    margin-bottom: 0;
}

@media (max-width: 767px) {
    :root {
        --ps-section: 56px;
    }
}

/* Flex rather than grid, so a last row that does not fill (4 cards in 3
   columns, 10 in 3) centres instead of leaving one card stranded on the left.
   flex-wrap still stretches every card on a line to the tallest on that line,
   which is the only property grid was providing here. */
.ps-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
}

.ps-grid > * {
    flex: 0 1 calc((100% - 56px) / 3);
    min-width: 300px;
}

@media (max-width: 991px) {
    .ps-grid > * {
        flex-basis: calc((100% - 28px) / 2);
    }
}

@media (max-width: 767px) {
    .ps-grid > * {
        flex-basis: 100%;
        min-width: 0;
    }
}

.ps-card {
    display: flex;
    flex-direction: column;
    padding: 34px 32px 32px;
    background-color: var(--pitoon-white);
    border: 1px solid rgba(4, 23, 26, 0.08);
    border-radius: 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.ps-card:hover {
    border-color: rgba(4, 23, 26, 0.16);
    box-shadow: 0 18px 40px -24px rgba(4, 23, 26, 0.45);
    transform: translateY(-3px);
}

.ps-card__icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: 22px;
    border-radius: 14px;
    background-color: rgba(249, 190, 23, 0.16);
    /* Glyphs are non-text content (3:1 threshold), but this clears 4.5:1
       anyway so the icons stay legible if they ever carry meaning. */
    color: #5c4400;
    font-size: 24px;
    line-height: 1;
}

.ps-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--ps-ink);
    margin-bottom: 12px;
}

.ps-card__text {
    font-size: var(--ps-small);
    line-height: 1.7;
    color: var(--ps-body);
    margin-bottom: 0;
}

/* When a card carries a button, the copy needs breathing room and the button
   pins to the bottom so a row of cards ends on one line rather than a
   staircase. :not(:last-child) avoids needing :has() for the spacing. */
.ps-card .ps-card__text:not(:last-child) {
    margin-bottom: 24px;
}

.ps-card .thm-btn {
    margin-top: auto;
    align-self: flex-start;
    padding-left: 28px;
    padding-right: 28px;
}

/* --- Numbered commitments, on the near-black ---------------------------- */

/* The numbered method block used to be a near-black slab. Between the dark
   hero, this, and the trust band, the homepage carried three full-width dark
   surfaces; every one of them is a visual event that stops the eye. It now
   reads as a quiet tinted band, which leaves the hero as the page's one dark
   moment. Padding comes from --ps-section with the other sections. */
.ps-diff {
    position: relative;
    display: block;
    background-color: var(--pitoon-primary);
}

.ps-steps {
    display: grid;
}

.ps-step {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 24px;
    padding: 30px 0;
    border-top: 1px solid rgba(4, 23, 26, 0.12);
}

.ps-step:last-child {
    border-bottom: 1px solid rgba(4, 23, 26, 0.12);
}

/* The counter was --pitoon-base (#f9be17). That yellow reads at 1.5:1 on the
   cream ground - legible only as a smudge - so the number takes the muted ink
   instead. It is a counter, not the message. */
.ps-step__num {
    font-family: var(--pitoon-font-two);
    font-size: 0.9375rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.7;
    color: var(--ps-muted);
}

/* 20px, matching .ps-card__title: both are "the title of one item in a list of
   peers", and shipping them at 19 and 20 was drift, not hierarchy. */
.ps-step__title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--ps-ink);
    margin-bottom: 8px;
}

.ps-step__text {
    font-size: var(--ps-small);
    line-height: 1.7;
    color: var(--ps-body);
    margin-bottom: 0;
    max-width: 68ch;
}

/* --- Closing CTA -------------------------------------------------------- */

/* Padding now comes from the shared --ps-section rhythm above. */

.ps-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 44px 48px;
    background-color: var(--pitoon-primary);
    border-radius: 14px;
}

.ps-cta__title {
    font-size: clamp(1.5rem, 2vw, 1.875rem);
    line-height: 1.2;
    letter-spacing: -0.025em;
    margin-bottom: 10px;
}

.ps-cta__text {
    font-size: var(--ps-small);
    line-height: 1.65;
    margin-bottom: 0;
    max-width: 56ch;
}

@media (max-width: 767px) {
    .ps-step {
        grid-template-columns: 44px 1fr;
        gap: 16px;
    }

    .ps-cta {
        padding: 32px 26px;
    }

    .ps-facts {
        margin-top: 44px;
    }
}

/* --------------------------------------------------------------------------
   Forms

   The template styled inputs by attribute — `input[type="text"]` — so the
   email field (type="email") matched nothing and rendered at the browser
   default: 34px tall, 203px wide, 2px inset border, sitting beside 63px/275px
   siblings. Everything below is styled by CLASS, so changing an input's type
   can never strip its styling again.

   Labels are visible rather than placeholder-only: placeholders disappear the
   moment someone types, and placeholder-as-label fails WCAG 3.3.2.
   -------------------------------------------------------------------------- */

.ps-form__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px 24px;
}

.ps-form__field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ps-form__field--full {
    grid-column: 1 / -1;
}

.ps-form__label {
    display: block;
    margin-bottom: 8px;
    font-family: var(--pitoon-font-two);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--ps-ink);
}

.ps-form__required {
    color: #b4442b;      /* 4.9:1 on white */
    margin-left: 2px;
}

.ps-form__optional {
    margin-left: 6px;
    font-weight: 500;
    font-size: 0.8125rem;
    color: var(--ps-muted);
}

/* One rule for every control, whatever its type. */
.ps-form__control {
    width: 100%;
    min-height: 52px;
    padding: 13px 16px;
    font-family: var(--pitoon-font);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ps-ink);
    background-color: var(--pitoon-white);
    border: 1px solid rgba(4, 23, 26, 0.18);
    border-radius: 8px;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    appearance: none;
}

textarea.ps-form__control {
    min-height: 140px;
    resize: vertical;
    padding-top: 14px;
}

.ps-form__control::placeholder {
    color: var(--ps-muted);
}

.ps-form__control:hover {
    border-color: rgba(4, 23, 26, 0.32);
}

.ps-form__control:focus,
.ps-form__control:focus-visible {
    outline: none;
    border-color: var(--pitoon-base);
    box-shadow: 0 0 0 3px rgba(249, 190, 23, 0.35);
}

/* File input: style the native control rather than hiding it behind JS. */
/* Pinned to the same 52px as its neighbours: the file-selector button makes
   this control taller than padding alone predicts, and Phone sits beside it. */
.ps-form__control--file {
    height: 52px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    line-height: 1.4;
    cursor: pointer;
}

.ps-form__control--file::file-selector-button {
    margin-right: 14px;
    padding: 8px 18px;
    font-family: var(--pitoon-font-two);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--ps-ink);
    background-color: var(--pitoon-base);
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: filter 0.15s ease;
}

.ps-form__control--file::file-selector-button:hover {
    filter: brightness(0.94);
}

.ps-form__hint {
    margin-top: 7px;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--ps-muted);
}

.ps-form__error {
    margin-top: 7px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.5;
    color: #a83a22;      /* 5.6:1 on white */
}

.ps-form__field--invalid .ps-form__control {
    border-color: #a83a22;
}

.ps-form__field--invalid .ps-form__control:focus {
    box-shadow: 0 0 0 3px rgba(168, 58, 34, 0.22);
}

.ps-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin-top: 30px;
}

.ps-form__note {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--ps-muted);
}

/* The form sits in a card beside its supporting copy, rather than sharing a
   three-column row where its inputs were squeezed to 115px. */
.ps-form-card {
    padding: 38px 36px 36px;
    background-color: var(--pitoon-white);
    border: 1px solid rgba(4, 23, 26, 0.1);
    border-radius: 14px;
    box-shadow: 0 24px 60px -40px rgba(4, 23, 26, 0.5);
}

.ps-form-section .ps-lead {
    margin-bottom: 28px;
}

/* Compact variant used beside a form, where the list is supporting material
   rather than the section's subject. Now that the base steps sit on a light
   ground too, only the tighter spacing and smaller title differ. */
.ps-steps--light .ps-step {
    padding: 22px 0;
}

.ps-steps--light .ps-step__title {
    font-size: 1rem;
}

/* --- Office maps -------------------------------------------------------- */

.ps-map-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 28px;
}

.ps-map iframe {
    display: block;
    width: 100%;
    height: 320px;
    margin-top: 14px;
    border: 1px solid rgba(4, 23, 26, 0.1);
    border-radius: 12px;
}

@media (max-width: 767px) {
    .ps-form-card {
        padding: 26px 22px 24px;
    }

    .ps-map iframe {
        height: 240px;
    }
}

/* --------------------------------------------------------------------------
   Tables (Current Jobs)
   The stock Bootstrap table looks like raw data in a designed page.
   -------------------------------------------------------------------------- */

table.table {
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--ps-small);
}

table.table thead th {
    font-family: var(--pitoon-font-two);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ps-muted);
    border-bottom: 2px solid rgba(4, 23, 26, 0.1);
    padding: 0.85rem 1rem;
    vertical-align: bottom;
}

table.table tbody td,
table.table tbody th {
    padding: 1.15rem 1rem;
    border-top: 1px solid rgba(4, 23, 26, 0.07);
    line-height: 1.6;
    vertical-align: top;
}

table.table tbody td a:not(.btn) {
    color: var(--ps-ink);
    font-weight: 700;
    text-decoration: none;
}

table.table tbody td a:not(.btn):hover {
    color: var(--pitoon-base);
}

/* --------------------------------------------------------------------------
   Focus visibility - the template removed outlines without replacing them.
   -------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--pitoon-base);
    outline-offset: 2px;
    border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Small screens: dial the display sizes back further than clamp() alone.
   -------------------------------------------------------------------------- */

@media (max-width: 575px) {
    :root {
        --ps-body-size: 1rem;
        --ps-lead: 1.0625rem;
    }

    .main-slider__title {
        letter-spacing: -0.025em;
    }

    .section-title__tagline,
    .main-slider__sub-title {
        letter-spacing: 0.1em;
    }
}