/* Gala Shade homepage prototype. Layout: banded sections on a 1200px rail, navy anchors, yellow as the single action colour. Scoped to .gs so it can drop into a Lennon Tree custom-html section without touching the site template. */
.gs{
  --gs-navy:#1c3867;
  --gs-navy-2:#203a6f;
  --gs-deep:#0f2347;
  --gs-yellow:#ffc82b;
  --gs-yellow-2:#f7b500;
  --gs-grey:#f3f5f9;
  --gs-line:#dde3ee;
  --gs-muted:#4e6795;
  --gs-ink:#16294d;
  --gs-white:#ffffff;
  --gs-display:"TiltWarp","Tilt Warp","Arial Black",system-ui,sans-serif;
  --gs-body:"Open Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --gs-ease:cubic-bezier(.2,.9,.2,1);
  --gs-r:18px;
  --gs-shadow:0 10px 28px rgba(28,56,103,.10);
  --gs-shadow-hi:0 22px 48px rgba(28,56,103,.20);
  font-family:var(--gs-body);color:var(--gs-ink);background:var(--gs-white);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
.gs *,.gs *::before,.gs *::after{box-sizing:border-box}
.gs img{max-width:100%;display:block}
.gs a{color:inherit}
.gs h1,.gs h2,.gs h3{font-family:var(--gs-display);font-weight:400;line-height:1.12;margin:0;text-wrap:balance;color:var(--gs-navy)}
.gs h1{font-size:clamp(2rem,4.4vw,3.3rem)}
.gs h2{font-size:clamp(1.65rem,3vw,2.4rem)}
.gs h3{font-size:1.28rem}
.gs p{margin:0}
.gs-rail{max-width:1200px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.gs-band{padding-block:clamp(40px,6vw,76px)}
.gs-band--grey{background:var(--gs-grey)}
.gs-band--tight{padding-block:clamp(20px,3vw,32px)}

/* Section heading with yellow sweep */
.gs-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:28px}
.gs-head h2{position:relative;padding-bottom:12px}
.gs-head h2::after{content:"";position:absolute;left:0;bottom:0;height:5px;width:64px;border-radius:5px;background:var(--gs-yellow);transition:width .6s var(--gs-ease)}
.gs-head:hover h2::after{width:100%}

/* Buttons */
.gs-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--gs-body);font-weight:800;font-size:.95rem;text-decoration:none;line-height:1.25;padding:13px 20px;border-radius:999px;background:var(--gs-navy);color:var(--gs-white)!important;border:2px solid var(--gs-navy);transition:background .25s var(--gs-ease),color .25s var(--gs-ease),transform .25s var(--gs-ease),box-shadow .25s var(--gs-ease)}
.gs-btn::after{content:"";width:16px;height:16px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .25s var(--gs-ease)}
.gs-btn:hover{background:var(--gs-yellow);border-color:var(--gs-yellow);color:var(--gs-navy)!important;transform:translateY(-2px);box-shadow:0 12px 24px rgba(255,200,43,.35)}
.gs-btn:hover::after{transform:translateX(4px)}
.gs-btn--yellow{background:var(--gs-yellow);border-color:var(--gs-yellow);color:var(--gs-navy)!important}
.gs-btn--yellow:hover{background:var(--gs-white);border-color:var(--gs-white)}
.gs-btn--block{width:100%;justify-content:space-between}
.gs a:focus-visible,.gs .gs-btn:focus-visible{outline:3px solid var(--gs-yellow-2);outline-offset:3px;border-radius:12px}

/* Banner images (linked and unlinked) */
.gs-banner{display:block;border-radius:var(--gs-r);overflow:hidden;box-shadow:var(--gs-shadow);position:relative;transition:transform .45s var(--gs-ease),box-shadow .45s var(--gs-ease)}
.gs-banner img{width:100%;height:auto;transition:transform .9s var(--gs-ease)}
a.gs-banner:hover{transform:translateY(-4px);box-shadow:var(--gs-shadow-hi)}
a.gs-banner:hover img{transform:scale(1.025)}
a.gs-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.28) 48%,transparent 66%);transform:translateX(-110%);transition:transform .9s var(--gs-ease);pointer-events:none}
a.gs-banner:hover::after{transform:translateX(110%)}

