/* KLY Eyecare website styles */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
img{max-width:100%}
body{margin:0}
a{color:#C24D00}a:hover{color:#9A3D00}
.navlink{color:#1E2A33;text-decoration:none;font-weight:500;font-size:14.5px;padding:12px 2px}
.navlink:hover{color:#C24D00}
.btn{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border-radius:999px;background:linear-gradient(135deg,#FF8533 0%,#FF6601 55%,#EB5C00 100%);color:#FFFFFF;text-decoration:none;font-weight:600;font-size:15px;box-shadow:0 4px 14px rgba(255,102,1,.28)}
.btn:hover{background:linear-gradient(135deg,#FF7A1F 0%,#E05500 100%);color:#FFFFFF}
.btn-line{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border-radius:999px;border:1.5px solid #1E2A33;color:#1E2A33;text-decoration:none;font-weight:600;font-size:15px}
.btn-line:hover{background:#1E2A33;color:#FFFFFF}
.tile{color:#1E2A33;text-decoration:none;display:flex;flex-direction:column;gap:12px}
.tile:hover h3{color:#C24D00}
.tile img{transition:transform .3s ease}
.tile:hover img{transform:scale(1.03)}
.flink{color:#FFFFFF;text-decoration:none;opacity:.92}
.flink:hover{opacity:1;text-decoration:underline;color:#FFFFFF}
.fgrid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr)) 120px;gap:32px;align-items:start}
.fmascot{align-self:end;justify-self:end;margin-top:-40px}
@media (max-width:980px){.fgrid{grid-template-columns:repeat(2,minmax(0,1fr));padding-bottom:32px}.fmascot{display:none}}
@media (max-width:560px){.fgrid{grid-template-columns:1fr}}
@media (max-width:760px){.hide-sm{display:none}}
.fade-up{animation:fadeUp .7s ease-out both}
.fade-delay{animation-delay:.15s}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fade-up{animation:none}}
.ilogo{height:30px;width:auto;max-width:120px;object-fit:contain;display:block;filter:grayscale(1);opacity:.6;transition:filter .25s ease,opacity .25s ease}
.ilogo:hover{filter:none;opacity:1}
.ins-layer{border-top:1px solid #EFE4DA;box-shadow:inset 0 10px 18px -12px rgba(30,42,51,.12);position:relative;padding:80px 28px;background-color:#F3F1EE;background-image:linear-gradient(rgba(255,246,240,.84),rgba(255,246,240,.84)),url(../img/store-wall.jpg);background-size:cover;background-position:center;background-attachment:fixed}
.ins-wrap{position:relative;max-width:1200px;margin:0 auto}
.ins-card{background:transparent;padding:8px 20px;display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}
.ins-layer .ilogo{opacity:.8;filter:grayscale(1) brightness(.75)}
.ins-layer .ilogo:hover{opacity:1;filter:none}
@media (hover:none){.ins-layer{background-attachment:scroll}}
.hero{position:relative;overflow:hidden;background:linear-gradient(160deg,#FFF1E6 0%,#FFF8F2 55%,#FFFFFF 100%);min-height:520px}
.hero-photo{position:absolute;top:96px;right:0;width:54%;height:calc(100% - 96px);border-top-left-radius:28px;object-fit:cover;object-position:50% 36%;-webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.6) 14%,#000 32%);mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.6) 14%,#000 32%);z-index:1}
.hero-text{display:flex;flex-direction:column;gap:22px;max-width:520px}
.hero-blob{position:absolute;border-radius:50%;z-index:0}
.hero-blob-1{width:260px;height:260px;left:-90px;top:180px;background:rgba(64,145,176,.10)}
.hero-blob-2{width:320px;height:320px;left:38%;top:-120px;background:rgba(255,102,1,.08)}
.hero-hill{position:absolute;left:0;bottom:0;width:100%;height:100px;z-index:1}
.hero-flamingo{position:absolute;left:24px;bottom:4px;height:150px;width:auto;z-index:2}
.hero-nav{display:flex;flex-wrap:wrap;gap:2px 26px}
@media (max-width:1320px){.hero-flamingo{display:none}}
@media (max-width:900px){.hero{min-height:0;display:flex;flex-direction:column}.hero>header{order:1}.hero>section{order:2}.hero>section>div{padding-bottom:32px!important}.hero-hill{display:none}.hero-photo{position:relative;top:0;width:100%;height:280px;border-radius:0;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 25%);mask-image:linear-gradient(to bottom,transparent 0%,#000 25%);display:block;order:3}}
.brand-layer{border-top:1px solid #EFE4DA;box-shadow:inset 0 10px 18px -12px rgba(30,42,51,.12);background-image:linear-gradient(rgba(255,246,240,.84),rgba(255,246,240,.84)),url(../img/store-counter.jpg);background-position:center 40%}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%)}
.marquee-track{display:flex;align-items:center;gap:64px;width:max-content;padding-right:64px;animation:marquee 45s linear infinite;will-change:transform}
.marquee-track.js-run{animation:none}
@media (hover:hover){.marquee:hover .marquee-track{animation-play-state:paused}}
.marquee .ilogo{height:42px;max-width:170px;flex-shrink:0}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:18px 34px;padding-right:0}.marquee-dup{display:none!important}.marquee{-webkit-mask-image:none;mask-image:none}}
.wwd{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
@media (max-width:860px){.wwd{grid-template-columns:1fr}}
.ph-logo{height:42px;min-width:120px;padding:0 18px;border:1.5px dashed #C9BDB2;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;color:#6B7680;white-space:nowrap;background:rgba(255,255,255,.55);flex-shrink:0}
.marquee-rev .marquee-track{animation-direction:reverse;animation-duration:70s}
/* Phones: no fade mask or transitions on the moving strips (phones redraw those every frame and
   can't keep up). main.js moves the strips (see there for why). */
@media (hover:none){.marquee{-webkit-mask-image:none;mask-image:none}.marquee .ilogo,.marquee .blogo{transition:none}}
@media (max-width:640px){.marquee-track{animation-duration:28s}.marquee-rev .marquee-track{animation-duration:70s}}
.ins-title a{color:#FF6601;text-decoration:none;display:inline-flex;align-items:center;gap:8px;min-height:44px}
.ins-title a:hover{text-decoration:underline;text-underline-offset:4px}
.blogo{width:auto;display:block;flex-shrink:0;opacity:.8;filter:grayscale(1) brightness(.75);transition:filter .25s ease,opacity .25s ease}
.blogo:hover,.icard:hover .blogo{opacity:1;filter:none}
.card{background:#FFFFFF;border:1px solid #EEE7E2;border-radius:20px;overflow:hidden;display:grid;grid-template-columns:190px minmax(0,1fr)}
.card img{width:100%;height:100%;min-height:200px;object-fit:cover;display:block}
.tag{display:inline-block;background:#EAF4F8;color:#2C6A82;font-size:13px;font-weight:600;padding:5px 11px;border-radius:999px}
@media (max-width:560px){.card{grid-template-columns:1fr}.card img{height:180px;min-height:0}}
.offer{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:#3E4A55}
.offer svg{flex-shrink:0;margin-top:3px}
.member img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;border-radius:20px;display:block}
.hcard{background:#FFFFFF;border:1px solid #EEE7E2;border-radius:24px;overflow:hidden;display:flex;flex-direction:column}
.hcard>img{width:100%;height:300px;object-fit:cover;display:block}
.thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.thumbs img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;display:block}
.pill{display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border-radius:999px;background:#FFFFFF;border:1px solid #EEDFD3;font-size:14px;font-weight:600;color:#3E4A55}
.look{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.look img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:14px;display:block;transition:transform .3s ease}
.look img:hover{transform:scale(1.03)}
@media (max-width:900px){.look{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sunwrap{display:grid !important;grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
@media (max-width:860px){.sunwrap{grid-template-columns:1fr}.sunwrap>div:first-child{min-height:420px!important}}
.newwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
@media (max-width:860px){.newwrap{grid-template-columns:1fr}}
.hcard>div{flex:1}
.hcard .thumbs{margin-top:auto}
.icard{background:#FFFFFF;border:1px solid #EEE7E2;border-radius:18px;height:120px;display:flex;align-items:center;justify-content:center;padding:18px;transition:box-shadow .2s ease,transform .2s ease}
.icard:hover{box-shadow:0 12px 30px rgba(30,42,51,.10);transform:translateY(-2px)}
.icard img{max-height:56px;max-width:100%;width:auto;object-fit:contain;display:block}
.ccard{background:#FFFFFF;border:1px solid #EEE7E2;border-radius:20px;padding:22px 24px;display:flex;gap:16px;align-items:flex-start}
.cicon{width:46px;height:46px;border-radius:50%;background:#FFF1E6;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ccard h2{margin:0 0 4px;font-size:16px;font-weight:700;color:#1E2A33}
.ccard p,.ccard a.cl{margin:0;font-size:15.5px;color:#4A5560;text-decoration:none}
.ccard a.cl:hover{color:#C24D00}