/* ========================================================================= HAVEN CAPITAL — Landing Page Bespoke editorial design system ========================================================================= */ :root{ /* palette */ --bone: #F4F0E8; --bone-2: #EBE4D6; --bone-3: #E0D8C7; --ink: #14100D; --ink-2: #1C1611; --ink-3: #2A221B; --red: #E0382A; --red-2: #C32A1D; --red-deep: #9A2014; --cream: #F4EFE5; --paper-line: rgba(20,16,13,0.12); --ink-line: rgba(244,239,229,0.14); /* text */ --tx: #14100D; --tx-soft: rgba(20,16,13,0.60); --tx-faint: rgba(20,16,13,0.40); --tx-inv: #F4EFE5; --tx-inv-soft: rgba(244,239,229,0.62); --tx-inv-faint: rgba(244,239,229,0.40); /* type */ --display: "Schibsted Grotesk", system-ui, sans-serif; --serif: "Newsreader", Georgia, serif; /* layout */ --maxw: 1480px; --pad: clamp(20px, 5vw, 88px); --nav-h: 78px; /* motion */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-soft: cubic-bezier(0.4, 0, 0.1, 1); } /* ---------- reset ---------- */ *{ margin:0; padding:0; box-sizing:border-box; } html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } html.lenis{ height:auto; } body{ font-family: var(--display); background: var(--bone); color: var(--tx); overflow-x: hidden; font-weight: 400; line-height: 1.5; font-size: 17px; } ::selection{ background: var(--red); color: var(--cream); } a{ color: inherit; text-decoration: none; } img{ display:block; max-width:100%; } button{ font-family: inherit; cursor: pointer; border: none; background: none; } /* ---------- utilities ---------- */ .wrap{ width:100%; max-width: var(--maxw); margin-inline:auto; padding-inline: var(--pad); } .serif{ font-family: var(--serif); font-weight: 400; } .serif-i{ font-family: var(--serif); font-style: italic; font-weight: 400; } .red{ color: var(--red); } .eyebrow{ font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; display:inline-flex; align-items:center; gap:11px; color: var(--tx-soft); } .eyebrow::before{ content:""; width: 26px; height:1.5px; background: var(--red); display:inline-block; } .eyebrow.inv{ color: var(--tx-inv-soft); } /* reveal animation base — only hidden when JS is active (.js on ). No-JS or JS-failure leaves content fully visible. */ [data-reveal]{ opacity: 1; transform: none; } .js [data-reveal]{ opacity: 0; transform: translateY(26px); } .js [data-reveal].in{ animation: revealIn 1s var(--ease) var(--d, 0ms) both; } @keyframes revealIn{ from{ opacity:0; transform: translateY(26px); } to{ opacity:1; transform: none; } } .clip{ display:block; overflow:hidden; } .clip > *{ display:block; transform: none; } .js .clip > *{ transform: translateY(110%); } .js .clip.in > *{ animation: clipIn 1.05s var(--ease) var(--d, 0ms) both; } @keyframes clipIn{ from{ transform: translateY(110%); } to{ transform: none; } } /* JS locks this on after the animation window — guarantees the end state */ [data-reveal].reveal-done, .clip.reveal-done > *{ opacity:1 !important; transform:none !important; animation:none !important; } @media (prefers-reduced-motion: reduce){ .js [data-reveal]{ opacity:1 !important; transform:none !important; animation:none !important; } .js .clip > *{ transform:none !important; animation:none !important; } } /* ========================================================================= SCROLL PROGRESS ========================================================================= */ .progress{ position: fixed; top:0; left:0; height:3px; width:100%; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; z-index: 200; mix-blend-mode: normal; } /* ========================================================================= NAV ========================================================================= */ .nav{ position: fixed; top:0; left:0; width:100%; height: var(--nav-h); display:flex; align-items:center; z-index: 150; transition: background .5s var(--ease), backdrop-filter .5s var(--ease), border-color .5s var(--ease); border-bottom: 1px solid transparent; } .nav.scrolled{ background: rgba(244,240,232,0.80); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border-bottom: 1px solid var(--paper-line); } .nav .wrap{ display:flex; align-items:center; justify-content:space-between; } .brand{ font-weight: 800; letter-spacing: 0.04em; font-size: 17px; text-transform: uppercase; display:flex; align-items:center; gap: 9px; } .brand .mark{ width: 17px; height: 17px; position: relative; display:inline-block; } .brand .mark::before, .brand .mark::after{ content:""; position:absolute; inset:0; border: 2px solid var(--ink); } .brand .mark::after{ background: var(--red); border-color: var(--red); transform: translate(4px,4px); } .brand-logo{ width: 32px; height: 32px; flex-shrink:0; display:block; } .nav-links{ display:flex; align-items:center; gap: 34px; } .nav-links a{ font-size: 13.5px; font-weight: 500; letter-spacing: 0.01em; color: var(--tx-soft); position: relative; transition: color .3s var(--ease); } .nav-links a:not(.nav-cta)::after{ content:""; position:absolute; left:0; bottom:-5px; height:1.5px; width:100%; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s var(--ease); } .nav-links a:not(.nav-cta):hover{ color: var(--ink); } .nav-links a:not(.nav-cta):hover::after{ transform: scaleX(1); } .nav-cta{ background: var(--ink); color: var(--cream) !important; padding: 11px 20px; border-radius: 100px; font-weight:600 !important; letter-spacing: 0.01em; transition: background .35s var(--ease), color .35s var(--ease), transform .2s var(--ease); } .nav-cta:hover{ background: var(--red); } .nav-burger{ display:none; align-items:center; gap: 14px; } .nav-toggle{ display:none; width: 38px; height: 38px; border-radius:50%; background: transparent; border: none; flex-direction:column; align-items:center; justify-content:center; gap: 5px; cursor:pointer; } .nav-toggle span{ display:block; width: 20px; height: 2px; background: var(--ink); transition: transform .35s var(--ease), opacity .35s var(--ease); } .nav-toggle[aria-expanded="true"] span:first-child{ transform: translateY(3.5px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:last-child{ transform: translateY(-3.5px) rotate(-45deg); } .mobile-menu{ display:none; position: fixed; top: var(--nav-h); left:0; width:100%; background: var(--bone); border-bottom: 1px solid var(--paper-line); flex-direction:column; padding: 8px var(--pad) 22px; transform: translateY(-8px); opacity:0; pointer-events:none; transition: transform .35s var(--ease), opacity .3s var(--ease); z-index: 149; max-height: calc(100vh - var(--nav-h)); overflow-y:auto; } .mobile-menu.open{ transform: translateY(0); opacity:1; pointer-events:auto; } .mobile-menu a{ font-size: 16px; font-weight:500; color: var(--tx); padding: 15px 0; border-bottom: 1px solid var(--paper-line); } .mobile-menu a:last-child{ border-bottom:none; } .mobile-menu .mm-cta{ color: var(--red); font-weight:600; } /* ========================================================================= HERO ========================================================================= */ .hero{ position: relative; min-height: 100svh; display:grid; grid-template-columns: 1.05fr 0.95fr; align-items: stretch; padding-top: var(--nav-h); } .hero-left{ display:flex; flex-direction:column; justify-content:center; padding: clamp(40px,7vh,90px) clamp(20px,5vw,88px) clamp(40px,7vh,90px); position: relative; z-index: 3; } .hero-eyebrow{ margin-bottom: clamp(26px, 4vh, 46px); } .hero h1{ font-weight: 700; letter-spacing: -0.03em; line-height: 0.96; font-size: clamp(46px, 5.6vw, 92px); text-wrap: balance; } .hero h1 .serif-i{ letter-spacing: -0.01em; } .hero-sub{ margin-top: clamp(24px, 3.4vh, 38px); max-width: 30em; font-size: clamp(16px, 1.15vw, 19px); line-height: 1.6; color: var(--tx-soft); font-weight: 400; } .hero-actions{ margin-top: clamp(30px, 4vh, 46px); display:flex; align-items:center; gap: 24px; flex-wrap:wrap; } .hero-meta{ position:absolute; bottom: clamp(24px,4vh,40px); left: clamp(20px,5vw,88px); display:flex; gap: 38px; align-items:flex-end; } .hero-meta .stat{ display:flex; flex-direction:column; gap:3px; } .hero-meta .stat b{ font-size: 26px; font-weight:700; letter-spacing:-0.02em; line-height:1; } .hero-meta .stat span{ font-size: 11.5px; letter-spacing:0.13em; text-transform:uppercase; color: var(--tx-faint); } .hero-right{ position: relative; background: radial-gradient(120% 90% at 50% 38%, #EF5641 0%, var(--red) 38%, var(--red-2) 72%, var(--red-deep) 100%); overflow: hidden; } #hero-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1; } .hero-emblem{ position:absolute; inset:0; display:grid; place-items:center; z-index:2; pointer-events:none; transition: transform .5s var(--ease); } .emblem-logo{ width: min(58%, 420px); height: auto; filter: drop-shadow(0 24px 60px rgba(0,0,0,0.32)) drop-shadow(0 0 28px rgba(255,180,160,0.18)); animation: emblem-breathe 7s var(--ease-soft) infinite; } @keyframes emblem-breathe{ 0%, 100%{ transform: scale(1); } 50%{ transform: scale(1.035); } } @media (prefers-reduced-motion: reduce){ .emblem-logo{ animation: none; } } .hero-right .label{ z-index:3; } .hero-right .label{ position:absolute; z-index:3; color: var(--tx-inv-faint); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight:500; } .hero-right .label.tl{ top: 28px; left: 30px; } .hero-right .label.br{ bottom: 28px; right: 30px; text-align:right; } .hero-scroll{ position:absolute; bottom: 24px; left:50%; transform: translateX(-50%); z-index:3; color: var(--tx-inv-soft); font-size: 11px; letter-spacing:0.2em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:9px; } .hero-scroll .line{ width:1px; height: 38px; background: linear-gradient(rgba(244,239,229,0.9), transparent); animation: scrolldown 2.2s var(--ease) infinite; } @keyframes scrolldown{ 0%{ transform: scaleY(0); transform-origin: top; } 40%{ transform: scaleY(1); transform-origin: top;} 60%{ transform: scaleY(1); transform-origin: bottom;} 100%{ transform: scaleY(0); transform-origin: bottom;} } /* ---------- buttons ---------- */ .btn{ position: relative; display:inline-flex; align-items:center; gap: 12px; padding: 17px 30px; border-radius: 100px; font-weight: 600; font-size: 15px; letter-spacing: 0.005em; will-change: transform; transition: background .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease); } .btn .dot{ width:7px; height:7px; border-radius:50%; background: currentColor; transition: transform .4s var(--ease); } .btn-primary{ background: var(--red); color: var(--cream); box-shadow: 0 10px 30px -12px rgba(224,56,42,0.7); } .btn-primary:hover{ background: var(--ink); box-shadow: 0 16px 40px -14px rgba(20,16,13,0.6); } .btn-primary:hover .dot{ transform: scale(1.6); } .btn-ghost{ color: var(--ink); } .btn-ghost .arrow{ width: 38px; height:38px; border-radius:50%; border:1.5px solid var(--paper-line); display:grid; place-items:center; transition: background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease); } .btn-ghost:hover .arrow{ background: var(--ink); border-color: var(--ink); color: var(--cream); transform: rotate(45deg); } .btn-ghost .arrow svg{ width:14px; height:14px; transition: transform .4s var(--ease); } .link-underline{ position:relative; font-weight:600; } .link-underline::after{ content:""; position:absolute; left:0; bottom:-3px; height:1.5px; width:100%; background: currentColor; transform: scaleX(0); transform-origin:0; transition: transform .4s var(--ease); } .link-underline:hover::after{ transform: scaleX(1); } /* ========================================================================= MARQUEE ========================================================================= */ .marquee{ background: var(--ink); color: var(--cream); overflow:hidden; padding: 22px 0; border-block: 1px solid var(--ink-line); display:flex; white-space:nowrap; } .marquee-track{ display:flex; align-items:center; gap: 0; flex-shrink:0; animation: marquee 36s linear infinite; } .marquee:hover .marquee-track{ animation-play-state: paused; } .marquee-track span{ font-size: clamp(18px,1.7vw,26px); font-weight:600; letter-spacing:-0.01em; display:inline-flex; align-items:center; padding-inline: 30px; } .marquee-track .star{ color: var(--red); font-size: 16px; } @keyframes marquee{ to{ transform: translateX(-50%); } } /* ========================================================================= THESIS ========================================================================= */ .thesis{ padding: clamp(80px,12vh,160px) 0; } .thesis-grid{ display:grid; grid-template-columns: 1fr; gap: clamp(48px,7vh,90px); } .thesis-lead{ max-width: none; } .thesis-lead h2{ font-size: clamp(30px, 3.6vw, 56px); font-weight:600; letter-spacing:-0.025em; line-height:1.06; text-wrap: balance; } .thesis-body{ display:grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px,6vw,90px); align-items:start; } .thesis-body p{ font-size: clamp(17px,1.35vw,21px); line-height:1.62; color: var(--tx-soft); max-width: 40ch; } .thesis-body p + p{ margin-top: 1.2em; } .pillars{ display:grid; gap: 0; border-top:1px solid var(--paper-line); } .pillar{ display:grid; grid-template-columns: auto 1fr; gap: clamp(20px,3vw,48px); padding: clamp(24px,3.2vh,36px) 0; border-bottom: 1px solid var(--paper-line); align-items:baseline; position:relative; } .pillar .pn{ font-family: var(--serif); font-style:italic; font-size: clamp(28px,2.6vw,40px); color: var(--red); line-height:1; } .pillar h3{ font-size: clamp(20px,1.7vw,26px); font-weight:600; letter-spacing:-0.01em; margin-bottom: 7px; } .pillar p{ font-size: 15.5px; color: var(--tx-soft); max-width: 34ch; } /* ========================================================================= SERVICES ========================================================================= */ .services{ background: var(--ink); color: var(--cream); padding: clamp(80px,12vh,150px) 0 clamp(40px,6vh,80px); position: relative; } .services .section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; margin-bottom: clamp(50px,7vh,90px); } .services .section-head h2{ font-size: clamp(28px,3vw,46px); font-weight:600; letter-spacing:-0.025em; line-height:1.1; text-wrap: balance; color: var(--cream); } .services .section-head .ix{ font-size: 13px; letter-spacing: .2em; text-transform:uppercase; color: var(--tx-inv-faint); } .svc{ display:grid; grid-template-columns: 0.86fr 1.14fr; gap: clamp(30px,5vw,80px); padding: clamp(46px,7vh,80px) 0; border-top: 1px solid var(--ink-line); position: relative; } .svc-left{ position: relative; } .svc-sticky{ position: sticky; top: calc(var(--nav-h) + 40px); } .svc-num{ font-family: var(--serif); font-style: italic; font-weight:300; font-size: clamp(60px, 7vw, 120px); line-height: 0.8; color: var(--red); display:block; margin-bottom: 22px; } .svc-left h3{ font-size: clamp(27px,2.6vw,42px); font-weight:700; letter-spacing:-0.025em; line-height:1.02; color: var(--cream); } .svc-tag{ font-family: var(--serif); font-style:italic; font-size: clamp(18px,1.5vw,23px); color: var(--tx-inv-soft); margin-top: 14px; max-width: 24ch; } .svc-for{ margin-top: 26px; display:inline-flex; align-items:center; gap:9px; font-size: 12px; letter-spacing:0.14em; text-transform:uppercase; color: var(--tx-inv-faint); border:1px solid var(--ink-line); padding: 8px 15px; border-radius:100px; } .svc-items{ display:grid; gap:0; } .svc-item{ padding: clamp(22px,3vh,30px) 0; border-bottom: 1px solid var(--ink-line); display:grid; grid-template-columns: auto 1fr; gap: clamp(18px,2.5vw,40px); align-items:baseline; } .svc-item:first-child{ border-top: 1px solid var(--ink-line); } .svc-item .ii{ font-size: 13px; font-weight:600; color: var(--red); letter-spacing:0.04em; padding-top:4px; } .svc-item h4{ font-size: clamp(18px,1.45vw,22px); font-weight:600; letter-spacing:-0.01em; margin-bottom:7px; color: var(--cream); } .svc-item p{ font-size: 15.5px; line-height:1.55; color: var(--tx-inv-soft); max-width: 46ch; } /* ========================================================================= APPROACH ========================================================================= */ .approach{ padding: clamp(80px,12vh,160px) 0; background: var(--bone); } .approach-head{ max-width: none; margin-bottom: clamp(50px,7vh,90px); } .approach-head h2{ font-size: clamp(28px,3vw,48px); font-weight:600; letter-spacing:-0.025em; line-height:1.1; text-wrap: balance; } .approach-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--paper-line); border:1px solid var(--paper-line); } .approach-card{ background: var(--bone); padding: clamp(30px,3.4vw,46px); display:flex; flex-direction:column; gap: 18px; min-height: 320px; transition: background .5s var(--ease), color .5s var(--ease); } .approach-card:hover{ background: var(--ink); color: var(--cream); } .approach-card:hover p{ color: var(--tx-inv-soft); } .approach-card:hover .ac-num{ color: var(--red); } .ac-num{ font-family: var(--serif); font-style:italic; font-size: 30px; color: var(--red); } .ac-tag{ font-size: 11px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color: var(--tx-faint); transition: color .5s var(--ease); } .approach-card:hover .ac-tag{ color: var(--tx-inv-soft); } .approach-card h3{ font-size: clamp(20px,1.6vw,25px); font-weight:600; letter-spacing:-0.015em; margin-top:auto; } .approach-card p{ font-size: 15.5px; line-height:1.58; color: var(--tx-soft); transition: color .5s var(--ease); } /* ========================================================================= TRACK RECORD ========================================================================= */ .track{ background: var(--red); color: var(--cream); padding: clamp(70px,10vh,130px) 0; position:relative; overflow:hidden; } .track .eyebrow{ color: rgba(244,239,229,0.75); } .track .eyebrow::before{ background: var(--cream); } .track-stats{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(24px,4vw,60px); margin: clamp(40px,5vh,60px) 0 clamp(56px,8vh,90px); } .track-stat .num{ font-size: clamp(46px,6vw,96px); font-weight:700; letter-spacing:-0.03em; line-height:0.9; } .track-stat .num .small{ font-size: 0.5em; } .track-stat .lab{ margin-top: 16px; font-size: 15.5px; line-height:1.5; color: rgba(244,239,229,0.85); max-width: 28ch; } .track-trans h3{ font-size: 13px; letter-spacing:0.2em; text-transform:uppercase; color: rgba(244,239,229,0.7); margin-bottom: 8px; } .trans-row{ display:grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items:center; padding: clamp(20px,2.6vh,28px) 0; border-top: 1px solid rgba(244,239,229,0.22); transition: padding-left .4s var(--ease); } .track-trans .trans-list{ border-bottom: 1px solid rgba(244,239,229,0.22); } .trans-row:hover{ padding-left: 14px; } .trans-row .amt{ font-size: clamp(22px,2.4vw,38px); font-weight:700; letter-spacing:-0.02em; } .trans-row .desc{ font-size: clamp(15px,1.2vw,18px); color: rgba(244,239,229,0.85); } .trans-row .stat-pill{ font-size: 12px; letter-spacing:0.1em; text-transform:uppercase; border:1px solid rgba(244,239,229,0.4); padding: 6px 13px; border-radius:100px; white-space:nowrap; } /* ========================================================================= CASE STUDIES ========================================================================= */ .cases{ background: var(--bone); padding: clamp(80px,12vh,150px) 0; } .cases-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; } .cases-head h2{ font-size: clamp(30px,3.4vw,52px); font-weight:700; letter-spacing:-0.03em; line-height:1.04; text-wrap: balance; margin-top: 22px; } .cases-head .ix{ font-size: 13px; letter-spacing:.2em; text-transform:uppercase; color: var(--tx-faint); white-space:nowrap; } .cases-intro{ margin-top: clamp(26px,3.4vh,38px); max-width: 60ch; font-size: clamp(16px,1.2vw,19px); line-height:1.6; color: var(--tx-soft); } .cases-agg{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(24px,4vw,60px); margin: clamp(44px,6vh,72px) 0 clamp(10px,2vh,20px); padding-bottom: clamp(44px,6vh,68px); border-bottom: 1px solid var(--paper-line); } .cases-agg .agg{ display:flex; flex-direction:column; gap:12px; } .cases-agg .agg b{ font-size: clamp(46px,5.6vw,88px); font-weight:700; letter-spacing:-0.035em; line-height:0.86; color: var(--red); } .cases-agg .agg b .small{ font-size: 0.42em; letter-spacing:-0.01em; } .cases-agg .agg > span{ font-size: 15px; line-height:1.45; color: var(--tx-soft); max-width: 24ch; } .case-list{ display:flex; flex-direction:column; } .case{ display:grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(28px,4vw,72px); align-items:start; padding: clamp(30px,4.4vh,48px) 0; border-bottom: 1px solid var(--paper-line); transition: padding-left .45s var(--ease); } .case:hover{ padding-left: 12px; } .case-info{ display:flex; gap: clamp(16px,1.8vw,26px); align-items:baseline; } .case-index{ font-family: var(--serif); font-style:italic; font-size: clamp(26px,2.3vw,38px); color: var(--red); line-height:1; flex-shrink:0; } .case-head h3{ font-size: clamp(23px,2vw,32px); font-weight:600; letter-spacing:-0.018em; line-height:1.05; } .case-tag{ display:block; margin-top:11px; font-size: 12px; font-weight:600; letter-spacing:0.13em; text-transform:uppercase; color: var(--tx-faint); } .case-stats{ display:flex; flex-wrap:wrap; gap: clamp(26px,3.4vw,56px); } .cstat{ display:flex; flex-direction:column; gap:8px; } .cstat b{ font-size: clamp(32px,3.2vw,50px); font-weight:700; letter-spacing:-0.025em; line-height:0.88; color: var(--ink); } .cstat span{ font-size: 13px; color: var(--tx-soft); letter-spacing:0.01em; } .case-foot{ margin-top: clamp(18px,2.4vh,24px); font-size: 13.5px; line-height:1.55; color: var(--tx-faint); max-width: 52ch; } /* ========================================================================= CLIENTS + NETWORK (logo marquees) ========================================================================= */ .clients{ background: var(--bone); padding: clamp(72px,10vh,120px) 0 clamp(48px,7vh,80px); overflow:hidden; } .network{ background: var(--bone-2); padding: clamp(72px,10vh,120px) 0 clamp(56px,8vh,90px); overflow:hidden; } .clients-head h2, .network-head h2{ font-size: clamp(28px,3vw,46px); font-weight:700; letter-spacing:-0.028em; line-height:1.06; text-wrap:balance; margin-top:20px; max-width: 18ch; } .network-head p{ margin-top: clamp(18px,2.4vh,26px); max-width: 52ch; font-size: clamp(15.5px,1.15vw,18px); line-height:1.6; color: var(--tx-soft); } .logo-marquee{ position:relative; width:100%; overflow:hidden; margin-top: clamp(40px,5.5vh,68px); -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .logo-marquee.net{ margin-top: clamp(28px,3.5vh,40px); } .logo-track{ display:flex; align-items:center; gap: clamp(52px,6vw,104px); width:max-content; will-change: transform; animation: logoscroll 42s linear infinite; } .logo-marquee.rev .logo-track{ animation-duration: 48s; animation-direction: reverse; } .logo-marquee:hover .logo-track{ animation-play-state: paused; } .logo{ flex:none; display:flex; align-items:center; opacity:0.46; filter: saturate(0); transition: opacity .45s var(--ease); } .logo:hover{ opacity:1; } .logo img{ width:auto; object-fit:contain; display:block; } .logo .wm{ font-family: var(--display); font-weight:700; font-size: clamp(20px,1.7vw,26px); letter-spacing:-0.018em; color: var(--ink); white-space:nowrap; } .logo .wm-light{ font-weight:400; color: var(--tx-soft); } .network .logo{ opacity:0.4; } @keyframes logoscroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce){ .logo-track{ animation: none; } .logo-marquee{ overflow-x:auto; } } /* ========================================================================= FIT ========================================================================= */ .fit{ background: var(--bone); padding: clamp(80px,12vh,150px) 0; } .fit-head h2{ font-size: clamp(28px,3vw,46px); font-weight:700; letter-spacing:-0.028em; line-height:1.08; text-wrap:balance; margin-top:20px; max-width: 22ch; } .fit-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: clamp(1px,1px,1px); margin-top: clamp(48px,6.5vh,76px); border:1px solid var(--paper-line); } .fit-col{ background: var(--bone); padding: clamp(32px,3.6vw,52px); } .fit-col + .fit-col{ border-left:1px solid var(--paper-line); } .fit-label{ display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; } .fit-label::before{ content:''; width:7px; height:7px; border-radius:50%; } .fit-label.good{ color: var(--ink); } .fit-label.good::before{ background: var(--red); } .fit-label.bad{ color: var(--tx-faint); } .fit-label.bad::before{ background: var(--tx-faint); } .fit-col ul{ list-style:none; margin-top: clamp(22px,3vh,30px); display:flex; flex-direction:column; gap: clamp(16px,2.2vh,22px); } .fit-col li{ font-size: 15.5px; line-height:1.55; color: var(--tx-soft); padding-left: 22px; position:relative; } .fit-col li::before{ content:'\2014'; position:absolute; left:0; color: var(--tx-faint); } /* ========================================================================= CONTACT ========================================================================= */ .contact{ background: var(--ink); color: var(--cream); padding: clamp(80px,12vh,150px) 0 clamp(60px,8vh,90px); } .contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(48px,7vw,110px); align-items:start; } .contact-lead h2{ font-size: clamp(38px,5vw,86px); font-weight:700; letter-spacing:-0.03em; line-height:0.98; } .contact-lead h2 .serif-i{ color: var(--red); } .contact-lead p{ margin-top: clamp(22px,3vh,32px); font-size: clamp(16px,1.2vw,19px); line-height:1.6; color: var(--tx-inv-soft); max-width: 36ch; } .contact-points{ margin-top: clamp(36px,5vh,54px); display:grid; gap: 14px; } .contact-point{ display:flex; align-items:center; gap: 13px; font-size: 15px; color: var(--tx-inv-soft); } .contact-point .dot{ width:6px; height:6px; border-radius:50%; background: var(--red); } .form{ display:grid; gap: 22px; } .field{ position: relative; } .field label{ display:block; font-size: 12px; letter-spacing:0.12em; text-transform:uppercase; color: var(--tx-inv-faint); margin-bottom: 11px; } .field input, .field textarea, .field select{ width:100%; background: transparent; border: none; border-bottom: 1.5px solid var(--ink-line); color: var(--cream); font-family: var(--display); font-size: 18px; padding: 10px 0 14px; transition: border-color .4s var(--ease); } .field select{ color: var(--cream); } .field select option{ background: var(--ink-2); color: var(--cream); } .field textarea{ resize: vertical; min-height: 90px; line-height:1.5; } .field input::placeholder, .field textarea::placeholder{ color: rgba(244,239,229,0.28); } .field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color: var(--red); } .form .btn-submit{ margin-top: 8px; justify-self:start; background: var(--red); color: var(--cream); padding: 18px 36px; border-radius: 100px; font-size: 15.5px; font-weight:600; display:inline-flex; align-items:center; gap:12px; transition: background .4s var(--ease), transform .3s var(--ease); } .form .btn-submit:hover{ background: var(--cream); color: var(--ink); } .form .btn-submit .dot{ width:7px;height:7px;border-radius:50%;background:currentColor; } .form-note{ font-size: 13px; color: var(--tx-inv-faint); line-height:1.5; } .hp{ position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; } .form-success{ display:none; flex-direction:column; gap:14px; align-items:flex-start; padding: 40px 0; } .form-success.show{ display:flex; } .form-success .tick{ width:54px;height:54px;border-radius:50%;background:var(--red);display:grid;place-items:center; } .form-success h3{ font-size: 28px; font-weight:700; letter-spacing:-0.02em; } .form-success p{ color: var(--tx-inv-soft); font-size:16px; max-width: 34ch; } .form.hide{ display:none; } /* ========================================================================= FOOTER ========================================================================= */ .footer{ background: var(--ink); color: var(--cream); border-top: 1px solid var(--ink-line); padding: clamp(50px,7vh,80px) 0 40px; } .footer-top{ display:flex; justify-content:space-between; align-items:flex-end; gap: 40px; flex-wrap:wrap; padding-bottom: clamp(40px,5vh,60px); border-bottom:1px solid var(--ink-line); } .footer-big{ font-size: clamp(48px,9vw,150px); font-weight:800; letter-spacing:-0.04em; line-height:0.85; } .footer-big .red{ color: var(--red); } .footer-links{ display:flex; gap: 50px; flex-wrap:wrap; } .footer-col h4{ font-size: 11.5px; letter-spacing:0.16em; text-transform:uppercase; color: var(--tx-inv-faint); margin-bottom:14px; } .footer-col a, .footer-col span{ display:block; font-size: 14.5px; color: var(--tx-inv-soft); margin-bottom: 9px; transition: color .3s var(--ease); } .footer-col a:hover{ color: var(--red); } .footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; padding-top: 28px; font-size: 13px; color: var(--tx-inv-faint); } /* ========================================================================= RESPONSIVE ========================================================================= */ @media (max-width: 1080px){ .hero{ grid-template-columns: 1fr; min-height: auto; } .hero-right{ min-height: 56vh; order: 2; } .hero-left{ order: 1; padding-top: clamp(110px,16vh,150px); padding-bottom: clamp(40px,7vh,70px); } .hero-meta{ position: static; margin-top: 40px; } .thesis-body{ grid-template-columns: 1fr; } .svc{ grid-template-columns: 1fr; gap: 28px; } .svc-sticky{ position: static; } .approach-grid{ grid-template-columns: 1fr; } .contact-grid{ grid-template-columns: 1fr; } .fit-grid{ grid-template-columns: 1fr; } .fit-col + .fit-col{ border-left:none; border-top:1px solid var(--paper-line); } .track-stats{ grid-template-columns: 1fr; } .cases-agg{ grid-template-columns: 1fr; gap: 30px; } .case{ grid-template-columns: 1fr; gap: 22px; } } @media (max-width: 720px){ body{ font-size: 16px; } .nav-links{ display:none; } .nav-burger{ display:flex; } .nav-toggle{ display:flex; } .mobile-menu{ display:flex; } .hero h1{ font-size: clamp(40px,11vw,60px); } .hero-meta{ gap: 26px; flex-wrap:wrap; } .pillar{ grid-template-columns: 1fr; gap: 8px; } .svc-item{ grid-template-columns: 1fr; gap: 6px; } .trans-row{ grid-template-columns: 1fr auto; } .trans-row .desc{ grid-column: 1 / -1; order: 3; } .footer-top{ flex-direction:column; align-items:flex-start; } }