/* ========================================================== PM STUDIO — pmstudio73.com Clean dark site. The moving neon light lives ONLY on the two portraits (.neon-frame). Everything else stays neutral. ========================================================== */ @property --ang { syntax: ''; initial-value: 0deg; inherits: false; } :root{ --bg: #08080a; --bg-2: #0c0c0f; --panel: #101013; --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.18); --txt: #f4f5f7; --muted: #8e909a; /* neon accents — used by the portrait frames only */ --cyan: #35d6ff; --blue: #3d8bff; --violet: #8b5cf6; --red: #ff3355; --radius: 18px; --wrap: 1240px; --ff: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --fd: 'Space Grotesk', var(--ff); --ease: cubic-bezier(.22,.61,.36,1); } *,*::before,*::after{ box-sizing:border-box; } html{ overflow-x:hidden; scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ margin:0; color:var(--txt); background:#08090e; font-family:var(--ff); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* ---------- animated background ---------- */ /* A fixed layer rather than background-attachment:fixed on , which iOS Safari renders badly and repaints on every scroll. */ .bg-base{ position:fixed; inset:0; z-index:0; pointer-events:none; background: radial-gradient(120% 90% at 8% 0%, rgba(31,72,140,.32), transparent 58%), radial-gradient(110% 90% at 96% 12%, rgba(150,30,54,.28), transparent 55%), linear-gradient(180deg, #0a0b12 0%, #08090e 45%, #0a0910 100%); } .bg-canvas{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:.62; } .bg-glow{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; } .bg-glow .g{ position:absolute; display:block; border-radius:50%; filter:blur(120px); opacity:.32; } .bg-glow .g-blue{ width:52vw; height:52vw; background:#1e5bc4; top:-14vw; left:-12vw; animation:drift1 34s ease-in-out infinite; } .bg-glow .g-red { width:46vw; height:46vw; background:#c0263f; top:24vh; right:-14vw; animation:drift2 41s ease-in-out infinite; } @keyframes drift1{ 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(7vw,9vh,0)} } @keyframes drift2{ 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(-8vw,-7vh,0)} } img,video{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } h1,h2,h3,h4{ font-family:var(--fd); line-height:1.06; letter-spacing:-.025em; margin:0; } ul{ margin:0; padding:0; list-style:none; } ::selection{ background:#fff; color:#000; } .wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; } /* subtle film grain */ .grain{ position:fixed; inset:-50%; z-index:1; pointer-events:none; opacity:.03; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grain 8s steps(6) infinite; } @keyframes grain{ 0%,100%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-2%)} 80%{transform:translate(3%,1%)} } /* ========================================================== MOTION PRIMITIVES .up — element rises + fades in .split — heading revealed word by word ========================================================== */ .up{ opacity:0; transform:translateY(26px); transition:opacity .85s var(--ease), transform .85s var(--ease); } .up.in{ opacity:1; transform:none; } .split{ overflow:hidden; } .split .w{ display:inline-block; overflow:hidden; vertical-align:top; } .split .w > span{ display:inline-block; transform:translateY(110%) rotate(4deg); opacity:0; transition:transform .95s cubic-bezier(.19,1,.22,1), opacity .7s ease; } .split.in .w > span{ transform:none; opacity:1; } /* parallax — once revealed, transform is driven by --py from JS */ .tilt{ will-change:transform; } .tilt.in{ transform:translate3d(0,var(--py,0px),0); transition:opacity .85s var(--ease); } /* ---------- buttons (neutral) ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-family:var(--fd); font-weight:600; font-size:.94rem; letter-spacing:.01em; padding:.85rem 1.6rem; border-radius:100px; border:1px solid transparent; background:#fff; color:#08080a; cursor:pointer; transition:transform .3s var(--ease), background .3s var(--ease), opacity .3s; } .btn:hover{ transform:translateY(-2px); background:#e6e7ea; } .btn-ghost{ background:transparent; border-color:var(--line-2); color:var(--txt); } .btn-ghost:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.32); } .btn-sm{ padding:.6rem 1.15rem; font-size:.85rem; } .btn-big{ padding:1.05rem 2.3rem; font-size:1.02rem; } /* ---------- eyebrow ---------- */ .eyebrow{ display:inline-flex; align-items:center; gap:.6rem; margin:0 0 1.1rem; font-family:var(--fd); font-size:.76rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); } .dot{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.6); } /* ========================================================== NAV ========================================================== */ .nav{ position:fixed; top:0; left:0; right:0; z-index:60; transition:background .35s, backdrop-filter .35s, border-color .35s; border-bottom:1px solid transparent; } .nav{ transform:translateY(0); transition:transform .45s var(--ease), background .35s, backdrop-filter .35s, border-color .35s; } .nav.stuck{ background:rgba(9,10,16,.72); backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3); border-bottom-color:var(--line); } .nav.hide{ transform:translateY(-100%); } .nav-in{ display:flex; align-items:center; justify-content:space-between; height:74px; } .logo{ display:inline-flex; align-items:center; gap:.55rem; font-family:var(--fd); font-weight:700; } .logo-mark{ display:grid; place-items:center; width:34px; height:34px; border-radius:9px; font-size:.84rem; background:#fff; color:#08080a; letter-spacing:.02em; } .logo-txt{ font-size:.96rem; letter-spacing:.24em; } .nav-links{ display:flex; align-items:center; gap:2rem; } .nav-links a{ font-size:.92rem; color:var(--muted); transition:color .25s; position:relative; } .nav-links a:not(.btn):hover{ color:var(--txt); } .nav-links a:not(.btn)::after{ content:''; position:absolute; left:0; bottom:-6px; height:1px; width:0; background:currentColor; transition:width .3s var(--ease); } .nav-links a:not(.btn):hover::after{ width:100%; } .burger{ display:none; background:none; border:0; padding:8px; cursor:pointer; } .burger span{ display:block; width:24px; height:2px; background:var(--txt); border-radius:2px; transition:.3s var(--ease); } .burger span+span{ margin-top:6px; } .burger[aria-expanded="true"] span:first-child{ transform:translateY(4px) rotate(45deg); } .burger[aria-expanded="true"] span:last-child{ transform:translateY(-4px) rotate(-45deg); } /* ========================================================== HERO ========================================================== */ .hero{ position:relative; z-index:2; padding:150px 0 0; scroll-margin-top:74px; } .hero-grid{ position:relative; z-index:2; display:grid; grid-template-columns:1.02fr .98fr; gap:4.5rem; align-items:center; padding-bottom:5.5rem; } .hero h1{ font-size:clamp(2rem, 5.4vw, 4.4rem); font-weight:700; margin:0 0 1.9rem; overflow-wrap:break-word; } .story{ max-width:560px; margin:0 0 2.4rem; } .story p{ font-size:clamp(1.02rem,1.35vw,1.16rem); color:var(--muted); margin:0 0 1rem; } .story p:last-child{ margin-bottom:0; } .hero-cta{ display:flex; flex-wrap:wrap; gap:.9rem; } .hero-photos{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; } /* marquee */ .marquee{ position:relative; z-index:2; overflow:hidden; border-block:1px solid var(--line); background:rgba(255,255,255,.012); padding:.9rem 0; } .marquee-track{ display:flex; align-items:center; gap:2.2rem; width:max-content; animation:slide 34s linear infinite; } .marquee-track span{ font-family:var(--fd); font-size:1.05rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.42); white-space:nowrap; } .marquee-track i{ color:rgba(255,255,255,.22); font-style:normal; font-size:.6rem; } @keyframes slide{ to{ transform:translateX(-50%); } } /* ========================================================== SECTIONS ========================================================== */ .section{ position:relative; z-index:2; padding:110px 0; scroll-margin-top:74px; } .alt-bg{ background:rgba(255,255,255,.022); border-block:1px solid var(--line); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } .sec-head{ max-width:720px; margin-bottom:3.2rem; } .sec-head h2{ font-size:clamp(2rem,4.4vw,3.3rem); font-weight:700; margin:0 0 1rem; } .sec-sub{ color:var(--muted); margin:0; font-size:1.02rem; } /* ========================================================== WORK CAROUSEL One piece at a time. Neighbours peek in, dimmed and scaled down, so mixed 16:9 / 9:16 work still lines up on one axis. ========================================================== */ .carousel{ position:relative; } .cstage{ position:relative; overflow:hidden; padding:10px 0 26px; transition:height .6s var(--ease); } .ctrack{ display:flex; align-items:center; gap:26px; will-change:transform; transition:transform .85s cubic-bezier(.16,1,.3,1); } .slide{ position:relative; flex:0 0 auto; border-radius:16px; overflow:hidden; background:#05060a; border:1px solid var(--line); opacity:.3; transform:scale(.9); cursor:pointer; transition:opacity .75s var(--ease), transform .75s var(--ease), border-color .75s; } .slide.on{ opacity:1; transform:scale(1); border-color:rgba(255,255,255,.22); box-shadow:0 40px 90px -46px rgba(0,0,0,.98); cursor:default; } /* the video is fitted, never cropped — a 9:16 piece keeps its full frame inside the card and the leftover edges are filled by a blurred still */ .slide-bg{ position:absolute; inset:0; background-size:cover; background-position:center; filter:blur(26px) saturate(1.25) brightness(.55); transform:scale(1.18); } .slide video{ position:relative; z-index:1; display:block; width:100%; height:100%; object-fit:contain; background:transparent; } /* badge on the inactive neighbours */ .slide-peek{ position:absolute; inset:0; z-index:2; display:grid; place-items:center; background:rgba(5,6,10,.35); transition:opacity .6s var(--ease); } .slide.on .slide-peek{ opacity:0; pointer-events:none; } .slide-peek span{ font-family:var(--fd); font-size:.68rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.75); padding:.5rem .9rem; border-radius:100px; border:1px solid rgba(255,255,255,.28); background:rgba(10,10,14,.5); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } /* arrows */ .cnav{ position:absolute; top:50%; margin-top:-25px; width:50px; height:50px; z-index:5; display:grid; place-items:center; border-radius:50%; cursor:pointer; background:rgba(10,11,16,.62); border:1px solid rgba(255,255,255,.22); color:#fff; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:.35s var(--ease); } .cnav svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; } .cnav:hover{ background:#fff; color:#08080a; border-color:#fff; transform:scale(1.08); } .cprev{ left:12px; } .cnext{ right:12px; } /* control bar */ .cbar{ display:flex; align-items:center; gap:1rem; margin-top:.4rem; padding:.7rem 1rem; border-radius:100px; background:rgba(255,255,255,.04); border:1px solid var(--line); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } .cbtn{ flex:0 0 auto; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; cursor:pointer; color:#fff; background:rgba(255,255,255,.06); border:1px solid transparent; transition:.3s var(--ease); } .cbtn:hover{ background:#fff; color:#08080a; } .cbtn svg{ width:19px; height:19px; fill:currentColor; } .cbtn svg .s{ fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; } .cbtn .i-play, .cbtn .i-loud{ display:none; } .cbtn.paused .i-play{ display:block; } .cbtn.paused .i-pause{ display:none; } .cbtn.on .i-loud{ display:block; } .cbtn.on .i-muted{ display:none; } .cprogress{ flex:1 1 auto; height:4px; border-radius:4px; cursor:pointer; background:rgba(255,255,255,.12); overflow:hidden; } .cprogress span{ display:block; height:100%; width:0; border-radius:4px; background:#fff; transition:width .12s linear; } .ccount{ flex:0 0 auto; font-family:var(--fd); font-size:.82rem; font-weight:600; color:var(--muted); letter-spacing:.06em; } /* the info panel */ .cmeta{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:1.4rem 2rem; margin-top:2rem; min-height:118px; } .cmeta-main{ max-width:620px; } .cmeta.swap .cmeta-main, .cmeta.swap .ctags{ opacity:0; transform:translateY(10px); } .cmeta-main, .ctags{ transition:opacity .35s var(--ease), transform .35s var(--ease); } .ccat{ font-family:var(--fd); font-size:.7rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin:0 0 .5rem; } .ctitle{ font-size:clamp(1.3rem,2.4vw,1.85rem); margin:0 0 .7rem; } .cdesc{ color:var(--muted); margin:0; font-size:.98rem; } .ctags{ display:flex; flex-wrap:wrap; gap:.5rem; } .ctags li{ font-family:var(--fd); font-size:.76rem; font-weight:600; letter-spacing:.04em; padding:.45rem .85rem; border-radius:100px; border:1px solid var(--line); background:rgba(255,255,255,.03); color:var(--muted); } /* dots — the visible bar is thin, but the tap target is 44px tall */ .cdots{ display:flex; justify-content:center; gap:.15rem; margin-top:1.6rem; } .cdot{ width:46px; height:44px; padding:20px 6px; cursor:pointer; background:none; border:0; -webkit-tap-highlight-color:transparent; } .cdot::before{ content:''; display:block; height:4px; border-radius:4px; background:rgba(255,255,255,.18); transition:.4s var(--ease); } .cdot:hover::before{ background:rgba(255,255,255,.45); } .cdot.on::before{ background:#fff; } @media (max-width:760px){ .ctrack{ gap:14px; } .cnav{ width:44px; height:44px; margin-top:-22px; } .cprev{ left:8px; } .cnext{ right:8px; } .cbar{ gap:.45rem; padding:.5rem .6rem; } .cbtn{ width:40px; height:40px; } .cprogress{ min-width:60px; } .cmeta{ margin-top:1.6rem; gap:1rem; } .cmeta-main{ max-width:none; } .cdesc{ font-size:.92rem; } .ctags li{ font-size:.7rem; padding:.38rem .7rem; } } @media (max-width:430px){ .ccount{ display:none; } /* the dots already show position */ .cnav{ width:40px; height:40px; margin-top:-20px; } .cnav svg{ width:18px; height:18px; } .cdot{ width:38px; } } /* ---------- service cards ---------- */ .cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:1.2rem; } .card{ position:relative; padding:2rem 1.7rem 1.9rem; border-radius:var(--radius); background:rgba(255,255,255,.022); border:1px solid var(--line); overflow:hidden; transition:transform .5s var(--ease), border-color .5s, background .5s, box-shadow .5s; } /* light follows the cursor */ .card::before{ content:''; position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .45s var(--ease); background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.11), rgba(255,255,255,.03) 42%, transparent 68%); } /* hairline sweeps across the top edge */ .card::after{ content:''; position:absolute; left:0; top:0; height:1px; width:0; background:linear-gradient(90deg, rgba(255,255,255,.75), rgba(255,255,255,0)); transition:width .75s var(--ease); } .card:hover{ transform:translateY(-6px); border-color:var(--line-2); background:rgba(255,255,255,.045); box-shadow:0 30px 60px -34px rgba(0,0,0,.95); } .card:hover::before{ opacity:1; } .card:hover::after{ width:100%; } .card > *{ position:relative; z-index:1; } .card-no{ font-family:var(--fd); font-size:.74rem; font-weight:600; letter-spacing:.2em; color:rgba(255,255,255,.4); display:block; margin-bottom:.9rem; transition:color .45s var(--ease), letter-spacing .55s var(--ease); } .card:hover .card-no{ color:rgba(255,255,255,.8); letter-spacing:.34em; } .card h3{ font-size:1.28rem; margin:0 0 .7rem; transition:transform .55s var(--ease); } .card:hover h3{ transform:translateX(7px); } .card p{ margin:0; color:var(--muted); font-size:.95rem; transition:color .45s var(--ease), transform .55s var(--ease); transition-delay:.04s; } .card:hover p{ color:#c3c6d2; transform:translateX(7px); } /* ========================================================== ABOUT + NEON FRAMES ← the only neon on the site ========================================================== */ .ticks{ margin:3rem 0 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:.9rem 2rem; } .ticks li{ position:relative; padding-left:1.7rem; color:var(--txt); font-size:.95rem; } .ticks li::before{ content:''; position:absolute; left:0; top:.55em; width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.55); } /* --- travelling neon border --- The conic gradient is transparent for most of its sweep, so on its own the frame edge disappears wherever the light isn't — which reads as dark corners. This static hairline sits underneath it so the frame is always drawn. */ .neon-frame{ position:relative; margin:0; padding:2px; border-radius:26px; isolation:isolate; background:rgba(255,255,255,.16); } .neon-frame::before, .neon-frame::after{ content:''; position:absolute; inset:0; border-radius:inherit; z-index:-1; background:conic-gradient(from var(--ang), rgba(255,255,255,0) 0deg, var(--cyan) 26deg, var(--blue) 58deg, var(--violet) 96deg, var(--red) 132deg, rgba(255,255,255,0) 172deg, rgba(255,255,255,0) 360deg); animation:spinAng 5.5s linear infinite; } .neon-frame::after{ filter:blur(18px); opacity:.8; } .neon-frame.delay::before, .neon-frame.delay::after{ animation-delay:-2.75s; } @keyframes spinAng{ to{ --ang:360deg; } } /* fallback where @property is unsupported */ @supports not (background: conic-gradient(from var(--ang), red, blue)){ .neon-frame::before,.neon-frame::after{ background:conic-gradient(rgba(255,255,255,0),var(--cyan),var(--blue),var(--violet),var(--red),rgba(255,255,255,0)); animation:spinBox 5.5s linear infinite; } @keyframes spinBox{ to{ transform:rotate(360deg); } } } .neon-inner{ position:relative; border-radius:24px; overflow:hidden; background:#05050a; aspect-ratio:4/5; } .neon-inner img{ width:100%; height:100%; object-fit:cover; } .neon-inner::after{ content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(to top, rgba(3,3,6,.7), transparent 45%); } .tag{ position:absolute; left:14px; bottom:14px; z-index:2; display:flex; align-items:baseline; gap:.55rem; font-family:var(--fd); font-size:.72rem; font-weight:600; letter-spacing:.2em; padding:.45rem .85rem; border-radius:8px; color:#fff; background:rgba(12,12,16,.6); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .tag i{ font-style:normal; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55); } /* ========================================================== STACK ========================================================== */ .stack{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:2.6rem; } .stack-group h4{ font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin:0 0 1.1rem; } .chips{ display:flex; flex-wrap:wrap; gap:.6rem; } .chips li{ font-family:var(--fd); font-weight:600; font-size:.92rem; padding:.7rem 1.2rem; border-radius:100px; border:1px solid var(--line); background:rgba(255,255,255,.03); cursor:default; transition:.35s var(--ease); } .chips li:hover{ border-color:rgba(255,255,255,.4); transform:translateY(-3px); background:rgba(255,255,255,.08); box-shadow:0 12px 26px -16px rgba(0,0,0,.9); } /* ========================================================== CONTACT ========================================================== */ .contact{ overflow:hidden; text-align:center; padding:130px 0; } .contact-in{ position:relative; z-index:2; max-width:760px; } .contact h2{ font-size:clamp(2rem,4.6vw,3.4rem); margin:0 0 1.1rem; } .contact .eyebrow{ justify-content:center; } .mails{ display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; margin:2.6rem 0 2.4rem; } .mail{ display:flex; flex-direction:column; align-items:flex-start; gap:.15rem; padding:1rem 1.5rem; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.022); transition:.32s var(--ease); text-align:left; } .mail span{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); } .mail strong{ font-family:var(--fd); font-size:1rem; font-weight:600; } .mail:hover{ border-color:var(--line-2); transform:translateY(-3px); background:rgba(255,255,255,.045); } /* ========================================================== FOOTER ========================================================== */ .footer{ position:relative; z-index:2; border-top:1px solid var(--line); padding:2.2rem 0; background:var(--bg-2); } .footer-in{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; } .footer p,.footer a{ color:var(--muted); font-size:.86rem; margin:0; } .footer a:hover{ color:var(--txt); } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width:960px){ .hero{ padding-top:120px; } .hero-grid{ grid-template-columns:1fr; gap:3rem; padding-bottom:4rem; } .hero-photos{ max-width:520px; } .section{ padding:80px 0; } .bg-canvas{ opacity:.4; } } @media (max-width:760px){ .burger{ display:block; } .nav-links{ position:fixed; inset:74px 0 auto; flex-direction:column; align-items:stretch; gap:0; background:rgba(8,8,10,.97); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--line); padding:1rem 24px 1.6rem; clip-path:inset(0 0 100% 0); pointer-events:none; transition:clip-path .38s var(--ease); } .nav-links.open{ clip-path:inset(0 0 0 0); pointer-events:auto; } .nav-links a{ padding:.9rem 0; font-size:1.05rem; border-bottom:1px solid var(--line); } .nav-links a:last-child{ border:0; margin-top:1rem; align-self:flex-start; } .hero-stats{ gap:1.8rem; } .hero-stats strong{ font-size:1.7rem; } .grid{ grid-template-columns:1fr; } .mails{ flex-direction:column; align-items:stretch; } .footer-in{ justify-content:center; text-align:center; } } @media (max-width:560px){ .wrap{ padding-inline:18px; } .hero{ padding-top:104px; } .section{ padding:64px 0; } .hero-photos{ grid-template-columns:1fr 1fr; gap:.7rem; } .tag{ font-size:.6rem; letter-spacing:.12em; padding:.32rem .5rem; left:10px; bottom:10px; } .tag i{ display:none; } /* keep the desktop corner radius — tightening it here made the frames read as sharp-cornered next to the softly rounded PC version */ .sec-head{ margin-bottom:2.2rem; } .btn{ padding:.8rem 1.3rem; } .hero-cta{ gap:.6rem; } .hero-cta .btn{ flex:1 1 auto; justify-content:center; } .marquee-track span{ font-size:.9rem; } .footer-in{ gap:.6rem; } } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } .up{ opacity:1; transform:none; } .split .w > span{ transform:none; opacity:1; } .bg-canvas{ display:none; } .neon-frame::before,.neon-frame::after{ animation:none !important; } }