/* North Yard Equipment Hire — consolidated stylesheets.
   Page-specific rules are scoped to each page body class. */

/* ===== about-us.html styles ===== */
body.page-about {
--primary: #1f2937;
        --accent: #f59e0b;
        --light: #f9fafb;
        --text: #374151;
        --white: #ffffff;

        /* Shared site colours from index.html */
        --navy: #103e69;
        --navy-dark: #0a2038;
        --blue-light: #eaf1f8;
        --background: #f5f7fa;
        --muted: #64748b;
        --border: #dce4ed;
        --radius: 16px;
        --shadow: 0 12px 35px rgba(10, 32, 56, 0.08);
        --max-width: 1160px;
}

body.page-about, body.page-about * {
box-sizing: border-box;
}

html:has(body.page-about) {
scroll-behavior: smooth;
        scroll-padding-top: 100px;
}

body.page-about {
margin: 0;
        font-family: Arial, Helvetica, sans-serif;
        color: var(--text);
        line-height: 1.7;
        background: var(--white);
        -webkit-font-smoothing: antialiased;
}

body.page-about a {
color: inherit;
        text-decoration: none;
}

body.page-about button {
font: inherit;
        -webkit-tap-highlight-color: transparent;
}

body.page-about img {
max-width: 100%;
}

/* ----------------------------------
     Header and navigation
     Matches index.html
     ---------------------------------- */

body.page-about .site-header {
position: sticky;
        z-index: 100;
        top: 0;
        border-bottom: 1px solid rgba(220, 228, 237, 0.8);
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(14px);
}

body.page-about .container {
width: min(var(--max-width), calc(100% - 40px));
        margin-inline: auto;
}

body.page-about .navbar {
position: relative;
        display: flex;
        min-height: 82px;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
}

/* Logo and brand */

body.page-about .brand {
display: inline-flex;
        align-items: center;
        gap: 11px;
        flex-shrink: 0;
        text-decoration: none;
}

body.page-about .brand-mark {
display: block;
        width: 45px;
        height: 45px;
        object-fit: contain;
}

body.page-about .brand-copy {
display: flex;
        flex-direction: column;
        line-height: 1.05;
}

body.page-about .brand-name {
color: var(--navy-dark);
        font-size: 1.18rem;
        font-weight: 900;
        letter-spacing: -0.6px;
}

body.page-about .brand-subtitle {
margin-top: 5px;
        color: var(--navy);
        font-size: 0.63rem;
        font-weight: 800;
        letter-spacing: 1.7px;
}

/* Desktop navigation links */

body.page-about .nav-links {
display: flex;
        align-items: center;
        gap: 28px;
        list-style: none;
        padding: 0;
        margin: 0;
}

body.page-about .nav-links a:not(.btn) {
color: #405166;
        font-size: 0.9rem;
        font-weight: 600;
        text-decoration: none;
        transition: color 150ms ease;
}

body.page-about .nav-links a:not(.btn):hover,
      .nav-links a:not(.btn)[aria-current="page"] {
color: var(--navy);
}

/* Enquire now button */

body.page-about .btn {
display: inline-flex;
        min-height: 50px;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 13px 23px;
        border: 2px solid transparent;
        border-radius: 8px;
        font-size: 0.94rem;
        font-weight: 700;
        cursor: pointer;
        transition:
          transform 180ms ease,
          background 180ms ease,
          color 180ms ease;
}

body.page-about .btn:hover {
transform: translateY(-2px);
}

body.page-about .btn-primary {
background: var(--navy);
        color: var(--white);
}

body.page-about .btn-primary:hover {
background: var(--navy-dark);
}

/* Mobile menu button */

body.page-about .menu-toggle {
display: none;
        width: 44px;
        height: 44px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--white);
        color: var(--navy);
        font-size: 1.4rem;
        cursor: pointer;
}

/* ----------------------------------
     About Us hero
     ---------------------------------- */

body.page-about .about-hero {
background: var(--primary);
        color: var(--white);
        padding: 90px 20px;
        text-align: center;
}

body.page-about .about-hero h1 {
font-size: clamp(2.2rem, 5vw, 3.5rem);
        margin: 0 0 20px;
        line-height: 1.2;
}

body.page-about .about-hero p {
max-width: 700px;
        margin: 0 auto;
        font-size: 1.15rem;
}

/* ----------------------------------
     Main content
     ---------------------------------- */

body.page-about .about-container {
max-width: 1100px;
        margin: 0 auto;
        padding: 70px 24px;
}

body.page-about .about-section {
margin-bottom: 70px;
}

body.page-about .about-section h2 {
color: var(--primary);
        font-size: 2rem;
        margin-bottom: 20px;
}

/* Story and photo */

body.page-about .about-story {
display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 45px;
        align-items: center;
}

body.page-about .about-photo {
width: 100%;
        min-height: 320px;
        border-radius: 12px;
        background: #e5e7eb;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 25px;
        color: #6b7280;
        overflow: hidden;
}

body.page-about .about-photo img {
display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 12px;
}

body.page-about .about-photo-placeholder {
width: 100%;
        font-size: 1rem;
}

/* Equipment features */

body.page-about .about-features {
display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
}

body.page-about .about-feature {
background: var(--light);
        padding: 30px;
        border-radius: 12px;
        border-top: 4px solid var(--accent);
}

body.page-about .about-feature h3 {
color: var(--primary);
        margin-top: 0;
        font-size: 1.25rem;
}

/* Motto */

body.page-about .about-motto {
background: var(--primary);
        color: var(--white);
        text-align: center;
        padding: 60px 25px;
        border-radius: 12px;
}

body.page-about .about-motto h2 {
color: var(--accent);
        font-size: 1.1rem;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin: 0 0 15px;
}

body.page-about .about-motto p {
font-size: clamp(1.5rem, 4vw, 2.5rem);
        font-weight: bold;
        line-height: 1.3;
        margin: 0;
}

/* ----------------------------------
     Responsive layouts
     ---------------------------------- */

@media (max-width: 900px) {
body.page-about .nav-links {
gap: 16px;
}

body.page-about .nav-links a:not(.btn) {
font-size: 0.84rem;
}
}

@media (max-width: 680px) {
body.page-about .container {
width: min(var(--max-width), calc(100% - 32px));
}

/* Header */

body.page-about .navbar {
min-height: 72px;
}

body.page-about .brand-mark {
width: 39px;
          height: 39px;
}

body.page-about .brand-name {
font-size: 1.05rem;
}

body.page-about .brand-subtitle {
font-size: 0.56rem;
}

body.page-about .menu-toggle {
display: inline-grid;
          place-items: center;
}

/* White dropdown navigation */

body.page-about .nav-links {
position: absolute;
          top: calc(100% + 1px);
          right: 0;
          left: 0;
          display: none;
          align-items: stretch;
          flex-direction: column;
          gap: 0;
          padding: 10px 20px 20px;
          border-bottom: 1px solid var(--border);
          background: var(--white);
          box-shadow: 0 12px 18px rgba(10, 32, 56, 0.06);
}

body.page-about .nav-links.is-open {
display: flex;
}

body.page-about .nav-links li a:not(.btn) {
display: block;
          padding: 12px 0;
          font-size: 0.95rem;
}

body.page-about .nav-links .btn {
margin-top: 8px;
}

/* About Us content */

body.page-about .about-story {
grid-template-columns: 1fr;
}

body.page-about .about-features {
grid-template-columns: 1fr;
}

body.page-about .about-hero {
padding: 65px 20px;
}

body.page-about .about-container {
padding: 50px 20px;
}
}

/* Accessibility */

body.page-about a:focus-visible,
body.page-about button:focus-visible {
outline: 3px solid #8ab9e8;
        outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
body.page-about, body.page-about *,
body.page-about *::before,
body.page-about *::after {
scroll-behavior: auto !important;
          transition-duration: 0.01ms !important;
}
}

