/* ============================================================================ JK REALTY GROUP — INNER-PAGE REGIME (jk-inner.css) The fourth CSS regime, architected to become the ONLY inner-page regime. Scope: every rule is gated on the `.jki` page class (set on ), so this file coexists with styles.css / jk-site.css / embedded pages without collisions during the migration phases. Contract: .agents/specs/2026-07-12-inner-page-template-design.md Tokens: .agents/context/DESIGN.md (approved 2026-07-11 — do not re-derive) Section 1 — tokens + base Section 2 — universal chrome, ported from jk-site.css (locked markup: nav / dropdowns / areas mega / mobile panels / footer / cta bar) Section 3 — type + primitives (eyebrow, display, pills, chips, glass, stat) Section 4 — Gallery slots 1-9 (hero, seam, process, stats, interlude, explanation, proof, FAQ, bookend + contact) Section 5 — motion system (view() timelines; overflow:clip discipline — NEVER overflow:hidden on an ancestor of a view() animation) Section 6 — responsive Section 7 — reduced motion + focus ============================================================================ */ /* ═══ SECTION 1 — TOKENS + BASE ═══ */ .jki{ /* surfaces (30 cinema / 48 paper / 18 surface / 4 red) */ --cinema:#090909; --paper:#f5f3ef; --surface:#fdfdfc; --ink:#14110f; --body-c:#3e3c3a; --mut:#5a534c; --red:#c0392b; --red-dark:#a93226; --red-on-dark:#e35c50; --hairline:rgba(20,17,15,.14); --hairline-d:rgba(255,255,255,.14); /* text on cinema */ --on-c-head:var(--paper); --on-c-lead:rgba(245,243,239,.88); --on-c-mut:rgba(245,243,239,.62); /* radii + depth */ --r-pill:100px; --r-lg:20px; --r-md:14px; --sh-1:0 1px 2px rgba(20,17,15,.04), 0 8px 24px rgba(20,17,15,.06); --sh-2:0 2px 6px rgba(20,17,15,.05), 0 18px 48px rgba(20,17,15,.10); --sh-3:0 12px 28px rgba(9,9,9,.16), 0 32px 80px rgba(9,9,9,.20); /* motion */ --ease:cubic-bezier(.22,1,.36,1); /* space */ --sp-1:8px; --sp-2:16px; --sp-3:28px; --sp-4:48px; --sp-5:80px; --sp-section:clamp(88px, 11vw, 148px); --w-read:1320px; --w-wide:1440px; --w-col:940px; --gut:clamp(24px, 4.8vw, 60px); /* legacy aliases — locked chrome markup and inline styles reference these */ --black:#090909; --white:#f5f5f3; --off-white:#eceae5; /* --gray-3: jk-site.css renders #7e7b78 (its :root value); kept for chrome parity. CLAUDE.md's table still lists the pre-bump #7a7775. */ --gray-1:#e0dedd; --gray-2:#b8b5b2; --gray-3:#7e7b78; --gray-4:#3e3c3a; --gray-5:#1e1d1c; --gray-link-dark:#9a938b; --nav-h:80px; } .jki, .jki *, .jki *::before, .jki *::after{margin:0;padding:0;box-sizing:border-box;} html:has(body.jki){scroll-padding-top:var(--nav-h, 80px);scroll-behavior:smooth;} body.jki{ background:var(--paper);color:var(--ink); font-family:'Montserrat',sans-serif;font-weight:400; -webkit-font-smoothing:antialiased;padding-top:0; } .jki a{color:inherit;text-decoration:none;} .jki img{max-width:100%;display:block;} .jki ::selection{background:var(--red);color:#fff;} .jki .nw{white-space:nowrap;} .jki .nwk{white-space:nowrap;} /* phrase-keep: never breaks, even below 640 (multi-word header phrases like "Real Estate" stay on one line) */ /* ═══ SECTION 2 — UNIVERSAL CHROME (ported from jk-site.css; markup locked) ═══ */ /* nav */ .jki #nav{ position:fixed;top:0;left:0;right:0;z-index:500; height:var(--nav-h);padding:0 60px; display:flex;align-items:center;justify-content:space-between;gap:24px; background:rgba(9,9,9,0.85); backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%); border-bottom:1px solid rgba(255,255,255,0.06); transition:background 0.3s;overflow:visible; } .jki #nav.scrolled{background:rgba(9,9,9,0.96);} .jki .nav-logo-wrap{ font-family:'Cormorant Garamond',serif; font-size:15px;font-weight:400;letter-spacing:0.22em; text-transform:uppercase;color:var(--white); line-height:1.2;text-align:center;text-decoration:none;flex-shrink:0; } .jki .nav-logo-wrap small{display:block;font-family:'Montserrat',sans-serif;font-size:8px;letter-spacing:0.18em;color:#b8b5b2;} .jki .nav-links{display:flex;gap:32px;list-style:none;flex:1;justify-content:center;} .jki .nav-links>li{position:relative;} .jki .nav-links>li>a{ font-size:10px;letter-spacing:0.28em;text-transform:uppercase; color:var(--gray-2);font-weight:400;transition:color 0.25s; padding:8px 0;display:flex;align-items:center;gap:4px;white-space:nowrap;position:relative; } .jki .nav-links>li>a:hover{color:var(--white);} .jki .nav-links>li>a::after{ content:'';position:absolute;bottom:4px;left:0;right:0;height:1px;background:var(--red); transform:scaleX(0);transform-origin:left;transition:transform 0.3s ease; } .jki .nav-links>li>a:hover::after{transform:scaleX(1);} .jki .nav-links>li::before{content:'';position:absolute;top:100%;left:-20px;right:-20px;height:12px;background:transparent;} .jki .nav-dropdown{ position:absolute;top:100%;left:50%;transform:translateX(-50%); background:rgba(9,9,9,0.97);border:1px solid rgba(255,255,255,0.08); box-shadow:0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04); min-width:210px;padding:8px 0 12px; opacity:0;visibility:hidden; transition:opacity 0.2s ease 0.12s,visibility 0.2s ease 0.12s; pointer-events:none;z-index:600; } .jki .nav-links>li:hover .nav-dropdown, .jki .nav-links>li:focus-within .nav-dropdown{opacity:1;visibility:visible;pointer-events:all;} .jki .nav-dropdown a{ display:block;padding:10px 22px; font-size:10px;letter-spacing:0.22em;text-transform:uppercase; color:var(--gray-3);transition:color 0.2s,background 0.2s,padding-left 0.25s; } .jki .nav-dropdown a:hover{color:var(--white);background:rgba(255,255,255,0.06);padding-left:28px;} .jki .nav-cta-btn{ font-size:9px;letter-spacing:0.25em;text-transform:uppercase;font-weight:500; border:1px solid rgba(192,57,43,0.5);padding:10px 22px; color:var(--white);transition:all 0.25s;white-space:nowrap;flex-shrink:0; text-decoration:none;position:relative;overflow:hidden;z-index:1; } .jki .nav-cta-btn::before{ content:'';position:absolute;inset:0;background:var(--red); transform:translateX(-100%);transition:transform 0.3s ease;z-index:-1; } .jki .nav-cta-btn:hover::before{transform:translateX(0);} .jki .hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;min-width:44px;min-height:44px;align-items:center;justify-content:center;background:none;border:none;-webkit-appearance:none;appearance:none;} .jki .hamburger span{display:block;width:24px;height:2px;background:var(--white);transition:all 0.3s;} /* mobile nav + areas panel */ .jki #mobile-nav{ position:fixed;inset:0;background:var(--cinema);z-index:700; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px; transform:translateX(100%);transition:transform 0.5s cubic-bezier(0.77,0,0.175,1); } .jki #mobile-nav.open{transform:translateX(0);} .jki #mobile-nav a{ font-family:'Cormorant Garamond',serif; font-size:clamp(26px,7vw,40px);font-weight:300; color:var(--white);letter-spacing:0.08em;transition:color 0.2s; } .jki #mobile-nav a:hover{color:var(--red);} .jki .mn-close{position:absolute;top:24px;right:28px;font-size:22px;color:var(--white);background:none;border:none;cursor:pointer;min-width:44px;min-height:44px;} .jki .mn-areas-btn{color:var(--white);} .jki .mn-areas-btn:hover{color:var(--red)!important;} .jki #mn-areas{position:fixed;inset:0;background:var(--cinema);color:var(--white);z-index:800;overflow-y:auto;padding:80px 28px 48px;display:none;} .jki #mn-areas.open{display:block;} .jki .mn-areas-back{position:fixed;top:24px;left:28px;font-size:9px;letter-spacing:0.25em;text-transform:uppercase;color:var(--red-on-dark);background:none;border:none;cursor:pointer;min-height:44px;} .jki .mn-county{margin-bottom:28px;} .jki .mn-county-name{ font-size:9px;letter-spacing:0.35em;text-transform:uppercase;color:var(--red-on-dark); margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,0.08); display:flex;justify-content:space-between;align-items:center; } .jki .mn-county-name a{color:var(--red-on-dark);font-size:11px;letter-spacing:0.2em;} .jki .mn-towns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px;} .jki .mn-town{font-size:18px;color:var(--gray-2);padding:5px 0;display:block;} .jki .mn-town:hover{color:var(--white);} /* areas mega dropdown */ .jki .areas-mega{ display:none;position:fixed;top:var(--nav-h);left:50%;transform:translateX(-50%); background:rgba(7,7,7,0.99); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,0.09);border-top:none; min-width:760px;max-width:980px;z-index:9999;pointer-events:all; box-shadow:0 24px 80px rgba(0,0,0,0.7); } .jki #areas-nav-li:hover > .areas-mega, .jki .areas-mega:hover{display:block!important;} .jki .areas-mega-inner{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:320px;} .jki .areas-counties{border-right:1px solid rgba(255,255,255,0.06);padding:12px 0;overflow-y:auto;max-height:420px;} .jki .areas-county-item{ display:block;padding:11px 20px;font-size:10px;letter-spacing:0.2em;text-transform:uppercase; color:var(--gray-2);cursor:pointer;transition:all 0.18s ease; border-left:2px solid transparent;text-decoration:none;white-space:nowrap; } .jki .areas-county-item:hover, .jki .areas-county-item.active{color:var(--white);background:rgba(255,255,255,0.06);border-left-color:var(--red);padding-left:24px;} .jki .areas-towns-panel{display:none;padding:20px 24px;} .jki .areas-towns-panel.active{display:block;} .jki .areas-towns-header{ display:flex;justify-content:space-between;align-items:baseline; margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,0.07); } .jki .areas-towns-header span{font-size:9px;letter-spacing:0.35em;text-transform:uppercase;color:var(--red-on-dark);} .jki .areas-towns-header a{font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--gray-2);text-decoration:none;transition:color 0.2s;} .jki .areas-towns-header a:hover{color:var(--red-on-dark);} .jki .areas-towns-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;} .jki .areas-town-link{ display:block;padding:10px 12px;font-size:12.5px;color:var(--gray-2);text-decoration:none; transition:all 0.18s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:2px; } .jki .areas-town-link:hover{color:var(--white);background:rgba(255,255,255,0.06);padding-left:14px;} .jki .areas-view-all{ display:block;padding:12px 24px;font-size:9px;letter-spacing:0.22em;text-transform:uppercase; color:var(--red-on-dark);text-decoration:none;border-top:1px solid rgba(255,255,255,0.06);margin-top:8px; } .jki .areas-view-all:hover{color:var(--white);} .jki .areas-counties::-webkit-scrollbar{width:3px;} .jki .areas-counties::-webkit-scrollbar-thumb{background:rgba(192,57,43,0.3);} /* footer */ .jki footer{background:var(--cinema);color:var(--white);border-top:1px solid rgba(255,255,255,0.05);padding:72px 60px 36px;position:relative;} .jki footer::before{ content:'';position:absolute;top:0;left:60px;right:60px;height:1px; background:linear-gradient(90deg,transparent,var(--red),transparent);opacity:0.3; } .jki .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px;margin-bottom:60px;} .jki .footer-tagline{font-size:15px;font-weight:300;color:var(--gray-2);line-height:1.8;margin-bottom:24px;} .jki .footer-socials{display:flex;gap:10px;flex-wrap:wrap;} .jki .footer-social{ display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px; border-radius:50%;border:1px solid rgba(255,255,255,0.14);color:var(--gray-2); font-size:12px;letter-spacing:0;line-height:1;transition:all 0.3s; } .jki .footer-social:hover{background:var(--red);border-color:var(--red);color:#fff;transform:translateY(-2px);} .jki .footer-col-title{font-size:11px;letter-spacing:0.35em;text-transform:uppercase;color:var(--red-on-dark);margin-bottom:20px;font-weight:500;} .jki .footer-col ul{list-style:none;} .jki .footer-col ul li{margin-bottom:10px;} .jki .footer-col ul li a{font-size:15px;font-weight:300;color:var(--gray-2);transition:color 0.3s;} .jki .footer-col ul li a:hover{color:var(--white);} .jki .footer-bottom{border-top:1px solid rgba(255,255,255,0.06);padding-top:28px;display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:16px;} .jki .footer-copy{font-size:14px;font-weight:300;color:#cfcdc8;} .jki .footer-legal{font-size:12px;font-weight:300;color:#cfcdc8;max-width:680px;line-height:1.7;} .jki .footer-cross-site a:hover{color:var(--red-on-dark)!important;} .jki .footer-brand,.jki .footer-tagline{overflow-wrap:anywhere;} .jki footer a[href^="mailto:"]{overflow-wrap:anywhere;} /* mobile sticky bar */ .jki #mobile-cta-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:999;background:var(--cinema);border-top:1px solid rgba(192,57,43,0.4);padding:0 0 env(safe-area-inset-bottom);} .jki .mcb-inner{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));} .jki .mcb-btn{ display:flex;flex-direction:column;align-items:center;justify-content:center; padding:12px 6px;font-family:'Montserrat',sans-serif;font-size:11px;letter-spacing:0.14em; text-transform:uppercase;color:var(--gray-2);gap:4px;transition:all 0.25s; border-right:1px solid rgba(255,255,255,0.06);min-height:56px; } .jki .mcb-btn:last-child{border-right:none;} .jki .mcb-btn:hover,.jki .mcb-btn:active{background:rgba(192,57,43,0.12);color:var(--white);} .jki .mcb-btn.call{color:var(--red-on-dark);} .jki .mcb-icon{font-size:17px;line-height:1;} /* scrollbar */ .jki::-webkit-scrollbar,body.jki ::-webkit-scrollbar{width:4px;height:4px;} .jki::-webkit-scrollbar-track,body.jki ::-webkit-scrollbar-track{background:var(--cinema);} .jki::-webkit-scrollbar-thumb,body.jki ::-webkit-scrollbar-thumb{background:rgba(192,57,43,0.4);border-radius:2px;} /* ═══ SECTION 3 — TYPE + PRIMITIVES ═══ */ .jki .jki-eyebrow{ font:600 12px/1.7 'Montserrat',sans-serif;letter-spacing:0.34em;text-transform:uppercase; color:var(--red-on-dark); } .jki .jki-eyebrow.onpaper{color:var(--red);} .jki .jki-display{ font-family:'Cormorant Garamond',serif;font-weight:300; font-size:clamp(52px, 8vw, 128px);line-height:0.96;letter-spacing:-0.02em; color:var(--on-c-head); } .jki .jki-display em{font-style:italic;color:var(--paper);} /* size variant for extra-long single-phrase titles ("Industrial Outdoor Storage"): the 52px floor would overflow one line in the 640-700 band */ .jki .jki-display.long{font-size:clamp(44px, 6.6vw, 104px);} .jki .jki-h2{ font-family:'Cormorant Garamond',serif;font-weight:300; font-size:clamp(38px, 4.2vw, 64px);line-height:1.04;color:var(--ink); } .jki .jki-h2 em{font-style:italic;color:var(--red);} .jki .jki-h2.oncinema{color:var(--on-c-head);} .jki .jki-h2.oncinema em{color:var(--red-on-dark);} /* Accents over a hero/interlude PHOTO go white (--paper) for legibility on any image; red accents live only on paper backgrounds and the solid-dark bookend. */ .jki .jki-interlude .jki-h2.oncinema em{color:var(--paper);} .jki .jki-h3{ font-family:'Cormorant Garamond',serif;font-weight:400; font-size:clamp(26px, 2.6vw, 36px);line-height:1.1;color:var(--ink); } .jki .jki-lead{font:300 21px/1.75 'Montserrat',sans-serif;color:var(--body-c);max-width:58ch;} .jki .jki-lead.oncinema{color:var(--on-c-lead);} .jki .jki-body,.jki .jki-cols p{font:400 19px/1.75 'Montserrat',sans-serif;color:var(--body-c);max-width:68ch;} .jki .jki-quote{ font-family:'EB Garamond',serif;font-style:italic;font-weight:400; font-size:clamp(24px, 2.8vw, 38px);line-height:1.45;color:var(--ink); } .jki .jki-cap{font:500 12px/1.6 'Montserrat',sans-serif;letter-spacing:0.2em;text-transform:uppercase;color:var(--mut);} .jki .jki-cap.oncinema{color:var(--on-c-mut);} /* pills */ .jki .jki-pill{ display:inline-block;border-radius:var(--r-pill);padding:16px 40px; font:600 12px/1.25 'Montserrat',sans-serif;letter-spacing:0.3em;text-transform:uppercase; text-decoration:none;cursor:pointer;border:1px solid transparent; transition:background 0.3s var(--ease),transform 0.3s var(--ease),border-color 0.3s var(--ease),color 0.3s var(--ease); } .jki .jki-pill:hover{transform:translateY(-2px);} .jki .jki-pill.red{background:var(--red);color:#fff;} .jki .jki-pill.red:hover{background:var(--red-dark);} .jki .jki-pill.ink{background:var(--ink);color:var(--paper);} .jki .jki-pill.ink:hover{background:var(--red);color:#fff;} .jki .jki-pill.ghost-l{border-color:rgba(20,17,15,0.3);color:var(--ink);background:transparent;} .jki .jki-pill.ghost-l:hover{border-color:var(--ink);} .jki .jki-pill.ghost-d{border-color:rgba(255,255,255,0.4);color:var(--paper);background:rgba(255,255,255,0.06);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);} .jki .jki-pill.ghost-d:hover{border-color:rgba(255,255,255,0.75);} .jki .jki-pillrow{display:flex;gap:14px;flex-wrap:wrap;align-items:center;} /* chips */ .jki .jki-chip{ display:inline-block;border-radius:var(--r-pill);padding:9px 18px; font:500 11px/1 'Montserrat',sans-serif;letter-spacing:0.18em;text-transform:uppercase; border:1px solid var(--hairline);color:var(--mut);background:var(--surface); text-decoration:none;cursor:pointer; transition:transform 0.3s var(--ease),border-color 0.3s var(--ease),color 0.3s var(--ease); } .jki .jki-chip:hover{transform:translateY(-2px);border-color:var(--red);color:var(--red);} .jki .jki-chip.on{border-color:var(--red);color:var(--red);} .jki .jki-chip.dark{border-color:var(--hairline-d);color:rgba(245,243,239,0.8);background:rgba(255,255,255,0.05);} .jki .jki-chip.dark:hover{border-color:var(--red-on-dark);color:var(--red-on-dark);} /* glass */ .jki .jki-glass{ background:rgba(255,255,255,0.08); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,0.18);border-radius:var(--r-md); color:var(--paper); } /* stat block */ .jki .jki-stat b{font:300 52px/1 'Cormorant Garamond',serif;color:var(--ink);display:block;} .jki .jki-stat b sup{font-size:26px;} .jki .jki-stat span{display:block;font:500 12px/1.4 'Montserrat',sans-serif;letter-spacing:0.26em;text-transform:uppercase;color:var(--mut);margin-top:10px;} /* floating photo frame */ .jki .jki-photo{border-radius:var(--r-lg);box-shadow:var(--sh-2);overflow:clip;background:var(--surface);} .jki .jki-photo>div{width:100%;height:100%;background-size:cover;background-position:center;transition:transform 0.7s var(--ease);} .jki .jki-photo.r43{aspect-ratio:4/3;} .jki .jki-photo.r32{aspect-ratio:3/2;} .jki .jki-photo:hover>div{transform:scale(1.05);} /* hover lift (cards: -4px + one shadow tier) */ .jki .lift{transition:transform 0.3s var(--ease),box-shadow 0.3s var(--ease);} .jki .lift:hover{transform:translateY(-4px);box-shadow:var(--sh-2);} .jki .lift.tier2:hover{box-shadow:var(--sh-3);} /* link list slide */ .jki .jki-linklist a{ display:block;padding:16px 0;border-top:1px solid var(--hairline); font:500 13px/1.4 'Montserrat',sans-serif;letter-spacing:0.14em;text-transform:uppercase; color:var(--ink);transition:padding-left 0.3s var(--ease),color 0.3s var(--ease); } .jki .jki-linklist a:hover{padding-left:14px;color:var(--red);} /* ═══ SECTION 4 — GALLERY SLOTS ═══ */ /* slot 1 — cinema hero */ .jki .jki-hero{ position:relative;min-height:92vh; display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center; background:var(--cinema);overflow:clip; padding:calc(var(--nav-h) + clamp(56px,8vh,104px)) var(--gut) clamp(200px,26vh,280px); } .jki .jki-hero-media{position:absolute;inset:0;overflow:clip;} .jki .jki-hero-img{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1);} .jki .jki-hero-scrim{position:absolute;inset:0;background:linear-gradient(to top, rgba(9,9,9,.88), rgba(9,9,9,.3));} .jki .jki-hero>*:not(.jki-hero-media):not(.jki-hero-scrim){position:relative;z-index:2;} .jki .jki-hero .jki-display{margin:18px 0 26px;} .jki .jki-hero .jki-lead{margin:0 auto;} .jki .jki-hero .jki-pillrow{justify-content:center;margin-top:38px;} /* slot 2 — seam bridge (the signature move; rises out of the hero) */ /* flow-root: BFC stops the frame's negative margin collapsing through the wrapper (which would slide the paper up and un-bridge the seam); it does NOT clip, so the frame still overhangs into the hero */ .jki .jki-seam{background:var(--paper);padding:0 var(--gut);display:flow-root;} .jki .jki-seam-frame{ position:relative;z-index:3; margin:clamp(-190px, -14vw, -120px) auto 0; max-width:980px;border-radius:var(--r-lg);box-shadow:var(--sh-3);overflow:clip; } /* seam photo is an so its bytes never contend with the LCP hero image on the throttled first load (measured +9 mobile perf) */ .jki .jki-seam-frame>.ph{aspect-ratio:21/9;background-size:cover;background-position:center;transition:transform 0.7s var(--ease);} .jki .jki-seam-frame>img.ph{display:block;width:100%;height:auto;object-fit:cover;} .jki .jki-seam-frame:hover>.ph{transform:scale(1.05);} .jki .jki-seam-tag{ position:absolute;left:24px;bottom:24px;padding:12px 20px; font:500 12px/1.6 'Montserrat',sans-serif;letter-spacing:0.2em;text-transform:uppercase; } /* slot 3 — process band */ .jki .jki-process{max-width:var(--w-read);margin:0 auto;padding:var(--sp-section) var(--gut) 0;text-align:center;} .jki .jki-process .jki-h2{margin-top:16px;} .jki .jki-steps{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-2); margin-top:72px;text-align:left; } .jki .jki-steps.cols-4{grid-template-columns:repeat(4,minmax(0,1fr));} /* WebKit masks a scroll-animated element's layer to its border box (Safari clipped the numeral overhang mid-glyph on every process band), so the overhang must live INSIDE the step's box: pull the box up 29px and pad it back down — rendered position identical, ink contained. The column hairline moves to a ::before that starts below the overhang zone (::after already carries the rv-draw rule). */ .jki .jki-step{position:relative;margin-top:-29px;padding:29px 32px 38px;} .jki .jki-step:not(:last-child)::before{content:'';position:absolute;top:29px;right:0;bottom:0;width:1px;background:var(--hairline);} .jki .jki-step .n{ display:block;position:relative;top:-29px;margin-bottom:-8px; font:italic 400 58px/1 'Cormorant Garamond',serif;color:var(--red); } .jki .jki-step h3{font:600 13px/1.4 'Montserrat',sans-serif;letter-spacing:0.2em;text-transform:uppercase;color:var(--ink);margin:0 0 10px;} .jki .jki-step p{font:400 19px/1.7 'Montserrat',sans-serif;color:var(--body-c);} .jki .jki-step.rv-draw::after{ content:'';position:absolute;left:32px;right:32px;bottom:0;height:1px;background:var(--red); /* scaleX(0) start state lives INSIDE the motion guard (section 5) so reduced-motion and non-supporting browsers get the drawn rule */ } /* slot 4 — stat strip */ .jki .jki-statstrip{ max-width:var(--w-read);margin:0 auto;padding:0 var(--gut); } .jki .jki-statstrip>.in{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px; border-top:1px solid var(--hairline); margin-top:var(--sp-5);padding:26px 0 var(--sp-section); } .jki .jki-statstrip .jki-stat{padding-top:0;} /* slot 4b — stat strip, four-cell variant (pages whose meta bar carries a fourth locked cell, e.g. CLHMS / NJ & PA) */ .jki .jki-statstrip>.in.cols-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px;} /* slot 4c — after-seam: pages that omit the process band (new-construction, whose six services already carry the process) let the stat strip sit directly under the seam. Restore the full section rhythm above it so the seam->strip gap matches the seam->content gap on process-band pages. */ .jki .jki-statstrip.after-seam>.in{margin-top:var(--sp-section);} /* slot 5 — cinema interlude (hard cut in by design; drift parallax) */ .jki .jki-interlude{ position:relative;background:var(--cinema);overflow:clip;text-align:center; min-height:56vh;display:flex;flex-direction:column;justify-content:center; padding:clamp(120px, 16vw, 190px) var(--gut); } .jki .jki-interlude-bg{position:absolute;inset:-8% 0;background-size:cover;background-position:center;} .jki .jki-interlude-veil{position:absolute;inset:0;background:linear-gradient(to bottom, rgba(9,9,9,.62), rgba(9,9,9,.84));} .jki .jki-interlude .jki-quote{color:var(--paper);max-width:52ch;margin:0 auto;position:relative;z-index:2;} .jki .jki-interlude .jki-cap{position:relative;z-index:2;margin-top:18px;} /* interlude CTA variant: eyebrow + H2 + pill instead of the quote line */ .jki .jki-interlude .jki-eyebrow{position:relative;z-index:2;} .jki .jki-interlude .jki-h2{position:relative;z-index:2;margin:16px 0 0;} .jki .jki-interlude .jki-lead{position:relative;z-index:2;margin:20px auto 0;} .jki .jki-interlude .jki-pillrow{position:relative;z-index:2;justify-content:center;margin-top:36px;} /* slot 6 — explanation (bridge card exits the interlude; editorial columns) */ .jki .jki-expl{background:var(--paper);padding:0 var(--gut) var(--sp-section);display:flow-root;} .jki .jki-bridgecard{ position:relative;z-index:3; max-width:860px;margin:-64px auto 0;text-align:center; background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-3); padding:clamp(32px,4.5vw,56px) clamp(28px,4.5vw,52px); } .jki .jki-bridgecard .jki-h2{margin-top:14px;} .jki .jki-expl-inner{max-width:var(--w-read);margin:0 auto;} .jki .jki-cols{columns:2;column-gap:64px;padding-top:var(--sp-4);} .jki .jki-cols p{margin-bottom:22px;break-inside:avoid;} .jki .jki-expl-split{ display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr); gap:clamp(40px,5vw,72px);align-items:center;padding-top:var(--sp-5); } .jki .jki-expl-split .jki-h3{margin:14px 0 18px;} .jki .jki-expl-split .jki-body + .jki-body{margin-top:18px;} .jki .jki-expl-split .jki-body{font-size:19px;} /* slot 6b — numbered editorial services list (ports locked service items without card grids; hairline rows, italic red numerals) */ .jki .jki-svclist{max-width:var(--w-read);margin:0 auto;padding:var(--sp-5) var(--gut) 0;} .jki .jki-svclist .jki-h2{margin-bottom:44px;} .jki .jki-svcgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:72px;} .jki .jki-svcitem{display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px;align-items:start;padding:32px 0;border-top:1px solid var(--hairline);} .jki .jki-svcitem .n{font:italic 400 30px/1 'Cormorant Garamond',serif;color:var(--red);} .jki .jki-svcitem h3{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(26px,2.6vw,36px);line-height:1.1;color:var(--ink);margin-bottom:9px;} .jki .jki-svcitem p{font:400 19px/1.7 'Montserrat',sans-serif;color:var(--body-c);max-width:54ch;} /* slot 6b2 — audience duo (two titled representation columns side by side, for pages whose locked body copy addresses two distinct audiences) */ .jki .jki-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,5vw,72px);padding-top:var(--sp-5);} .jki .jki-duo .jki-h3{margin-bottom:18px;} .jki .jki-duo .jki-body + .jki-body{margin-top:18px;} .jki .jki-ul{list-style:none;margin-top:22px;} .jki .jki-ul li{position:relative;padding:7px 0 7px 26px;font:400 19px/1.6 'Montserrat',sans-serif;color:var(--body-c);} .jki .jki-ul li::before{content:'\2022';position:absolute;left:2px;color:var(--red);} /* slot 6c — markets list (oversized type rows) */ .jki .jki-markets{max-width:var(--w-read);margin:0 auto;padding:var(--sp-5) var(--gut) 0;} .jki .jki-markets .jki-eyebrow{display:block;} .jki .jki-markets .jki-h2{margin:16px 0 44px;} .jki .jki-mkrow{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:26px 0;border-top:1px solid var(--hairline);color:var(--ink);transition:padding-left .3s var(--ease);} .jki .jki-mkrow:last-of-type{border-bottom:1px solid var(--hairline);} /* endcap variant: pages with no Proof slot after markets (no testimonial exists) drop the closing hairline so it doesn't stack with the FAQ opener's section-rule as a doubled boundary */ .jki .jki-markets.endcap .jki-mkrow:last-of-type{border-bottom:none;} .jki .jki-mkrow:hover{padding-left:16px;} .jki .jki-mkrow .nm{font:300 clamp(26px,2.6vw,36px)/1.08 'Cormorant Garamond',serif;} .jki .jki-mkrow .co{font:500 11px/1.5 'Montserrat',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--mut);white-space:nowrap;} /* static rows with a submarket description line (IOS): not links, no hover-slide affordance, name+county line plus a body line under */ .jki .jki-mkrow.static{cursor:default;flex-wrap:wrap;} .jki .jki-mkrow.static:hover{padding-left:0;} .jki .jki-mkrow .ds{flex-basis:100%;font:400 19px/1.7 'Montserrat',sans-serif;color:var(--body-c);max-width:68ch;margin-top:4px;} /* slot 7 — proof (featured testimonial, wording locked) */ .jki .jki-proof{max-width:var(--w-col);margin:0 auto;padding:var(--sp-5) var(--gut) var(--sp-section);text-align:center;} .jki .jki-proof>.in{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:clamp(48px,6vw,72px) clamp(28px,5vw,64px);} .jki .jki-proof .jki-quote{margin:26px auto 0;max-width:44ch;} .jki .jki-proof .jki-cap{margin-top:26px;} /* slot 7 variant — builder + community track record (text treatment, no logos; fills the proof slot with provable listing-side history instead of a testimonial) */ .jki .jki-builders{max-width:var(--w-col);margin:0 auto;padding:var(--sp-5) var(--gut) var(--sp-section);text-align:center;} .jki .jki-builders .jki-eyebrow{display:block;} .jki .jki-builders .jki-h2{margin:16px 0 0;} .jki .jki-builders .jki-lead{margin:20px auto 0;} .jki .jki-builders .roster-label{margin:40px 0 12px;} .jki .jki-builders .roster{font:400 clamp(19px,1.9vw,21px)/1.85 'Cormorant Garamond',serif;color:var(--ink);max-width:720px;margin:0 auto;} .jki .jki-builders .comm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,4vw,64px);max-width:820px;margin:40px auto 0;text-align:left;} .jki .jki-builders .upcoming{margin-top:6px;} .jki .jki-builders .comm-item{display:block;padding:19px 2px;border-top:1px solid var(--hairline);transition:padding-left .3s var(--ease);} .jki .jki-builders .comm-item:hover{padding-left:10px;} .jki .jki-builders .comm-item .cn{display:block;font:400 clamp(22px,2vw,27px)/1.14 'Cormorant Garamond',serif;color:var(--ink);} .jki .jki-builders .comm-item .cl{display:block;margin-top:5px;font:500 10.5px/1.5 'Montserrat',sans-serif;letter-spacing:0.2em;text-transform:uppercase;color:var(--mut);} @media (max-width:640px){.jki .jki-builders .comm{grid-template-columns:minmax(0,1fr);}} /* slot 8 — FAQ (locked markup hooks: .faq-section/.faq-item/.faq-q/.faq-icon/.faq-a) */ .jki .faq-section{background:var(--paper);padding:0 var(--gut) var(--sp-section);} .jki .faq-section>:where(*){max-width:var(--w-col);margin-left:auto;margin-right:auto;} .jki .faq-section .section-rule{display:none;} .jki .faq-section .section-eyebrow{ font:600 12px/1.7 'Montserrat',sans-serif;letter-spacing:0.34em;text-transform:uppercase; color:var(--red);margin-bottom:0;border-top:1px solid var(--hairline);padding-top:var(--sp-5); } .jki .faq-section .section-heading{ font-family:'Cormorant Garamond',serif;font-weight:300; font-size:clamp(38px, 4.2vw, 64px);line-height:1.04;color:var(--ink); margin:16px auto 40px; } .jki .faq-section .section-heading em{font-style:italic;color:var(--red);} .jki .faq-list{margin-top:0;max-width:var(--w-col);} .jki .faq-item{border-bottom:1px solid var(--hairline);padding:28px 0;cursor:pointer;transition:none;} .jki .faq-item:first-of-type{border-top:1px solid var(--hairline);} .jki .faq-q{ font-family:'Cormorant Garamond',serif;font-weight:400; font-size:clamp(22px, 2.2vw, 28px);line-height:1.35;color:var(--ink); display:flex;justify-content:space-between;align-items:center;gap:24px; width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:0; } .jki .faq-icon{ font-family:'Montserrat',sans-serif;font-weight:300;font-size:28px;color:var(--red); flex-shrink:0;transition:transform 0.3s var(--ease);line-height:1; } .jki .faq-item.open .faq-icon{transform:rotate(45deg);} .jki .faq-a{display:none;font:400 19px/1.8 'Montserrat',sans-serif;color:var(--body-c);margin-top:16px;max-width:68ch;} .jki .faq-item.open .faq-a{display:block;} /* slot 9 — CTA bookend (hard cut to cinema; contact + siblings + pager) */ .jki .jki-bookend{background:var(--cinema);color:var(--paper);padding:var(--sp-section) var(--gut);text-align:center;} .jki .jki-bookend .jki-h2{margin:16px 0 0;} .jki .jki-bookend>.jki-pillrow{justify-content:center;margin-top:36px;} .jki .jki-contact-in{ max-width:var(--w-read);margin:var(--sp-5) auto 0; display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr); gap:clamp(40px,5vw,80px);text-align:left; } .jki .jki-nap{margin-top:28px;display:flex;flex-direction:column;gap:16px;} .jki .jki-nap .l{font:600 11px/1.4 'Montserrat',sans-serif;letter-spacing:0.28em;text-transform:uppercase;color:var(--red-on-dark);display:block;margin-bottom:5px;} .jki .jki-nap .v{font:300 16px/1.6 'Montserrat',sans-serif;color:var(--on-c-lead);} .jki .jki-nap .v a{color:var(--on-c-lead);border-bottom:1px solid rgba(245,243,239,0.25);transition:border-color 0.3s;} .jki .jki-nap .v a:hover{border-color:var(--red-on-dark);} /* dark form treatment (locked form markup keeps .c-form classes) */ .jki .c-form{display:flex;flex-direction:column;gap:20px;max-width:640px;} .jki .c-form .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;} .jki .c-form label{font:500 11px/1.4 'Montserrat',sans-serif;letter-spacing:0.28em;text-transform:uppercase;color:var(--on-c-mut);display:block;margin-bottom:8px;} .jki .c-form input,.jki .c-form select,.jki .c-form textarea{ width:100%;background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,0.22); color:var(--paper);padding:12px 0;min-height:44px; font-family:'Montserrat',sans-serif;font-size:16px;font-weight:300;outline:none; transition:border-color 0.3s;border-radius:0;-webkit-appearance:none;appearance:none; } .jki .c-form input::placeholder,.jki .c-form textarea::placeholder{color:rgba(245,243,239,0.55);} .jki .c-form input:focus,.jki .c-form select:focus,.jki .c-form textarea:focus{border-bottom-color:var(--red-on-dark);} .jki .c-form select{ cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(245,243,239,0.45)'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 0 center;padding-right:20px; } .jki .c-form select option{background:var(--gray-5);color:#fff;} .jki .c-form textarea{resize:vertical;} .jki .c-form button{ margin-top:8px;align-self:flex-start; background:var(--red);color:#fff;border:1px solid transparent;border-radius:var(--r-pill); padding:16px 40px;font:600 12px/1.25 'Montserrat',sans-serif;letter-spacing:0.3em;text-transform:uppercase; cursor:pointer;transition:background 0.3s var(--ease),transform 0.3s var(--ease); } .jki .c-form button:hover{background:var(--red-dark);transform:translateY(-2px);} /* siblings + pager */ .jki .jki-sibrow-cap{margin-top:var(--sp-section);} .jki .jki-siblings{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px; max-width:var(--w-read);margin:36px auto 0; } .jki .jki-sib{ position:relative;border-radius:var(--r-md);overflow:clip;aspect-ratio:16/7; box-shadow:var(--sh-2);display:block; transition:transform 0.3s var(--ease),box-shadow 0.3s var(--ease); } .jki .jki-sib:hover{transform:translateY(-4px);box-shadow:var(--sh-3);} .jki .jki-sib>.ph{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 0.7s var(--ease);} .jki .jki-sib:hover>.ph{transform:scale(1.05);} .jki .jki-sib::after{content:'';position:absolute;inset:0;background:linear-gradient(to top, rgba(9,9,9,.85), rgba(9,9,9,.15));} .jki .jki-sib span{ position:absolute;left:20px;bottom:18px;z-index:2; font:600 12px/1.4 'Montserrat',sans-serif;letter-spacing:0.2em;text-transform:uppercase;color:var(--paper); } .jki .jki-pager{ max-width:var(--w-read);margin:56px auto 0;padding-top:24px; border-top:1px solid var(--hairline-d); display:flex;justify-content:space-between;gap:24px; } .jki .jki-pager a{ display:inline-flex;align-items:center;gap:10px;padding:8px 0; font:500 12px/1.6 'Montserrat',sans-serif;letter-spacing:0.2em;text-transform:uppercase; color:var(--on-c-mut);transition:color 0.3s var(--ease); } .jki .jki-pager a:hover{color:var(--red-on-dark);} .jki .jki-pager .ar{transition:transform 0.3s var(--ease);display:inline-block;} .jki .jki-pager a:hover .ar.l{transform:translateX(-4px);} .jki .jki-pager a:hover .ar.r{transform:translateX(4px);} /* ═══ SECTION 5 — MOTION SYSTEM ═══ Scroll-driven reveals extend the site's .c-rev view() precedent. Initial hidden states live INSIDE this guard so non-supporting browsers and reduced-motion users always see final-state content. Ancestors of these animations must use overflow:clip, never overflow:hidden. MARKUP CONVENTION: every direct child of a .rv-stag group must also carry the marker class "rv-si" — the sitewide headless-screenshot injection (.c-rev,[class*="rv-"]{animation:none!important;opacity:1!important}) only reaches elements whose own class list contains "rv-". */ @supports (animation-timeline: view()){ @media (prefers-reduced-motion:no-preference){ .jki .rv-rise{animation:jkiRise linear both;animation-timeline:view();animation-range:entry 0% entry 36%;} .jki .rv-rise-lg{animation:jkiRiseLg linear both;animation-timeline:view();animation-range:entry 0% entry 42%;} .jki .rv-fade{animation:jkiFade linear both;animation-timeline:view();animation-range:entry 0% entry 36%;} .jki .rv-scale{animation:jkiScale linear both;animation-timeline:view();animation-range:entry 0% entry 42%;} .jki .rv-stag>*:nth-child(1){animation:jkiRise linear both;animation-timeline:view();animation-range:entry 0% entry 36%;} .jki .rv-stag>*:nth-child(2){animation:jkiRise linear both;animation-timeline:view();animation-range:entry 4% entry 40%;} .jki .rv-stag>*:nth-child(n+3){animation:jkiRise linear both;animation-timeline:view();animation-range:entry 8% entry 44%;} .jki .rv-draw::after{transform:scaleX(0);transform-origin:left;animation:jkiDraw linear both;animation-timeline:view();animation-range:entry 0% entry 45%;} .jki .jki-drift{animation:jkiDrift linear both;animation-timeline:view();animation-range:cover 0% cover 100%;} .jki .jki-seam-frame.rv-rise-lg{animation-range:entry 12% entry 42%;} } } @keyframes jkiRise{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:translateY(0);}} @keyframes jkiRiseLg{from{opacity:0;transform:translateY(40px);}to{opacity:1;transform:translateY(0);}} @keyframes jkiFade{from{opacity:0;}to{opacity:1;}} @keyframes jkiScale{from{opacity:0;transform:scale(.97);}to{opacity:1;transform:scale(1);}} @keyframes jkiDraw{from{transform:scaleX(0);}to{transform:scaleX(1);}} @keyframes jkiDrift{from{transform:translateY(-3.5%) scale(1.06);}to{transform:translateY(3.5%) scale(1.06);}} /* hero entrance — time-driven, runs once per load; hidden state inside the same reduced-motion guard */ @media (prefers-reduced-motion:no-preference){ .jki .jki-ent{animation:jkiEnter 1.1s var(--ease) both;} .jki .jki-ent.d1{animation-delay:0.12s;} .jki .jki-ent.d2{animation-delay:0.24s;} .jki .jki-ent.d3{animation-delay:0.36s;} /* 1.4s delay: the static hero paints and LCP records BEFORE the transform starts (an animating LCP element re-paints and posts ~3s-late LCP; measured 74 vs 95 mobile). Choreography: Ken Burns begins as the entrance settles. */ .jki .jki-hero-img.ken{animation:jkiKen 7s linear 1.4s both;will-change:transform;} } @keyframes jkiEnter{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}} @keyframes jkiKen{from{transform:scale(1);}to{transform:scale(1.09);}} /* ═══ SECTION 6 — RESPONSIVE ═══ */ @media(max-width:1280px){ .jki #nav{padding:0 40px;} .jki .nav-links{gap:22px;} } /* 4-step band: 2x2 intermediate so tablet widths never squeeze 4-across (numerals go static here; overhang would collide with row-1 text) */ @media(min-width:901px) and (max-width:1199px){ .jki .jki-steps.cols-4{grid-template-columns:repeat(2,minmax(0,1fr));} .jki .jki-steps.cols-4 .jki-step{padding:28px 32px 32px;margin-top:0;} .jki .jki-steps.cols-4 .jki-step::before{top:0;} .jki .jki-steps.cols-4 .jki-step:nth-child(even)::before{content:none;} .jki .jki-steps.cols-4 .jki-step:nth-child(n+3){border-top:1px solid var(--hairline);} .jki .jki-steps.cols-4 .jki-step .n{position:static;top:0;margin:0 0 10px;font-size:52px;} /* same tablet policy for the 4-cell stat strip: 4-across squeezes the longest locked labels ("Years in South Jersey", "Five Star Professional") onto a second line while siblings hold one; 2x2 keeps every label on one line */ .jki .jki-statstrip>.in.cols-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 32px;} } @media(max-width:1100px){ .jki #nav{padding:0 32px;} .jki .nav-links{gap:16px;} .jki .nav-links>li>a{font-size:9px;letter-spacing:0.2em;} .jki .nav-cta-btn{font-size:8px;letter-spacing:0.2em;padding:9px 16px;} } @media(max-width:1080px){ .jki .hamburger{flex-shrink:0;} .jki .nav-logo-wrap{flex-shrink:1;min-width:0;overflow:hidden;} .jki .nav-logo-wrap,.jki .nav-logo-wrap small{white-space:nowrap;text-overflow:ellipsis;} .jki .nav-logo-wrap small{overflow:hidden;max-width:100%;} } @media(max-width:1000px){ .jki #nav{padding:0 20px;} .jki .nav-links{gap:12px;} .jki .nav-links>li>a{font-size:8.5px;letter-spacing:0.15em;} .jki .nav-logo-wrap{font-size:13px;letter-spacing:0.15em;} .jki .nav-logo-wrap small{font-size:7px;} .jki .nav-cta-btn{padding:8px 12px;font-size:8px;letter-spacing:0.15em;} } @media(max-width:900px){ .jki .nav-links,.jki .nav-cta-btn{display:none!important;} .jki .hamburger{display:flex!important;} .jki #mobile-cta-bar{display:block;} body.jki{padding-bottom:56px;} .jki .jki-hero{min-height:78vh;padding-bottom:clamp(170px,22vh,230px);} .jki .jki-seam-frame{margin-top:-110px;} .jki .jki-seam-frame>.ph{aspect-ratio:16/9;} .jki .jki-steps,.jki .jki-steps.cols-4{grid-template-columns:minmax(0,1fr);margin-top:44px;} .jki .jki-step{border-top:1px solid var(--hairline);padding:28px 28px 30px;margin-top:0;} .jki .jki-step::before{content:none;} .jki .jki-step:first-child{border-top:none;} .jki .jki-step .n{position:static;top:0;margin:0 0 10px;font-size:46px;} .jki .jki-step.rv-draw::after{content:none;} .jki .jki-cols{columns:1;} .jki .jki-duo{grid-template-columns:minmax(0,1fr);gap:44px;} .jki .jki-statstrip>.in.cols-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 28px;} .jki .jki-svcgrid{grid-template-columns:minmax(0,1fr);column-gap:0;} .jki .jki-svcitem{padding:26px 0;gap:18px;} .jki .jki-expl-split{grid-template-columns:minmax(0,1fr);align-items:start;} .jki .jki-bridgecard{margin-top:-52px;} .jki .jki-contact-in{grid-template-columns:minmax(0,1fr);} .jki .jki-siblings{grid-template-columns:minmax(0,1fr);gap:14px;} .jki .jki-sib{aspect-ratio:16/6;} .jki .footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);} .jki footer{padding:56px 24px 32px;} .jki footer::before{left:24px;right:24px;} .jki footer [style*="32px 1fr 1fr 1fr 1fr"]{grid-template-columns:minmax(0,1fr)!important;gap:16px!important;} } @media(max-width:768px){ .jki .footer-legal,.jki p.footer-legal{font-size:12px!important;line-height:1.6!important;letter-spacing:0!important;} .jki .footer-copy{font-size:11px!important;} } /* locked footer markup carries inline 7px/25%-alpha micro-labels (2.04:1 on cinema); raise to AA without touching the markup — style-only remediation */ .jki footer p[style*="font-size:7px"], .jki footer p[style*="font-size: 7px"]{ font-size:9px!important;color:rgba(245,243,239,.55)!important; } @media(max-width:640px){ .jki .jki-statstrip>.in,.jki .jki-statstrip>.in.cols-4{grid-template-columns:minmax(0,1fr);gap:0;border-top:none;} .jki .jki-statstrip .jki-stat{border-top:1px solid var(--hairline);padding:22px 0;} .jki .jki-stat b{font-size:44px;} .jki .jki-seam-tag{left:14px;bottom:14px;padding:9px 14px;font-size:10px;letter-spacing:0.16em;} .jki .jki-pager a{font-size:10.5px;letter-spacing:0.14em;} .jki .c-form .row{grid-template-columns:minmax(0,1fr);} .jki .jki-mkrow{flex-direction:column;gap:8px;align-items:flex-start;} .jki .jki-mkrow .co{white-space:normal;} .jki .jki-mkrow:hover{padding-left:0;} /* line-count lock applies >=640 only; release ALL nowrap locks on phones so long page titles ("Commercial Real Estate") wrap instead of clipping or forcing horizontal scroll — phrases that fit are unaffected */ .jki .nw{white-space:normal;} } @media(max-width:600px){ .jki #nav{padding:0 16px;gap:16px;} .jki .nav-logo-wrap{font-size:13px;letter-spacing:0.14em;} .jki .nav-logo-wrap small{font-size:7px;letter-spacing:0.1em;} .jki .mn-towns{grid-template-columns:minmax(0,1fr) minmax(0,1fr);} } @media(max-width:400px){ .jki footer img[src*="-logo"]{height:24px!important;} } /* ═══ SECTION 7 — REDUCED MOTION + FOCUS ═══ */ @media (prefers-reduced-motion:reduce){ .jki *,.jki *::before,.jki *::after{ animation:none!important; transition:none!important; } } .jki a:focus-visible, .jki button:focus-visible, .jki input:focus-visible, .jki select:focus-visible, .jki textarea:focus-visible, .jki [tabindex]:focus-visible{ outline:2px solid var(--red);outline-offset:2px; } /* red fails 3:1 non-text contrast on cinema; use the on-dark red there */ .jki .jki-hero :focus-visible, .jki .jki-interlude :focus-visible, .jki .jki-bookend :focus-visible, .jki #nav :focus-visible, .jki footer :focus-visible, .jki #mobile-nav :focus-visible, .jki #mn-areas :focus-visible, .jki #mobile-cta-bar :focus-visible{ outline-color:var(--red-on-dark); } .jki .c-form input:focus,.jki .c-form select:focus,.jki .c-form textarea:focus{ outline:2px solid var(--red-on-dark);outline-offset:-2px; } /* ============================================================ PHASE B - town/county Lite Gallery additions (folded in from jk-town-lite.css on Justin's pilot approval, 2026-07-18; audit-fix cycle findings 1-8 applied) ============================================================ */ /* --- intro seam: floating card straddling hero(dark) -> paper --- */ /* reuses .jki-bridgecard (--surface, --sh-3, -64px overlap) from jk-inner.css */ .jki .jki-townseam{background:var(--paper);padding:0 var(--gut);display:flow-root;} .jki .jki-townseam .jki-bridgecard{max-width:var(--w-col);} .jki .jki-townseam .jki-bridgecard .jki-body{margin:var(--sp-3) auto 0;text-align:left;} .jki .jki-townseam .jki-bridgecard .jki-pillrow{justify-content:center;margin-top:var(--sp-3);} /* --- town facts grid (locked c-facts l/v/d cells) --- */ .jki .jki-townfacts{max-width:var(--w-read);margin:0 auto;padding:var(--sp-section) var(--gut) 0;} /* statstrip's .in already carries --sp-section bottom padding (Phase A rhythm); don't stack a second section gap on top of it (audit finding #2) */ .jki .jki-statstrip + .jki-townfacts{padding-top:0;} .jki .jki-townfacts .jki-eyebrow{display:block;margin-bottom:var(--sp-4);} .jki .jki-tfact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(28px,3vw,48px);} /* subgrid: label/value/description share row tracks so descriptions start-align across each visual row even when a value wraps (audit finding #7); degrades to independent auto rows where subgrid is unsupported */ .jki .jki-tfact{padding:28px 0;border-top:1px solid var(--hairline);display:grid;grid-template-rows:subgrid;grid-row:span 3;align-content:start;} .jki .jki-tfact .l{font:600 11px/1.4 'Montserrat',sans-serif;letter-spacing:.28em;text-transform:uppercase;color:var(--mut);margin-bottom:var(--sp-1);} /* serif grid-value sits on the approved .jki-builders .cn size (audit #4); one serif-grid-value size across the family, not an improvised one */ .jki .jki-tfact .v{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(22px,2vw,27px);line-height:1.18;color:var(--ink);margin-bottom:var(--sp-2);} .jki .jki-tfact .d{font:400 19px/1.75 'Montserrat',sans-serif;color:var(--body-c);} /* --- listings CTA: centered floating surface card (no photo; the only town imagery is the 13 shared county files and the hero already shows it — a repeat frame reads as an asset shortage at 457-page scale, audit #6) --- */ .jki .jki-townlist{max-width:var(--w-col);margin:0 auto;padding:var(--sp-section) var(--gut) 0;} .jki .jki-townlist-card{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-2);text-align:center; padding:clamp(48px,6vw,80px) clamp(28px,4.5vw,52px);} .jki .jki-townlist-card .jki-h2{margin:16px 0 var(--sp-3);} .jki .jki-townlist-card .jki-pillrow{justify-content:center;} /* --- markets rhythm when it trails the listings band --- */ .jki .jki-markets.townmk{padding-top:var(--sp-section);} /* --- no-intro seam variant: the facts grid IS the seam (67 pages have no c-about; per spec 3, the first content block floats out of the hero, echoing the Phase A process-band pattern) --- */ .jki .jki-bridgecard.wide{max-width:var(--w-read);text-align:left;} .jki .jki-bridgecard.wide .jki-tfact-grid{margin-top:var(--sp-3);} .jki .jki-bridgecard.wide .jki-tfact:nth-child(-n+3){border-top:none;} @media (max-width:900px){.jki .jki-bridgecard.wide .jki-tfact:nth-child(3){border-top:1px solid var(--hairline);}} @media (max-width:640px){.jki .jki-bridgecard.wide .jki-tfact:nth-child(-n+3){border-top:1px solid var(--hairline);} .jki .jki-bridgecard.wide .jki-tfact:first-child{border-top:none;}} /* --- county services list: the Phase A .jki-svclist outside an expl wrapper needs its own section rhythm (county "What we do", restored verbatim after the content-lock guard caught it dropped) --- */ .jki .jki-svclist.standalone{padding:var(--sp-section) var(--gut) 0;} /* statstrip's .in already carries the section gap below it - don't stack */ .jki .jki-statstrip + .jki-svclist.standalone{padding-top:0;} /* --- county town directory: two-column serif community list (the approved .jki-builders .comm recipe, re-scoped; county "Towns We Serve" lists run 16-30 towns, too many for the oversized single-column mkrow list) --- */ .jki .jki-towndir{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,4vw,64px);text-align:left;} .jki .jki-towndir a{display:block;padding:19px 2px;border-top:1px solid var(--hairline);transition:padding-left .3s var(--ease);} .jki .jki-towndir a:hover{padding-left:10px;} .jki .jki-towndir .cn{display:block;font:400 clamp(22px,2vw,27px)/1.14 'Cormorant Garamond',serif;color:var(--ink);} .jki .jki-towndir .cl{display:block;margin-top:5px;font:500 10.5px/1.5 'Montserrat',sans-serif;letter-spacing:0.2em;text-transform:uppercase;color:var(--mut);} @media (max-width:640px){.jki .jki-towndir{grid-template-columns:minmax(0,1fr);}} @media (max-width:900px){ .jki .jki-tfact-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:36px;} } @media (max-width:640px){ .jki .jki-tfact-grid{grid-template-columns:1fr;} } /* Form success panel: hidden until JS adds .visible (mirrors styles.css) */ .jki .form-success{display:none;} .jki .form-success.visible{display:block;}