/* Shared look for every inner page (blog, services, help, contact, examples, legal, 404).
   Loaded after each page's own styles so the sticky bar, glowing header, dark footer and phone bar match the home page. */
:root{
  --leather:#2c1e18; --leather-2:#1d1410; --cream:#f3e6d6; --copper:#d68a5e; --copper-deep:#a85f37;
  --paper:#faf6f1; --card:#ffffff; --ink:#231a15; --muted:#6f6158; --line:#e8ddd2; --chip:#f4e7dc;
  --shadow:0 1px 2px rgba(35,26,21,.06),0 8px 24px rgba(35,26,21,.07);
  --shadow-lg:0 2px 4px rgba(35,26,21,.06),0 18px 44px rgba(35,26,21,.14);
}

/* Menu bar: sticks to the top on bigger screens */
.bar.gutter{background:#1d1410;color:var(--cream);position:relative;z-index:20;border-bottom:1px solid rgba(243,230,214,.08)}
@supports (backdrop-filter:blur(8px)){.bar.gutter{background:rgba(29,20,16,.9);backdrop-filter:blur(12px) saturate(1.2)}}
@media (min-width:760px){.bar.gutter{position:sticky;top:0}}
.bar.gutter .inner{max-width:1080px;margin:0 auto}
.bar.gutter nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.bar.gutter .brand{display:flex;align-items:center;gap:10px;color:var(--cream);text-decoration:none;font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-weight:800;font-size:20px;white-space:nowrap}
.bar.gutter .navlinks{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.bar.gutter .navlinks a{color:var(--cream);opacity:.85;text-decoration:none;font-size:15px;font-weight:500}
.bar.gutter .navlinks a:hover{opacity:1;color:var(--copper)}
.bar.gutter .navlinks a.blogtab{opacity:1;color:var(--leather-2);background:var(--copper);border:1.5px solid var(--copper);border-radius:999px;padding:4px 14px;font-weight:600}
.bar.gutter .navlinks a.blogtab:hover{color:var(--leather-2);background:#e39b70}
.bar.gutter .navlinks a.abouttab{opacity:1;color:var(--cream);border:1.5px solid var(--copper);border-radius:999px;padding:4px 13px;font-weight:600}
.bar.gutter .navlinks a.abouttab:hover{color:var(--leather-2);background:var(--copper)}
.bar.gutter .navlinks a[aria-current="page"].abouttab,.bar.gutter .navlinks a[aria-current="page"].blogtab{color:var(--leather-2);background:var(--copper)}
@media (max-width:700px){.bar.gutter .navlinks a.hide-m{display:none}.bar.gutter .navlinks{gap:10px}}
@media (max-width:480px){.bar.gutter nav{flex-wrap:wrap;row-gap:12px;gap:8px}.bar.gutter .brand{font-size:17px;gap:7px}.bar.gutter .brand img{width:40px;height:40px}.bar.gutter .navlinks{width:100%;flex-wrap:nowrap;gap:8px}.bar.gutter .navlinks a.blogtab,.bar.gutter .navlinks a.abouttab{flex:1;text-align:center;font-size:14.5px;padding:7px 10px;white-space:nowrap}}
.bar.gutter nav{max-width:none;padding-block:12px}
.bar.gutter .brand img{width:46px;height:46px}
.bar.gutter .navlinks a[aria-current="page"]{opacity:1;color:var(--copper)}
[id]{scroll-margin-top:84px}
@media (max-width:700px){[id]{scroll-margin-top:16px}}

/* Page header: the home page's glow, faint grid and film grain */
.top{position:relative;overflow:hidden;background:radial-gradient(70% 90% at 85% 10%,rgba(214,138,94,.28) 0%,rgba(214,138,94,0) 60%),radial-gradient(60% 70% at 0% 100%,rgba(168,95,55,.22) 0%,rgba(168,95,55,0) 60%),linear-gradient(160deg,#3b2920 0%,var(--leather) 45%,var(--leather-2) 100%)}
.top::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(243,230,214,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(243,230,214,.045) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(80% 70% at 70% 30%,#000 0%,transparent 75%);mask-image:radial-gradient(80% 70% at 70% 30%,#000 0%,transparent 75%);pointer-events:none}
.top::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.top > *{position:relative;z-index:1}
.top > .glow{position:absolute;z-index:0;border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none;animation:drift 18s ease-in-out infinite alternate}
.glow.g1{width:420px;height:420px;background:#c56d3d;top:-160px;right:6%}
.glow.g2{width:340px;height:340px;background:#7a3f22;bottom:-180px;left:-90px;animation-duration:22s}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(-60px,40px) scale(1.15)}}
.top .hero,.top .intro{padding-block:36px 64px}
.top h1{font-size:clamp(34px,5.6vw,54px);letter-spacing:-.02em}
/* the whip-crack swoosh from the logo, under every page title */
.top h1::after{content:"";display:block;width:150px;height:16px;margin-top:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 18'%3E%3Cpath d='M3 13 C 40 5, 90 3, 128 7 S 152 9, 156 4' fill='none' stroke='%23d68a5e' stroke-width='4' stroke-linecap='round'/%3E%3Ccircle cx='156' cy='4' r='3' fill='%23f6cfae'/%3E%3C/svg%3E") left center/contain no-repeat}

/* Reading pages: a bit more depth */
article h2:not(.cta h2){position:relative;padding-left:18px}
article h2:not(.cta h2)::before{content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:5px;border-radius:3px;background:linear-gradient(180deg,#e7a479,var(--copper-deep))}
.callout{box-shadow:var(--shadow)}
.post{box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.post:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
article .cta{position:relative;overflow:hidden;background:radial-gradient(70% 100% at 100% 0%,rgba(214,138,94,.3) 0%,rgba(214,138,94,0) 60%),linear-gradient(160deg,#3b2920,var(--leather-2));box-shadow:var(--shadow-lg)}

/* Light sweep on the main copper buttons */
.cta a.btn,a.btn.solid,.btn.solid{position:relative;overflow:hidden;transition:transform .15s ease,background .15s ease,box-shadow .15s ease}
.cta a.btn:hover,a.btn.solid:hover{transform:translateY(-2px)}
.cta a.btn::after,a.btn.solid::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);transition:left .6s ease}
.cta a.btn:hover::after,a.btn.solid:hover::after{left:130%}

/* Dark footer with columns (same as the home page) */
footer.site-foot{position:relative;padding-block:64px 28px;border-top:0;background:radial-gradient(60% 80% at 0% 0%,rgba(214,138,94,.16) 0%,rgba(214,138,94,0) 60%),var(--leather-2);color:#cdb8a5;font-size:15px;margin-top:56px}
.site-foot .inner{max-width:1080px;margin:0 auto;display:block}
.foot-grid{display:grid!important;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px}
.foot-brand{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.foot-brand p{margin:0;max-width:26em;line-height:1.6}
.site-foot .brand{display:flex;align-items:center;gap:10px;color:var(--cream);text-decoration:none;font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-weight:800;font-size:20px}
.site-foot .brand img{width:46px;height:46px}
.site-foot .btn.solid{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;border-radius:10px;padding:12px 20px;font-size:16px;background:var(--copper);color:var(--leather-2);box-shadow:0 8px 24px rgba(214,138,94,.28)}
.foot-col{display:flex;flex-direction:column;gap:9px;min-width:0}
.foot-col h3{margin:0 0 4px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--copper);font-family:inherit}
.foot-col a{color:#e3d3c2;text-decoration:none;overflow-wrap:anywhere}
.foot-col a:hover{color:var(--copper)}
.site-foot .find-us{margin:6px 0 0;font-size:14px}
.site-foot .find-us a{display:inline;color:#e3d3c2;text-decoration:underline;text-underline-offset:2px}
.foot-legal{display:flex!important;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;margin-top:44px!important;padding-top:22px;border-top:1px solid rgba(243,230,214,.12);font-size:13.5px}
.foot-legal a{color:inherit}
.site-foot .not-affiliated{flex-basis:100%;margin:6px 0 0;font-size:12.5px;line-height:1.5;opacity:.8}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
@media (max-width:480px){.foot-grid{grid-template-columns:1fr}}

/* Phone-only bar with the two main actions; leaves room for the chat bubble on the right */
.mbar{display:none}
@media (max-width:700px){
  .mbar{display:flex;visibility:hidden;gap:8px;position:fixed;left:0;bottom:0;z-index:30;width:calc(100% - 84px);padding:10px 0 calc(10px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));transform:translateY(130%);transition:transform .35s cubic-bezier(.2,.8,.2,1),visibility .35s}
  .mbar.show{transform:none;visibility:visible}
  .mbar a{flex:1;display:flex;justify-content:center;align-items:center;font-weight:600;text-decoration:none;padding:12px 10px;font-size:15px;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.3)}
  .mbar .solid{background:var(--copper);color:var(--leather-2)}
  .mbar .line{background:rgba(29,20,16,.92);color:var(--cream);border:1.5px solid rgba(243,230,214,.4)}
  footer.site-foot{padding-bottom:96px}
}

/* Thin progress line at the very top while scrolling (js/home.js) */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;background:linear-gradient(90deg,var(--copper-deep),var(--copper),#f0b892);transform-origin:left;transform:scaleX(var(--p,0));z-index:50;pointer-events:none}

:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
@media print{.top p,.top .eyebrow,.top .meta,article .cta,article .cta *{color:var(--ink)!important;background:none!important}.progress,.glow,.mbar,.bar.gutter{display:none}.top{background:none;color:var(--ink)}.top::before,.top::after{display:none}footer.site-foot{background:none;color:#333}.site-foot .brand,.foot-col a,.site-foot .find-us a{color:#333}}
@media (prefers-reduced-motion:reduce){.top > .glow{animation:none}.post,.cta a.btn,a.btn.solid{transition:none}.post:hover,.cta a.btn:hover{transform:none}.cta a.btn::after,a.btn.solid::after{display:none}.mbar{transition:none}}

/* Blog list: wide cards with a cover on the left (stacks on phones) */
.list{max-width:1000px;display:flex;flex-direction:column;gap:22px}
.list .post{display:grid;grid-template-columns:260px minmax(0,1fr);column-gap:0;padding:0;overflow:hidden;border-radius:18px}
.list .post::before{content:"Article";grid-row:1 / span 4;display:flex;align-items:flex-end;min-height:190px;padding:16px 22px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cream);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 18'%3E%3Cpath d='M3 13 C 40 5, 90 3, 128 7 S 152 9, 156 4' fill='none' stroke='%23d68a5e' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='156' cy='4' r='3' fill='%23f6cfae'/%3E%3C/svg%3E") left 22px top 26px/150px auto no-repeat,radial-gradient(rgba(243,230,214,.10) 1px,transparent 1px) 0 0/14px 14px,radial-gradient(120% 90% at 100% 0%,rgba(214,138,94,.35),transparent 60%),linear-gradient(160deg,#3b2920,var(--leather-2))}
.list .post > *{grid-column:2;margin-inline:26px}
.list .post .meta{margin-top:24px}
.list .post h2{margin:4px 26px 6px}
.list .post p{margin-bottom:4px}
.list .post::after{content:"Read article \2192";grid-column:2;margin:8px 26px 24px;font-weight:600;font-size:15px;color:var(--copper-deep)}
@media (max-width:640px){.list .post{grid-template-columns:1fr}.list .post::before{grid-row:auto;min-height:120px}.list .post > *,.list .post::after{grid-column:1}}
.blog-cta{max-width:1000px;margin:0 auto 64px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;border-radius:22px;padding:30px 32px;color:var(--cream);background:radial-gradient(70% 100% at 100% 0%,rgba(214,138,94,.3) 0%,rgba(214,138,94,0) 60%),linear-gradient(160deg,#3b2920,var(--leather-2));box-shadow:var(--shadow-lg)}
.blog-cta h2{color:var(--cream);font-size:clamp(22px,3vw,28px);margin:6px 0}
.blog-cta p{margin:0;color:#d6c3b1}
.blog-cta .eyebrow{color:var(--copper)}
.blog-cta .btn.solid{display:inline-flex;align-items:center;font-weight:600;text-decoration:none;border-radius:10px;padding:14px 22px;background:var(--copper);color:var(--leather-2);box-shadow:0 8px 24px rgba(214,138,94,.3)}

/* Blog posts: a stronger opening, quotes that read as quotes, an author box and two clear next steps */
article.post-article > p:first-of-type{font-size:20px;line-height:1.6;color:var(--ink)}
article .callout.cta{display:block}
article a{overflow-wrap:anywhere}
article .callout.quote{position:relative;padding-left:52px;font-size:18px}
article .callout.quote::before{content:"\201C";position:absolute;left:16px;top:6px;font-family:Georgia,serif;font-size:52px;line-height:1;color:var(--copper)}
.author{display:flex;align-items:center;gap:16px;margin-top:44px;padding:18px 20px;border:1px solid var(--line);border-radius:16px;background:var(--card);box-shadow:var(--shadow)}
.author img{width:56px;height:56px;border-radius:14px;background:var(--leather-2);padding:6px;flex:none}
.author b{display:block;font-size:17px}
.author span{display:block;font-size:15px;color:var(--muted);line-height:1.5}
article .cta{margin-top:20px}
article .cta-btns{display:flex;gap:12px;flex-wrap:wrap}
article .cta-btns .btn{align-self:auto}
article .cta a.btn.line{background:transparent;color:var(--cream);border:1.5px solid rgba(243,230,214,.45)}
article .cta a.btn.line:hover{border-color:var(--cream)}
article .cta a.btn.line::after{display:none}