:root{ --navy:#1B3A4A; --navy-dark:#12262F; --gold:#D9A94F; --gold-dim:#C99B3F; --cream:#F4F0E6; --white:#FFFFFF; --stone:#8B8B82; --ink-on-navy:#E8E4D9; } *{box-sizing:border-box; margin:0; padding:0;} html{scroll-behavior:smooth;} body{font-family:'Inter', sans-serif; background:var(--cream); color:var(--navy); line-height:1.6;} h1,h2,h3{font-family:'Fraunces', serif; font-weight:500; line-height:1.15;} a{color:inherit; text-decoration:none;} img{display:block; width:100%; height:100%; object-fit:cover;} .eyebrow{font-size:12px; letter-spacing:0.18em; text-transform:uppercase; font-weight:600; color:var(--gold);} .wrap{max-width:1200px; margin:0 auto; padding:0 40px;} /* ---- Top bar ---- */ .topbar{position:fixed; top:0; left:0; right:0; z-index:50; background:rgba(244,240,230,0.96); border-bottom:1px solid rgba(27,58,74,0.1);} .topbar-inner{max-width:1200px; margin:0 auto; padding:16px 40px; display:flex; align-items:center; justify-content:space-between;} .logo-mark{display:flex; align-items:center; gap:12px;} .logo-mark img{width:38px; height:38px; object-fit:contain; border-radius:8px;} .logo-text{display:flex; flex-direction:column; line-height:1.1;} .logo-text .name{font-family:'Fraunces', serif; font-size:19px; font-weight:600; letter-spacing:0.03em; color:var(--navy);} .logo-text .sub{font-size:9px; letter-spacing:0.16em; color:var(--stone); text-transform:uppercase;} nav{display:flex; gap:32px;} nav a{font-size:13px; font-weight:500; letter-spacing:0.02em; color:var(--navy); position:relative; padding-bottom:4px;} nav a::after{content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold); transition:width 0.25s ease;} nav a:hover::after{width:100%;} /* ---- Buttons ---- */ .btn{display:inline-block; padding:14px 30px; font-size:13px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; border-radius:2px; transition:all 0.25s ease; border:1px solid transparent;} .btn-gold{background:var(--gold); color:var(--navy-dark); cursor:pointer;} .btn-gold:hover{background:var(--gold-dim);} .btn-outline{border-color:rgba(232,228,217,0.5); color:var(--white);} .btn-outline:hover{border-color:var(--white); background:rgba(255,255,255,0.06);} .btn-row{display:flex; gap:16px; flex-wrap:wrap;} /* ---- Arch motif ---- */ .arch-motif{position:absolute; z-index:2; opacity:0.5;} .divider{display:flex; justify-content:center; margin:56px 0 0;} .divider svg{width:56px; height:auto; opacity:0.55;} /* ---- Project cards (home + portfolio "other projects") ---- */ .project-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;} .project-card{position:relative; display:block; overflow:hidden; border-radius:3px; aspect-ratio:3/4;} .project-card img{transition:transform 0.6s ease;} .project-card:hover img{transform:scale(1.06);} .project-card .shade{position:absolute; inset:0; background:linear-gradient(180deg, rgba(18,38,47,0) 40%, rgba(18,38,47,0.92) 100%);} .project-card .cap{position:absolute; left:0; right:0; bottom:0; padding:26px;} .project-card .cap .eyebrow{color:var(--gold); margin-bottom:6px;} .project-card .cap h3{color:var(--white); font-size:21px;} /* ---- Portfolio listing rows ---- */ .listing-row{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:70px 0;} .listing-row:nth-child(even){direction:rtl;} .listing-row:nth-child(even) > *{direction:ltr;} .listing-image{aspect-ratio:5/4; overflow:hidden; border-radius:3px;} .listing-text h2{font-size:clamp(26px,3.2vw,38px); margin:14px 0 16px;} .listing-text p{color:#4A5D66; margin-bottom:24px;} .listing-text a{font-size:13px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--navy); border-bottom:1px solid var(--gold); padding-bottom:3px;} /* ---- Footer ---- */ footer{background:var(--cream); padding:40px 0;} .footer-inner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;} .footer-inner .logo-mark img{width:28px; height:28px;} .footer-inner .logo-text .name{font-size:15px;} .footer-nav{display:flex; gap:26px; flex-wrap:wrap;} .footer-nav a{font-size:12px; color:var(--stone);} .copyright{font-size:12px; color:var(--stone);} /* ---- Project page: tagline, reference details, narrative ---- */ /* Project description: aligned with the hero text above it — same 1200px container and 40px gutters, so it starts on the same line as the project title and leaves an equal margin on the right. Left-aligned, not centred. */ .proj-tagline{padding:60px 0 10px; text-align:left;} .proj-tagline-inner{max-width:1200px; margin:0 auto;} .proj-tagline h2{font-size:clamp(24px,3vw,32px); margin-bottom:16px;} .proj-tagline p{color:#4A5D66; font-size:15.5px;} .proj-tagline p + p{margin-top:18px;} .ref-details{padding:50px 0;} .ref-details-inner{max-width:1200px; margin:0 auto;} .ref-details h2{font-size:19px; margin-bottom:22px; text-align:left;} .proj-hero{position:relative; height:78vh; min-height:480px; display:flex; align-items:flex-end; overflow:hidden;} .proj-hero img{position:absolute; inset:0; width:100%; height:100%;} .proj-hero-overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(18,38,47,0.25) 0%, rgba(18,38,47,0.5) 60%, rgba(18,38,47,0.92) 100%);} .proj-hero-content{position:relative; z-index:2; padding:0 40px 60px; max-width:1200px; margin:0 auto; width:100%;} .proj-hero-content h1{color:var(--white); font-size:clamp(30px,4.6vw,52px); margin-top:14px;} .proj-gallery{padding:40px 0 100px;} .gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;} .gallery a{display:block; aspect-ratio:1/1; overflow:hidden; border-radius:3px;} .gallery img{transition:transform 0.5s ease;} .gallery a:hover img{transform:scale(1.05);} .gallery .wide{grid-column:span 2; aspect-ratio:2/1;} .other-projects{background:var(--navy); color:var(--ink-on-navy); padding:90px 0;} .other-projects h2{color:var(--white); font-size:clamp(24px,3vw,32px); margin-bottom:40px;} .other-grid{display:flex; gap:28px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:12px; -webkit-overflow-scrolling:touch;} .other-grid .project-card{flex:0 0 420px; scroll-snap-align:start;} .other-grid::-webkit-scrollbar{height:6px;} .other-grid::-webkit-scrollbar-track{background:rgba(232,228,217,0.15); border-radius:3px;} .other-grid::-webkit-scrollbar-thumb{background:rgba(217,169,79,0.5); border-radius:3px;} /* ---- Systems / product catalog page ---- */ .sys-hero{padding:170px 0 60px; text-align:center;} .sys-hero h1{font-size:clamp(34px,5vw,54px); margin-bottom:16px;} .sys-hero p{color:#4A5D66; max-width:560px; margin:0 auto;} .sys-category{padding:60px 0;} .sys-category:not(:last-child){border-bottom:1px solid rgba(27,58,74,0.12);} .sys-cat-head{display:flex; align-items:center; gap:18px; margin-bottom:14px;} .sys-cat-head svg{width:40px; height:40px; flex-shrink:0;} .sys-cat-head h2{font-size:clamp(22px,2.6vw,30px);} /* Category description spans the same width as the category photo above it, so long descriptions take fewer lines and less scrolling. */ .sys-cat-intro{color:var(--stone); max-width:none; margin-bottom:36px; font-size:14.5px;} .sys-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px;} .partner-note{background:var(--navy); color:var(--ink-on-navy); padding:70px 0; text-align:center;} .partner-note p{max-width:600px; margin:0 auto; font-size:15px; color:#C9D2D4;} .partner-note .eyebrow{margin-bottom:14px; display:block;} /* ---- Individual product page ---- */ .prod-hero{padding:170px 0 50px;} .prod-hero .prod-back{font-size:12px; color:var(--stone); margin-bottom:20px; display:inline-block;} .prod-hero h1{font-size:clamp(32px,4.8vw,50px); margin:10px 0 18px;} .prod-hero p{color:#4A5D66; max-width:640px; font-size:16px;} .spec-section{padding:44px 0;} .spec-section:not(:last-child){border-bottom:1px solid rgba(27,58,74,0.12);} .spec-section h2{font-size:19px; margin-bottom:22px;} .spec-table{display:grid; grid-template-columns:1fr 1fr; gap:0 50px;} .spec-row{display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid rgba(27,58,74,0.1); font-size:14px;} .spec-row .k{color:var(--stone);} .spec-row .v{font-weight:500; text-align:right;} .used-section{background:var(--navy); color:var(--ink-on-navy); padding:70px 0;} .used-section h2{color:var(--white); margin-bottom:30px; font-size:clamp(22px,2.8vw,28px);} .used-section .project-card{max-width:420px;} .similar-section{padding:70px 0;} .similar-section h2{margin-bottom:30px; font-size:clamp(22px,2.8vw,28px);} .similar-section .sys-card a{color:inherit;} .sys-card-link{display:block;} /* ---- Product & category photos ---- */ .photo-caption{font-size:12px; color:var(--stone); margin-bottom:6px;} .cat-photo{width:100%; overflow:hidden; border-radius:4px; margin-bottom:22px;} .cat-photo img{width:100%; height:auto; display:block;} /* ---- Compact system cards (matches reference sizing) ---- */ .sys-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:18px;} .sys-card{background:var(--white); border:1px solid rgba(27,58,74,0.1); border-radius:4px; padding:14px 16px 18px;} .sys-card img{width:100%; height:160px; object-fit:cover; border-radius:3px; margin-bottom:12px; display:block;} .sys-card .partner{font-size:9px; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); margin-bottom:5px; display:block;} .sys-card .name{font-family:'Fraunces',serif; font-size:17px; margin-bottom:4px; line-height:1.3;} .sys-card .specs{font-size:11px; color:var(--stone); margin-bottom:8px; line-height:1.45;} .sys-card .desc{font-size:12.5px; color:#4A5D66; line-height:1.5;} /* ---- Product photo gallery (hero + extras + cross-section last) ---- */ .gallery a{position:relative;} .cs-badge{position:absolute; bottom:8px; left:8px; background:rgba(18,38,47,0.85); color:var(--ink-on-navy); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; padding:4px 9px; border-radius:2px;} /* ---- Product page gallery: one main photo + small thumbs ---- */ .prod-gallery{padding:34px 0 10px;} .prod-main{display:block; position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:4px; margin-bottom:14px;} .prod-main img{width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease;} .prod-main:hover img{transform:scale(1.02);} .prod-thumbs{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:12px;} .prod-thumbs a{display:block; position:relative; height:110px; overflow:hidden; border-radius:3px;} .prod-thumbs img{width:100%; height:100%; object-fit:cover; transition:transform 0.4s ease;} .prod-thumbs a:hover img{transform:scale(1.05);} .prod-thumbs a.cs-tile{background:#12262F; border:1px solid rgba(27,58,74,0.2);} .prod-thumbs a.cs-tile img{object-fit:cover;} /* ---- Lightbox ---- */ .lb-overlay{position:fixed; inset:0; background:rgba(18,38,47,0.94); display:flex; align-items:center; justify-content:center; z-index:999; opacity:0; transition:opacity 0.2s ease; padding:40px; cursor:zoom-out;} .lb-overlay.show{opacity:1;} .lb-overlay img{max-width:90vw; max-height:88vh; object-fit:contain; border-radius:2px; cursor:default;} .lb-close{position:absolute; top:22px; right:32px; color:var(--white); font-size:34px; cursor:pointer; line-height:1; font-family:'Inter',sans-serif;} .lb-arrow{position:absolute; top:50%; transform:translateY(-50%); color:var(--white); font-size:52px; line-height:1; cursor:pointer; padding:10px 18px; user-select:none; font-family:'Inter',sans-serif; opacity:0.8; transition:opacity 0.2s ease;} .lb-arrow:hover{opacity:1;} .lb-prev{left:10px;} .lb-next{right:10px;} .lb-counter{position:absolute; bottom:22px; left:50%; transform:translateX(-50%); color:var(--ink-on-navy); font-size:13px; letter-spacing:0.04em;} @media(max-width:860px){ nav{display:none;} .project-grid{grid-template-columns:1fr;} .listing-row, .listing-row:nth-child(even){grid-template-columns:1fr; direction:ltr;} .gallery{grid-template-columns:1fr 1fr;} .gallery .wide{grid-column:span 2;} .other-grid .project-card{flex:0 0 88%;} .sys-grid{grid-template-columns:repeat(auto-fill, minmax(150px,1fr));} .spec-table{grid-template-columns:1fr;} } /* ---- Mobile navigation toggle ---- */ .nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:8px; flex-direction:column; gap:5px;} .nav-toggle span{display:block; width:22px; height:2px; background:var(--navy); transition:transform 0.2s ease;} @media(max-width:860px){ .nav-toggle{display:flex;} .topbar nav{display:none; position:absolute; top:100%; left:0; right:0; background:var(--cream); border-bottom:1px solid rgba(27,58,74,0.12); flex-direction:column; gap:0; padding:8px 0;} .topbar nav.open{display:flex;} .topbar nav a{padding:13px 40px; border-bottom:none;} .topbar nav a::after{display:none;} } /* ---- Lightbox scroll lock ---- */ body.lb-open{overflow:hidden;} /* ---- About page ---- */ .about-story{padding:60px 0 30px;} .about-story-inner{max-width:700px; margin:0 auto;} .about-story h2{font-size:clamp(24px,3vw,32px); margin-bottom:18px;} .about-story p{color:#4A5D66; font-size:15.5px; margin-bottom:16px;} .process-steps{max-width:700px; margin:22px auto 0;} .process-step{display:flex; gap:16px; padding:13px 0; border-bottom:1px solid rgba(27,58,74,0.1);} .process-step:last-child{border-bottom:none;} .process-step .num{font-family:'Fraunces',serif; font-size:26px; color:var(--gold); min-width:38px; line-height:1;} .process-step h3{font-size:16px; margin-bottom:5px; font-family:'Inter',sans-serif; font-weight:600;} .process-step p{color:#4A5D66; font-size:14px;} .equip-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:20px; margin-top:36px;} .equip-card{background:var(--white); border:1px solid rgba(27,58,74,0.1); border-radius:4px; overflow:hidden;} .equip-card .equip-photo{display:block; height:170px; background:linear-gradient(135deg, #E8E2D4 0%, #DDD5C3 100%); display:flex; align-items:center; justify-content:center; color:var(--stone); font-size:12px; letter-spacing:0.06em; text-transform:uppercase;} .equip-card .equip-photo img{width:100%; height:100%; object-fit:cover;} .equip-card .equip-body{padding:16px 18px 18px;} .equip-card h3{font-family:'Fraunces',serif; font-size:17px; font-weight:500; margin-bottom:5px;} .equip-card p{font-size:13px; color:#4A5D66;} /* ---- Product intro: photo left, description right ---- */ .prod-intro{display:grid; grid-template-columns:1.15fr 0.85fr; gap:44px; align-items:start; margin-top:30px;} .prod-intro-media .prod-main{aspect-ratio:4/3; margin-bottom:12px;} .prod-intro-text h2{font-size:15px; letter-spacing:0.06em; text-transform:uppercase; font-family:'Inter',sans-serif; font-weight:600; margin-bottom:14px; color:var(--navy);} .prod-intro-text p{color:#4A5D66; font-size:15.5px; margin-bottom:22px;} .prod-intro-text .fact{display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid rgba(27,58,74,0.1); font-size:13.5px;} .prod-intro-text .fact .k{color:var(--stone);} .prod-intro-text .fact .v{font-weight:500; text-align:right;} .prod-intro-text .btn{margin-top:26px;} @media(max-width:860px){ .prod-intro{grid-template-columns:1fr;} .prod-intro-media{order:1;} .prod-intro-text{order:2;} } /* ---- About: showroom & factory gallery placeholders ---- */ .about-gallery{display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:14px; margin-top:20px;} .about-gallery .ph{height:150px; border-radius:3px; background:linear-gradient(135deg, #E8E2D4 0%, #DDD5C3 100%); display:flex; align-items:center; justify-content:center; color:var(--stone); font-size:11px; letter-spacing:0.08em; text-transform:uppercase;} .about-gallery a{display:block; height:150px; border-radius:3px; overflow:hidden;} .about-gallery img{width:100%; height:100%; object-fit:cover;} /* ---- Editorial flow rows (Reynaers-style alternating media/text) ---- */ .flow{max-width:1000px; margin:0 auto;} .flow-row{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:46px 0;} .flow-row:nth-child(even){direction:rtl;} .flow-row:nth-child(even) > *{direction:ltr;} .flow-media video, .flow-media img{width:100%; border-radius:4px; display:block;} .flow-media a{display:block; border-radius:4px; overflow:hidden;} .flow-text .step-eyebrow{font-size:11px; letter-spacing:0.16em; text-transform:uppercase; font-weight:600; color:var(--gold); margin-bottom:10px; display:block;} .flow-text h3{font-family:'Fraunces',serif; font-weight:500; font-size:clamp(21px,2.6vw,27px); margin-bottom:12px;} .flow-text p{color:#4A5D66; font-size:14.5px;} @media(max-width:860px){ .flow-row, .flow-row:nth-child(even){grid-template-columns:1fr; direction:ltr; gap:20px; padding:30px 0;} .flow-media{order:1;} .flow-text{order:2;} } /* ---- Download buttons ---- */ .downloads{display:flex; flex-direction:column; gap:10px; margin:22px 0 4px;} .dl-btn{display:flex; align-items:center; gap:10px; padding:12px 16px; border:1px solid rgba(27,58,74,0.25); border-radius:3px; font-size:13px; font-weight:500; color:var(--navy); transition:all 0.2s ease; background:var(--white);} .dl-btn svg{width:16px; height:16px; flex-shrink:0; color:var(--gold);} .dl-btn:hover{border-color:var(--gold); background:rgba(217,169,79,0.06);} /* ---- Partners section ---- */ .partners{padding:90px 0; background:#F7F2E8;} .partners h2{font-size:clamp(24px,3vw,32px); text-align:center; margin-bottom:14px;} .partners .partners-sub{color:#4A5D66; text-align:center; max-width:520px; margin:0 auto 44px; font-size:15px;} .partners-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:28px; max-width:960px; margin:0 auto;} .partners-grid .p-tile{display:flex; align-items:center; justify-content:center;} .partners-grid img{max-width:100%; height:auto; display:block; filter:grayscale(30%); opacity:0.9; transition:all 0.25s ease;} .partners-grid .p-tile:hover img{filter:grayscale(0%); opacity:1;} @media(max-width:860px){ .partners-grid{grid-template-columns:repeat(2,1fr);} } /* ---- Blog ---- */ .blog-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(320px,1fr)); gap:28px; padding-bottom:90px;} .blog-card{background:var(--white); border:1px solid rgba(27,58,74,0.1); border-radius:4px; overflow:hidden; display:block;} .blog-card img{width:100%; height:220px; object-fit:cover;} .blog-card .blog-body{padding:22px 24px 26px;} .blog-card .blog-date{font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold); margin-bottom:8px; display:block;} .blog-card h3{font-family:'Fraunces',serif; font-size:20px; font-weight:500; margin-bottom:10px; line-height:1.3;} .blog-card p{font-size:14px; color:#4A5D66;} .article{max-width:720px; margin:0 auto; padding:40px 0 90px;} .article .article-hero{width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:4px; margin:26px 0 34px;} .article h2{font-size:clamp(20px,2.6vw,26px); margin:36px 0 14px;} .article p{color:#3d4f58; font-size:16px; margin-bottom:18px; line-height:1.75;} .article ul{color:#3d4f58; font-size:16px; margin:0 0 18px 22px; line-height:1.75;} .article li{margin-bottom:8px;} .article .article-note{background:var(--white); border-left:3px solid var(--gold); padding:16px 20px; font-size:14.5px; color:#4A5D66; border-radius:0 4px 4px 0; margin:26px 0;} /* ---- FAQ ---- */ .faq{padding:90px 0;} .faq h2{font-size:clamp(24px,3vw,32px); text-align:center; margin-bottom:40px;} .faq-list{max-width:760px; margin:0 auto;} .faq-item{border-bottom:1px solid rgba(27,58,74,0.15);} .faq-item summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 0; font-family:'Fraunces',serif; font-size:18px; font-weight:500; color:var(--navy);} .faq-item summary::-webkit-details-marker{display:none;} .faq-item summary::after{content:"+"; font-family:'Inter',sans-serif; font-size:22px; color:var(--gold); transition:transform 0.2s ease; flex-shrink:0;} .faq-item[open] summary::after{transform:rotate(45deg);} .faq-item .faq-a{padding:0 0 24px; color:#4A5D66; font-size:15px; max-width:640px;} /* ---- Language switcher ---- */ .lang-switch{font-size:13px; font-weight:500; letter-spacing:0.02em; color:var(--stone);} .lang-switch:hover{color:var(--navy);} /* ---- Phone tier (<=560px) ---- */ @media(max-width:560px){ /* horizontal breathing room: 40px side padding is too costly on a 375px screen */ .wrap{padding:0 20px;} .topbar-inner{padding:14px 20px;} .proj-hero-content{padding:0 20px 40px;} /* section rhythm - large desktop padding wastes most of a phone screen */ .sys-hero{padding:120px 0 40px;} .prod-hero{padding:120px 0 36px;} .sys-category{padding:40px 0;} .spec-section{padding:32px 0;} .partner-note{padding:48px 0;} .other-projects{padding:56px 0;} .proj-tagline{padding:40px 0 6px;} .ref-details{padding:36px 0;} .proj-gallery{padding:30px 0 60px;} .faq{padding:60px 0;} footer{padding:32px 0;} .footer-inner{justify-content:center; text-align:center;} .footer-nav{gap:14px 18px; justify-content:center;} .divider{margin:36px 0 0;} /* portfolio + blog rows */ .listing-row, .listing-row:nth-child(even){padding:34px 0; gap:20px;} .flow-row, .flow-row:nth-child(even){padding:24px 0; gap:16px;} /* galleries: one clear column beats two cramped ones at this width */ .gallery{grid-template-columns:1fr;} .gallery .wide{grid-column:span 1;} .prod-thumbs{grid-template-columns:repeat(2,1fr); gap:8px;} .prod-thumbs a{height:92px;} /* cards */ .project-card .cap{padding:18px;} .project-card .cap h3{font-size:18px;} .other-grid .project-card{flex:0 0 82%;} .sys-grid{grid-template-columns:1fr 1fr; gap:12px;} .sys-card{padding:12px 12px 15px;} .sys-card img{height:120px;} /* type + controls */ .faq-item summary{font-size:16px; gap:12px; padding:18px 0;} .spec-row{font-size:13px; gap:10px;} .btn{padding:13px 22px; font-size:12px;} .btn-row{gap:10px;} .dl-btn{font-size:12px;} /* never let a wide child force sideways scrolling */ img, video, table{max-width:100%;} } /* ---- About page: match the three vertical gaps (66px each) ---- topbar is fixed (70px desktop / 66px phone), so the hero's top padding must clear it before the 66px gap begins. */ .sys-hero.about-hero{padding:136px 0 20px;} .about-story.about-story-first{padding-top:30px;} @media(max-width:560px){ .sys-hero.about-hero{padding:132px 0 20px;} .about-story.about-story-first{padding-top:30px;} } /* Netlify Forms honeypot - must stay in the DOM but never be seen by humans */ .hp-field{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;} /* ---- Cookie consent bar (analytics.js) ---- */ .cookie-bar{position:fixed; left:0; right:0; bottom:0; z-index:9999; background:var(--navy-dark); color:var(--ink-on-navy); padding:18px 40px; display:flex; align-items:center; justify-content:space-between; gap:26px; box-shadow:0 -2px 18px rgba(0,0,0,0.18);} .cookie-bar p{font-size:13.5px; line-height:1.6; margin:0; max-width:720px; color:#C6CFD2;} .cookie-bar-actions{display:flex; gap:10px; flex-shrink:0;} .cookie-bar button{font-family:inherit; font-size:12px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; padding:11px 22px; border-radius:2px; cursor:pointer; border:1px solid transparent; transition:all 0.2s ease;} .cookie-accept{background:var(--gold); color:var(--navy-dark);} .cookie-accept:hover{background:var(--gold-dim);} .cookie-decline{background:none; border-color:rgba(232,228,217,0.4); color:var(--ink-on-navy);} .cookie-decline:hover{border-color:var(--white); background:rgba(255,255,255,0.07);} @media(max-width:700px){ .cookie-bar{flex-direction:column; align-items:stretch; padding:16px 20px; gap:14px;} .cookie-bar p{font-size:13px;} .cookie-bar-actions{justify-content:stretch;} .cookie-bar button{flex:1;} } /* ---- Menu geometry ---- GEORGIAN: fixed-width slots, label centred in each. Unchanged. ENGLISH : same 586px total width, but the spare space is divided equally between the items so the gaps between words are identical. Both menus therefore occupy the same width and the bar does not move when the language is switched. Hover underlines the text, not the slot. */ nav{display:flex; align-items:center;} html[lang="ka"] nav{gap:18px;} /* English: same 586px total width, spare space shared equally between items */ html[lang="en"] nav{width:586px; gap:0; justify-content:space-between;} nav a, .lang-switch{white-space:nowrap; text-align:center; display:inline-block;} html[lang="ka"] nav a:nth-of-type(1){min-width:62px;} /* Home / მთავარი */ html[lang="ka"] nav a:nth-of-type(2){min-width:86px;} /* Portfolio / პორტფოლიო */ html[lang="ka"] nav a:nth-of-type(3){min-width:78px;} /* Systems / სისტემები */ html[lang="ka"] nav a:nth-of-type(4){min-width:104px;} /* About / ჩვენ შესახებ */ html[lang="ka"] nav a:nth-of-type(5){min-width:46px;} /* Blog / ბლოგი */ html[lang="ka"] nav a:nth-of-type(6){min-width:70px;} /* Contact / კონტაქტი */ html[lang="ka"] nav a.lang-switch{min-width:34px;} /* EN / ქარ */ /* Noto Sans Georgian runs larger than Inter at the same size - match optically */ html[lang="ka"] nav a, html[lang="ka"] .lang-switch{font-size:12.5px; letter-spacing:0.01em;} /* underline hugs the text, not the slot */ nav a::after{display:none;} nav a:hover{text-decoration:underline; text-decoration-color:var(--gold); text-decoration-thickness:1px; text-underline-offset:5px;} @media(max-width:860px){ nav a, .lang-switch{text-align:left;} html[lang="en"] nav, html[lang="ka"] nav{width:auto; gap:0; justify-content:flex-start;} html[lang="ka"] nav a:nth-of-type(1),html[lang="ka"] nav a:nth-of-type(2), html[lang="ka"] nav a:nth-of-type(3),html[lang="ka"] nav a:nth-of-type(4), html[lang="ka"] nav a:nth-of-type(5),html[lang="ka"] nav a:nth-of-type(6), html[lang="ka"] nav a.lang-switch{min-width:0;} } /* ---- Overflow safety ---- Long unbroken strings (Georgian spec lines, URLs, system codes) must wrap rather than force a container wider than the viewport. */ .sys-card .specs, .sys-card .desc, .spec-row .v, .spec-row .k{overflow-wrap:anywhere;} h1, h2, h3, h4, p, li, td, .label{overflow-wrap:break-word;} /* Smallest phones (iPhone SE and similar): one column, or the two-column system grid cannot hold the longer Georgian labels. */ @media(max-width:360px){ .sys-grid{grid-template-columns:1fr;} .prod-thumbs{grid-template-columns:repeat(2,1fr);} .footer-nav{gap:12px 16px;} } /* ---- Hero on phones ---- Higher specificity than the page's inline