/* Hero banner */
.gs-hero{padding-top:clamp(16px,2.4vw,28px)}
.gs-hero .gs-banner{box-shadow:0 18px 44px rgba(15,35,71,.18)}

/* Benefits strip */
.gs-benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:-34px;position:relative;z-index:2}
.gs-benefit{display:flex;align-items:center;gap:14px;background:var(--gs-white);border:1px solid var(--gs-line);border-radius:16px;padding:16px 18px;box-shadow:var(--gs-shadow);transition:transform .35s var(--gs-ease),box-shadow .35s var(--gs-ease),border-color .35s var(--gs-ease)}
.gs-benefit__icon{flex:none;width:52px;height:52px;border-radius:14px;background:var(--gs-grey);display:grid;place-items:center;transition:background .35s var(--gs-ease),transform .5s var(--gs-ease)}
.gs-benefit__icon img{width:32px;height:32px;object-fit:contain}
.gs-benefit__title{display:block;font-family:var(--gs-display);font-size:1.15rem;line-height:1.15;color:var(--gs-navy)}
.gs-benefit__sub{margin:2px 0 0;color:var(--gs-muted);font-weight:600;font-size:.92rem}
.gs-benefit__sub:empty{display:none}
.gs-benefit:hover{transform:translateY(-5px);box-shadow:var(--gs-shadow-hi);border-color:var(--gs-yellow)}
.gs-benefit:hover .gs-benefit__icon{background:var(--gs-yellow);transform:rotate(-8deg) scale(1.06)}