/* ===== equipment.html styles ===== */
body.page-equipment {
--navy: #103e69;
        --navy-dark: #0a2038;
        --blue-light: #eaf1f8;
        --white: #ffffff;
        --background: #f5f7fa;
        --text: #263547;
        --muted: #64748b;
        --border: #dce4ed;
        --max-width: 1160px;
}

body.page-equipment, body.page-equipment * {
box-sizing: border-box;
}

body.page-equipment {
margin: 0;
        font-family: Arial, Helvetica, sans-serif;
        color: var(--text);
        background: var(--background);
        line-height: 1.6;
}

body.page-equipment a {
color: inherit;
}

/* SHARED HEADER */

body.page-equipment .site-header {
position: sticky;
        top: 0;
        z-index: 1000;
        background: var(--white);
        border-bottom: 1px solid var(--border);
}

body.page-equipment .container {
width: min(100% - 40px, var(--max-width));
        margin: 0 auto;
}

body.page-equipment .navbar {
min-height: 82px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
}

body.page-equipment .brand {
display: flex;
        align-items: center;
        gap: 12px;
        text-decoration: none;
        flex-shrink: 0;
}

body.page-equipment .brand-mark {
width: 45px;
        height: 45px;
        object-fit: contain;
        display: block;
}

body.page-equipment .brand-copy {
display: flex;
        flex-direction: column;
        line-height: 1.2;
}

body.page-equipment .brand-name {
color: var(--navy-dark);
        font-size: 18px;
        font-weight: 800;
        letter-spacing: -0.3px;
}

body.page-equipment .brand-subtitle {
color: var(--muted);
        font-size: 12px;
        margin-top: 3px;
}

body.page-equipment .nav-links {
display: flex;
        align-items: center;
        gap: 28px;
        list-style: none;
        margin: 0;
        padding: 0;
}

body.page-equipment .nav-links a {
color: var(--navy-dark);
        text-decoration: none;
        font-size: 15px;
        font-weight: 600;
        transition: color 0.2s ease;
}

body.page-equipment .nav-links a:hover,
body.page-equipment .nav-links a[aria-current="page"] {
color: var(--navy);
}

body.page-equipment .menu-toggle {
display: none;
        border: 0;
        background: transparent;
        color: var(--navy-dark);
        font-size: 28px;
        cursor: pointer;
        padding: 8px;
}

/* PAGE HERO */

body.page-equipment .page-hero {
background: var(--navy-dark);
        color: var(--white);
        padding: 64px 0;
        text-align: center;
}

body.page-equipment .page-hero h1 {
margin: 0 0 14px;
        font-size: clamp(32px, 5vw, 48px);
        line-height: 1.15;
}

body.page-equipment .page-hero p {
max-width: 680px;
        margin: 0 auto;
        color: #dbe7f3;
        font-size: 18px;
}

/* AVAILABLE EQUIPMENT */

body.page-equipment .equipment-section {
padding: 56px 0 64px;
}

body.page-equipment .section-heading {
color: var(--navy-dark);
        font-size: 32px;
        margin: 0 0 12px;
        text-align: center;
}

body.page-equipment .section-intro {
color: var(--muted);
        max-width: 680px;
        margin: 0 auto 36px;
        text-align: center;
}

body.page-equipment .equipment-grid {
display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px;
        align-items: start;
}

body.page-equipment .equipment-card {
background: var(--white);
        border: 1px solid var(--border);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 8px 28px rgba(10, 32, 56, 0.06);
}

body.page-equipment .equipment-card-header {
background: var(--navy);
        color: var(--white);
        padding: 26px 28px;
}

body.page-equipment .equipment-card-header h3 {
margin: 0 0 8px;
        font-size: 27px;
        line-height: 1.2;
}

body.page-equipment .equipment-card-header p {
margin: 0;
        color: #e3edf7;
}

/* PHOTO AREA */

body.page-equipment .equipment-photo {
width: 100%;
        height: 550px;
        background: #e8edf3;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
}

body.page-equipment .equipment-photo img {
width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
}

body.page-equipment .equipment-content {
padding: 28px;
}

body.page-equipment .equipment-content h4 {
color: var(--navy-dark);
        margin: 28px 0 12px;
        font-size: 20px;
}

body.page-equipment .equipment-content h4:first-child {
margin-top: 0;
}

body.page-equipment .equipment-content p {
margin: 0 0 16px;
}

body.page-equipment .feature-list,
body.page-equipment .application-list,
body.page-equipment .requirements-list {
list-style: none;
        padding: 0;
        margin: 0;
}

body.page-equipment .feature-list li,
body.page-equipment .application-list li,
body.page-equipment .requirements-list li {
margin: 0 0 10px;
        padding-left: 28px;
        position: relative;
}

body.page-equipment .feature-list li::before,
body.page-equipment .requirements-list li::before {
content: "✓";
        position: absolute;
        left: 0;
        color: #167447;
        font-weight: 800;
}

body.page-equipment .application-list li::before {
content: "•";
        position: absolute;
        left: 8px;
        color: var(--navy);
        font-weight: 800;
}

/* HIRE RATES */

body.page-equipment .rates {
background: var(--blue-light);
        border-radius: 12px;
        padding: 20px;
        margin: 24px 0;
}

body.page-equipment .rates h4 {
margin: 0 0 12px;
}

body.page-equipment .rate-row {
display: flex;
        justify-content: space-between;
        gap: 16px;
        padding: 10px 0;
        border-bottom: 1px solid #cbd8e6;
}

body.page-equipment .rate-row:last-child {
border-bottom: 0;
}

body.page-equipment .rate-label {
font-weight: 600;
}

body.page-equipment .rate-price {
color: var(--navy-dark);
        font-weight: 800;
        white-space: nowrap;
}

body.page-equipment .included-note {
background: #f0f7f2;
        border: 1px solid #cce4d2;
        border-radius: 10px;
        padding: 16px;
        margin: 20px 0;
}

body.page-equipment .warning-note {
background: #fff6e5;
        border: 1px solid #f1d49b;
        border-radius: 10px;
        padding: 16px;
        margin: 20px 0;
}

body.page-equipment .equipment-cta {
display: block;
        width: 100%;
        text-align: center;
        background: var(--navy);
        color: var(--white);
        text-decoration: none;
        padding: 15px 20px;
        border-radius: 8px;
        font-weight: 700;
        margin-top: 26px;
        transition: background 0.2s ease;
}

body.page-equipment .equipment-cta:hover {
background: var(--navy-dark);
}

/* BUSINESS INFORMATION */

body.page-equipment .business-note {
max-width: 850px;
        margin: 48px auto 0;
        background: var(--white);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 28px;
}

body.page-equipment .business-note h2 {
margin: 0 0 12px;
        color: var(--navy-dark);
}

/* COMING SOON */

body.page-equipment .coming-section {
background: var(--white);
        padding: 56px 0 72px;
        border-top: 1px solid var(--border);
}

body.page-equipment .coming-grid {
display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px;
}

body.page-equipment .coming-card {
background: var(--background);
        border: 1px solid var(--border);
        border-radius: 16px;
        padding: 30px;
}

body.page-equipment .coming-label {
display: inline-block;
        background: var(--blue-light);
        color: var(--navy);
        font-size: 13px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.7px;
        padding: 6px 12px;
        border-radius: 30px;
        margin-bottom: 18px;
}

body.page-equipment .coming-card h3 {
color: var(--navy-dark);
        font-size: 27px;
        line-height: 1.2;
        margin: 0 0 12px;
}

body.page-equipment .coming-card p {
margin: 0;
        color: var(--muted);
}

/* FOOTER */

body.page-equipment .site-footer {
background: var(--navy-dark);
        color: var(--white);
        padding: 28px 0;
        text-align: center;
}

body.page-equipment .site-footer p {
margin: 0;
        color: #dbe7f3;
        font-size: 14px;
}

/* MOBILE MENU AND LAYOUT */

