/* Folio Horizontal for Elementor */

/* =================== Horizontal Scroll =================== */
.fhs { --fhs-bg:#0f0f0f; --fhs-fg:#f2f0eb; --fhs-muted:#8a8780; --fhs-line:rgba(255,255,255,.14); --fhs-pad:clamp(24px,4vw,64px);
       position:relative; background:var(--fhs-bg); color:var(--fhs-fg); font-family:"Helvetica Neue",Arial,sans-serif; line-height:1.5; }
.fhs *, .fhs *::before, .fhs *::after { box-sizing:border-box; }

.fhs-stage { position:sticky; top:0; height:100vh; overflow:hidden; }
.admin-bar .fhs-stage { top:32px; height:calc(100vh - 32px); }
.fhs-track { display:flex; height:100%; width:max-content; will-change:transform; }

.fhs-panel { flex:none; height:100%; width:calc(var(--fhs-w,100vw) * var(--k,1)); border-right:1px solid var(--fhs-line); overflow:hidden; display:flex; align-items:center; }
.fhs-panel:last-child { border-right:0; }
.fhs-panel > .elementor { width:100%; }

.fhs-simple { display:flex; align-items:center; gap:clamp(32px,5vw,96px); width:100%; padding:100px var(--fhs-pad) 100px; }
.fhs-copy { flex:1 1 0; min-width:0; max-width:46em; }
.fhs-kicker { margin:0 0 20px; font-size:13px; color:var(--fhs-muted); letter-spacing:.02em; }
.fhs-heading { margin:0 0 24px; font-size:clamp(36px,6vw,96px); line-height:.98; letter-spacing:-.035em; font-weight:500; color:var(--fhs-fg); }
.fhs-text { margin:0; font-size:clamp(16px,1.5vw,20px); color:var(--fhs-muted); max-width:34em; }
.fhs-link { display:inline-block; margin-top:26px; color:var(--fhs-fg); text-decoration:none; border-bottom:1px solid var(--fhs-fg); padding-bottom:2px; }
.fhs-img { flex:none; height:min(64vh,640px); aspect-ratio:4/5; border-radius:6px; overflow:hidden; }
.fhs-img img { width:100%; height:100%; object-fit:cover; display:block; }

