/* Portfolio contact and responsive refinement */
html,body{max-width:100%;overflow-x:clip}body{font-size:17px}#site-header{position:relative;z-index:100;background:#fbfcf9}.contact-strip{background:#14261e;color:#f4f7f2;border-bottom:1px solid #294134}.contact-strip-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:12px}.contact-strip a,.contact-strip summary{font-size:14px;line-height:1.5;font-weight:600;min-height:30px;display:inline-flex;align-items:center}.contact-strip a:hover{color:#c8f544}.header-qr{position:relative}.header-qr summary{cursor:pointer;border:1px solid #99b773;border-radius:99px;padding:6px 14px;color:#d4f58c;list-style:none}.header-qr summary::-webkit-details-marker{display:none}.qr-popover{position:absolute;right:0;top:calc(100% + 12px);width:480px;max-width:calc(100vw - 32px);padding:24px;background:#fff;border:1px solid #d7dfcd;border-radius:18px;color:#263622;box-shadow:0 20px 60px #0003;z-index:120}.qr-popover>p{font-weight:700;font-size:20px;margin-bottom:14px}.qr-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.qr-pair>div{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}.qr-pair img{width:100%;max-width:216px;height:auto;aspect-ratio:1;display:block;background:white;border:1px solid #d5ddcc;border-radius:8px}.qr-pair strong{font-size:15px}.qr-pair a{font-size:14px;overflow-wrap:anywhere;max-width:100%}.contact-qr-section{margin:32px 0}.contact-qr-section h2{font-size:26px;line-height:1.2}.contact-strip details[open] summary{background:#c8f544;color:#182316}.site-header{position:relative}.nav{top:calc(100% - 4px)}
.hero-copy,.hero-photo,.hero-facts,.split>*{min-width:0}.hero .lead{max-width:100%}.home-shell>.editorial-hero{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);column-gap:44px;overflow:hidden}.hero-facts{grid-column:1/-1}.editorial-hero .hero-photo{background:transparent;border:0;border-radius:0;isolation:isolate;overflow:visible}.editorial-hero .hero-photo img{position:relative;z-index:2;object-fit:contain;object-position:center bottom;width:100%;height:100%;filter:drop-shadow(0 20px 25px #233d1726)}.hero-photo .photo-orbit{width:94%;max-width:520px}.hero-photo .photo-tag{bottom:10px;left:0;right:0;max-width:100%;padding:14px 18px}.hero-photo .photo-index{display:none}.about-portrait{background:transparent!important;border:0!important}.hero-watermark{pointer-events:none}.editorial-hero h1{font-size:clamp(46px,5vw,70px);line-height:1.12}.editorial-hero .hero-copy .eyebrow{white-space:normal;flex-wrap:wrap;font-size:12px;line-height:1.5;letter-spacing:.06em}.hero-note{line-height:1.5;font-size:15px}.hero-specialties{flex-wrap:wrap;gap:8px}.hero-specialties span{font-size:14px}
.client-website-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}.client-website-card{min-width:0;overflow:hidden}.website-preview{display:block;margin:-29px -29px 26px;border-bottom:1px solid #d1dccc;overflow:hidden;background:#f0f3ec}.browser-bar{padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#f3f5ef;color:#3d5042;font-size:12px;font-weight:700;letter-spacing:.01em}.browser-dots{white-space:nowrap;color:#7bab5a;letter-spacing:3px;font-size:13px}.website-crop{aspect-ratio:632/386;position:relative;overflow:hidden}.website-crop img{position:absolute;width:324.05%;max-width:none;height:auto;top:-67.88%;left:-7.28%;display:block}.website-crop.crop-1 img{left:-112.65%}.website-crop.crop-2 img{left:-218.04%}.website-preview:hover .website-crop{filter:brightness(1.06)}.client-website-card h3{overflow-wrap:normal;font-size:28px!important;line-height:1.16}.client-card-bottom{flex-wrap:wrap;gap:12px}.client-domain{overflow-wrap:anywhere;min-width:0}.client-website-card .client-industry{line-height:1.4}.featured-work .client-website-card{min-height:0}.contact-item a{display:block}.section-top>*{min-width:0}.photo-tag strong{line-height:1.3}.footer-nav a{overflow-wrap:anywhere}.chat-widget{left:auto;right:20px}.chat-panel{left:auto;right:0}.chat-launcher{font-size:14px;padding:12px 18px}.chat-disclosure{font-size:12px}
@media(max-width:1100px){.contact-strip-inner{justify-content:flex-start;gap:12px 24px}.home-shell>.editorial-hero{gap:28px}.client-website-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.featured-work .client-website-card:last-child{grid-column:1/-1;max-width:650px}.editorial-hero h1{font-size:54px}.editorial-hero .hero-photo{height:560px}}
@media(max-width:850px){.shell{width:calc(100% - 40px)}.home-shell>.editorial-hero{display:grid;grid-template-columns:minmax(0,1fr);padding:36px 20px 32px;gap:28px;min-height:0;margin:0;border-radius:0}.hero-copy{max-width:640px;margin:0 auto;width:100%}.editorial-hero h1{font-size:clamp(38px,7.2vw,56px);line-height:1.14;letter-spacing:-.035em}.editorial-hero h1 .accent{font-size:1em;line-height:1.12;letter-spacing:-.04em}.editorial-hero h1 .accent:after{height:6px;margin-top:10px}.desktop-break{display:none}.editorial-hero .hero-photo{height:480px;max-width:390px;width:100%;margin:auto;align-self:auto}.hero-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;width:100%;padding:22px 0 0;margin:0}.hero-watermark{display:none}.hero-fact span{font-size:14px;line-height:1.5}.hero-fact strong{font-size:15px;line-height:1.5}.section-top{align-items:flex-start;flex-direction:column;gap:20px}.section-top>p{max-width:100%}.site-header{height:72px;gap:16px}.site-header .brand{font-size:16px}.nav{left:0;right:0;top:100%;width:100%;max-height:70vh;overflow-y:auto}.contact-strip-inner{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;padding-block:12px}.contact-strip a{font-size:13px;line-height:1.5;overflow-wrap:anywhere}.contact-strip .header-qr{grid-column:1/-1}.header-qr summary{font-size:13px;min-height:36px;width:max-content}.qr-popover{position:relative;top:auto;right:auto;margin-top:12px;width:100%;max-width:100%;padding:18px}.contact-strip-inner>a:nth-child(4){grid-column:1/-1}.discipline-band{gap:8px}.discipline-set span{font-size:21px}.motion-toggle{font-size:12px;min-height:40px;margin-right:12px}.split{grid-template-columns:minmax(0,1fr);gap:28px}.page-hero h1{font-size:clamp(38px,7vw,56px);line-height:1.15}.topwebs-brand-panel{max-width:100%}.portfolio-filter-bar{position:static}.footer-inner{gap:28px}}
@media(max-width:600px){.client-website-grid{grid-template-columns:minmax(0,1fr);gap:22px}.featured-work .client-website-card:last-child{grid-column:auto;max-width:none}.home-shell>.section,.home-shell>.section.tight{padding:44px 20px}.section,.section.tight{padding:40px 0}.hero .lead{font-size:18px;line-height:1.6}.hero-description{font-size:16px;line-height:1.65}.hero-actions{margin-top:24px;gap:10px}.hero-actions .button{padding:12px 18px;font-size:14px;min-height:46px}.editorial-hero .hero-photo{height:430px;max-width:310px}.hero-facts{gap:22px 14px}.section-top h2{font-size:34px;line-height:1.18}.card{padding:24px}.website-preview{margin:-24px -24px 22px}.client-website-card h3{font-size:28px!important}.client-card-bottom{flex-direction:column;align-items:stretch}.client-visit{width:100%;text-align:center;justify-content:center;min-height:46px}.browser-bar{font-size:12px;gap:8px}.quote-panel{padding:24px}.qr-pair{gap:14px}.qr-pair strong,.qr-pair a{font-size:13px}.contact-qr-section{max-width:100%}.chat-widget{right:12px;bottom:12px}.chat-launcher{min-height:42px;font-size:12px;padding:10px 14px}.chat-panel{width:calc(100vw - 24px);max-width:370px;max-height:75dvh}.footer-inner{padding-bottom:80px}.experience-row{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}.eyebrow{font-size:12px!important;line-height:1.5;letter-spacing:.08em}.hero-specialties span{font-size:13px}.client-work .topwebs-brand-panel{grid-template-columns:minmax(0,1fr) 80px;padding:18px}.hero-note{margin-bottom:0}}
@media(max-width:360px){.shell{width:calc(100% - 32px)}.home-shell>.editorial-hero,.home-shell>.section{padding-left:16px;padding-right:16px}.site-header .brand{font-size:14px}.hero h1,.editorial-hero h1{font-size:36px}.contact-strip-inner{grid-template-columns:minmax(0,1fr)}.contact-strip-inner>a:nth-child(4),.contact-strip .header-qr{grid-column:auto}.editorial-hero .hero-photo{height:390px}.hero-facts{grid-template-columns:minmax(0,1fr)}.qr-pair{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.hero-photo img{animation:none!important}}

/* Compact spacing and the supplied seated portrait */
.home-shell>.editorial-hero{min-height:0;padding-top:36px;padding-bottom:30px;row-gap:24px;align-items:center}.editorial-hero .hero-photo.seated-portrait{grid-column:2;grid-row:1;height:550px;width:100%;max-width:420px;justify-self:center;align-self:center;border-radius:24px;overflow:hidden;background:#e4e8e0}.editorial-hero .seated-portrait img{width:100%;height:100%;object-fit:cover;object-position:center 38%;animation:seated-breathe 9s ease-in-out infinite;filter:none;transform-origin:center}.seated-portrait .photo-orbit,.seated-portrait .vector-orbit{display:none}.editorial-hero .seated-portrait .photo-tag{left:16px;right:16px;bottom:16px;background:rgba(255,255,255,.94)}.home-shell>.editorial-hero .hero-facts{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin:0;padding-top:20px}.home-shell>.featured-work{padding-top:48px;padding-bottom:44px}.about-page .page-hero{padding-bottom:20px}.about-page #education{padding-top:18px;padding-bottom:24px}.about-page #education .section-top{margin-bottom:22px}.about-page #education .grid-2{grid-template-columns:minmax(0,1fr)}.about-page #education .card{min-height:0;padding:26px 30px}.about-page #education .card h3{max-width:none;margin-bottom:12px}.about-page #education .card-kicker{margin-bottom:14px}.about-page #education+.section{padding-top:24px}.about-page .section,.about-page .section.tight{padding-bottom:36px}.client-website-card{height:auto;min-height:0}.client-website-grid{align-items:start}.client-website-card p{margin-bottom:20px}.client-card-bottom{margin-top:0;padding-top:16px}.featured-work .client-card-top{margin-bottom:18px}.website-preview{margin-bottom:20px}.featured-work .section-top{margin-bottom:28px}.chat-widget{right:16px;bottom:16px}.chat-launcher{padding:10px 15px;font-size:13px}
@keyframes seated-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@media(max-width:1100px){.home-shell>.editorial-hero .hero-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.editorial-hero .hero-photo.seated-portrait{height:500px}}
@media(max-width:850px){.home-shell>.editorial-hero{padding:28px 20px;gap:22px}.editorial-hero .hero-photo.seated-portrait{grid-column:1;grid-row:auto;max-width:360px;height:480px;justify-self:center;margin:0 auto}.home-shell>.editorial-hero .hero-facts{grid-column:1;grid-row:auto;grid-template-columns:repeat(2,minmax(0,1fr));padding-top:18px}.about-page #education .card{padding:24px}.about-page #education .section-top h2{font-size:34px}.home-shell>.featured-work{padding-top:34px;padding-bottom:32px}}
@media(max-width:600px){.editorial-hero .hero-photo.seated-portrait{height:440px;max-width:330px}.home-shell>.editorial-hero .hero-facts{gap:18px 14px}.about-page #education{padding-top:12px;padding-bottom:18px}.about-page #education+.section{padding-top:18px}.client-website-card p{margin-bottom:16px}.client-website-card .client-card-top{margin-bottom:16px}.featured-work .section-top{margin-bottom:22px}.client-website-card .client-card-bottom{gap:10px}.about-page #education .card h3{font-size:25px}}
@media(max-width:360px){.editorial-hero .hero-photo.seated-portrait{height:400px}.home-shell>.editorial-hero .hero-facts{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.editorial-hero .seated-portrait img{animation:none}}

/* Project previews.
   These cards originally drew all three thumbnails out of one image
   (portfolio-reference.png, a screenshot of a site-builder preview) by scaling
   it to 324% and shifting it left per card. That image also carried BEER
   signage on the Modern Pantry storefront. Each card now has its own
   screenshot of the live client site, so the sprite offsets are cleared and
   each image simply fills its 632/386 box - the same ratio the files are cut to. */
.website-crop img,
.website-crop.crop-1 img,
.website-crop.crop-2 img{position:absolute;top:0;left:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:top center}