@media (max-width: 680px) {
body.page-equipment .container {
width: min(100% - 32px, var(--max-width));
}

body.page-equipment .navbar {
min-height: 72px;
          position: relative;
}

body.page-equipment .brand-mark {
width: 39px;
          height: 39px;
}

body.page-equipment .brand-name {
font-size: 16px;
}

body.page-equipment .brand-subtitle {
font-size: 11px;
}

body.page-equipment .menu-toggle {
display: block;
}

body.page-equipment .nav-links {
display: none;
          position: absolute;
          top: 100%;
          left: -16px;
          right: -16px;
          flex-direction: column;
          align-items: stretch;
          gap: 0;
          background: var(--white);
          border-top: 1px solid var(--border);
          border-bottom: 1px solid var(--border);
          box-shadow: 0 12px 20px rgba(10, 32, 56, 0.08);
          padding: 8px 16px 16px;
}

body.page-equipment .nav-links.is-open {
display: flex;
}

body.page-equipment .nav-links li {
width: 100%;
}

body.page-equipment .nav-links a {
display: block;
          padding: 14px 8px;
          border-bottom: 1px solid var(--border);
}

body.page-equipment .nav-links li:last-child a {
border-bottom: 0;
}

body.page-equipment .page-hero {
padding: 44px 0;
}

body.page-equipment .page-hero p {
font-size: 16px;
}

body.page-equipment .equipment-section,
body.page-equipment .coming-section {
padding: 36px 0 48px;
}

body.page-equipment .equipment-grid,
body.page-equipment .coming-grid {
grid-template-columns: 1fr;
          gap: 22px;
}

body.page-equipment .equipment-card-header {
padding: 22px;
}

body.page-equipment .equipment-card-header h3 {
font-size: 24px;
}

body.page-equipment .equipment-photo {
width: 100%;
          height: 300px;
          object-fit: contain;
          display: block;
}

body.page-equipment .equipment-content {
padding: 22px;
}

body.page-equipment .rate-row {
font-size: 15px;
}

body.page-equipment .business-note {
margin-top: 32px;
          padding: 22px;
}

body.page-equipment .coming-card {
padding: 24px;
}
}

body.page-equipment .central-inline-1 {
margin: 12px 0 0; font-size: 14px
}

body.page-equipment .central-inline-2 {
margin: 6px 0 0
}

body.page-equipment .central-inline-3 {
margin: 12px 0 0; font-size: 14px
}

/* ===== how-it-works.html styles ===== */
body.page-how-it-works {
--navy: #103e69;
        --dark: #0a2038;
        --blue-light: #eaf1f8;
        --white: #fff;
        --bg: #f5f7fa;
        --text: #263547;
        --muted: #64748b;
        --border: #dce4ed;
        --radius: 16px;
        --shadow: 0 12px 35px rgba(10, 32, 56, 0.08);
        --max: 1160px;
}

body.page-how-it-works, body.page-how-it-works * {
box-sizing: border-box;
        margin: 0;
        padding: 0;
}

html:has(body.page-how-it-works) {
scroll-behavior: smooth;
        scroll-padding-top: 100px;
}

body.page-how-it-works {
font-family: Arial, Helvetica, sans-serif;
        background: var(--white);
        color: var(--text);
        line-height: 1.65;
        -webkit-font-smoothing: antialiased;
}

body.page-how-it-works a {
color: inherit;
        text-decoration: none;
}

body.page-how-it-works button {
font: inherit;
}

body.page-how-it-works .container {
width: min(var(--max), calc(100% - 40px));
        margin-inline: auto;
}

body.page-how-it-works .section {
padding: 76px 0;
}

body.page-how-it-works .label {
display: inline-block;
        margin-bottom: 14px;
        color: var(--navy);
        font-size: 0.76rem;
        font-weight: 800;
        letter-spacing: 2px;
        text-transform: uppercase;
}

body.page-how-it-works h1,
body.page-how-it-works h2,
body.page-how-it-works h3 {
color: var(--dark);
        line-height: 1.15;
        letter-spacing: -0.7px;
}

body.page-how-it-works h1 {
font-size: clamp(2.6rem, 5.3vw, 4.4rem);
        letter-spacing: -2.5px;
        max-width: 760px;
}

body.page-how-it-works h1 span {
color: var(--navy);
}

body.page-how-it-works h2 {
font-size: clamp(2rem, 4vw, 3rem);
}

body.page-how-it-works p {
color: var(--muted);
}

body.page-how-it-works .btn {
display: inline-flex;
        min-height: 50px;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 13px 23px;
        border: 2px solid transparent;
        border-radius: 8px;
        font-size: 0.94rem;
        font-weight: 700;
        transition:
          transform 180ms,
          background 180ms;
        cursor: pointer;
}

body.page-how-it-works .btn:hover {
transform: translateY(-2px);
}

body.page-how-it-works .primary {
background: var(--navy);
        color: #fff;
}

body.page-how-it-works .primary:hover {
background: var(--dark);
}

body.page-how-it-works .outline {
border-color: var(--border);
        background: #fff;
        color: var(--navy);
}

body.page-how-it-works .site-header {
position: sticky;
        z-index: 10;
        top: 0;
        border-bottom: 1px solid rgba(220, 228, 237, 0.8);
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(14px);
}

body.page-how-it-works .navbar {
display: flex;
        min-height: 82px;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
}

body.page-how-it-works .brand {
display: inline-flex;
        align-items: center;
        gap: 11px;
        flex-shrink: 0;
}

body.page-how-it-works .brand-mark {
width: 45px;
        height: 45px;
        color: var(--navy);
}

body.page-how-it-works .brand-copy {
display: flex;
        flex-direction: column;
        line-height: 1.05;
}

body.page-how-it-works .brand-name {
color: var(--dark);
        font-size: 1.18rem;
        font-weight: 900;
        letter-spacing: -0.6px;
}

body.page-how-it-works .brand-sub {
margin-top: 5px;
        color: var(--navy);
        font-size: 0.63rem;
        font-weight: 800;
        letter-spacing: 1.7px;
}

body.page-how-it-works .nav-links {
display: flex;
        align-items: center;
        gap: 27px;
        list-style: none;
}

body.page-how-it-works .nav-links a:not(.btn) {
color: #405166;
        font-size: 0.9rem;
        font-weight: 600;
}

body.page-how-it-works .nav-links a:hover {
color: var(--navy);
}

body.page-how-it-works .menu-toggle {
display: none;
        width: 44px;
        height: 44px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: #fff;
        color: var(--navy);
        font-size: 1.4rem;
        cursor: pointer;
}

