/* ==================== public homepage — GCNY Marketing design ====================
   A copy of the Wix landing page GCNY built for Veyora (Oct 2026), rendered by
   pages_home.js. Everything is scoped to `.vx`, which only the homepage
   renders, plus the `hm-nav--hero` header variant it asks editorialHeader()
   for. Colours are the brand guide's (BrandyHQ "veyora-r"): Ignition Orange
   #ed6e2a on black; the Wix page uses pure black, not Command Black, and so
   does this one.

   The Wix page is a fixed 1920px canvas that clips on narrower screens. This
   one keeps its proportions on a wide screen and reflows, centred, below it.

   Fonts are self-hosted (index.html allows no font CDN), all SIL OFL 1.1:
   Inter and Syne by their authors via Google Fonts, Wix Madefor Text by Wix.
   Licence notice: assets/fonts/FONTS.md. */
@font-face{font-family:'Inter';font-style:normal;font-weight:500 800;font-display:swap;src:url('../assets/fonts/inter-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:500 800;font-display:swap;src:url('../assets/fonts/inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:500 800;font-display:swap;src:url('../assets/fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Syne';font-style:normal;font-weight:700 800;font-display:swap;src:url('../assets/fonts/syne-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Syne';font-style:normal;font-weight:700 800;font-display:swap;src:url('../assets/fonts/syne-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Wix Madefor Text';font-style:normal;font-weight:400 700;font-display:swap;src:url('../assets/fonts/wix-madefor-text-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Wix Madefor Text';font-style:normal;font-weight:400 700;font-display:swap;src:url('../assets/fonts/wix-madefor-text-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Wix Madefor Text';font-style:normal;font-weight:400 700;font-display:swap;src:url('../assets/fonts/wix-madefor-text-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

.vx{
  --vx-orange:#ed6e2a;
  --vx-orange-hover:#f2864c;
  --vx-gutter:clamp(16px,5vw,96px);
  --vx-inter:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --vx-syne:'Syne','Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --vx-text:'Wix Madefor Text','Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  background:#000;color:#fff;font-family:var(--vx-text);overflow-x:clip
}
.vx p{margin:0}
.vx h1,.vx h2,.vx h3{margin:0;overflow-wrap:break-word}
.vx figure{margin:0}
.vx-orange{color:var(--vx-orange)}

/* ---------- header: white wordmark centred on black (the hero variant; the
   compact dark header every other page uses is in brand-frame.css) ---------- */
/* body.hm-dark .hm-nav (store.css) paints the light canvas; this outranks it. */
body.hm-dark .hm-nav.hm-nav--hero{position:relative;background:#000;border-bottom:0}
.hm-nav--hero .hm-nav-in{max-width:1760px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);padding:clamp(18px,1.6vw,24px) var(--vx-gutter) 0}
.hm-nav--hero .hm-nav-logo{grid-column:2}
.hm-nav--hero .hm-nav-logo img{height:auto;width:clamp(170px,24.5vw,470px)}
.hm-nav--hero .hm-nav-end{grid-column:3;justify-self:end}

/* ---------- shared controls ---------- */
.vx-pill{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:12px 30px;border-radius:999px;background:var(--vx-orange);border:1px solid rgba(255,255,255,.55);color:#fff;font-family:var(--vx-text);font-size:clamp(18px,1.25vw,24px);font-weight:400;line-height:1.2;text-align:center;cursor:pointer;transition:background .2s ease}
.vx-pill:hover{background:var(--vx-orange-hover);color:#fff}
.vx-pill:focus-visible{outline:2px solid #fff;outline-offset:3px}
.vx-pill--line{background:transparent;border-color:#fff;min-height:44px;font-size:16px}
.vx-pill--line:hover{background:#fff;color:#000}
.vx-h-inter{font-family:var(--vx-inter);font-weight:700;letter-spacing:-.02em;line-height:1.04;text-transform:uppercase}
.vx-h-syne{font-family:var(--vx-syne);font-weight:700;letter-spacing:-.02em;line-height:1.1;text-transform:uppercase}

/* ---------- 1. hero ---------- */
.vx-hero{max-width:1760px;margin:0 auto;padding:clamp(28px,3.4vw,64px) var(--vx-gutter) 0;text-align:center}
.vx-hero-title{font-family:var(--vx-inter);font-weight:800;font-size:clamp(34px,6.8vw,119px);line-height:1;letter-spacing:-.02em;text-transform:uppercase;text-wrap:balance}
.vx-hero-row{display:flex;align-items:center;justify-content:space-between;gap:24px 40px;max-width:1532px;margin:clamp(24px,2.4vw,40px) auto 0;text-align:start}
.vx-hero-lead{flex:0 1 900px;font-family:var(--vx-inter);font-weight:500;font-size:clamp(16px,1.05vw,20px);line-height:1.25;letter-spacing:.05em}
.vx-hero-row .vx-pill{flex:0 0 auto}
.vx-hero-img{display:block;width:100%;max-width:1532px;aspect-ratio:1532/341;object-fit:cover;margin:clamp(32px,3.4vw,64px) auto 0}

/* ---------- 2. premium frames ---------- */
.vx-mission{max-width:1600px;margin:0 auto;padding:clamp(72px,8.4vw,160px) var(--vx-gutter) 0;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,2fr);gap:clamp(24px,4vw,64px);align-items:start}
.vx-mission-v{display:block;width:clamp(110px,13vw,254px);height:auto}
.vx-mission-copy h2{font-size:clamp(32px,2.95vw,56px)}
.vx-mission-copy p{max-width:880px;margin-top:clamp(28px,3.8vw,72px);font-size:clamp(16px,.95vw,18px);line-height:1.5}

/* ---------- 3. collections + video ---------- */
.vx-collect{max-width:1640px;margin:0 auto;padding:clamp(72px,6.6vw,120px) var(--vx-gutter) 0;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,8vw,240px);align-items:center}
.vx-collect-media{aspect-ratio:866/598;overflow:hidden;background:#111}
.vx-collect-media video{display:block;width:100%;height:100%;object-fit:cover}
.vx-collect-copy{max-width:420px}
.vx-collect-copy p{font-size:clamp(16px,.95vw,18px);font-weight:700;line-height:1.8}
.vx-collect-copy .vx-pill{margin-top:clamp(28px,2.4vw,44px)}

/* ---------- 4. the Veyora Framework ---------- */
.vx-frame{max-width:1600px;margin:0 auto;padding:clamp(80px,7.4vw,140px) var(--vx-gutter) clamp(72px,7vw,130px)}
.vx-frame-title{font-size:clamp(34px,4.45vw,85px);line-height:1}
.vx-frame-sub{max-width:640px;margin-top:clamp(16px,1.2vw,24px) !important;font-size:16px;line-height:1.6}
.vx-pillars{list-style:none;margin:clamp(48px,4.8vw,90px) 0 0;padding:0}
.vx-pillar{display:grid;grid-template-columns:minmax(0,600fr) minmax(0,560fr) minmax(0,340fr);align-items:start}
.vx-pillar-no{font-family:var(--vx-syne);font-weight:700;font-size:clamp(34px,2.95vw,56px);letter-spacing:-.02em;line-height:1;padding-top:clamp(34px,2.6vw,48px)}
.vx-pillar-text{border-top:1px solid rgba(255,255,255,.9);padding:clamp(22px,1.5vw,28px) 12px clamp(24px,1.6vw,30px)}
.vx-pillar-text h3{font-family:var(--vx-syne);font-weight:700;font-size:clamp(26px,2.3vw,44px);line-height:1;letter-spacing:-.02em}
.vx-pillar-text p{margin-top:clamp(14px,1.1vw,20px);font-size:16px;line-height:1.5}

/* ---------- 5. driven by craft + brands (white) ---------- */
.vx-craft{background:#fff;color:#000;padding:clamp(64px,4.7vw,90px) var(--vx-gutter) clamp(80px,9vw,170px)}
.vx-craft-head{max-width:1760px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:32px clamp(32px,6vw,120px);align-items:start}
.vx-craft-head h2{font-size:clamp(30px,3.35vw,64px)}
.vx-craft-story p{max-width:560px;font-size:clamp(16px,.95vw,18px);line-height:1.5}
.vx-craft-story .vx-craft-heritage{max-width:none;margin-top:clamp(40px,4.4vw,84px);color:var(--vx-orange);font-size:16px;font-weight:700;text-align:end;text-wrap:balance}
.vx-brands{list-style:none;margin:clamp(64px,6.8vw,130px) auto 0;padding:0;max-width:1260px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(36px,3.2vw,60px) clamp(16px,2vw,40px)}
.vx-brand{display:flex;flex-direction:column;align-items:center;text-align:center}
.vx-brand img{display:block;width:100%;max-width:250px;height:clamp(80px,6.2vw,118px);object-fit:contain}
.vx-brand p{max-width:300px;margin-top:clamp(16px,1.6vw,30px);font-size:clamp(14px,.85vw,16px);line-height:1.5}

/* ---------- 6. gallery ---------- */
.vx-gallery{display:flex;justify-content:center;align-items:flex-end;gap:clamp(20px,11.8vw,227px);padding:clamp(56px,6.6vw,126px) var(--vx-gutter) clamp(72px,7vw,140px);
  background:linear-gradient(to bottom,rgba(0,0,0,.72),rgba(0,0,0,.94) 30%,#000 50%),url('../assets/home/gcny/gallery-bg.webp') center bottom/cover no-repeat #000}
.vx-gallery figure{flex:0 1 auto;overflow:hidden}
.vx-gallery img{display:block;width:100%;height:100%;object-fit:cover}
.vx-gallery-a{width:clamp(140px,20vw,387px);aspect-ratio:387/418}
.vx-gallery-b{width:clamp(132px,19vw,366px);aspect-ratio:366/424}
.vx-gallery-b img{object-position:58% 50%}

/* ---------- 7. sell more / connect ---------- */
.vx-connect{max-width:1760px;margin:0 auto;padding:clamp(56px,4vw,80px) var(--vx-gutter) clamp(24px,2vw,40px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,563px);gap:48px clamp(32px,6vw,120px);align-items:start}
.vx-sell{width:min-content;max-width:100%;font-family:var(--vx-syne);font-weight:700;font-size:clamp(44px,4.7vw,90px);line-height:1.1;letter-spacing:-.02em;text-transform:uppercase}
.vx-connect-kicker{font-family:var(--vx-syne);font-weight:800;font-size:18px;letter-spacing:.05em;text-transform:uppercase;color:var(--vx-orange)}
.vx-connect-title{margin-top:6px !important;font-family:var(--vx-syne);font-weight:700;font-size:clamp(24px,1.72vw,33px);line-height:1.33;text-transform:uppercase}
.vx-connect-body{max-width:460px;margin-top:clamp(24px,2.4vw,44px) !important;font-size:14px;line-height:1.5}
.vx-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px;margin-top:clamp(40px,3.6vw,70px)}
.vx-field{display:flex;flex-direction:column;gap:8px;font-size:16px}
.vx-field--wide{grid-column:1/-1}
.vx-field input{height:44px;padding:0;background:transparent;border:0;border-bottom:1px solid #fff;border-radius:0;color:#fff;font:inherit;font-size:16px}
.vx-field input:focus{outline:none;border-bottom-color:var(--vx-orange);box-shadow:0 1px 0 var(--vx-orange)}
.vx-field input:user-invalid{border-bottom-color:var(--vx-orange)}
.vx-check{display:flex;align-items:center;gap:12px;min-height:44px;font-size:16px;cursor:pointer}
.vx-check input{appearance:none;flex:0 0 auto;width:16px;height:16px;margin:0;border:1px solid #fff;background:transparent;cursor:pointer;display:grid;place-content:center}
.vx-check input:checked{background:var(--vx-orange);border-color:var(--vx-orange)}
.vx-check input:checked::after{content:'';width:8px;height:4px;border:2px solid #fff;border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.vx-check input:focus-visible{outline:2px solid #fff;outline-offset:2px}
.vx-connect-mark{grid-column:2;justify-self:end;width:clamp(170px,22vw,425px);height:auto;margin-top:clamp(40px,6vw,120px)}

/* The footer is black on every page (brand-frame.css); here it continues the
   black canvas, so its top line is a quiet hairline instead of the orange. */
.vx .site-foot{border-top:1px solid rgba(255,255,255,.14)}

/* ---------- tablet ---------- */
@media (max-width:1100px){
  /* Two columns leave the closing headline ~140px here, so it stacks first. */
  .vx-connect{grid-template-columns:minmax(0,1fr)}
  .vx-connect-mark{grid-column:1}
  .vx-pillar{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
  .vx-craft-head{grid-template-columns:minmax(0,1fr)}
  .vx-craft-story p{max-width:720px}
  .vx-brands{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px}
}

/* ---------- phone ---------- */
@media (max-width:760px){
  .hm-nav--hero .hm-nav-in{grid-template-columns:minmax(0,1fr);justify-items:center;row-gap:10px}
  .hm-nav--hero .hm-nav-logo,.hm-nav--hero .hm-nav-end{grid-column:1;justify-self:center}
  .vx-hero-title{font-size:clamp(34px,11.4vw,64px)}
  .vx-hero-row{flex-direction:column;align-items:stretch}
  .vx-hero-row .vx-pill{align-self:center}
  .vx-hero-lead{flex-basis:auto}
  .vx-hero-img{aspect-ratio:4/3}
  .vx-mission{grid-template-columns:minmax(0,1fr)}
  .vx-mission-v{width:96px}
  .vx-collect{grid-template-columns:minmax(0,1fr)}
  .vx-collect-copy{max-width:none}
  .vx-pillar{grid-template-columns:56px minmax(0,1fr)}
  .vx-pillar-no{font-size:30px;padding-top:28px}
  .vx-brands{gap:40px 16px}
  .vx-connect{grid-template-columns:minmax(0,1fr)}
  .vx-craft-head h2{font-size:clamp(20px,6.2vw,30px)}
  .vx-connect-mark{grid-column:1}
  /* Solid black over the top: the backdrop's own "FRAMING" lettering otherwise
     peeks out above the photos at phone width. */
  .vx-gallery{gap:16px;background-image:linear-gradient(to bottom,#000 0,#000 55%,rgba(0,0,0,.8)),url('../assets/home/gcny/gallery-bg.webp')}
  .vx-gallery-a{width:48%}
  .vx-gallery-b{width:46%}
}
@media (max-width:420px){
  /* Long single words (Handwerkskunst, Продавайте, complicaciones) must fit
     a 320px screen whole. */
  .vx-sell{font-size:clamp(32px,11vw,44px)}
  .vx-mission-copy h2{font-size:clamp(24px,8vw,32px)}
  .vx-pillar-text h3{font-size:clamp(20px,6.6vw,26px)}
  .vx-form{grid-template-columns:minmax(0,1fr)}
  .vx-form .vx-field{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  .vx-pill{transition:none}
}