:root{--ink:#171614;--muted:#6d665d;--paper:#fbfaf7;--warm:#efe8dc;--gold:#b68b45;--line:#ded6ca;--dark:#23201c;--can:#c7252e;--usa:#1f4f8f}*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--ink);background:var(--paper);line-height:1.55}.topbar{background:var(--dark);color:#fff;padding:9px 5vw;font-size:15px;display:flex;gap:22px;justify-content:center;flex-wrap:wrap}.topbar a{color:#fff;text-decoration:none;font-weight:800}.header{position:sticky;top:0;background:rgba(251,250,247,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);z-index:10}.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 5vw}.brand{font-family:Georgia,'Times New Roman',serif;font-size:52px;font-weight:900;letter-spacing:-.045em;text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:12px;line-height:.9}.brand-text{display:inline-block}.brand span span,.brand-text span{color:var(--gold)}.brand-icon{width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1d1a16,#b68b45);color:#fff;font-size:24px;box-shadow:0 10px 25px rgba(0,0,0,.18)}.brand-mark{font-size:31px;filter:drop-shadow(0 5px 10px rgba(0,0,0,.16))}.menu{display:flex;gap:24px;align-items:center}.menu a{text-decoration:none;color:var(--ink);font-weight:750}.btn{display:inline-block;padding:13px 20px;border-radius:999px;text-decoration:none;font-weight:850;border:1px solid var(--ink);color:var(--ink)}.btn.dark{background:var(--ink);color:#fff}.btn.gold{background:var(--gold);border-color:var(--gold);color:#fff}.hero{padding:72px 5vw 46px;display:grid;grid-template-columns:1.05fr .95fr;gap:42px;align-items:center}.eyebrow{color:var(--gold);font-weight:900;letter-spacing:.14em;text-transform:uppercase;font-size:13px}h1{font-size:clamp(40px,6vw,76px);line-height:.98;margin:12px 0 22px;letter-spacing:-.055em}.lead{font-size:20px;color:var(--muted);max-width:720px}.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}.hero-art{min-height:430px;border-radius:34px;background:linear-gradient(135deg,#e9dfd0,#fff 45%,#d9c6a2);position:relative;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.13)}.frame{position:absolute;background:#fff;border:18px solid #151515;box-shadow:0 16px 40px rgba(0,0,0,.23)}.f1{width:45%;height:62%;left:11%;top:17%;background:linear-gradient(135deg,#7a4b28,#f2c489)}.f2{width:34%;height:42%;right:10%;top:15%;border-color:#b88d50;background:linear-gradient(135deg,#1f4f8f,#f7f4ef)}.f3{width:30%;height:28%;right:20%;bottom:11%;border-color:#f8f8f8;background:linear-gradient(135deg,#c7252e,#f7d6d2)}.section{padding:56px 5vw}.section-title{font-size:38px;line-height:1.05;margin:0 0 14px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.card{background:#fff;border:1px solid var(--line);border-radius:26px;padding:28px;box-shadow:0 14px 35px rgba(0,0,0,.055)}.card h3{margin-top:0;font-size:24px}.card p{color:var(--muted)}.market-wrap{display:grid;grid-template-columns:1fr 1fr;gap:24px}.market{border-radius:30px;padding:34px;background:#fff;border:1px solid var(--line);position:relative;overflow:hidden}.market.canada{border-top:6px solid var(--can)}.market.usa{border-top:6px solid var(--usa)}.market h2{font-size:34px;margin:0 0 10px}.market ul{padding-left:20px}.market .flag{font-size:42px}.strip{background:var(--warm);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:28px 5vw;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:center}.strip strong{display:block;font-size:24px}.products{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.product{min-height:170px;border-radius:24px;padding:22px;background:linear-gradient(135deg,#fff,#efe8dc);border:1px solid var(--line);display:flex;align-items:end;font-weight:900;font-size:20px}.info-box{background:#fff;border:1px solid var(--line);border-radius:28px;padding:34px;max-width:780px}.footer{background:#181714;color:#fff;padding:36px 5vw;margin-top:40px}.footer a{color:#fff}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}.mobile-only{display:none}@media(max-width:900px){.hero,.grid,.market-wrap,.products,.strip,.footer-grid{grid-template-columns:1fr}.menu{display:none}.mobile-only{display:block}.hero{padding-top:42px}.hero-art{min-height:330px}.topbar{font-size:14px}.section-title{font-size:31px}} 

@media(max-width:900px){.brand{font-size:34px}.brand-icon{width:34px;height:34px;font-size:19px}.brand-mark{display:none}.nav{padding:15px 5vw}}


/* Art supply tabs */
.tabs{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 18px}
.tab{border:1px solid #d8d0c5;background:#fff;padding:12px 16px;border-radius:999px;font-weight:800;cursor:pointer;color:#1e1e1e}
.tab.active,.tab:hover{background:#111;color:#fff;border-color:#111}
.tab-panels{background:#fff;border:1px solid #e4ddd3;border-radius:24px;padding:28px;box-shadow:0 18px 45px rgba(0,0,0,.07)}
.tab-panel{display:none}
.tab-panel.active{display:block}
.tab-panel h2{margin-top:0;font-size:28px}


/* Artistic brand and product icons */
.card h3::before,.product::before,.tab::before{display:inline-block;margin-right:9px;font-weight:400}
.card:nth-child(1) h3::before{content:"🖼️"}.card:nth-child(2) h3::before{content:"🎨"}.card:nth-child(3) h3::before{content:"✂️"}
.product:nth-child(1)::before{content:"🖼️"}.product:nth-child(2)::before{content:"🎨"}.product:nth-child(3)::before{content:"🪵"}.product:nth-child(4)::before{content:"📌"}.product:nth-child(5)::before{content:"✨"}.product:nth-child(6)::before{content:"🔲"}.product:nth-child(7)::before{content:"📷"}.product:nth-child(8)::before{content:"🛒"}
.tab:nth-child(1)::before{content:"🖌️"}.tab:nth-child(2)::before{content:"🧰"}.tab:nth-child(3)::before{content:"📐"}.tab:nth-child(4)::before{content:"🧱"}.tab:nth-child(5)::before{content:"🪚"}.tab:nth-child(6)::before{content:"🖼️"}.tab:nth-child(7)::before{content:"✨"}.tab:nth-child(8)::before{content:"📦"}
.hero-art::before{content:"✦ Fine Art Studio";position:absolute;left:26px;bottom:22px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);border-radius:999px;padding:10px 16px;font-weight:900;color:#2a251f;backdrop-filter:blur(8px)}

/* v6: SVG artistic branding + simple homepage motion */
.brand-svg{width:64px;height:64px;flex:0 0 64px;filter:drop-shadow(0 12px 22px rgba(0,0,0,.18))}
.brand{font-size:58px;gap:14px}.brand-text{transform:translateY(2px)}
.animated-studio{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#efe8dc,#fff 45%,#d9c6a2);isolation:isolate}
.animated-studio img{width:92%;height:92%;object-fit:contain;border-radius:28px;filter:drop-shadow(0 22px 30px rgba(0,0,0,.14));animation:floatArt 7s ease-in-out infinite}
.paint-dot{position:absolute;width:18px;height:18px;border-radius:50%;background:#b68b45;box-shadow:0 0 0 10px rgba(182,139,69,.12);animation:driftDot 6s ease-in-out infinite;z-index:2}.dot-one{left:12%;top:18%}.dot-two{right:13%;top:22%;background:#c7252e;animation-delay:1.2s}.dot-three{right:28%;bottom:16%;background:#1f4f8f;animation-delay:2.1s}
.animated-studio::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.42) 42%,transparent 68%);transform:translateX(-120%);animation:softShine 8s ease-in-out infinite;z-index:1}
@keyframes floatArt{0%,100%{transform:translateY(0) rotate(-.4deg)}50%{transform:translateY(-12px) rotate(.35deg)}}
@keyframes driftDot{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(14px,-16px) scale(1.18)}}
@keyframes softShine{0%,35%{transform:translateX(-120%)}65%,100%{transform:translateX(120%)}}
@media(max-width:900px){.brand{font-size:38px}.brand-svg{width:48px;height:48px;flex-basis:48px}.animated-studio img{width:96%;height:88%}}
@media(prefers-reduced-motion:reduce){.animated-studio img,.paint-dot,.animated-studio::after{animation:none}}


/* v7: softer dreamy homepage + Canada/USA artistic page colors */
.hero-actions{display:none!important}
.hero .lead{max-width:760px}
.animated-studio.nature-dream{background:linear-gradient(135deg,#fff7ed,#f8e2df 48%,#d7e7f2)}
.animated-studio img[src*="dreamy-canadian-nature"]{animation:dreamFloat 9s ease-in-out infinite;width:95%;height:94%}
.animated-studio .sun{animation:pulseSun 7s ease-in-out infinite}
@keyframes dreamFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.018)}}
.bird1{animation:flyBird 9s ease-in-out infinite;transform-origin:center}.bird2{animation:flyBirdSmall 11s ease-in-out infinite;transform-origin:center}
@keyframes flyBird{0%{transform:translate(170px,142px)}50%{transform:translate(260px,112px)}100%{transform:translate(170px,142px)}}
@keyframes flyBirdSmall{0%{transform:translate(555px,170px)}50%{transform:translate(625px,150px)}100%{transform:translate(555px,170px)}}
@keyframes pulseSun{0%,100%{opacity:.78}50%{opacity:1}}
.canada-page{--can:#b94045;background:linear-gradient(180deg,#fff8f5 0%,#fbfaf7 45%)}
.canada-page .market.canada{background:linear-gradient(135deg,#fff,#fff4f1);border-top-color:#b94045;box-shadow:0 20px 55px rgba(185,64,69,.12)}
.canada-page .btn.dark{background:#8f2f36;border-color:#8f2f36}.canada-page .section-title{color:#8f2f36}
.canada-page .card{background:linear-gradient(135deg,#fff,#fff3ef)}
.usa-page{--usa:#315f9f;background:linear-gradient(180deg,#f5f9ff 0%,#fbfaf7 48%)}
.usa-page .market.usa{background:linear-gradient(135deg,#fff,#f0f6ff);border-top-color:#315f9f;box-shadow:0 20px 55px rgba(49,95,159,.12)}
.usa-page .btn.dark{background:#274d82;border-color:#274d82}.usa-page .section-title{color:#274d82}
.usa-page .card{background:linear-gradient(135deg,#fff,#eef6ff)}
@media(prefers-reduced-motion:reduce){.bird1,.bird2,.animated-studio img[src*="dreamy-canadian-nature"],.sun{animation:none!important}}


/* v8 refinements */
.classic-frame-wrap{
  position:relative;
  padding:18px;
  border-radius:28px;
  background:linear-gradient(135deg,#6b4423,#c79a56 35%,#7a4a25 65%,#e2bd7b);
  box-shadow:0 24px 70px rgba(64,42,22,.22), inset 0 0 0 2px rgba(255,245,215,.55), inset 0 0 0 9px rgba(74,43,19,.26);
}
.classic-frame-wrap:before{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:22px;
  border:2px solid rgba(255,242,205,.65);
  pointer-events:none;
  z-index:2;
}
.classic-frame-wrap:after{
  content:"";
  position:absolute;
  inset:18px;
  border-radius:18px;
  box-shadow:inset 0 0 0 8px rgba(255,255,255,.65), inset 0 0 24px rgba(83,54,24,.16);
  pointer-events:none;
  z-index:2;
}
.framed-animation{
  border-radius:16px!important;
  overflow:hidden;
  background:#f8f0e6!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.85);
}
.info-box a{
  color:#8a5a18;
  text-decoration:none;
  font-weight:800;
  border-bottom:2px solid rgba(182,139,69,.35);
  transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.info-box a:hover{
  color:#3b2a13;
  border-bottom-color:#b68b45;
  background:rgba(182,139,69,.10);
}
.contact-link-card{
  display:inline-block;
  margin:.25rem .5rem .25rem 0;
  padding:.45rem .75rem;
  border-radius:999px;
  background:#fff8ec;
  border:1px solid rgba(182,139,69,.24);
}

/* v9: premium top contact bar colors */
.topbar{
  background:linear-gradient(90deg,#15130f,#2b2418 48%,#15130f);
  color:#f7ead7;
  border-bottom:1px solid rgba(214,177,104,.35);
}
.topbar span{
  color:#fff7e8;
  font-weight:900;
  letter-spacing:.02em;
}
.topbar a,
.topbar a:visited,
.topbar .contact-link-card{
  color:#f1c979!important;
  background:transparent!important;
  border:0!important;
  border-bottom:1px solid rgba(241,201,121,.38)!important;
  border-radius:0!important;
  padding:0!important;
  margin:0!important;
  text-decoration:none!important;
  box-shadow:none!important;
  font-weight:900;
}
.topbar a:hover,
.topbar .contact-link-card:hover{
  color:#ffffff!important;
  border-bottom-color:#ffffff!important;
}


/* v10: keep navigation visible on reduced page widths */
.nav{flex-wrap:wrap;gap:14px 24px;}
.menu{flex-wrap:wrap;justify-content:flex-end;row-gap:8px;}
@media(max-width:1100px){
  .nav{align-items:center;}
  .brand{font-size:44px;}
  .brand-svg{width:52px;height:52px;flex-basis:52px;}
  .menu{gap:14px;font-size:15px;}
}
@media(max-width:900px){
  .menu{display:flex!important;width:100%;justify-content:center;gap:10px 14px;padding-top:10px;border-top:1px solid var(--line);}
  .menu a{font-size:14px;padding:6px 4px;}
  .nav{justify-content:center;text-align:center;}
}
@media(max-width:520px){
  .brand{font-size:30px;}
  .brand-svg{width:40px;height:40px;flex-basis:40px;}
  .topbar{gap:8px 14px;font-size:13px;padding:8px 4vw;}
  .menu{gap:6px 10px;}
  .menu a{font-size:13px;}
}