@import url('https://fonts.googleapis.com/css2?family=Brawler&family=Istok+Web:wght@400;700&family=Public+Sans:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&display=swap');
*{box-sizing:border-box;}
:root{
  --ink:#16232e; --ink-soft:#4a5b6b; --bg:#eef3f8; --surface:#ffffff;
  --border:#dbe4ec; --blue:#0f6cbd; --blue-deep:#0a4c88; --blue-tint:#e8f1fb;
  --radius:14px;
  --shadow-sm:0 1px 2px rgba(16,35,46,.05), 0 6px 18px rgba(16,35,46,.05);
  --shadow-md:0 2px 6px rgba(16,35,46,.06), 0 18px 44px rgba(16,35,46,.11);
  --maxw:1080px;
}
html{scroll-behavior:smooth;}
#background_wrapper{position:fixed; inset:0; z-index:-1;
  background:linear-gradient(180deg,#d8e9f7 0%, var(--bg) 480px);}
body{font-family:'Public Sans',system-ui,-apple-system,sans-serif; color:var(--ink);
  background:var(--bg); font-size:17px; line-height:1.65; margin:0; min-width:320px;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:'Source Serif 4',Georgia,serif; font-weight:600; color:var(--ink);
  line-height:1.18; margin:0;}
html.classic body{font-family:'Istok Web',sans-serif;}
html.classic h1,html.classic h2,html.classic h3,html.classic h4,html.classic .wordmark{font-family:'Brawler',serif;}
html.classic .btn,html.classic .header-cta,html.classic .submit-button,html.classic .eyebrow,html.classic .hero-eyebrow,html.classic .card-link,html.classic .tag-new,html.classic .subtitle,html.classic input,html.classic textarea{font-family:'Istok Web',sans-serif;}
html.classic .subtitle{font-style:italic;}
html.classic .hero h1{font-size:2.6rem;}
p{text-wrap:pretty;}
a{color:var(--blue); text-decoration:none;}
a:hover{text-decoration:underline;}

/* Header */
header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.82);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--border);}
.header-inner{max-width:var(--maxw); margin:0 auto; padding:14px 24px; display:flex;
  align-items:center; justify-content:space-between; gap:16px;}
.brand{display:flex; flex-direction:column; line-height:1.1;}
.wordmark{font-family:'Source Serif 4',serif; font-weight:600; font-size:1.5rem; letter-spacing:-.01em; color:var(--ink);}
.subtitle{font-size:.82rem; color:var(--ink-soft); font-weight:500; margin-top:2px; font-style:normal;}
.header-cta{flex:none; white-space:nowrap; background:var(--blue); color:#fff; padding:9px 18px; border-radius:9px;
  font-weight:600; font-size:.92rem;}
.header-cta:hover{background:var(--blue-deep); text-decoration:none; color:#fff;}

/* Layout */
main{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.section{margin:78px 0;}
.section-head{margin-bottom:28px;}
.section-head.center{text-align:center;}
.eyebrow{display:inline-block; font-family:'Public Sans',sans-serif; font-weight:700;
  font-size:.74rem; letter-spacing:.13em; text-transform:uppercase; color:var(--blue); margin-bottom:10px;}
h2{font-size:2rem;}
.lead{font-size:1.12rem; color:var(--ink-soft); max-width:64ch; margin:0;}
.section-head.center .lead{margin-left:auto; margin-right:auto;}

/* Hero */
.hero{position:relative; width:100vw; max-width:100vw; left:50%; transform:translateX(-50%);
  padding:98px 24px; text-align:center; background-color:#0a2540;
  background-image:image-set(url('assets/hero_image_1280px.png') 1x, url('assets/hero_image_2560px.png') 2x);
  background-size:cover; background-position:center center; background-repeat:no-repeat;
  box-sizing:border-box; margin-bottom:10px;}
.hero::after{content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,24,42,.58) 0%, rgba(8,24,42,.34) 45%, rgba(8,24,42,.66) 100%);}
.hero-inner{position:relative; z-index:2; max-width:740px; margin:0 auto;}
.hero-eyebrow{display:inline-block; color:#b9d8fb; font-weight:700; font-size:.78rem;
  letter-spacing:.13em; text-transform:uppercase; margin-bottom:16px; font-family:'Public Sans',sans-serif;}
