/* * New-page component library (Consultations, Specialties, Essential Testing, * Webinar, General Page Template). * * Ported from Simon's approved design file "Jarrod Cooper ND - New Pages.html" * (delivered 11 Sep 2026). Scoped under .jcnd-newpage so these generic class * names (.card, .p, .two, .slot, etc.) never leak onto the existing 22 pages, * which already use some of the same short class names for different things. * * :root tokens are not redeclared here -- they already exist in theme.css and * match exactly (checked value-for-value against the design file). * * @package JCND */ .jcnd-newpage .wrap{padding:22px 22px 0}.jcnd-newpage .herocard{position:relative;max-width:1856px;margin:0 auto;border-radius:var(--radius);overflow:hidden;background:var(--navy-deep);box-shadow:var(--shadow-photo)}.jcnd-newpage .herocard .bg{position:absolute;inset:0;background:url('../img/consultations-hero-photo.jpg') 70% 20%/cover no-repeat;opacity:.32}.jcnd-newpage .herocard .ov{position:absolute;inset:0;background:linear-gradient(96deg,rgba(15,22,42,.94),rgba(16,24,46,.72))}.jcnd-newpage .navbar, .jcnd-newpage .head{position:relative;z-index:3}.jcnd-newpage .navbar{padding:0 clamp(24px,4vw,64px)}.jcnd-newpage .navrow{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:30px 0 22px}.jcnd-newpage .logo{width:clamp(240px,24vw,320px);height:auto;display:block}.jcnd-newpage .nav-links{display:flex;align-items:center;gap:26px}.jcnd-newpage .nav-links a{font:500 16.5px 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:rgba(250,248,242,.88);text-decoration:none}.jcnd-newpage .nav-links a:hover{color:#fff}.jcnd-newpage .nav-links .sep{width:1px;height:34px;background:rgba(250,248,242,.32)}.jcnd-newpage .book{display:inline-flex;align-items:center;padding:13px 26px;background:var(--cream);border-radius:4px;font:500 16.5px 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--navy);text-decoration:none;white-space:nowrap}.jcnd-newpage .book:hover{background:#fff}.jcnd-newpage .nav-links a.book, .jcnd-newpage .mnav a.book{color:var(--navy)}.jcnd-newpage .nav-links a.book:hover, .jcnd-newpage .mnav a.book:hover{color:var(--navy)}.jcnd-newpage .burger{display:none;background:none;border:none;cursor:pointer;color:#fff;font-size:30px;line-height:1}.jcnd-newpage .head{padding:clamp(36px,5vw,64px) clamp(24px,4vw,64px) clamp(44px,5vw,72px)}.jcnd-newpage .head .in{max-width:900px}.jcnd-newpage .crumb{display:flex;align-items:center;gap:10px;font:500 16px 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:rgba(250,248,242,.72);margin-bottom:26px;flex-wrap:wrap}.jcnd-newpage .crumb a{text-decoration:none}.jcnd-newpage .crumb a:hover{color:#fff}.jcnd-newpage .eyebrow{font:600 11px/1 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:22px}.jcnd-newpage h1{font-family:'Playfair Display','Iowan Old Style',Georgia,serif;font-weight:600;font-size:clamp(38px,5.2vw,60px);line-height:1.05;letter-spacing:-.02em;color:#fff;margin:0}.jcnd-newpage .body{background:var(--cream);padding:clamp(56px,7vw,96px) clamp(24px,4vw,64px)}.jcnd-newpage .grid{display:grid;grid-template-columns:300px 1fr;gap:clamp(36px,5vw,80px);align-items:start;max-width:1240px;margin:0 auto}.jcnd-newpage .toc{position:sticky;top:32px}.jcnd-newpage .toc .card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:28px}.jcnd-newpage .toc .lbl{font:600 11px/1 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:18px}.jcnd-newpage .toc nav{display:flex;flex-direction:column}.jcnd-newpage .toc a{text-decoration:none;font:400 16px/1.45 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--slate);padding:8px 0 8px 16px;border-left:2px solid var(--line)}.jcnd-newpage .toc a:hover{color:var(--navy)}.jcnd-newpage .toc a.active{color:var(--navy);font-weight:600;border-left-color:var(--gold)}.jcnd-newpage article{max-width:760px;min-width:0}.jcnd-newpage article>p, .jcnd-newpage .sec p{margin:0 0 20px;font:400 17.5px/1.7 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--slate)}.jcnd-newpage article .lead{font-size:19px}.jcnd-newpage .sec{padding-top:36px}.jcnd-newpage .sec h2{font-family:'Playfair Display','Iowan Old Style',Georgia,serif;font-weight:600;font-size:clamp(24px,2.4vw,32px);line-height:1.15;letter-spacing:-.02em;color:var(--navy);margin:0 0 20px}.jcnd-newpage .sec h3{font-family:'Playfair Display','Iowan Old Style',Georgia,serif;font-weight:600;font-size:19px;line-height:1.3;color:var(--navy);margin:26px 0 14px}.jcnd-newpage .sec ul{margin:0 0 20px;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}.jcnd-newpage .sec ul li{position:relative;padding-left:26px;font:400 17px/1.6 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--slate)}.jcnd-newpage .sec ul li:before{content:"";position:absolute;left:0;top:11px;width:7px;height:7px;background:var(--gold);border-radius:4px}.jcnd-newpage .sec strong{color:var(--navy);font-weight:600}.jcnd-newpage .sec sup{font-size:.62em;line-height:0;vertical-align:super}.jcnd-newpage .sec sup a{color:var(--gold-deep);font-weight:700;text-decoration:none;padding:0 1px}.jcnd-newpage .sec a:not(.btn):not(.relcard){color:var(--navy);font-weight:600;text-decoration:none;border-bottom:1px solid var(--navy)}.jcnd-newpage .diagram{margin:32px 0 8px;background:var(--navy);border-radius:var(--radius);padding:clamp(28px,4vw,40px)}.jcnd-newpage .diag-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:22px}.jcnd-newpage .diag-eye{font:600 11px/1 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}.jcnd-newpage .diag-file{font:400 12.5px 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:rgba(250,248,242,.5)}.jcnd-newpage .diagram figcaption, .jcnd-newpage figure.diagram>figcaption{text-align:center;margin-top:16px;font:400 13.5px 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:rgba(250,248,242,.6)}.jcnd-newpage .faq{border-top:1px solid var(--line);margin-top:20px}.jcnd-newpage .faq details{border-bottom:1px solid var(--line)}.jcnd-newpage .faq summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:24px 2px;font-family:'Playfair Display','Iowan Old Style',Georgia,serif;font-weight:600;font-size:19px;line-height:1.3;color:var(--navy)}.jcnd-newpage .faq summary::-webkit-details-marker{display:none}.jcnd-newpage .faq .pm{flex-shrink:0;width:32px;height:32px;border-radius:999px;border:1px solid var(--navy);position:relative}.jcnd-newpage .faq .pm:before, .jcnd-newpage .faq .pm:after{content:"";position:absolute;background:var(--navy);left:50%;top:50%;transform:translate(-50%,-50%)}.jcnd-newpage .faq .pm:before{width:12px;height:2px}.jcnd-newpage .faq .pm:after{width:2px;height:12px}.jcnd-newpage .faq details[open] .pm:after{display:none}.jcnd-newpage .faq .fa{padding:0 2px 26px;font:400 16.5px/1.6 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--slate);max-width:60ch}.jcnd-newpage .faq .fa a{color:var(--navy);font-weight:600}.jcnd-newpage .start{}.jcnd-newpage .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}.jcnd-newpage .btn{display:inline-flex;align-items:center;padding:14px 28px;border-radius:4px;font:500 16.5px 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;text-decoration:none}.jcnd-newpage .btn-p{background:var(--navy);color:var(--cream)}.jcnd-newpage .btn-p:hover{background:var(--navy-deep)}.jcnd-newpage .btn-s{background:transparent;color:var(--navy);border:1px solid var(--navy)}.jcnd-newpage .btn-s:hover{background:var(--tint)}.jcnd-newpage .rel{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.6vw,20px)}.jcnd-newpage .relcard{display:flex;flex-direction:column;padding:28px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;transition:transform .25s,border-color .25s}.jcnd-newpage .relcard:hover{transform:translateY(-3px);border-color:var(--navy)}.jcnd-newpage .relcard .rt{font-family:'Playfair Display','Iowan Old Style',Georgia,serif;font-weight:600;font-size:19px;color:var(--navy);margin-bottom:8px}.jcnd-newpage .relcard .rs{font:400 16.5px/1.5 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--slate);flex:1;margin-bottom:14px}.jcnd-newpage .relcard .rm{font:600 16.5px 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--navy)}.jcnd-newpage .refs{margin:0;padding:0;list-style:none}.jcnd-newpage .refs li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);font:400 15px/1.55 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--slate)}.jcnd-newpage .refs .rn{flex-shrink:0;font:600 15px 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--navy);width:20px}.jcnd-newpage .refs a{color:var(--navy);font-weight:600;text-decoration:none;border-bottom:1px solid var(--navy);white-space:nowrap}.jcnd-newpage .author{margin-top:48px;display:flex;gap:28px;align-items:flex-start;background:var(--tint);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:var(--radius);padding:32px}.jcnd-newpage .author .pic{flex-shrink:0;width:104px;height:104px;border-radius:999px;background:url('../img/jarrod-cooper-consultations-portrait.jpg') center/cover no-repeat;border:1px solid var(--line)}.jcnd-newpage .author .nm{font-family:'Playfair Display','Iowan Old Style',Georgia,serif;font-weight:600;font-size:19px;color:var(--navy);margin-bottom:4px}.jcnd-newpage .author .cr{font:600 11px/1.5 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:14px}.jcnd-newpage .author p{font:400 16.5px/1.6 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--slate);max-width:56ch;margin:0 0 18px}.jcnd-newpage .author .lk{display:flex;flex-wrap:wrap;gap:22px}.jcnd-newpage .author .lk a{font:600 16.5px 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--navy);text-decoration:none;border-bottom:1px solid var(--navy);padding-bottom:2px}.jcnd-newpage footer{background:var(--navy);padding:clamp(48px,6vw,72px) clamp(24px,4vw,64px) 28px}.jcnd-newpage .fwrap{max-width:1240px;margin:0 auto}.jcnd-newpage .flogo{width:clamp(230px,22vw,300px);height:auto;display:block;margin-bottom:clamp(36px,4vw,52px)}.jcnd-newpage .fgrid{display:flex;gap:clamp(40px,5vw,64px);align-items:flex-start;flex-wrap:wrap}.jcnd-newpage .fintro{flex:1;min-width:280px;display:flex;flex-direction:column;gap:24px;align-items:flex-start}.jcnd-newpage .fintro h3{font-family:'Playfair Display','Iowan Old Style',Georgia,serif;font-weight:600;font-size:19px;line-height:1.4;color:var(--cream);margin:0;max-width:24ch}.jcnd-newpage .fintro p{margin:0;font:400 16.5px/1.6 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:rgba(250,248,242,.82);max-width:34ch}.jcnd-newpage .fcols{display:flex;gap:clamp(32px,4vw,56px);flex-wrap:wrap}.jcnd-newpage .fcol{min-width:150px}.jcnd-newpage .fcol .h{font:600 11px/1 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(250,248,242,.7);margin-bottom:18px}.jcnd-newpage .fcol a{display:block;font:400 16.5px/1.6 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:rgba(250,248,242,.85);padding:4px 0;text-decoration:none}.jcnd-newpage .fcol a:hover{color:#fff}.jcnd-newpage .fsoc{display:flex;gap:10px;margin-bottom:16px}.jcnd-newpage .fsoc a{width:42px;height:42px;border-radius:999px;background:var(--cream);display:flex;align-items:center;justify-content:center;font:600 13px 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--navy);text-decoration:none}.jcnd-newpage .fbar{border-top:1px solid rgba(250,248,242,.2);margin-top:clamp(40px,4vw,52px);padding-top:26px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center}.jcnd-newpage .fbar span, .jcnd-newpage .fbar a{font:400 16.5px 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:rgba(250,248,242,.65);text-decoration:none}.jcnd-newpage .rev{opacity:0;transform:translateY(18px);transition:opacity .5s,transform .5s}.jcnd-newpage .rev.rev-in{opacity:1;transform:none}.jcnd-newpage .mnav{position:fixed;inset:0;z-index:100;background:var(--navy);color:#fff;padding:32px;display:none;flex-direction:column;gap:4px;overflow:auto}.jcnd-newpage .mnav.open{display:flex}.jcnd-newpage .mnav .x{align-self:flex-end;background:none;border:none;color:#fff;font-size:30px;cursor:pointer;margin-bottom:16px}.jcnd-newpage .mnav a{font-family:'Playfair Display','Iowan Old Style',Georgia,serif;font-weight:600;font-size:24px;color:#fff;text-decoration:none;padding:14px 0;border-bottom:1px solid rgba(250,248,242,.15)} @media(max-width:1024px){.jcnd-newpage .nav-links{display:none}.jcnd-newpage .burger{display:block}.jcnd-newpage .grid{grid-template-columns:1fr}.jcnd-newpage .toc{position:static}} @media(max-width:768px){.jcnd-newpage .rel{grid-template-columns:1fr}.jcnd-newpage .fgrid{flex-direction:column;gap:40px}.jcnd-newpage .author{flex-direction:column}} @media(max-width:480px){.jcnd-newpage article>p, .jcnd-newpage .sec p{font-size:16.5px}.jcnd-newpage .grid{gap:28px}} @media(prefers-reduced-motion:reduce){.jcnd-newpage *{animation:none!important;transition:none!important}.jcnd-newpage .rev{opacity:1;transform:none}}.jcnd-newpage .sect{padding:clamp(56px,7vw,96px) clamp(24px,4vw,64px)}.jcnd-newpage .sect .in{max-width:1240px;margin:0 auto}.jcnd-newpage .sect .in.narrow{max-width:1000px}.jcnd-newpage .bg-cream{background:var(--cream)}.jcnd-newpage .bg-paper{background:var(--paper)}.jcnd-newpage .bg-tint{background:var(--tint)}.jcnd-newpage .bg-navy{background:var(--navy)}.jcnd-newpage .ctr{text-align:center;max-width:760px;margin:0 auto}.jcnd-newpage .eye{font:600 11px/1 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:16px}.jcnd-newpage .eye-l{color:var(--gold)}.jcnd-newpage h2.sh{font-family:'Playfair Display','Iowan Old Style',Georgia,serif;font-weight:600;font-size:clamp(28px,3.4vw,44px);line-height:1.1;letter-spacing:-.02em;color:var(--navy);margin:0 0 20px}.jcnd-newpage h2.sh.lt{color:var(--cream)}.jcnd-newpage h3.sub{font-family:'Playfair Display','Iowan Old Style',Georgia,serif;font-weight:600;font-size:clamp(21px,2.1vw,26px);line-height:1.2;color:var(--navy);margin:0 0 14px}.jcnd-newpage h4.min{font-family:'Playfair Display','Iowan Old Style',Georgia,serif;font-weight:600;font-size:19px;line-height:1.3;color:var(--navy);margin:0 0 10px}.jcnd-newpage .p{margin:0 0 18px;font:400 17.5px/1.7 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--slate)}.jcnd-newpage .p.lt{color:rgba(250,248,242,.85)}.jcnd-newpage .p.lead{font-size:19px}.jcnd-newpage .p:last-child{margin-bottom:0} /* WordPress core's block-library CSS ships ".wp-block-columns{align-items:normal!important}" * (wp-includes/css/dist/block-library/style.min.css) -- confirmed by grepping that file, not * assumed. Both .two and .split are wp:columns blocks, so that !important silently overrode * our align-items:start / align-items:center here, which is why the shorter column (the text * side next to a tall .slot.port placeholder) rendered stretched and top-anchored instead of * sitting level with its sibling column -- the text inside .slot itself was always correctly * centered in its own box, but the ROW no longer centered the two columns against each other, * which is what read as "not aligned" visually. Re-declaring !important here restores it, and * wins because .jcnd-newpage .two/.split (2 classes) beats core's .wp-block-columns (1 class) * at equal !important specificity. */ .jcnd-newpage .two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,64px);align-items:start!important}.jcnd-newpage .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,64px);align-items:center!important}.jcnd-newpage .trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,26px)}.jcnd-newpage .quad{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2vw,26px)}.jcnd-newpage .chk{margin:0 0 18px;padding:0;list-style:none;display:flex;flex-direction:column;gap:13px}.jcnd-newpage .chk li{position:relative;padding-left:34px;font:400 17px/1.6 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--slate)}.jcnd-newpage .chk li:before{content:"";position:absolute;left:0;top:3px;width:21px;height:21px;border-radius:999px;border:1.5px solid var(--gold)}.jcnd-newpage .chk li:after{content:"";position:absolute;left:6px;top:9px;width:9px;height:4px;border-left:1.5px solid var(--gold-deep);border-bottom:1.5px solid var(--gold-deep);transform:rotate(-45deg)}.jcnd-newpage .chk.lt li{color:rgba(250,248,242,.85)}.jcnd-newpage .dots{margin:0 0 18px;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}.jcnd-newpage .dots li{position:relative;padding-left:24px;font:400 17px/1.6 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--slate)}.jcnd-newpage .dots li:before{content:"";position:absolute;left:0;top:11px;width:7px;height:7px;border-radius:4px;background:var(--gold)}.jcnd-newpage .dots strong, .jcnd-newpage .chk strong, .jcnd-newpage .p strong{color:var(--navy);font-weight:600}.jcnd-newpage .card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:28px;transition:transform .25s,border-color .25s}.jcnd-newpage a.card{display:block;text-decoration:none}.jcnd-newpage .card:hover{transform:translateY(-3px);border-color:var(--navy)}.jcnd-newpage .pill{display:inline-flex;padding:7px 14px;background:var(--tint);border-radius:4px;font:600 11px/1 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--navy);margin-bottom:16px}.jcnd-newpage .price{font-family:'Playfair Display','Iowan Old Style',Georgia,serif;font-weight:600;font-size:clamp(22px,2.2vw,28px);color:var(--navy);margin:0 0 14px}.jcnd-newpage .lbl{font:600 11px/1 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);margin:26px 0 14px}.jcnd-newpage .lbl:first-child{margin-top:0}.jcnd-newpage .imp{background:var(--tint);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin:24px 0}.jcnd-newpage .slot{position:relative;background:var(--navy);border-radius:var(--radius);overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;padding:28px;min-height:200px}.jcnd-newpage .slot .sl{font:600 11px/1 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}.jcnd-newpage .slot .st{font-family:'Playfair Display','Iowan Old Style',Georgia,serif;font-weight:600;font-size:18px;line-height:1.3;color:#fff;margin-bottom:8px}.jcnd-newpage .slot .sd{font:400 13px/1.5 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:rgba(250,248,242,.62)}.jcnd-newpage .slot.port{aspect-ratio:660/930;min-height:0}.jcnd-newpage .slot.cardimg{aspect-ratio:664/835;min-height:0}.jcnd-newpage .slot.sq{aspect-ratio:1/1;min-height:0}.jcnd-newpage .slot.land{aspect-ratio:1354/696;min-height:0}.jcnd-newpage .bnote{border:1px solid var(--gold);border-left:4px solid var(--gold);background:#FFFDF6;border-radius:var(--radius);padding:18px 22px;margin:0 0 24px}.jcnd-newpage .bnote .bh{font:600 11px/1 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:8px}.jcnd-newpage .bnote p{margin:0;font:400 15.5px/1.55 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--slate)}.jcnd-newpage .form{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(24px,3vw,36px)}.jcnd-newpage .steps{display:flex;gap:8px;margin-bottom:28px}.jcnd-newpage .stp{flex:1;padding:12px 14px;border-radius:4px;border:1px solid var(--line);font:600 13px/1.3 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--slate);background:var(--cream);cursor:pointer;text-align:left}.jcnd-newpage .stp.on{background:var(--navy);color:var(--cream);border-color:var(--navy)}.jcnd-newpage .fl{display:block;font:600 13.5px/1.45 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--navy);margin-bottom:8px}.jcnd-newpage .fh{font:400 13px/1.5 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--slate);margin:-4px 0 8px}.jcnd-newpage .fi{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:4px;font:400 16px 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--slate);background:var(--paper)}.jcnd-newpage .fi:focus{outline:none;border-color:var(--navy)}.jcnd-newpage textarea.fi{min-height:104px;resize:vertical}.jcnd-newpage .frow{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:20px}.jcnd-newpage .fone{margin-bottom:20px}.jcnd-newpage .opt{display:flex;gap:11px;align-items:flex-start;padding:13px 15px;border:1px solid var(--line);border-radius:4px;margin-bottom:8px;font:400 16px/1.45 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--slate);cursor:pointer}.jcnd-newpage .opt:hover{border-color:var(--navy)}.jcnd-newpage .opt input{margin:3px 0 0;accent-color:var(--navy)}.jcnd-newpage .fnav{display:flex;justify-content:space-between;gap:12px;margin-top:26px;padding-top:24px;border-top:1px solid var(--line);flex-wrap:wrap}.jcnd-newpage .fstep{display:none}.jcnd-newpage .fstep.on{display:block}.jcnd-newpage .acc{border-top:1px solid var(--line)}.jcnd-newpage .acc details{border-bottom:1px solid var(--line)}.jcnd-newpage .acc summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:24px 2px;font-family:'Playfair Display','Iowan Old Style',Georgia,serif;font-weight:600;font-size:19px;line-height:1.35;color:var(--navy)}.jcnd-newpage .acc summary::-webkit-details-marker{display:none}.jcnd-newpage .acc .pm{flex-shrink:0;width:32px;height:32px;border-radius:999px;border:1px solid var(--navy);position:relative}.jcnd-newpage .acc .pm:before, .jcnd-newpage .acc .pm:after{content:"";position:absolute;background:var(--navy);left:50%;top:50%;transform:translate(-50%,-50%)}.jcnd-newpage .acc .pm:before{width:12px;height:2px}.jcnd-newpage .acc .pm:after{width:2px;height:12px}.jcnd-newpage .acc details[open] .pm:after{display:none}.jcnd-newpage .acc .ab{padding:0 2px 26px;max-width:68ch}.jcnd-newpage .acc .ab p{margin:0 0 14px;font:400 16.5px/1.65 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--slate)}.jcnd-newpage .acc .ab p:last-child{margin-bottom:0}.jcnd-newpage .acc .ab a{color:var(--navy);font-weight:600}.jcnd-newpage .icard{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:30px;transition:transform .25s,border-color .25s}.jcnd-newpage .icard:hover{transform:translateY(-3px);border-color:var(--navy)}.jcnd-newpage .ic{width:56px;height:56px;border-radius:999px;background:var(--tint);display:flex;align-items:center;justify-content:center;margin-bottom:20px}.jcnd-newpage .ic svg{width:30px;height:30px;stroke:var(--navy);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} /* .ctaband wraps a wp:group carrying BOTH "sect" (padding) and "grid2" * (max-width:1240 + grid) on the SAME div -- in the approved mockup these * are two separate elements (an outer
that * owns the padding, an inner plain
with no padding of * its own), so the padding never eats into the 1240px content box. Combined * onto one element here, .sect's own horizontal padding was shrinking the * grid2 content well below 1240px and adding an extra inset on top of the * max-width centering -- confirmed via getBoundingClientRect, not guessed. * Fix: give .ctaband itself the outer padding (.sect's own values) and * cancel .sect's padding specifically where it combines with .grid2, so the * inner box is exactly what .ctaband .grid2 says: 1240px, centered, with * nothing stealing from that width. */ .jcnd-newpage .ctaband{background:var(--tint);border-top:1px solid var(--line);padding:clamp(56px,7vw,96px) clamp(24px,4vw,64px)}.jcnd-newpage .ctaband .sect.grid2{padding:0}.jcnd-newpage .ctaband .grid2{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(32px,5vw,72px);align-items:center;max-width:1240px;margin:0 auto}.jcnd-newpage .phone{display:flex;gap:16px;align-items:center;padding:18px 0;text-decoration:none}.jcnd-newpage .phone .pc{flex-shrink:0;width:52px;height:52px;border-radius:999px;background:var(--navy);display:flex;align-items:center;justify-content:center}.jcnd-newpage .phone .pc svg{width:22px;height:22px;stroke:var(--cream);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.jcnd-newpage .phone .pl{font:600 11px/1 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:6px}.jcnd-newpage .phone .pn{font-family:'Playfair Display','Iowan Old Style',Georgia,serif;font-weight:600;font-size:21px;color:var(--navy)}.jcnd-newpage .vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,26px)}.jcnd-newpage .vthumb{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:var(--navy);display:flex;align-items:center;justify-content:center}.jcnd-newpage .vthumb .play{width:56px;height:56px;border-radius:999px;background:var(--cream);display:flex;align-items:center;justify-content:center}.jcnd-newpage .vthumb .play:after{content:"";width:0;height:0;border-left:16px solid var(--navy);border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}.jcnd-newpage .vthumb .dur{position:absolute;right:10px;bottom:10px;padding:4px 9px;border-radius:4px;background:rgba(20,34,79,.86);font:600 12px 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--cream)}.jcnd-newpage .vmeta{font:400 14px 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--slate);margin-top:10px}.jcnd-newpage .hero-copy .chk li{color:rgba(250,248,242,.85)}.jcnd-newpage .hero-copy .chk li:before{border-color:var(--gold)}.jcnd-newpage .hero-copy .chk li:after{border-left-color:var(--gold);border-bottom-color:var(--gold)}.jcnd-newpage .head p.hp{margin:0 0 16px;font:400 17.5px/1.7 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:rgba(250,248,242,.85);max-width:60ch}.jcnd-newpage .head .in.wide{max-width:1000px} @media(max-width:1024px){.jcnd-newpage .trio{grid-template-columns:1fr 1fr}.jcnd-newpage .vgrid{grid-template-columns:1fr 1fr}.jcnd-newpage .ctaband .grid2{grid-template-columns:1fr}.jcnd-newpage .ctaband .grid2 .slot.port{max-width:420px;margin:0 auto}.jcnd-newpage .slot.port, .jcnd-newpage .slot.land, .jcnd-newpage .slot.sq{max-width:480px;margin-left:auto;margin-right:auto}} @media(max-width:768px){.jcnd-newpage .two, .jcnd-newpage .split, .jcnd-newpage .quad{grid-template-columns:1fr}.jcnd-newpage .trio{grid-template-columns:1fr}.jcnd-newpage .vgrid{grid-template-columns:1fr}.jcnd-newpage .frow{grid-template-columns:1fr}.jcnd-newpage .steps{flex-direction:column}.jcnd-newpage .slot.port, .jcnd-newpage .slot.sq{max-width:420px;margin-left:auto;margin-right:auto}} @media(max-width:480px){.jcnd-newpage .sect{padding:44px 20px}.jcnd-newpage .card, .jcnd-newpage .icard, .jcnd-newpage .form{padding:22px}.jcnd-newpage .p{font-size:16.5px}} /* * Per-page hero photo overrides. * * theme.css's shared .herocard .bg rule points every inner page at the same * bg-b2cf8ca428ef.webp photo. The approved designs for the five new pages each * carry their own unique hero photo instead. These overrides target the real * .herocard rendered by header.php (not scoped under .jcnd-newpage, since the * header markup sits outside that wrapper) via a body class set per template. */ body.jcnd-page-consultations .herocard .bg{background-image:url('../img/consultations-hero-photo.jpg')} /* -------------------------------------------------------------------- * Native Gutenberg block resets for the .jcnd-newpage templates. * * Added 13 Sep 2026 alongside the hardcoding fix (see inc/blocks.php): * content on these pages is now real post_content built from core * Gutenberg blocks (group/columns/buttons/list) plus jcnd/package-card * and jcnd/case-study-card, not hand-written HTML. Every design class * above (.sect, .card, .chk, .btn, etc.) still applies via "Additional * CSS class(es)", but WordPress's own default block styling comes along * for the ride on the wrapper markup blocks add, and it visibly fights * the design in one confirmed spot so far: the Button block puts our * .btn/.btn-p/.btn-s classes on the OUTER
, * while the actual visible element is the INNER , which core still renders as a dark grey 9999px pill * with white text -- a second box rendered on top of the real button. * Confirmed by inspecting computed styles in Chrome, not guessed. * ------------------------------------------------------------------ */ .jcnd-newpage .wp-block-button .wp-block-button__link{background:transparent;color:inherit;padding:0;border-radius:0;display:block;width:100%;text-align:inherit;font:inherit} .jcnd-newpage .wp-block-buttons.ctas{margin-top:0} /* Group/Columns blocks add their own block-gap margin between children * (margin-block-start from --wp--style--block-gap) on top of this * design's own spacing (.sect padding, .p margin-bottom, h2.sh margin, * etc.), which double-spaces or under-spaces depending on the pair. * Zeroed here so only the hand-authored classes control spacing, same * as the static HTML this was ported from. */ .jcnd-newpage .wp-block-group, .jcnd-newpage .wp-block-columns, .jcnd-newpage .wp-block-column{margin-top:0;margin-bottom:0} .jcnd-newpage .wp-block-group > *, .jcnd-newpage .wp-block-column > *{margin-block-start:0} /* The list block adds list-style/padding of its own; .chk already * supplies the checkmark bullets via ::before/::after, so strip core's. */ .jcnd-newpage .wp-block-list.chk{list-style:none;padding-left:0} /* Specialties page 9-card grid (jcnd/specialty-card). * .wgrid: 2-column desktop grid of whole-card links, 1-column below 768px * (same breakpoint as .two/.split/.trio above). .wcard: the whole card is * the clickable , not a button inside it -- same "a.card" pattern this * file already declares for the plain .card component, just under its own * class so .card's own callers (package/case-study cards) are untouched. * .wt/.wd/.wm: title, description paragraph, and link-microcopy line. * Reuses this file's existing .dots and .lbl for the optional approach * list and its label -- not redefined here. */ /* wp:group with no explicit "layout" attribute (our case: 9 sibling * jcnd/specialty-card blocks as direct children of one plain wgrid group) * still renders WordPress's legacy .wp-block-group__inner-container wrapper * around those children -- confirmed by inspecting the rendered DOM, not * assumed. Left as display:grid on .wgrid itself, that wrapper becomes the * grid's ONLY child, so all 9 cards stack in column 1 and column 2 sits * empty. display:contents removes the wrapper from the box model so its * children (the 9 real .wcard links) become the actual grid items. The * existing .two/.split groups on this page don't hit this because each of * their 2 sides is its own wp:column block, not a flat list of siblings * inside one shared group. */ .jcnd-newpage .wgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2vw,26px)}.jcnd-newpage .wgrid>.wp-block-group__inner-container{display:contents} /* Card is a fixed 220px image column + flexible text column, matching the * mockup'''s own .wcard rule exactly (grep'''d from the design file'''s