body.page-how-it-works .hero {
padding: 78px 0 70px;
        background:
          radial-gradient(
            ellipse at 88% 12%,
            rgba(16, 62, 105, 0.09),
            transparent 36%
          ),
          linear-gradient(180deg, #fff 0%, #f6f8fb 100%);
}

body.page-how-it-works .hero-grid {
display: grid;
        grid-template-columns: 1.15fr 0.85fr;
        align-items: center;
        gap: 55px;
}

body.page-how-it-works .eyebrow {
display: inline-flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 23px;
        color: var(--navy);
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: 1.7px;
        text-transform: uppercase;
}

body.page-how-it-works .eyebrow:before {
width: 28px;
        height: 3px;
        background: var(--navy);
        content: "";
}

body.page-how-it-works .hero p {
max-width: 610px;
        margin-top: 23px;
        font-size: 1.08rem;
        line-height: 1.8;
}

body.page-how-it-works .hero-actions {
display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 28px;
}

body.page-how-it-works .hero-card {
padding: 30px;
        border: 1px solid var(--border);
        border-radius: 22px;
        background: #fff;
        box-shadow: var(--shadow);
}

body.page-how-it-works .hero-card .mini {
display: flex;
        align-items: center;
        gap: 14px;
        padding: 17px 0;
        border-bottom: 1px solid var(--border);
}

body.page-how-it-works .hero-card .mini:last-child {
border: 0;
}

body.page-how-it-works .num {
display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        flex-shrink: 0;
        border-radius: 11px;
        background: var(--blue-light);
        color: var(--navy);
        font-weight: 900;
}

body.page-how-it-works .mini strong {
display: block;
        color: var(--dark);
        font-size: 0.94rem;
}

body.page-how-it-works .mini small {
display: block;
        color: var(--muted);
        font-size: 0.83rem;
}

body.page-how-it-works .steps-section {
background: var(--bg);
}

body.page-how-it-works .section-intro {
max-width: 700px;
}

body.page-how-it-works .section-intro p {
margin-top: 17px;
        font-size: 1.03rem;
}

body.page-how-it-works .steps {
display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
        margin-top: 38px;
}

body.page-how-it-works .step {
padding: 28px;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: #fff;
}

body.page-how-it-works .step-top {
display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 17px;
}

body.page-how-it-works .step h3 {
font-size: 1.16rem;
}

body.page-how-it-works .step p {
font-size: 0.94rem;
}

body.page-how-it-works .step ul {
margin: 13px 0 0 20px;
        color: var(--muted);
        font-size: 0.92rem;
}

body.page-how-it-works .step li {
padding: 3px 0;
}

body.page-how-it-works .example-section {
background: #fff;
}

body.page-how-it-works .example-grid {
display: grid;
        grid-template-columns: 0.82fr 1.18fr;
        gap: 45px;
        align-items: start;
}

body.page-how-it-works .example-copy p {
margin-top: 17px;
}

body.page-how-it-works .note {
margin-top: 22px;
        padding: 17px 19px;
        border-left: 4px solid var(--navy);
        border-radius: 0 10px 10px 0;
        background: var(--blue-light);
        color: #344458;
        font-size: 0.9rem;
}

body.page-how-it-works .email {
overflow: hidden;
        border: 1px solid var(--border);
        border-radius: 16px;
        background: #fff;
        box-shadow: var(--shadow);
}

body.page-how-it-works .email-head {
padding: 15px 22px;
        border-bottom: 1px solid var(--border);
        background: var(--bg);
        font-size: 0.82rem;
        font-weight: 800;
        color: var(--navy);
        letter-spacing: 0.6px;
        text-transform: uppercase;
}

body.page-how-it-works .email-body {
padding: 25px;
}

body.page-how-it-works .email-body p {
color: var(--text);
        font-size: 0.93rem;
        margin: 0 0 13px;
}

body.page-how-it-works .email-body .muted {
color: var(--muted);
}

body.page-how-it-works .email-body ul {
margin: 8px 0 14px 20px;
        font-size: 0.92rem;
}

body.page-how-it-works .email-body .total {
padding: 12px 14px;
        border-radius: 8px;
        background: var(--bg);
        font-weight: 700;
}

body.page-how-it-works .checklist {
display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
        margin-top: 34px;
}

body.page-how-it-works .check {
padding: 22px;
        border: 1px solid var(--border);
        border-radius: 14px;
}

body.page-how-it-works .check strong {
display: block;
        color: var(--dark);
        margin-bottom: 7px;
}

body.page-how-it-works .check p {
font-size: 0.9rem;
}

body.page-how-it-works .cta {
padding: 72px 0;
}

body.page-how-it-works .cta-panel {
padding: 52px;
        border-radius: 22px;
        background: var(--navy);
        color: #fff;
}

body.page-how-it-works .cta-panel h2 {
color: #fff;
        max-width: 690px;
}

body.page-how-it-works .cta-panel p {
max-width: 610px;
        margin-top: 16px;
        color: #d7e2ef;
}

body.page-how-it-works .cta-panel .btn {
margin-top: 25px;
        background: #fff;
        color: var(--navy);
}

body.page-how-it-works .footer {
padding: 34px 0;
        background: var(--dark);
        color: #d1dce8;
}

body.page-how-it-works .footer-top {
display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 25px;
        padding-bottom: 24px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}

body.page-how-it-works .footer .brand-name {
color: #fff;
}

body.page-how-it-works .footer .brand-sub {
color: #b9cce0;
}

body.page-how-it-works .footer .brand-mark {
color: #fff;
}

body.page-how-it-works .footer-nav {
display: flex;
        flex-wrap: wrap;
        gap: 22px;
        font-size: 0.85rem;
}

body.page-how-it-works .footer-bottom {
display: flex;
        justify-content: space-between;
        gap: 16px;
        padding-top: 20px;
        color: #a9bacd;
        font-size: 0.8rem;
}

body.page-how-it-works a:focus-visible,
body.page-how-it-works button:focus-visible {
outline: 3px solid #8ab9e8;
        outline-offset: 4px;
}

@media (max-width: 850px) {
body.page-how-it-works .hero-grid,
body.page-how-it-works .example-grid {
grid-template-columns: 1fr;
          gap: 30px;
}

body.page-how-it-works .steps {
grid-template-columns: 1fr;
}

body.page-how-it-works .checklist {
grid-template-columns: 1fr;
}
}

@media (max-width: 680px) {
body.page-how-it-works .container {
width: min(var(--max), calc(100% - 32px));
}

body.page-how-it-works .section {
padding: 58px 0;
}

body.page-how-it-works .navbar {
min-height: 72px;
}

body.page-how-it-works .brand-mark {
width: 39px;
          height: 39px;
}

body.page-how-it-works .brand-name {
font-size: 1.05rem;
}

body.page-how-it-works .brand-sub {
font-size: 0.56rem;
}

body.page-how-it-works .menu-toggle {
display: inline-grid;
          place-items: center;
}

body.page-how-it-works .nav-links {
position: absolute;
          top: calc(100% + 1px);
          right: 0;
          left: 0;
          display: none;
          align-items: stretch;
          gap: 0;
          padding: 10px 20px 20px;
          border-bottom: 1px solid var(--border);
          background: #fff;
          box-shadow: 0 12px 18px rgba(10, 32, 56, 0.06);
}

body.page-how-it-works .nav-links.is-open {
display: flex;
          flex-direction: column;
}

body.page-how-it-works .nav-links li a:not(.btn) {
display: block;
          padding: 12px 0;
          font-size: 0.95rem;
}

body.page-how-it-works .nav-links .btn {
margin-top: 8px;
}

body.page-how-it-works .hero {
padding: 55px 0;
}

body.page-how-it-works .hero-grid {
grid-template-columns: 1fr;
}

body.page-how-it-works .hero h1 {
font-size: clamp(2.55rem, 11vw, 3.8rem);
}

body.page-how-it-works .hero-card {
padding: 22px;
}

body.page-how-it-works .cta {
padding: 48px 0;
}

body.page-how-it-works .cta-panel {
padding: 32px 24px;
}

body.page-how-it-works .footer-top,
body.page-how-it-works .footer-bottom {
align-items: flex-start;
          flex-direction: column;
}

body.page-how-it-works .footer-nav {
gap: 16px;
}
}

@media (prefers-reduced-motion: reduce) {
body.page-how-it-works, body.page-how-it-works * {
scroll-behavior: auto !important;
          transition-duration: 0.01ms !important;
}
}

body.page-how-it-works .central-inline-1 {
margin-top: 14px
}

body.page-how-it-works .central-inline-2 {
margin-top: 12px
}

body.page-how-it-works .central-inline-3 {
margin-top: 12px
}

body.page-how-it-works .central-inline-4 {
margin-top: 12px
}

body.page-how-it-works .central-inline-5 {
color: #d4e3f3
}

/* ===== index.html styles ===== */
/* ----------------------------------
       NORTH YARD EQUIPMENT HIRE
       Main brand colours:
       Navy: #103e69
       Dark navy: #0a2038
       Light background: #f5f7fa
       ---------------------------------- */

body.page-home {
--navy: #103e69;
        --navy-dark: #0a2038;
        --blue-light: #eaf1f8;
        --white: #ffffff;
        --background: #f5f7fa;
        --text: #263547;
        --muted: #64748b;
        --border: #dce4ed;
        --radius: 16px;
        --shadow: 0 12px 35px rgba(10, 32, 56, 0.08);
        --max-width: 1160px;
}

body.page-home, body.page-home * {
box-sizing: border-box;
        margin: 0;
        padding: 0;
}

html:has(body.page-home) {
scroll-behavior: smooth;
        scroll-padding-top: 100px;
}

body.page-home {
font-family: Arial, Helvetica, sans-serif;
        background: var(--white);
        color: var(--text);
        line-height: 1.65;
        -webkit-font-smoothing: antialiased;
}

body.page-home a {
color: inherit;
        text-decoration: none;
}

body.page-home button,
body.page-home input,
body.page-home select,
body.page-home textarea {
font: inherit;
}

body.page-home button,
body.page-home a {
-webkit-tap-highlight-color: transparent;
}

body.page-home img,
body.page-home svg {
max-width: 100%;
}

body.page-home .container {
width: min(var(--max-width), calc(100% - 40px));
        margin-inline: auto;
}

body.page-home .section {
padding: 88px 0;
}

body.page-home .section-label {
display: inline-block;
        margin-bottom: 14px;
        color: var(--navy);
        font-size: 0.76rem;
        font-weight: 800;
        letter-spacing: 2px;
        text-transform: uppercase;
}

body.page-home .section-heading {
max-width: 680px;
        color: var(--navy-dark);
        font-size: clamp(2rem, 4vw, 3.1rem);
        line-height: 1.12;
        letter-spacing: -1.4px;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
}

body.page-home .section-description {
max-width: 620px;
        margin-top: 18px;
        color: var(--muted);
        font-size: 1.04rem;
}

/* Buttons */

body.page-home .btn {
display: inline-flex;
        min-height: 50px;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 13px 23px;
        border: 2px solid transparent;
        border-radius: 8px;
        font-size: 0.94rem;
        font-weight: 700;
        cursor: pointer;
        transition:
          transform 180ms ease,
          background 180ms ease,
          color 180ms ease;
}

body.page-home .btn:hover {
transform: translateY(-2px);
}

body.page-home .btn-primary {
background: var(--navy);
        color: var(--white);
}

body.page-home .btn-primary:hover {
background: var(--navy-dark);
}

body.page-home .btn-outline {
border-color: var(--border);
        background: var(--white);
        color: var(--navy);
}

body.page-home .btn-outline:hover {
border-color: var(--navy);
}

body.page-home .btn-white {
background: var(--white);
        color: var(--navy);
}

body.page-home .btn-white:hover {
background: var(--blue-light);
}

/* Header and navigation */

body.page-home .site-header {
position: sticky;
        z-index: 100;
        top: 0;
        border-bottom: 1px solid rgba(220, 228, 237, 0.8);
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(14px);
}

body.page-home .navbar {
display: flex;
        min-height: 82px;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
}

body.page-home .brand {
display: inline-flex;
        align-items: center;
        gap: 11px;
        flex-shrink: 0;
}

body.page-home .brand-mark {
width: 45px;
        height: 45px;
        color: var(--navy);
}

body.page-home .brand-copy {
display: flex;
        flex-direction: column;
        line-height: 1.05;
}

body.page-home .brand-name {
color: var(--navy-dark);
        font-size: 1.18rem;
        font-weight: 900;
        letter-spacing: -0.6px;
}

body.page-home .brand-subtitle {
margin-top: 5px;
        color: var(--navy);
        font-size: 0.63rem;
        font-weight: 800;
        letter-spacing: 1.7px;
}

body.page-home .nav-links {
display: flex;
        align-items: center;
        gap: 28px;
        list-style: none;
}

body.page-home .nav-links a:not(.btn) {
color: #405166;
        font-size: 0.9rem;
        font-weight: 600;
        transition: color 150ms ease;
}

body.page-home .nav-links a:not(.btn):hover {
color: var(--navy);
}

body.page-home .menu-toggle {
display: none;
        width: 44px;
        height: 44px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--white);
        color: var(--navy);
        font-size: 1.4rem;
        cursor: pointer;
}

