/* =========================================================
   St. Clair Packaging — Digital Growth Wireframe
   Design system: Industrial-engineering editorial
   Built by 'corePHP'
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --navy:#00173c;
  --navy-900:#000d24;
  --navy-800:#02214f;
  --navy-700:#0a3068;
  --orange:#ff5e15;
  --orange-600:#e64f0a;
  --orange-100:#ffe6d8;
  --kraft:#f3ece0;
  --kraft-dk:#e7dcc9;
  --cream:#faf7f1;
  --paper:#ffffff;
  --ink:#0c1626;
  --slate:#46566b;
  --slate-300:#8493a6;
  --line:#e2ddd3;
  --line-dk:rgba(255,255,255,.14);
  --shadow-sm:0 2px 8px rgba(0,23,60,.06);
  --shadow:0 18px 50px -22px rgba(0,23,60,.35);
  --shadow-lg:0 40px 90px -30px rgba(0,23,60,.45);
  --maxw:1200px;
  --r:4px;
  --display:"Saira Condensed",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  font-size:17px;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.wrap-wide{max-width:1340px;margin:0 auto;padding:0 24px}

/* ---------- Type ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.02;letter-spacing:-.01em;color:var(--navy)}
h1{font-size:clamp(2.8rem,6.4vw,5.6rem);font-weight:800;text-transform:uppercase}
h2{font-size:clamp(2.1rem,4.2vw,3.5rem);font-weight:800;text-transform:uppercase}
h3{font-size:clamp(1.4rem,2.4vw,2rem);font-weight:700}
h4{font-size:1.15rem;font-weight:700}
p{color:var(--slate)}
.lead{font-size:clamp(1.1rem,1.7vw,1.32rem);color:var(--slate);line-height:1.55}

.eyebrow{
  font-family:var(--mono);font-weight:600;font-size:.78rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--orange);display:inline-flex;align-items:center;gap:.6rem;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--orange);display:inline-block}
.eyebrow.light{color:#ff8a52}
.eyebrow.center{justify-content:center}

.section{padding:clamp(64px,9vw,120px) 0}
.section-head{max-width:760px;margin-bottom:54px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head h2{margin:14px 0 18px}

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--mono);font-weight:600;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.6rem;padding:16px 26px;border-radius:var(--r);
  border:2px solid transparent;cursor:pointer;transition:.22s ease;white-space:nowrap;
}
.btn .arr{transition:transform .22s ease}
.btn:hover .arr{transform:translateX(4px)}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 10px 24px -10px rgba(255,94,21,.7)}
.btn-primary:hover{background:var(--orange-600);transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(255,94,21,.8)}
.btn-ghost{border-color:rgba(255,255,255,.32);color:#fff}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-dark{background:var(--navy);color:#fff}
.btn-dark:hover{background:var(--navy-800);transform:translateY(-2px)}
.btn-outline{border-color:var(--navy);color:var(--navy)}
.btn-outline:hover{background:var(--navy);color:#fff}
.btn-lg{padding:19px 34px;font-size:.88rem}

/* ---------- Corrugated motif ---------- */
.flute{
  height:18px;width:100%;
  background:
    repeating-linear-gradient(90deg,
      rgba(255,94,21,.0) 0, rgba(255,94,21,.0) 7px,
      var(--orange) 7px, var(--orange) 9px,
      rgba(255,94,21,.0) 9px, rgba(255,94,21,.0) 16px);
  -webkit-mask:repeating-linear-gradient(90deg,#000 0,#000 9px,transparent 9px,transparent 16px);
  opacity:.0; /* base hidden; used in wave variant below */
}
.flute-band{
  height:14px;
  background-image:radial-gradient(circle at 8px -4px, transparent 9px, var(--orange) 9px, var(--orange) 10px, transparent 11px);
  background-size:16px 16px;background-repeat:repeat-x;background-position:center;
  opacity:.9;
}
.corr-edge{
  height:16px;width:100%;
  background:radial-gradient(circle at 9px 16px, var(--kraft-dk) 8px, transparent 9px) repeat-x;
  background-size:18px 18px;
}

/* ---------- Top utility bar ---------- */
.topbar{
  background:var(--navy-900);color:#cdd7e6;font-family:var(--mono);font-size:.74rem;
  letter-spacing:.08em;text-transform:uppercase;
}
.topbar .wrap-wide{display:flex;justify-content:space-between;align-items:center;height:38px}
.topbar a{color:#cdd7e6;transition:color .2s}
.topbar a:hover{color:#fff}
.topbar .tb-right{display:flex;gap:22px;align-items:center}
.topbar .dot{color:var(--orange)}
@media(max-width:760px){.topbar .tb-left{display:none}.topbar .wrap-wide{justify-content:center}}

/* ---------- Header ---------- */
.header{
  position:sticky;top:0;z-index:90;background:#fff;
  box-shadow:0 1px 0 var(--line);transition:box-shadow .25s ease,background .25s ease;
}
.header.scrolled{box-shadow:0 6px 22px -12px rgba(0,23,60,.28)}
.header .wrap-wide{display:flex;align-items:center;justify-content:space-between;height:90px;transition:height .25s ease}
.header.scrolled .wrap-wide{height:72px}
.brand{display:flex;align-items:center;gap:14px}
.brand img{height:54px;width:auto;transition:height .25s ease}
.header.scrolled .brand img{height:44px}
.nav{display:flex;align-items:center;gap:6px}
.nav a.navlink{
  font-family:var(--mono);font-size:.8rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:var(--navy);padding:10px 14px;border-radius:var(--r);transition:.2s;position:relative;
}
.nav a.navlink:hover{color:var(--orange)}
.nav a.navlink.active{color:var(--orange)}
.nav a.navlink.active::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;background:var(--orange)}
.header-cta{display:flex;align-items:center;gap:14px;margin-left:10px}
.header-phone{display:flex;flex-direction:column;line-height:1.05;text-align:right}
.header-phone .lbl{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;color:var(--slate);text-transform:uppercase}
.header-phone .num{font-family:var(--display);font-weight:700;font-size:1.18rem;color:var(--navy)}
.header-phone .num:hover{color:var(--orange)}
.burger{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:8px}
.burger span{width:26px;height:2px;background:var(--navy);transition:.25s}
@media(max-width:1040px){
  .nav,.header-phone{display:none}
  .burger{display:flex}
}

/* mobile drawer */
.drawer{position:fixed;inset:0 0 0 auto;width:min(86vw,360px);background:var(--navy);z-index:120;
  transform:translateX(100%);transition:transform .32s cubic-bezier(.6,0,.2,1);padding:28px 26px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow-lg)}
.drawer.open{transform:translateX(0)}
.drawer .dr-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.drawer .dr-top img{height:34px;background:#fff;padding:8px 12px;border-radius:6px}
.drawer .x{background:none;border:0;color:#fff;font-size:2rem;cursor:pointer;line-height:1}
.drawer a.drlink{color:#dbe3ef;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;font-size:.92rem;padding:15px 4px;border-bottom:1px solid var(--line-dk)}
.drawer a.drlink:hover{color:var(--orange)}
.drawer .btn{margin-top:22px;justify-content:center}
.scrim{position:fixed;inset:0;background:rgba(0,9,24,.6);z-index:110;opacity:0;visibility:hidden;transition:.3s}
.scrim.show{opacity:1;visibility:visible}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.5}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,var(--navy) 30%,rgba(0,23,60,.82) 55%,rgba(0,23,60,.45) 100%)}
.hero-inner{position:relative;padding:clamp(70px,11vw,140px) 0 clamp(70px,9vw,120px)}
.hero h1{color:#fff;margin:20px 0 22px;max-width:14ch}
.hero h1 .accent{color:var(--orange)}
.hero .lead{color:#c9d3e3;max-width:54ch}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;margin-top:36px}
.hero-stats{display:flex;gap:40px;flex-wrap:wrap;margin-top:54px;padding-top:34px;border-top:1px solid var(--line-dk)}
.hstat .n{font-family:var(--display);font-weight:800;font-size:2.6rem;color:#fff;line-height:1}
.hstat .n span{color:var(--orange)}
.hstat .l{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-300);margin-top:6px}

/* ---------- Trust strip ---------- */
.trust{background:var(--navy-900);border-top:3px solid var(--orange)}
.trust .wrap-wide{display:grid;grid-template-columns:repeat(4,1fr)}
.trust .ti{padding:30px 18px;text-align:center;border-right:1px solid var(--line-dk)}
.trust .ti:last-child{border-right:0}
.trust .ti .ic{color:var(--orange);margin-bottom:10px}
.trust .ti .h{font-family:var(--display);font-weight:700;font-size:1.45rem;color:#fff}
.trust .ti .s{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#92a1b8;margin-top:3px}
@media(max-width:760px){.trust .wrap-wide{grid-template-columns:repeat(2,1fr)}.trust .ti:nth-child(2){border-right:0}.trust .ti:nth-child(1),.trust .ti:nth-child(2){border-bottom:1px solid var(--line-dk)}}

/* ---------- Capabilities grid ---------- */
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.cap-card{background:var(--paper);padding:38px 32px;transition:.25s ease;position:relative;display:flex;flex-direction:column;min-height:280px}
.cap-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.cap-card:hover{background:var(--cream);transform:translateY(-3px)}
.cap-card:hover::before{transform:scaleX(1)}
.cap-card .num{font-family:var(--mono);font-size:.72rem;color:var(--slate-300);letter-spacing:.14em}
.cap-card .ic{color:var(--navy);margin:16px 0 18px;transition:color .25s}
.cap-card:hover .ic{color:var(--orange)}
.cap-card h3{margin-bottom:10px}
.cap-card p{font-size:.96rem;flex:1}
.cap-card .more{font-family:var(--mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);margin-top:18px;display:inline-flex;gap:.5rem;align-items:center}
.cap-card:hover .more{color:var(--orange)}
@media(max-width:900px){.cap-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.cap-grid{grid-template-columns:1fr}}

/* ---------- Split feature ---------- */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(36px,5vw,80px);align-items:center}
.split.rev .split-media{order:2}
.split-media{position:relative}
.split-media img{border-radius:var(--r);box-shadow:var(--shadow);width:100%;object-fit:cover}
.media-frame{position:relative}
.media-frame::before{content:"";position:absolute;inset:18px -18px -18px 18px;border:2px solid var(--orange);border-radius:var(--r);z-index:-1}
.checklist{list-style:none;margin:26px 0 0;display:grid;gap:14px}
.checklist li{display:flex;gap:13px;align-items:flex-start;font-size:1rem;color:var(--ink)}
.checklist li .ck{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;font-size:.8rem;margin-top:2px}
.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--navy);background:var(--kraft);border:1px solid var(--line);padding:7px 12px;border-radius:100px}

/* floating spec card on media */
.spec-card{position:absolute;bottom:-26px;left:-26px;background:var(--navy);color:#fff;padding:22px 26px;border-radius:var(--r);box-shadow:var(--shadow-lg);max-width:230px}
.spec-card .n{font-family:var(--display);font-weight:800;font-size:2.4rem;line-height:1;color:var(--orange)}
.spec-card .l{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#c9d3e3;margin-top:8px}
@media(max-width:820px){.split{grid-template-columns:1fr}.split.rev .split-media{order:0}.media-frame::before{display:none}.spec-card{position:static;margin-top:18px;max-width:none}}

/* ---------- Kraft / dark sections ---------- */
.bg-kraft{background:var(--kraft)}
.bg-cream{background:var(--cream)}
.bg-navy{background:var(--navy);color:#fff}
.bg-navy h2,.bg-navy h3{color:#fff}
.bg-navy p{color:#c4cfdf}

/* ---------- Sustainability ---------- */
.eco-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:46px}
.eco-card{background:rgba(255,255,255,.05);border:1px solid var(--line-dk);border-radius:var(--r);padding:30px 24px;transition:.25s}
.eco-card:hover{background:rgba(255,94,21,.1);border-color:rgba(255,94,21,.5);transform:translateY(-3px)}
.eco-card .step{font-family:var(--mono);color:var(--orange);font-size:.74rem;letter-spacing:.16em}
.eco-card h4{color:#fff;margin:14px 0 8px;font-size:1.25rem;text-transform:uppercase;font-family:var(--display)}
.eco-card p{font-size:.92rem}
@media(max-width:860px){.eco-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.eco-grid{grid-template-columns:1fr}}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(120deg,var(--orange),var(--orange-600));color:#fff;position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;right:-60px;top:-60px;width:340px;height:340px;border:40px solid rgba(255,255,255,.08);border-radius:50%}
.cta-band .wrap{position:relative;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:64px 24px;flex-wrap:wrap}
.cta-band h2{color:#fff;max-width:16ch}
.cta-band p{color:rgba(255,255,255,.92);margin-top:10px;max-width:46ch}
.cta-band .btn-dark{background:#fff;color:var(--navy)}
.cta-band .btn-dark:hover{background:var(--navy-900);color:#fff}

/* ---------- Quote form ---------- */
.quote-wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(36px,5vw,72px);align-items:start}
.quote-form{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:clamp(28px,4vw,44px);box-shadow:var(--shadow)}
.quote-form .fg{margin-bottom:18px}
.quote-form label{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);display:block;margin-bottom:7px;font-weight:600}
.quote-form label .req{color:var(--orange)}
.quote-form input,.quote-form select,.quote-form textarea{
  width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:var(--r);font-family:var(--body);font-size:.98rem;color:var(--ink);background:var(--cream);transition:.2s}
.quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus{outline:none;border-color:var(--orange);background:#fff;box-shadow:0 0 0 3px rgba(255,94,21,.12)}
.quote-form textarea{resize:vertical;min-height:110px}
.fg-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.quote-form .btn{width:100%;justify-content:center;margin-top:8px}
.form-note{font-family:var(--mono);font-size:.68rem;color:var(--slate-300);text-align:center;margin-top:14px;letter-spacing:.04em}
.form-success{display:none;text-align:center;padding:30px 10px}
.form-success.show{display:block}
.form-success .big{width:64px;height:64px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;margin:0 auto 18px;font-size:1.8rem}
.form-success h3{margin-bottom:8px}
@media(max-width:860px){.quote-wrap{grid-template-columns:1fr}.fg-row{grid-template-columns:1fr}}

/* contact info list */
.cinfo{display:grid;gap:22px;margin-top:30px}
.cinfo .ci{display:flex;gap:16px;align-items:flex-start}
.cinfo .ci .ic{flex:0 0 auto;width:46px;height:46px;border-radius:var(--r);background:var(--navy);color:var(--orange);display:grid;place-items:center}
.cinfo .ci .lbl{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-300)}
.cinfo .ci .val{font-family:var(--display);font-weight:700;font-size:1.4rem;color:var(--navy);line-height:1.1}
.cinfo .ci a.val:hover{color:var(--orange)}
.cinfo .ci .sub{font-size:.92rem;color:var(--slate)}
.map-embed{margin-top:30px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm);height:300px;background:var(--kraft)}
.map-embed iframe{width:100%;height:100%;border:0;filter:grayscale(.3) contrast(1.05)}

/* ---------- Page hero (interior) ---------- */
.phero{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.phero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(circle at 90% -10%, rgba(255,94,21,.18), transparent 45%)}
.phero .wrap{position:relative;padding:clamp(70px,9vw,120px) 24px clamp(54px,7vw,90px)}
.phero h1{color:#fff;margin:18px 0 18px;max-width:18ch}
.phero .lead{color:#c4cfdf;max-width:60ch}
.breadcrumb{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-300)}
.breadcrumb a:hover{color:var(--orange)}
.breadcrumb .sep{color:var(--orange);margin:0 8px}

/* ---------- Detailed capability rows ---------- */
.detail-row{padding:clamp(48px,6vw,86px) 0;border-bottom:1px solid var(--line)}
.detail-row:last-child{border-bottom:0}
.mini-icon{width:60px;height:60px;border-radius:var(--r);background:var(--navy);color:var(--orange);display:grid;place-items:center;margin-bottom:20px}

/* spec list */
.speclist{list-style:none;margin:24px 0 0;border-top:1px solid var(--line)}
.speclist li{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.speclist li .k{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.speclist li .v{font-weight:600;color:var(--navy);text-align:right}

/* ---------- About story ---------- */
.story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:50px}
.story-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:32px 28px;border-top:3px solid var(--orange)}
.story-card .yr{font-family:var(--display);font-weight:800;font-size:2.2rem;color:var(--navy)}
.story-card h4{margin:6px 0 8px;text-transform:uppercase;font-family:var(--display)}
.story-card p{font-size:.95rem}
@media(max-width:820px){.story-grid{grid-template-columns:1fr}}

.mission{background:var(--navy);color:#fff;border-radius:var(--r);padding:clamp(36px,5vw,64px);position:relative;overflow:hidden}
.mission::before{content:"\201C";position:absolute;top:-30px;left:24px;font-family:Georgia,serif;font-size:14rem;color:rgba(255,94,21,.16);line-height:1}
.mission .q{font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.2;color:#fff;position:relative;max-width:24ch}
.mission .by{font-family:var(--mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-top:24px}

/* ---------- Footer ---------- */
.footer{background:var(--navy-900);color:#aab6c8;padding-top:64px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:48px;border-bottom:1px solid var(--line-dk)}
.footer img.flogo{height:44px;background:#fff;padding:11px 15px;border-radius:6px;margin-bottom:18px}
.footer p{color:#8e9cb1;font-size:.94rem;max-width:38ch}
.footer h5{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:18px}
.footer ul{list-style:none;display:grid;gap:11px}
.footer ul a{color:#9fadc1;font-size:.95rem;transition:.2s}
.footer ul a:hover{color:var(--orange)}
.footer .fcontact a{color:#fff;font-family:var(--display);font-weight:700;font-size:1.3rem}
.footer .fcontact a:hover{color:var(--orange)}
.footer .fcontact .sub{font-size:.9rem;color:#8e9cb1;margin-top:4px}
.footer-bot{display:flex;justify-content:space-between;align-items:center;padding:24px 0;flex-wrap:wrap;gap:12px}
.footer-bot p{font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;color:#7c8aa3}
.footer-bot .credit{color:#7c8aa3}
.footer-bot .credit b{color:var(--orange);font-weight:600}
@media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}}

/* ---------- Mobile sticky call bar ---------- */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;
  grid-template-columns:1fr 1fr;background:var(--navy);border-top:2px solid var(--orange);box-shadow:0 -8px 24px rgba(0,9,24,.3)}
.callbar a{display:flex;align-items:center;justify-content:center;gap:9px;padding:15px;font-family:var(--mono);
  font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:#fff;font-weight:600}
.callbar a.q{background:var(--orange)}
.callbar a.c{border-right:1px solid var(--line-dk)}
@media(max-width:760px){.callbar{display:grid}body{padding-bottom:54px}}

/* ---------- Reveal animations ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
.reveal.d4{transition-delay:.32s}.reveal.d5{transition-delay:.4s}.reveal.d6{transition-delay:.48s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* hero load anim */
.hero-anim{opacity:0;transform:translateY(20px);animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards}
.hero-anim.a1{animation-delay:.05s}.hero-anim.a2{animation-delay:.18s}.hero-anim.a3{animation-delay:.31s}
.hero-anim.a4{animation-delay:.44s}.hero-anim.a5{animation-delay:.57s}
@keyframes rise{to{opacity:1;transform:none}}

/* demo ribbon */
.demo-ribbon{background:repeating-linear-gradient(45deg,#0c1626,#0c1626 12px,#13233b 12px,#13233b 24px);
  color:#fff;text-align:center;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;padding:8px 12px}
.demo-ribbon b{color:var(--orange)}