:root{--ink:#202b3a;--muted:#586575;--paper:#fafaf8;--white:#fff;--line:#e7e4df;--teal:#a66b45;--deep:#825134}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 Calibri,"Aptos",Arial,sans-serif}
a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #bf855e;outline-offset:4px}
.wrap{width:min(1180px,calc(100% - 52px));margin:auto}
header{position:sticky;top:0;z-index:20;background:rgba(250,250,248,.96);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{height:86px;display:flex;align-items:center;gap:36px}.brand{font-weight:800;letter-spacing:-.055em;font-size:32px}.brand span{color:var(--teal)}nav{display:flex;gap:23px;margin-left:auto}nav a{font-size:16px;font-weight:650;color:#536273}nav a:hover,nav a.active{color:var(--teal)}
.nav-cta,.btn{background:var(--ink);color:white;border:1px solid var(--ink);padding:12px 19px;border-radius:4px;font-size:15px;font-weight:700;display:inline-flex;align-items:center;gap:12px}.btn.alt{background:transparent;color:var(--ink);border-color:#abb4bd}.btn:hover,.nav-cta:hover{background:var(--deep);color:#fff}
.page{display:none}.page.active{display:block;animation:appear .3s ease}@keyframes appear{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}
.hero{padding:112px 0 92px;display:grid;grid-template-columns:1.12fr .88fr;align-items:center;gap:55px}.eyebrow{font-size:11px;letter-spacing:.17em;font-weight:800;color:var(--teal);text-transform:uppercase}
h1,h2,h3,p{margin-top:0}h1,h2,h3,.brand{font-family:"IBM Plex Sans",Calibri,"Aptos",Arial,sans-serif}h1{font-size:clamp(44px,5.8vw,82px);letter-spacing:-.075em;line-height:1.04;font-weight:680;margin:19px 0 25px}h2{font-size:clamp(31px,4vw,50px);letter-spacing:-.065em;line-height:1.14;font-weight:680;margin:10px 0 15px}h3{font-size:22px;letter-spacing:-.035em;line-height:1.25}
.lead{font-size:18px;color:var(--muted);max-width:580px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.visual{height:385px;position:relative;overflow:hidden;background:#263443;border-radius:6px}.visual canvas{width:100%;height:100%;display:block}.visual-tag{position:absolute;left:22px;bottom:18px;color:#efd4bd;font-size:10px;letter-spacing:.15em;text-transform:uppercase}
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:21px 0;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:#65717d;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
section.block{padding:95px 0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:34px}.section-head p{max-width:460px;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.card{background:var(--white);border:1px solid var(--line);border-radius:5px;padding:30px;min-height:220px;transition:border-color .2s,transform .2s}.card:hover{border-color:#cfab90;transform:translateY(-2px)}
.card .num{font-size:11px;color:var(--teal);font-weight:800;letter-spacing:.13em}.card h3{margin:25px 0 12px}.card p{color:var(--muted);font-size:14px}.text-link{color:var(--teal);font-weight:750;font-size:13px}
.dark{background:#202b3a;color:#fbf8f3}.dark p{color:#d7c7b8}.dark .eyebrow{color:#d4ad8c}.feature{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.feature ul{padding-left:19px;color:#d7c7b8}
.page-hero{padding:80px 0 48px;border-bottom:1px solid var(--line)}.page-hero h1{font-size:clamp(44px,5vw,65px);max-width:850px}.page-hero p{max-width:720px}
.services{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:48px 0 100px}.service{border:1px solid var(--line);background:white;border-radius:5px;overflow:hidden}
.service button{width:100%;padding:28px;text-align:left;background:transparent;border:0;display:flex;justify-content:space-between;align-items:center;gap:20px}.service button strong{font-size:21px;letter-spacing:-.04em}.service button span{color:var(--teal);font-size:25px}.service .detail{display:none;padding:0 28px 27px;color:var(--muted);font-size:14px}.service.open .detail{display:block}.service.open{border-color:#bc8d69}.service.open button span{transform:rotate(45deg)}
.project{display:flex;flex-direction:column;min-height:260px}.project .tag,.article .tag{font-size:10px;letter-spacing:.12em;color:var(--teal);text-transform:uppercase;font-weight:800}.project .text-link{margin-top:auto}
.article{border-top:1px solid var(--line);padding:28px 0;display:grid;grid-template-columns:140px 1fr auto;gap:30px;align-items:center}.article h3{margin:4px 0}.article p{margin:0;color:var(--muted);font-size:14px}
.bio{display:grid;grid-template-columns:1.4fr .6fr;gap:65px;margin:55px 0 100px}.bio aside{border-left:2px solid var(--teal);padding-left:25px}.bio aside p{font-size:14px;color:var(--muted)}
footer{background:#f1eee8;padding:52px 0 26px}.foot{display:flex;justify-content:space-between;gap:30px}.foot p{color:var(--muted);font-size:13px;max-width:420px}.foot nav{margin:0;flex-wrap:wrap}small{font-size:11px;color:#697684}
.note{padding:14px 18px;background:#f5eee7;border-left:3px solid var(--teal);font-size:13px;color:#9d8b7e}
@media(max-width:800px){.hero,.feature,.bio{grid-template-columns:1fr}.hero{padding:65px 0}.visual{height:300px}.grid{grid-template-columns:1fr 1fr}.services{grid-template-columns:1fr}nav{gap:12px;flex-wrap:wrap}.nav{height:auto;padding:17px 0;flex-wrap:wrap}.nav-cta{display:none}.article{grid-template-columns:1fr;gap:8px}.foot{flex-direction:column}}
@media(max-width:540px){.wrap{width:calc(100% - 32px)}.grid{grid-template-columns:1fr}nav{width:100%;justify-content:space-between}nav a{font-size:13px}.section-head{display:block}.hero{gap:30px}.visual{height:240px}section.block{padding:60px 0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
@media(max-width:800px){.brand{font-size:29px}.nav{height:auto}nav a{font-size:14px}}@media(max-width:540px){nav a{font-size:12px}nav{gap:10px}}

/* CapriSec V6 — understated globe and ambient service streams */
.globe-visual{background:transparent;cursor:grab}.globe-visual:active{cursor:grabbing}.globe-visual canvas{touch-action:pan-y}
.services-stage{position:relative;isolation:isolate;margin-top:42px;padding:62px 0 76px;background:#192634;overflow:hidden}
.services-stage>canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:1;pointer-events:none}
.services-stage .services{margin:0 auto;position:relative;z-index:1}
.services-stage .service{background:rgba(250,250,248,.88);box-shadow:0 8px 24px rgba(0,0,0,.06);backdrop-filter:blur(3px)}
.services-stage .service.open{background:#fff}
#services .page-hero{border-bottom:0}
@media(max-width:540px){.services-stage{padding:20px 0 35px}}

/* V8: globe-first hero, without rectangular background or promotional copy */
.globe-hero{position:relative;min-height:670px;display:grid;place-items:center;isolation:isolate;overflow:hidden;padding:28px 0 40px}
.globe-sphere{position:relative;width:min(700px,100%);height:620px;z-index:2;overflow:visible;border:0;border-radius:50%;background:transparent}
.globe-sphere canvas{width:100%;height:100%;display:block}
.globe-orbit{position:absolute;z-index:1;border-radius:50%;pointer-events:none}
.globe-orbit-one{width:110px;height:110px;top:16%;left:10%;background:radial-gradient(circle at 35% 30%,#e4d6c5,#bd9d80 70%,#8d6b53);box-shadow:inset -16px -14px 25px #463b3a30;opacity:.46}
.globe-orbit-two{width:56px;height:56px;top:25%;right:11%;background:radial-gradient(circle at 35% 30%,#c5d0d2,#667e89 80%);opacity:.56}
.globe-orbit-three{width:80px;height:80px;bottom:18%;right:7%;background:radial-gradient(circle at 30% 25%,#dec5ad,#a66b45 85%);opacity:.35}
.globe-orbit-four{width:28px;height:28px;bottom:25%;left:12%;background:#a66b45;opacity:.35}
.globe-hero::before,.globe-hero::after{content:"";position:absolute;z-index:0;left:50%;top:49%;width:min(920px,94%);aspect-ratio:1;border:1px solid rgba(166,107,69,.12);border-radius:50%;transform:translate(-50%,-50%) rotate(-24deg) scaleY(.61);pointer-events:none}
.globe-hero::after{width:min(1020px,100%);transform:translate(-50%,-50%) rotate(28deg) scaleY(.64);border-color:rgba(32,43,58,.1)}
@media(max-width:800px){.globe-hero{min-height:530px}.globe-sphere{height:480px}.globe-orbit-one{left:1%;width:70px;height:70px}.globe-orbit-two{right:2%}.globe-orbit-three{right:0%;width:50px;height:50px}}
@media(max-width:540px){.globe-hero{min-height:355px;padding:12px 0 22px}.globe-sphere{height:340px}.globe-orbit-one{width:45px;height:45px}.globe-orbit-two{width:30px;height:30px}.globe-orbit-three{width:34px;height:34px}.globe-orbit-four{width:14px;height:14px}}

/* V9: return to the editorial hero, with the globe as a true ambient background. */
.hero-backdrop{position:relative;isolation:isolate;overflow:hidden;min-height:650px;display:flex;align-items:center;background:linear-gradient(105deg,#fafaf8 0%,#fafaf8 37%,#f4f3f0 100%)}
.hero-backdrop::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#fafaf8 0%,rgba(250,250,248,.98) 31%,rgba(250,250,248,.77) 48%,rgba(250,250,248,.12) 76%,rgba(250,250,248,.02) 100%)}
.hero-network{position:absolute;z-index:-2;right:max(-85px,calc((100vw - 1450px)/2));top:50%;width:min(760px,65vw);height:680px;transform:translateY(-50%);pointer-events:none;opacity:.88}
.hero-network .globe-sphere{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-network .globe-sphere canvas{width:100%;height:100%}
.hero-network .globe-orbit-one{top:19%;left:4%;width:68px;height:68px;opacity:.28}
.hero-network .globe-orbit-two{top:22%;right:7%;width:42px;height:42px;opacity:.30}
.hero-network .globe-orbit-three{bottom:18%;right:8%;width:48px;height:48px;opacity:.28}
.hero-content{position:relative;z-index:1;padding:105px 0 112px}
.hero-copy{max-width:610px}
.hero-copy h1{font-size:clamp(46px,5.2vw,76px);letter-spacing:-.065em;color:#202b3a}
.hero-copy h1::first-line{color:#202b3a}
.hero-copy .eyebrow{color:#94603f}
.hero-copy .lead{color:#435366;max-width:555px;font-size:19px;line-height:1.65}
.hero-copy .btn{background:#202b3a;border-color:#202b3a}
.hero-copy .btn.alt{background:#fafaf8e8;color:#202b3a;border-color:#b4aaa0}
.hero-copy .btn:hover{background:#825134;color:white;border-color:#825134}
@media(max-width:900px){.hero-backdrop{min-height:570px}.hero-network{right:-220px;width:720px;opacity:.52}.hero-backdrop::after{background:linear-gradient(90deg,#fafaf8 0%,rgba(250,250,248,.94) 54%,rgba(250,250,248,.48) 100%)}.hero-content{padding:90px 0}.hero-copy{max-width:590px}}
@media(max-width:540px){.hero-backdrop{min-height:550px}.hero-content{padding:72px 0 82px}.hero-network{width:580px;height:560px;right:-310px;opacity:.32}.hero-backdrop::after{background:rgba(250,250,248,.67)}.hero-copy h1{font-size:clamp(41px,11vw,56px)}.hero-copy .lead{font-size:17px}.hero-network .globe-orbit{display:none}}
@media(prefers-reduced-motion:reduce){.hero-backdrop .globe-sphere{opacity:.8}}

/* V10: homepage content follows the established navy/copper design language. */
.home-overview .section-head{margin-bottom:42px}.home-overview .section-head p{max-width:505px}
.home-pillars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pillar{position:relative;display:flex;flex-direction:column;min-height:295px;padding:34px 36px 29px;border:1px solid #deddd9;background:#fff;border-radius:5px;transition:transform .2s,border-color .2s,box-shadow .2s}
.pillar:hover{border-color:#b98f70;transform:translateY(-3px);box-shadow:0 12px 35px rgba(32,43,58,.055)}
.pillar-index{font:700 11px/1.2 'IBM Plex Sans',Arial,sans-serif;letter-spacing:.13em;color:#986343}
.pillar-symbol{position:absolute;right:32px;top:25px;color:#a66b45;font-size:23px}
.pillar h3{font-size:clamp(22px,2.3vw,28px);margin:32px 0 12px;letter-spacing:-.04em;max-width:420px}
.pillar p{font-size:16px;color:#586575;line-height:1.65;max-width:510px;margin-bottom:27px}
.pillar-link{margin-top:auto;font:700 14px/1.3 'IBM Plex Sans',Calibri,sans-serif;color:#865538}
.leon-band{background:linear-gradient(115deg,#1e2b3b,#2c3a4b);color:#fcfaf7;overflow:hidden}
.leon-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(220px,.7fr);align-items:center;gap:40px;padding:76px 0}
.leon-layout .eyebrow{color:#d0a582}.leon-layout h2{font-size:clamp(34px,4vw,54px)}
.leon-layout p{max-width:620px;color:#d5dce2;font-size:17px;line-height:1.7}
.leon-link{display:inline-flex;align-items:center;gap:12px;margin-top:15px;color:#e5b38c;border-bottom:1px solid rgba(229,179,140,.5);padding-bottom:5px;font-weight:700}
.leon-mark{justify-self:center;position:relative;width:255px;height:255px;display:grid;place-items:center}
.leon-ring{position:absolute;border:1px solid rgba(210,160,117,.35);border-radius:50%}.leon-ring-1{inset:9px}.leon-ring-2{inset:37px;border-style:dashed;transform:rotate(-24deg)}
.leon-core{display:grid;place-items:center;width:105px;height:105px;border:1px solid rgba(237,193,153,.65);border-radius:50%;background:radial-gradient(circle at 30% 25%,rgba(166,107,69,.35),rgba(166,107,69,.04));font:600 58px 'IBM Plex Sans',Calibri,sans-serif;color:#e6b993}
.closing-links{display:flex;flex-wrap:wrap;gap:14px}
.closing-links a{flex:1;min-width:210px;border-top:1px solid #d9d8d3;padding:21px 2px;display:flex;justify-content:space-between;gap:12px;font-weight:700;color:#283749}
.closing-links a span{color:#9a6240}
@media(max-width:800px){.leon-layout{grid-template-columns:1fr}.leon-mark{display:none}}
@media(max-width:640px){.home-pillars{grid-template-columns:1fr}.pillar{min-height:0;padding:28px}.pillar h3{margin-top:26px}.leon-layout{padding:62px 0}.closing-links a{min-width:100%}}

/* WordPress page templates display their own page content. */
.page{display:block}.page.active{display:block}
.admin-bar header{top:32px}
@media(max-width:782px){.admin-bar header{top:46px}}
.wp-article-content{max-width:820px;margin:55px auto 90px;font-size:18px;line-height:1.78;overflow-wrap:anywhere}
.wp-article-content img{height:auto;max-width:100%}
.wp-article-content a{color:var(--deep);text-decoration:underline}
.wp-article-content h2,.wp-article-content h3{margin-top:1.4em}
.wp-article-meta{color:var(--muted);font-size:14px}
.wp-pagination{margin:25px 0 90px}
.screen-reader-text{position:absolute;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden}

/* CapriSec founder portfolio — v2: balanced editorial layout with ambient animated network. */
.portfolio-banner{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(112deg,#202b3a,#28394a 75%,#394353);color:#fff;min-height:510px;display:flex;align-items:center}
.portfolio-banner::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(32,43,58,.98) 0%,rgba(32,43,58,.92) 37%,rgba(32,43,58,.52) 77%,rgba(32,43,58,.3) 100%);pointer-events:none}
#portfolio-network{position:absolute;inset:0;z-index:-2;width:100%;height:100%;pointer-events:none}
.portfolio-banner-inner{padding:92px 0 90px;position:relative}.portfolio-banner .eyebrow{color:#e6b692}.portfolio-banner h1{font-size:clamp(43px,5.5vw,76px);letter-spacing:-.06em;max-width:900px;line-height:1.07;margin:18px 0 23px}.portfolio-banner h1 span{color:#e5b38c}
.portfolio-intro{max-width:670px;color:#e4e9ed;font-size:19px;line-height:1.65}.portfolio-actions{display:flex;align-items:center;flex-wrap:wrap;gap:22px;margin-top:32px}.portfolio-actions .btn{background:#c18a63;color:#182534;border-color:#c18a63}.portfolio-actions .btn:hover{background:#f0c8a8;border-color:#f0c8a8;color:#182534}.portfolio-outline{color:#f0cfb2;font-weight:700;border-bottom:1px solid #ad7959;padding-bottom:4px}
.portfolio-body{max-width:1180px}.portfolio-section{padding:72px 0;border-bottom:1px solid var(--line)}.portfolio-section h2{font-size:clamp(30px,3.4vw,46px);letter-spacing:-.047em;max-width:670px;margin:15px 0 18px}.portfolio-intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px}.portfolio-prose{padding-top:25px;color:#49596a;font-size:18px;line-height:1.7}.portfolio-prose p{margin-bottom:20px}
.portfolio-capabilities{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:32px}.portfolio-capability{padding:30px 32px;background:#fff;border:1px solid #e7e4df;border-radius:5px;min-height:218px}.portfolio-n{font-size:11px;letter-spacing:.14em;color:#a66b45;font-weight:800}.portfolio-capability h3{font-size:23px;margin:21px 0 12px}.portfolio-capability p,.portfolio-work-grid p{font-size:15px;color:#596878;line-height:1.7;margin:0}
.portfolio-tooling{display:grid;grid-template-columns:.95fr 1.05fr;gap:60px;align-items:center}.portfolio-tooling-title>p{color:#596878;font-size:16px;max-width:440px}.portfolio-tool-list{display:flex;flex-wrap:wrap;gap:11px}.portfolio-tool-list span{display:inline-flex;padding:12px 16px;background:#f0ece5;border:1px solid #ded5ca;color:#314155;border-radius:3px;font-weight:700;font-size:14px}
.portfolio-section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px}.portfolio-section-heading a{margin-bottom:24px}.portfolio-work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:26px}.portfolio-work-grid article{padding:30px;background:white;border:1px solid var(--line);min-height:228px}.portfolio-work-grid h3{margin:26px 0 10px}
.portfolio-credentials{display:grid;grid-template-columns:.8fr 1.2fr;gap:55px}.portfolio-credentials-note{color:#647184}.portfolio-credential-list>div{display:flex;justify-content:space-between;gap:18px;padding:17px 0;border-bottom:1px solid var(--line);align-items:flex-start}.portfolio-credential-list strong{font-size:15px;max-width:380px;line-height:1.45}.portfolio-credential-list span{color:#92684f;font-size:12px;text-align:right;max-width:190px;line-height:1.45}
.portfolio-education{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}.portfolio-education>p{font-size:16px;color:#5c6979;line-height:1.7}.portfolio-education>div p{color:#8d5d41;font-weight:700}.portfolio-footer-link{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:47px 0 80px;font-size:20px;font-weight:700}.portfolio-footer-link a{color:#9c6240}
@media(max-width:850px){.portfolio-intro-grid,.portfolio-tooling,.portfolio-credentials,.portfolio-education{grid-template-columns:1fr;gap:22px}.portfolio-work-grid{grid-template-columns:1fr}.portfolio-banner-inner{padding:72px 0}.portfolio-banner{min-height:470px}.portfolio-credential-list>div{flex-direction:column;gap:6px}.portfolio-credential-list span{text-align:left}}
@media(max-width:600px){.portfolio-capabilities{grid-template-columns:1fr}.portfolio-section{padding:52px 0}.portfolio-section-heading,.portfolio-footer-link{display:block}.portfolio-work-grid article{min-height:0}.portfolio-banner h1{font-size:clamp(38px,10vw,54px)}.portfolio-intro{font-size:17px}.portfolio-footer-link a{display:block;margin-top:10px}}


/* CapriSec v1.2 — accessible services accordion, better contrast and type */
#services .services-stage .service button strong{font-size:clamp(21px,2vw,24px);line-height:1.35;color:#203044;font-weight:700;letter-spacing:-.025em}
#services .services-stage .service .detail{font-size:18px;line-height:1.75;color:#344457;padding:0 30px 30px}
#services .services-stage .service .detail p{font-size:18px;line-height:1.75;color:#344457;margin:0 0 14px}
#services .services-stage .service .detail ul{margin:10px 0 0;padding-left:24px;color:#344457}
#services .services-stage .service .detail li{font-size:17px;line-height:1.7;margin:7px 0;padding-left:4px}
#services .services-stage .service.open{background:#fffdfb;border-color:#b27b55;box-shadow:0 12px 36px rgba(0,0,0,.16)}
#services .services-stage .service button:focus-visible{outline:3px solid #b27b55;outline-offset:-4px}
/* New posts automatically appear on the Research page */
#research .article h3{font-size:clamp(21px,2.2vw,26px);line-height:1.3}
#research .article p{font-size:16px;line-height:1.7;color:#435269}
#research .article .tag{font-size:12px}
#research .article .article-thumb{display:block;max-width:230px;overflow:hidden;border-radius:5px}
#research .article .article-thumb img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.wp-pagination{margin:30px 0;display:flex;flex-wrap:wrap;gap:10px}
.wp-pagination .page-numbers{display:inline-flex;padding:8px 14px;border:1px solid #c5b9ae;border-radius:4px}
.wp-pagination .page-numbers.current{background:#273647;color:#fff}
@media(max-width:600px){#services .services-stage .service .detail{padding:0 22px 24px}#services .services-stage .service .detail p{font-size:17px}#services .services-stage .service .detail li{font-size:16px}#research .article .article-thumb{max-width:100%}}

/* v1.3 CMS links and rich text */
.csc-project-links{display:flex;gap:16px;flex-wrap:wrap;margin-top:auto;align-items:center}.csc-project-links .text-link{margin-top:14px;display:inline-block}.service .detail a{color:#854d2e;text-decoration:underline}.service .detail p + ul{margin-top:12px}.portfolio-work-grid article .text-link{display:inline-block;margin-top:18px}.wp-article-content .btn{display:inline-block;margin:18px 12px 8px 0}

/* CapriSec contact form */
.caprisec-contact-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(260px,.85fr);align-items:start;gap:26px;padding-top:12px!important}
.caprisec-contact-panel,.caprisec-contact-aside{padding:clamp(24px,3.5vw,42px)}
.caprisec-contact-panel h2{font-size:clamp(30px,3.5vw,42px);margin:10px 0 24px}
.caprisec-contact-form{display:flex;flex-direction:column;gap:10px}
.caprisec-contact-form label{font-size:16px;font-weight:700;color:var(--ink);margin-top:9px}
.caprisec-contact-form input:not([type=hidden]),.caprisec-contact-form textarea{width:100%;font:inherit;font-size:17px;color:var(--ink);background:#fff;border:1px solid #aeb8c4;border-radius:6px;padding:14px 16px;line-height:1.55}
.caprisec-contact-form textarea{resize:vertical;min-height:165px}
.caprisec-contact-form input:focus,.caprisec-contact-form textarea:focus{outline:2px solid var(--teal);outline-offset:2px}
.caprisec-contact-form .btn{align-self:flex-start;margin-top:8px}
.contact-privacy{font-size:14px;line-height:1.6;color:var(--muted);margin:5px 0 0}
.contact-email{font-size:clamp(18px,2vw,24px);font-weight:700;color:var(--deep);overflow-wrap:anywhere}
.contact-divider{border-top:1px solid var(--line);margin:34px 0}
.contact-notice{padding:15px 18px;border-radius:6px;border:1px solid #b9805a;background:#fff4e8;color:#59402b;margin-bottom:18px}
.contact-notice.success{border-color:#57866d;background:#effaf2;color:#204d32}
.caprisec-honeypot{position:absolute!important;left:-99999px!important;opacity:0!important;pointer-events:none!important}
@media(max-width:750px){.caprisec-contact-layout{grid-template-columns:1fr}.caprisec-contact-panel,.caprisec-contact-aside{padding:24px}}

/* v1.6: responsive navigation and fully visible mobile hero globe */
.mobile-contact-link{display:none}
@media(max-width:800px){
  .nav nav[aria-label="Main navigation"]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 12px;margin:6px 0 0;width:100%}
  .nav nav[aria-label="Main navigation"] a{display:block;padding:9px 4px;text-align:center;font-size:14px;white-space:nowrap}
  .mobile-contact-link{display:block!important;color:var(--deep);font-weight:750}
}
@media(max-width:600px){
  .hero-backdrop{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding-bottom:24px;overflow:hidden}
  .hero-content{order:1;padding:54px 0 18px}
  .hero-network{order:2;position:relative;inset:auto;top:auto;right:auto;left:auto;transform:none;margin:0 auto;width:min(100%,390px);height:360px;max-width:100%;opacity:1;flex:0 0 auto}
  .hero-backdrop::after{display:none}
  .hero-network .globe-sphere{inset:0;width:100%;height:100%}
  .hero-copy h1{font-size:clamp(36px,10vw,54px);overflow-wrap:normal}
  .nav nav[aria-label="Main navigation"] a{font-size:13px}
  .caprisec-contact-layout{min-width:0}
  .caprisec-contact-panel,.caprisec-contact-aside{min-width:0}
  .caprisec-contact-form input,.caprisec-contact-form textarea{max-width:100%;min-width:0}
}
@media(max-width:360px){.hero-network{height:310px}.nav nav[aria-label="Main navigation"]{gap:3px 5px}}

/* v1.9: on phones the animated globe remains an ambient hero BACKGROUND,
   not a separate element stacked underneath the introduction. */
@media (max-width:600px){
  .hero-backdrop{
    position:relative;
    display:flex;
    flex-direction:row;
    align-items:center;
    isolation:isolate;
    min-height:610px;
    padding:0;
    overflow:hidden;
    background:linear-gradient(115deg,#fafaf8 0%,#f2f1ee 100%);
  }
  .hero-network{
    order:initial;
    position:absolute;
    inset:auto -2vw auto auto;
    top:53%;
    left:auto;
    width:94vw;
    max-width:460px;
    height:min(94vw,460px);
    min-height:0;
    margin:0;
    transform:translateY(-50%);
    opacity:.55;
    z-index:-2;
    pointer-events:none;
  }
  .hero-network .globe-sphere{position:absolute;inset:0;width:100%;height:100%}
  .hero-backdrop::after{
    display:block;
    z-index:-1;
    background:linear-gradient(90deg,rgba(250,250,248,.94) 0%,rgba(250,250,248,.84) 40%,rgba(250,250,248,.55) 75%,rgba(250,250,248,.33) 100%);
  }
  .hero-content{order:initial;position:relative;z-index:1;width:calc(100% - 32px);padding:75px 0 85px}
  .hero-copy{max-width:100%}
  .hero-copy h1{font-size:clamp(36px,10vw,54px)}
}
@media (max-width:360px){
  .hero-network{height:94vw;min-height:0}
  .hero-backdrop{min-height:640px}
}

/* v2.0 — sharper country outlines and visible ambient traffic on narrow screens. */
@media(max-width:600px){
 .hero-network{opacity:.78;right:-5vw;width:100vw;max-width:500px;height:min(100vw,500px)}
 .hero-backdrop::after{background:linear-gradient(90deg,rgba(250,250,248,.94) 0%,rgba(250,250,248,.79) 38%,rgba(250,250,248,.30) 82%,rgba(250,250,248,.18) 100%)}
}

/* v2.1 — Readability improvements on the Projects page only */
#projects .page-hero .lead{font-size:clamp(18px,2vw,21px);line-height:1.75}
#projects .project .tag{font-size:12px;letter-spacing:.09em}
#projects .project h3{font-size:clamp(23px,2.2vw,27px);line-height:1.3}
#projects .project p{font-size:17px;line-height:1.75;color:#445365}
#projects .project .text-link{font-size:15px}
@media(max-width:540px){#projects .project p{font-size:16px}#projects .project h3{font-size:23px}}

/* v2.2 — larger projects text & consistent globe-as-backdrop on phones */
#projects .project h3{font-size:clamp(26px,2.7vw,32px);line-height:1.32}
#projects .project p{font-size:clamp(19px,1.65vw,21px);line-height:1.8;color:#344457}
#projects .project .text-link{font-size:18px;font-weight:700}
#projects .project .tag{font-size:13px}
@media(max-width:600px){
  #projects .project h3{font-size:26px}
  #projects .project p{font-size:18px;line-height:1.75}
  #projects .project .text-link{font-size:17px}
  /* Prevent the old below-copy flex mobile layout from reappearing. */
  .hero-backdrop{position:relative!important;display:block!important;isolation:isolate;overflow:hidden;min-height:610px}
  .hero-network{position:absolute!important;display:block!important;order:initial!important;left:50%!important;right:auto!important;top:53%!important;width:min(112vw,530px)!important;max-width:none!important;height:min(112vw,530px)!important;margin:0!important;transform:translate(-42%,-50%)!important;opacity:.92!important;z-index:0!important;pointer-events:none}
  .hero-backdrop::after{z-index:1!important;pointer-events:none;background:linear-gradient(90deg,rgba(250,250,248,.90) 0%,rgba(250,250,248,.70) 46%,rgba(250,250,248,.26) 100%)!important}
  .hero-content{position:relative;z-index:2!important;order:initial!important;padding:80px 0 90px}
}
/* Contact page receives the same animated globe engine, as decorative backdrop. */
#contact .contact-globe-hero{position:relative;isolation:isolate;overflow:hidden;min-height:370px;display:flex;align-items:center}
#contact .contact-globe-scene{position:absolute;z-index:0;right:0;top:50%;transform:translateY(-50%);width:min(55%,580px);height:360px;opacity:.88;pointer-events:none}
#contact .contact-globe-scene canvas{display:block;width:100%;height:100%}
#contact .contact-globe-hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#fafaf8 5%,rgba(250,250,248,.94) 37%,rgba(250,250,248,.10) 100%);pointer-events:none}
#contact .contact-globe-hero .page-hero{position:relative;z-index:2;margin:0 auto;width:100%}
@media(max-width:650px){
 #contact .contact-globe-hero{min-height:400px}
 #contact .contact-globe-scene{width:110%;height:390px;right:-38%;opacity:.83}
 #contact .contact-globe-hero::after{background:linear-gradient(90deg,rgba(250,250,248,.93),rgba(250,250,248,.70) 55%,rgba(250,250,248,.20))}
}

/* v2.3 — Mobile text readability over the ambient network globe.
   Preserve the globe as a background, with a stronger soft neutral veil under text. */
@media (max-width: 650px) {
  .hero-backdrop::after {
    display:block!important;
    opacity:1!important;
    background:linear-gradient(90deg,
      rgba(250,250,248,.97) 0%,
      rgba(250,250,248,.94) 30%,
      rgba(250,250,248,.83) 62%,
      rgba(250,250,248,.63) 100%)!important;
  }
  .hero-backdrop .hero-copy h1 {
    color:#14263a!important;
    text-shadow:0 1px 0 rgba(255,255,255,.7);
  }
  .hero-backdrop .hero-copy .lead,
  .hero-backdrop .hero-copy p {
    color:#26384b!important;
    font-weight:500;
    text-shadow:0 1px 0 rgba(255,255,255,.65);
  }
  .hero-backdrop .hero-copy .eyebrow {color:#754527!important}
  #contact .contact-globe-hero::after {
    background:linear-gradient(90deg,
      rgba(250,250,248,.98) 0%,
      rgba(250,250,248,.95) 42%,
      rgba(250,250,248,.78) 77%,
      rgba(250,250,248,.60) 100%)!important;
  }
  #contact .contact-globe-hero .page-hero h1{color:#14263a;text-shadow:0 1px 0 rgba(255,255,255,.6)}
  #contact .contact-globe-hero .page-hero p{color:#26384b;font-weight:500}
}

/* v2.4 — unified globe art direction: portfolio, homepage mobile, contact brand. */
/* Portfolio: reuse the actual geographic globe animation, replacing the schematic mesh. */
#portfolio .portfolio-banner{background:radial-gradient(ellipse at 78% 50%,#213f57 0%,#101f32 48%,#0a1424 100%);min-height:575px}
#portfolio .portfolio-threat-scene{position:absolute;z-index:0;inset:0 0 0 auto;width:min(75%,1040px);pointer-events:none;overflow:hidden;opacity:.94}
#portfolio .portfolio-threat-scene canvas{position:absolute;width:100%;height:100%;inset:0}
#portfolio .portfolio-banner::after{z-index:1;background:linear-gradient(90deg,#0c1729 0%,rgba(12,23,41,.97) 24%,rgba(12,23,41,.80) 47%,rgba(12,23,41,.24) 100%)}
#portfolio .portfolio-banner-inner{z-index:2}
#portfolio .portfolio-orbit{position:absolute;top:50%;left:50%;border:1px solid rgba(72,209,231,.18);border-radius:50%;transform:translate(-50%,-50%) rotate(-22deg);width:72%;aspect-ratio:1.35}
#portfolio .orbit-b{transform:translate(-50%,-50%) rotate(33deg);width:93%;border-color:rgba(246,167,112,.11)}
#portfolio .portfolio-banner .eyebrow{color:#76dded}
#portfolio .portfolio-banner h1 span{color:#8ee4f3}
#portfolio .portfolio-intro{color:#e4edf3}
/* Contact: branded blue + cyan night-sky treatment matches the transparent wordmark. */
#contact .contact-globe-hero{background:radial-gradient(circle at 78% 35%,#123c5d 0%,#0d233b 44%,#071624 100%);min-height:465px;color:#fff}
#contact .contact-globe-scene{width:min(55%,630px);height:440px;right:2%;opacity:.84}
#contact .contact-globe-hero::after{background:linear-gradient(90deg,rgba(7,22,36,.97) 0%,rgba(7,22,36,.91) 36%,rgba(7,22,36,.46) 75%,rgba(7,22,36,.23) 100%)}
#contact .contact-globe-hero .page-hero{padding-top:62px;padding-bottom:50px;max-width:none}
#contact .contact-globe-hero .page-hero h1{color:#f7fbff}
#contact .contact-globe-hero .page-hero .lead{color:#e0edf6;max-width:680px}
#contact .contact-globe-hero .eyebrow{color:#71d7ea}
#contact .contact-identity{margin-top:28px;width:clamp(170px,25vw,290px);max-width:90%}
#contact .contact-identity img{width:100%;height:auto;display:block;filter:drop-shadow(0 0 14px rgba(26,183,236,.12))}
@media(max-width:800px){
 #portfolio .portfolio-banner{min-height:610px}
 #portfolio .portfolio-threat-scene{width:115%;right:-39%;opacity:.84}
 #portfolio .portfolio-banner::after{background:linear-gradient(90deg,rgba(12,23,41,.97),rgba(12,23,41,.86) 51%,rgba(12,23,41,.42))}
 #portfolio .portfolio-banner-inner{padding:90px 0 100px}
}
@media(max-width:650px){
 /* Keep the globe within the hero background, visible below the copy: no separate stacked block. */
 .hero-backdrop{display:block!important;min-height:755px!important;background:linear-gradient(160deg,#fafaf8 0%,#f1f6f8 75%,#d5edf4 100%)!important}
 .hero-network{top:auto!important;bottom:-55px!important;left:50%!important;right:auto!important;width:min(126vw,560px)!important;height:min(126vw,560px)!important;transform:translateX(-44%)!important;opacity:.94!important;z-index:0!important}
 .hero-backdrop::after{display:block!important;z-index:1!important;background:linear-gradient(180deg,#fafaf8 0%,rgba(250,250,248,.98) 30%,rgba(250,250,248,.91) 49%,rgba(250,250,248,.34) 70%,rgba(240,248,250,.06) 100%)!important}
 .hero-content{z-index:2!important;padding:56px 0 310px!important;width:calc(100% - 36px)!important}
 .hero-copy h1{color:#11263a!important;text-shadow:none!important;font-size:clamp(34px,9vw,53px)!important}
 .hero-copy .lead,.hero-copy p{color:#26384b!important;text-shadow:none!important;font-weight:500}
 #portfolio .portfolio-banner{min-height:720px}
 #portfolio .portfolio-threat-scene{right:-46%;width:150%;height:78%;top:auto;bottom:-14%;opacity:.87}
 #portfolio .portfolio-banner::after{background:linear-gradient(180deg,#0c1729 0%,rgba(12,23,41,.96) 34%,rgba(12,23,41,.73) 64%,rgba(12,23,41,.22) 100%)}
 #portfolio .portfolio-banner-inner{align-self:flex-start;padding:54px 0 260px}
 #portfolio .portfolio-banner h1{font-size:clamp(35px,9vw,48px)}
 #contact .contact-globe-hero{min-height:525px}
 #contact .contact-globe-scene{width:120%;height:390px;top:auto;bottom:-105px;right:-37%;transform:none;opacity:.68}
 #contact .contact-globe-hero::after{background:linear-gradient(180deg,rgba(7,22,36,.99) 0%,rgba(7,22,36,.94) 48%,rgba(7,22,36,.66) 78%,rgba(7,22,36,.36) 100%)!important}
 #contact .contact-globe-hero .page-hero{padding:52px 0 175px}
 #contact .contact-globe-hero .page-hero h1{color:#f7fbff!important;text-shadow:none!important}
 #contact .contact-globe-hero .page-hero p{color:#e0edf6!important;font-weight:500}
 #contact .contact-identity{margin-top:20px;width:200px}
}
@media (prefers-reduced-motion:reduce){#portfolio .portfolio-orbit{animation:none!important}}


/* v2.5 — FINAL responsive art direction. Homepage: globe. Portfolio: detection matrix. Contact: brand. */
/* Homepage: dark threat-intelligence canvas on both breakpoints; the globe remains atmospheric. */
#home .hero-backdrop{background:radial-gradient(ellipse at 78% 47%,#143957 0%,#0d2338 45%,#071525 100%)!important;color:#f6fbff;isolation:isolate}
#home .hero-backdrop::after{display:block!important;background:linear-gradient(90deg,rgba(7,21,37,.98) 0%,rgba(7,21,37,.89) 37%,rgba(7,21,37,.34) 74%,rgba(7,21,37,.12) 100%)!important;z-index:1!important}
#home .hero-network{z-index:0!important;opacity:.94!important;filter:saturate(1.14)}
#home .hero-content{z-index:2!important}
#home .hero-copy h1,#home .hero-copy h1::first-line{color:#f4faff!important;text-shadow:none!important}
#home .hero-copy .lead,#home .hero-copy p{color:#d9e7f2!important;font-weight:400!important;text-shadow:none!important}
#home .hero-copy .eyebrow{color:#83def1!important}
#home .hero-copy .btn{background:#43c3e1!important;border-color:#43c3e1!important;color:#071525!important}
#home .hero-copy .btn.alt{background:rgba(10,30,48,.76)!important;color:#eefaff!important;border-color:#6f98ad!important}
/* Portfolio: unique network-detection constellation, not a second globe. */
#portfolio .portfolio-banner{background:radial-gradient(ellipse at 76% 48%,#153c50 0%,#0c2638 44%,#081827 100%)!important}
#portfolio .portfolio-threat-scene{position:absolute;inset:0 0 0 auto;width:80%;height:100%;opacity:.96;overflow:hidden;pointer-events:none;z-index:0}
#portfolio .portfolio-threat-scene canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#portfolio .portfolio-banner::after{background:linear-gradient(90deg,#081827 0%,rgba(8,24,39,.96) 28%,rgba(8,24,39,.70) 55%,rgba(8,24,39,.13) 100%)!important;z-index:1}
#portfolio .portfolio-signal-label{position:absolute;right:6%;bottom:23px;color:#83cfe0;font-size:11px;font-weight:600;letter-spacing:.14em;opacity:.8}
#portfolio .portfolio-signal-label span{color:#f4bc86;margin-left:12px}
#portfolio .portfolio-banner-inner{z-index:2}
#portfolio .portfolio-intro{color:#e4eff7!important;line-height:1.7;font-size:clamp(18px,1.6vw,21px)}
/* Contact: no globe, just a softly integrated brand identity. */
#contact .contact-globe-hero{min-height:400px;background:radial-gradient(ellipse at 83% 52%,#154064 0%,#0c2942 37%,#071727 88%)!important;isolation:isolate;overflow:hidden;display:flex;align-items:center;color:#fff}
#contact .contact-globe-hero::after{content:"";position:absolute;z-index:0;inset:0;background:linear-gradient(90deg,rgba(7,23,39,.97),rgba(7,23,39,.82) 45%,rgba(7,23,39,.17) 100%)!important;pointer-events:none}
#contact .contact-globe-hero .page-hero{z-index:1;position:relative;padding:70px min(37%,440px) 70px 0!important;width:100%;min-height:350px;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box}
#contact .contact-identity{position:absolute;top:50%;right:0;transform:translateY(-50%);width:clamp(240px,32vw,420px);max-width:36%;margin:0;opacity:.91;filter:drop-shadow(0 10px 33px rgba(44,178,238,.08))}
#contact .contact-identity img{display:block;width:100%;height:auto}
#contact .contact-globe-hero .page-hero h1{color:#f7fbff!important;font-size:clamp(38px,4.4vw,63px);line-height:1.12}
#contact .contact-globe-hero .page-hero .lead{color:#e0edf6!important;font-weight:400;line-height:1.65;font-size:clamp(17px,1.5vw,20px)}
#contact .contact-globe-hero .eyebrow{color:#7adcea!important}
@media(max-width:900px){
 #home .hero-backdrop::after{background:linear-gradient(180deg,rgba(7,21,37,.94) 0%,rgba(7,21,37,.90) 44%,rgba(7,21,37,.24) 78%,rgba(7,21,37,.10) 100%)!important}
 #portfolio .portfolio-threat-scene{right:-14%;width:110%;opacity:.92}
 #portfolio .portfolio-banner::after{background:linear-gradient(180deg,rgba(8,24,39,.98) 0%,rgba(8,24,39,.85) 46%,rgba(8,24,39,.24) 100%)!important}
 #contact .contact-globe-hero .page-hero{padding-right:35%!important}
 #contact .contact-identity{width:33%;max-width:33%}
}
@media(max-width:650px){
 #home .hero-backdrop{min-height:740px!important;background:linear-gradient(180deg,#081a2c 0%,#0b2941 74%,#0b2238 100%)!important}
 #home .hero-network{position:absolute!important;display:block!important;top:auto!important;bottom:-38px!important;left:50%!important;right:auto!important;width:min(116vw,540px)!important;height:min(116vw,540px)!important;transform:translateX(-50%)!important;opacity:.98!important;z-index:0!important}
 #home .hero-backdrop::after{background:linear-gradient(180deg,#081a2c 0%,rgba(8,26,44,.98) 33%,rgba(8,26,44,.83) 48%,rgba(8,26,44,.20) 78%,rgba(8,26,44,.05) 100%)!important;z-index:1!important}
 #home .hero-content{padding:54px 0 320px!important;width:calc(100% - 36px)!important;z-index:2!important}
 #home .hero-copy h1{font-size:clamp(35px,9vw,51px)!important;line-height:1.1}
 #home .hero-copy .lead{font-size:17px!important;line-height:1.6}
 #portfolio .portfolio-banner{min-height:695px!important}
 #portfolio .portfolio-threat-scene{left:0!important;right:0!important;top:auto!important;bottom:0!important;width:100%!important;height:59%!important;opacity:1!important}
 #portfolio .portfolio-banner::after{background:linear-gradient(180deg,#081827 0%,rgba(8,24,39,.99) 37%,rgba(8,24,39,.60) 69%,rgba(8,24,39,.19) 100%)!important}
 #portfolio .portfolio-banner-inner{padding:52px 0 295px!important}
 #portfolio .portfolio-banner h1{font-size:clamp(35px,9vw,48px)!important}
 #portfolio .portfolio-intro{font-size:17px!important;line-height:1.6}
 #portfolio .portfolio-signal-label{right:16px;bottom:14px;font-size:9px;letter-spacing:.08em}
 #contact .contact-globe-hero{min-height:540px!important}
 #contact .contact-globe-hero::after{background:linear-gradient(180deg,rgba(7,23,39,.98) 0%,rgba(7,23,39,.83) 45%,rgba(7,23,39,.25) 100%)!important}
 #contact .contact-globe-hero .page-hero{min-height:540px!important;display:block!important;padding:50px 0 215px!important;width:100%!important}
 #contact .contact-globe-hero .page-hero h1{font-size:clamp(37px,9vw,50px)!important;line-height:1.12}
 #contact .contact-globe-hero .page-hero .lead{font-size:17px!important;line-height:1.6}
 #contact .contact-identity{position:absolute;left:50%;right:auto;top:auto;bottom:25px;transform:translateX(-50%);width:min(72vw,290px)!important;max-width:none!important;margin:0!important;opacity:.94}
}
@media(max-width:380px){#home .hero-backdrop{min-height:770px!important}#home .hero-content{padding-bottom:270px!important}#portfolio .portfolio-banner-inner{padding-bottom:245px!important}#contact .contact-globe-hero{min-height:565px!important}}
@media(prefers-reduced-motion:reduce){#home .hero-network{filter:none}}

/* v2.6 — Home alone has the navy globe. Portfolio uses a light security-signal canvas. */
#portfolio .portfolio-banner{
  background:linear-gradient(115deg,#fafaf8 0%,#f0f6f7 60%,#e4f1f3 100%)!important;
  color:#152c3c!important;min-height:550px!important;
}
#portfolio .portfolio-banner::after{
  background:linear-gradient(90deg,rgba(250,250,248,.96) 0%,rgba(250,250,248,.87) 35%,rgba(240,246,247,.27) 73%,rgba(240,246,247,.08) 100%)!important;
}
#portfolio .portfolio-threat-scene{right:0!important;left:auto!important;top:0!important;bottom:auto!important;width:63%!important;height:100%!important;opacity:1!important}
#portfolio .portfolio-banner h1{color:#132d3f!important;font-size:clamp(41px,5vw,68px);line-height:1.10}
#portfolio .portfolio-banner h1 span{color:#216c84!important}
#portfolio .portfolio-banner .eyebrow{color:#98623d!important}
#portfolio .portfolio-intro{color:#344b5a!important;font-size:clamp(18px,1.7vw,21px)!important;line-height:1.7!important}
#portfolio .portfolio-outline{color:#23687e!important;border-color:#7aabb7!important}
#portfolio .portfolio-actions .btn{background:#173e54!important;border-color:#173e54!important;color:#fff!important}
#portfolio .portfolio-signal-label{color:#496f7b!important;right:5%;bottom:23px}
#portfolio .portfolio-signal-label span{color:#9e593f!important}
#portfolio .portfolio-banner-inner{padding:90px 0!important}
#portfolio .portfolio-intro{max-width:630px}
#contact .contact-identity{right:clamp(58px,8vw,150px)!important;width:clamp(225px,29vw,375px)!important;max-width:32%!important}
@media(max-width:900px){
  #portfolio .portfolio-threat-scene{width:76%!important}
  #portfolio .portfolio-banner::after{background:linear-gradient(90deg,rgba(250,250,248,.98) 0%,rgba(250,250,248,.91) 52%,rgba(240,246,247,.32) 100%)!important}
  #contact .contact-identity{right:3%!important;width:30%!important;max-width:30%!important}
}
@media(max-width:650px){
  #portfolio .portfolio-banner{min-height:710px!important;background:linear-gradient(180deg,#fafaf8 0%,#f4f8f8 51%,#e3f0f2 100%)!important}
  #portfolio .portfolio-threat-scene{top:auto!important;bottom:10px!important;left:0!important;right:0!important;width:100%!important;height:310px!important;opacity:1!important}
  #portfolio .portfolio-banner::after{background:linear-gradient(180deg,rgba(250,250,248,1) 0%,rgba(250,250,248,.98) 40%,rgba(248,250,250,.53) 58%,rgba(232,243,245,.04) 100%)!important}
  #portfolio .portfolio-banner-inner{padding:52px 0 330px!important;align-self:flex-start!important}
  #portfolio .portfolio-banner h1{font-size:clamp(34px,8.7vw,47px)!important;line-height:1.13!important}
  #portfolio .portfolio-intro{font-size:17px!important;line-height:1.65!important}
  #portfolio .portfolio-signal-label{bottom:7px!important;right:15px!important;font-size:9px!important}
  #contact .contact-identity{left:46%!important;right:auto!important;transform:translateX(-50%)!important;width:min(70vw,290px)!important;max-width:none!important}
}
@media(max-width:380px){#portfolio .portfolio-banner-inner{padding-bottom:330px!important}}

/* v2.7: direct email link fallback and accessible copy control */
.contact-email-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.contact-email-copy{cursor:pointer;border:1px solid currentColor;border-radius:8px;background:transparent;color:inherit;padding:10px 14px;font:inherit;font-weight:600;min-height:44px}
.contact-email-copy:hover,.contact-email-copy:focus-visible{background:rgba(70,190,220,.13)}
.contact-copy-feedback{font-size:14px;line-height:1.55;opacity:.86;margin-top:12px}
.contact-email-fallback{display:block;max-width:100%;width:300px;margin-top:8px;padding:10px;border:1px solid #7aaabc;border-radius:8px;font-size:16px}
@media(max-width:480px){.contact-email-actions{align-items:flex-start;flex-direction:column}.contact-email{font-size:20px}}

/* v2.8 – final proportional art pass: smaller globe, comfortable contact spacing,
   text-free active telemetry constellation for portfolio. */
@media(min-width:901px){
 #home .hero-network{width:min(585px,51vw)!important;height:min(585px,51vw)!important;right:max(10px,calc((100vw - 1400px)/2))!important;top:50%!important;bottom:auto!important;left:auto!important;transform:translateY(-50%)!important}
 #home .hero-backdrop{min-height:615px!important}
 #contact .contact-globe-hero .page-hero{padding-left:clamp(30px,4.8vw,82px)!important;padding-right:min(34%,440px)!important}
 #contact .contact-identity{right:clamp(70px,10vw,185px)!important;width:clamp(215px,26vw,350px)!important;max-width:30%!important}
}
#portfolio .portfolio-banner{background:linear-gradient(112deg,#fafbf9 0%,#f3f8f9 56%,#e1eff0 100%)!important;isolation:isolate}
#portfolio .portfolio-threat-scene{width:62%!important;height:100%!important;inset:0 0 0 auto!important;opacity:.98!important;pointer-events:none}
#portfolio .portfolio-threat-scene canvas{width:100%!important;height:100%!important}
#portfolio .portfolio-banner::after{background:linear-gradient(90deg,rgba(250,251,249,1) 0%,rgba(250,251,249,.97) 33%,rgba(250,251,249,.77) 51%,rgba(240,248,248,.1) 100%)!important}
#portfolio .portfolio-banner-inner{z-index:2!important}
#portfolio .portfolio-banner h1{color:#112b3b!important}
#portfolio .portfolio-banner h1 span{color:#1b677f!important}
#portfolio .portfolio-intro{color:#2d4657!important;font-size:clamp(18px,1.65vw,21px)!important;line-height:1.7!important}
#portfolio .portfolio-banner .eyebrow{color:#825232!important}
#portfolio .portfolio-signal-label{display:none!important}
@media(min-width:601px) and (max-width:900px){
 #home .hero-network{width:min(510px,62vw)!important;height:min(510px,62vw)!important;right:-7vw!important;left:auto!important;top:54%!important;bottom:auto!important;transform:translateY(-50%)!important}
 #contact .contact-globe-hero .page-hero{padding-left:clamp(18px,3vw,35px)!important;padding-right:34%!important}
 #contact .contact-identity{right:5%!important;width:28%!important;max-width:28%!important}
 #portfolio .portfolio-threat-scene{width:72%!important}
}
@media(max-width:600px){
 #home .hero-backdrop{min-height:690px!important}
 #home .hero-content{padding:48px 0 250px!important;width:calc(100% - 36px)!important}
 #home .hero-network{position:absolute!important;left:50%!important;right:auto!important;top:auto!important;bottom:-12px!important;width:min(92vw,420px)!important;height:min(92vw,420px)!important;transform:translateX(-50%)!important;opacity:.89!important}
 #home .hero-backdrop::after{background:linear-gradient(180deg,#081a2c 0%,rgba(8,26,44,.99) 31%,rgba(8,26,44,.88) 48%,rgba(8,26,44,.30) 76%,rgba(8,26,44,.07) 100%)!important}
 #home .hero-copy h1{font-size:clamp(34px,9vw,49px)!important;line-height:1.14!important}
 #home .hero-copy .lead{font-size:17px!important;line-height:1.64!important}
 #contact .contact-globe-hero{min-height:510px!important}
 #contact .contact-globe-hero .page-hero{min-height:510px!important;box-sizing:border-box;padding:52px 18px 200px!important}
 #contact .contact-identity{left:50%!important;right:auto!important;top:auto!important;bottom:20px!important;transform:translateX(-50%)!important;width:min(69vw,275px)!important;max-width:none!important}
 #portfolio .portfolio-banner{min-height:670px!important}
 #portfolio .portfolio-banner-inner{padding:47px 0 295px!important}
 #portfolio .portfolio-threat-scene{inset:auto 0 0!important;width:100%!important;height:340px!important;opacity:.95!important}
 #portfolio .portfolio-banner::after{background:linear-gradient(180deg,rgba(250,251,249,1) 0%,rgba(250,251,249,.98) 34%,rgba(250,251,249,.80) 55%,rgba(238,248,248,.08) 100%)!important}
 #portfolio .portfolio-banner h1{font-size:clamp(34px,8.6vw,46px)!important;line-height:1.14!important}
 #portfolio .portfolio-intro{font-size:17px!important;line-height:1.65!important}
}
@media(max-width:380px){#home .hero-backdrop{min-height:710px!important}#home .hero-content{padding-bottom:255px!important}#portfolio .portfolio-banner{min-height:715px!important}#portfolio .portfolio-banner-inner{padding-bottom:315px!important}}

/* v3.0 — smoother cyan-glow falloff and slightly deeper portfolio atmosphere.
   Overrides apply consistently to desktop, tablets and phones. */
#home .hero-network{
  /* Fade the bright outer halo into the navy instead of leaving a hard cyan edge. */
  -webkit-mask-image:radial-gradient(ellipse 61% 61% at 50% 50%,#000 0%,#000 63%,rgba(0,0,0,.82) 76%,rgba(0,0,0,.28) 90%,transparent 100%);
  mask-image:radial-gradient(ellipse 61% 61% at 50% 50%,#000 0%,#000 63%,rgba(0,0,0,.82) 76%,rgba(0,0,0,.28) 90%,transparent 100%);
  filter:saturate(1.04)!important;
}
#home .hero-backdrop{
  background:radial-gradient(ellipse at 79% 58%,#103047 0%,#0a2338 42%,#081a2c 76%,#081a2c 100%)!important;
}
#portfolio .portfolio-banner{
  background:linear-gradient(115deg,#e9f1f2 0%,#dce9eb 55%,#bdd8de 100%)!important;
}
#portfolio .portfolio-banner::after{
  background:linear-gradient(90deg,rgba(233,241,242,.98) 0%,rgba(233,241,242,.94) 31%,rgba(220,233,235,.76) 52%,rgba(189,216,222,.12) 100%)!important;
}
#portfolio .portfolio-banner h1{color:#102b3b!important}
#portfolio .portfolio-banner h1 span{color:#125b73!important}
#portfolio .portfolio-intro{color:#263e50!important}
#portfolio .portfolio-banner .eyebrow{color:#754b30!important}
@media (min-width:601px) and (max-width:900px){
 #portfolio .portfolio-banner::after{background:linear-gradient(90deg,rgba(233,241,242,.98) 0%,rgba(233,241,242,.92) 48%,rgba(189,216,222,.2) 100%)!important}
}
@media (max-width:600px){
 #home .hero-backdrop{background:linear-gradient(180deg,#081a2c 0%,#0a2439 49%,#103047 85%,#0a2235 100%)!important}
 #home .hero-network{-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 0%,#000 61%,rgba(0,0,0,.75) 77%,transparent 100%);mask-image:radial-gradient(circle at 50% 50%,#000 0%,#000 61%,rgba(0,0,0,.75) 77%,transparent 100%)}
 #home .hero-backdrop::after{background:linear-gradient(180deg,#081a2c 0%,rgba(8,26,44,.99) 31%,rgba(8,26,44,.87) 48%,rgba(8,26,44,.23) 76%,rgba(8,26,44,.03) 100%)!important}
 #portfolio .portfolio-banner{background:linear-gradient(180deg,#e9f1f2 0%,#e0ecee 55%,#bdd8de 100%)!important}
 #portfolio .portfolio-banner::after{background:linear-gradient(180deg,rgba(233,241,242,1) 0%,rgba(233,241,242,.99) 34%,rgba(224,236,238,.84) 55%,rgba(189,216,222,.09) 100%)!important}
}

/* v3.1 — portfolio readability and richer contrast: desktop and mobile */
#portfolio .portfolio-banner{background:linear-gradient(113deg,#cfdee3 0%,#b9d0d8 56%,#7fa8b7 100%)!important}
#portfolio .portfolio-banner::after{background:linear-gradient(90deg,rgba(207,222,227,.99) 0%,rgba(207,222,227,.97) 29%,rgba(191,212,219,.85) 49%,rgba(127,168,183,.12) 100%)!important}
#portfolio .portfolio-threat-scene{opacity:1!important;filter:contrast(1.19) saturate(1.25) brightness(.83)}
#portfolio .portfolio-banner h1{color:#092333!important}
#portfolio .portfolio-banner h1 span{color:#104e66!important}
#portfolio .portfolio-intro{color:#193649!important;font-size:clamp(19px,1.75vw,22px)!important}
#portfolio .portfolio-banner .eyebrow{color:#70452d!important}
#portfolio .portfolio-prose,#portfolio .portfolio-prose p{font-size:19px;line-height:1.72;color:#293f52}
#portfolio .portfolio-section .eyebrow{font-size:14px;letter-spacing:.1em}
#portfolio .portfolio-capability p,#portfolio .portfolio-work-grid p{font-size:17px;line-height:1.75;color:#374e60}
#portfolio .portfolio-capability h3{font-size:clamp(23px,2.2vw,27px)}
#portfolio .portfolio-tooling-title>p,#portfolio .portfolio-credentials-note{font-size:18px;line-height:1.75;color:#354e5f}
#portfolio .portfolio-tool-list span{font-size:16px;line-height:1.35;padding:13px 17px;background:#eaf1f3;border-color:#c5d6dd;color:#17394a}
#portfolio .portfolio-credential-list strong{font-size:18px;max-width:450px;line-height:1.5;color:#1b3448}
#portfolio .portfolio-credential-list span{font-size:15px;max-width:220px;line-height:1.5;color:#745037}
#portfolio .portfolio-credential-list>div{padding:22px 0;gap:20px}
#portfolio .portfolio-education>p,#portfolio .portfolio-education>div p{font-size:18px;line-height:1.65}
#portfolio .portfolio-n{font-size:13px}
@media(min-width:601px) and (max-width:900px){
  #portfolio .portfolio-banner::after{background:linear-gradient(90deg,rgba(207,222,227,.99) 0%,rgba(207,222,227,.95) 48%,rgba(127,168,183,.25) 100%)!important}
}
@media(max-width:600px){
  #portfolio .portfolio-banner{background:linear-gradient(180deg,#cfdee3 0%,#bdd4db 52%,#85adbc 100%)!important}
  #portfolio .portfolio-banner::after{background:linear-gradient(180deg,rgba(207,222,227,1) 0%,rgba(207,222,227,.99) 34%,rgba(189,212,219,.87) 54%,rgba(133,173,188,.14) 100%)!important}
  #portfolio .portfolio-threat-scene{filter:contrast(1.19) saturate(1.25) brightness(.8)}
  #portfolio .portfolio-intro{font-size:18px!important;line-height:1.67!important}
  #portfolio .portfolio-section{padding:54px 0}
  #portfolio .portfolio-prose,#portfolio .portfolio-prose p{font-size:18px}
  #portfolio .portfolio-capability{padding:25px 23px}
  #portfolio .portfolio-capability p,#portfolio .portfolio-work-grid p{font-size:17px}
  #portfolio .portfolio-tooling-title>p{font-size:17px}
  #portfolio .portfolio-tool-list{gap:9px}
  #portfolio .portfolio-tool-list span{font-size:15px;padding:11px 13px}
  #portfolio .portfolio-credential-list strong{font-size:17px}
  #portfolio .portfolio-credential-list span{font-size:15px;text-align:left}
  #portfolio .portfolio-education>p,#portfolio .portfolio-education>div p{font-size:17px}
}

/* v3.2 — light editorial hero + dark, high-definition animated telemetry artwork. */
#portfolio .portfolio-banner{background:linear-gradient(112deg,#f4f8f9 0%,#eaf3f5 46%,#d5e7eb 100%)!important;color:#102c3d!important}
#portfolio .portfolio-banner::after{background:linear-gradient(90deg,rgba(244,248,249,.99) 0%,rgba(244,248,249,.97) 27%,rgba(240,247,248,.92) 44%,rgba(232,244,247,.45) 60%,rgba(213,231,235,.025) 85%)!important}
#portfolio .portfolio-threat-scene{filter:contrast(1.35) saturate(1.30) brightness(.96)!important;opacity:1!important}
#portfolio .portfolio-banner h1{color:#0b2a3e!important}
#portfolio .portfolio-banner h1 span{color:#075c79!important}
#portfolio .portfolio-intro{color:#244358!important}
/* Section header, link and project cards require generous, legible tap sizes. */
#portfolio .portfolio-section-heading{align-items:center;flex-wrap:wrap;column-gap:24px;row-gap:15px}
#portfolio .portfolio-section-heading h2{font-size:clamp(32px,3.1vw,45px)!important;line-height:1.18!important;letter-spacing:-.035em;max-width:750px}
#portfolio .portfolio-section-heading .text-link{display:inline-flex!important;align-items:center;justify-content:center;min-height:48px;padding:13px 20px;border-radius:8px;border:1px solid #15637c;background:#15516a;color:#fff!important;font-size:18px!important;font-weight:750;line-height:1.3;text-align:center;text-decoration:none;margin:0!important;transition:background .18s,border-color .18s}
#portfolio .portfolio-section-heading .text-link:hover,#portfolio .portfolio-section-heading .text-link:focus-visible{background:#0b3549;border-color:#0b3549;color:#fff!important}
#portfolio .portfolio-work-grid h3{font-size:clamp(22px,2vw,27px)!important;line-height:1.3!important}
#portfolio .portfolio-work-grid article .text-link{font-size:17px!important;min-height:44px;display:inline-flex;align-items:center}
@media(max-width:900px){
 #portfolio .portfolio-banner{background:linear-gradient(115deg,#f4f8f9 0%,#e5f1f4 64%,#cfe6ed 100%)!important}
 #portfolio .portfolio-banner::after{background:linear-gradient(90deg,rgba(244,248,249,.99) 0%,rgba(244,248,249,.96) 42%,rgba(235,245,248,.4) 69%,rgba(207,230,237,.04) 100%)!important}
 #portfolio .portfolio-section-heading h2{font-size:clamp(30px,4.4vw,39px)!important}
}
@media(max-width:600px){
 #portfolio .portfolio-banner{background:linear-gradient(180deg,#f5f9fa 0%,#eaf4f6 51%,#d0e8ee 100%)!important}
 #portfolio .portfolio-banner::after{background:linear-gradient(180deg,rgba(245,249,250,1) 0%,rgba(245,249,250,.99) 35%,rgba(239,247,248,.87) 49%,rgba(218,239,245,.08) 76%,transparent 100%)!important}
 #portfolio .portfolio-threat-scene{filter:contrast(1.36) saturate(1.3) brightness(.94)!important}
 #portfolio .portfolio-section-heading{display:flex!important;flex-direction:column;align-items:stretch!important;gap:20px}
 #portfolio .portfolio-section-heading h2{font-size:clamp(30px,8vw,38px)!important;line-height:1.18!important;margin-bottom:0!important}
 #portfolio .portfolio-section-heading .text-link{font-size:17px!important;min-height:50px;padding:13px 17px;width:100%;box-sizing:border-box}
 #portfolio .portfolio-work-grid h3{font-size:23px!important}
 #portfolio .portfolio-work-grid article .text-link{font-size:17px!important}
}


/* v3.3 — mobile layout correction after real iPhone screenshots. */
@media (max-width:800px){
  header .nav{height:auto!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:8px!important;padding:12px 0 11px!important}
  header .brand{font-size:27px!important;line-height:1.2!important;align-self:flex-start}
  header .nav nav[aria-label="Main navigation"]{display:flex!important;flex-wrap:wrap!important;justify-content:space-between!important;align-items:center!important;column-gap:9px!important;row-gap:3px!important;width:100%!important;margin:0!important}
  header .nav nav[aria-label="Main navigation"] a{font-size:13px!important;line-height:1.3!important;padding:8px 3px!important;text-align:center!important;flex:0 0 auto!important}
  header .nav-cta{display:none!important}
}
@media (max-width:370px){header .nav nav[aria-label="Main navigation"] a{font-size:12px!important;padding:7px 1px!important}}
@media(max-width:600px){
 /* Keep the homepage globe inside the same navy visual system as desktop. */
 #home .hero-backdrop{background:#081a2c!important;min-height:665px!important;color:#f4faff!important}
 #home .hero-content{padding:40px 0 245px!important;width:calc(100% - 36px)!important}
 #home .hero-backdrop::after{background:linear-gradient(180deg,#081a2c 0%,rgba(8,26,44,.96) 35%,rgba(8,26,44,.85) 53%,rgba(8,26,44,.25) 78%,rgba(8,26,44,.08) 100%)!important}
 #home .hero-network{width:min(85vw,380px)!important;height:min(85vw,380px)!important;bottom:2px!important;opacity:.84!important}
 #home .hero-copy h1,#home .hero-copy h1::first-line{color:#fff!important;font-size:clamp(34px,8.5vw,43px)!important;line-height:1.13!important}
 #home .hero-copy .lead,#home .hero-copy p{color:#e2ebf3!important;font-size:16px!important;line-height:1.65!important}
 #home .hero-copy .eyebrow{color:#82dcef!important}
 #home .hero-copy .actions{gap:10px!important}
 #home .hero-copy .btn{font-size:15px!important;padding:12px 14px!important}
 /* Separate readable copy from the telemetry art while keeping the animation clearly visible. */
 #portfolio .portfolio-banner{min-height:690px!important;background:linear-gradient(180deg,#f7fafb 0%,#edf6f8 58%,#d6eaf0 100%)!important}
 #portfolio .portfolio-banner-inner{padding:42px 0 325px!important}
 #portfolio .portfolio-banner::after{background:linear-gradient(180deg,rgba(247,250,251,1) 0%,rgba(247,250,251,.99) 39%,rgba(239,247,249,.82) 52%,rgba(239,247,249,.01) 76%)!important}
 #portfolio .portfolio-threat-scene{height:310px!important;top:auto!important;bottom:0!important;filter:contrast(1.52) saturate(1.22) brightness(.81)!important;opacity:1!important}
 #portfolio .portfolio-banner h1{font-size:clamp(33px,8.3vw,43px)!important}
 #portfolio .portfolio-intro{font-size:17px!important;line-height:1.57!important}
 #portfolio .portfolio-actions{position:relative;z-index:3;display:flex;flex-wrap:wrap;gap:12px!important}
 #portfolio .portfolio-actions .btn,#portfolio .portfolio-outline{font-size:16px!important;min-height:48px!important;padding:12px 16px!important}
 /* Make contact logo proportionate, with less empty space above it. */
 #contact .contact-globe-hero{min-height:440px!important}
 #contact .contact-globe-hero .page-hero{min-height:440px!important;padding:39px 16px 180px!important}
 #contact .contact-globe-hero .page-hero h1{font-size:clamp(32px,8.4vw,42px)!important;line-height:1.16!important}
 #contact .contact-globe-hero .page-hero .lead{font-size:16px!important;line-height:1.62!important}
 #contact .contact-identity{bottom:11px!important;width:min(61vw,230px)!important}
}
@media (min-width:601px) and (max-width:800px){
 #home .hero-backdrop{background:#081a2c!important}
 #home .hero-copy h1{color:#fff!important}
 #home .hero-copy .lead{color:#e2ebf3!important}
}

/* v3.5 MOBILE ONLY: preserve the original v3.3 desktop portfolio pixel-for-pixel.
   Keep the moving telemetry canvas inside the hero, behind the mobile copy,
   rather than visually isolating it as a panel below the CTA links. */
@media (max-width: 600px) {
  #portfolio .portfolio-banner {
    position: relative!important;
    isolation: isolate!important;
    overflow: hidden!important;
    min-height: 620px!important;
    background: linear-gradient(180deg,#f7fafb 0%,#edf6f8 52%,#d6eaf0 100%)!important;
  }
  #portfolio .portfolio-threat-scene {
    position: absolute!important;
    inset: 0!important;
    width: 100%!important;
    height: 100%!important;
    display: block!important;
    z-index: 0!important;
    opacity: 1!important;
    filter: contrast(1.45) saturate(1.22) brightness(.87)!important;
    pointer-events: none!important;
  }
  #portfolio .portfolio-threat-scene canvas {
    position: absolute!important;
    inset: 0!important;
    width: 100%!important;
    height: 100%!important;
    display: block!important;
  }
  #portfolio .portfolio-banner::after {
    content: '';
    position: absolute!important;
    inset: 0!important;
    z-index: 1!important;
    pointer-events: none!important;
    background: linear-gradient(180deg,
      rgba(247,250,251,1) 0%, rgba(247,250,251,.98) 31%,
      rgba(242,248,250,.91) 52%, rgba(229,242,246,.43) 72%,
      rgba(214,234,240,.06) 100%)!important;
  }
  #portfolio .portfolio-banner-inner {
    position: relative!important;
    z-index: 2!important;
    width: calc(100% - 36px)!important;
    box-sizing: border-box!important;
    padding: 43px 0 170px!important;
  }
  #portfolio .portfolio-banner h1 { font-size: clamp(32px,8.3vw,43px)!important; }
  #portfolio .portfolio-intro { font-size: 17px!important; line-height: 1.64!important; }
  #portfolio .portfolio-actions {position: relative!important;z-index: 3!important;gap: 12px!important;}
}
@media (max-width: 380px) {
  #portfolio .portfolio-banner {min-height: 680px!important;}
  #portfolio .portfolio-banner-inner {padding-bottom: 195px!important;}
}


/* v3.6 — MOBILE-ONLY VISUAL REPAIR. Desktop styling deliberately untouched.
   Keep all three hero artworks in their own clipping contexts; avoid image/CTA collision. */
@media (max-width: 600px) {
  /* Home: insist on navy, and give the globe an integrated, fading atmospheric glow. */
  body #home .hero-backdrop {
    position:relative!important; display:block!important; isolation:isolate!important;
    background:radial-gradient(ellipse at 52% 87%,#153f5d 0%,#0a2b46 44%,#081a2c 79%)!important;
    min-height:690px!important; overflow:hidden!important; color:#f5fbff!important;
  }
  body #home .hero-backdrop .hero-network {
    position:absolute!important;left:50%!important;top:auto!important;bottom:8px!important;
    right:auto!important; transform:translateX(-50%)!important;
    width:min(87vw,380px)!important;height:min(87vw,380px)!important;
    opacity:.78!important;z-index:0!important;
    -webkit-mask-image:radial-gradient(circle,#000 45%,rgba(0,0,0,.8) 67%,transparent 98%)!important;
    mask-image:radial-gradient(circle,#000 45%,rgba(0,0,0,.8) 67%,transparent 98%)!important;
  }
  body #home .hero-backdrop::after {
    display:block!important;content:""!important;position:absolute!important;inset:0!important;
    z-index:1!important;pointer-events:none!important;
    background:linear-gradient(180deg,#081a2c 0%,rgba(8,26,44,.99) 30%,rgba(8,26,44,.91) 51%,rgba(8,26,44,.36) 78%,rgba(8,26,44,.05) 100%)!important;
  }
  body #home .hero-backdrop .hero-content {
    position:relative!important; z-index:2!important; width:calc(100% - 38px)!important;
    padding:46px 0 290px!important;
  }
  body #home .hero-copy h1{color:#fff!important;}
  body #home .hero-copy .lead{color:#e7f1f7!important;}
  body #home .hero-copy .eyebrow{color:#90e1ed!important;}

  /* Contact: allow the logo to follow the paragraph, not sit hundreds of px below. */
  body #contact .contact-globe-hero{min-height:0!important;display:block!important;}
  body #contact .contact-globe-hero .page-hero{
    box-sizing:border-box!important;min-height:0!important;display:flex!important;
    flex-direction:column!important;align-items:stretch!important;
    padding:45px 0 42px!important;width:calc(100% - 38px)!important;
  }
  body #contact .contact-globe-hero .page-hero h1{margin:17px 0 18px!important;}
  body #contact .contact-globe-hero .page-hero .lead{margin:0!important;}
  body #contact .contact-identity{
    position:relative!important;top:auto!important;right:auto!important;left:auto!important;bottom:auto!important;
    transform:none!important;width:min(64vw,240px)!important;max-width:100%!important;
    margin:28px auto 0!important;opacity:.97!important;
  }

  /* Portfolio: animated canvas shares the hero background, but CTA remains unobscured. */
  body #portfolio .portfolio-banner{
    position:relative!important;isolation:isolate!important;overflow:hidden!important;
    min-height:0!important;background:linear-gradient(180deg,#f6fafb 0%,#eaf4f7 57%,#cde7ed 100%)!important;
  }
  body #portfolio .portfolio-threat-scene{
    position:absolute!important;left:0!important;right:0!important;top:auto!important;bottom:-2%!important;
    width:100%!important;height:48%!important;opacity:.9!important;z-index:0!important;
    filter:contrast(1.5) saturate(1.24) brightness(.82)!important;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 28%,#000 91%,transparent 100%)!important;
    mask-image:linear-gradient(180deg,transparent 0%,#000 28%,#000 91%,transparent 100%)!important;
  }
  body #portfolio .portfolio-threat-scene canvas{width:100%!important;height:100%!important;display:block!important;}
  body #portfolio .portfolio-banner::after{
    content:""!important;position:absolute!important;inset:0!important;z-index:1!important;
    pointer-events:none!important;background:linear-gradient(180deg,rgba(246,250,251,.99) 0%,rgba(246,250,251,.97) 35%,rgba(239,248,250,.77) 59%,rgba(226,241,246,.06) 83%,transparent 100%)!important;
  }
  body #portfolio .portfolio-banner-inner{
    position:relative!important;z-index:2!important;box-sizing:border-box!important;
    width:calc(100% - 38px)!important;padding:48px 0 235px!important;
  }
  body #portfolio .portfolio-actions{
    display:flex!important;flex-direction:column!important;align-items:stretch!important;
    gap:14px!important;margin-top:25px!important;position:relative!important;z-index:3!important;
  }
  body #portfolio .portfolio-actions .btn,body #portfolio .portfolio-actions .portfolio-outline{
    display:flex!important;justify-content:center!important;align-items:center!important;
    width:100%!important;max-width:100%!important;min-height:50px!important;
    font-size:16px!important;text-align:center!important;padding:13px 16px!important;
    box-sizing:border-box!important;margin:0!important;
  }
}
@media (max-width: 380px){
 body #portfolio .portfolio-banner-inner{padding-bottom:210px!important;}
 body #home .hero-backdrop .hero-content{padding-bottom:260px!important;}
}

/* v3.9 mobile Portfolio visibility repair. Desktop declarations unchanged.
   Keep one strong animation, a light airy canvas, and unobscured buttons. */
@media only screen and (max-width:600px) {
  body #portfolio .portfolio-banner {
    position:relative!important;isolation:isolate!important;overflow:hidden!important;
    min-height:0!important;
    background:linear-gradient(180deg,#f8fbfc 0%,#eaf5f8 62%,#deedf2 86%,#f5f9fa 100%)!important;
  }
  body #portfolio .portfolio-threat-scene {
    display:block!important;position:absolute!important;
    top:29%!important;bottom:auto!important;left:0!important;right:0!important;
    width:100%!important;height:73%!important;
    opacity:1!important;filter:contrast(1.32) saturate(1.18)!important;z-index:0!important;
    -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 54%,#000 0%,#000 51%,rgba(0,0,0,.85) 69%,transparent 100%)!important;
    mask-image:radial-gradient(ellipse 80% 70% at 50% 54%,#000 0%,#000 51%,rgba(0,0,0,.85) 69%,transparent 100%)!important;
  }
  body #portfolio .portfolio-threat-scene canvas {
    display:block!important;width:100%!important;height:100%!important;
  }
  body #portfolio .portfolio-banner::after {
    content:''!important;position:absolute!important;inset:0!important;
    pointer-events:none!important;z-index:1!important;
    background:linear-gradient(180deg,rgba(248,251,252,.88) 0%,rgba(248,251,252,.56) 24%,rgba(248,251,252,.04) 45%,rgba(248,251,252,0) 76%,rgba(245,249,250,.23) 100%)!important;
  }
  body #portfolio .portfolio-banner-inner {
    position:relative!important;z-index:2!important;
    width:calc(100% - 38px)!important;
    padding:42px 0 150px!important;
  }
  body #portfolio .portfolio-actions {
    display:flex!important;flex-direction:column!important;align-items:stretch!important;
    gap:16px!important;margin-top:28px!important;position:relative!important;z-index:3!important;
  }
  body #portfolio .portfolio-actions .portfolio-outline {
    background:transparent!important;box-shadow:none!important;border:0!important;
    border-radius:0!important;min-height:46px!important;
    padding:9px 0!important;text-decoration:underline!important;text-underline-offset:5px!important;
    color:#103d55!important;font-weight:700!important;
  }
}
@media only screen and (max-width:380px){
  body #portfolio .portfolio-banner-inner{padding-bottom:125px!important;}
}

/* v4.0 mobile-only Portfolio correction: allocate a genuine illustration zone
   BELOW the copy and actions, while keeping one continuous hero background.
   No desktop selectors or JS changed. */
@media only screen and (max-width:600px){
  body #portfolio .portfolio-banner{
    position:relative!important;isolation:isolate!important;overflow:hidden!important;
    min-height:0!important;
    background:linear-gradient(180deg,#f7fbfc 0%,#eff8fa 52%,#deeff3 80%,#f7fbfc 100%)!important;
  }
  body #portfolio .portfolio-banner-inner{
    position:relative!important;z-index:3!important;
    padding:44px 0 340px!important;
  }
  body #portfolio .portfolio-banner::after{
    content:''!important;position:absolute!important;inset:0!important;
    z-index:1!important;pointer-events:none!important;
    background:linear-gradient(180deg,rgba(247,251,252,.95) 0%,rgba(247,251,252,.62) 38%,transparent 59%,rgba(247,251,252,.08) 81%,rgba(247,251,252,.95) 100%)!important;
  }
  body #portfolio .portfolio-threat-scene{
    display:block!important;position:absolute!important;
    inset:auto 0 0 0!important;top:auto!important;bottom:0!important;
    width:100%!important;height:360px!important;z-index:0!important;
    opacity:1!important;filter:contrast(1.23) saturate(1.13) brightness(.89)!important;
    -webkit-mask-image:radial-gradient(ellipse 78% 82% at 50% 49%,#000 0%,#000 62%,rgba(0,0,0,.7) 78%,transparent 100%)!important;
    mask-image:radial-gradient(ellipse 78% 82% at 50% 49%,#000 0%,#000 62%,rgba(0,0,0,.7) 78%,transparent 100%)!important;
  }
  body #portfolio .portfolio-threat-scene canvas{display:block!important;width:100%!important;height:100%!important;}
  body #portfolio .portfolio-actions{
    position:relative!important;z-index:4!important;display:flex!important;
    flex-direction:column!important;align-items:stretch!important;
    gap:12px!important;margin-top:26px!important;
  }
  body #portfolio .portfolio-actions .portfolio-outline{
    background:transparent!important;box-shadow:none!important;border:0!important;
    color:#104660!important;text-decoration:underline!important;text-underline-offset:5px!important;
    font-weight:700!important;min-height:46px!important;padding:10px 5px!important;
  }
  body #portfolio .portfolio-intro{position:relative!important;z-index:4!important;}
}
@media only screen and (max-width:380px){body #portfolio .portfolio-banner-inner{padding-bottom:285px!important;}body #portfolio .portfolio-threat-scene{height:310px!important;}}

/* v4.1 — MOBILE PORTFOLIO ONLY. Match the successful mobile Home hero:
   navy base, legible content, real animated canvas below content, seamless edge.
   Desktop and tablet >= 601px are deliberately unaffected. */
@media screen and (max-width:600px){
  body #portfolio .portfolio-banner{
    display:block!important;position:relative!important;isolation:isolate!important;
    min-height:0!important;overflow:hidden!important;color:#f4f9ff!important;
    background:radial-gradient(ellipse 95% 42% at 52% 82%,#10384c 0%,#0b263b 45%,#081a2c 100%)!important;
  }
  body #portfolio .portfolio-banner-inner{
    box-sizing:border-box!important;position:relative!important;z-index:3!important;
    width:calc(100% - 36px)!important;max-width:100%!important;
    margin:0 auto!important;padding:44px 0 315px!important;
  }
  body #portfolio .portfolio-banner .eyebrow{color:#8eddea!important;letter-spacing:.13em!important;}
  body #portfolio .portfolio-banner h1,
  body #portfolio .portfolio-banner h1 span{color:#fff!important;text-shadow:none!important;}
  body #portfolio .portfolio-banner h1 span{color:#a2eaf3!important;}
  body #portfolio .portfolio-intro{position:relative!important;z-index:4!important;
    color:#e1edf4!important;font-size:16px!important;line-height:1.65!important;
    text-shadow:none!important;
  }
  body #portfolio .portfolio-actions{position:relative!important;z-index:5!important;
    display:flex!important;flex-direction:column!important;align-items:stretch!important;
    margin-top:28px!important;gap:12px!important;
  }
  body #portfolio .portfolio-actions .btn{display:flex!important;align-items:center!important;
    justify-content:center!important;width:100%!important;box-sizing:border-box!important;
    min-height:54px!important;font-size:16px!important;background:#40c0dd!important;
    border:1px solid #40c0dd!important;color:#071b2d!important;
  }
  body #portfolio .portfolio-actions .portfolio-outline{display:flex!important;
    align-items:center!important;justify-content:center!important;
    box-sizing:border-box!important;min-height:48px!important;width:100%!important;
    padding:10px 12px!important;background:transparent!important;border:1px solid rgba(174,226,241,.55)!important;
    border-radius:7px!important;box-shadow:none!important;color:#effaff!important;
    text-decoration:none!important;font-size:16px!important;font-weight:700!important;
  }
  body #portfolio .portfolio-threat-scene{
    position:absolute!important;display:block!important;z-index:0!important;
    left:0!important;right:0!important;top:auto!important;bottom:0!important;
    width:100%!important;height:310px!important;opacity:.95!important;
    pointer-events:none!important;transform:none!important;
    filter:invert(1) hue-rotate(180deg) brightness(1.1) saturate(1.3)!important;
    mix-blend-mode:screen!important;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 17%,#000 81%,transparent 100%)!important;
    mask-image:linear-gradient(to bottom,transparent 0%,#000 17%,#000 81%,transparent 100%)!important;
  }
  body #portfolio .portfolio-threat-scene canvas{display:block!important;width:100%!important;height:100%!important;}
  body #portfolio .portfolio-banner::after{
    content:''!important;position:absolute!important;inset:0!important;z-index:1!important;
    background:linear-gradient(to bottom,rgba(8,26,44,.98) 0%,rgba(8,26,44,.96) 48%,rgba(8,26,44,.15) 74%,rgba(8,26,44,.16) 100%)!important;
    pointer-events:none!important;
  }
}
@media screen and (max-width:380px){
  body #portfolio .portfolio-banner-inner{padding-bottom:275px!important;}
  body #portfolio .portfolio-threat-scene{height:275px!important;}
}

/* v4.2: mobile-only expandable navigation. Desktop styling is unchanged. */
.capri-menu-toggle{display:none}
@media (max-width:800px){
  header .wrap.nav{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;align-items:center!important;justify-content:space-between!important;gap:0!important;padding:12px 0!important;height:auto!important}
  header .nav .brand{margin:0!important}
  header .nav .capri-menu-toggle{display:inline-flex!important;align-items:center;justify-content:center;gap:10px;min-height:44px;min-width:48px;padding:9px 12px;border:1px solid #becbd2;border-radius:9px;background:#fff;color:#203349;font:700 14px/1.2 inherit;cursor:pointer;position:relative;z-index:6}
  .capri-menu-bars{display:flex;flex-direction:column;justify-content:center;gap:5px;width:21px;height:22px}
  .capri-menu-bars span{display:block;width:21px;height:2px;border-radius:2px;background:currentColor;transition:transform .18s ease,opacity .18s ease}
  .capri-menu-toggle[aria-expanded="true"] .capri-menu-bars span:first-child{transform:translateY(7px) rotate(45deg)}
  .capri-menu-toggle[aria-expanded="true"] .capri-menu-bars span:nth-child(2){opacity:0}
  .capri-menu-toggle[aria-expanded="true"] .capri-menu-bars span:last-child{transform:translateY(-7px) rotate(-45deg)}
  header .nav nav#capri-mobile-navigation{order:3;flex:0 0 100%;width:100%!important;margin:0!important;padding:6px 0 2px!important;display:grid!important;grid-template-columns:1fr!important;gap:2px!important;align-items:stretch!important;justify-content:stretch!important}
  header .nav nav#capri-mobile-navigation a{display:block!important;flex:none!important;text-align:left!important;font-size:16px!important;line-height:1.45!important;padding:12px 14px!important;border-radius:7px;white-space:normal!important;color:#304256!important}
  header .nav nav#capri-mobile-navigation a:hover,header .nav nav#capri-mobile-navigation a:focus-visible{background:#eaf3f6!important;color:#075e78!important}
  html.capri-menu-ready header .nav nav#capri-mobile-navigation:not(.capri-is-open){display:none!important}
  header .nav .nav-cta{display:none!important}
}
@media(min-width:801px){header .nav .capri-menu-toggle{display:none!important}}
@media(prefers-reduced-motion:reduce){.capri-menu-bars span{transition:none}}

/* v4.3 — authentic CapriSec logo lettering for header and footer only.
   Keep every layout, navigation breakpoint, and animation unchanged. */
header .brand, footer .brand {
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;letter-spacing:normal;line-height:1;
}
header .brand-wordmark, footer .brand-wordmark {
  display:inline-flex;align-items:center;justify-content:center;
  background:#091c34;border-radius:8px;
  padding:11px 13px;
}
header .brand-wordmark img, footer .brand-wordmark img {
  display:block;width:clamp(126px,15vw,192px);height:auto;max-width:100%;
}
@media (max-width:800px) {
 header .brand-wordmark, footer .brand-wordmark {padding:9px 11px;border-radius:7px}
 header .brand-wordmark img, footer .brand-wordmark img {width:clamp(128px,28vw,163px)}
}
@media (max-width:360px){header .brand-wordmark img{width:126px}}