/* Hero */

body.page-home .hero {
position: relative;
        overflow: hidden;
        padding: 88px 0 82px;
        background:
          radial-gradient(
            ellipse at 88% 12%,
            rgba(16, 62, 105, 0.09),
            transparent 36%
          ),
          linear-gradient(180deg, #ffffff 0%, #f6f8fb 100%);
}

body.page-home .hero::after {
position: absolute;
        top: -180px;
        right: -140px;
        width: 460px;
        height: 460px;
        border: 1px solid rgba(16, 62, 105, 0.09);
        border-radius: 50%;
        content: "";
        pointer-events: none;
}

body.page-home .hero-grid {
position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: 1.08fr 0.92fr;
        align-items: center;
        gap: 64px;
}

body.page-home .eyebrow {
display: inline-flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 24px;
        color: var(--navy);
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: 1.7px;
        text-transform: uppercase;
}

body.page-home .eyebrow::before {
width: 28px;
        height: 3px;
        background: var(--navy);
        content: "";
}

body.page-home .hero h1 {
max-width: 660px;
        color: var(--navy-dark);
        font-size: clamp(2.8rem, 5.3vw, 4.65rem);
        line-height: 1.03;
        letter-spacing: -3px;
}

body.page-home .hero h1 span {
color: var(--navy);
}

body.page-home .hero-text {
max-width: 520px;
        margin-top: 24px;
        color: var(--muted);
        font-size: 1.1rem;
        line-height: 1.8;
}

body.page-home .hero-actions {
display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 30px;
}

body.page-home .hero-note {
display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 25px;
        color: #526175;
        font-size: 0.88rem;
}

body.page-home .check-icon {
display: inline-grid;
        width: 23px;
        height: 23px;
        flex-shrink: 0;
        place-items: center;
        border-radius: 50%;
        background: #e1ebf5;
        color: var(--navy);
        font-size: 0.8rem;
        font-weight: 900;
}

/* Hero equipment illustration */

body.page-home .hero-visual {
position: relative;
        display: grid;
        min-height: 400px;
        overflow: hidden;
        place-items: center;
        border: 1px solid #e1e8f0;
        border-radius: 24px;
        background: linear-gradient(145deg, #edf3f9, #ffffff);
}

body.page-home .visual-grid {
position: absolute;
        inset: 0;
        background-image:
          linear-gradient(rgba(16, 62, 105, 0.045) 1px, transparent 1px),
          linear-gradient(90deg, rgba(16, 62, 105, 0.045) 1px, transparent 1px);
        background-size: 30px 30px;
        mask-image: linear-gradient(to bottom, black, transparent 90%);
}

body.page-home .washer-illustration {
position: relative;
        z-index: 1;
        width: min(88%, 370px);
        filter: drop-shadow(0 18px 20px rgba(10, 32, 56, 0.12));
}

body.page-home .visual-caption {
position: absolute;
        z-index: 2;
        right: 18px;
        bottom: 18px;
        left: 18px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 15px 17px;
        border: 1px solid rgba(220, 228, 237, 0.9);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.94);
}

body.page-home .visual-caption strong {
display: block;
        color: var(--navy-dark);
        font-size: 0.95rem;
}

body.page-home .visual-caption small {
color: var(--muted);
        font-size: 0.79rem;
}

body.page-home .available-tag {
flex-shrink: 0;
        padding: 6px 9px;
        border-radius: 6px;
        background: var(--blue-light);
        color: var(--navy);
        font-size: 0.7rem;
        font-weight: 800;
}

/* Trust strip */

body.page-home .trust-strip {
border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        background: var(--white);
}

body.page-home .trust-grid {
display: grid;
        grid-template-columns: repeat(3, 1fr);
}

body.page-home .trust-item {
display: flex;
        align-items: center;
        justify-content: center;
        gap: 13px;
        padding: 26px 16px;
        text-align: left;
}

body.page-home .trust-item + .trust-item {
border-left: 1px solid var(--border);
}

body.page-home .trust-icon {
display: grid;
        width: 43px;
        height: 43px;
        flex-shrink: 0;
        place-items: center;
        border-radius: 10px;
        background: var(--blue-light);
        color: var(--navy);
        font-size: 1.25rem;
}

body.page-home .trust-item strong {
display: block;
        color: var(--navy-dark);
        font-size: 0.9rem;
}

body.page-home .trust-item span {
display: block;
        margin-top: 2px;
        color: var(--muted);
        font-size: 0.79rem;
}

/* Equipment cards */

body.page-home .equipment-section {
background: var(--background);
}

body.page-home .equipment-header {
display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: column;
        gap: 24px;
        margin-bottom: 28px;
}

/* Keep the hire-range label, heading and description aligned together. */
body.page-home .equipment-header > div {
width: 100%;
        text-align: left;
}

body.page-home .equipment-header .section-heading {
text-align: left;
        margin-left: 0;
        margin-right: 0;
}

body.page-home .equipment-header .section-description {
margin-left: 0;
        margin-right: 0;
        margin-bottom: 0;
        text-align: left;
}

body.page-home .equipment-grid {
display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px;
}

body.page-home .equipment-card {
display: flex;
        flex-direction: column;
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--white);
        box-shadow: 0 5px 18px rgba(10, 32, 56, 0.025);
        transition:
          transform 180ms ease,
          box-shadow 180ms ease;
}

