/*
Theme Name: Junior Painting One Page
Theme URI: https://juniorpaint.com
Author: NX Printing and Design
Description: A fast, clean, single-page WordPress theme for Junior Painting. No navigation, buttons, outbound links, forms, external fonts, or JavaScript dependencies. Update core business information in Appearance > Customize > Junior Painting Details.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: junior-painting-one-page
*/

:root {
  --ink: #192d33;
  --ink-soft: #4c5b5e;
  --muted: #69777a;
  --orange: #ed6a38;
  --orange-deep: #d35428;
  --peach: #fff0e7;
  --cream: #faf8f4;
  --line: #e4e4df;
  --white: #ffffff;
  --radius: 22px;
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
svg { display:block; }
::selection { background: #f9c9b4; color: #152a31; }
.jp-container { width: min(1168px, calc(100% - 88px)); margin-inline: auto; }
.jp-header { background: var(--white); border-bottom: 1px solid var(--line); }
.jp-header-inner { display:flex; align-items:center; justify-content:space-between; min-height:100px; gap:24px; }
.jp-logo { display:flex; gap:14px; align-items:center; flex-shrink:0; }
.jp-mark { width:52px; height:52px; border-radius:14px; background: var(--orange); display:grid; place-items:center; color:#fff; transform:rotate(-4deg); box-shadow:0 7px 0 #fce5da; }
.jp-mark svg { width:35px; height:35px; transform:rotate(4deg); }
.jp-logo-text { display:flex; flex-direction:column; gap:2px; font-size:20px; font-weight:860; letter-spacing:-0.7px; line-height:1.06; }
.jp-logo-text span:last-child { font-size:12px; font-weight:760; color:var(--orange-deep); letter-spacing:3.5px; }
.jp-header-location { text-align:right; color:var(--ink-soft); text-transform:uppercase; font-size:11px; font-weight:750; letter-spacing:2px; line-height:1.7; }
.jp-hero { position:relative; overflow:hidden; background:var(--white); }
.jp-hero-inner { display:grid; grid-template-columns:minmax(0, 1.04fr) minmax(0, .96fr); align-items:center; gap:52px; min-height:570px; padding-top:50px; padding-bottom:58px; }
.jp-eyebrow { display:flex; align-items:center; gap:10px; color:var(--orange-deep); font-size:12px; font-weight:860; letter-spacing:2.1px; text-transform:uppercase; margin-bottom:22px; }
.jp-eyebrow:before { content:""; width:25px; height:3px; background:var(--orange); border-radius:5px; }
.jp-hero h1 { margin:0; font-size:clamp(46px, 5vw, 74px); line-height:1.055; letter-spacing:-3.9px; font-weight:850; max-width:640px; }
.jp-hero h1 span { color:var(--orange); }
.jp-intro { margin:25px 0 0; max-width:465px; font-size:18px; line-height:1.72; color:var(--ink-soft); }
.jp-hero-contact { margin-top:31px; display:flex; align-items:center; gap:14px; padding:18px 21px; width:fit-content; border:1px solid #f1d8cc; background:#fff9f5; border-radius:14px; }
.jp-phone-badge { display:grid; place-items:center; height:45px; width:45px; border-radius:12px; background:var(--orange); color:#fff; flex:0 0 auto; }
.jp-phone-badge svg { width:23px; height:23px; }
.jp-contact-kicker { color:var(--muted); font-size:10px; font-weight:800; letter-spacing:1.65px; text-transform:uppercase; margin-bottom:4px; }
.jp-phone-number { font-size:24px; line-height:1.1; font-weight:840; letter-spacing:-.7px; color:var(--ink); white-space:nowrap; }
.jp-hero-art { width:100%; position:relative; }
.jp-illustration { width:100%; height:auto; overflow:visible; }
.jp-feature-strip { background:var(--ink); color:#fff; }
.jp-feature-inner { display:grid; grid-template-columns:repeat(3, 1fr); align-items:center; min-height:104px; }
.jp-feature { display:flex; align-items:center; gap:15px; padding:18px 26px; border-right:1px solid rgba(255,255,255,.18); }
.jp-feature:first-child { padding-left:0; }
.jp-feature:last-child { border-right:0; }
.jp-feature-icon { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:rgba(237,106,56,.14); color:#ff956c; flex:0 0 auto; }
.jp-feature-icon svg { width:21px; height:21px; }
.jp-feature-title { font-size:15px; line-height:1.28; font-weight:740; }
.jp-feature-detail { font-size:12px; color:#b5c2c5; margin-top:3px; }
.jp-services { padding:99px 0 96px; }
.jp-section-intro { text-align:center; max-width:700px; margin:0 auto 38px; }
.jp-section-kicker { text-transform:uppercase; font-size:11px; font-weight:850; letter-spacing:2.4px; color:var(--orange-deep); }
.jp-section-intro h2 { margin:12px 0 11px; font-size:clamp(32px,3.4vw,46px); line-height:1.12; letter-spacing:-1.8px; font-weight:830; }
.jp-section-intro p { color:var(--ink-soft); font-size:16px; line-height:1.7; margin:0; }
.jp-service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:21px; }
.jp-service-card { background:#fff; padding:35px 30px 32px; border:1px solid var(--line); border-radius:20px; min-height:230px; box-shadow:0 7px 24px rgba(25,45,51,.025); }
.jp-service-symbol { color:var(--orange); margin-bottom:27px; width:45px; height:45px; }
.jp-service-symbol svg { width:100%; height:100%; }
.jp-service-card h3 { font-size:21px; font-weight:800; letter-spacing:-.6px; margin:0 0 10px; }
.jp-service-card p { font-size:15px; line-height:1.68; color:var(--ink-soft); margin:0; }
.jp-bottom { background:#f7eee8; }
.jp-bottom-inner { display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; padding:80px 0; }
.jp-about h2 { font-size:clamp(30px, 3.1vw, 42px); line-height:1.15; letter-spacing:-1.7px; margin:13px 0 17px; }
.jp-about p { max-width:530px; color:var(--ink-soft); font-size:16px; line-height:1.78; margin:0; }
.jp-info-panel { background:var(--white); border:1px solid #f0ded4; border-radius:20px; padding:35px 37px; box-shadow:0 15px 40px rgba(73,36,19,.04); }
.jp-info-panel .jp-section-kicker { margin-bottom:13px; }
.jp-info-panel h2 { font-size:28px; letter-spacing:-1px; margin:0 0 12px; }
.jp-big-phone { font-size:clamp(28px,3.4vw,39px); font-weight:850; letter-spacing:-1.4px; color:var(--orange-deep); white-space:nowrap; }
.jp-info-divider { border-top:1px solid var(--line); margin:22px 0; }
.jp-info-label { font-size:11px; color:var(--muted); font-weight:800; text-transform:uppercase; letter-spacing:1.7px; margin-bottom:6px; }
.jp-info-area { color:var(--ink); font-weight:670; font-size:16px; line-height:1.4; }
.jp-footer { background:var(--ink); color:#d2dcde; }
.jp-footer-inner { display:flex; justify-content:space-between; align-items:center; gap:20px; min-height:68px; font-size:12px; }
.jp-footer strong { font-weight:750; letter-spacing:.2px; color:#fff; }
.jp-footer span { color:#c0cbcd; }
@media (max-width: 1080px) {
  .jp-hero-inner { gap:20px; min-height:530px; }
  .jp-hero h1 { letter-spacing:-2.8px; }
  .jp-service-card { padding:30px 24px; }
}
@media (max-width: 800px) {
  .jp-container { width:min(680px, calc(100% - 42px)); }
  .jp-header-inner { min-height:82px; }
  .jp-header-location { font-size:10px; letter-spacing:1.3px; }
  .jp-hero-inner { grid-template-columns:1fr; padding-top:62px; padding-bottom:60px; gap:25px; }
  .jp-hero h1 { max-width:660px; font-size:clamp(45px,8.5vw,68px); }
  .jp-intro { max-width:580px; }
  .jp-hero-art { max-width:560px; margin:0 auto; }
  .jp-feature { padding:17px 12px; gap:9px; }
  .jp-feature-icon { width:32px; height:32px; }
  .jp-feature-title { font-size:13px; }
  .jp-feature-detail { font-size:11px; }
  .jp-services { padding:73px 0 75px; }
  .jp-service-grid { gap:12px; }
  .jp-service-card { padding:26px 20px; }
  .jp-service-card h3 { font-size:18px; }
  .jp-bottom-inner { gap:25px; padding:62px 0; }
  .jp-info-panel { padding:26px; }
}
@media (max-width: 600px) {
  .jp-container { width:calc(100% - 36px); }
  .jp-header-inner { min-height:79px; }
  .jp-logo { gap:10px; }
  .jp-mark { width:42px; height:42px; border-radius:11px; }
  .jp-mark svg { width:29px; height:29px; }
  .jp-logo-text { font-size:17px; }
  .jp-logo-text span:last-child { font-size:10px; letter-spacing:2.8px; }
  .jp-header-location { font-size:9px; line-height:1.6; max-width:138px; }
  .jp-hero-inner { padding-top:52px; padding-bottom:38px; }
  .jp-eyebrow { font-size:10px; letter-spacing:1.7px; margin-bottom:20px; }
  .jp-hero h1 { font-size:clamp(43px,11.3vw,58px); line-height:1.08; letter-spacing:-2.6px; }
  .jp-intro { font-size:16px; line-height:1.65; margin-top:19px; }
  .jp-hero-contact { margin-top:25px; padding:14px 15px; gap:12px; }
  .jp-phone-badge { width:41px; height:41px; }
  .jp-phone-number { font-size:22px; }
  .jp-contact-kicker { font-size:9px; letter-spacing:1.05px; }
  .jp-hero-art { margin-top:2px; }
  .jp-feature-inner { grid-template-columns:1fr; padding:8px 0; }
  .jp-feature { border-right:0; border-bottom:1px solid rgba(255,255,255,.13); padding:14px 0; }
  .jp-feature:last-child { border-bottom:0; }
  .jp-feature-icon { width:35px; height:35px; }
  .jp-feature-title { font-size:14px; }
  .jp-services { padding:69px 0 70px; }
  .jp-section-intro { margin-bottom:28px; }
  .jp-section-intro h2 { font-size:34px; letter-spacing:-1.3px; }
  .jp-section-intro p { font-size:15px; }
  .jp-service-grid { grid-template-columns:1fr; gap:13px; }
  .jp-service-card { min-height:0; padding:24px 25px 27px; }
  .jp-service-symbol { width:37px; height:37px; margin-bottom:16px; }
  .jp-service-card h3 { font-size:20px; margin-bottom:6px; }
  .jp-bottom-inner { grid-template-columns:1fr; gap:32px; padding:64px 0; }
  .jp-about h2 { font-size:35px; }
  .jp-about p { font-size:15px; }
  .jp-info-panel { padding:28px; }
  .jp-big-phone { font-size:33px; }
  .jp-footer-inner { align-items:start; flex-direction:column; justify-content:center; padding:18px 0; gap:5px; }
}
@media (max-width: 360px) {
  .jp-container { width:calc(100% - 30px); }
  .jp-header-location { max-width:100px; }
  .jp-hero h1 { font-size:39px; }
  .jp-phone-number { font-size:21px; }
  .jp-big-phone { font-size:30px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }