/* ============================================================ NAVKAR LGSF — stylesheet Dark (default) + light themes, flipped via . Two channels do most of the theming work: --w surface tint — lifts cards/inputs off the page background --k veil / scrim — the colour laid over photography Both are raw "r,g,b" triples so existing alphas keep working. ============================================================ */ :root, :root[data-theme="dark"]{ --w: 255,255,255; /* light tint on dark surfaces */ --k: 7,8,10; /* dark veil over images */ --ink: #07080a; --ink-2: #0d0f13; --ink-3: #14171d; --panel: #171a21; --line: rgba(var(--w),.09); --line-2: rgba(var(--w),.16); --gold: #F0BE3D; /* accent — text, strokes, icons */ --gold-2: #C8891E; --gold-3: #8A5A0F; --gold-soft: rgba(240,190,61,.13); --gold-line: rgba(240,190,61,.42); /* text gradient — re-tuned per theme for contrast */ --grad-gold: linear-gradient(115deg,#FBDD82 0%,#F0BE3D 38%,#C8891E 78%,#9A6410 100%); /* button / progress gradient — identical in both themes */ --grad-btn: linear-gradient(115deg,#FBDD82 0%,#F0BE3D 38%,#C8891E 78%,#9A6410 100%); --steel: #8FA3B8; --txt: #EDEFF3; --txt-2: #A7AEBB; --txt-3: #6E7684; /* photographic treatments */ --f-hero: grayscale(.55) contrast(1.12) brightness(.42); --f-break: grayscale(.7) brightness(.34) contrast(1.15); --f-stats: grayscale(1) brightness(.22); --f-cta: grayscale(.85) brightness(.26); --f-shot: grayscale(.28) brightness(.9); --veil-hero: radial-gradient(120% 90% at 18% 15%, rgba(240,190,61,.16), transparent 55%), radial-gradient(110% 80% at 85% 85%, rgba(70,110,150,.15), transparent 60%), linear-gradient(180deg, rgba(7,8,10,.88) 0%, rgba(7,8,10,.7) 40%, rgba(7,8,10,.96) 100%); --veil-break: linear-gradient(180deg, var(--ink) 0%, rgba(7,8,10,.4) 30%, rgba(7,8,10,.45) 70%, var(--ink) 100%); --veil-stats: linear-gradient(180deg, rgba(7,8,10,.9), rgba(7,8,10,.75)); --veil-cta: radial-gradient(80% 70% at 20% 30%, rgba(240,190,61,.14), transparent 60%), linear-gradient(180deg, var(--ink), rgba(7,8,10,.86)); --bp-stroke: rgba(240,190,61,.26); --shadow-lg: 0 30px 70px -25px rgba(0,0,0,.9); --shadow-xl: 0 40px 90px -40px rgba(0,0,0,.95); --f-disp: 'Sora', 'Segoe UI', system-ui, -apple-system, sans-serif; --f-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --shell: 1280px; --pad: clamp(20px, 5vw, 64px); --r: 16px; --ease: cubic-bezier(.22,.61,.36,1); } /* ---------- LIGHT THEME ---------- */ :root[data-theme="light"]{ --w: 18,24,34; /* dark tint on light surfaces */ --k: 255,255,255; /* white veil over images */ --ink: #FFFFFF; --ink-2: #F4F2EE; /* warm alternating band */ --ink-3: #EAE7E1; --panel: #FFFFFF; --line: rgba(var(--w),.13); --line-2: rgba(var(--w),.2); --gold: #96650A; /* darkened for text contrast on white */ --gold-2: #B47C11; --gold-3: #6E4708; --gold-soft: rgba(200,137,30,.14); --gold-line: rgba(150,101,10,.45); --grad-gold: linear-gradient(115deg,#C8891E 0%,#A06B0C 45%,#6E4708 100%); --txt: #14181F; --txt-2: #4C5563; --txt-3: #7A828F; --f-hero: grayscale(.35) contrast(1.02) brightness(1.02); --f-break: grayscale(.5) brightness(1.02) contrast(1); --f-stats: grayscale(1) brightness(1.06) contrast(.95); --f-cta: grayscale(.75) brightness(1.06) contrast(.95); --f-shot: grayscale(.15) brightness(1.02); /* Lighter than the dark theme's scrim, but still enough contrast for dark type. Left side is held opaque so the headline always has a clean field. */ --veil-hero: radial-gradient(120% 90% at 18% 15%, rgba(255,238,196,.6), transparent 58%), linear-gradient(100deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.8) 42%, rgba(255,255,255,.42) 100%), linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.3) 45%, rgba(255,255,255,.75) 100%); --veil-break: linear-gradient(180deg, var(--ink) 0%, rgba(255,255,255,.62) 28%, rgba(255,255,255,.66) 72%, var(--ink) 100%); --veil-stats: linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.7)); --veil-cta: radial-gradient(80% 70% at 20% 30%, rgba(255,236,188,.55), transparent 60%), linear-gradient(100deg, rgba(255,255,255,.93) 0%, rgba(255,255,255,.78) 50%, rgba(255,255,255,.5) 100%); --bp-stroke: rgba(150,101,10,.34); --shadow-lg: 0 24px 55px -24px rgba(20,25,35,.32); --shadow-xl: 0 34px 80px -40px rgba(20,25,35,.3); } /* Colour-only properties cross-fade when the theme flips. */ .theming, .theming *{ transition:background-color .45s var(--ease), border-color .45s var(--ease), color .45s var(--ease), fill .45s var(--ease) !important; } /* Light-theme touch-ups where a straight channel flip isn't enough */ :root[data-theme="light"] .when:hover .when__n{ color:rgba(150,101,10,.18); } :root[data-theme="light"] .kicker span{ border-color:rgba(150,101,10,.34); } :root[data-theme="light"] .hero__grid{ opacity:.42; } :root[data-theme="light"] .bcard{ background:linear-gradient(160deg, rgba(var(--w),.05), rgba(var(--w),.015)); } :root[data-theme="light"] .bcard--cta, :root[data-theme="light"] .pstep--end{ background:linear-gradient(150deg, rgba(200,137,30,.16), rgba(200,137,30,.04)); } :root[data-theme="light"] .speccard--feat{ background:linear-gradient(160deg, rgba(200,137,30,.12), rgba(var(--w),.02)); } :root[data-theme="light"] .ticker span{ color:var(--txt-3); } :root[data-theme="light"] .brand__logo{ filter:drop-shadow(0 3px 8px rgba(150,101,10,.28)); } :root[data-theme="light"] .member__ph img{ filter:grayscale(1) contrast(1.02) brightness(1.04); } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--ink); color:var(--txt); font-family:var(--f-body); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; /* `clip`, not `hidden`: overflow-x:hidden forces overflow-y to compute as `auto`, which turns into a scroll container and breaks every ScrollTrigger measurement on the page. `clip` contains the overflow without creating a scroller. */ overflow-x:clip; } body.is-locked{ overflow:hidden; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } button,input,select,textarea{ font:inherit; color:inherit; } svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad); } .grad{ background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } /* ---------- typography ---------- */ .h2{ font-family:var(--f-disp); font-weight:700; letter-spacing:-.03em; font-size:clamp(2rem,4.6vw,3.9rem); line-height:1.06; margin:.1em 0 .5em; } .h3{ font-family:var(--f-disp); font-weight:600; letter-spacing:-.02em; font-size:clamp(1.35rem,2.2vw,1.9rem); line-height:1.2; margin:0 0 1rem; } .kicker{ display:inline-flex; align-items:center; gap:.7rem; margin:0; font-family:var(--f-disp); font-size:.78rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); } .kicker span{ display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--gold-soft); border:1px solid rgba(240,190,61,.32); font-size:.7rem; letter-spacing:0; color:var(--gold); } .lead{ font-size:clamp(1rem,1.25vw,1.15rem); color:var(--txt-2); max-width:62ch; margin:0 0 1.7rem; } .lead--center{ margin-inline:auto; text-align:center; } .sechead{ max-width:820px; margin:0 auto clamp(2.5rem,5vw,4.5rem); text-align:center; } .sechead .kicker{ margin-bottom:1.1rem; } .sechead--tight{ margin-bottom:2rem; } /* ---------- buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6rem; padding:.95rem 1.7rem; border-radius:100px; border:1px solid transparent; font-family:var(--f-disp); font-weight:600; font-size:.92rem; letter-spacing:.01em; cursor:pointer; transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease); position:relative; } .btn svg{ width:17px; height:17px; flex:0 0 17px; transition:transform .35s var(--ease); } .btn:hover svg{ transform:translateX(4px); } .btn--gold{ background:var(--grad-btn); color:#191203; box-shadow:0 10px 34px -12px rgba(240,190,61,.55); } .btn--gold:hover{ transform:translateY(-3px); box-shadow:0 18px 44px -12px rgba(240,190,61,.7); } .btn--ghost{ border-color:var(--line-2); color:var(--txt); background:rgba(var(--w),.03); backdrop-filter:blur(6px); } .btn--ghost:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-3px); } .btn--sm{ padding:.72rem 1.25rem; font-size:.84rem; } .btn--full{ width:100%; } /* ============================================================ PRELOADER ============================================================ */ .preloader, .js .preloader{ display:none !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important; } .preloader.is-done{ opacity:0; visibility:hidden; } .preloader__inner{ text-align:center; } .preloader__mark{ width:74px; height:74px; margin-inline:auto; animation:spinmark 2.6s var(--ease) infinite; } @keyframes spinmark{ 0%,100%{transform:rotate(0) scale(1)} 50%{transform:rotate(180deg) scale(.86)} } .preloader__bar{ width:190px; height:2px; background:rgba(var(--w),.11); margin:26px auto 14px; overflow:hidden; } .preloader__bar span{ display:block; height:100%; width:0; background:var(--grad-btn); transition:width .25s linear; } .preloader__txt{ font-family:var(--f-disp); font-size:.68rem; letter-spacing:.42em; color:var(--txt-3); margin:0; } /* ============================================================ SCROLL PROGRESS ============================================================ */ .scroll-progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:900; background:transparent; } .scroll-progress span{ display:block; height:100%; width:0; background:var(--grad-btn); } /* ============================================================ NAV ============================================================ */ .nav{ position:fixed; top:0; left:0; right:0; z-index:800; transition:background .45s var(--ease), backdrop-filter .45s, border-color .45s, transform .5s var(--ease); border-bottom:1px solid transparent; } .nav.is-solid{ background:rgba(var(--k),.82); backdrop-filter:blur(18px) saturate(160%); border-bottom-color:var(--line); } .nav.is-hidden{ transform:translateY(-102%); } .nav__wrap{ max-width:var(--shell); margin-inline:auto; padding:.9rem var(--pad); display:flex; align-items:center; justify-content:space-between; gap:2rem; } .brand{ display:flex; align-items:center; gap:.75rem; } .brand__logo{ width:38px; height:38px; object-fit:contain; filter:drop-shadow(0 3px 10px rgba(240,190,61,.3)); } .brand__txt{ display:flex; flex-direction:column; line-height:1.1; } .brand__txt strong{ font-family:var(--f-disp); font-weight:800; font-size:1.02rem; letter-spacing:.19em; } .brand__txt em{ font-style:normal; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); } .nav__links{ display:flex; align-items:center; gap:.25rem; flex-wrap:nowrap; } .nav__links a{ position:relative; padding:.45rem .65rem; font-size:.82rem; font-weight:500; color:var(--txt-2); border-radius:100px; transition:color .3s var(--ease); white-space:nowrap !important; word-break:keep-all; display:inline-block; } .nav__links a::after{ content:''; position:absolute; left:.8rem; right:.8rem; bottom:.3rem; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease); } .nav__links a:hover{ color:var(--txt); } .nav__links a:hover::after{ transform:scaleX(1); } .nav__links a.is-active{ color:var(--gold); } .nav__cta{ margin-left:.6rem; background:var(--grad-btn); color:#191203 !important; padding:.65rem 1.35rem !important; font-weight:600; font-family:var(--f-disp); box-shadow:0 8px 26px -12px rgba(240,190,61,.6); white-space:nowrap; } .nav__cta::after{ display:none !important; } .nav__cta:hover{ transform:translateY(-2px); } /* ---------- theme toggle ---------- */ .themetog{ flex:0 0 auto; width:40px; height:40px; padding:10px; border-radius:50%; border:1px solid var(--line-2); background:rgba(var(--w),.04); color:var(--txt-2); cursor:pointer; position:relative; margin-left:.5rem; transition:color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease); } .themetog:hover{ color:var(--gold); border-color:var(--gold); transform:rotate(18deg); } .themetog svg{ position:absolute; inset:10px; width:auto; height:auto; transition:opacity .4s var(--ease), transform .5s var(--ease); } /* dark theme → offer the sun; light theme → offer the moon */ .themetog__moon{ opacity:0; transform:rotate(-70deg) scale(.5); } :root[data-theme="light"] .themetog__sun{ opacity:0; transform:rotate(70deg) scale(.5); } :root[data-theme="light"] .themetog__moon{ opacity:1; transform:none; } .nav__burger{ display:none; width:42px; height:42px; border:1px solid var(--line-2); border-radius:11px; background:rgba(var(--w),.03); cursor:pointer; padding:0; position:relative; } .nav__burger span{ position:absolute; left:11px; right:11px; height:1.6px; background:var(--txt); border-radius:2px; transition:transform .38s var(--ease), opacity .25s; } .nav__burger span:nth-child(1){ top:14px; } .nav__burger span:nth-child(2){ top:20px; } .nav__burger span:nth-child(3){ top:26px; } .nav__burger.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); } .nav__burger.is-open span:nth-child(2){ opacity:0; } .nav__burger.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); } /* ============================================================ HERO ============================================================ */ .hero{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; isolation:isolate; padding:clamp(100px,14vh,150px) 0 clamp(58px,9vh,104px); } .hero__media{ position:absolute; inset:-12% 0 -12%; z-index:-4; will-change:transform; } .hero__img{ width:100%; height:100%; object-fit:cover; filter:var(--f-hero); } .hero__veil{ position:absolute; inset:0; z-index:-3; background:var(--veil-hero); } .hero__grid{ position:absolute; inset:-20% -10%; z-index:-2; opacity:.5; will-change:transform; background-image: linear-gradient(rgba(var(--w),.045) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--w),.045) 1px, transparent 1px); background-size:78px 78px; mask-image:radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 78%); -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 78%); } .hero__blueprint{ position:absolute; inset:0; z-index:-1; color:var(--bp-stroke); will-change:transform; } .js .hero__blueprint{ opacity:0; } .hero__blueprint .bp path{ stroke-dasharray:1400; stroke-dashoffset:1400; animation:draw 3.2s var(--ease) forwards; } .is-loaded .hero__blueprint{ opacity:1; transition:opacity 1s .2s; } .hero__blueprint .bp path:nth-child(2n){ animation-delay:.25s } .hero__blueprint .bp path:nth-child(3n){ animation-delay:.5s } .hero__blueprint .bp path:nth-child(5n){ animation-delay:.75s } @keyframes draw{ to{ stroke-dashoffset:0 } } .hero__content{ position:relative; } .hero__eyebrow{ display:inline-flex; align-items:center; gap:.65rem; margin:0 0 clamp(1rem,2.4vh,1.6rem); padding:.42rem 1rem .42rem .6rem; border:1px solid var(--line-2); border-radius:100px; background:rgba(var(--w),.04); backdrop-filter:blur(10px); font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--txt-2); font-weight:500; } .hero__eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(240,190,61,.18); animation:pulse 2.4s infinite; } @keyframes pulse{ 50%{ box-shadow:0 0 0 9px rgba(240,190,61,0) } } .hero__title{ font-family:var(--f-disp); font-weight:800; letter-spacing:-.045em; font-size:clamp(1.3rem,3.8vw,3.3rem); line-height:.94; margin:0 0 clamp(1rem,2.2vh,1.6rem); } .hero__title .line{ display:block; overflow:hidden; } .hero__title .line > span{ display:block; } .js .hero__title .line > span{ transform:translateY(105%); transition:transform 1.15s var(--ease); } .is-loaded .hero__title .line:nth-child(1) > span{ transform:translateY(0); transition-delay:.15s; } .is-loaded .hero__title .line:nth-child(2) > span{ transform:translateY(0); transition-delay:.28s; } .is-loaded .hero__title .line:nth-child(3) > span{ transform:translateY(0); transition-delay:.41s; } .hero__sub{ font-size:clamp(1rem,1.45vw,1.24rem); color:var(--txt-2); max-width:56ch; margin:0 0 clamp(1.5rem,3.2vh,2.4rem); } .hero__sub strong{ color:var(--gold); font-weight:600; } .hero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-bottom:clamp(2rem,4.4vh,3.4rem); } .hero__facts{ display:flex; flex-wrap:wrap; gap:clamp(1.4rem,4vw,3.4rem); border-top:1px solid var(--line); padding-top:clamp(1.1rem,2.2vh,1.7rem); } .hero__facts div{ display:flex; flex-direction:column; } .hero__facts b{ font-family:var(--f-disp); font-size:clamp(1.35rem,2.5vw,2rem); font-weight:700; letter-spacing:-.03em; background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .hero__facts span{ font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-3); } .hero__scroll{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:.6rem; color:var(--txt-3); transition:opacity 1s 1.2s, color .3s; } .js .hero__scroll{ opacity:0; } .is-loaded .hero__scroll{ opacity:1; } .hero__scroll:hover{ color:var(--gold); } .hero__mouse{ width:22px; height:35px; border:1.4px solid currentColor; border-radius:12px; position:relative; } .hero__mouse i{ position:absolute; left:50%; top:7px; width:3px; height:6px; border-radius:2px; background:currentColor; transform:translateX(-50%); animation:wheel 1.9s var(--ease) infinite; } @keyframes wheel{ 0%{opacity:0;transform:translate(-50%,-4px)} 40%{opacity:1} 100%{opacity:0;transform:translate(-50%,12px)} } .hero__scrolltxt{ font-size:.6rem; letter-spacing:.32em; } /* ============================================================ TICKER ============================================================ */ .ticker{ border-block:1px solid var(--line); background:var(--ink-2); overflow:hidden; padding:.95rem 0; position:relative; z-index:2; } .ticker__track{ display:flex; gap:2.2rem; width:max-content; animation:marquee 42s linear infinite; } .ticker span{ font-family:var(--f-disp); font-size:.78rem; letter-spacing:.26em; color:var(--txt-3); white-space:nowrap; } .ticker i{ color:var(--gold); font-size:.5rem; font-style:normal; align-self:center; } @keyframes marquee{ to{ transform:translateX(-50%) } } /* ============================================================ SECTIONS ============================================================ */ .sec{ padding:clamp(5rem,11vw,9.5rem) 0; position:relative; } .sec--dark{ background:var(--ink-2); } .sec--dark::before{ content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(75% 55% at 50% 0%, rgba(240,190,61,.07), transparent 70%); } .sec--adv{ background:linear-gradient(180deg,var(--ink) 0%, var(--ink-2) 50%, var(--ink) 100%); } .sec--intro{ position:relative; } /* ---- split ---- */ .split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2.5rem,6vw,6rem); align-items:center; } /* ---------- ABOUT US & PILLARS ---------- */ .pillars{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:1.4rem; margin-bottom: clamp(3rem,6vw,5rem); } .pillar{ background:rgba(var(--w),.03); border:1px solid var(--line-2); border-radius:var(--r); padding:1.8rem 1.4rem; transition:all .35s var(--ease); } .pillar:hover{ border-color:var(--gold-line); background:rgba(240,190,61,.04); transform:translateY(-4px); } .pillar__ico{ width:36px; height:36px; margin-bottom:.9rem; } .pillar__ico svg{ width:100%; height:100%; display:block; } .pillar h4{ font-family:var(--f-disp); font-size:1.15rem; font-weight:600; margin:0 0 .6rem; color:var(--txt); } .pillar p{ font-size:.88rem; color:var(--txt-2); margin:0; line-height:1.55; } /* ---------- JOURNEY OF GROWTH CARD ---------- */ .journey-card{ background:linear-gradient(160deg, rgba(var(--w),.04), rgba(var(--w),.01)); border:1px solid var(--line-2); border-radius:var(--r); padding:clamp(1.6rem,4vw,3rem); box-shadow:var(--shadow-lg); } .journey-card__header{ text-align:center; margin-bottom:2.4rem; } .journey-card__header h3{ font-family:var(--f-disp); font-size:clamp(1.4rem,2.8vw,2.2rem); font-weight:700; margin:0 0 .4rem; background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .journey-card__header p{ font-size:.95rem; color:var(--txt-2); margin:0; font-style:italic; } .journey-grid{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; } .journey-step{ flex:1 1 240px; background:rgba(var(--w),.03); border:1px solid var(--line); border-radius:12px; padding:1.6rem 1.3rem; position:relative; transition:all .3s var(--ease); } .journey-step:hover{ border-color:var(--gold-line); background:rgba(240,190,61,.03); } .jbadge{ display:inline-flex; align-items:center; gap:.5rem; padding:.3rem .75rem; border-radius:100px; font-family:var(--f-disp); font-size:.9rem; font-weight:800; color:#191203; background:var(--grad-btn); margin-bottom:1rem; } .jbadge span{ font-size:.65rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(25,18,3,.8); } .jico{ width:48px !important; height:48px !important; max-width:48px !important; max-height:48px !important; flex:0 0 48px !important; margin-bottom:1rem; } .jico svg{ width:48px !important; height:48px !important; max-width:48px !important; max-height:48px !important; display:block !important; } .journey-step h4{ font-family:var(--f-disp); font-size:1.05rem; font-weight:700; margin:0 0 .2rem; color:var(--txt); } .journey-step em{ font-style:normal; font-size:.78rem; color:var(--gold); display:block; margin-bottom:.8rem; } .journey-step ul{ margin:0; padding-left:1.1rem; font-size:.84rem; color:var(--txt-2); } .journey-step li{ margin-bottom:.4rem; } .journey-arrow{ flex:0 0 auto; width:22px; height:22px; display:grid; place-items:center; opacity:.7; } .journey-arrow svg{ width:18px; height:18px; display:block; } @media (max-width: 860px) { .journey-grid{ flex-direction:column; } .journey-arrow{ transform:rotate(90deg); margin:.5rem 0; } } .journey-footer{ margin-top:2.2rem; padding:1.1rem; border-radius:10px; background:rgba(240,190,61,.08); border:1px dashed var(--gold-line); text-align:center; font-size:.92rem; color:var(--txt-2); } .journey-footer strong{ color:var(--gold); } /* ---------- HOW LGSF WORKS: COMPLETE PROCESS SECTION ---------- */ .lgsf-process-section{ margin-top:clamp(3.5rem,7vw,6rem); border-top:1px solid var(--line); padding-top:clamp(2.5rem,5vw,4.5rem); } .process-header{ text-align:center; margin-bottom:3rem; } .process-header h3{ font-family:var(--f-disp); font-size:clamp(1.4rem,2.8vw,2.2rem); font-weight:700; margin:.4rem 0 .5rem; background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .process-header p{ font-size:.96rem; color:var(--txt-2); margin:0; } .process-phases{ display:flex; flex-direction:column; gap:2.5rem; } .process-phase{ position:relative; } .phase-badge{ display:inline-block; padding:.4rem 1.1rem; border-radius:100px; font-family:var(--f-disp); font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; margin-bottom:1.4rem; } .phase-badge--factory{ background:rgba(240,190,61,.14); border:1px solid var(--gold-line); color:var(--gold); } .phase-badge--site{ background:rgba(56,189,248,.14); border:1px solid rgba(56,189,248,.35); color:#38BDF8; } .process-steps-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:1.2rem; } .pstep-card{ background:rgba(var(--w),.025); border:1px solid var(--line-2); border-radius:14px; padding:1.6rem 1.3rem; position:relative; transition:all .35s var(--ease); display:flex; flex-direction:column; justify-content:space-between; } .pstep-card:hover{ border-color:var(--gold-line); background:rgba(240,190,61,.04); transform:translateY(-4px); } .pstep-num{ font-family:var(--f-disp); font-size:1.8rem; font-weight:800; color:var(--gold); line-height:1; margin-bottom:.8rem; opacity:.85; display:block; } .pstep-card h4{ font-family:var(--f-disp); font-size:1.02rem; font-weight:600; margin:0 0 .5rem; color:var(--txt); } .pstep-card p{ font-size:.85rem; color:var(--txt-2); margin:0 0 1.2rem; line-height:1.55; } .pstep-tag{ display:inline-block; font-size:.7rem; font-weight:600; letter-spacing:.08em; padding:.25rem .6rem; border-radius:6px; background:rgba(var(--w),.05); color:var(--gold); width:max-content; } .split__text .kicker{ margin-bottom:1.2rem; } .minitable{ border-top:1px solid var(--line); margin-top:2.2rem; } .mt__row{ display:grid; grid-template-columns:150px 1fr; gap:1rem; padding:.9rem 0; border-bottom:1px solid var(--line); align-items:baseline; } .mt__row span{ font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--txt-3); } .mt__row b{ font-weight:500; color:var(--txt); font-size:.95rem; } .split__media{ position:relative; } .stackimg{ position:relative; border-radius:var(--r); overflow:hidden; border:1px solid var(--line-2); will-change:transform; } .stackimg img{ width:100%; aspect-ratio:4/3; object-fit:cover; } .stackimg__tag{ position:absolute; left:0; right:0; top:0; padding:.95rem 1.3rem 1.6rem; background:linear-gradient(rgba(var(--k),.92), transparent); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-2); } .stackimg--sm{ position:absolute; right:-6%; bottom:-14%; width:52%; box-shadow:var(--shadow-lg); } .stackimg--sm img{ aspect-ratio:1/1; } /* ---- chain ---- */ .chain{ margin-top:clamp(4rem,8vw,7rem); border-top:1px solid var(--line); padding-top:2.2rem; } .chain__label{ font-size:.74rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin:0 0 1.4rem; } .chain__list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.55rem; } .chain__list li{ display:flex; align-items:center; gap:.55rem; padding:.62rem 1.05rem; border:1px solid var(--line); border-radius:100px; background:rgba(var(--w),.025); font-size:.87rem; color:var(--txt-2); transition:border-color .35s var(--ease), color .35s, background .35s, transform .35s var(--ease); } .chain__list li:hover{ border-color:rgba(240,190,61,.5); color:var(--txt); background:var(--gold-soft); transform:translateY(-2px); } .chain__list li span{ font-family:var(--f-disp); font-size:.68rem; color:var(--gold); letter-spacing:.08em; } /* ============================================================ PARALLAX BREAK ============================================================ */ .break{ position:relative; min-height:min(72vh,620px); display:grid; place-items:center; overflow:hidden; isolation:isolate; padding:clamp(4rem,9vw,7rem) 0; } .break__media{ position:absolute; inset:-18% 0; z-index:-2; will-change:transform; } .break__media img{ width:100%; height:100%; object-fit:cover; filter:var(--f-break); } .break::after{ content:''; position:absolute; inset:0; z-index:-1; background:var(--veil-break); } .break__inner{ text-align:center; } .break__quote{ font-family:var(--f-disp); font-weight:600; letter-spacing:-.028em; font-size:clamp(1.5rem,4.2vw,3.3rem); line-height:1.18; margin:0; max-width:20ch; margin-inline:auto; } .break__quote em{ font-style:normal; color:var(--txt-3); text-decoration:line-through; text-decoration-color:rgba(240,190,61,.6); } /* ============================================================ BOTTLENECK CARDS ============================================================ */ .bgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; } .bcard{ padding:1.9rem 1.6rem; border:1px solid var(--line); border-radius:var(--r); background:linear-gradient(160deg, rgba(var(--w),.045), rgba(var(--w),.012)); position:relative; overflow:hidden; transition:border-color .45s var(--ease), transform .45s var(--ease), background .45s; } .bcard::before{ content:''; position:absolute; inset:0; opacity:0; transition:opacity .45s; background:radial-gradient(90% 90% at 50% 0%, rgba(240,190,61,.14), transparent 65%); } .bcard:hover{ border-color:rgba(240,190,61,.4); transform:translateY(-6px); } .bcard:hover::before{ opacity:1; } .bcard__ico{ width:38px; height:38px; padding:8px; border-radius:10px; margin-bottom:1rem; background:var(--gold-soft); border:1px solid rgba(240,190,61,.28); color:var(--gold); position:relative; display:grid; place-items:center; } .bcard__ico svg{ width:20px; height:20px; display:block; } .bcard h4{ font-family:var(--f-disp); font-size:1.04rem; font-weight:600; margin:0 0 .6rem; letter-spacing:-.015em; position:relative; } .bcard p{ margin:0; font-size:.9rem; color:var(--txt-2); position:relative; } .bcard--cta{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:1.3rem; background:linear-gradient(150deg, rgba(240,190,61,.13), rgba(240,190,61,.02)); border-color:rgba(240,190,61,.3); } .bcard--cta h4{ font-size:1.3rem; line-height:1.25; } /* ============================================================ COMPARISON TABLE ============================================================ */ .ctable{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:rgba(var(--w),.018); } .ctable__head, .ctable__row{ display:grid; grid-template-columns:1fr 1.5fr 1.25fr; gap:1.4rem; padding:1.15rem clamp(1rem,2.5vw,2rem); } .ctable__head{ background:rgba(var(--w),.045); border-bottom:1px solid var(--line); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--txt-3); font-weight:600; } .ctable__row{ border-bottom:1px solid var(--line); align-items:center; transition:background .4s var(--ease); position:relative; } .ctable__row:last-child{ border-bottom:0; } .ctable__row::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--grad-btn); transform:scaleY(0); transform-origin:top; transition:transform .45s var(--ease); } .ctable__row:hover{ background:rgba(240,190,61,.05); } .ctable__row:hover::before{ transform:scaleY(1); } .ctable .c1{ color:var(--txt-3); font-size:.95rem; } .ctable .c2{ color:var(--txt-2); font-size:.95rem; } .ctable .c3{ color:var(--txt); font-size:.95rem; } .ctable .c3 b{ color:var(--gold); font-family:var(--f-disp); font-weight:700; } /* ---- feats ---- */ .feats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:1.1rem; } .feat{ padding:1.8rem 1.6rem; border:1px solid var(--line); border-radius:var(--r); background:rgba(var(--w),.02); transition:transform .45s var(--ease), border-color .45s; } .feat:hover{ transform:translateY(-5px); border-color:rgba(240,190,61,.35); } .feat svg{ width:22px; height:22px; color:var(--gold); margin-bottom:.8rem; display:block; } .feat h4{ font-family:var(--f-disp); font-size:1rem; font-weight:600; margin:0 0 .45rem; } .feat p{ margin:0; font-size:.89rem; color:var(--txt-2); } /* ============================================================ STATS ============================================================ */ .stats{ position:relative; padding:clamp(4rem,8vw,7rem) 0; overflow:hidden; isolation:isolate; border-block:1px solid var(--line); } .stats__bg{ position:absolute; inset:-20% 0; z-index:-2; will-change:transform; } .stats__bg img{ width:100%; height:100%; object-fit:cover; filter:var(--f-stats); } .stats::after{ content:''; position:absolute; inset:0; z-index:-1; background:var(--veil-stats); } .stats__grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:1.5rem; text-align:center; } .stat b{ display:block; font-family:var(--f-disp); font-weight:800; letter-spacing:-.045em; font-size:clamp(2rem,4.4vw,3.6rem); line-height:1; white-space:nowrap; background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } /* direct child only — must not catch the counter inside */ .stat > span{ display:block; margin-top:.6rem; font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--txt-3); } /* ============================================================ WHEN TO CHOOSE ============================================================ */ .whengrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; } .when{ background:var(--ink); padding:2.2rem 1.7rem; position:relative; transition:background .45s var(--ease); } .when:hover{ background:var(--ink-3); } .when__n{ display:block; font-family:var(--f-disp); font-size:2.2rem; font-weight:800; letter-spacing:-.05em; color:transparent; -webkit-text-stroke:1px var(--gold-line); margin-bottom:1rem; transition:-webkit-text-stroke-color .45s, color .45s; } .when:hover .when__n{ color:rgba(240,190,61,.14); } .when h4{ font-family:var(--f-disp); font-size:1rem; font-weight:600; margin:0 0 .5rem; } .when p{ margin:0; font-size:.88rem; color:var(--txt-2); } /* ============================================================ APPLICATION SEGMENTS ============================================================ */ .segrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; } .seg{ position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--r); padding:1.9rem 1.7rem 1.7rem; min-height:290px; isolation:isolate; background:rgba(var(--w),.022); transition:border-color .5s var(--ease), transform .5s var(--ease); } .seg::before{ content:''; position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; opacity:0; transform:scale(1.14); transition:opacity .6s var(--ease), transform 1.1s var(--ease); filter:grayscale(.5); } /* paths are relative to this stylesheet (css/), hence ../assets */ .seg--industrial::before { background-image:url('../assets/img/frame-wide.jpg'); } .seg--residential::before{ background-image:url('../assets/img/villa-roof.jpg'); } .seg--commercial::before { background-image:url('../assets/img/facade-glass.jpg'); } .seg--public::before { background-image:url('../assets/img/school.jpg'); } .seg--extension::before { background-image:url('../assets/img/g2-frame.jpg'); } .seg--other::before { background-image:url('../assets/img/portacabin.jpg'); } .seg::after{ content:''; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .6s; background:linear-gradient(180deg, rgba(var(--k),.62), rgba(var(--k),.93)); } .seg:hover{ border-color:rgba(240,190,61,.45); transform:translateY(-6px); } .seg:hover::before{ opacity:.5; transform:scale(1); } .seg:hover::after{ opacity:1; } .seg__top{ display:flex; align-items:baseline; gap:.9rem; margin-bottom:1.2rem; padding-bottom:1.1rem; border-bottom:1px solid var(--line); } .seg__ix{ font-family:var(--f-disp); font-size:.74rem; letter-spacing:.16em; color:var(--gold); } .seg__top h4{ font-family:var(--f-disp); font-size:1.28rem; font-weight:600; margin:0; letter-spacing:-.02em; } .seg ul{ list-style:none; margin:0; padding:0; columns:2; column-gap:1.2rem; } .seg li{ font-size:.88rem; color:var(--txt-2); padding:.24rem 0 .24rem .95rem; position:relative; break-inside:avoid; } .seg li::before{ content:''; position:absolute; left:0; top:.82em; width:4px; height:4px; border-radius:50%; background:var(--gold); opacity:.7; } /* ============================================================ TABS / SYSTEMS ============================================================ */ .systems{ margin-top:clamp(4.5rem,9vw,8rem); } .tabs__bar{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem; justify-content:center; } .tab{ padding:.72rem 1.4rem; border-radius:100px; border:1px solid var(--line); background:rgba(var(--w),.025); color:var(--txt-2); font-family:var(--f-disp); font-size:.87rem; font-weight:500; cursor:pointer; transition:all .35s var(--ease); } .tab:hover{ color:var(--txt); border-color:var(--line-2); } .tab.is-active{ background:var(--grad-btn); color:#191203; border-color:transparent; font-weight:600; } .tabs__panels{ position:relative; } .panel{ display:none; } .panel.is-active{ display:block; animation:fadeUp .55s var(--ease); } @keyframes fadeUp{ from{ opacity:0; transform:translateY(16px) } } .panel__grid{ display:grid; grid-template-columns:1.35fr .65fr; gap:2rem; align-items:start; } .panel__fig{ margin:0; border-radius:var(--r); overflow:hidden; border:1px solid var(--line-2); position:sticky; top:110px; } .panel__fig img{ width:100%; aspect-ratio:3/4; object-fit:cover; } /* data tables */ .dtable{ border:1px solid var(--line); border-radius:12px; overflow:hidden; } .dt__head, .dt__row{ display:grid; gap:1rem; padding:.9rem 1.15rem; } .dtable .dt__head, .dtable .dt__row{ grid-template-columns:1fr 1fr 1.5fr; } .dtable--2 .dt__head, .dtable--2 .dt__row{ grid-template-columns:.8fr 2fr; } .dtable--3 .dt__head, .dtable--3 .dt__row{ grid-template-columns:1fr 1.35fr 1fr; } .dt__head{ background:rgba(var(--w),.05); border-bottom:1px solid var(--line); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--txt-3); font-weight:600; } .dt__row{ border-bottom:1px solid var(--line); font-size:.88rem; color:var(--txt-2); transition:background .35s; } .dt__row:last-child{ border-bottom:0; } .dt__row:hover{ background:rgba(240,190,61,.05); } .dt__row span:first-child{ color:var(--txt); font-weight:500; } .buildup{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1.4rem; } .bu{ padding:1.3rem 1.4rem; border:1px solid var(--line); border-radius:12px; background:rgba(var(--w),.022); } .bu h5{ font-family:var(--f-disp); font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin:0 0 .8rem; } .bu ol{ margin:0; padding-left:1.1rem; font-size:.88rem; color:var(--txt-2); } .bu li{ padding:.18rem 0; } .note{ margin-top:1.2rem; font-size:.9rem; color:var(--txt-2); } .note b{ color:var(--gold); } .ticklist{ list-style:none; margin:0; padding:0; } .ticklist li{ padding:.85rem 0 .85rem 2rem; border-bottom:1px solid var(--line); position:relative; color:var(--txt-2); font-size:.95rem; } .ticklist li::before{ content:''; position:absolute; left:.35rem; top:1.35em; width:8px; height:8px; border-right:1.6px solid var(--gold); border-bottom:1.6px solid var(--gold); transform:rotate(45deg) translateY(-50%); } .ticklist b{ color:var(--gold); } .spgrid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; } .spgrid > div{ padding:1.5rem; border:1px solid var(--line); border-radius:12px; background:rgba(var(--w),.022); transition:border-color .4s, transform .4s var(--ease); } .spgrid > div:hover{ border-color:rgba(240,190,61,.4); transform:translateY(-4px); } .spgrid h5{ font-family:var(--f-disp); font-size:1rem; margin:0 0 .4rem; } .spgrid p{ margin:0; font-size:.88rem; color:var(--txt-2); } /* ============================================================ SPECIFICATIONS ============================================================ */ .specrow{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; } .specrow--b{ margin-top:1.4rem; } .speccard{ padding:clamp(1.5rem,3vw,2.2rem); border:1px solid var(--line); border-radius:var(--r); background:rgba(var(--w),.02); } .speccard--feat{ background:linear-gradient(160deg, rgba(240,190,61,.09), rgba(var(--w),.015)); border-color:rgba(240,190,61,.24); } .speccard__t{ display:flex; align-items:center; gap:.75rem; font-family:var(--f-disp); font-size:1.1rem; font-weight:600; margin:0 0 1.4rem; letter-spacing:-.015em; } .speccard__t span{ display:inline-grid; place-items:center; width:27px; height:27px; border-radius:8px; background:var(--gold-soft); border:1px solid rgba(240,190,61,.3); color:var(--gold); font-size:.7rem; } .capgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; } .cap{ background:rgba(var(--k),.85); padding:1.2rem .9rem; text-align:center; } .cap b{ display:block; font-family:var(--f-disp); font-size:1.28rem; font-weight:700; letter-spacing:-.03em; color:var(--gold); } .cap span{ display:block; margin-top:.3rem; font-size:.72rem; letter-spacing:.08em; color:var(--txt-3); } .codes{ margin-top:1.6rem; } .codes__l{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--txt-3); margin:0 0 .8rem; } .codes__chips{ display:flex; flex-wrap:wrap; gap:.45rem; } .codes__chips span{ padding:.42rem .85rem; border:1px solid var(--line-2); border-radius:100px; font-size:.76rem; color:var(--txt-2); background:rgba(var(--w),.03); } /* ============================================================ HORIZONTAL PROCESS SECTION ============================================================ */ .hsec{ height:520vh; position:relative; background:var(--ink-2); } .hsec__sticky{ position:sticky; top:0; height:100vh; overflow:hidden; display:flex; flex-direction:column; justify-content:center; gap:2.5rem; } .hsec__sticky::before{ content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(60% 60% at 78% 50%, rgba(240,190,61,.08), transparent 70%); } .hsec__head{ position:relative; } .hsec__head .kicker{ margin-bottom:.9rem; } .hsec__head .h2{ margin-bottom:.4rem; } .hsec__hint{ display:inline-flex; align-items:center; gap:.5rem; margin:0; font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; color:var(--txt-3); } .hsec__hint svg{ width:16px; height:16px; color:var(--gold); animation:nudge 1.8s var(--ease) infinite; } @keyframes nudge{ 50%{ transform:translateX(6px) } } .hsec__track{ display:flex; gap:1.4rem; padding-inline:var(--pad); width:max-content; will-change:transform; position:relative; } .pstep{ width:min(400px,76vw); flex:0 0 auto; padding:2.1rem 1.9rem; border:1px solid var(--line); border-radius:var(--r); background:linear-gradient(165deg, rgba(var(--w),.05), rgba(var(--w),.012)); backdrop-filter:blur(4px); position:relative; overflow:hidden; transition:border-color .5s var(--ease); } .pstep:hover{ border-color:rgba(240,190,61,.42); } .pstep__n{ display:block; font-family:var(--f-disp); font-size:3.4rem; font-weight:800; letter-spacing:-.06em; line-height:1; color:transparent; -webkit-text-stroke:1.2px var(--gold-line); margin-bottom:1.1rem; } .pstep h4{ font-family:var(--f-disp); font-size:1.25rem; font-weight:600; margin:0 0 .7rem; letter-spacing:-.02em; } .pstep p{ margin:0 0 1.2rem; font-size:.92rem; color:var(--txt-2); } .pstep ul{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); } .pstep li{ padding:.62rem 0 .62rem 1.1rem; border-bottom:1px solid var(--line); position:relative; font-size:.85rem; color:var(--txt-2); } .pstep li:last-child{ border-bottom:0; } .pstep li::before{ content:''; position:absolute; left:0; top:1.1em; width:5px; height:5px; background:var(--gold); border-radius:50%; } .pstep--end{ background:linear-gradient(155deg, rgba(240,190,61,.15), rgba(240,190,61,.02)); border-color:rgba(240,190,61,.32); } .hsec__bar{ position:absolute; left:var(--pad); right:var(--pad); bottom:34px; height:2px; background:rgba(var(--w),.1); } .hsec__bar span{ display:block; height:100%; width:0; background:var(--grad-btn); } /* ============================================================ TRANSPORT / ERECTION ============================================================ */ .tsplit{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; } .tfig{ margin:2rem 0 0; border-radius:var(--r); overflow:hidden; border:1px solid var(--line-2); will-change:transform; } .tfig img{ width:100%; aspect-ratio:16/10; object-fit:cover; } .timeline{ list-style:none; margin:0; padding:0; position:relative; } .timeline::before{ content:''; position:absolute; left:17px; top:14px; bottom:14px; width:1px; background:var(--line); } .timeline li{ display:flex; gap:1.2rem; padding:0 0 1.5rem; position:relative; } .timeline li > span{ flex:0 0 36px; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-family:var(--f-disp); font-size:.82rem; font-weight:600; color:var(--gold); background:var(--ink-2); border:1px solid rgba(240,190,61,.4); position:relative; z-index:1; transition:background .4s, color .4s; } .timeline li:hover > span{ background:var(--grad-btn); color:#191203; border-color:transparent; } .timeline h5{ font-family:var(--f-disp); font-size:1rem; font-weight:600; margin:.35rem 0 .25rem; } .timeline p{ margin:0; font-size:.88rem; color:var(--txt-2); } /* ============================================================ GALLERY ============================================================ */ .sec--proj{ background:linear-gradient(180deg, var(--ink), var(--ink-2)); } .gal{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; padding-inline:var(--pad); max-width:1560px; margin-inline:auto; align-items:start; } .gal__col{ display:flex; flex-direction:column; gap:1rem; will-change:transform; } .gal__col:nth-child(2){ margin-top:-2.5rem; } .gal__col:nth-child(4){ margin-top:-4.5rem; } .shot{ margin:0; border-radius:14px; overflow:hidden; position:relative; border:1px solid var(--line); background:var(--ink-3); } .shot img{ width:100%; object-fit:cover; transition:transform 1.1s var(--ease), filter .6s; filter:var(--f-shot); } .shot:nth-child(odd) img{ aspect-ratio:4/5; } .shot:nth-child(even) img{ aspect-ratio:4/3; } .shot figcaption{ position:absolute; left:0; right:0; bottom:0; padding:2.2rem 1.1rem .95rem; background:linear-gradient(transparent, rgba(var(--k),.94)); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--txt-2); transform:translateY(8px); opacity:0; transition:.5s var(--ease); } .shot:hover img{ transform:scale(1.07); filter:grayscale(0) brightness(1); } .shot:hover figcaption{ transform:translateY(0); opacity:1; } /* ============================================================ TEAM ============================================================ */ .team{ display:grid; gap:1rem; } .member{ display:grid; grid-template-columns:180px 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; padding:1.6rem; border:1px solid var(--line); border-radius:var(--r); background:rgba(var(--w),.02); transition:border-color .5s var(--ease), background .5s, transform .5s var(--ease); } .member:hover{ border-color:rgba(240,190,61,.35); background:rgba(240,190,61,.04); transform:translateX(6px); } .member__ph{ border-radius:12px; overflow:hidden; border:1px solid var(--line-2); } .member__ph img{ width:100%; aspect-ratio:1/1; object-fit:cover; filter:grayscale(1) contrast(1.05); transition:filter .6s; } .member:hover .member__ph img{ filter:grayscale(0); } .member h4{ font-family:var(--f-disp); font-size:1.3rem; font-weight:600; margin:0; letter-spacing:-.02em; } .member__role{ margin:.15rem 0 .8rem; font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); } .member__body p:last-child{ margin:0; font-size:.93rem; color:var(--txt-2); max-width:75ch; } /* ============================================================ CTA / CONTACT ============================================================ */ .cta{ position:relative; padding:clamp(5rem,10vw,8.5rem) 0; overflow:hidden; isolation:isolate; } .cta__bg{ position:absolute; inset:-20% 0; z-index:-2; will-change:transform; } .cta__bg img{ width:100%; height:100%; object-fit:cover; filter:var(--f-cta); } .cta::after{ content:''; position:absolute; inset:0; z-index:-1; background:var(--veil-cta); } .cta__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2.5rem,6vw,5rem); align-items:start; } .cta .kicker{ margin-bottom:1.1rem; } .contacts{ display:grid; gap:.75rem; margin-top:2.2rem; } .ccard{ display:flex; align-items:flex-start; gap:1rem; padding:1.2rem 1.35rem; border:1px solid var(--line); border-radius:14px; background:rgba(var(--w),.035); backdrop-filter:blur(8px); transition:border-color .4s, transform .4s var(--ease), background .4s; } .ccard:not(.ccard--static):hover{ border-color:rgba(240,190,61,.5); transform:translateX(5px); background:rgba(240,190,61,.07); } .ccard svg{ width:18px; height:18px; flex:0 0 18px; color:var(--gold); margin-top:.25rem; display:block; } .ccard span{ display:flex; flex-direction:column; font-size:.92rem; color:var(--txt-2); } .ccard b{ font-family:var(--f-disp); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--txt-3); font-weight:600; margin-bottom:.25rem; } .ccard__mail{ color:var(--txt-2); transition:color .3s; padding:.15rem 0; text-decoration:none; word-break:break-all; } .ccard__mail:hover{ color:var(--gold); } .form{ padding:clamp(1.6rem,3vw,2.4rem); border:1px solid var(--line-2); border-radius:var(--r); background:rgba(var(--k),.82); backdrop-filter:blur(16px); box-shadow:var(--shadow-xl); } .form h3{ font-family:var(--f-disp); font-size:1.2rem; font-weight:600; margin:0 0 1.5rem; letter-spacing:-.02em; } .form label{ display:block; margin-bottom:1rem; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--txt-3); font-weight:600; } .form input, .form select, .form textarea{ width:100%; margin-top:.5rem; padding:.85rem 1rem; border-radius:10px; border:1px solid var(--line-2); background:rgba(var(--w),.04); font-size:.93rem; letter-spacing:normal; text-transform:none; font-weight:400; color:var(--txt); transition:border-color .3s, background .3s; font-family:var(--f-body); } .form input::placeholder, .form textarea::placeholder{ color:var(--txt-3); } .form input:focus, .form select:focus, .form textarea:focus{ outline:none; border-color:var(--gold); background:rgba(240,190,61,.06); } .form select option{ background:var(--ink-3); color:var(--txt); } .form textarea{ resize:vertical; } .f2{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; } .form .btn{ margin-top:.5rem; } .form__note{ margin:.9rem 0 0; font-size:.83rem; min-height:1.2em; color:var(--gold); text-align:center; } .form input.err, .form textarea.err{ border-color:#e5484d; } /* ============================================================ FOOTER ============================================================ */ .foot{ background:var(--ink-2); border-top:1px solid var(--line); padding-top:clamp(3.5rem,7vw,5.5rem); } .foot__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:2.5rem; padding-bottom:3rem; } .brand--foot{ margin-bottom:1.2rem; } .foot__brand p{ margin:0 0 1.2rem; font-size:.9rem; color:var(--txt-2); max-width:34ch; } .foot__x{ display:inline-flex; align-items:center; gap:.5rem; font-size:.85rem; color:var(--gold); border-bottom:1px solid rgba(240,190,61,.3); padding-bottom:.25rem; transition:gap .35s var(--ease); } .foot__x:hover{ gap:.85rem; } .foot__x svg{ width:14px; height:14px; } .foot__col h5{ font-family:var(--f-disp); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--txt-3); margin:0 0 1.1rem; font-weight:600; } .foot__col a, .foot__col span{ display:block; font-size:.9rem; color:var(--txt-2); padding:.3rem 0; transition:color .3s; } .foot__col a:hover{ color:var(--gold); } .foot__bar{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; border-top:1px solid var(--line); padding-block:1.5rem; } .foot__bar p{ margin:0; font-size:.8rem; color:var(--txt-3); } /* ============================================================ BACK TO TOP ============================================================ */ .totop{ position:fixed; right:22px; bottom:22px; z-index:700; width:46px; height:46px; padding:13px; border-radius:50%; border:1px solid var(--line-2); background:rgba(var(--k),.9); backdrop-filter:blur(10px); color:var(--txt-2); opacity:0; visibility:hidden; transform:translateY(14px); transition:.45s var(--ease); } .totop.is-on{ opacity:1; visibility:visible; transform:translateY(0); } .totop:hover{ border-color:var(--gold); color:var(--gold); } /* ============================================================ REVEAL ============================================================ */ /* hidden only when JS can bring it back */ .js .reveal{ opacity:0; transform:translateY(30px); transition:opacity .9s var(--ease), transform .9s var(--ease); } .js .reveal.is-in{ opacity:1; transform:none; } /* GSAP tweens these directly — the CSS transition would fight it */ .gsap-on .reveal{ transition:none; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1180px){ .bgrid{ grid-template-columns:repeat(2,1fr); } .whengrid{ grid-template-columns:repeat(2,1fr); } .segrid{ grid-template-columns:repeat(2,1fr); } .feats{ grid-template-columns:repeat(2,1fr); } .stats__grid{ grid-template-columns:repeat(3,1fr); gap:2rem 1rem; } .gal{ grid-template-columns:repeat(3,1fr); } .gal__col--hide{ display:none; } .nav__links{ gap:.1rem; } .nav__links a{ padding:.5rem .6rem; font-size:.82rem; } } @media (max-width:980px){ .nav__burger{ display:block; } .nav__links{ position:fixed; inset:0 0 0 auto; width:min(340px,86vw); flex-direction:column; align-items:stretch; justify-content:center; gap:.25rem; background:rgba(var(--k),.97); backdrop-filter:blur(24px); border-left:1px solid var(--line); padding:2rem 1.6rem; transform:translateX(102%); transition:transform .55s var(--ease); } .nav__links.is-open{ transform:translateX(0); } .nav__links a{ font-size:1.05rem; padding:.85rem .6rem; border-bottom:1px solid var(--line); border-radius:0; } .nav__links a::after{ display:none; } .nav__cta{ margin:1.2rem 0 0; border-radius:100px; text-align:center; border-bottom:0 !important; } .split{ grid-template-columns:1fr; } .split__media{ margin-top:2rem; } .stackimg--sm{ position:relative; right:auto; bottom:auto; width:60%; margin:-14% 0 0 auto; } .panel__grid{ grid-template-columns:1fr; } .panel__fig{ position:relative; top:0; order:-1; } .panel__fig img{ aspect-ratio:16/9; } .specrow{ grid-template-columns:1fr; } .tsplit{ grid-template-columns:1fr; } .cta__grid{ grid-template-columns:1fr; } .foot__grid{ grid-template-columns:1fr 1fr; gap:2rem; } .member{ grid-template-columns:120px 1fr; } .hsec{ height:460vh; } } @media (max-width:720px){ .ctable__head{ display:none; } .ctable__row{ grid-template-columns:1fr; gap:.4rem; padding:1.2rem var(--pad); } .ctable .c1{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); } .ctable__row::before{ transform:scaleY(1); opacity:.4; } .bgrid{ grid-template-columns:1fr; } .whengrid{ grid-template-columns:1fr; } .segrid{ grid-template-columns:1fr; } .feats{ grid-template-columns:1fr; } .stats__grid{ grid-template-columns:repeat(2,1fr); } .gal{ grid-template-columns:repeat(2,1fr); } .gal__col:nth-child(2),.gal__col:nth-child(4){ margin-top:0; } .buildup{ grid-template-columns:1fr; } .spgrid{ grid-template-columns:1fr; } .capgrid{ grid-template-columns:repeat(2,1fr); } .f2{ grid-template-columns:1fr; } .foot__grid{ grid-template-columns:1fr; } .member{ grid-template-columns:1fr; } .member__ph{ width:110px; } .seg ul{ columns:1; } .mt__row{ grid-template-columns:1fr; gap:.2rem; } .dtable .dt__head, .dtable--2 .dt__head, .dtable--3 .dt__head{ display:none; } .dtable .dt__row, .dtable--2 .dt__row, .dtable--3 .dt__row{ grid-template-columns:1fr; gap:.25rem; padding:1rem 1.15rem; } .dt__row span:first-child{ color:var(--gold); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; } .hsec{ height:auto; } .hsec__sticky{ position:static; height:auto; padding:clamp(4rem,10vw,6rem) 0; } .hsec__track{ flex-direction:column; width:auto; transform:none !important; } .pstep{ width:auto; } .hsec__bar, .hsec__hint{ display:none; } .hero{ min-height:auto; padding:130px 0 80px; } .hero__scroll{ display:none; } .totop{ right:14px; bottom:14px; } } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } .reveal{ opacity:1; transform:none; } .hero__title .line > span{ transform:none; } [data-parallax]{ transform:none !important; } }