body.page-home .equipment-card:hover {
transform: translateY(-4px);
        box-shadow: var(--shadow);
}

body.page-home .equipment-art {
display: grid;
        min-height: 220px;
        place-items: center;
        padding: 24px;
        background: linear-gradient(140deg, #eaf1f8, #f7f9fc);
}

body.page-home .equipment-art svg {
width: 170px;
        height: 145px;
}

body.page-home .equipment-card-body {
display: flex;
        flex: 1;
        flex-direction: column;
        align-items: flex-start;
        padding: 25px;
}

body.page-home .card-tag {
display: inline-block;
        margin-bottom: 13px;
        padding: 5px 9px;
        border-radius: 5px;
        background: var(--blue-light);
        color: var(--navy);
        font-size: 0.7rem;
        font-weight: 800;
        letter-spacing: 0.6px;
        text-transform: uppercase;
}

body.page-home .card-tag-coming {
background: #f0f2f5;
        color: #68778a;
}

body.page-home .equipment-card h3 {
color: var(--navy-dark);
        font-size: 1.3rem;
        letter-spacing: -0.4px;
}

body.page-home .equipment-card p {
margin-top: 10px;
        color: var(--muted);
        font-size: 0.93rem;
}

body.page-home .card-link {
display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: auto;
        padding-top: 24px;
        color: var(--navy);
        font-size: 0.9rem;
        font-weight: 800;
}

body.page-home .card-link:hover {
text-decoration: underline;
}

body.page-home .coming-card {
border-style: dashed;
        background: rgba(255, 255, 255, 0.65);
}

body.page-home .coming-card .equipment-art {
background: #edf0f4;
}

/* Who we help */

body.page-home .who-grid {
display: grid;
        grid-template-columns: 0.95fr 1.05fr;
        align-items: center;
        gap: 76px;
}

body.page-home .who-visual {
position: relative;
        display: grid;
        min-height: 380px;
        overflow: hidden;
        place-items: center;
        border-radius: 22px;
        background: var(--navy-dark);
}

body.page-home .who-visual::before,
body.page-home .who-visual::after {
position: absolute;
        border: 1px solid rgba(255, 255, 255, 0.13);
        border-radius: 50%;
        content: "";
}

body.page-home .who-visual::before {
width: 320px;
        height: 320px;
}

body.page-home .who-visual::after {
width: 440px;
        height: 440px;
}

body.page-home .who-visual svg {
position: relative;
        z-index: 1;
        width: 210px;
        color: white;
}

body.page-home .who-copy .section-description {
margin-bottom: 25px;
}

body.page-home .benefit-list {
display: grid;
        gap: 18px;
        list-style: none;
}

body.page-home .benefit-list li {
display: flex;
        align-items: flex-start;
        gap: 13px;
}

body.page-home .benefit-list strong {
display: block;
        color: var(--navy-dark);
        font-size: 0.96rem;
}

body.page-home .benefit-list p {
margin-top: 3px;
        color: var(--muted);
        font-size: 0.9rem;
}

/* How it works */

body.page-home .process-section {
background: var(--background);
}

body.page-home .center-heading {
margin-inline: auto;
        text-align: center;
}

body.page-home .center-heading .section-description {
margin-inline: auto;
}

body.page-home .process-grid {
display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 25px;
        margin-top: 48px;
}

body.page-home .process-step {
padding: 28px;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--white);
}

body.page-home .step-number {
display: grid;
        width: 47px;
        height: 47px;
        margin-bottom: 22px;
        place-items: center;
        border-radius: 12px;
        background: var(--navy);
        color: var(--white);
        font-size: 1.05rem;
        font-weight: 800;
}

body.page-home .process-step h3 {
color: var(--navy-dark);
        font-size: 1.1rem;
}

body.page-home .process-step p {
margin-top: 10px;
        color: var(--muted);
        font-size: 0.93rem;
}

/* Enquiry CTA */

body.page-home .cta-section {
padding: 78px 0;
}

body.page-home .cta-panel {
position: relative;
        overflow: hidden;
        padding: 58px;
        border-radius: 22px;
        background: var(--navy);
        color: var(--white);
}

body.page-home .cta-panel::after {
position: absolute;
        top: -140px;
        right: -80px;
        width: 340px;
        height: 340px;
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 50%;
        box-shadow:
          0 0 0 40px rgba(255, 255, 255, 0.025),
          0 0 0 80px rgba(255, 255, 255, 0.025);
        content: "";
}

body.page-home .cta-content {
position: relative;
        z-index: 1;
        max-width: 680px;
}

body.page-home .cta-content .section-label {
color: #d4e3f3;
}

body.page-home .cta-content h2 {
font-size: clamp(2rem, 4vw, 3rem);
        line-height: 1.15;
        letter-spacing: -1px;
}

body.page-home .cta-content p {
max-width: 560px;
        margin-top: 17px;
        color: #d7e2ef;
}

body.page-home .cta-content .btn {
margin-top: 27px;
}

/* Contact */

body.page-home .contact-section {
background: var(--background);
}

body.page-home .contact-grid {
display: grid;
        grid-template-columns: 0.85fr 1.15fr;
        align-items: start;
        gap: 65px;
}

body.page-home .contact-info {
margin-top: 28px;
}

body.page-home .contact-detail {
display: flex;
        align-items: flex-start;
        gap: 13px;
        margin-top: 21px;
}

body.page-home .contact-detail .trust-icon {
width: 40px;
        height: 40px;
}

body.page-home .contact-detail strong {
display: block;
        color: var(--navy-dark);
        font-size: 0.92rem;
}

body.page-home .contact-detail p,
body.page-home .contact-detail a {
color: var(--muted);
        font-size: 0.9rem;
        overflow-wrap: anywhere;
}

body.page-home .contact-detail a:hover {
color: var(--navy);
        text-decoration: underline;
}

body.page-home .contact-form {
padding: 32px;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--white);
        box-shadow: var(--shadow);
}

body.page-home .contact-form h3 {
color: var(--navy-dark);
        font-size: 1.4rem;
}

body.page-home .form-intro {
margin: 7px 0 24px;
        color: var(--muted);
        font-size: 0.9rem;
}

body.page-home .form-grid {
display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 17px;
}

body.page-home .form-field {
display: flex;
        flex-direction: column;
        gap: 7px;
}

body.page-home .form-field.full-width {
grid-column: 1 / -1;
}

body.page-home .form-field label {
color: #344458;
        font-size: 0.85rem;
        font-weight: 700;
}

body.page-home .form-field input,
body.page-home .form-field select,
body.page-home .form-field textarea {
width: 100%;
        min-height: 47px;
        padding: 12px 13px;
        border: 1px solid #d3dce6;
        border-radius: 7px;
        outline: none;
        background: var(--white);
        color: var(--text);
        font-size: 0.92rem;
}

