/* ============================================================ ACCENTS — Fleet & Architectural Vinyl Graphics Refreshed site — design system + layout ============================================================ */ :root{ --bg:#08080a; --bg-2:#0c0c10; --panel:#131318; --panel-2:#1a1a21; --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16); --fg:#f5f5f7; --fg-dim:#c2c2cc; --mut:#8a8a95; --accent:#4f8dff; --accent-2:#7fb0ff; --accent-ink:#04102b; --gold:#e8c07d; --radius:16px; --radius-sm:11px; --maxw:1200px; --ease:cubic-bezier(.22,.61,.36,1); --chrome:linear-gradient(180deg,#ffffff 0%,#d7dae1 48%,#9aa0ad 100%); --shadow:0 24px 60px -20px rgba(0,0,0,.7); font-synthesis:none; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--bg); color:var(--fg); font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} h1,h2,h3,h4{font-family:'Space Grotesk','Sora',Inter,sans-serif;font-weight:600;line-height:1.05;letter-spacing:-.02em;margin:0} p{margin:0} ::selection{background:var(--accent);color:#fff} /* --- Background ambience --- Painted directly on (NOT a position:fixed layer). A fixed full-page layer repaints on every scroll frame and breaks compositing/screenshots. */ body{ background: radial-gradient(1100px 700px at 82% -4%, rgba(79,141,255,.15), transparent 58%), radial-gradient(800px 600px at 4% 3%, rgba(232,192,125,.05), transparent 55%), linear-gradient(180deg,#08080a, #070709 55%, #060608); background-repeat:no-repeat; background-attachment:scroll; } /* Grid texture is scoped to the hero only (see .hero::before) so it never becomes a full-page fixed+masked layer. */ .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} .section{padding:110px 0;position:relative} .section-tight{padding:72px 0} /* --- Shared type helpers --- */ .eyebrow{ display:inline-flex;align-items:center;gap:9px; font-size:12.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase; color:var(--accent-2); } .eyebrow::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,var(--accent),transparent)} .section-head{max-width:720px;margin-bottom:52px} .section-head h2{font-size:clamp(30px,4.4vw,50px);margin:18px 0 14px} .section-head p{color:var(--mut);font-size:18px} .chrome{background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent} .accent{color:var(--accent-2)} /* --- Buttons --- */ .btn{ --pad:14px 24px; display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:var(--pad);border-radius:999px;font-weight:600;font-size:15px; cursor:pointer;border:1px solid transparent;transition:.25s var(--ease); white-space:nowrap;line-height:1; } .btn svg{width:17px;height:17px} .btn-primary{background:var(--accent);color:#fff;box-shadow:0 10px 30px -8px rgba(79,141,255,.6)} .btn-primary:hover{background:var(--accent-2);transform:translateY(-2px);box-shadow:0 16px 36px -8px rgba(79,141,255,.7)} .btn-ghost{background:rgba(255,255,255,.04);color:var(--fg);border-color:var(--line-2)} .btn-ghost:hover{background:rgba(255,255,255,.09);transform:translateY(-2px)} .btn-lg{--pad:17px 30px;font-size:16px} /* --- Header --- */ .header{ position:fixed;top:0;left:0;right:0;z-index:100; transition:.35s var(--ease); } .header-inner{ max-width:var(--maxw);margin:0 auto;padding:16px 24px; display:flex;align-items:center;justify-content:space-between;gap:24px; } .header.scrolled{background:rgba(8,8,10,.82);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)} .header.scrolled .header-inner{padding-top:12px;padding-bottom:12px} .brand{display:flex;align-items:center;gap:12px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:20px;letter-spacing:.28em} .brand .mark{ width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto; background:linear-gradient(145deg,#20222b,#0c0d11);border:1px solid var(--line-2); box-shadow:inset 0 1px 0 rgba(255,255,255,.14); } .brand .mark svg{width:20px;height:20px} .nav{display:flex;align-items:center;gap:6px} .nav a{ padding:9px 14px;border-radius:999px;font-size:14.5px;font-weight:500;color:var(--fg-dim); transition:.2s var(--ease); } .nav a:hover{color:#fff;background:rgba(255,255,255,.06)} .header-cta{display:flex;align-items:center;gap:12px} .hamburger{display:none;background:none;border:1px solid var(--line-2);border-radius:10px;width:44px;height:42px;cursor:pointer} .hamburger span{display:block;width:19px;height:2px;background:var(--fg);margin:4px auto;transition:.3s var(--ease)} /* --- Hero --- */ .hero{position:relative;padding:150px 0 90px;overflow:hidden} .hero::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:64px 64px; -webkit-mask-image:radial-gradient(120% 80% at 50% 0%,#000 30%,transparent 78%); mask-image:radial-gradient(120% 80% at 50% 0%,#000 30%,transparent 78%); } .hero .wrap{position:relative;z-index:1} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center} .hero h1{font-size:clamp(42px,6.2vw,76px);letter-spacing:-.03em;margin:22px 0 22px} .hero h1 .line{display:block} .hero p.lead{font-size:20px;color:var(--fg-dim);max-width:520px;margin-bottom:34px} .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:36px} .hero-trust{display:flex;gap:26px;flex-wrap:wrap;align-items:center;color:var(--mut);font-size:13.5px} .hero-trust .t{display:flex;align-items:center;gap:9px;font-weight:500} .hero-trust .t svg{width:16px;height:16px;color:var(--accent-2)} .hero-trust .dot{width:4px;height:4px;border-radius:50%;background:var(--line-2)} /* hero visual collage */ .hero-visual{position:relative} .hero-visual .frame{ position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line-2); box-shadow:var(--shadow); } .hero-visual .frame img{width:100%;height:520px;object-fit:cover} .hero-visual .frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(6,6,9,.55))} .hero-badge{ position:absolute;left:-22px;bottom:34px;z-index:3; background:rgba(16,17,22,.92);backdrop-filter:blur(8px); border:1px solid var(--line-2);border-radius:14px;padding:14px 18px; display:flex;align-items:center;gap:13px;box-shadow:var(--shadow); } .hero-badge .three-m{ font-family:'Space Grotesk';font-weight:700;font-size:22px;color:#fff; background:linear-gradient(180deg,#fff,#aeb4c0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } .hero-badge .lbl{font-size:12px;color:var(--mut);line-height:1.35} .hero-badge .lbl b{color:var(--fg);display:block;font-size:13.5px} .hero-float{ position:absolute;right:-20px;top:-26px;width:150px;height:150px;border-radius:16px;overflow:hidden; border:1px solid var(--line-2);box-shadow:var(--shadow);z-index:2; } .hero-float img{width:100%;height:100%;object-fit:cover} /* --- Marquee --- */ .marquee{ border-top:1px solid var(--line);border-bottom:1px solid var(--line); padding:20px 0;overflow:hidden;background:rgba(255,255,255,.015); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); } .marquee-track{display:flex;gap:44px;width:max-content;animation:scroll-x 34s linear infinite} .marquee:hover .marquee-track{animation-play-state:paused} .marquee .item{display:flex;align-items:center;gap:44px;font-family:'Space Grotesk';font-weight:600;font-size:18px;letter-spacing:.04em;color:var(--fg-dim);text-transform:uppercase;white-space:nowrap} .marquee .item::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)} @keyframes scroll-x{to{transform:translateX(-50%)}} /* --- Services --- */ .svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .svc{ position:relative;padding:26px 24px 28px;border-radius:var(--radius); background:linear-gradient(180deg,var(--panel),var(--bg-2)); border:1px solid var(--line);overflow:hidden;transition:.3s var(--ease); } .svc:hover{transform:translateY(-5px);border-color:var(--line-2);box-shadow:var(--shadow)} .svc::before{content:"";position:absolute;inset:0;opacity:0;transition:.3s;background:radial-gradient(400px 200px at 50% -20%,rgba(79,141,255,.18),transparent 70%)} .svc:hover::before{opacity:1} .svc .ico{ width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:18px; background:linear-gradient(145deg,#1d1f28,#101116);border:1px solid var(--line-2);color:var(--accent-2); } .svc .ico svg{width:23px;height:23px} .svc h3{font-size:19px;margin-bottom:8px} .svc p{font-size:14.5px;color:var(--mut);line-height:1.55} /* --- Work / Gallery --- */ .work-filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:30px} .chip{ padding:9px 17px;border-radius:999px;font-size:14px;font-weight:500;cursor:pointer; background:rgba(255,255,255,.03);border:1px solid var(--line);color:var(--fg-dim);transition:.22s var(--ease); } .chip:hover{color:#fff;border-color:var(--line-2)} .chip.active{background:var(--fg);color:#0a0a0c;border-color:var(--fg)} .gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;grid-auto-flow:dense} .tile{ position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line); cursor:pointer;background:var(--panel);min-height:200px;transition:.35s var(--ease); } .tile img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);position:absolute;inset:0} .tile:hover img{transform:scale(1.06)} .tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(5,5,8,.86));opacity:.85;transition:.3s} .tile:hover::after{opacity:1} .tile .meta{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;transform:translateY(6px);opacity:.94;transition:.3s var(--ease)} .tile:hover .meta{transform:translateY(0);opacity:1} .tile .cat{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2);font-weight:600} .tile .ttl{font-family:'Space Grotesk';font-weight:600;font-size:18px;margin-top:3px} .tile.span-6{grid-column:span 6} .tile.span-4{grid-column:span 4} .tile.span-8{grid-column:span 8} .tile.span-3{grid-column:span 3} .tile.tall{grid-row:span 2} .tile.is-hidden{display:none} /* --- Brand band --- */ .band{position:relative;padding:120px 0;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .band-bg{position:absolute;inset:0;z-index:-1} .band-bg img{width:100%;height:100%;object-fit:cover} .band-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,6,9,.95) 20%,rgba(6,6,9,.5) 70%,rgba(6,6,9,.8))} .band .inner{max-width:640px} .band h2{font-size:clamp(30px,4.4vw,50px);margin:16px 0} .band p{color:var(--fg-dim);font-size:19px;margin-bottom:28px} /* --- Stats --- */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .stat{padding:30px 26px;border-radius:var(--radius);background:linear-gradient(180deg,var(--panel),var(--bg-2));border:1px solid var(--line)} .stat .num{font-family:'Space Grotesk';font-weight:700;font-size:clamp(38px,5vw,54px);letter-spacing:-.03em;background:var(--chrome);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .stat .lbl{color:var(--mut);font-size:15px;margin-top:6px} /* --- Process --- */ .process{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:step} .step{position:relative;padding:30px 24px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line)} .step .n{font-family:'Space Grotesk';font-weight:700;font-size:15px;color:var(--accent-2);letter-spacing:.1em} .step h3{font-size:20px;margin:14px 0 9px} .step p{color:var(--mut);font-size:14.5px} .step::before{content:"";position:absolute;top:38px;left:100%;width:18px;height:1px;background:var(--line-2)} .process .step:last-child::before{display:none} /* --- About --- */ .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .about-copy p{color:var(--fg-dim);font-size:17.5px;margin-bottom:18px} .about-copy .sig{margin-top:26px;font-family:'Space Grotesk';font-weight:600;color:var(--fg);letter-spacing:.02em} .about-copy .sig span{display:block;color:var(--mut);font-weight:400;font-size:14px;letter-spacing:0} .about-media{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line-2);box-shadow:var(--shadow)} .about-media img{width:100%;height:560px;object-fit:cover} .creds{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px} .cred{display:inline-flex;align-items:center;gap:9px;padding:10px 15px;border-radius:11px;background:rgba(255,255,255,.03);border:1px solid var(--line);font-size:13.5px;font-weight:500} .cred svg{width:16px;height:16px;color:var(--accent-2)} /* --- Contact --- */ .contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start} .contact-cards{display:flex;flex-direction:column;gap:14px;margin-top:30px} .cc{ display:flex;gap:16px;align-items:center;padding:18px 20px;border-radius:var(--radius); background:var(--panel);border:1px solid var(--line);transition:.25s var(--ease); } .cc:hover{border-color:var(--line-2);transform:translateX(4px)} .cc .ico{width:44px;height:44px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;background:linear-gradient(145deg,#1d1f28,#101116);border:1px solid var(--line-2);color:var(--accent-2)} .cc .ico svg{width:20px;height:20px} .cc .k{display:block;font-size:12.5px;color:var(--mut);letter-spacing:.04em;margin-bottom:2px} .cc .v{display:block;font-size:16.5px;font-weight:600;font-family:'Space Grotesk'} .form{padding:30px;border-radius:var(--radius);background:linear-gradient(180deg,var(--panel),var(--bg-2));border:1px solid var(--line)} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} .field{margin-bottom:14px} .field label{display:block;font-size:13px;color:var(--fg-dim);margin-bottom:7px;font-weight:500} .field input,.field select,.field textarea{ width:100%;padding:13px 15px;border-radius:11px;background:#0c0c10;border:1px solid var(--line-2); color:var(--fg);font-family:inherit;font-size:15px;transition:.2s; } .field textarea{resize:vertical;min-height:110px} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,141,255,.18)} .form .note{font-size:12.5px;color:var(--mut);margin-top:10px;text-align:center} /* --- Footer --- */ .footer{border-top:1px solid var(--line);padding:64px 0 30px;margin-top:20px} .footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--line)} .footer .brand{margin-bottom:16px} .footer-col h4{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-bottom:16px;font-family:'Inter';font-weight:600} .footer-col a{display:block;color:var(--fg-dim);font-size:15px;padding:5px 0;transition:.2s} .footer-col a:hover{color:#fff} .footer-desc{color:var(--mut);font-size:15px;max-width:330px} .socials{display:flex;gap:10px;margin-top:20px} .socials a{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.03);border:1px solid var(--line);color:var(--fg-dim);transition:.25s var(--ease)} .socials a:hover{color:#fff;border-color:var(--line-2);transform:translateY(-3px)} .socials svg{width:19px;height:19px} .footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:26px;color:var(--mut);font-size:13.5px} /* --- Lightbox --- */ .lightbox{position:fixed;inset:0;z-index:200;background:rgba(4,4,6,.92);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:30px} .lightbox.open{display:flex} .lightbox img{max-width:min(1100px,94vw);max-height:86vh;border-radius:14px;border:1px solid var(--line-2);box-shadow:var(--shadow)} .lightbox .cap{position:absolute;bottom:26px;left:0;right:0;text-align:center;color:var(--fg-dim);font-size:15px} .lightbox .x{position:absolute;top:22px;right:26px;width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid var(--line-2);color:#fff;cursor:pointer;font-size:20px} /* --- Reveal animation --- */ .reveal{opacity:0;transform:translateY(26px);transition:.8s var(--ease)} .reveal.in{opacity:1;transform:none} .reveal-d1{transition-delay:.08s}.reveal-d2{transition-delay:.16s}.reveal-d3{transition-delay:.24s}.reveal-d4{transition-delay:.32s} /* --- Coverage / all 50 states --- */ .states{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px} .state{ display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:11px; background:linear-gradient(180deg,var(--panel),var(--bg-2));border:1px solid var(--line); font-size:14.5px;font-weight:500;color:var(--fg-dim);transition:.22s var(--ease); } .state::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--line-2);flex:0 0 auto;transition:.22s var(--ease)} .state:hover{border-color:var(--line-2);color:#fff;transform:translateY(-2px)} .state:hover::before{background:var(--accent-2)} .state.home{border-color:rgba(79,141,255,.45);color:#fff;background:linear-gradient(180deg,#141b2e,var(--bg-2))} .state.home::before{background:var(--accent);box-shadow:0 0 9px var(--accent)} .coverage-note{margin-top:28px;color:var(--mut);font-size:15.5px;max-width:640px} .coverage-note a{color:var(--accent-2);font-weight:600} .coverage-note a:hover{color:#fff} /* ===================== INTRO / WELD ANIMATION ===================== */ body.intro-lock{overflow:hidden} .intro{ position:fixed;inset:0;z-index:1000;display:none; flex-direction:column;align-items:center;justify-content:center;gap:30px; background:radial-gradient(circle at 50% 42%, #17181e 0%, #0a0a0c 58%, #08080a 100%); } .intro.done{opacity:0;visibility:hidden;transform:scale(1.05); transition:opacity .6s var(--ease), visibility .6s, transform .8s var(--ease);pointer-events:none} .intro-figure{position:relative;width:220px;height:200px} .intro-mark{position:absolute;inset:0;width:220px;height:200px;overflow:visible} .tri-base,.bar-base{fill:none;stroke:rgba(255,255,255,.09);stroke-width:3;stroke-linejoin:round;stroke-linecap:round} .tri-weld,.bar-weld{ fill:none;stroke:url(#chromeV);stroke-width:3.4;stroke-linejoin:round;stroke-linecap:round; filter:drop-shadow(0 0 3px #ffd27a) drop-shadow(0 0 11px #ff8a1e) drop-shadow(0 0 22px rgba(255,110,20,.6)); } /* hidden until the weld line reaches them */ .tri-weld{stroke-dasharray:var(--l,510);stroke-dashoffset:var(--l,510)} .bar-weld{stroke-dasharray:var(--lb,90);stroke-dashoffset:var(--lb,90)} .intro-spark{ position:absolute;top:0;left:0;width:15px;height:15px;opacity:0; offset-path:path("M110 26 L194 174 L26 174 Z");offset-distance:0%;offset-anchor:50% 50%; border-radius:50%; background:radial-gradient(circle,#fff 0%,#fff2cf 30%,#ffb14a 60%,rgba(255,140,30,0) 100%); box-shadow:0 0 12px 4px #ffce7a,0 0 26px 10px rgba(255,140,30,.9),0 0 52px 20px rgba(255,90,10,.45); } .ember{position:absolute;top:50%;left:50%;width:3px;height:3px;border-radius:50%; background:#ffe0a0;box-shadow:0 0 6px 1px #ff9427;opacity:0} .intro-word{ font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:28px;letter-spacing:.52em;text-indent:.52em; background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent; opacity:0;transform:translateY(10px)} .intro-tag{color:var(--mut);font-size:13px;letter-spacing:.16em;text-transform:uppercase;opacity:0;transform:translateY(8px);margin-top:-14px} /* animations only run once JS adds .run (lets us gate + replay cleanly) */ .intro.run .tri-weld{animation:weld-draw 1.5s linear .35s forwards, weld-cool .8s ease 1.8s forwards} .intro.run .bar-weld{animation:weld-draw-bar .4s linear 1.5s forwards, weld-cool .7s ease 2s forwards} .intro.run .intro-spark{animation:spark-run 1.5s linear .35s forwards, spark-fade .35s ease 1.8s forwards} .intro.run .ember{animation:ember-fly .55s ease-out .35s infinite} .intro.run .intro-word{animation:rise .8s var(--ease) 2s forwards} .intro.run .intro-tag{animation:rise .8s var(--ease) 2.25s forwards} @keyframes weld-draw{to{stroke-dashoffset:0}} @keyframes weld-draw-bar{to{stroke-dashoffset:0}} @keyframes weld-cool{ from{filter:drop-shadow(0 0 3px #ffd27a) drop-shadow(0 0 11px #ff8a1e) drop-shadow(0 0 22px rgba(255,110,20,.6))} to{filter:drop-shadow(0 0 1px rgba(220,224,232,.5)) drop-shadow(0 0 4px rgba(150,160,180,.28))} } @keyframes spark-run{from{opacity:1;offset-distance:0%}to{opacity:1;offset-distance:100%}} @keyframes spark-fade{to{opacity:0}} @keyframes ember-fly{ 0%{transform:translate(-50%,-50%) scale(1);opacity:1} 100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(0);opacity:0} } @keyframes rise{to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){ .intro,.intro.run *{animation:none!important} } /* --- Responsive --- */ @media(max-width:1000px){ .svc-grid{grid-template-columns:repeat(2,1fr)} .stats,.process{grid-template-columns:repeat(2,1fr)} .step::before{display:none} .hero-grid{grid-template-columns:1fr;gap:40px} .hero-visual{max-width:520px} .about-grid,.contact-grid{grid-template-columns:1fr;gap:38px} .about-media img{height:420px} .footer-top{grid-template-columns:1fr 1fr} } @media(max-width:720px){ body{font-size:16px} .section{padding:76px 0} .nav,.header-cta .btn{display:none} .hamburger{display:block} .header-cta{gap:0} .nav.open{ display:flex;flex-direction:column;position:absolute;top:70px;left:16px;right:16px; background:rgba(12,12,16,.97);backdrop-filter:blur(16px);border:1px solid var(--line-2); border-radius:16px;padding:14px;gap:4px; } .nav.open a{padding:13px 16px;font-size:16px} .gallery{grid-template-columns:repeat(2,1fr)} .tile.span-6,.tile.span-4,.tile.span-8,.tile.span-3{grid-column:span 1} .tile.tall{grid-row:span 1} .form-row{grid-template-columns:1fr} .footer-top{grid-template-columns:1fr} .hero-float{display:none} .hero-badge{left:12px} .intro-figure{transform:scale(.82)} .intro-word{font-size:22px} .intro-tag{font-size:11px} }