/* Two buttons under the text */
.fhs-btns { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.fhs-btn { display:inline-block; padding:14px 28px; border-radius:999px; font-size:15px; line-height:1.2; text-decoration:none;
           border:1px solid var(--fhs-btn-bg, var(--fhs-fg)); transition:background .25s, color .25s, border-color .25s; }
.fhs-btn-1 { background:var(--fhs-btn-bg, var(--fhs-fg)); color:var(--fhs-btn-fg, var(--fhs-bg)); }
.fhs-btn-2 { background:transparent; color:var(--fhs-btn-bg, var(--fhs-fg)); }
.fhs-btn-1:hover { background:transparent; color:var(--fhs-btn-bg, var(--fhs-fg)); }
.fhs-btn-2:hover { background:var(--fhs-btn-bg, var(--fhs-fg)); color:var(--fhs-btn-fg, var(--fhs-bg)); }

/* Full-slide background image + colour overlay */
.fhs-panel { position:relative; }
.fhs-bg { position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; z-index:0; }
.fhs-overlay { position:absolute; inset:0; z-index:1; pointer-events:none; }
.fhs-simple { position:relative; z-index:2; }
.fhs-simple.has-bg .fhs-kicker, .fhs-simple.has-bg .fhs-text { color:var(--fhs-fg); opacity:.9; }

/* Video: full-slide background (under the overlay) or beside the text */
.fhs-videobox { position:absolute; inset:0; z-index:0; overflow:hidden; container-type:size; background:#000; }
.fhs-videobox .fhs-vid { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.fhs-videobox .fhs-frame { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border:0; pointer-events:none;
                           width:max(100cqw, 177.78cqh); height:max(100cqh, 56.25cqw); }
.fhs-img.is-video { aspect-ratio:16/9; height:auto; width:min(44vw,760px); background:#000; }
.fhs-img.is-video .fhs-vid, .fhs-img.is-video .fhs-frame { width:100%; height:100%; border:0; display:block; object-fit:cover; }
.fhs.is-mobile .fhs-img.is-video { width:100%; }

.fhs-progress { position:absolute; z-index:5; left:var(--fhs-pad); right:var(--fhs-pad); bottom:26px; }
.fhs-ticks { display:flex; justify-content:space-between; list-style:none; margin:0 0 10px; padding:0; font-size:13px; color:rgba(242,240,235,.3); }
.fhs-ticks li { cursor:pointer; transition:color .25s; } .fhs-ticks li.on { color:var(--fhs-fg); }
.fhs-line { height:1px; background:var(--fhs-line); position:relative; }
.fhs-bar { position:absolute; left:0; top:-.5px; height:2px; width:0; background:var(--fhs-fg); }

/* Phones / reduced motion -> vertical stack */
.fhs.is-mobile .fhs-stage { position:static; height:auto; overflow:visible; }
.fhs.is-mobile .fhs-track { flex-direction:column; width:auto; transform:none !important; }
.fhs.is-mobile .fhs-panel { width:auto; height:auto; border-right:0; border-bottom:1px solid var(--fhs-line); }
.fhs.is-mobile .fhs-simple { flex-direction:column; align-items:flex-start; padding:72px var(--fhs-pad); }
.fhs.is-mobile .fhs-img { width:100%; height:auto; }
.fhs.is-mobile .fhs-progress { display:none; }

/* Elementor editor: show panels as a plain horizontally-scrolling row */
.fhs.is-editor { --fhs-w:80vw; }
.fhs.is-editor .fhs-stage { position:relative; height:70vh; overflow-x:auto; overflow-y:hidden; }
.fhs.is-editor .fhs-progress { display:none; }

/* =================== Hamburger Menu =================== */
.fhm { --fhm-bars:#f2f0eb; --fhm-btnbg:rgba(15,15,15,.55); --fhm-bg:#0f0f0f; --fhm-fg:#f2f0eb; --fhm-muted:#8a8780; --fhm-line:rgba(255,255,255,.14); }
.fhm.is-fixed .fhm-burger { position:fixed; top:20px; right:clamp(20px,4vw,64px); z-index:10001; }
.admin-bar .fhm.is-fixed .fhm-burger { top:52px; }

.fhm-burger { width:48px; height:48px; border-radius:50%; border:1px solid var(--fhm-line); background:var(--fhm-btnbg); backdrop-filter:blur(8px);
              cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; transition:border-color .25s; }
.fhm-burger:hover { border-color:var(--fhm-bars); background:var(--fhm-btnbg); }
.fhm-bars { position:relative; width:20px; height:14px; display:block; }
.fhm-bars i { position:absolute; left:0; width:100%; height:2px; background:var(--fhm-bars); border-radius:2px; transition:transform .35s cubic-bezier(.2,.7,.2,1), opacity .2s, top .35s; }
.fhm-bars i:nth-child(1) { top:0; } .fhm-bars i:nth-child(2) { top:6px; } .fhm-bars i:nth-child(3) { top:12px; }
.fhm.is-open .fhm-bars i:nth-child(1) { top:6px; transform:rotate(45deg); }
.fhm.is-open .fhm-bars i:nth-child(2) { opacity:0; }
.fhm.is-open .fhm-bars i:nth-child(3) { top:6px; transform:rotate(-45deg); }

.fhm-panel { position:fixed; inset:0; z-index:10000; background:var(--fhm-bg); opacity:0; visibility:hidden; transition:opacity .4s, visibility .4s; display:flex; align-items:center; }
.fhm.is-open .fhm-panel { opacity:1; visibility:visible; }
body.fhm-lock { overflow:hidden; }
.fhm-inner { width:100%; padding:100px clamp(20px,4vw,64px) 48px; }
.fhm-label { margin:0; font-size:13px; color:var(--fhm-muted); letter-spacing:.02em; }
.fhm-list { list-style:none; margin:28px 0 0; padding:0; counter-reset:fhm; }
.fhm-list li { counter-increment:fhm; border-top:1px solid var(--fhm-line); margin:0; }
.fhm-list li:last-child { border-bottom:1px solid var(--fhm-line); }
.fhm-list a { display:flex; gap:20px; align-items:baseline; padding:14px 0; font-size:clamp(36px,8vw,104px); letter-spacing:-.035em; line-height:1.05;
              color:var(--fhm-muted); text-decoration:none; transition:color .25s, padding-left .4s cubic-bezier(.2,.7,.2,1); }
.fhm.has-numbers .fhm-list a::before { content:counter(fhm,decimal-leading-zero); font-size:13px; letter-spacing:.02em; min-width:28px; }
.fhm-list a:hover, .fhm-list .current-menu-item > a, .fhm-list .current_page_item > a { color:var(--fhm-fg); padding-left:14px; }

/* Editor: keep the overlay out of the way (button only) */
.elementor-editor-active .fhm.is-fixed .fhm-burger { position:static; }
.elementor-editor-active .fhm-panel { position:absolute; inset:auto; display:none; }

/* =================== Title alignment (per panel) =================== */
.fhs-simple.al-center .fhs-copy { text-align:center; margin-inline:auto; }
.fhs-simple.al-right  .fhs-copy { text-align:right;  margin-left:auto; }
.fhs-simple.al-center .fhs-text { margin-inline:auto; }
.fhs-simple.al-right  .fhs-text { margin-left:auto; }
.fhs-simple.al-center .fhs-btns { justify-content:center; }
.fhs-simple.al-right  .fhs-btns { justify-content:flex-end; }

/* =================== Feature grid (icon + title + text) =================== */
/* --fit (1 = normal) is lowered by the script when the grid would be taller than the screen.
   Spacing and icons shrink with --fit; body text shrinks more gently (--fitf); titles never shrink. */
.fhs-simple.has-feat { --fit:1; flex-direction:column; align-items:stretch; justify-content:center; gap:0; height:100%; padding:76px var(--fhs-pad) 84px; --fitf:calc(.7 + .3 * var(--fit)); }
.fhs-feat-fit { width:100%; }
.fhs-simple.has-feat .fhs-copy { flex:none; max-width:none; }
.fhs-simple.has-feat .fhs-kicker  { margin-bottom:calc(var(--fit) * clamp(8px,1.8vh,18px)); }
.fhs-simple.has-feat .fhs-heading { font-size:calc(var(--fitf) * clamp(28px,5.4vh,64px)); margin-bottom:calc(var(--fit) * clamp(10px,2.2vh,22px)); }
.fhs-simple.has-feat .fhs-text    { font-size:calc(var(--fitf) * clamp(14px,2.1vh,19px)); max-width:58em; }
.fhs-simple.has-feat .fhs-btns    { margin-top:calc(var(--fit) * clamp(14px,2.6vh,26px)); }

.fhs-feats { --fal:left; --fjc:flex-start; --fml:0; --fmr:auto;
             display:grid; grid-template-columns:repeat(var(--fcols,3), minmax(0,1fr));
             column-gap:calc(var(--fit,1) * clamp(24px,4vw,72px));
             row-gap:calc(var(--fit,1) * clamp(18px,3.6vh,44px));
             margin-top:calc(var(--fit,1) * clamp(22px,5vh,60px)); }
.fhs-feats.fa-center { --fal:center; --fjc:center;   --fml:auto; --fmr:auto; }
.fhs-feats.fa-right  { --fal:right;  --fjc:flex-end; --fml:auto; --fmr:0; }
.fhs-feat-item { text-align:var(--fal); min-width:0; }

.fhs-icon { display:block; width:calc(var(--fhs-icon,56px) * var(--fit,1)); height:calc(var(--fhs-icon,56px) * var(--fit,1));
            margin:0 var(--fmr) calc(var(--fit,1) * clamp(10px,2.2vh,22px)) var(--fml); color:var(--fhs-accent,#4db6ac); }
.fhs-icon svg, .fhs-icon img { display:block; width:100%; height:100%; transform-origin:50% 50%; }
.fhs-icon svg { overflow:visible; }
.fhs-icon.is-builtin svg { fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.fhs-icon.svg-outline svg, .fhs-icon.svg-outline svg * { fill:none; stroke:currentColor; }
.fhs-icon.svg-solid svg, .fhs-icon.svg-solid svg *     { fill:currentColor; stroke:none; }

.fhs-feat-title { margin:0; font-size:var(--fhs-ft,24px); line-height:1.25; font-weight:500; text-transform:uppercase; letter-spacing:.02em; color:var(--fhs-fg); }
.fhs-feat-title::after { content:""; display:block; width:calc(var(--fit,1) * 52px); height:2px; background:var(--fhs-accent,#4db6ac);
                         margin:calc(var(--fit,1) * clamp(8px,1.6vh,14px)) var(--fmr) 0 var(--fml); }
.fhs-feat-text { margin:calc(var(--fit,1) * clamp(10px,2vh,18px)) 0 0; font-size:calc(var(--fitf,1) * var(--fhs-fx,15px)); line-height:1.5; color:var(--fhs-muted); }
.fhs-simple.has-bg .fhs-feat-text { color:var(--fhs-fg); opacity:.85; }

@media (max-width:1100px){ .fhs-feats.cols-3, .fhs-feats.cols-4 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){  .fhs-feats { grid-template-columns:minmax(0,1fr) !important; } }

/* ---- icon + item animations (only when the script is running) ---- */
.fhs-js .fhs-feats.items-in .fhs-feat-item { opacity:0; transform:translateY(20px);
    transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--i,0) * 90ms); }
.fhs-js .fhs-feats.items-in.is-in .fhs-feat-item { opacity:1; transform:none; }

/* draw outline: each stroke traces itself (the script measures every shape and sets --len) */
.fhs-js .anim-draw .fhs-icon svg :is(path,circle,rect,line,polyline,polygon,ellipse) {
    stroke-dasharray:var(--len,1000px) 10000px; stroke-dashoffset:calc(var(--len,1000px) + 2px);
    transition:stroke-dashoffset 1.5s cubic-bezier(.65,0,.35,1); transition-delay:calc(var(--i,0) * 90ms + 200ms); }
.fhs-js .anim-draw.is-in .fhs-icon svg :is(path,circle,rect,line,polyline,polygon,ellipse) { stroke-dashoffset:0; }

.fhs-js .anim-pop .fhs-icon { transform:scale(.4); opacity:0; transition:transform .7s cubic-bezier(.34,1.56,.64,1), opacity .4s ease; transition-delay:calc(var(--i,0) * 90ms + 150ms); }
.fhs-js .anim-pop.is-in .fhs-icon { transform:none; opacity:1; }

@keyframes fhs-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }
@keyframes fhs-pulse { 0%,100% { transform:scale(1); }     50% { transform:scale(1.1); } }
@keyframes fhs-spin  { to { transform:rotate(360deg); } }
.fhs-js .anim-float.is-in .fhs-icon > * { animation:fhs-float 3.2s ease-in-out infinite; animation-delay:calc(var(--i,0) * -.5s); }
.fhs-js .anim-pulse.is-in .fhs-icon > * { animation:fhs-pulse 2.6s ease-in-out infinite; animation-delay:calc(var(--i,0) * -.4s); }
.fhs-js .anim-spin.is-in  .fhs-icon > * { animation:fhs-spin 14s linear infinite; }

/* Elementor editor: always show everything (no hidden-until-scrolled states) */
.fhs.is-editor .fhs-feat-item, .fhs.is-editor .anim-pop .fhs-icon { opacity:1 !important; transform:none !important; }
.fhs.is-editor .anim-draw .fhs-icon svg :is(path,circle,rect,line,polyline,polygon,ellipse) { stroke-dashoffset:0 !important; }

/* Phones / stacked layout: normal flow, no shrink */
.fhs.is-mobile .fhs-simple.has-feat { height:auto; padding:72px var(--fhs-pad); }

@media (prefers-reduced-motion:reduce) {
  .fhs-feat-item, .fhs-icon, .fhs-icon > * { animation:none !important; transition:none !important; opacity:1 !important; transform:none !important; }
  .fhs-icon svg * { stroke-dashoffset:0 !important; transition:none !important; }
}