body.page-home .form-field textarea {
min-height: 120px;
        resize: vertical;
}

body.page-home .form-field input:focus,
body.page-home .form-field select:focus,
body.page-home .form-field textarea:focus {
border-color: var(--navy);
        box-shadow: 0 0 0 3px rgba(16, 62, 105, 0.1);
}

body.page-home .contact-form .btn {
width: 100%;
        margin-top: 20px;
}

body.page-home .form-note {
margin-top: 13px;
        color: var(--muted);
        font-size: 0.77rem;
        text-align: center;
}

/* Success modal */

body.page-home .success-modal {
display: none;
        position: fixed;
        inset: 0;
        z-index: 9999;
        align-items: center;
        justify-content: center;
        padding: 20px;
}

body.page-home .success-modal.is-visible {
display: flex;
}

body.page-home .modal-overlay {
position: absolute;
        inset: 0;
        background: rgba(10, 25, 40, 0.65);
        backdrop-filter: blur(4px);
}

body.page-home .modal-content {
position: relative;
        width: 100%;
        max-width: 420px;
        padding: 40px 30px;
        border-radius: 18px;
        background: #fff;
        text-align: center;
        box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22);
        animation: modal-appear 0.25s ease-out;
}

body.page-home .modal-icon {
display: flex;
        align-items: center;
        justify-content: center;
        width: 62px;
        height: 62px;
        margin: 0 auto 20px;
        border-radius: 50%;
        background: #e7f5ec;
        color: #23834b;
        font-size: 32px;
        font-weight: 700;
}

body.page-home .modal-content h2 {
margin: 0 0 12px;
        color: var(--navy-dark);
        font-size: 1.8rem;
}

body.page-home .modal-content p {
margin: 0 0 26px;
        color: #64748b;
        line-height: 1.7;
}

body.page-home .modal-content .btn {
cursor: pointer;
}