.hero h1{font-size:3.1rem; color:#fff; margin:0 0 18px;}
.hero p{font-size:1.2rem; color:rgba(255,255,255,.94); max-width:600px; margin:0 auto 30px; line-height:1.6;}
.hero-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; padding:13px 26px;
  border-radius:10px; font-family:'Public Sans',sans-serif; font-weight:600; font-size:1rem;
  white-space:nowrap; cursor:pointer; border:none; transition:transform .15s ease, background .2s ease, box-shadow .2s ease;}
.btn-primary{background:var(--blue); color:#fff; box-shadow:0 6px 18px rgba(15,108,189,.35);}
.btn-primary:hover{background:var(--blue-deep); transform:translateY(-2px); text-decoration:none; color:#fff;}
.btn-ghost{background:rgba(255,255,255,.14); color:#fff; border:1.5px solid rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);}
.btn-ghost:hover{background:rgba(255,255,255,.24); text-decoration:none; color:#fff;}

/* Services */
.services-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:20px; margin-top:8px;}
.service-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:26px 24px; box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; display:flex; flex-direction:column;}
.service-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:#bcd3e8;}
.card-featured{border-color:#bcd7f2; background:linear-gradient(180deg,#f4f9fe, #ffffff);}
.icon-badge{display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px;
  border-radius:12px; background:var(--blue-tint); color:var(--blue); margin-bottom:16px;}
.icon-badge svg{width:24px; height:24px;}
.service-card h4{font-size:1.22rem; margin:0 0 8px; display:flex; align-items:center; gap:0; flex-wrap:wrap;}
.service-card p{margin:0; color:var(--ink-soft); font-size:.98rem; line-height:1.55; flex:1;}
.card-link{display:inline-block; margin-top:15px; font-weight:600; font-size:.92rem;
  font-family:'Public Sans',sans-serif; color:var(--blue);}
.tag-new{display:inline-block; font-family:'Public Sans',sans-serif; font-size:.62rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--blue);
  padding:3px 8px; border-radius:20px; margin-left:9px; transform:translateY(-1px);}

/* Feature band */
.feature-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:44px; align-items:center;
  background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:42px;
  box-shadow:var(--shadow-sm);}
.feature-copy h2{font-size:1.85rem; margin:0 0 14px;}
.feature-copy p{color:var(--ink-soft); margin:0;}
.feature-list{list-style:none; padding:0; margin:22px 0 28px; display:flex; flex-direction:column; gap:13px;}
.feature-list li{position:relative; padding-left:34px; color:var(--ink-soft); font-size:1.02rem; line-height:1.45;}
.feature-list li::before{content:'\2713'; position:absolute; left:0; top:1px; width:22px; height:22px;
  border-radius:50%; background:var(--blue); color:#fff; font-size:.72rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;}
.placeholder{border-radius:14px; border:1px solid var(--border); background-color:#eef3f8;
  background-image:repeating-linear-gradient(135deg, rgba(15,108,189,.07) 0 11px, transparent 11px 22px);
  min-height:280px; display:flex; align-items:center; justify-content:center; text-align:center; padding:24px;}
.placeholder span{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace; font-size:.8rem;
  color:#6a7d8f; letter-spacing:.02em; line-height:1.6;}

/* Learn panels */
.learn{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:28px 30px; box-shadow:var(--shadow-sm);}
.panel.panel-wide{grid-column:1 / -1;}
.panel h2{font-size:1.4rem; margin:0 0 10px;}
.panel p{margin:0; color:var(--ink-soft); font-size:1rem;}

/* Contact */
.contact-form{max-width:560px; margin:0 auto; background:var(--surface); border:1px solid var(--border);
  border-radius:16px; padding:32px; box-shadow:var(--shadow-sm);}
.form-group{margin-bottom:18px;}
.form-group label{display:block; margin-bottom:7px; font-weight:600; font-size:.92rem;}
.form-group input,.form-group textarea{width:100%; padding:12px 14px; border:1px solid var(--border);
  border-radius:9px; font-family:'Public Sans',sans-serif; font-size:1rem; background:#fbfdff;
  color:var(--ink); box-sizing:border-box;}
.form-group textarea{resize:vertical; min-height:130px;}
.form-group input:focus,.form-group textarea:focus{outline:none; border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(15,108,189,.15);}
.submit-button{width:100%; background:var(--blue); color:#fff; padding:14px; border:none;
  border-radius:10px; font-family:'Public Sans',sans-serif; font-weight:600; font-size:1.02rem;
  cursor:pointer; transition:background .2s;}
.submit-button:hover{background:var(--blue-deep);}
.submit-message{max-width:560px; margin:18px auto 0; text-align:center; padding:14px; border-radius:10px; font-size:1rem;}
.submit-message.success{color:#166534; background:#e7f6ed; border:1px solid #9fd8b4;}
.submit-message.error{color:#b42318; background:#fdeceb; border:1px solid #f3b0aa;}
.contact-alt{text-align:center; margin-top:18px; color:var(--ink-soft); font-size:.98rem;}

/* About */
.about{background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:34px 36px; box-shadow:var(--shadow-sm); max-width:800px;}
.about p{color:var(--ink-soft); margin:0 0 14px;}
.about p:last-child{margin-bottom:0;}
.about p:first-child{color:var(--ink); font-size:1.08rem;}

/* Footer */
footer{background:#12222f; color:#c9d6e0; text-align:center; padding:28px 24px; margin-top:82px;}
footer p{margin:0 0 9px;}
.footer-links{display:flex; justify-content:center; align-items:center; gap:12px; font-size:.9rem;}
footer a, footer a:link, footer a:visited{color:#cfe0f0; text-decoration:none;}
footer a:hover{color:#fff; text-decoration:underline;}
.footer-divider{opacity:.45; user-select:none;}

/* Responsive */
@media screen and (max-width:860px){
  .feature-grid{grid-template-columns:1fr; padding:30px; gap:28px;}
  .learn{grid-template-columns:1fr;}
}
@media screen and (max-width:640px){
  body{font-size:16px;}
  main{padding:0 18px;}
  .header-inner{padding:12px 18px;}
  .header-cta{padding:8px 14px; font-size:.86rem;}
  .subtitle{display:none;}
  .wordmark{font-size:1.28rem;}
  .section{margin:56px 0;}
  h2{font-size:1.65rem;}
  .hero{padding:74px 20px;}
  .hero h1{font-size:2.3rem;}
  .hero p{font-size:1.08rem;}
  .feature-copy h2{font-size:1.5rem;}
  .services-grid{grid-template-columns:1fr;}
  .contact-form{padding:24px;}
  .about{padding:26px 24px;}
}


/* Responsive hero images for different screen sizes */
@media screen and (max-width: 480px) {
    .hero {
        background-image: image-set(
            url('assets/hero_image_480px.png') 1x,
            url('assets/hero_image_960px.png') 2x
        );
        background-image: -webkit-image-set(
            url('assets/hero_image_480px.png') 1x,
            url('assets/hero_image_960px.png') 2x
        );
    }
}

@media screen and (min-width: 481px) and (max-width: 960px) {
    .hero {
        background-image: image-set(
            url('assets/hero_image_960px.png') 1x,
            url('assets/hero_image_1920px.png') 2x
        );
        background-image: -webkit-image-set(
            url('assets/hero_image_960px.png') 1x,
            url('assets/hero_image_1920px.png') 2x
        );
    }
}

@media screen and (min-width: 961px) and (max-width: 1280px) {
    .hero {
        background-image: image-set(
            url('assets/hero_image_1280px.png') 1x,
            url('assets/hero_image_2560px.png') 2x
        );
        background-image: -webkit-image-set(
            url('assets/hero_image_1280px.png') 1x,
            url('assets/hero_image_2560px.png') 2x
        );
    }
}

@media screen and (min-width: 1281px) and (max-width: 1920px) {
    .hero {
        background-image: image-set( 
            url('assets/hero_image_1920px.png') 1x,
            url('assets/hero_image_2560px.png') 2x
        );
        background-image: -webkit-image-set(
            url('assets/hero_image_1920px.png') 1x,
            url('assets/hero_image_2560px.png') 2x
        );
    }
}

@media screen and (min-width: 1921px) {
    .hero {
        background-image: url('assets/hero_image_2560px.png');
    }
}

/* ==========================================================================
   Blog Styles
   ========================================================================== */

/* Blog Section on Homepage */
.blog-section {
    margin: 3.0em 0;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5em;
    margin-top: 1.5em;
}

.blog-grid-full {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.blog-more {
    text-align: center;
    margin-top: 2.0em;
}

/* Blog Card */
.blog-card {
    background: rgba(255, 255, 255, 0.6);
    padding: 1.5em;
    border: 1px solid rgba(160, 216, 239, 0.5);
    border-radius: 4px;
    box-shadow: 5px 5px 10px 0 rgba(160, 216, 239, 0.5);
    display: flex;
    flex-direction: column;
}

.blog-card h3 {
    font-size: 1.2em;
    margin-bottom: 0.5em;
    line-height: 1.3;
}

.blog-card h3 a {
    text-decoration: none;
    opacity: 1;
}

.blog-card h3 a:hover {
    text-decoration: underline;
}

.blog-card-meta {
    font-size: 0.85em;
    color: #666;
    margin-bottom: 0.75em;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75em;
}

.blog-card-category {
    background: rgba(70, 130, 180, 0.15);
    padding: 0.15em 0.5em;
    border-radius: 3px;
    color: rgba(70, 130, 180, 1);
}

.blog-card-excerpt {
    flex: 1;
    line-height: 1.5;
    margin-bottom: 1.0em;
    color: #444;
}

.blog-card-link {
    font-weight: 500;
    text-decoration: none;
}

/* Secondary CTA Button */
.cta-button-secondary {
    display: inline-block;
    background: transparent;
    color: rgba(70, 130, 180, 1);
    padding: 12px 24px;
    text-decoration: none;
    border-radius: 6px;
    font-family: 'Brawler', serif;
    font-size: 1.1em;
    font-weight: 400;
    border: 2px solid rgba(70, 130, 180, 0.8);
    transition: all 0.3s ease;
}

.cta-button-secondary:hover {
    background: rgba(70, 130, 180, 0.1);
    border-color: rgba(70, 130, 180, 1);
    opacity: 1;
}

/* Blog Post Page */
.blog-post {
    max-width: 800px;
    margin: 0 auto;
}

.blog-post-header {
    margin-bottom: 2.0em;
    text-align: center;
}

.blog-post-header h1 {
    font-size: 2.2em;
    margin-bottom: 0.5em;
    display: block;
}

.blog-post-meta {
    font-size: 0.95em;
    color: #666;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.0em;
}

.blog-post-tags {
    margin-top: 1.0em;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5em;
}

.blog-tag {
    background: rgba(70, 130, 180, 0.1);
    padding: 0.25em 0.75em;
    border-radius: 15px;
    font-size: 0.85em;
    color: rgba(70, 130, 180, 1);
}

.blog-post-content {
    background: rgba(255, 255, 255, 0.6);
    padding: 2.0em;
    border: 1px solid rgba(160, 216, 239, 0.5);
    border-radius: 4px;
    box-shadow: 5px 5px 10px 0 rgba(160, 216, 239, 0.5);
    line-height: 1.7;
}

.blog-post-content h2 {
    margin-top: 1.5em;
    margin-bottom: 0.75em;
}

.blog-post-content h3 {
    margin-top: 1.25em;
    margin-bottom: 0.5em;
}

.blog-post-content p {
    margin-bottom: 1.0em;
}

.blog-post-content ul,
.blog-post-content ol {
    margin-bottom: 1.0em;
    padding-left: 1.5em;
}

.blog-post-content li {
    margin-bottom: 0.5em;
}

.blog-post-content blockquote {
    border-left: 4px solid rgba(70, 130, 180, 0.5);
    padding-left: 1.0em;
    margin: 1.5em 0;
    font-style: italic;
    color: #555;
}

.blog-post-content code {
    background: rgba(0, 0, 0, 0.05);
    padding: 0.15em 0.4em;
    border-radius: 3px;
    font-family: monospace;
    font-size: 0.9em;
}

.blog-post-content pre {
    background: rgba(0, 0, 0, 0.05);
    padding: 1.0em;
    border-radius: 4px;
    overflow-x: auto;
    margin-bottom: 1.0em;
}

.blog-post-content pre code {
    background: transparent;
    padding: 0;
}

.blog-post-footer {
    margin-top: 3.0em;
}

.blog-post-cta {
    background: rgba(255, 255, 255, 0.6);
    padding: 2.0em;
    border: 1px solid rgba(160, 216, 239, 0.5);
    border-radius: 4px;
    box-shadow: 5px 5px 10px 0 rgba(160, 216, 239, 0.5);
    text-align: center;
    margin-bottom: 2.0em;
}

.blog-post-cta h3 {
    margin-bottom: 0.5em;
    color: #2a5a7a;
}

.blog-post-cta p {
    margin-bottom: 1.0em;
    color: #444;
}

.blog-post-nav {
    text-align: center;
}

/* Mobile Blog Styles */
@media screen and (max-width: 500px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }

    .blog-post-header h1 {
        font-size: 1.8em;
    }

    .blog-post-content {
        padding: 1.5em;
    }

    .blog-post-cta {
        padding: 1.5em;
    }
}
.icon-badge svg{display:none}.icon-badge.i1{background-image:url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' fill%3D'%230f6cbd' viewBox%3D'0 0 16 16'%3E%3Cpath d%3D'M7.657 6.247c.11-.33.576-.33.686 0l.645 1.937a2.89 2.89 0 0 0 1.829 1.828l1.936.645c.33.11.33.576 0 .686l-1.937.645a2.89 2.89 0 0 0-1.828 1.829l-.645 1.936a.361.361 0 0 1-.686 0l-.645-1.937a2.89 2.89 0 0 0-1.828-1.828l-1.937-.645a.361.361 0 0 1 0-.686l1.937-.645a2.89 2.89 0 0 0 1.828-1.828zM3.794 1.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387A1.73 1.73 0 0 0 4.593 5.69l-.387 1.162a.217.217 0 0 1-.412 0L3.407 5.69A1.73 1.73 0 0 0 2.31 4.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387A1.73 1.73 0 0 0 3.407 2.31zM10.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.16 1.16 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.16 1.16 0 0 0-.732-.732L9.1 2.137a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732z'%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:center;background-size:24px 24px}.icon-badge.i2{background-image:url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' fill%3D'%230f6cbd' viewBox%3D'0 0 16 16'%3E%3Cpath d%3D'M6 12.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M3 8.062C3 6.76 4.235 5.765 5.53 5.886a26.6 26.6 0 0 0 4.94 0C11.765 5.765 13 6.76 13 8.062v1.157a.93.93 0 0 1-.765.935c-.845.147-2.34.346-4.235.346s-3.39-.2-4.235-.346A.93.93 0 0 1 3 9.219zm4.542-.827a.25.25 0 0 0-.217.068l-.92.9a25 25 0 0 1-1.871-.183.25.25 0 0 0-.068.495c.55.076 1.232.149 2.02.193a.25.25 0 0 0 .189-.071l.754-.736.847 1.71a.25.25 0 0 0 .404.062l.932-.97a25 25 0 0 0 1.922-.188.25.25 0 0 0-.068-.495c-.538.074-1.207.145-1.98.189a.25.25 0 0 0-.166.076l-.754.785-.842-1.7a.25.25 0 0 0-.182-.135'%2F%3E%3Cpath d%3D'M8.5 1.866a1 1 0 1 0-1 0V3h-2A4.5 4.5 0 0 0 1 7.5V8a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1v1a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1v-.5A4.5 4.5 0 0 0 10.5 3h-2zM14 7.5V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7.5A3.5 3.5 0 0 1 5.5 4h5A3.5 3.5 0 0 1 14 7.5'%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:center;background-size:24px 24px}.icon-badge.i3{background-image:url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' fill%3D'%230f6cbd' viewBox%3D'0 0 16 16'%3E%3Cpath d%3D'M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.605A.5.5 0 0 1 10.5 13a.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.46-.302l-.761-1.605a2 2 0 0 0-.453-.619A5.98 5.98 0 0 1 2 6m6-5a5 5 0 0 0-3.479 8.592c.263.254.514.564.676.941L5.83 12h4.342l.632-1.467c.162-.377.413-.687.676-.941A5 5 0 0 0 8 1'%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:center;background-size:24px 24px}
.feature-shot{width:100%;height:auto;border-radius:14px;border:1px solid var(--border);box-shadow:var(--shadow-md);display:block}