:root{
  --navy:#16233B;
  --navy-deep:#0D1524;
  --navy-line:#26374F;
  --cream:#F4EFE2;
  --paper:#ECE4D2;
  --ink:#252B38;
  --ink-soft:#4C5364;
  --red:#93362E;
  --red-deep:#7C2C25;
  --wood:#6E4B2A;
  --wood-light:#96703F;
  --brass:#C0913F;
  --brass-light:#DDB765;
  --white-warm:#FBF8F0;
  --radius:10px;
  --shadow:0 18px 40px -18px rgba(13,21,36,.35);
  --display:'Bitter',Georgia,serif;
  --body:'Public Sans',-apple-system,Segoe UI,sans-serif;
  --stencil:'Saira Stencil One',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--body);color:var(--ink);background:var(--cream);line-height:1.65;font-size:16.5px}
img{max-width:100%;display:block}
a{color:inherit}
.container{max-width:1180px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--display);line-height:1.15;color:var(--navy)}
h2{font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:800;letter-spacing:-.01em}
h3{font-size:1.22rem;font-weight:700}
section{padding:88px 0}
.eyebrow{font-family:var(--stencil);font-size:.82rem;letter-spacing:.22em;text-transform:uppercase;color:var(--red);display:flex;align-items:center;gap:10px;margin-bottom:14px}
.eyebrow::before{content:"★";color:var(--brass);font-size:.9rem}
.section-intro{max-width:640px;color:var(--ink-soft);margin-top:14px}
.center{text-align:center}
.center .eyebrow{justify-content:center}
.center .section-intro{margin-left:auto;margin-right:auto}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--body);font-weight:700;font-size:.95rem;padding:15px 28px;border-radius:6px;text-decoration:none;border:2px solid transparent;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;cursor:pointer}
.btn:focus-visible{outline:3px solid var(--brass);outline-offset:3px}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--red);color:var(--white-warm);box-shadow:0 10px 24px -10px rgba(147,54,46,.6)}
.btn-primary:hover{background:var(--red-deep)}
.btn-ghost{border-color:var(--brass);color:var(--brass-light)}
.btn-ghost:hover{background:rgba(192,145,63,.12)}
.btn-ghost.on-light{color:var(--wood);border-color:var(--wood)}
.btn-ghost.on-light:hover{background:rgba(110,75,42,.08)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}