@keyframes modal-appear {
        from {
          opacity: 0;
          transform: translateY(12px) scale(0.97);
        }
        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

@media (prefers-reduced-motion: reduce) {
body.page-home .modal-content {
animation: none;
}
}

/* Footer */

body.page-home .site-footer {
padding: 38px 0;
        background: var(--navy-dark);
        color: #d1dce8;
}

body.page-home .footer-top {
display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 28px;
        padding-bottom: 28px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}

body.page-home .footer-brand .brand-name {
color: var(--white);
}

body.page-home .footer-brand .brand-subtitle {
color: #b9cce0;
}

body.page-home .footer-brand .brand-mark {
color: var(--white);
}

body.page-home .footer-nav {
display: flex;
        flex-wrap: wrap;
        gap: 22px;
        font-size: 0.85rem;
}

body.page-home .footer-nav a:hover {
color: var(--white);
        text-decoration: underline;
}

body.page-home .footer-bottom {
display: flex;
        justify-content: space-between;
        gap: 16px;
        padding-top: 22px;
        color: #a9bacd;
        font-size: 0.8rem;
}

/* Accessibility */

body.page-home a:focus-visible,
body.page-home button:focus-visible {
outline: 3px solid #8ab9e8;
        outline-offset: 4px;
}

body.page-home .sr-only {
position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        clip-path: inset(50%);
}

/* Responsive layouts */

@media (max-width: 900px) {
body.page-home .nav-links {
gap: 16px;
}

body.page-home .nav-links a:not(.btn) {
font-size: 0.84rem;
}

body.page-home .hero-grid {
gap: 32px;
}

body.page-home .hero h1 {
font-size: clamp(2.7rem, 6vw, 4rem);
}

body.page-home .who-grid {
gap: 38px;
}

body.page-home .equipment-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.page-home .contact-grid {
gap: 35px;
}
}

@media (max-width: 680px) {
body.page-home .container {
width: min(var(--max-width), calc(100% - 32px));
}

body.page-home .section {
padding: 64px 0;
}

body.page-home .navbar {
min-height: 72px;
}

body.page-home .brand-mark {
width: 39px;
          height: 39px;
}

body.page-home .brand-name {
font-size: 1.05rem;
}

body.page-home .brand-subtitle {
font-size: 0.56rem;
}

body.page-home .menu-toggle {
display: inline-grid;
          place-items: center;
}

body.page-home .nav-links {
position: absolute;
          top: calc(100% + 1px);
          right: 0;
          left: 0;
          display: none;
          align-items: stretch;
          gap: 0;
          padding: 10px 20px 20px;
          border-bottom: 1px solid var(--border);
          background: var(--white);
          box-shadow: 0 12px 18px rgba(10, 32, 56, 0.06);
}

body.page-home .nav-links.is-open {
display: flex;
          flex-direction: column;
}

body.page-home .nav-links li a:not(.btn) {
display: block;
          padding: 12px 0;
          font-size: 0.95rem;
}

body.page-home .nav-links .btn {
margin-top: 8px;
}

body.page-home .hero {
padding: 59px 0 54px;
}

body.page-home .hero-grid {
grid-template-columns: 1fr;
          gap: 36px;
}

body.page-home .hero h1 {
max-width: 520px;
          font-size: clamp(2.65rem, 11vw, 4rem);
          letter-spacing: -2px;
}

body.page-home .hero-text {
font-size: 1rem;
}

body.page-home .hero-visual {
min-height: 330px;
}

body.page-home .trust-grid {
grid-template-columns: 1fr;
          padding: 8px 0;
}

body.page-home .trust-item {
justify-content: flex-start;
          padding: 16px 8px;
}

body.page-home .trust-item + .trust-item {
border-top: 1px solid var(--border);
          border-left: 0;
}



body.page-home .equipment-grid {
grid-template-columns: 1fr;
}

body.page-home .equipment-art {
min-height: 205px;
}

body.page-home .who-grid {
grid-template-columns: 1fr;
          gap: 35px;
}

body.page-home .who-visual {
min-height: 290px;
}

body.page-home .process-grid {
grid-template-columns: 1fr;
          gap: 15px;
          margin-top: 34px;
}

body.page-home .process-step {
padding: 24px;
}

body.page-home .cta-section {
padding: 55px 0;
}

body.page-home .cta-panel {
padding: 36px 25px;
}

body.page-home .contact-grid {
grid-template-columns: 1fr;
          gap: 32px;
}

body.page-home .contact-form {
padding: 23px 19px;
}

body.page-home .form-grid {
grid-template-columns: 1fr;
}

body.page-home .form-field.full-width {
grid-column: auto;
}

body.page-home .footer-top,
body.page-home .footer-bottom {
align-items: flex-start;
          flex-direction: column;
}

body.page-home .footer-nav {
gap: 17px;
}
}

@media (prefers-reduced-motion: reduce) {
body.page-home, body.page-home *,
body.page-home *::before,
body.page-home *::after {
scroll-behavior: auto !important;
          transition-duration: 0.01ms !important;
}
}


/* ===== Uniform shared header/footer components across all pages ===== */
body.page-home .site-header, body.page-about .site-header, body.page-equipment .site-header, body.page-how-it-works .site-header {
  position: sticky; top: 0; z-index: 1000; background: rgba(255,255,255,.97);
  border-bottom: 1px solid #dce4ed; backdrop-filter: blur(14px);
}
body.page-home .site-header .container, body.page-about .site-header .container, body.page-equipment .site-header .container, body.page-how-it-works .site-header .container,
body.page-home .site-footer .container, body.page-about .site-footer .container, body.page-equipment .site-footer .container, body.page-how-it-works .site-footer .container {
  width: min(1160px, calc(100% - 40px)); margin-inline: auto;
}
body.page-home .site-header .navbar, body.page-about .site-header .navbar, body.page-equipment .site-header .navbar, body.page-how-it-works .site-header .navbar {
  display: flex; min-height: 82px; align-items: center; justify-content: space-between; gap: 24px; position: relative;
}
body.page-home .site-header .brand, body.page-about .site-header .brand, body.page-equipment .site-header .brand, body.page-how-it-works .site-header .brand,
body.page-home .site-footer .brand, body.page-about .site-footer .brand, body.page-equipment .site-footer .brand, body.page-how-it-works .site-footer .brand {
  display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; text-decoration: none;
}
body.page-home .site-header .brand-mark, body.page-about .site-header .brand-mark, body.page-equipment .site-header .brand-mark, body.page-how-it-works .site-header .brand-mark,
body.page-home .site-footer .brand-mark, body.page-about .site-footer .brand-mark, body.page-equipment .site-footer .brand-mark, body.page-how-it-works .site-footer .brand-mark {
  display: block; width: 45px; height: 45px; object-fit: contain;
}
body.page-home .site-header .brand-copy, body.page-about .site-header .brand-copy, body.page-equipment .site-header .brand-copy, body.page-how-it-works .site-header .brand-copy,
body.page-home .site-footer .brand-copy, body.page-about .site-footer .brand-copy, body.page-equipment .site-footer .brand-copy, body.page-how-it-works .site-footer .brand-copy { display:flex; flex-direction:column; line-height:1.05; }
body.page-home .site-header .brand-name, body.page-about .site-header .brand-name, body.page-equipment .site-header .brand-name, body.page-how-it-works .site-header .brand-name { color:#0a2038; font-size:1.12rem; font-weight:900; letter-spacing:-.4px; }
body.page-home .site-header .brand-subtitle, body.page-about .site-header .brand-subtitle, body.page-equipment .site-header .brand-subtitle, body.page-how-it-works .site-header .brand-subtitle { color:#103e69; margin-top:4px; font-size:.63rem; font-weight:800; letter-spacing:1.1px; }
body.page-home .site-header .nav-links, body.page-about .site-header .nav-links, body.page-equipment .site-header .nav-links, body.page-how-it-works .site-header .nav-links { display:flex; align-items:center; gap:22px; margin:0; padding:0; list-style:none; }
body.page-home .site-header .nav-links a, body.page-about .site-header .nav-links a, body.page-equipment .site-header .nav-links a, body.page-how-it-works .site-header .nav-links a { color:#405166; font-size:.9rem; font-weight:600; text-decoration:none; transition:color 150ms ease; }
body.page-home .site-header .nav-links a:hover, body.page-about .site-header .nav-links a:hover, body.page-equipment .site-header .nav-links a:hover, body.page-how-it-works .site-header .nav-links a:hover { color:#103e69; }
body.page-home .site-header .header-enquiry, body.page-about .site-header .header-enquiry, body.page-equipment .site-header .header-enquiry, body.page-how-it-works .site-header .header-enquiry { padding:10px 15px; border-radius:8px; background:#103e69; color:#fff !important; }
body.page-home .site-header .menu-toggle, body.page-about .site-header .menu-toggle, body.page-equipment .site-header .menu-toggle, body.page-how-it-works .site-header .menu-toggle { display:none; width:44px; height:44px; border:1px solid #dce4ed; border-radius:8px; background:#fff; color:#103e69; font-size:1.35rem; cursor:pointer; }
body.page-home .site-footer, body.page-about .site-footer, body.page-equipment .site-footer, body.page-how-it-works .site-footer { padding:34px 0; background:#0a2038; color:#d1dce8; text-align:left; }
body.page-home .site-footer .footer-top, body.page-about .site-footer .footer-top, body.page-equipment .site-footer .footer-top, body.page-how-it-works .site-footer .footer-top { display:flex; align-items:center; justify-content:space-between; gap:28px; padding-bottom:25px; border-bottom:1px solid rgba(255,255,255,.15); }
body.page-home .site-footer .brand-name, body.page-about .site-footer .brand-name, body.page-equipment .site-footer .brand-name, body.page-how-it-works .site-footer .brand-name { color:#fff; font-size:1.05rem; font-weight:900; }
body.page-home .site-footer .brand-subtitle, body.page-about .site-footer .brand-subtitle, body.page-equipment .site-footer .brand-subtitle, body.page-how-it-works .site-footer .brand-subtitle { color:#b9cce0; margin-top:4px; font-size:.63rem; font-weight:800; letter-spacing:1.1px; }
body.page-home .site-footer .footer-nav, body.page-about .site-footer .footer-nav, body.page-equipment .site-footer .footer-nav, body.page-how-it-works .site-footer .footer-nav { display:flex; flex-wrap:wrap; gap:22px; font-size:.88rem; }
body.page-home .site-footer .footer-nav a, body.page-about .site-footer .footer-nav a, body.page-equipment .site-footer .footer-nav a, body.page-how-it-works .site-footer .footer-nav a { color:#d1dce8; text-decoration:none; }
body.page-home .site-footer .footer-nav a:hover, body.page-about .site-footer .footer-nav a:hover, body.page-equipment .site-footer .footer-nav a:hover, body.page-how-it-works .site-footer .footer-nav a:hover { color:#fff; text-decoration:underline; }
body.page-home .site-footer .footer-bottom, body.page-about .site-footer .footer-bottom, body.page-equipment .site-footer .footer-bottom, body.page-how-it-works .site-footer .footer-bottom { display:flex; justify-content:space-between; gap:16px; padding-top:20px; }
body.page-home .site-footer p, body.page-about .site-footer p, body.page-equipment .site-footer p, body.page-how-it-works .site-footer p { margin:0; color:#d1dce8; font-size:14px; }
@media (max-width: 760px) {
  body.page-home .site-header .navbar, body.page-about .site-header .navbar, body.page-equipment .site-header .navbar, body.page-how-it-works .site-header .navbar { min-height:72px; }
  body.page-home .site-header .brand-mark, body.page-about .site-header .brand-mark, body.page-equipment .site-header .brand-mark, body.page-how-it-works .site-header .brand-mark { width:39px; height:39px; }
  body.page-home .site-header .brand-name, body.page-about .site-header .brand-name, body.page-equipment .site-header .brand-name, body.page-how-it-works .site-header .brand-name { font-size:1rem; }
  body.page-home .site-header .menu-toggle, body.page-about .site-header .menu-toggle, body.page-equipment .site-header .menu-toggle, body.page-how-it-works .site-header .menu-toggle { display:inline-grid; place-items:center; flex-shrink:0; }
  body.page-home .site-header .nav-links, body.page-about .site-header .nav-links, body.page-equipment .site-header .nav-links, body.page-how-it-works .site-header .nav-links { display:none; position:absolute; top:100%; left:0; right:0; z-index:1001; flex-direction:column; align-items:stretch; gap:0; padding:10px 16px 16px; background:#fff; border:1px solid #dce4ed; box-shadow:0 12px 20px rgba(10,32,56,.08); }
  body.page-home .site-header .nav-links.is-open, body.page-about .site-header .nav-links.is-open, body.page-equipment .site-header .nav-links.is-open, body.page-how-it-works .site-header .nav-links.is-open { display:flex; }
  body.page-home .site-header .nav-links a, body.page-about .site-header .nav-links a, body.page-equipment .site-header .nav-links a, body.page-how-it-works .site-header .nav-links a { display:block; padding:12px 8px; border-bottom:1px solid #edf1f5; }
  body.page-home .site-header .nav-links a:last-child, body.page-about .site-header .nav-links a:last-child, body.page-equipment .site-header .nav-links a:last-child, body.page-how-it-works .site-header .nav-links a:last-child { border-bottom:0; }
  body.page-home .site-footer .footer-top, body.page-about .site-footer .footer-top, body.page-equipment .site-footer .footer-top, body.page-how-it-works .site-footer .footer-top, body.page-home .site-footer .footer-bottom, body.page-about .site-footer .footer-bottom, body.page-equipment .site-footer .footer-bottom, body.page-how-it-works .site-footer .footer-bottom { flex-direction:column; align-items:flex-start; }
  body.page-home .site-footer .footer-nav, body.page-about .site-footer .footer-nav, body.page-equipment .site-footer .footer-nav, body.page-how-it-works .site-footer .footer-nav { gap:14px 18px; }
}