/* Frame selector */
.gs-frames{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.gs-frame{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:280px;border-radius:var(--gs-r);overflow:hidden;text-decoration:none;background:linear-gradient(180deg,#ffffff 0%,#eef2f8 100%);border:1px solid var(--gs-line);box-shadow:var(--gs-shadow);isolation:isolate;transition:transform .45s var(--gs-ease),box-shadow .45s var(--gs-ease)}
.gs-frame__img{position:absolute;inset:0 0 64px 0;display:grid;place-items:center;padding:18px;z-index:-1}
.gs-frame__img img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 14px rgba(28,56,103,.18));transition:transform .7s var(--gs-ease)}
.gs-frame__tier{position:absolute;top:14px;left:14px;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gs-navy);background:var(--gs-yellow);padding:5px 10px;border-radius:999px}
.gs-frame__label{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--gs-navy);color:var(--gs-white);font-family:var(--gs-display);font-size:1.12rem;padding:16px 18px;transition:background .35s var(--gs-ease)}
.gs-frame__label::after{content:"";width:30px;height:30px;flex:none;border-radius:50%;background:var(--gs-yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12h11M12 6.5l5.5 5.5-5.5 5.5' fill='none' stroke='%231c3867' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .35s var(--gs-ease)}
.gs-frame:hover{transform:translateY(-6px);box-shadow:var(--gs-shadow-hi)}
.gs-frame:hover .gs-frame__img img{transform:scale(1.08) rotate(-2deg)}
.gs-frame:hover{border-color:var(--gs-yellow)}
.gs-frame:hover .gs-frame__label{background:var(--gs-yellow);color:var(--gs-navy)}
.gs-frame:hover .gs-frame__label::after{background-color:var(--gs-white)}
.gs-frame:hover .gs-frame__label::after{transform:translateX(4px)}

/* Intro */
.gs-intro{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:start}
.gs-intro__lead{display:flex;flex-direction:column;gap:16px;min-width:0}
.gs-intro__lead p{font-size:1.08rem;color:#2c3f63}
.gs-kicker{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gs-muted)}
.gs-kicker::before{content:"";width:22px;height:4px;border-radius:4px;background:var(--gs-yellow)}
.gs-why{background:var(--gs-navy);color:#e8eefb;border-radius:var(--gs-r);padding:clamp(22px,3vw,36px);display:flex;flex-direction:column;gap:14px;min-width:0;position:relative;overflow:hidden;transition:transform .45s var(--gs-ease),box-shadow .45s var(--gs-ease)}
.gs-why h2{color:var(--gs-white);font-size:clamp(1.45rem,2.4vw,1.95rem)}
.gs .gs-why p{color:#e8eefb!important}
.gs .gs-why h2{color:var(--gs-white)!important}
.gs .gs-why p:last-child{color:var(--gs-yellow)!important;font-weight:700}
.gs .gs-cta p{color:#e6ecf8!important}
.gs .gs-cta h2{color:var(--gs-white)!important}
.gs-why::before{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;border:26px solid rgba(255,200,43,.14);transition:transform .9s var(--gs-ease)}
.gs-why:hover{transform:translateY(-4px);box-shadow:var(--gs-shadow-hi)}
.gs-why:hover::before{transform:scale(1.25) rotate(25deg)}

/* Product / accessory cards */
.gs-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.gs-card{display:flex;flex-direction:column;background:var(--gs-white);border:1px solid var(--gs-line);border-radius:var(--gs-r);overflow:hidden;box-shadow:var(--gs-shadow);min-width:0;transition:transform .4s var(--gs-ease),box-shadow .4s var(--gs-ease),border-color .4s var(--gs-ease)}
.gs-card__media{position:relative;display:block;aspect-ratio:1/1;background:linear-gradient(180deg,#f7f9fc,#e9eef7);overflow:hidden}
.gs-card__media img{width:100%;height:100%;object-fit:contain;padding:10px;transition:transform .8s var(--gs-ease)}
.gs-card__media--cover img{object-fit:cover;padding:0}
.gs-card__body{display:flex;flex-direction:column;gap:12px;padding:18px 18px 20px;flex:1}
.gs-card__body > p{color:#3a4d70;font-size:.96rem}
.gs-card__cta{margin-top:auto;padding-top:4px}
.gs-card:hover{transform:translateY(-8px);box-shadow:var(--gs-shadow-hi);border-color:rgba(28,56,103,.25)}
.gs-card:hover .gs-card__media img{transform:scale(1.07)}
.gs-card h3{background-image:linear-gradient(transparent 68%,rgba(255,200,43,.6) 0);background-size:0% 100%;background-repeat:no-repeat;transition:background-size .45s var(--gs-ease);display:inline;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.gs-card:hover h3{background-size:100% 100%}
.gs-card__title{display:block}

/* Spec list on range cards */
.gs-specs{list-style:none;margin:0;padding:12px 0 0;border-top:1px dashed var(--gs-line);display:flex;flex-direction:column;gap:6px;font-size:.88rem;color:#3a4d70}
.gs-specs li{display:flex;flex-wrap:wrap;gap:4px 6px}
.gs-specs b{color:var(--gs-navy);font-weight:700}
.gs-stars{color:var(--gs-yellow-2);letter-spacing:2px;font-weight:700}
.gs-meter{height:6px;border-radius:6px;background:var(--gs-grey);overflow:hidden;margin-top:-2px}
.gs-meter span{display:block;height:100%;width:var(--lvl);background:linear-gradient(90deg,var(--gs-yellow),var(--gs-yellow-2));border-radius:6px;transform-origin:left;transition:transform .7s var(--gs-ease)}
.gs-card:hover .gs-meter span{animation:gs-fill .8s var(--gs-ease)}
@keyframes gs-fill{from{transform:scaleX(.15)}to{transform:scaleX(1)}}

/* Photo CTA panels */
.gs-cta{position:relative;border-radius:var(--gs-r);overflow:hidden;min-height:360px;display:flex;align-items:center;isolation:isolate;box-shadow:var(--gs-shadow)}
.gs-cta__bg{position:absolute;inset:0;z-index:-2}
.gs-cta__bg img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--gs-ease)}
.gs-cta::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(15,35,71,.94) 0%,rgba(28,56,103,.82) 42%,rgba(28,56,103,.25) 78%,rgba(28,56,103,.05) 100%)}
.gs-cta__inner{max-width:580px;padding:clamp(28px,4vw,52px);display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.gs-cta h2{color:var(--gs-white)}
.gs-cta p{color:#e6ecf8;font-size:1.06rem}
.gs-cta:hover .gs-cta__bg img{transform:scale(1.05)}

/* Long-form copy */
.gs-prose{max-width:780px;display:flex;flex-direction:column;gap:14px}
.gs-prose p{color:#2c3f63}
.gs-prose a{color:var(--gs-navy);font-weight:700;text-decoration:none;background-image:linear-gradient(var(--gs-yellow),var(--gs-yellow));background-size:100% 3px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .3s var(--gs-ease)}
.gs-prose a:hover{background-size:100% 100%}
.gs-checks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.gs-checks li{display:flex;align-items:center;gap:12px;background:var(--gs-white);border:1px solid var(--gs-line);border-radius:12px;padding:12px 14px;font-weight:600;color:var(--gs-navy);transition:transform .3s var(--gs-ease),border-color .3s var(--gs-ease)}
.gs-checks li::before{content:"";flex:none;width:24px;height:24px;border-radius:50%;background:var(--gs-yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%231c3867' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.gs-checks li:hover{transform:translateX(4px);border-color:var(--gs-yellow)}
.gs-checks p{margin:0;color:inherit}

/* Heritage */
.gs-heritage{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,56px);align-items:center}
.gs-heritage .gs-prose{max-width:none}
.gs-badge{position:relative;display:grid;place-items:center;aspect-ratio:1/1;max-width:420px;width:100%;margin-inline:auto;border-radius:50%;background:var(--gs-white);border:1px solid var(--gs-line);box-shadow:var(--gs-shadow);padding:16%;transition:transform .6s var(--gs-ease),box-shadow .6s var(--gs-ease)}
.gs-badge::before{content:"";position:absolute;inset:-14px;border-radius:50%;border:3px dashed rgba(28,56,103,.18);transition:transform 1.2s var(--gs-ease)}
.gs-badge::after{content:"Since 1999";position:absolute;bottom:8%;left:50%;transform:translateX(-50%);font-family:var(--gs-display);font-size:.95rem;color:var(--gs-navy);background:var(--gs-yellow);padding:6px 16px;border-radius:999px;white-space:nowrap}
.gs-badge img{width:100%;height:auto;object-fit:contain}
.gs-badge:hover{transform:translateY(-6px);box-shadow:var(--gs-shadow-hi)}
.gs-badge:hover::before{transform:rotate(60deg)}

/* Load-in (starts visible, only shifts slightly) */
@keyframes gs-rise{from{transform:translateY(14px)}to{transform:none}}
.gs-rise{animation:gs-rise .8s var(--gs-ease) both}
.gs-rise:nth-child(2){animation-delay:.06s}.gs-rise:nth-child(3){animation-delay:.12s}.gs-rise:nth-child(4){animation-delay:.18s}

/* Responsive */
@media (max-width:1024px){
  .gs-benefits,.gs-frames,.gs-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gs-intro,.gs-heritage{grid-template-columns:1fr}
  .gs-badge{max-width:300px}
}
@media (max-width:600px){
  .gs-benefits{margin-top:16px}
  .gs-benefit{padding:12px}
  .gs-benefit__icon{width:44px;height:44px}
  .gs-frames,.gs-cards,.gs-checks{grid-template-columns:1fr}
  .gs-frame{min-height:240px}
  .gs-cta{min-height:0}
  .gs-cta::before{background:linear-gradient(180deg,rgba(15,35,71,.6) 0%,rgba(15,35,71,.92) 70%)}
  .gs-head{margin-bottom:20px}
}
@media (max-width:420px){.gs-benefits{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  .gs *,.gs *::before,.gs *::after{animation:none!important;transition:none!important}
}
.section-preview:has(.gs){margin-bottom:0!important;border-radius:0!important;padding:0!important;overflow:visible}