/*
Theme Name: Jump Up Safari
Description: Landing page for private snowmobile safaris in Lahti.
Version: 1.5
Requires PHP: 7.4
*/

:root{color-scheme:light;--ink:#15272b;--deep:#10283f;--snow:#f3f7fa;--sun:#ffc15d;--muted:#4d6468;--line:#cad4ce;--button-text:#15272b;--contact:#e3edf5}
*{box-sizing:border-box}body{margin:0;background:var(--snow);color:var(--ink);font-family:system-ui,sans-serif;line-height:1.55}a{color:inherit}a:focus-visible{outline:3px solid #c46c13;outline-offset:5px}.wrap{width:min(1180px,calc(100% - 64px));margin:auto}.top{background:var(--deep);color:white}.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:84px;border-bottom:1px solid #ffffff2c}.brand{font-weight:850;text-decoration:none;letter-spacing:.12em;text-transform:uppercase;display:flex;align-items:center;gap:12px;font-size:.9rem}.mark{display:grid;place-items:center;color:var(--sun);width:34px;height:34px;border:1px solid #ffffff60;border-radius:50%}.navlinks{display:flex;gap:26px;font-size:.9rem}.navlinks a{text-decoration:none}.navlinks a:hover{text-decoration:underline}.hero{display:grid;grid-template-columns:1.08fr 1fr;align-items:center;gap:50px;padding-block:48px 58px}.eyebrow{font-size:.75rem;letter-spacing:.19em;text-transform:uppercase;font-weight:800;margin:0 0 20px}.hero .eyebrow{color:var(--sun)}h1,h2,h3,p{margin-top:0}h1,h2{font-family:Georgia,serif;font-weight:500;letter-spacing:-.055em;line-height:1.01}h1{font-size:clamp(3rem,7vw,6.15rem);margin-bottom:24px}h1 em{color:var(--sun);font-weight:500}h2{font-size:clamp(2.4rem,4.5vw,4.2rem);margin-bottom:20px}.lead{color:#dde8e5;font-size:1.12rem;max-width:35ch;margin-bottom:28px}.cta{display:inline-flex;align-items:center;gap:18px;background:var(--sun);color:var(--button-text);border-radius:3px;padding:13px 20px;font-weight:750;text-decoration:none}.cta:hover{filter:brightness(1.08)}.hero figure{margin:0;position:relative}.hero img{display:block;width:100%;height:clamp(410px,48vw,580px);object-fit:cover;object-position:52% 52%;border-radius:4px}.hero figcaption{position:absolute;bottom:14px;left:14px;background:var(--snow);color:var(--ink);padding:6px 11px;font-size:.72rem;font-weight:750;letter-spacing:.07em;text-transform:uppercase}.details{padding-block:68px}.intro{display:grid;grid-template-columns:1fr .85fr;gap:48px;align-items:end}.intro p:last-child{max-width:51ch;color:var(--muted);margin-bottom:23px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:22px 0 0;padding:0;list-style:none}.steps li{border-top:1px solid var(--line);padding-top:17px}.steps span{font-weight:800;font-size:.78rem;letter-spacing:.12em;color:#805213}.steps h3{margin:8px 0 5px}.steps p{color:var(--muted);margin-bottom:0}.contact{background:var(--contact);padding-block:60px}.contact .wrap{display:flex;gap:22px;align-items:center;justify-content:space-between}.contact p:last-child{margin-bottom:0;max-width:48ch}.contact .cta{flex-shrink:0}footer{background:var(--deep);color:white;padding-block:22px;font-size:.85rem}footer .wrap{display:flex;justify-content:space-between;gap:20px}section{scroll-margin-top:24px}
@media(max-width:760px){.wrap{width:calc(100% - 40px)}.hero,.intro,.steps{grid-template-columns:1fr;gap:20px}.hero{padding-block:34px}.hero img{height:clamp(310px,90vw,460px)}.nav{min-height:68px}.navlinks{gap:12px}.navlinks a:first-child{display:none}.details,.contact{padding-block:42px}.contact .wrap{align-items:flex-start;flex-direction:column}.intro p:last-child{margin-bottom:0}}

.header-contact {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px 22px;
    padding-block: 8px;
    border-bottom: 1px solid #ffffff2c;
    color: #dde8e5;
    font-size: .82rem;
}
.header-contact span {
    overflow-wrap: anywhere;
}
@media (max-width: 760px) {
    .header-contact {
        justify-content: flex-start;
    }
}

.gallery { padding-block: 0 62px; }
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 0;
    margin: 0;
    list-style: none;
}
.gallery-grid img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 4px;
}
@media (max-width: 760px) {
    .gallery { padding-bottom: 42px; }
    .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.inner-page { padding-block: 60px 76px; min-height: 62vh; }
.inner-page h1 { font-size: clamp(2.8rem, 7vw, 5.25rem); }
.inner-intro { max-width: 55ch; color: var(--muted); }
.navlinks a[aria-current=page] { text-decoration: underline; text-underline-offset: 4px; }
.service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 28px; }
.service-card { display: flex; flex-direction: column; align-items: flex-start; padding: 28px; background: var(--contact); border-radius: 4px; }
.service-card h2 { font-size: clamp(2rem, 4vw, 3.1rem); }
.service-card p { flex-grow: 1; }
.contact-person { display: grid; gap: 8px; font-style: normal; }
.enquiry-form { display: grid; gap: 14px; max-width: 38rem; margin-block: 24px; }
.enquiry-form label { display: grid; gap: 5px; font-weight: 650; }
.enquiry-form input:not([type=hidden]), .enquiry-form select, .enquiry-form textarea {
    width: 100%; padding: 10px; border: 1px solid var(--muted); border-radius: 3px; font: inherit;
}
.enquiry-form button { justify-self: start; border: 0; font: inherit; font-weight: 750; cursor: pointer; }
.form-status { background: var(--contact); padding: 12px 16px; max-width: 38rem; }
@media (max-width: 760px) {
    .service-grid { grid-template-columns: 1fr; }
    .nav { flex-wrap: wrap; padding-block: 10px; }
    .navlinks a:first-child { display: inline; }
    .inner-page { padding-block: 40px 52px; }
}