/* ========================================================== Align Space Interia — Site Styles ONE stylesheet for every page. Structure: 1. Shared design system (variables, layout, nav, footer, components, animations) — used on every page. 2. Portfolio-page-only additions (showcase carousel, the photo variant of case-media). Selectors are unique to markup that only exists on portfolio.html, so they're safe left unscoped. 3. Cost-calculator-page-only additions. Same reasoning. 4. Home-page-only additions and overrides. The home page redesigns a few shared selectors (.section, .hero, ...) so this block is scoped under body.page-home to avoid changing those selectors on every other page. index.html has class="page-home" on its tag for this reason. ========================================================= */ /* ========================================================= Align Space Interia — Glassmorphism Design System ========================================================= */ :root{ --bg:#FBF7EE; --bg-2:#F5EEDC; --bg-3:#EFE4C8; --card:rgba(255,255,255,0.55); --card-strong:rgba(255,255,255,0.78); --border:rgba(150,113,45,0.22); --border-strong:rgba(150,113,45,0.4); --white:#2A2013; --zinc-400:#6E5D42; --zinc-500:#93815C; --zinc-700:#4A3C22; --lime:#A9822E; --lime-dim:#84651E; --radius:16px; --radius-lg:24px; --shadow:0 8px 32px rgba(120,90,30,0.14); --shadow-lg:0 20px 60px rgba(120,90,30,0.2); --blur:16px; --font-head:"Cormorant Garamond",Georgia,serif; --font-body:"Jost",sans-serif; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--bg); color:var(--zinc-400); font-family:var(--font-body); -webkit-font-smoothing:antialiased; position:relative; overflow-x:hidden; } /* faint architectural grid on the obsidian background */ body::before{ content:""; position:fixed;inset:0;z-index:0;pointer-events:none; background-image: linear-gradient(rgba(150,113,45,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(150,113,45,0.07) 1px, transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%); } img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} ul{margin:0;padding:0;list-style:none;} button{font-family:inherit;} h1,h2,h3,h4{font-family:var(--font-head);color:var(--white);margin:0;line-height:1.15;letter-spacing:-.01em;} h1{font-weight:600;} h2,h3,h4{font-weight:600;} p{margin:0;} .wrap{max-width:1240px;margin:0 auto;padding:0 32px;position:relative;z-index:1;} .eyebrow{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--lime);margin-bottom:14px;} .section{padding:110px 0;position:relative;z-index:1;} .section-head{max-width:640px;margin:0 auto 56px;text-align:center;} .section-head.left{margin:0 0 48px;text-align:left;} .section-head h2{font-size:clamp(28px,3.4vw,42px);} .section-head p{margin-top:16px;font-size:16px;line-height:1.7;color:var(--zinc-400);} /* ===== glass primitives ===== */ .glass{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur)); box-shadow:var(--shadow); position:relative; overflow:hidden; } .glass::after{ content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit; background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%), rgba(169,130,46,0.16), transparent 60%); opacity:0;transition:opacity .3s ease; } .glass:hover::after{opacity:1;} .btn{ display:inline-flex;align-items:center;gap:8px; padding:14px 26px;border-radius:100px;font-weight:600;font-size:14px; border:1px solid transparent;cursor:pointer;transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease,background .25s ease,color .25s ease; font-family:var(--font-body); } .btn-lime{background:var(--lime);color:#0a0a0a;} .btn-lime:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 14px 30px rgba(169,130,46,.3);} .btn-outline{border-color:var(--border-strong);color:var(--white);background:rgba(255,255,255,.03);} .btn-outline:hover{background:rgba(255,255,255,.08);} .btn-sm{padding:8px 15px;font-size:12.5px;} .btn-block{width:100%;justify-content:center;} .tag-pill{ display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--zinc-400); border:1px solid var(--border);padding:8px 16px;border-radius:100px;background:rgba(255,255,255,.03); cursor:pointer;transition:all .25s ease; } .tag-pill.active,.tag-pill:hover{background:var(--lime);color:#0a0a0a;border-color:var(--lime);} .live-dot{width:8px;height:8px;border-radius:50%;background:var(--lime);display:inline-block; box-shadow:0 0 0 0 rgba(169,130,46,.7);animation:pulse 1.8s infinite;} @keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(169,130,46,.5);} 70%{box-shadow:0 0 0 8px rgba(169,130,46,0);} 100%{box-shadow:0 0 0 0 rgba(169,130,46,0);} } /* ===== header ===== */ header.site{position:fixed;top:0;left:0;right:0;z-index:500;padding:15px 0;transition:padding .3s ease,background .3s ease;} header.site.scrolled{padding:8px 0;} .nav-glass{ max-width:1240px;margin:0 auto;padding:10px 14px 10px 20px; display:flex;align-items:center;justify-content:space-between; background:rgba(255,255,255,.55);border:1px solid var(--border);border-radius:100px; backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%); box-shadow:var(--shadow); } .brand{font-family:var(--font-head);font-weight:700;font-size:17px;color:var(--white);display:flex;align-items:center;gap:9px;} .brand .brand-mark{flex-shrink:0;} .brand span{color:var(--lime);} .nav-links{display:flex;gap:24px;} .nav-links a{font-size:13px;font-weight:500;color:var(--zinc-400);position:relative;transition:color .25s ease;} .nav-links a:hover,.nav-links a.active{color:var(--white);} .nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--lime);border-radius:2px;} .nav-actions{display:flex;align-items:center;gap:12px;} .menu-toggle{display:none;background:none;border:none;color:var(--white);font-size:22px;cursor:pointer;} @media (max-width:900px){ .nav-links{position:fixed;top:88px;left:16px;right:16px;flex-direction:column;gap:0; background:rgba(255,251,240,.95);border:1px solid var(--border);border-radius:20px; backdrop-filter:blur(20px);padding:10px;display:none;} .nav-links.open{display:flex;} .nav-links a{padding:14px 10px;border-bottom:1px solid var(--border);} .nav-links a:last-child{border-bottom:none;} .menu-toggle{display:block;} .nav-actions .btn-outline{display:none;} } /* ===== hero ===== */ .hero{min-height:100vh;display:flex;align-items:center;padding:160px 0 100px;position:relative;} .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;} .hero h1{font-size:clamp(38px,5vw,64px);color:var(--white);max-width:620px;} .hero h1 .lime{color:var(--lime);} .hero p.lead{margin-top:24px;font-size:17px;line-height:1.75;color:var(--zinc-400);max-width:480px;} .hero-ctas{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap;} .hero-stats{margin-top:56px;display:flex;gap:34px;flex-wrap:wrap;} .hero-stats div{border-left:1px solid var(--border);padding-left:16px;} .hero-stats b{display:block;font-family:var(--font-head);font-size:26px;color:var(--white);} .hero-stats span{font-size:12px;color:var(--zinc-500);} .hero-visual{padding:24px;} .hero-visual .frame{ border-radius:14px;height:300px; background: repeating-linear-gradient(0deg, rgba(169,130,46,.22) 0 1px, transparent 1px 32px), repeating-linear-gradient(90deg, rgba(169,130,46,.22) 0 1px, transparent 1px 32px), linear-gradient(135deg,#F3E8CC,#E9D8AC); } .hero-visual .cap{display:flex;justify-content:space-between;margin-top:18px;} .hero-visual .cap b{color:var(--white);font-family:var(--font-head);font-size:15px;font-weight:500;} .hero-visual .cap span{font-size:12px;color:var(--zinc-500);} .float-chip{ position:absolute;padding:10px 16px;border-radius:12px;font-size:12.5px;font-weight:600;color:var(--white); background:rgba(255,251,240,.85);border:1px solid var(--border);backdrop-filter:blur(14px);box-shadow:var(--shadow); } .float-chip.c1{top:6px;left:6px;} .float-chip.c2{bottom:38px;right:6px;} .float-chip .lime{color:var(--lime);font-family:var(--font-head);} /* ===== BENTO / GRID CARDS ===== */ .bento{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:220px; gap:18px; } .bento .b-item{ border-radius:var(--radius); overflow:hidden; position:relative; display:flex; align-items:flex-end; padding:0; border:none; box-shadow:none; background:#eee; } /* BIG FULL-SIZE IMAGE */ .bento .b-item img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; margin:0; padding:0; border:0; box-shadow:none; transition:transform .4s ease; } /* Image zoom on hover */ .bento .b-item:hover img{ transform:scale(1.06); } /* Wide card */ .bento .b-item.wide{ grid-column:span 2; } /* Tall card */ .bento .b-item.tall{ grid-row:span 2; } /* REMOVE DARK / BLACK OVERLAY */ .bento .b-item::after{ display:none; } /* Text */ .bento .b-item .info{ position:relative; z-index:2; padding:15px; width:100%; background:linear-gradient( to top, rgba(0,0,0,.65), transparent ); } .bento .b-item .info b{ color:#fff; font-family:var(--font-head); font-size:16px; display:block; } .bento .b-item .info span{ font-size:11.5px; color:#fff; } /* ===== TABLET ===== */ @media (max-width:900px){ .bento{ grid-template-columns:repeat(2,1fr); grid-auto-rows:210px; gap:14px; } .bento .b-item.wide{ grid-column:span 2; } } /* ===== PHONE ===== */ @media (max-width:560px){ .bento{ grid-template-columns:repeat(2,1fr); grid-auto-rows:180px; gap:10px; } .bento .b-item.wide{ grid-column:span 2; } .bento .b-item.tall{ grid-row:span 2; } .bento .b-item .info{ padding:10px; } .bento .b-item .info b{ font-size:13px; } .bento .b-item .info span{ font-size:10px; } } /* ===== SMALL PHONE ===== */ @media (max-width:400px){ .bento{ grid-auto-rows:160px; gap:8px; } } /* ===== cards ===== */ .card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;} .svc-card{padding:32px 28px;} .svc-card .icon{width:46px;height:46px;border-radius:12px;background:rgba(169,130,46,.14);display:flex;align-items:center;justify-content:center;color:var(--lime);font-size:20px;} .svc-card h3{margin-top:20px;font-size:20px;} .svc-card p{margin-top:12px;font-size:14.5px;line-height:1.65;} .svc-card .price{margin-top:16px;font-size:13px;color:var(--lime);font-weight:600;} .svc-card a.more{display:inline-block;margin-top:16px;font-size:13.5px;font-weight:600;color:var(--white);border-bottom:1px solid var(--border-strong);} @media (max-width:900px){.card-grid{grid-template-columns:1fr 1fr;}} @media (max-width:560px){.card-grid{grid-template-columns:1fr;}} /* ===== comparison table (shared — used on index.html and services.html) ===== */ .compare-card{padding:4px;} .compare-table{width:100%;border-collapse:collapse;} .compare-table th,.compare-table td{padding:18px 22px;text-align:left;font-size:14px;vertical-align:middle;color:var(--zinc-400);} .compare-table thead th{background:var(--bg-3);font-family:var(--font-head);font-size:16px;font-weight:600;color:var(--white);} .compare-table thead th.col-us{color:var(--lime-dim);} .compare-table tbody tr{border-top:1px solid var(--border);} .compare-table tbody td.crit{font-weight:600;color:var(--white);white-space:nowrap;} .compare-table tbody td.col-us{background:rgba(169,130,46,.09);font-weight:500;color:var(--white);} .compare-table .mark{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px; border-radius:50%;font-size:11px;margin-right:9px;flex-shrink:0;font-weight:700;vertical-align:-4px;} @media (max-width:760px){ .compare-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);} .compare-table,.compare-table tbody,.compare-table tr{display:block;width:100%;} .compare-table tbody tr{margin-bottom:14px;border:1px solid var(--border);border-radius:14px;overflow:hidden; background:var(--card-strong);} .compare-table tbody tr:last-child{margin-bottom:0;} .compare-table tbody td{display:flex;align-items:center;justify-content:space-between;gap:14px; padding:13px 16px;border-bottom:1px solid var(--border);text-align:right;} .compare-table tbody tr td:last-child{border-bottom:none;} .compare-table tbody td.crit{background:var(--bg-3);justify-content:flex-start;font-family:var(--font-head);font-size:15.5px;padding:14px 18px;} .compare-table tbody td:not(.crit)::before{content:attr(data-label);font-size:11px;font-weight:700;letter-spacing:.02em; color:var(--zinc-500);text-align:left;flex-shrink:0;} .compare-table .mark{vertical-align:middle;} } /* ===== testimonials ===== */ .testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;} .testi-card{padding:30px;} .testi-card .stars{color:var(--lime);font-size:14px;letter-spacing:2px;} .testi-card p{margin-top:16px;font-size:14.5px;line-height:1.7;color:var(--zinc-400);} .testi-card .who{margin-top:20px;display:flex;align-items:center;gap:12px;} .testi-card .avatar{width:38px;height:38px;border-radius:50%;background:var(--bg-3);border:1px solid var(--border);} .testi-card .who b{color:var(--white);font-size:13.5px;display:block;} .testi-card .who span{font-size:12px;color:var(--zinc-500);} @media (max-width:900px){.testi-grid{grid-template-columns:1fr;}} /* ===== FAQ accordion ===== */ .faq{max-width:760px;margin:0 auto;} .faq-item{border-bottom:1px solid var(--border);padding:22px 0;cursor:pointer;} .faq-item h3{font-size:16.5px;display:flex;justify-content:space-between;align-items:center;color:var(--white);font-weight:500;} .faq-item .plus{color:var(--lime);font-size:20px;transition:transform .25s ease;} .faq-item.open .plus{transform:rotate(45deg);} .faq-item .a{max-height:0;overflow:hidden;transition:max-height .3s ease;font-size:14.5px;line-height:1.7;} .faq-item.open .a{max-height:240px;margin-top:14px;} /* ===== CTA band ===== */ .cta-band{padding:70px;text-align:center;} .cta-band h2{font-size:clamp(26px,3vw,38px);} .cta-band p{margin-top:14px;font-size:16px;color:var(--zinc-400);} .cta-band .hero-ctas{justify-content:center;} /* ===== footer ===== */ footer.site{padding:90px 0 0;position:relative;z-index:1;} .foot-glass{padding:50px;display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:40px;} .foot-brand p{margin-top:14px;font-size:14px;line-height:1.7;max-width:280px;} .foot-social{display:flex;gap:10px;margin-top:20px;} .foot-social a{width:38px;height:38px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--white);transition:all .25s ease;} .foot-social a:hover{background:var(--lime);color:#0a0a0a;border-color:var(--lime);} .foot-col h5{font-size:12.5px;letter-spacing:.04em;color:var(--lime);margin-bottom:18px;font-weight:700;} .foot-col ul{display:flex;flex-direction:column;gap:12px;} .foot-col a{font-size:14px;color:var(--zinc-400);transition:color .2s ease;} .foot-col a:hover{color:var(--white);} .foot-col.contact li{font-size:14px;color:var(--zinc-400);line-height:1.6;} .foot-bottom{margin-top:36px;padding:26px 0 30px;border-top:1px solid var(--border); display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12.5px;color:var(--zinc-500);} @media (max-width:900px){.foot-glass{grid-template-columns:1fr 1fr;padding:34px 24px;}} @media (max-width:560px){.foot-glass{grid-template-columns:1fr;}} /* ===== floating actions ===== */ .floaters{position:fixed;right:22px;bottom:24px;z-index:400;display:flex;flex-direction:column;gap:12px;} .floaters a{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center; color:#2A2013;font-size:20px;background:var(--lime);box-shadow:0 12px 26px rgba(169,130,46,.32);transition:transform .25s ease;} .floaters a:hover{transform:scale(1.08);} .floaters a.wa{background:#25d366;color:#fff;} /* ===== page hero (interior pages) ===== */ .page-hero{padding:170px 0 70px;text-align:left;} .page-hero h1{font-size:clamp(32px,4.4vw,52px);color:var(--white);max-width:700px;} .crumbs{font-size:13px;color:var(--zinc-500);margin-bottom:18px;} .crumbs a{color:var(--zinc-400);} .crumbs a:hover{color:var(--lime);} /* ===== forms ===== */ .form-glass{padding:34px;} .form-glass label{font-size:12.5px;color:var(--zinc-400);display:block;margin:14px 0 6px;} .form-glass input,.form-glass select,.form-glass textarea{ width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--border); background:rgba(255,255,255,.5);color:var(--white);font-family:inherit;font-size:14px; } .form-glass input:focus,.form-glass select:focus,.form-glass textarea:focus{outline:2px solid var(--lime);outline-offset:1px;} .form-glass input::placeholder,.form-glass textarea::placeholder{color:var(--zinc-500);} .form-glass textarea{resize:vertical;min-height:100px;} .pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;} .pill-row label{margin:0;display:flex;align-items:center;gap:6px;font-size:12.5px; border:1px solid var(--border);padding:8px 12px;border-radius:100px;cursor:pointer;} .pill-row input{width:auto;} /* ===== two col layout ===== */ .two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;} @media (max-width:900px){.two-col{grid-template-columns:1fr;}} /* ===== process steps ===== */ .proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;} .proc-card{padding:28px 24px;} .proc-idx{font-family:var(--font-head);font-size:34px;color:var(--lime);opacity:.55;} .proc-card h3{margin-top:10px;font-size:18px;} .proc-card p{margin-top:8px;font-size:13.5px;line-height:1.6;} @media (max-width:900px){.proc-grid{grid-template-columns:1fr 1fr;}} @media (max-width:560px){.proc-grid{grid-template-columns:1fr;}} /* ===== stats strip ===== */ .stats-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:40px;} .stats-strip div{text-align:center;} .stats-strip b{display:block;font-family:var(--font-head);font-size:34px;color:var(--white);} .stats-strip span{font-size:12.5px;color:var(--zinc-500);} @media (max-width:700px){.stats-strip{grid-template-columns:1fr 1fr;}} /* ===== case study cards ===== */ .case-card{overflow:hidden;} .case-media{height:220px;position:relative;} .case-media .split{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;} .case-media .before{background:linear-gradient(135deg,#EFE2C0,#DCC38E);} .case-media .after{background:linear-gradient(135deg,#F4EBD4,#E7D6AA);} .case-media .split-label{position:absolute;top:10px;font-size:10.5px;font-weight:700;letter-spacing:.05em;color:var(--white); background:rgba(42,32,19,.72);color:#fff;padding:4px 10px;border-radius:100px;} .case-media .split-label.b{left:10px;} .case-media .split-label.a{right:10px;background:rgba(169,130,46,.92);color:#fff;} .case-body{padding:26px;} .case-body h3{font-size:19px;} .case-body .meta{display:flex;gap:16px;margin-top:10px;font-size:12px;color:var(--zinc-500);flex-wrap:wrap;} .case-body p.q{margin-top:16px;font-size:14px;line-height:1.65;color:var(--zinc-400);font-style:italic;} .case-body .materials{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px;} .case-body .materials span{font-size:11px;color:var(--zinc-400);border:1px solid var(--border);padding:4px 10px;border-radius:100px;} /* ===== blog ===== */ .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;} .blog-card{overflow:hidden;} .blog-media{height:170px;} .blog-body{padding:24px;} .blog-cat{font-size:11.5px;font-weight:700;color:var(--lime);letter-spacing:.03em;} .blog-body h3{margin-top:10px;font-size:18px;} .blog-body p{margin-top:10px;font-size:13.5px;line-height:1.6;} .blog-meta{margin-top:16px;font-size:12px;color:var(--zinc-500);} @media (max-width:900px){.blog-grid{grid-template-columns:1fr 1fr;}} @media (max-width:560px){.blog-grid{grid-template-columns:1fr;}} .article{max-width:760px;margin:0 auto;} .article h1{font-size:clamp(30px,4vw,44px);} .article .meta{margin-top:16px;font-size:13px;color:var(--zinc-500);} .article .lead{margin-top:22px;font-size:17px;line-height:1.8;color:var(--zinc-400);} .article h2{margin-top:42px;font-size:24px;} .article p{margin-top:16px;font-size:15.5px;line-height:1.85;color:var(--zinc-400);} .article ul{margin-top:16px;padding-left:20px;list-style:disc;} .article li{font-size:15.5px;line-height:1.8;color:var(--zinc-400);margin-bottom:8px;} .article figure{margin-top:28px;} .article figure img{width:100%;height:auto;max-height:460px;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow);display:block;} .article figure figcaption{margin-top:10px;font-size:12.5px;color:var(--zinc-500);text-align:center;} .article .card-grid{margin-top:24px;} .article .faq{margin-top:8px;} .article table.cost-table{width:100%;margin-top:18px;border-collapse:collapse;font-size:14.5px;} .article table.cost-table th,.article table.cost-table td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--border);color:var(--zinc-400);} .article table.cost-table th{color:var(--white);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.04em;} .article table.cost-table td:first-child,.article table.cost-table th:first-child{color:var(--white);} /* skip link / accessibility */ .skip-link{position:absolute;left:-999px;top:0;background:var(--lime);color:#0a0a0a;padding:12px 18px;z-index:9999;border-radius:0 0 10px 0;font-weight:600;} .skip-link:focus{left:0;} :focus-visible{outline:2px solid var(--lime);outline-offset:2px;} .reveal{opacity:0;transform:translateY(20px);animation:rise .8s ease forwards;} @keyframes rise{to{opacity:1;transform:translateY(0);}} /* ===== rubber-band reveal on scroll ===== */ .reveal-io{opacity:0;transform:translateY(26px) scale(.98);transition:opacity .7s cubic-bezier(.34,1.56,.64,1),transform .7s cubic-bezier(.34,1.56,.64,1);} .reveal-io.in-view{opacity:1;transform:translateY(0) scale(1);} @media (prefers-reduced-motion:reduce){.reveal-io{opacity:1;transform:none;transition:none;}} /* ============ Portfolio page — extra styles ============ */ .case-media{height:220px;position:relative;overflow:hidden;} .case-media .photo{position:absolute;inset:0;} .case-media .photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(42,32,19,.22));} .case-media .cat-tag{position:absolute;top:10px;left:10px;font-size:10.5px;font-weight:700;letter-spacing:.05em; background:rgba(255,251,240,.85);color:var(--white);padding:5px 12px;border-radius:100px;} /* ===== showcase carousel ===== */ .showcase-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px;} .showcase-strip{position:relative;} .showcase-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth; padding:4px 4px 10px;-ms-overflow-style:none;scrollbar-width:none;} .showcase-track::-webkit-scrollbar{display:none;} .showcase-item{position:relative;flex:0 0 300px;height:380px;border-radius:var(--radius);scroll-snap-align:start; overflow:hidden;display:flex;align-items:flex-end;padding:20px;} .showcase-item.wide{flex:0 0 460px;} .showcase-item::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(42,32,19,.6),transparent 55%);} .showcase-caption{position:relative;z-index:2;} .showcase-caption b{color:#fff;font-family:var(--font-head);font-size:17px;display:block;} .showcase-caption span{font-size:12px;color:rgba(255,255,255,.85);} .showcase-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%; background:var(--card-strong);border:1px solid var(--border);display:flex;align-items:center;justify-content:center; cursor:pointer;z-index:5;box-shadow:var(--shadow);color:var(--white);font-size:18px;transition:background .25s,color .25s;} .showcase-nav:hover{background:var(--lime);color:#0a0a0a;} .showcase-nav.prev{left:-23px;} .showcase-nav.next{right:-23px;} @media (max-width:900px){ .showcase-item{flex:0 0 240px;height:300px;} .showcase-item.wide{flex:0 0 320px;} .showcase-nav{display:none;} } /* ============ Cost calculator page — extra styles ============ */ /* ===== cost calculator ===== */ .calc-wrap{display:grid;grid-template-columns:1fr 380px;gap:26px;align-items:flex-start;} .calc-step{padding:30px;margin-bottom:22px;} .calc-step h2{font-size:19px;color:var(--white);} .calc-step .step-num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px; border-radius:50%;background:var(--lime);color:#0a0a0a;font-family:var(--font-head);font-weight:700;font-size:12.5px;margin-right:10px;} .pill-select{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;} .pill-select .opt{padding:10px 20px;border-radius:100px;border:1px solid var(--border); background:rgba(255,255,255,.03);color:var(--zinc-400);font-size:13.5px;font-weight:600;cursor:pointer;transition:all .2s ease;} .pill-select .opt.sel{background:var(--lime);color:#0a0a0a;border-color:var(--lime);} .item-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;} .item-row{display:flex;align-items:center;justify-content:space-between;gap:10px; border:1px solid var(--border);border-radius:12px;padding:14px 16px;cursor:pointer;transition:all .2s ease;background:rgba(255,255,255,.02);} .item-row.sel{border-color:var(--lime);background:rgba(169,130,46,.10);} .item-row .name{font-size:13.5px;color:var(--white);font-weight:500;} .item-row .price{font-size:11.5px;color:var(--zinc-500);display:block;margin-top:3px;} .item-row .check{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--border-strong); display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px;color:transparent;} .item-row.sel .check{background:var(--lime);border-color:var(--lime);color:#0a0a0a;} .qty-row{display:flex;align-items:center;gap:10px;margin-top:16px;} .qty-row label{font-size:13px;color:var(--zinc-400);flex:1;} .qty-btn{width:30px;height:30px;border-radius:8px;border:1px solid var(--border);background:rgba(255,255,255,.04); color:var(--white);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;} .qty-val{width:26px;text-align:center;color:var(--white);font-weight:600;font-size:14px;} .estimate-panel{position:sticky;top:110px;padding:30px;} .estimate-panel h3{font-size:15px;color:var(--zinc-400);font-weight:500;} .estimate-total{font-family:var(--font-head);font-size:38px;color:var(--lime);margin-top:8px;} .estimate-total span{font-size:15px;color:var(--zinc-500);font-family:var(--font-body);} .estimate-list{margin-top:20px;display:flex;flex-direction:column;gap:10px;max-height:260px;overflow-y:auto;} .estimate-list .li{display:flex;justify-content:space-between;font-size:12.5px;color:var(--zinc-400); border-bottom:1px dashed var(--border);padding-bottom:8px;} .estimate-list .li b{color:var(--white);font-weight:500;} .estimate-empty{font-size:13px;color:var(--zinc-500);margin-top:16px;} .estimate-note{margin-top:20px;font-size:11.5px;color:var(--zinc-500);line-height:1.6;} @media (max-width:900px){ .calc-wrap{grid-template-columns:1fr;} .estimate-panel{position:static;} .item-grid{grid-template-columns:1fr;} } /* ============ Services page — extra styles ============ */ /* tighter rhythm between sections, scoped so other pages keep their spacing */ body.page-services .section{padding:64px 0;} body.page-services .page-hero{padding-bottom:46px;} body.page-services .cta-band{padding:54px;} /* ===== service flip-cards (image front / detail back) ===== Selectors are unique to markup that only exists on services.html, so — like the portfolio/cost-calculator blocks above — they're safe left unscoped. */ .flip-card{perspective:1600px;height:300px;} .flip-card .flip-inner{ position:relative;width:100%;height:100%;border-radius:var(--radius); transition:transform .8s cubic-bezier(.4,.2,.2,1);transform-style:preserve-3d; } .flip-card:hover .flip-inner,.flip-card:focus-within .flip-inner{transform:rotateY(180deg);} .flip-card.flipped .flip-inner{transform:rotateY(180deg);} .flip-front,.flip-back{ position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden; border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow); } .flip-front{position:absolute;} .flip-front img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .flip-front-shade{ position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;padding:26px; background:linear-gradient(0deg,rgba(20,15,7,.88) 0%,rgba(20,15,7,.32) 58%,transparent 100%); } .flip-front-shade .icon{width:44px;height:44px;border-radius:12px;background:rgba(169,130,46,.9); display:flex;align-items:center;justify-content:center;color:#160f07;font-size:19px;margin-bottom:12px;} .flip-front-shade h3{color:#fff;font-size:19px;} .flip-front-shade .flip-hint{margin-top:9px;font-size:11.5px;color:rgba(255,255,255,.78);display:inline-flex;align-items:center;gap:6px;} .flip-back{ transform:rotateY(180deg);background:var(--card-strong);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur)); padding:28px 26px;display:flex;flex-direction:column; } .flip-back .icon{width:44px;height:44px;border-radius:12px;background:rgba(169,130,46,.14); display:flex;align-items:center;justify-content:center;color:var(--lime);font-size:19px;flex-shrink:0;} .flip-back h3{margin-top:16px;font-size:18px;} .flip-back p{margin-top:10px;font-size:13.5px;line-height:1.6;} .flip-back .price{margin-top:auto;padding-top:14px;font-size:13px;color:var(--lime);font-weight:600;} .flip-back a.more{display:inline-block;margin-top:8px;font-size:13px;font-weight:600;color:var(--white);border-bottom:1px solid var(--border-strong);} .sv-bg1{background:linear-gradient(135deg,#F3E7C8,#E7D3A0);} .sv-bg2{background:linear-gradient(135deg,#EEE3C6,#E0CB9A);} .sv-bg3{background:linear-gradient(135deg,#F0E6CF,#E3D0A6);} .sv-bg4{background:linear-gradient(135deg,#E9DCBB,#DAC38C);} .sv-bg5{background:linear-gradient(135deg,#F2E9D2,#E6D5A8);} .sv-bg6{background:linear-gradient(135deg,#EBDEC0,#DCC593);} @media (max-width:900px){.flip-card{height:280px;}} @media (max-width:560px){ .flip-card{height:auto;perspective:none;} .flip-card .flip-inner{position:static;height:auto;transform:none !important;transition:none;} .flip-front{display:none;} .flip-back{position:static;transform:none;backface-visibility:visible;box-shadow:none;} } @media (prefers-reduced-motion:reduce){ .flip-card .flip-inner{transition:none;} } /* ============ Home page — extra styles (scoped to body.page-home) ============ */ body.page-home .section{padding:80px 0;position:relative;z-index:1;} /* ===== hero (full-screen video) ===== */ body.page-home .hero{ min-height:100vh;height:100vh;display:flex;align-items:flex-end; padding:0 0 90px;position:relative;overflow:hidden; } body.page-home .hero-video-wrap{position:absolute;inset:0;z-index:0;overflow:hidden;background:linear-gradient(135deg,#3a2c14,#1c150a);} body.page-home .hero-video-wrap video{ position:absolute;top:50%;left:50%;width:100%;height:100%;object-fit:cover; transform:translate(-50%,-50%); } body.page-home .hero-video-wrap::after{ content:"";position:absolute;inset:0; background:linear-gradient(0deg,rgba(20,15,6,.82) 0%,rgba(20,15,6,.42) 45%,rgba(20,15,6,.35) 100%); } body.page-home .hero .wrap{max-width:none;width:100%;margin:0;padding-left:48px;padding-right:48px;box-sizing:border-box;text-align:center;} body.page-home .hero h1{font-size:clamp(28px,3.6vw,46px);max-width:800px;margin:0 auto;color:#fff;} body.page-home .hero p.lead{margin:24px auto 0;font-size:17px;line-height:1.75;color:rgba(255,255,255,.82);max-width:520px;} body.page-home .hero-ctas{justify-content:center;} body.page-home .hero-stats{justify-content:center;} body.page-home .hero-grid{display:block;position:relative;z-index:1;} body.page-home .hero .eyebrow{color:var(--lime);} body.page-home .hero-stats div{border-left:1px solid rgba(255,255,255,.28);padding-left:16px;} body.page-home .hero-stats b{display:block;font-family:var(--font-head);font-size:26px;color:#fff;} body.page-home .hero-stats span{font-size:12px;color:rgba(255,255,255,.65);} body.page-home .float-chip.c1{top:130px;right:32px;left:auto;bottom:auto;} body.page-home .float-chip.c2{top:190px;right:32px;left:auto;bottom:auto;} body.page-home .scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:1; display:flex;flex-direction:column;align-items:center;gap:8px;color:rgba(255,255,255,.75);font-size:11px;letter-spacing:.08em;} body.page-home .scroll-cue span.line{width:1px;height:34px;background:linear-gradient(180deg,rgba(255,255,255,.85),transparent);animation:scrollcue 1.8s ease-in-out infinite;} @keyframes scrollcue{0%{opacity:0;transform:translateY(-6px);}50%{opacity:1;}100%{opacity:0;transform:translateY(10px);}} /* ===== hero mobile fix ===== */ @media (max-width:900px){ body.page-home .hero{min-height:100vh;height:auto;padding:150px 0 60px;align-items:center;} body.page-home .hero .wrap{padding-left:24px;padding-right:24px;} body.page-home .hero h1{font-size:clamp(26px,7vw,34px);max-width:100%;} body.page-home .hero p.lead{max-width:100%;font-size:15px;} body.page-home .hero .eyebrow{white-space:normal;} body.page-home .hero-ctas{margin-top:28px;} body.page-home .hero-stats{gap:22px 28px;margin-top:32px;} body.page-home .float-chip{display:none;} body.page-home .scroll-cue{display:none;} } @media (max-width:480px){ body.page-home .hero-stats{gap:16px 22px;} body.page-home .hero-stats div{padding-left:12px;} } /* ===== book a free consultation ===== */ body.page-home .consult-panel{display:grid;grid-template-columns:1.05fr .95fr;padding:0;} body.page-home .consult-left{ position:relative;padding:60px 56px; background: linear-gradient(150deg,rgba(20,15,7,.93),rgba(35,26,12,.88)), repeating-linear-gradient(45deg, rgba(169,130,46,.09) 0 2px, transparent 2px 16px); color:#fff; } body.page-home .consult-left .eyebrow{color:var(--lime);} body.page-home .consult-left h2{color:#fff;font-size:clamp(26px,3vw,36px);max-width:440px;} body.page-home .consult-left h2 em{color:var(--lime);font-style:italic;} body.page-home .consult-left p.desc{margin-top:16px;font-size:15px;line-height:1.7;color:rgba(255,255,255,.78);max-width:420px;} body.page-home .consult-bullets{margin-top:26px;display:flex;flex-direction:column;gap:12px;} body.page-home .consult-bullets li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:rgba(255,255,255,.85);} body.page-home .consult-bullets li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime);margin-top:7px;flex-shrink:0;} body.page-home .reach-us{margin-top:40px;padding-top:26px;border-top:1px solid rgba(255,255,255,.15);} body.page-home .reach-us h5{font-size:12.5px;letter-spacing:.04em;color:var(--lime);margin-bottom:16px;font-weight:700;text-transform:uppercase;} body.page-home .reach-grid{display:flex;gap:14px;flex-wrap:wrap;} body.page-home .reach-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:14px;padding:16px 18px;flex:1;min-width:150px;} body.page-home .reach-card .pin{width:34px;height:34px;border-radius:50%;background:rgba(169,130,46,.22);color:var(--lime);display:flex;align-items:center;justify-content:center;margin-bottom:10px;font-size:15px;} body.page-home .reach-card b{display:block;color:#fff;font-family:var(--font-head);font-size:15px;} body.page-home .reach-card a{font-size:13px;color:rgba(255,255,255,.7);text-decoration:underline;} body.page-home .consult-right{background:var(--card-strong);padding:44px;} body.page-home .consult-right form{display:block;} body.page-home .consult-right .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;} body.page-home .consult-right label{font-size:12.5px;font-weight:600;color:var(--zinc-400);display:block;margin:16px 0 7px;} body.page-home .consult-right label:first-child{margin-top:0;} body.page-home .consult-right input, body.page-home .consult-right select{ width:100%;padding:13px 16px;border-radius:12px;border:1.5px solid var(--border); background:rgba(255,255,255,.6);color:var(--white);font-family:var(--font-body);font-size:14.5px; transition:border-color .2s ease, box-shadow .2s ease; } body.page-home .consult-right input::placeholder{color:var(--zinc-500);} body.page-home .consult-right input:focus, body.page-home .consult-right select:focus{ outline:none;border-color:var(--lime);box-shadow:0 0 0 3px rgba(169,130,46,.15); } body.page-home .consult-right select{ appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2393815C' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 16px center;padding-right:36px; } body.page-home .consult-right select:invalid{color:var(--zinc-500);} body.page-home .consult-right input[type="number"]{-moz-appearance:textfield;} body.page-home .consult-right .lock-note{margin-top:16px;font-size:12px;color:var(--zinc-500);display:flex;align-items:center;gap:6px;} @media (max-width:900px){ body.page-home .consult-panel{grid-template-columns:1fr;} body.page-home .consult-left, body.page-home .consult-right{padding:40px 28px;} body.page-home .reach-grid{flex-direction:column;} } @media (max-width:560px){body.page-home .consult-right .form-row{grid-template-columns:1fr;}} /* ===== why choose badges ===== */ body.page-home .why-section{padding:20px 0 10px;} body.page-home .badge-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;margin-top:44px;} body.page-home .badge-item{text-align:center;} body.page-home .badge-icon{width:66px;height:66px;border-radius:50%;background:rgba(169,130,46,.12);border:1px solid var(--border); display:flex;align-items:center;justify-content:center;margin:0 auto 14px;color:var(--lime);} body.page-home .badge-icon svg{width:30px;height:30px;} body.page-home .badge-item span{font-size:13px;font-weight:600;color:var(--white);line-height:1.4;display:block;} @media (max-width:900px){body.page-home .badge-grid{grid-template-columns:repeat(3,1fr);}} @media (max-width:560px){body.page-home .badge-grid{grid-template-columns:repeat(2,1fr);}} /* ===== PARTNERS MARQUEE ===== */ body.page-home .partners-wrap { overflow: hidden; position: relative; padding: 36px 0; } body.page-home .partners-wrap::before, body.page-home .partners-wrap::after { content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none; } body.page-home .partners-wrap::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); } body.page-home .partners-wrap::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); } body.page-home .marquee-track { display: flex; gap: 22px; width: max-content; animation: marquee 34s linear infinite; } body.page-home .partners-wrap:hover .marquee-track { animation-play-state: paused; } /* ===== LOGO CARD ===== */ body.page-home .marquee-track .p-logo { width: 240px; height: 78px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 12px 25px; background: var(--card-strong); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); opacity: .9; transition: opacity .3s ease, transform .3s ease; } body.page-home .marquee-track .p-logo:hover { opacity: 1; transform: translateY(-3px); } /* ===== REAL LOGO IMAGE ===== */ body.page-home .marquee-track .p-logo img { width: 100%; height: 48px; max-width: 180px; object-fit: contain; display: block; } /* ===== MARQUEE ===== */ @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ===== gallery mosaic + lightbox ===== */ body.page-home .gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:210px; gap:16px; } body.page-home .gallery-item{ border-radius:var(--radius); overflow:hidden; position:relative; display:flex; align-items:flex-end; padding:0 !important; margin:0; border:none !important; background:transparent; isolation:isolate; cursor:zoom-in; } body.page-home .gallery-item img{ position:absolute; inset:0; width:100% !important; height:100% !important; max-width:none !important; max-height:none !important; display:block; margin:0 !important; padding:0 !important; border:0 !important; object-fit:cover; object-position:center; z-index:0; transition:transform .5s ease; } body.page-home .gallery-item:hover img{ transform:scale(1.06); } body.page-home .gallery-item.g-tall{grid-row:span 2;} body.page-home .gallery-item.g-wide{grid-column:span 2;} body.page-home .gallery-item::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient( 0deg, rgba(42,32,19,.72) 0%, rgba(42,32,19,.30) 38%, rgba(42,32,19,0) 72% ); } body.page-home .gallery-item .g-info{ position:absolute; left:20px; right:20px; bottom:18px; z-index:2; color:#fff; pointer-events:none; } body.page-home .gallery-item .g-info b{ color:#fff; font-family:var(--font-head); font-size:17px; line-height:1.15; display:block; } body.page-home .gallery-item .g-info span{ display:block; margin-top:5px; font-size:12px; line-height:1.4; color:rgba(255,255,255,.86); } /* Fallback backgrounds */ body.page-home .gg1{background:linear-gradient(135deg,#E9D8AC,#C9A45C);} body.page-home .gg2{background:linear-gradient(135deg,#DCC38E,#B9924A);} body.page-home .gg3{background:linear-gradient(135deg,#F0E1BC,#D8B978);} body.page-home .gg4{background:linear-gradient(135deg,#E3CE9E,#C29E56);} body.page-home .gg5{background:linear-gradient(135deg,#EAD9AE,#CDA968);} body.page-home .gg6{background:linear-gradient(135deg,#DFCB9C,#BE9A52);} body.page-home .gg7{background:linear-gradient(135deg,#F2E6C6,#DCC087);} body.page-home .gg8{background:linear-gradient(135deg,#E1CC9B,#C1994F);} /* Tablet */ @media (max-width:900px){ body.page-home .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:210px; } body.page-home .gallery-item.g-wide{ grid-column:span 2; } } /* Phone — KEEP GRID, do not collapse to one column */ @media (max-width:800px){ body.page-home .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:190px; gap:12px; } body.page-home .gallery-item.g-wide{ grid-column:span 2; grid-row:span 1; } body.page-home .gallery-item.g-tall{ grid-column:span 1; grid-row:span 2; } body.page-home .gallery-item .g-info{ left:14px; right:14px; bottom:14px; } body.page-home .gallery-item .g-info b{ font-size:15px; } body.page-home .gallery-item .g-info span{ font-size:11px; } } @media (max-width:480px){ body.page-home .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:170px; gap:10px; } body.page-home .gallery-item.g-wide{ grid-column:span 2; } body.page-home .gallery-item.g-tall{ grid-column:span 1; grid-row:span 2; } body.page-home .gallery-item .g-info{ left:12px; right:12px; bottom:12px; } body.page-home .gallery-item .g-info b{ font-size:14px; } body.page-home .gallery-item .g-info span{ font-size:10.5px; } } /* ========================================================== GALLERY LIGHTBOX Clicking an image opens the original image in full size. Zoom In / Zoom Out / Reset / Close controls included. ========================================================== */ .gallery-lightbox{ position:fixed; inset:0; z-index:99999; display:none; align-items:center; justify-content:center; padding:70px 30px 40px; background:rgba(0,0,0,.94); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .gallery-lightbox.active{ display:flex; } .gallery-lightbox .lightbox-image-wrap{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; } .gallery-lightbox img{ max-width:95%; max-height:90%; width:auto; height:auto; object-fit:contain; display:block; user-select:none; -webkit-user-drag:none; transform:scale(1); transform-origin:center center; transition:transform .2s ease; cursor:grab; } .gallery-lightbox img:active{ cursor:grabbing; } .gallery-lightbox .lightbox-controls{ position:absolute; top:20px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:8px; padding:8px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20); border-radius:14px; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); } .gallery-lightbox .lightbox-controls button{ width:42px; height:42px; border:0; border-radius:10px; background:rgba(255,255,255,.12); color:#fff; font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s ease,transform .2s ease; } .gallery-lightbox .lightbox-controls button:hover{ background:rgba(255,255,255,.24); transform:translateY(-1px); } .gallery-lightbox .lightbox-controls .zoom-level{ min-width:58px; text-align:center; color:#fff; font-size:12px; font-weight:600; } .gallery-lightbox .lightbox-close{ position:absolute; top:20px; right:22px; width:46px; height:46px; border:1px solid rgba(255,255,255,.22); border-radius:50%; background:rgba(255,255,255,.10); color:#fff; font-size:25px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:3; } .gallery-lightbox .lightbox-close:hover{ background:rgba(255,255,255,.22); } .gallery-lightbox .lightbox-caption{ position:absolute; left:50%; bottom:18px; transform:translateX(-50%); color:rgba(255,255,255,.85); font-size:12px; text-align:center; white-space:nowrap; } body.lightbox-open{ overflow:hidden; } @media (max-width:600px){ .gallery-lightbox{ padding:70px 10px 35px; } .gallery-lightbox img{ max-width:100%; max-height:82%; } .gallery-lightbox .lightbox-controls{ top:15px; left:15px; transform:none; } .gallery-lightbox .lightbox-controls button{ width:38px; height:38px; } .gallery-lightbox .lightbox-close{ top:15px; right:15px; width:40px; height:40px; font-size:22px; } .gallery-lightbox .lightbox-caption{ bottom:10px; max-width:90%; overflow:hidden; text-overflow:ellipsis; } } /* ===== testimonial slider ===== */ body.page-home .testi-slider-wrap{position:relative;} body.page-home .testi-track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth; padding:4px 4px 14px;-ms-overflow-style:none;scrollbar-width:none;} body.page-home .testi-track::-webkit-scrollbar{display:none;} body.page-home .testi-track .testi-card{flex:0 0 calc((100% - 44px)/3);scroll-snap-align:start;} body.page-home .slider-btn{position:absolute;top:40%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%; background:var(--card-strong);border:1px solid var(--border);display:flex;align-items:center;justify-content:center; cursor:pointer;z-index:5;box-shadow:var(--shadow);color:var(--white);font-size:18px;transition:background .25s,color .25s;} body.page-home .slider-btn:hover{background:var(--lime);color:#0a0a0a;} body.page-home .slider-btn.prev{left:-23px;} body.page-home .slider-btn.next{right:-23px;} body.page-home .slider-dots{display:flex;justify-content:center;gap:8px;margin-top:8px;} body.page-home .slider-dots span{width:7px;height:7px;border-radius:50%;background:var(--border-strong);} @media (max-width:900px){ body.page-home .testi-track .testi-card{flex:0 0 calc(100% - 40px);} body.page-home .slider-btn{width:38px;height:38px;font-size:15px;} body.page-home .slider-btn.prev{left:0;} body.page-home .slider-btn.next{right:0;} body.page-home .slider-btn{top:auto;bottom:-52px;transform:none;} body.page-home .testi-slider-wrap{padding-bottom:60px;} } /* ===== working process (5-step timeline) ===== */ body.page-home .step-track{position:relative;margin-top:52px;} body.page-home .step-line{ position:absolute;top:52px;left:10%;right:10%;height:2px;z-index:0; background:linear-gradient(90deg,var(--lime),var(--border-strong)); } body.page-home .step-line.reveal-io{opacity:1;transform:scaleX(0);transform-origin:left; transition:transform 1.1s cubic-bezier(.4,.1,.2,1);} body.page-home .step-line.reveal-io.in-view{transform:scaleX(1);} body.page-home .step-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,1fr);gap:22px;} body.page-home .step-card{text-align:center;} body.page-home .step-media-wrap{position:relative;width:104px;height:104px;margin:0 auto 22px;} body.page-home .step-media{ position:absolute;inset:0;border-radius:50%;overflow:hidden; background:linear-gradient(135deg,#F0E1BC,#D8B978);border:4px solid var(--bg);box-shadow:var(--shadow); } body.page-home .step-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} body.page-home .step-num{ position:absolute;bottom:-4px;right:-4px;width:30px;height:30px;border-radius:50%;z-index:2; background:var(--lime);color:#160f07;font-family:var(--font-head);font-weight:700;font-size:13px; display:flex;align-items:center;justify-content:center;border:3px solid var(--bg); } body.page-home .step-card h3{font-size:16.5px;} body.page-home .step-card p{margin-top:9px;font-size:13px;line-height:1.65;color:var(--zinc-400);} @media (max-width:900px){ body.page-home .step-line{display:none;} body.page-home .step-grid{grid-template-columns:repeat(3,1fr);gap:34px 22px;} } @media (max-width:560px){ body.page-home .step-grid{grid-template-columns:1fr 1fr;gap:30px 16px;} } /* ===== solutions grid ===== */ body.page-home .solutions-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} body.page-home .solution-card{display:flex;gap:20px;align-items:flex-start;padding:28px;} body.page-home .solution-icon{width:60px;height:60px;flex-shrink:0;border-radius:14px;background:rgba(169,130,46,.10); display:flex;align-items:center;justify-content:center;padding:13px;color:var(--lime);} body.page-home .solution-icon svg{width:100%;height:100%;} body.page-home .solution-card h3{font-size:18px;color:var(--white);} body.page-home .solution-card p{margin-top:8px;font-size:13.5px;line-height:1.6;color:var(--zinc-400);} @media (max-width:900px){body.page-home .solutions-grid{grid-template-columns:1fr 1fr;}} @media (max-width:560px){ body.page-home .solutions-grid{grid-template-columns:1fr;} body.page-home .solution-card{flex-direction:column;} } .brand-mark { width: 36px; height: 36px; object-fit: cover; border-radius: 10px; display: block; } /* ========================================================= PHOTO WALL — NON-REPETITIVE ASYMMETRIC BENTO GRID ========================================================= */ /* ===================================================== PORTFOLIO PHOTO WALL ===================================================== */ .photo-wall{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:220px; gap:18px; width:100%; grid-auto-flow:dense; } .photo-wall .pw-item{ position:relative; min-height:220px; border-radius:var(--radius); overflow:hidden; cursor:zoom-in; background-size:cover; background-position:center; background-repeat:no-repeat; transition: transform .35s ease, box-shadow .35s ease; } /* Hover */ .photo-wall .pw-item:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); } /* Zoom image */ .photo-wall .pw-item::before{ content:""; position:absolute; inset:0; background:inherit; background-size:cover; background-position:center; transition:transform .5s ease; z-index:0; } .photo-wall .pw-item:hover::before{ transform:scale(1.07); } /* Dark bottom gradient */ .photo-wall .pw-item::after{ content:""; position:absolute; inset:0; background:linear-gradient( to top, rgba(0,0,0,.65), transparent 60% ); z-index:1; pointer-events:none; } /* Category text */ .photo-wall .pw-item span{ position:absolute; left:16px; bottom:14px; z-index:2; color:#fff; font-size:12px; font-weight:600; background:rgba(0,0,0,.35); padding:6px 11px; border-radius:50px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } /* Different sizes */ .photo-wall .pw-item:nth-child(1), .photo-wall .pw-item:nth-child(8), .photo-wall .pw-item:nth-child(15), .photo-wall .pw-item:nth-child(23){ grid-row:span 2; } .photo-wall .pw-item:nth-child(5), .photo-wall .pw-item:nth-child(10), .photo-wall .pw-item:nth-child(14), .photo-wall .pw-item:nth-child(19), .photo-wall .pw-item:nth-child(27), .photo-wall .pw-item:nth-child(34), .photo-wall .pw-item:nth-child(42), .photo-wall .pw-item:nth-child(50){ grid-column:span 2; } .photo-wall .pw-item:nth-child(12), .photo-wall .pw-item:nth-child(25), .photo-wall .pw-item:nth-child(38){ grid-column:span 2; grid-row:span 2; } /* ===================================================== LIGHTBOX ===================================================== */ .pw-lightbox{ position:fixed; inset:0; z-index:999999; display:none; align-items:center; justify-content:center; padding:30px; background:rgba(0,0,0,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } .pw-lightbox.show{ display:flex; } .pw-lightbox img{ display:block; max-width:95vw; max-height:90vh; width:auto; height:auto; object-fit:contain; border-radius:8px; box-shadow: 0 20px 80px rgba(0,0,0,.7); } .pw-lightbox-close{ position:fixed; top:20px; right:25px; width:46px; height:46px; border:none; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; font-size:30px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:1000000; transition:.25s ease; } .pw-lightbox-close:hover{ background:#fff; color:#000; } body.pw-lightbox-open{ overflow:hidden; } /* ===================================================== TABLET ===================================================== */ @media(max-width:900px){ .photo-wall{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:210px; gap:14px; } .photo-wall .pw-item{ min-height:210px; } } /* ===================================================== MOBILE ===================================================== */ @media(max-width:560px){ .photo-wall{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:180px; gap:10px; } .photo-wall .pw-item{ min-height:180px; } .photo-wall .pw-item:nth-child(n){ grid-column:auto; grid-row:auto; } .photo-wall .pw-item:nth-child(5), .photo-wall .pw-item:nth-child(10), .photo-wall .pw-item:nth-child(14), .photo-wall .pw-item:nth-child(19), .photo-wall .pw-item:nth-child(27){ grid-column:span 2; } .photo-wall .pw-item:nth-child(1), .photo-wall .pw-item:nth-child(8), .photo-wall .pw-item:nth-child(15){ grid-row:span 2; } .pw-lightbox{ padding:15px; } .pw-lightbox img{ max-width:96vw; max-height:85vh; } .pw-lightbox-close{ top:12px; right:12px; width:42px; height:42px; } }