/*
Theme Name: J3 Web Solutions
Theme URI: https://www.j3websolutions.com
Author: J3 Web Solutions
Description: Flyer-inspired, mobile-friendly informational website and pricing homepage for J3 Web Solutions. Hosting, SEO and booking integration copy included.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: j3-web-solutions
*/
:root{--navy:#032844;--navy-deep:#001b31;--navy-bright:#075c99;--blue:#03b4fc;--blue-text:#005497;--orange:#ff521d;--orange-light:#ff7b13;--ink:#0c2743;--muted:#42566b;--paper:#fff;--radius:15px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:20px}
body{margin:0;color:var(--ink);background:#f6fafc;font-family:Inter,'Segoe UI',Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:3px solid #16aaff;outline-offset:4px}
.wrap{width:min(1500px,calc(100% - 66px));margin-inline:auto}
.skip-link{position:absolute;left:18px;top:-60px;z-index:9999;padding:12px;background:#fff;border-radius:6px}.skip-link:focus{top:10px}
.hero-stage{position:relative;isolation:isolate;overflow:hidden;color:white;background:linear-gradient(117deg,#043a5b 0%,#001c34 53%,#052c4b 100%);border-radius:0 0 20px 20px;min-height:600px}
.hero-stage:before{content:"";position:absolute;z-index:-2;inset:0;background:url('assets/navy-atmosphere.jpg') center center/cover no-repeat;opacity:.55}
.hero-stage:after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(0,26,49,.26),rgba(0,23,39,.35) 60%,rgba(1,25,41,.05));pointer-events:none}
.header{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;padding-top:22px;position:relative;z-index:3}
.brand-cluster{flex:0 1 650px;min-width:0}.brand-logo-link{display:inline-block;line-height:0}.brand-logo{width:clamp(190px,19vw,288px);height:auto;mix-blend-mode:screen}
.brand-values{margin:0;padding-left:3px;font-size:clamp(11px,.92vw,15px);font-weight:500;letter-spacing:.14em;white-space:nowrap}.brand-values span{padding:0 .45em;color:#e5f9ff}
.header-right{display:flex;flex-direction:column;align-items:flex-end;text-align:left;width:425px;max-width:42%}
.slogan-art{display:block;width:min(425px,100%);height:auto;mix-blend-mode:screen}
.professional-label{font-size:clamp(13px,1.18vw,18px);letter-spacing:.23em;line-height:1.5;align-self:flex-end;margin:0 0 13px;width:80%;white-space:nowrap}
.primary-nav{display:flex;justify-content:flex-end;gap:25px;align-items:center;flex-wrap:wrap;width:100%;padding:8px 0 0;border-top:1px solid rgba(255,255,255,.16);font-size:12px;letter-spacing:.07em;font-weight:700;text-transform:uppercase}
.primary-nav a{color:rgba(255,255,255,.83);transition:color .2s}.primary-nav a:hover{color:#0db7ff}
.hero-main{display:grid;grid-template-columns:minmax(430px,.84fr) minmax(0,1.16fr);align-items:end;gap:0;min-height:370px;padding-top:13px}
.hero-copy{position:relative;z-index:2;padding:25px 0 67px}.hero-copy h1{margin:0 0 18px;font-weight:900;font-size:clamp(30px,2.75vw,46px);letter-spacing:-.025em;line-height:1.09}.hero-copy h1 span{color:var(--blue)}
.hero-intro{font-size:clamp(17px,1.42vw,21px);line-height:1.38;font-weight:400;max-width:620px;margin:0}
.hero-specialty{display:flex;align-items:center;gap:9px;max-width:600px;font-weight:680;margin:22px 0 0;color:#b9ecff;font-size:14px;line-height:1.45}.hero-specialty svg{width:21px;height:21px;flex:0 0 21px;color:#0db5ff}
.hero-cta{display:inline-flex;gap:12px;align-items:center;margin-top:22px;padding:13px 20px;background:linear-gradient(135deg,#ff681e,#ff4d16);box-shadow:0 8px 22px rgba(255,81,15,.24);color:white;border-radius:9px;font-size:13px;letter-spacing:.04em;font-weight:850;transition:transform .2s,box-shadow .2s}.hero-cta:hover,.start-button:hover{transform:translateY(-2px);box-shadow:0 11px 26px #ed5a2d54}
.hero-art{position:relative;align-self:end;margin-left:-2%;margin-right:-5.5%;line-height:0}.hero-art img{position:relative;z-index:1;display:block;width:100%;height:auto;filter:drop-shadow(0 10px 14px rgba(0,0,0,.18))}.hero-glow{position:absolute;z-index:0;width:78%;height:45%;left:18%;bottom:2%;background:radial-gradient(ellipse,rgba(24,140,213,.22),transparent 70%)}
.packages-section{position:relative;padding-top:28px}
.packages-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}
.package{min-width:0;overflow:hidden;border-radius:16px 16px 14px 14px;background:#f6fbff;border:1px solid #dbeaf5;display:flex;flex-direction:column}
.package-orange{background:#fff9f4;border-color:#ffe0cd}
.package-heading{padding:16px 13px 17px;color:white;text-align:center;background:linear-gradient(120deg,#0873b0,#004784 80%);min-height:92px}.package-orange .package-heading{background:linear-gradient(105deg,#ff6527,#f43b16 90%)}
.package-heading h2{margin:0 0 5px;font-size:clamp(24px,2.3vw,36px);font-weight:890;line-height:1.03;letter-spacing:-.03em}
.package-heading p{margin:0;font-size:clamp(10px,1.04vw,14px);font-weight:500;letter-spacing:.07em}
.package-body{margin-top:-6px;position:relative;z-index:1;border-radius:14px;background:linear-gradient(150deg,#fff 0%,#f9fcff 65%,#edf6fa 100%);padding:7px 25px 24px;display:flex;flex-direction:column;flex:1;min-width:0}.package-orange .package-body{background:linear-gradient(150deg,#fff 0%,#fffaf8 77%,#f6faff 100%)}
.package-preview{display:flex;align-items:center;justify-content:center;min-height:242px;padding:3px 0 10px}.package-preview img{display:block;width:min(100%,510px);height:auto;max-height:246px;object-fit:contain}
.prices{display:grid;grid-template-columns:1fr 1fr;gap:19px;margin-top:0}
.price-box{border:1.5px solid #63c6fc;border-radius:12px;background:linear-gradient(150deg,#f9fdff,#fff);text-align:center;min-width:0;position:relative;padding:8px 9px 11px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.package-orange .price-box.monthly{border-color:#ff8756}
.price-box.annual{border-color:#d7c938;background:#fff}
.package-orange .price-box.annual{border-color:#ffbb43}
.price-label{font-weight:900;font-size:clamp(12px,1.13vw,16px);background:#e7f5fc;color:#102e4b;border-radius:9px;padding:7px 9px 6px;width:100%;line-height:1;white-space:nowrap}
.package-orange .price-box.monthly .price-label{background:#fff0e7}
.annual .price-label{background:linear-gradient(110deg,#21952e,#228a2a);color:#fff;margin:-8px -9px 9px;width:calc(100% + 18px);border-radius:10px 10px 0 0}
.package-orange .annual .price-label{background:linear-gradient(100deg,#ff5c20,#fb4316)}
.amount{font-weight:900;color:#04539b;font-size:clamp(36px,3.35vw,52px);line-height:1.06;letter-spacing:-.052em;margin-top:8px}
.package-orange .amount{color:#ff4b20}.annual .amount{color:#16892d}.package-orange .annual .amount{color:#ff471d}
.amount.smaller{margin-top:0;font-size:clamp(35px,3.35vw,50px)}
.price-caption{font-size:clamp(11px,1.07vw,16px);font-weight:500;color:#004c88;line-height:1.32}.package-orange .monthly .price-caption{color:#7e250e}.dark-caption{color:#19232b;font-size:clamp(10px,1.02vw,14px)}
.plus{font-size:29px;line-height:1.07;font-weight:800;color:#063f76;margin-top:4px}.package-orange .plus{color:#fa4518}
.savings-note{background:linear-gradient(150deg,#fff1b0,#ffe078);color:#071e31;padding:11px 4px;border-radius:9px;font-weight:830;font-size:clamp(12px,1.25vw,17px);line-height:1.27;width:100%;margin-top:auto;margin-bottom:0;min-height:59px;display:flex;align-items:center;justify-content:center}
.save-burst{position:absolute;right:-9px;top:3px;z-index:2;width:73px;aspect-ratio:1;display:grid;place-items:center;background:#269b22;color:#fff;font-weight:900;clip-path:polygon(50% 0%,60% 8%,73% 3%,80% 15%,94% 14%,95% 29%,100% 41%,92% 52%,98% 67%,85% 76%,85% 89%,71% 90%,61% 100%,48% 93%,35% 99%,26% 86%,13% 85%,14% 70%,3% 60%,9% 49%,1% 36%,12% 26%,11% 13%,27% 14%,38% 3%);font-size:16px;line-height:1.04;text-align:center;transform:rotate(10deg);filter:drop-shadow(0 3px 3px #1113)}
.package-orange .save-burst{background:#ff4d16}
.package-list{list-style:none;padding:0;margin:23px 0 17px;display:grid;gap:11px;flex:1}
.package-list li{display:flex;align-items:flex-start;gap:12px;font-size:clamp(14px,1.16vw,17px);line-height:1.24;letter-spacing:-.012em;color:#0a2745}
.package-list li:before{content:'✓';display:inline-flex;align-items:center;justify-content:center;flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:#0763a8;color:#fff;font-size:15px;font-weight:1000;line-height:1}
.package-orange .package-list li:before{background:#ff5522}
.package-action{display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:10px 12px;font-size:12px;font-weight:860;letter-spacing:.06em;border-radius:8px;border:1px solid #c5dded;transition:background .2s,color .2s}.blue-action{color:#005e9c;background:#e8f5ff}.blue-action:hover{color:white;background:#0865a3}.orange-action{color:#cf4013;background:#fff0e8;border-color:#ffcdb6}.orange-action:hover{color:white;background:#f7521d}
.price-fineprint{text-align:center;color:#576577;font-size:12px;line-height:1.5;margin:12px 0 0}
.benefits{display:grid;grid-template-columns:repeat(4,1fr);margin-top:25px;padding:18px 13px;background:linear-gradient(120deg,#f1f8fc,#e9f3f9 60%,#f1f9fc);border-radius:16px;gap:0}
.benefit{display:flex;align-items:flex-start;gap:12px;padding:0 16px;min-width:0}.benefit+.benefit{border-left:1px solid #b7d8ed}
.benefit-icon{width:58px;height:58px;flex:0 0 58px;color:#0480cf}.benefit:nth-child(1) .benefit-icon{color:#0784d3}.benefit h3{color:#00518e;font-weight:900;font-size:clamp(13px,1.1vw,17px);line-height:1.2;margin:5px 0 7px}.benefit p{margin:0;line-height:1.4;font-size:clamp(11px,.98vw,14px);font-weight:450}
.scope-section{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:21px;margin-top:24px;margin-bottom:25px;background:white;border:1px solid #d4e6f4;border-left:5px solid #14a6ed;border-radius:14px;padding:23px 25px;box-shadow:0 9px 25px rgba(0,55,104,.035)}
.scope-mark{width:54px;height:54px;border-radius:13px;background:#e2f4ff;color:#0974b8;display:grid;place-items:center}.scope-mark svg{width:36px;height:36px}.scope-eyebrow{color:#0070b0!important;letter-spacing:.14em;font-size:11px!important;font-weight:850!important;margin:0 0 5px!important}
.scope-text h2{font-size:clamp(18px,1.58vw,24px);margin:0 0 8px;color:#063b65;font-weight:890}.scope-text p{font-size:14px;line-height:1.6;margin:0;color:#324c63}.scope-text .scope-exclusion{font-size:12px;color:#63788b;margin-top:7px}
.scope-link{white-space:nowrap;font-size:12px;font-weight:850;color:#0075ba;display:inline-flex;gap:6px;align-items:center;border-bottom:1px solid #8bc7e9;padding-bottom:5px;align-self:center}.scope-link:hover{color:#ff5719}
.footer{background:linear-gradient(110deg,#00192d,#032a49 55%,#001c33);color:#fff;padding-top:25px}
.footer-main{display:grid;grid-template-columns:210px 1fr auto;gap:25px;align-items:center;min-height:122px}
.footer-brand{border-right:2px solid rgba(255,255,255,.8);padding-right:24px}.footer-brand img{width:100%;max-width:180px;height:auto;display:block;mix-blend-mode:screen}
.footer-contact{display:flex;flex-direction:column;gap:19px;align-items:flex-start;padding-left:6px}
.footer-phone{display:flex;align-items:center;gap:14px;font-size:clamp(26px,2.65vw,39px);font-weight:920;letter-spacing:-.035em;white-space:nowrap}.footer-phone svg{width:37px;height:37px;color:white;flex:0 0 37px}.footer-phone:hover{color:#20b8ff}
.footer-links{display:flex;flex-wrap:wrap;gap:13px 29px;font-size:clamp(13px,1.04vw,16px)}.footer-links a{display:flex;align-items:center;gap:10px}.footer-links a:hover{color:#2ebeff}.footer-links svg{width:25px;height:25px;flex:0 0 25px;color:#fff}.footer-links a:nth-child(2) svg{color:#08b4fb}
.footer-action{text-align:center;justify-self:end}.start-button{background:linear-gradient(130deg,#ff6d1b,#ff4a12);color:#fff;display:flex;align-items:center;justify-content:center;gap:13px;padding:17px 22px;border-radius:13px;font-size:clamp(15px,1.5vw,21px);font-weight:900;white-space:nowrap;transition:transform .2s,box-shadow .2s}.start-button span{font-size:21px}.footer-action p{font-size:11px;line-height:1.5;letter-spacing:.24em;margin:12px 0 0}
.copyright{display:flex;justify-content:space-between;gap:15px;align-items:center;border-top:1px solid #ffffff1c;margin-top:20px;padding-block:12px;color:#b9cfde;font-size:12px}.copyright a:hover{color:white}
@media(min-width:1550px){.hero-stage{min-height:670px}.hero-main{min-height:435px}.hero-copy{padding-bottom:100px}.package-preview{min-height:280px}.package-preview img{max-height:280px;width:min(100%,560px)}.price-box{min-height:212px}}
@media(max-width:1170px){.wrap{width:min(100% - 42px,1500px)}.hero-main{grid-template-columns:minmax(390px,.91fr) minmax(0,1.09fr)}.hero-copy h1{font-size:clamp(28px,3.5vw,41px)}.hero-art{margin-right:-4%}.header{gap:18px}.prices{gap:12px}.package-body{padding-left:15px;padding-right:15px}.package-heading h2{font-size:28px}.package-preview{min-height:193px}.package-list li{font-size:14px}.price-label{font-size:12px}.amount{font-size:40px}.amount.smaller{font-size:40px}.benefit{padding:0 11px;gap:9px}.benefit-icon{width:40px;height:40px;flex-basis:40px}.footer-main{grid-template-columns:165px 1fr auto;gap:16px}.footer-phone{font-size:30px}}
@media(max-width:860px){.header{align-items:flex-start}.brand-values{font-size:10px;white-space:normal;line-height:1.65}.header-right{max-width:50%}.professional-label{font-size:11px;letter-spacing:.13em}.primary-nav{gap:10px;font-size:10px}.hero-main{grid-template-columns:1fr 1fr;min-height:335px;padding-bottom:15px}.hero-copy{padding-bottom:25px}.hero-copy h1{font-size:30px}.hero-intro{font-size:16px}.hero-specialty{font-size:12px}.hero-art{margin-right:-7%;margin-left:-12%;align-self:end}.packages-grid{gap:14px}.package-heading{min-height:76px;padding:14px 8px}.package-heading h2{font-size:22px}.package-heading p{font-size:9px}.package-body{padding-inline:10px}.package-preview{min-height:155px}.package-preview img{max-height:175px}.prices{gap:7px}.price-box{padding:7px 4px}.price-label{font-size:10px;padding:7px 4px}.annual .price-label{margin:-7px -4px 7px;width:calc(100% + 8px)}.amount,.amount.smaller{font-size:31px}.price-caption,.dark-caption{font-size:9px}.savings-note{font-size:11px;min-height:54px}.save-burst{width:52px;font-size:12px;right:-6px}.package-list{gap:10px}.package-list li{font-size:12px;gap:6px}.package-list li:before{width:19px;height:19px;flex-basis:19px}.package-action{font-size:10px}.benefits{grid-template-columns:repeat(2,1fr);row-gap:22px}.benefit:nth-child(3){border-left:0}.benefit h3{font-size:14px}.benefit p{font-size:12px}.scope-section{grid-template-columns:42px 1fr;gap:14px}.scope-mark{width:42px;height:42px}.scope-mark svg{width:29px;height:29px}.scope-link{grid-column:2;justify-self:start}.footer-main{grid-template-columns:145px 1fr}.footer-action{grid-column:1/-1;justify-self:stretch;display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:5px}.footer-action p{margin:0}.footer-phone{font-size:28px}.footer-links{font-size:12px}}
@media(max-width:650px){.wrap{width:calc(100% - 28px)}.hero-stage{border-radius:0 0 15px 15px}.header{padding-top:12px;gap:8px}.brand-cluster{flex:0 0 52%}.brand-logo{width:min(225px,100%)}.brand-values{font-size:8px;letter-spacing:.09em;line-height:1.6}.brand-values span{padding:0 2px}.header-right{flex:1;max-width:none}.slogan-art{width:100%;max-width:235px}.professional-label{font-size:8.5px;letter-spacing:.13em;width:auto;margin:2px 0 7px}.primary-nav{border:0;gap:7px;padding:0;font-size:9px;justify-content:flex-end}.primary-nav a:nth-child(2){display:none}
.hero-main{grid-template-columns:1fr;gap:2px;padding-top:20px;padding-bottom:0}.hero-copy{padding:0 2px}.hero-copy h1{font-size:clamp(29px,7.2vw,41px);margin-bottom:13px;line-height:1.06}.hero-intro{font-size:16px;line-height:1.43;max-width:550px}.hero-specialty{margin-top:13px;font-size:12px}.hero-cta{margin-top:14px;font-size:12px;padding:12px 15px}.hero-art{width:min(100%,580px);margin:-5px auto -5px;justify-self:center}.packages-section{padding-top:14px}.packages-grid{grid-template-columns:1fr;gap:16px}.package-heading{min-height:73px}.package-heading h2{font-size:clamp(25px,6.2vw,35px)}.package-heading p{font-size:clamp(9px,2.2vw,12px)}.package-body{padding:8px 14px 18px}.package-preview{min-height:0;padding:2px 0 12px}.package-preview img{max-height:255px;width:min(100%,470px)}.prices{gap:12px}.price-box{min-height:175px;padding:8px 7px}.price-label{font-size:clamp(11px,3vw,15px)}.annual .price-label{margin:-8px -7px 8px;width:calc(100% + 14px)}.amount,.amount.smaller{font-size:clamp(37px,9.2vw,48px)}.price-caption{font-size:clamp(10px,2.7vw,13px)}.dark-caption{font-size:clamp(9px,2.6vw,12px)}.savings-note{font-size:clamp(11px,3vw,15px);padding:8px 3px;min-height:55px}.save-burst{width:68px;font-size:14px}.package-list{margin:21px 0 18px;gap:11px}.package-list li{font-size:clamp(13px,3.6vw,16px);gap:11px}.package-list li:before{width:21px;height:21px;flex-basis:21px}.package-action{font-size:12px}.price-fineprint{font-size:11px}.benefits{margin-top:16px;padding:17px 6px;row-gap:20px}.benefit{padding:0 9px;gap:7px}.benefit-icon{width:33px;height:33px;flex-basis:33px}.benefit h3{font-size:12px;margin-top:1px}.benefit p{font-size:11px}.scope-section{margin-top:17px;margin-bottom:18px;padding:16px 13px;gap:10px}.scope-text h2{font-size:17px}.scope-text p{font-size:13px}.scope-text .scope-exclusion{font-size:11px}.footer{padding-top:18px}.footer-main{grid-template-columns:105px 1fr;gap:12px;align-items:start}.footer-brand{padding-right:12px}.footer-brand img{max-width:100px}.footer-phone{font-size:clamp(19px,5.3vw,28px);gap:7px}.footer-phone svg{width:23px;height:23px;flex-basis:23px}.footer-contact{padding-left:0;gap:14px}.footer-links{flex-direction:column;gap:9px;font-size:12px;overflow-wrap:anywhere}.footer-links svg{width:18px;height:18px;flex-basis:18px}.footer-links a{gap:5px}.footer-action{grid-column:1/-1;flex-direction:column;gap:8px;align-items:stretch;padding-top:8px}.start-button{font-size:16px;padding:13px 18px}.footer-action p{text-align:center;font-size:10px}.copyright{font-size:10px;margin-top:16px}}
@media(max-width:370px){.primary-nav{font-size:8px}.hero-copy h1{font-size:27px}.prices{gap:6px}.price-box{padding-left:3px;padding-right:3px}.price-label{font-size:10px}.annual .price-label{margin-left:-3px;margin-right:-3px;width:calc(100% + 6px)}.save-burst{width:56px;font-size:12px}.savings-note{font-size:10px}.brand-values{font-size:7px}.footer-main{grid-template-columns:85px 1fr}.footer-brand{padding-right:9px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
/* Genuine transparency on the supplied flyer brand elements: seamless in the gradient header. */
.brand-logo,.slogan-art,.footer-brand img{mix-blend-mode:normal}

/* Styling for extra WordPress posts/pages if created. The flyer-faithful homepage is in front-page.php. */
.wp-basic-page{background:#fff;min-height:65vh;margin-block:35px;padding:32px 35px;border-radius:16px;box-shadow:0 8px 25px #052f4c10}
.wp-basic-page h1,.wp-basic-page h2{color:#063a62}.wp-basic-page p{line-height:1.7}.wp-basic-page a{color:#006bb0;text-decoration:underline}