/* ========================================================================== Inner pages · the Google Ads hero on About Us, Management Team, Legal Documents and Contact Us — LIVE since 2026-09-20, applied from the approved preview /inner-hero-k7d/ (the preview keeps its own copy) The hero IS the Google Ads hero: the page links that hero's own files — gads-clients/*.css, gads-vm-v1/vm.css, gads-clients/q7-head.css and gads-hero-rail/hero-rail.css — in the order the Google Ads page loads them, and uses its markup (section#overview.x9.k5… > #q7). Proved: the Google Ads hero dropped into the About page renders pixel-identical at 1440 and 390. This file adds only what the four pages need and the Google Ads page does not. Linked LAST. 1 · one row of cards. Each card is two Google Ads cards and the gap between them tall, so the blue sheet, the frame and the line where the frame ends are the Google Ads hero's, to the pixel. 2 · the card's lower zone (.ih-f): one more fact about the item, on a pale tint, starting exactly on the line where the frame ends. 3 · marks: a portrait (Management), a document icon on its status colour (Legal), a channel icon on that channel's colour (Contact). 4 · the About detail's paragraph, two cells and list. 5 · the Contact answer set as the Google Ads detail card. 6 · Legal: the company record, now directly under the hero. Flat, square, no shadow — the hero's own rules. ========================================================================== */ /* ---- 1 · one row, each card two Google Ads cards tall ------------------- */ #overview.ih.x9 #q7#q7.cc{ --ih-ch:60px; --ih-pl:9px; --ih-pr:8px; } @media (max-width:860px){ #overview.ih.x9 #q7#q7.cc{ --ih-ch:58px; --ih-pr:10px; } } #overview.ih.x9 #q7#q7.cc .mp-i{ display:grid; grid-template-columns:32px minmax(0,1fr) auto; grid-template-rows:calc(var(--ih-ch) + var(--gap) / 2) minmax(0,1fr); align-items:center; column-gap:9px; row-gap:0; height:calc(2 * var(--ih-ch) + var(--gap)); min-height:0; padding:0 var(--ih-pr) 0 var(--ih-pl); text-align:left; text-decoration:none; color:var(--ink, #0E1E35); } @media (max-width:860px){ #overview.ih.x9 #q7#q7.cc .mp-i{ column-gap:10px; } } #overview.ih.x9 #q7#q7.cc .mp-i > .mp-m{ grid-column:1; grid-row:1; } #overview.ih.x9 #q7#q7.cc .mp-i > .mp-w{ grid-column:2; grid-row:1; } #overview.ih.x9 #q7#q7.cc .mp-i > .cc-cue{ grid-column:3; grid-row:1; } /* a page's own section padding must not reach the hero (Legal: .pg > section) */ #overview.ih.x9{ padding:0; margin:0; border:0; } /* a name never ends in "…": it may take a second line (the Google Ads names are short enough for one; a topic like "Invoice, documents, vendor form" is not). The sub stays one line, except Management's longer designations. */ #overview.ih.x9 #q7#q7.cc .mp-i .cc-nm{ white-space:normal; overflow:hidden; text-overflow:clip; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-height:16.8px; } #overview.ih.x9 #q7#q7.cc .mp-i .mp-s:not(.ih-2){ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #overview.ih.x9 #q7#q7.cc .mp-i .mp-s.ih-2{ white-space:normal; overflow:hidden; text-overflow:clip; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-height:14px; } /* the selected ring is drawn as an outline, so the lower zone's tint cannot paint over it (an inset shadow sits under the card's children) */ #overview.ih.x9 #q7#q7.cc .mp-i.is-sel, #overview.ih.x9 #q7#q7.cc .mp-i.is-sel:hover{ box-shadow:none; outline:2px solid #5E8FD3; outline-offset:-2px; } #overview.ih.x9 #q7#q7.cc .mp-i.is-sel::after{ z-index:2; } #overview.ih.x9 #q7#q7.cc .mp-i:focus-visible{ outline:2px solid #003F8A; outline-offset:-2px; } /* ---- 2 · the lower zone ------------------------------------------------- */ #overview.ih.x9 #q7#q7.cc .mp-i > .ih-f{ grid-column:1 / -1; grid-row:2; align-self:stretch; margin:0 calc(-1 * var(--ih-pr)) 0 calc(-1 * var(--ih-pl)); padding:10px 12px 10px var(--ih-pl); display:block; overflow:hidden; background:#F3F7FC; color:#505C6C; font-size:12.5px; line-height:17px; font-weight:500; font-style:normal; letter-spacing:-.005em; white-space:normal; text-wrap:pretty; } #overview.ih.x9 #q7#q7.cc .mp-i:hover > .ih-f{ background:#EEF4FC; } #overview.ih.x9 #q7#q7.cc .mp-i.is-sel > .ih-f{ background:#EEF4FC; color:#24364F; } @media (max-width:860px){ #overview.ih.x9 #q7#q7.cc .mp-i > .ih-f{ padding:9px 12px 9px var(--ih-pl); font-size:12px; line-height:16px; } } /* ---- 3 · marks ---------------------------------------------------------- */ #overview.ih.x9 #q7#q7.cc .mp-m.ih-pic{ background:#E4EAFD; overflow:hidden; padding:0; } #overview.ih.x9 #q7#q7.cc .mp-m.ih-pic img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 0; transform:scale(1.22); transform-origin:50% 8%; } #overview.ih.x9 #q7#q7.cc .mp-m.ih-ico svg{ width:17px; height:17px; fill:none; stroke:#FFFFFF; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } #overview.ih.x9 #q7#q7.cc .mp-m.ih-ico svg.is-fill{ fill:#FFFFFF; stroke:none; } /* ---- 4 · About · the market detail ------------------------------------- */ #overview.ih.x9 #q7#q7.cc .ih-p{ margin:0 0 16px; max-width:680px; font-size:15px; line-height:1.6; font-weight:400; color:#505C6C; text-wrap:pretty; } #overview.ih.x9 #q7#q7.cc .mp-strip.ih-two{ grid-template-columns:repeat(2, minmax(0,1fr)); } #overview.ih.x9 #q7#q7.cc .mp-side.ih-side{ padding:20px 22px; align-self:start; } #overview.ih.x9 #q7#q7.cc .ih-li{ margin:0; padding:0; list-style:none; } #overview.ih.x9 #q7#q7.cc .ih-li li{ position:relative; padding-left:18px; font-size:14.5px; line-height:1.5; font-weight:500; color:#24364F; } #overview.ih.x9 #q7#q7.cc .ih-li li + li{ margin-top:12px; } #overview.ih.x9 #q7#q7.cc .ih-li li::before{ content:""; position:absolute; left:0; top:.55em; width:6px; height:6px; background:#004594; } @media (max-width:860px){ /* one column in reading order: who, words, cells, the list, then the actions */ #overview.ih.x9 #q7#q7.cc .mp-body.ih-body{ display:flex; flex-direction:column; align-items:stretch; gap:14px; } #overview.ih.x9 #q7#q7.cc .mp-body.ih-body > .mp-main{ display:contents; } #overview.ih.x9 #q7#q7.cc .ih-body .mp-who{ order:1; margin:0; } #overview.ih.x9 #q7#q7.cc .ih-body .ih-p{ order:2; margin:0; } #overview.ih.x9 #q7#q7.cc .ih-body .mp-strip{ order:3; } #overview.ih.x9 #q7#q7.cc .ih-body .ih-side{ order:4; padding:16px 16px; } #overview.ih.x9 #q7#q7.cc .ih-body .mp-foot{ order:5; margin:0; } #overview.ih.x9 #q7#q7.cc .mp-strip.ih-two{ grid-template-columns:minmax(0,1fr); } #overview.ih.x9 #q7#q7.cc .ih-p{ font-size:14.5px; } } /* ---- 5 · Contact · the answer, set as the Google Ads detail card ------- */ #overview.ih.x9 #q7#q7.cc .px-ans{ margin:14px 0 0; padding:0; background:#FFFFFF; border:0; border-radius:0; box-shadow:none; text-align:left; overflow:visible; } #overview.ih.x9 #q7#q7.cc .px-ans[hidden]{ display:none; } #overview.ih.x9 #q7#q7.cc .px-ans-h{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:50px; margin:0; padding:4px 22px 0; background:transparent; border:0; } #overview.ih.x9 #q7#q7.cc .px-ans-h > span{ font-size:10.5px; line-height:16px; font-weight:700; letter-spacing:1.47px; text-transform:uppercase; color:#34445A; } #overview.ih.x9 #q7#q7.cc .px-reset{ height:42px; padding:0 18px; margin:0; border:0; border-radius:6px; background:#EEF4FC; color:#24364F; font-size:14.5px; font-weight:650; cursor:pointer; } #overview.ih.x9 #q7#q7.cc .px-reset:hover{ background:#DDE9F9; } #overview.ih.x9 #q7#q7.cc .px-a{ margin:0; padding:2px 22px 22px; border:0; background:transparent; } #overview.ih.x9 #q7#q7.cc .px-a h2{ margin:0; max-width:820px; font-size:22px; line-height:1.2; font-weight:800; letter-spacing:-.02em; color:#0E1E35; text-wrap:balance; } #overview.ih.x9 #q7#q7.cc .px-a > p{ margin:10px 0 0; max-width:760px; font-size:15px; line-height:1.6; color:#505C6C; } #overview.ih.x9 #q7#q7.cc .px-a-grid{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:8px; margin:18px 0 0; padding:0; border:0; } #overview.ih.x9 #q7#q7.cc .px-a-grid > div{ margin:0; padding:13px 16px 14px; background:#F3F7FC; border:0; } #overview.ih.x9 #q7#q7.cc .px-a-grid > div + div{ background:#E3EDFA; } #overview.ih.x9 #q7#q7.cc .px-a-grid h3{ margin:0; font-size:13px; line-height:15.6px; font-weight:600; letter-spacing:2.08px; text-transform:uppercase; color:#505C6C; } #overview.ih.x9 #q7#q7.cc .px-a-grid ul{ margin:10px 0 0; padding:0; list-style:none; } #overview.ih.x9 #q7#q7.cc .px-a-grid li{ position:relative; margin:0; padding-left:16px; font-size:14.5px; line-height:1.5; color:#24364F; } #overview.ih.x9 #q7#q7.cc .px-a-grid li + li{ margin-top:6px; } #overview.ih.x9 #q7#q7.cc .px-a-grid li::before{ content:""; position:absolute; left:0; top:.6em; width:6px; height:6px; border-radius:0; background:#004594; } #overview.ih.x9 #q7#q7.cc .px-team{ margin:10px 0 0; font-size:15.5px; line-height:1.35; font-weight:700; color:#0E1E35; } #overview.ih.x9 #q7#q7.cc .px-mail{ margin:4px 0 0; font-size:13.5px; line-height:1.4; color:#24364F; word-break:break-word; } #overview.ih.x9 #q7#q7.cc .px-a-acts{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; margin:18px 0 0; } #overview.ih.x9 #q7#q7.cc .px-a-acts .px-btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; height:48px; padding:0 20px; border:0; border-radius:6px; box-shadow:none; font-size:15px; font-weight:750; letter-spacing:-.005em; text-decoration:none; white-space:nowrap; } #overview.ih.x9 #q7#q7.cc .px-a-acts .px-btn svg{ width:18px; height:18px; flex:none; } #overview.ih.x9 #q7#q7.cc .px-a-acts .px-btn-p{ background:#0760C6; color:#FFFFFF; } #overview.ih.x9 #q7#q7.cc .px-a-acts .px-btn-p:hover{ background:#004EA6; } #overview.ih.x9 #q7#q7.cc .px-a-acts .px-btn-o{ background:#EEF4FC; color:#24364F; } #overview.ih.x9 #q7#q7.cc .px-a-acts .px-btn-o:hover{ background:#DDE9F9; } #overview.ih.x9 #q7#q7.cc .px-a-acts .px-btn-w{ background:#1FA855; color:#FFFFFF; } #overview.ih.x9 #q7#q7.cc .px-a-acts .px-btn-w:hover{ background:#178A45; } #overview.ih.x9 #q7#q7.cc .px-ans-f{ margin:0; padding:13px 22px 14px; background:#F3F7FC; border:0; font-size:13.5px; line-height:1.5; color:#505C6C; } #overview.ih.x9 #q7#q7.cc .px-ans-f a{ color:#0760C6; font-weight:700; text-decoration:none; } #overview.ih.x9 #q7#q7.cc .px-ans-f a:hover{ text-decoration:underline; text-underline-offset:3px; } @media (max-width:860px){ #overview.ih.x9 #q7#q7.cc .px-ans{ margin-top:10px; } #overview.ih.x9 #q7#q7.cc .px-ans-h{ padding:4px 14px 0; } #overview.ih.x9 #q7#q7.cc .px-a{ padding:2px 14px 16px; } #overview.ih.x9 #q7#q7.cc .px-a h2{ font-size:19px; } #overview.ih.x9 #q7#q7.cc .px-a > p{ font-size:14.5px; } #overview.ih.x9 #q7#q7.cc .px-a-grid{ grid-template-columns:minmax(0,1fr); } #overview.ih.x9 #q7#q7.cc .px-a-acts .px-btn{ width:100%; } #overview.ih.x9 #q7#q7.cc .px-ans-f{ padding:12px 14px 13px; } } /* ---- the quiet company line may carry links (Contact) ------------------- */ #overview.ih.x9 .x9-micro a{ color:inherit; text-decoration:none; } #overview.ih.x9 .x9-micro a:hover{ color:#0760C6; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; } /* ---- 6 · Legal · the company record, now directly under the hero -------- */ /* the faint grid was the old hero's ground; the record keeps its own look */ .pg > section.ih-after .hp-grid{ display:none; }