/* Header */
header{position:sticky;top:0;z-index:50;background:rgba(13,21,36,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--navy-line)}
.nav{display:flex;align-items:center;gap:28px;height:74px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
/* ── LOGO SWAP POINT ─────────────────────────────────────────────
   Replace .logo-seal below with:
   <img src="bozzi-logo.png" alt="Bozzi's Honor Flags logo" width="46" height="46">
   once the client supplies the seal artwork. ─────────────────── */
.logo-seal{width:46px;height:46px;border-radius:50%;border:2px solid var(--brass);display:grid;place-items:center;color:var(--brass-light);font-size:1.15rem;background:radial-gradient(circle at 35% 30%,#1D2E4C,var(--navy-deep));flex-shrink:0}
.logo-text{font-family:var(--display);font-weight:800;color:var(--white-warm);font-size:1.05rem;line-height:1.1}
.logo-text small{display:block;font-family:var(--stencil);font-weight:400;font-size:.58rem;letter-spacing:.28em;color:var(--brass-light)}
.nav-links{display:flex;gap:24px;list-style:none;margin-left:auto}
.nav-links a{color:#CBD3E0;text-decoration:none;font-size:.9rem;font-weight:600;padding:6px 2px;border-bottom:2px solid transparent}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--white-warm);border-bottom-color:var(--brass)}
.nav-phone{color:var(--brass-light);font-weight:700;font-size:.9rem;text-decoration:none;white-space:nowrap}
.nav .btn{padding:11px 20px;font-size:.85rem}
.nav-toggle{display:none;background:none;border:1px solid var(--navy-line);color:var(--white-warm);font-size:1.4rem;line-height:1;padding:8px 12px;border-radius:6px;cursor:pointer;margin-left:auto}
.nav-toggle:focus-visible{outline:3px solid var(--brass);outline-offset:2px}


.logo {
  display: flex;
  align-items: center;
}

.logo-img {
  height: 60px; 
  width: 60px;
  display: block;
  border-radius: 50px;
}

/* Hero */
.hero{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 70%);color:var(--white-warm);padding:96px 0 110px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 3px,rgba(255,255,255,.012) 3px 4px);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;position:relative;z-index:1}
.hero h1{color:var(--white-warm);font-size:clamp(2.3rem,4.6vw,3.5rem);font-weight:900;letter-spacing:-.015em}
.hero h1 em{font-style:normal;color:#93362e}
.hero-sub{color:#C5CEDD;font-size:1.12rem;margin-top:22px;max-width:540px}
.trust-line{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:26px;font-family:var(--stencil);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-light)}
.trust-line span{display:flex;align-items:center;gap:8px}
.trust-line span::before{content:"★";font-size:.7rem}
.hero-support{margin-top:34px;padding-top:24px;border-top:1px solid var(--navy-line);color:#9AA6B8;font-size:.95rem;max-width:520px}

.hero{
    background: url("../images/home-banner.png") left center/cover no-repeat;
    padding:110px 80px 50px;
    position:relative;
    overflow:hidden;
}


/* .hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:repeating-linear-gradient(
        90deg,
        transparent 0 3px,
        rgba(255,255,255,.02) 3px 4px
    );
    pointer-events:none;
    z-index:1;
} */


.hero h1{
    color:#121E32;
    font-size:clamp(2.3rem,4.6vw,3.5rem);
    font-weight:900;
    letter-spacing:-.015em;
}

.hero-sub{
    color:#2F3C52;
    font-size:1.12rem;
    margin-top:22px;
    max-width:540px;
}

.trust-line{
    display:flex;
    flex-wrap:wrap;
    gap:10px 22px;
    margin-top:26px;
    font-family:var(--stencil);
    font-size:.74rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:#121E32;
}

.trust-line span{
    display:flex;
    align-items:center;
    gap:8px;
}

.trust-line span::before{
    content:"★";
    font-size:.7rem;
}

.hero-support{
    margin-top:34px;
    padding-top:24px;
    border-top:1px solid rgba(18,30,50,.2);
    color:#39465C;
    font-size:.95rem;
    max-width:520px;
}

/* Signature: CSS wooden flag */
.wood-flag{aspect-ratio:19/12;border-radius:8px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.6),0 0 0 6px var(--wood),0 0 0 8px var(--brass);position:relative;transform:rotate(-1.2deg)}
.flag-stripes{position:absolute;inset:0;display:flex;flex-direction:column}
.flag-stripes i{flex:1;position:relative}
.flag-stripes i::after{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(90deg,rgba(0,0,0,.10) 0 1px,transparent 1px 90px),
  repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 5px)}
.flag-stripes i:nth-child(odd){background:linear-gradient(90deg,#8B3730,#A0433A 45%,#8B3730)}
.flag-stripes i:nth-child(even){background:linear-gradient(90deg,#B99568,#CBA97C 50%,#B08C5E)}
.flag-canton{position:absolute;top:0;left:0;width:44%;height:calc(100%/13*7);background:linear-gradient(135deg,#1B2C4C,#111D33);display:grid;grid-template-columns:repeat(6,1fr);place-items:center;padding:6%;box-shadow:inset 0 0 30px rgba(0,0,0,.4)}
.flag-canton b{color:var(--brass-light);font-size:clamp(.5rem,1.1vw,.85rem);text-shadow:0 1px 2px rgba(0,0,0,.5)}
.flag-plaque{position:absolute;right:4%;bottom:6%;background:rgba(13,21,36,.85);border:1px solid var(--brass);color:var(--brass-light);font-family:var(--stencil);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;padding:8px 14px;border-radius:4px}

/* Product cards */
.bg-paper{background:var(--paper)}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:48px}
.card{background:var(--white-warm);border:1px solid #DDD3BC;border-radius:var(--radius);padding:30px 28px;box-shadow:0 8px 24px -16px rgba(37,43,56,.25);transition:transform .18s ease,box-shadow .18s ease;display:flex;flex-direction:column;gap:12px}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card-thumb{width:100px;height:100px;border-radius:18px;object-fit:cover;border:2px solid var(--brass);box-shadow:0 6px 16px -8px rgba(37,43,56,.35)}
.card-thumb-pending{width:100px;height:100px;border-radius:12px;border:2px dashed var(--brass);background:repeating-linear-gradient(0deg,#7A5632 0 14px,#8A6238 14px 28px);display:grid;place-items:center;color:var(--brass-light)}
.card-thumb-pending svg{width:26px;height:26px}
.card p{color:var(--ink-soft);font-size:.95rem}

/* Personalization */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.tag-list{list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:8px}
.tag-list li{background:var(--white-warm);border:1px solid #DDD3BC;border-left:4px solid var(--brass);border-radius:8px;padding:14px 18px;font-size:.95rem}
.tag-list li strong{color:var(--navy)}

/* Pricing */
.price-groups{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:48px}
.price-panel{background:var(--white-warm);border:1px solid #DDD3BC;border-radius:var(--radius);padding:28px;box-shadow:0 8px 24px -16px rgba(37,43,56,.2)}
.price-panel h3{padding-bottom:14px;border-bottom:2px solid var(--paper);margin-bottom:6px;display:flex;align-items:center;gap:10px}
.price-panel h3::before{content:"★";color:var(--brass);font-size:.85rem}
.price-panel ul{list-style:none}
.price-panel li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px dashed #E2D8C2;font-size:.95rem}
.price-panel li:last-child{border-bottom:none}
.price-panel li b{color:var(--navy);font-weight:700;white-space:nowrap}
.price-note{margin-top:26px;font-size:.9rem;color:var(--ink-soft);background:var(--paper);border-left:4px solid var(--brass);padding:14px 18px;border-radius:6px}

/* Craftsmanship */
.dark{background:linear-gradient(160deg,var(--navy),var(--navy-deep));color:#C5CEDD}
.dark h2{color:var(--white-warm)}
.dark .eyebrow{color:var(--brass-light)}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:48px}
.feature{border:1px solid var(--navy-line);border-radius:var(--radius);padding:28px 24px;background:rgba(255,255,255,.025)}
.feature-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:10px;border:1px solid rgba(192,145,63,.5);background:rgba(192,145,63,.08);color:var(--brass-light);margin-bottom:16px}
.feature-icon svg{width:26px;height:26px}
.feature h3{color:var(--brass-light);margin-bottom:10px;font-size:1.08rem}
.feature p{font-size:.92rem;color:#AEB9C9}


/* Gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:150px;gap:16px;margin-top:48px}
.g-item{border-radius:25px;position:relative;overflow:hidden;background:repeating-linear-gradient(0deg,#7A5632 0 22px,#8A6238 22px 44px)}
.g-item:nth-child(2n){background:linear-gradient(150deg,#1B2C4C,#0F1A2E)}
.g-item:nth-child(3n){background:linear-gradient(150deg,#8B3730,#5F2622)}
.g-item::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(13,21,36,.65),transparent 55%)}
.g-tall{grid-row:span 2}
.g-tag{position:absolute;left:14px;bottom:12px;z-index:1;color:var(--white-warm);font-family:var(--stencil);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;background:rgba(13,21,36,.7);border:1px solid rgba(192,145,63,.6);padding:6px 11px;border-radius:4px}

/* Process */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:48px;counter-reset:step}
.step{background:var(--white-warm);border:1px solid #DDD3BC;border-radius:var(--radius);padding:26px 22px;position:relative;counter-increment:step}
.step:not(:last-child)::after{content:"➜";position:absolute;top:50%;right:-21px;transform:translateY(-50%);color:var(--brass);font-size:1.05rem;line-height:1;z-index:2}
.step::before{content:"Step " counter(step);font-family:var(--stencil);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--red);display:block;margin-bottom:12px}
.step h3{font-size:1.02rem;margin-bottom:8px}
.step p{font-size:.88rem;color:var(--ink-soft)}

/* FAQ */
.faq{max-width:760px;margin:48px auto 0;text-align:left}
.faq details{background:var(--white-warm);border:1px solid #DDD3BC;border-radius:8px;margin-bottom:12px;overflow:hidden}
.faq summary{cursor:pointer;padding:18px 22px;font-weight:700;color:var(--navy);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--brass);font-size:1.3rem;font-weight:400;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:focus-visible{outline:3px solid var(--brass);outline-offset:-3px}
.faq .faq-body{padding:0 22px 20px;color:var(--ink-soft);font-size:.95rem}

/* Testimonials */
.quote{max-width:720px;margin:48px auto 0;background:var(--white-warm);border:1px solid #DDD3BC;border-radius:var(--radius);padding:40px 44px;position:relative;box-shadow:0 8px 24px -16px rgba(37,43,56,.2)}
.quote::before{content:"“";position:absolute;top:-6px;left:22px;font-family:var(--display);font-size:5rem;color:var(--brass);opacity:.5;line-height:1}
.quote p{font-size:1.12rem;color:var(--ink)}
.quote cite{display:block;margin-top:18px;font-style:normal;font-weight:700;color:var(--navy)}
.quote cite small{display:block;font-weight:500;color:var(--ink-soft);font-size:.85rem}
.quote-type{display:inline-block;font-family:var(--stencil);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--red);border:1px solid var(--brass);border-radius:4px;padding:5px 11px;margin-bottom:16px}

/* Events */
.events{background:var(--paper)}
.events-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:center}

.insta-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.insta-tile video{
    width:100%;
    height:450px;
    object-fit:cover;
    border-radius:16px;
    display:block;
}

/* Final CTA */
.final-cta{background:linear-gradient(160deg,var(--navy),var(--navy-deep));color:var(--white-warm);text-align:center;padding:110px 0}
.final-cta h2{color:var(--white-warm);font-size:clamp(2rem,4vw,3rem)}
.final-cta p{color:#C5CEDD;max-width:620px;margin:20px auto 0}
.final-cta .btn-row{justify-content:center}

/* Footer */
footer{background:var(--navy-deep);color:#9AA6B8;padding:64px 0 36px;border-top:3px solid var(--brass)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px}
footer h3{color:var(--white-warm);font-size:1rem;margin-bottom:16px}
footer ul{list-style:none}
footer li{margin-bottom:10px;font-size:.92rem}
footer a{color:#9AA6B8;text-decoration:none}
footer a:hover,footer a:focus-visible{color:var(--brass-light);text-decoration:underline}
.footer-line{margin-top:52px;padding-top:24px;border-top:1px solid var(--navy-line);text-align:center;font-family:var(--stencil);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brass-light)}

/* Testimonial slider */
.t-slider{max-width:780px;margin:48px auto 0}
.t-viewport{overflow:hidden;padding:14px 6px}
.t-track{display:flex;gap:24px;transition:transform .45s ease}
.t-track .quote{flex:0 0 100%;max-width:none;margin:0}
.t-controls{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:26px}
.t-btn{width:44px;height:44px;border-radius:50%;border:2px solid var(--brass);background:none;color:var(--wood);font-size:1.15rem;cursor:pointer;display:grid;place-items:center;transition:background .15s,color .15s}
.t-btn:hover{background:var(--brass);color:var(--white-warm)}
.t-btn:focus-visible{outline:3px solid var(--brass);outline-offset:3px}
.t-btn[disabled]{opacity:.35;cursor:default}
.t-btn[disabled]:hover{background:none;color:var(--wood)}
.t-dots{display:flex;gap:10px}
.t-dots button{width:11px;height:11px;border-radius:50%;border:none;background:#CBBF9F;cursor:pointer;padding:0}
.t-dots button[aria-current="true"]{background:var(--red)}
.t-dots button:focus-visible{outline:3px solid var(--brass);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.t-track{transition:none}}

/* Instagram section */
.insta-handle{display:inline-flex;align-items:center;gap:10px;margin-top:18px;font-weight:700;color:var(--wood);text-decoration:none;font-size:1rem}
.insta-handle svg{width:22px;height:22px;color:var(--red)}
.insta-handle:hover,.insta-handle:focus-visible{color:var(--red);text-decoration:underline}


.insta-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.insta-tile video{
    width:100%;
    height:450px;
    object-fit:cover;
    border-radius:16px;
    display:block;
}
@media (prefers-reduced-motion:reduce){.insta-tile img{transition:none}.insta-tile:hover img{transform:none}}

/* Footer social icons */
.social-icons{display:flex;gap:14px}
.social-icons a{width:44px;height:44px;border-radius:50%;border:1px solid var(--navy-line);display:grid;place-items:center;color:#9AA6B8;transition:border-color .15s,color .15s}
.social-icons a:hover,.social-icons a:focus-visible{color:var(--brass-light);border-color:var(--brass)}
.social-icons svg{width:20px;height:20px}

.footer-logo{
    display:inline-block;
    margin-bottom:18px;
}

.footer-logo img{
    width:100px;      /* Adjust as needed */
    height:auto;
    display:block;
}

.footer-grid h3{
    margin-bottom:16px;
}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.btn{transition:none}.card{transition:none}}

/* Responsive */
@media (max-width:1020px){
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .nav-links,.nav-phone,.nav .btn{display:none}
  .nav-toggle{display:block}
  .nav.open .nav-links{display:flex;flex-direction:column;position:absolute;top:74px;left:0;right:0;background:var(--navy-deep);padding:22px 24px;gap:16px;border-bottom:1px solid var(--navy-line)}
}
@media (max-width:820px){
  section{padding:64px 0}
  .hero{padding:60px 30px;background: url(../images/home-banner.png) 50% center / cover no-repeat;}
  
  .hero-grid,.split,.events-inner{grid-template-columns:1fr;gap:44px}
  .price-groups{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr;gap:36px}
}
@media (max-width:560px){
  .card-grid,.feature-grid,.steps,.gallery-grid{grid-template-columns:1fr}
  .g-tall{grid-row:span 1}
  .quote{padding:32px 26px}
}
/* Tablet */
@media (max-width: 992px){
    .insta-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .insta-tile video{
        height:380px;
    }
}

/* Mobile */
@media (max-width: 768px){
    .insta-grid{
        grid-template-columns:1fr;
        gap:16px;
    }

    .insta-tile video{
        height:420px;
        border-radius:12px;
    }

    .insta-handle{
        font-size:14px;
        justify-content:center;
        flex-wrap:wrap;
    }
}

/* Small Mobile */
@media (max-width: 480px){
    .insta-tile video{
        height:350px;
    }

}
@media (max-width: 768px) {
    .step:not(:last-child)::after {
        top: auto;
        right: 50%;
        bottom: -28px;       
        transform: translateX(50%) rotate(90deg); 
        font-size: 1.2rem;
    }

    .step {
        margin-bottom: 20px; 
    }
   
}
.g-item{
    position: relative;
    overflow: hidden;
}

.g-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width:768px){

    .gallery-grid{
        grid-template-columns:1fr;
        grid-auto-rows:220px;
    }

    .g-item.g-tall{
        grid-row:span 1;
        height:220px;
    }

    /*  images */
    .g-item img{
        width:100%;
        height:100%;
        object-fit:cover;
    }

    /*  first image */
    .gallery-grid > .g-item:first-child img{
        object-position:50%;
    }

}