/* MOYASS US — Deep-Navy Tech + motion (task-2) */ :root{ --us-navy:#0A2540; --us-blue:#1565C0; --us-accent:#00B8D4; --us-mist:#F4F7FB; --us-ink:#0A2540; --us-muted:#5A6B7D; --us-line:#E2E8F0; --white:#FFFFFF; --radius:5px; --shadow:0 12px 40px rgba(10,37,64,.08); --shadow-lift:0 20px 50px rgba(10,37,64,.14); --max:1120px; --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --ease-out:cubic-bezier(.22,1,.36,1); --dur:380ms; --header-h:72px; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family:var(--font); color:var(--us-ink); background:var(--white); line-height:1.8; -webkit-font-smoothing:antialiased; font-size:16px; } img{max-width:100%;height:auto;display:block} a{color:var(--us-blue);text-decoration:none} a:hover{color:var(--us-accent)} h1,h2,h3,h4{line-height:1.2;letter-spacing:-.01em;margin:0 0 .6em} h1{font-size:clamp(2rem,4vw,2.85rem);font-weight:800} h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:800} h3{font-size:1.2rem;font-weight:700} p{margin:0 0 1em} .container{width:min(100% - 2.5rem,var(--max));margin-inline:auto} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0} .skip-link{position:absolute;left:-9999px;top:0;background:var(--us-accent);color:var(--us-navy);padding:.6rem 1rem;z-index:9999;font-weight:700} .skip-link:focus{left:1rem;top:1rem} /* Scroll progress */ .scroll-progress{ position:fixed;top:0;left:0;height:2px;width:0;z-index:300; background:linear-gradient(90deg,var(--us-accent),var(--us-blue)); transform-origin:left center;pointer-events:none; opacity:0;transition:opacity .25s; } .scroll-progress.is-on{opacity:1} /* Back to top */ .back-top{ position:fixed;right:1.1rem;bottom:4.5rem;z-index:160; width:44px;height:44px;border-radius:50%;border:0;cursor:pointer; background:var(--us-navy);color:#fff;font-size:1.1rem;line-height:1; box-shadow:0 8px 24px rgba(10,37,64,.25); opacity:0;visibility:hidden;transform:translateY(8px); transition:opacity .3s,visibility .3s,transform .3s var(--ease-out),background .2s; } .back-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)} .back-top:hover,.back-top:focus-visible{background:var(--us-blue);outline:2px solid var(--us-accent);outline-offset:2px} /* Buttons */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.4rem; padding:.9rem 1.6rem;font-weight:800;font-size:.9rem;border-radius:var(--radius); border:none;cursor:pointer;text-decoration:none; transition:transform var(--dur) var(--ease-out),filter .2s,box-shadow .25s; position:relative;overflow:hidden; } .btn-solid{ background:var(--us-accent);color:var(--us-navy); box-shadow:0 4px 16px rgba(0,184,212,.25); } .btn-solid::after{ content:"";position:absolute;inset:0;left:-100%; background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%); transition:left .55s var(--ease-out); } .btn-solid:hover,.btn-solid:focus-visible{ filter:brightness(1.06);color:var(--us-navy); transform:translateY(-1px) scale(1.02); box-shadow:0 8px 24px rgba(0,184,212,.35); } .btn-solid:hover::after,.btn-solid:focus-visible::after{left:100%} .btn-ghost{background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,.45)} .btn-ghost:hover,.btn-ghost:focus-visible{border-color:#fff;color:#fff;transform:translateY(-1px)} .btn-text{ color:inherit;font-weight:600;font-size:.95rem;opacity:.9; background:none;border:0;padding:0;position:relative; } .btn-text::after{ content:"";position:absolute;left:0;bottom:-2px;height:1.5px;width:100%; background:var(--us-accent);transform:scaleX(0);transform-origin:left; transition:transform .35s var(--ease-out); } .btn-text:hover,.btn-text:focus-visible{opacity:1;color:var(--us-accent)} .btn-text:hover::after,.btn-text:focus-visible::after{transform:scaleX(1)} /* Expo */ .expo-banner{ display:flex;align-items:center;justify-content:center;gap:.75rem; background:rgba(0,184,212,.12);border-bottom:1px solid rgba(0,184,212,.25); padding:.55rem 1rem;font-size:.8rem;letter-spacing:.04em;color:#bfeef6; text-align:center;background-color:var(--us-navy); } .expo-banner b,.expo-banner strong{color:var(--us-accent);font-weight:700} .expo-banner a{color:#bfeef6} .expo-banner a:hover{color:#fff} /* Header / Nav */ .site-header{ background:var(--us-navy);color:#fff;position:sticky;top:0;z-index:100; border-bottom:1px solid rgba(255,255,255,.1); transition:box-shadow .3s,background .3s; } .site-header.is-scrolled{ box-shadow:0 8px 28px rgba(0,0,0,.28); background:rgba(10,37,64,.96); backdrop-filter:saturate(1.2) blur(10px); -webkit-backdrop-filter:saturate(1.2) blur(10px); } .site-header .nav-inner{ display:flex;align-items:center;gap:1.5rem;padding:1rem 0;min-height:var(--header-h); transition:padding .3s var(--ease-out),min-height .3s var(--ease-out); } .site-header.is-scrolled .nav-inner{padding:.55rem 0;min-height:56px} .logo{ font-weight:800;font-size:1.25rem;letter-spacing:.02em;color:#fff;text-decoration:none;flex-shrink:0; display:inline-flex;align-items:center;margin-right:2.25rem; transition:font-size .3s; } .logo span{color:var(--us-accent)} .logo-img{ height:44px;width:auto;display:block; transition:height .3s var(--ease-out); } .site-header.is-scrolled .logo{font-size:1.1rem} .site-header.is-scrolled .logo-img{height:36px} @media (max-width:520px){.logo-img{height:38px}} .nav-list{ display:flex;align-items:center;gap:1.5rem;list-style:none;margin:0;padding:0; } .nav-list a,.nav-link{ color:rgba(255,255,255,.78);font-size:.92rem;font-weight:500;text-decoration:none; position:relative;padding:.2rem 0;transition:color .2s; } .nav-list a::after,.nav-link::after{ content:"";position:absolute;left:0;bottom:-4px;height:2px;width:100%; background:var(--us-accent);transform:scaleX(0);transform-origin:left; transition:transform .3s var(--ease-out); } .nav-list a:hover,.nav-list a:focus-visible, .nav-list .current-menu-item > a,.nav-link:hover,.nav-link[aria-current="page"]{color:#fff} .nav-list a:hover::after,.nav-list a:focus-visible::after, .nav-list .current-menu-item > a::after,.nav-link:hover::after,.nav-link[aria-current="page"]::after{transform:scaleX(1)} .nav-actions{margin-left:auto;display:flex;align-items:center;gap:1rem} .nav-tw{color:rgba(255,255,255,.65);font-size:.78rem;letter-spacing:.04em;white-space:nowrap;transition:color .2s} .nav-tw:hover{color:#fff} .nav-cta{ background:var(--us-accent);color:var(--us-navy)!important;padding:.55rem 1.1rem; font-weight:700;font-size:.82rem;border-radius:4px; transition:filter .2s,transform .25s var(--ease-out),box-shadow .25s; } .nav-cta:hover,.nav-cta:focus-visible{ filter:brightness(1.06);color:var(--us-navy)!important; transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,184,212,.3); } .nav-toggle{ display:none;background:transparent;border:1px solid rgba(255,255,255,.25);color:#fff; width:42px;height:42px;border-radius:4px;cursor:pointer;padding:0; } .nav-toggle span{display:block;width:18px;height:2px;background:#fff;margin:4px auto} .nav-panel{display:flex;align-items:center;flex:1;gap:1.5rem} @media (max-width:900px){ .nav-toggle{display:block;margin-left:auto} .nav-panel{ display:none;position:absolute;left:0;right:0;top:100%; background:var(--us-navy);flex-direction:column;align-items:stretch; padding:1rem 1.25rem 1.5rem;border-bottom:1px solid rgba(255,255,255,.1); box-shadow:0 16px 32px rgba(0,0,0,.25); } .nav-panel.is-open{display:flex} .nav-list{flex-direction:column;align-items:flex-start;gap:.25rem} .nav-list a::after{display:none} .nav-actions{margin-left:0;flex-direction:column;align-items:flex-start;gap:.75rem;padding-top:.75rem} } /* Hero (front) */ .hero-us{ background:var(--us-navy);color:#fff;position:relative;overflow:hidden; } .hero-us::before{ content:"";position:absolute;inset:-20%;pointer-events:none; background: radial-gradient(circle at 78% 18%,rgba(0,184,212,.22),transparent 42%), radial-gradient(circle at 18% 82%,rgba(21,101,192,.34),transparent 48%), radial-gradient(circle at 55% 50%,rgba(0,184,212,.06),transparent 40%); animation:heroGlow 22s ease-in-out infinite alternate; will-change:transform; } .hero-us::after{ content:"";position:absolute;inset:0;pointer-events:none;opacity:.18; background-image: linear-gradient(rgba(0,184,212,.07) 1px,transparent 1px), linear-gradient(90deg,rgba(0,184,212,.07) 1px,transparent 1px); background-size:48px 48px; mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 20%,transparent 75%); -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 20%,transparent 75%); animation:heroGrid 28s linear infinite; } @keyframes heroGlow{ 0%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(-2%,1.5%,0) scale(1.05)} 100%{transform:translate3d(2%,-1%,0) scale(1.03)} } @keyframes heroGrid{ 0%{transform:translate3d(0,0,0)} 100%{transform:translate3d(48px,24px,0)} } /* Floating shield emblem — visual anchor for the hero's right side. */ .hero-emblem{ position:absolute;top:50%;right:7%;width:min(26vw,330px); transform:translateY(-50%);z-index:1;pointer-events:none; filter:drop-shadow(0 20px 50px rgba(0,184,212,.22)); animation:emblemFloat 9s ease-in-out infinite; } .hero-emblem svg{width:100%;height:auto;display:block} .hero-emblem .he-shield{opacity:.85} .hero-emblem .he-shield2{opacity:.6} .hero-emblem .he-dot{animation:emblemPulse 2.6s ease-in-out infinite} .hero-emblem .he-dot2{animation:emblemPulse 2.6s ease-in-out .5s infinite} .hero-emblem .he-dot3{animation:emblemPulse 2.6s ease-in-out 1s infinite} .js-motion .hero-emblem .he-check{ stroke-dasharray:120;stroke-dashoffset:120; animation:emblemDraw 1.2s var(--ease-out) .6s forwards; } @keyframes emblemFloat{0%,100%{transform:translateY(-50%)}50%{transform:translateY(calc(-50% - 14px))}} @keyframes emblemPulse{0%,100%{opacity:.4}50%{opacity:1}} @keyframes emblemDraw{to{stroke-dashoffset:0}} @media (max-width:1024px){.hero-emblem{width:260px;right:2%;opacity:.55}} @media (max-width:860px){.hero-emblem{display:none}} .hero-us .inner{position:relative;padding:4.25rem 0 2.5rem;z-index:1} /* Constrain hero text to the left; the emblem occupies the right. */ @media (min-width:861px){ .hero-us .inner > *:not(.stats){max-width:600px} .hero-us h1{max-width:15ch} } .eyebrow{ display:inline-block;font-size:.7rem;letter-spacing:.24em;color:var(--us-accent); font-weight:700;text-transform:uppercase;margin-bottom:1.25rem; border:1px solid rgba(0,184,212,.4);padding:.4rem .9rem;border-radius:30px; } .hero-us h1{max-width:18ch;margin-bottom:1.25rem} .hero-us h1 em{font-style:normal;color:var(--us-accent)} .hero-us .lead{font-size:1.05rem;line-height:1.8;color:rgba(255,255,255,.74);max-width:36rem;margin-bottom:0} .hero-actions{margin-top:2rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center} .stats{ display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem; padding:2rem 0 3.5rem;max-width:720px;position:relative;z-index:1; } .stat .n{font-size:2.1rem;font-weight:800;color:#fff;letter-spacing:-.01em;line-height:1.1;font-variant-numeric:tabular-nums} .stat .n i,.stat .n em{font-style:normal;color:var(--us-accent)} .stat .l{font-size:.75rem;color:rgba(255,255,255,.6);letter-spacing:.04em;margin-top:.3rem} @media (max-width:640px){ .stats{grid-template-columns:1fr;gap:1.25rem} .hero-us::after{opacity:.1} } /* Hero load-in (only when JS enables motion) */ .js-motion .hero-animate{ opacity:0;transform:translate3d(0,18px,0); transition:opacity .55s var(--ease-out),transform .55s var(--ease-out); } .js-motion .hero-us.is-ready .hero-animate{opacity:1;transform:translate3d(0,0,0)} .js-motion .hero-us.is-ready .hero-animate:nth-child(1){transition-delay:.05s} .js-motion .hero-us.is-ready .hero-animate:nth-child(2){transition-delay:.14s} .js-motion .hero-us.is-ready .hero-animate:nth-child(3){transition-delay:.24s} .js-motion .hero-us.is-ready .hero-animate:nth-child(4){transition-delay:.34s} .js-motion .hero-us.is-ready .stats{transition-delay:.45s} /* Page hero (inner) */ .page-hero{ background:var(--us-navy);color:#fff;padding:3.5rem 0 2.75rem;position:relative;overflow:hidden; } .page-hero::before{ content:"";position:absolute;inset:-10%;pointer-events:none; background: radial-gradient(circle at 90% 20%,rgba(0,184,212,.18),transparent 42%), radial-gradient(circle at 10% 90%,rgba(21,101,192,.2),transparent 45%); animation:heroGlow 26s ease-in-out infinite alternate; } /* Right-side decorative tech motif to balance the hero's empty right half. */ .page-hero::after{ content:"";position:absolute;top:50%;right:-4%;width:min(38%,420px);aspect-ratio:1; transform:translateY(-50%);pointer-events:none;z-index:0;opacity:.9; background: repeating-linear-gradient(0deg,rgba(0,184,212,.14) 0 1px,transparent 1px 30px), repeating-linear-gradient(90deg,rgba(0,184,212,.14) 0 1px,transparent 1px 30px); -webkit-mask-image:radial-gradient(circle at 60% 40%,#000,transparent 70%); mask-image:radial-gradient(circle at 60% 40%,#000,transparent 70%); } .page-hero .inner{position:relative;z-index:1} .page-hero .lead{color:rgba(255,255,255,.72);max-width:40rem} @media (max-width:720px){.page-hero::after{display:none}} .breadcrumb{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:0 0 1rem;font-size:.8rem;color:rgba(255,255,255,.55)} .breadcrumb a{color:rgba(255,255,255,.7);transition:color .2s} .breadcrumb a:hover{color:#fff} .breadcrumb li:not(:last-child)::after{content:"/";margin-left:.5rem;opacity:.5} /* Sections */ .section{padding:5rem 0} .section-mist{background:var(--us-mist)} .section-navy{background:var(--us-navy);color:#fff} .section-feature{ background:linear-gradient(135deg,var(--us-navy) 0%,#0d3a66 55%,#0a2f52 100%); color:#fff;position:relative;overflow:hidden; } .section-feature::before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(circle at 85% 30%,rgba(0,184,212,.16),transparent 45%); } .section-feature .container{position:relative;z-index:1} .section-feature .section-head p, .section-feature .card p{color:rgba(255,255,255,.72)} .section-head{max-width:40rem;margin-bottom:2.75rem} .section-head p{color:var(--us-muted)} .section-navy .section-head p{color:rgba(255,255,255,.7)} .section-label{ font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700; color:var(--us-accent);margin-bottom:.75rem; } /* Cards */ /* Content-aware grids: cards keep a comfortable width on ultra-wide screens instead of being stretched to a third of the viewport. */ .grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.75rem} .grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:1.75rem} /* Cap at 3 columns so wide screens don't create a 4th cramped column. */ @media (min-width:1100px){.grid-3{grid-template-columns:repeat(3,1fr)}} @media (max-width:640px){.grid-3,.grid-2{grid-template-columns:1fr}} .card{ background:#fff;border:1px solid var(--us-line);border-radius:10px;overflow:hidden; transition:box-shadow .35s var(--ease-out),transform .35s var(--ease-out),border-color .3s; height:100%;display:flex;flex-direction:column;position:relative; } .card::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:3px; background:linear-gradient(180deg,var(--us-accent),var(--us-blue)); transform:scaleY(0);transform-origin:top;transition:transform .35s var(--ease-out); z-index:2; } .card:hover,.card:focus-within{ box-shadow:var(--shadow-lift);transform:translateY(-6px); border-color:rgba(0,184,212,.35); } .card:hover::before,.card:focus-within::before{transform:scaleY(1)} .card-media{ aspect-ratio:16/10;background:var(--us-mist);overflow:hidden;position:relative; border-bottom:1px solid var(--us-line); } .card-media::after{ content:"";position:absolute;inset:0;pointer-events:none; box-shadow:inset 0 0 0 1px rgba(10,37,64,.04); border-radius:0; } .card-media img{ width:100%;height:100%;object-fit:cover; transition:transform .55s var(--ease-out),opacity .4s,filter .4s; } .card:hover .card-media img,.card:focus-within .card-media img{transform:scale(1.06)} /* Abstract navy/cyan cover — placeholder until a real photo is set as the Featured Image. Fully on-brand, no Asian/Chinese text. */ .card-visual{ display:flex;align-items:center;justify-content:center;position:relative; background: radial-gradient(120% 120% at 80% 12%,rgba(0,184,212,.28),transparent 55%), radial-gradient(120% 120% at 10% 100%,rgba(21,101,192,.45),transparent 60%), linear-gradient(135deg,#0A2540 0%,#0d2f52 60%,#123a63 100%); color:var(--us-accent);overflow:hidden;text-decoration:none; } .card-visual__mesh{ position:absolute;inset:0;pointer-events:none;opacity:.5; background-image: linear-gradient(rgba(0,184,212,.10) 1px,transparent 1px), linear-gradient(90deg,rgba(0,184,212,.10) 1px,transparent 1px); background-size:26px 26px; -webkit-mask-image:radial-gradient(120% 90% at 70% 20%,#000,transparent 75%); mask-image:radial-gradient(120% 90% at 70% 20%,#000,transparent 75%); } .card-visual__icon{ width:38%;max-width:88px;height:auto;position:relative;z-index:1; color:rgba(0,184,212,.92);filter:drop-shadow(0 6px 16px rgba(0,184,212,.25)); transition:transform .55s var(--ease-out); } .card:hover .card-visual__icon,.card:focus-within .card-visual__icon{transform:scale(1.08) translateY(-2px)} .card-visual__label{ position:absolute;left:1rem;bottom:.9rem;z-index:1; font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700; color:rgba(255,255,255,.62); } .section-feature .card .card-visual{background: radial-gradient(120% 120% at 80% 12%,rgba(0,184,212,.3),transparent 55%), linear-gradient(135deg,#08203a,#0d2f52);} .card-body{padding:1.35rem 1.4rem 1.5rem;flex:1;display:flex;flex-direction:column} .card-kicker{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--us-muted);font-weight:600;margin-bottom:.4rem} .card h3{margin-bottom:.5rem;font-size:1.1rem} .card h3 a{color:inherit;transition:color .2s} .card h3 a:hover{color:var(--us-blue)} .card p{color:var(--us-muted);font-size:.92rem;flex:1} .card-link{ margin-top:1rem;font-weight:700;font-size:.88rem;color:var(--us-blue); display:inline-flex;align-items:center;gap:.25rem;transition:color .2s,gap .25s; } .card-link:hover{color:var(--us-accent);gap:.45rem} /* Feature cards on navy band */ .section-feature .card{ background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12);color:#fff; } .section-feature .card h3 a{color:#fff} .section-feature .card-kicker{color:rgba(255,255,255,.55)} .section-feature .card-link{color:var(--us-accent)} .section-feature .card-media{border-bottom-color:rgba(255,255,255,.08);background:rgba(0,0,0,.2)} /* Solution / product detail */ .content-wrap{display:grid;grid-template-columns:1.4fr .8fr;gap:3rem;align-items:start} @media (max-width:860px){.content-wrap{grid-template-columns:1fr}} .prose{font-size:1.02rem} .prose h2{margin-top:1.8em} .prose ul{padding-left:1.2rem} .prose li{margin-bottom:.4rem} .prose figure img,.entry-thumb img{ border-radius:10px; box-shadow:0 0 0 1px rgba(10,37,64,.06),0 16px 40px rgba(10,37,64,.1); } .side-panel{ background:var(--us-mist);border-radius:10px;padding:1.5rem;border:1px solid var(--us-line); position:sticky;top:5.5rem; box-shadow:0 0 0 1px rgba(0,184,212,.06); } .side-panel h3{font-size:1rem;margin-bottom:1rem} .spec-table{width:100%;border-collapse:collapse;font-size:.92rem} .spec-table th,.spec-table td{text-align:left;padding:.65rem .5rem;border-bottom:1px solid var(--us-line);vertical-align:top} .spec-table th{color:var(--us-muted);font-weight:600;width:40%} .checklist{list-style:none;padding:0;margin:0} .checklist li{padding:.45rem 0 .45rem 1.4rem;position:relative;color:var(--us-muted)} .checklist li::before{content:"";position:absolute;left:0;top:.85rem;width:.55rem;height:.55rem;border-radius:50%;background:var(--us-accent)} /* CTA band */ .cta-band{ background:linear-gradient(135deg,var(--us-navy),#0d3a66); color:#fff;padding:4rem 0;text-align:center;position:relative;overflow:hidden; } .cta-band::before{ content:"";position:absolute;inset:0; background:radial-gradient(circle at 50% 0%,rgba(0,184,212,.22),transparent 55%); animation:heroGlow 20s ease-in-out infinite alternate; } .cta-band .inner{position:relative} .cta-band h2{margin-bottom:.75rem} .cta-band p{color:rgba(255,255,255,.72);max-width:32rem;margin:0 auto 1.5rem} /* Contact */ .contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:2.5rem} @media (max-width:800px){.contact-grid{grid-template-columns:1fr}} .office-card{padding:1.25rem 0;border-bottom:1px solid var(--us-line)} .office-card:last-child{border-bottom:0} .office-card h3{font-size:1rem;margin-bottom:.35rem} .office-card p{margin:0;color:var(--us-muted);font-size:.95rem} .contact-form{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.25rem;background:var(--us-mist);padding:1.75rem;border-radius:10px;border:1px solid var(--us-line)} .form-row{display:flex;flex-direction:column;gap:.35rem} .form-row--full{grid-column:1/-1} .form-row label{font-size:.82rem;font-weight:600;color:var(--us-ink)} .form-row input,.form-row textarea{ border:1px solid var(--us-line);border-radius:4px;padding:.7rem .85rem;font:inherit;background:#fff; transition:border-color .2s,box-shadow .2s; } .form-row input:focus,.form-row textarea:focus{outline:2px solid rgba(0,184,212,.45);border-color:var(--us-accent)} .form-row.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden} .form-status{margin:.75rem 0 0;font-size:.9rem;min-height:1.4em} .form-status.is-ok{color:#0a7a4b} .form-status.is-err{color:#b42318} @media (max-width:560px){.contact-form{grid-template-columns:1fr}} /* News */ .post-meta{font-size:.82rem;color:var(--us-muted);margin-bottom:.75rem} .entry-content{max-width:42rem} /* Cookie / GDPR */ .cookie-banner{ position:fixed;bottom:0;left:0;right:0;z-index:200; background:var(--us-navy);color:#fff;padding:1rem 1.25rem; box-shadow:0 -8px 30px rgba(0,0,0,.2); display:none; } .cookie-banner.is-visible{display:block} /* Message on its own line, both buttons wrapped and centered below it. */ .cookie-inner{ width:min(100%,var(--max));margin:0 auto; display:flex;flex-direction:column;align-items:center;gap:.9rem;text-align:center; } .cookie-banner p{margin:0;font-size:.88rem;color:rgba(255,255,255,.8);max-width:52rem} .cookie-banner a{color:var(--us-accent)} .cookie-actions{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center} .cookie-actions .btn{min-width:118px} /* Secondary button on the navy bar: btn-ghost is dark-on-dark here, so use a light outline. */ .btn-cookie-decline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.45)} .btn-cookie-decline:hover,.btn-cookie-decline:focus-visible{background:#fff;color:var(--us-navy);border-color:#fff} /* Footer */ .site-footer{background:var(--us-navy);color:rgba(255,255,255,.72);padding:3.5rem 0 1.5rem} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem;margin-bottom:2.5rem} @media (max-width:800px){.footer-grid{grid-template-columns:1fr 1fr}} @media (max-width:500px){.footer-grid{grid-template-columns:1fr}} .footer-brand .logo{display:inline-flex;margin-bottom:1rem} .footer-brand .logo-img{height:48px} .footer-brand p{font-size:.9rem;line-height:1.7;max-width:28rem} .site-footer h4{color:#fff;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:1rem} .site-footer ul{list-style:none;padding:0;margin:0} .site-footer li{margin-bottom:.45rem} .site-footer a{color:rgba(255,255,255,.72);transition:color .2s} .site-footer a:hover{color:#fff} .footer-bottom{ border-top:1px solid rgba(255,255,255,.1);padding-top:1.25rem; display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.8rem; } .social-links{display:flex;gap:.75rem} .social-links a{color:rgba(255,255,255,.7)} /* Translate widget */ /* Google Translate (InlineLayout.SIMPLE), restyled to fit the navy header nav. The SIMPLE layout renders .goog-te-gadget-simple containing an link, a Google icon, a "select language" label and a ▼ caret — not a