/* ============================================================ CABLEOLOGY — shared stylesheet Palette taken from the brochure cover: flame orange, amber, sand and black. ============================================================ */ :root{ --flame:#E8461C; --ember:#F26522; --amber:#F5A623; --sun:#FBCB84; --cream:#FDF2E9; --ink:#0E0E0E; --body:#403B36; --rule:#E6D9CC; --gutter:clamp(20px,5vw,64px); --hpad:clamp(20px,3.4vw,48px); --head-h:96px; --mark:143px; --measure:66ch; } *{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:110px;-webkit-text-size-adjust:100%} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{margin:0;background:#fff;color:var(--body); font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:17px;line-height:1.62} h1,h2,h3,h4,.stat b{font-family:"Archivo",Impact,system-ui,sans-serif;color:var(--ink); font-weight:800;font-stretch:118%;letter-spacing:-.005em;line-height:1.04;margin:0} h1{font-size:clamp(2.05rem,4.1vw,3.4rem);line-height:1.03} h2{font-size:clamp(1.8rem,3.6vw,2.65rem)} h3{font-size:clamp(1.08rem,1.8vw,1.32rem);font-stretch:110%;font-weight:700} h4{font-size:1rem;font-stretch:110%;font-weight:700} p{margin:0 0 1.05em;max-width:var(--measure)} a{color:#C4360F} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:3px solid var(--flame);outline-offset:2px} img{max-width:100%;display:block} .wrap{max-width:1220px;margin-inline:auto;padding-inline:var(--gutter)} .section{padding-block:clamp(52px,7vw,92px)} .section--cream{background:var(--cream)} .section--dark{background:var(--ink);color:#D8D2CC} .section--dark h2,.section--dark h3,.section--dark h4{color:#fff} .lede{font-size:clamp(1.04rem,1.4vw,1.2rem);color:#2E2B28} .section--dark .lede{color:#CFC8C1} .skip{position:absolute;left:-9999px} .skip:focus{left:8px;top:8px;z-index:99;background:#000;color:#fff;padding:10px 14px} .eyebrow{display:inline-block;background:var(--flame);color:#fff;font-family:"Archivo",sans-serif; font-stretch:110%;font-weight:700;font-size:.78rem;padding:4px 10px;margin-bottom:14px} .section--dark .eyebrow{background:var(--amber);color:#241606} .band{background:var(--flame);color:#fff} .band h1,.band h2{color:#fff} .band .lede{color:#FFE6DA} .band .eyebrow{background:#fff;color:#B8320C} .note{font-size:.85rem;color:#6E655D;margin-top:14px} .two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4.5vw,56px);align-items:start} @media (max-width:860px){.two{grid-template-columns:1fr}} .figframe{border:1px solid var(--rule);background:#fff;padding:8px} .figframe img{width:100%} .figframe figcaption{font-size:.8rem;color:#6E655D;padding:8px 4px 2px} /* ---------- ticker ---------- */ .tv-strip{background:var(--ink);border-bottom:1px solid #241F1B;min-height:44px} .tv-strip .tradingview-widget-container{max-width:1400px;margin-inline:auto} .tv-fallback{color:#B7AEA6;font-size:.8rem;padding:12px var(--hpad);margin:0} .tv-fallback a{color:var(--amber)} .tv-fallback[hidden]{display:none} /* ---------- header: fixed-height white banner ---------- */ .head{position:sticky;top:0;z-index:50;background:#fff;border-bottom:4px solid var(--flame)} .head .wrap{position:relative;max-width:1440px;padding-inline:var(--hpad); height:var(--head-h);display:flex;align-items:center;gap:10px} /* The circular mark straddles the banner's bottom edge, half on the white, half on whatever is below. It never changes the banner height. */ .brand-mark{position:absolute;left:var(--hpad);top:100%;transform:translateY(-50%); width:var(--mark);height:var(--mark);border-radius:50%;background:#fff; padding:3px;z-index:6;box-shadow:0 4px 14px -4px rgba(0,0,0,.45)} .brand-mark img{width:100%;height:100%} .brand{display:flex;align-items:center;text-decoration:none;flex:none; padding-left:calc(var(--mark) + 20px)} .wordmark{display:block;width:clamp(159px,18vw,197px);height:auto} .wordmark .wm-a{fill:var(--flame)} .wordmark .wm-b{fill:var(--ink)} .nav{margin-left:auto;display:flex;align-items:center;gap:2px;list-style:none;padding:0;margin-block:0} .nav > li{position:relative} .nav a,.nav .top{display:block;color:#2A2724;text-decoration:none;font-size:.913rem;font-weight:500; padding:9px 5px;background:none;border:0;font-family:inherit;cursor:pointer;white-space:nowrap} .nav a:hover,.nav .top:hover{color:var(--flame)} .nav a[aria-current="page"]{color:var(--flame);font-weight:600} .nav .top .caret{display:inline-block;margin-left:5px;border:4px solid transparent; border-top-color:currentColor;transform:translateY(2px)} .submenu{list-style:none;margin:0;padding:8px 0;position:absolute;top:100%;left:0;min-width:238px; background:#fff;border:1px solid var(--rule);border-top:3px solid var(--flame); box-shadow:0 16px 34px rgba(0,0,0,.13);display:none;z-index:60} .submenu a{padding:9px 16px;font-size:.9rem} .submenu a:hover{background:var(--cream)} .nav > li.open > .submenu{display:block} @media (hover:hover) and (min-width:1341px){.nav > li:hover > .submenu{display:block}} .head .cta{margin-left:8px;white-space:nowrap} /* Tight band just above the burger breakpoint: the nav + CTA can overrun the viewport by a few px. Pull the spacing in rather than collapsing to burger. */ @media (min-width:1341px) and (max-width:1480px){ .nav a,.nav .top{padding-inline:5px;font-size:.84rem} .head .cta{padding:10px 14px;font-size:.88rem;margin-left:4px} .head .wrap{gap:6px} } .social{display:flex;gap:8px} /* Breathing room between the last menu item (Contact Us) and the WhatsApp icon. */ .head .social{margin-left:28px} @media (min-width:1341px) and (max-width:1480px){.head .social{margin-left:18px}} .brand-btn{display:block;width:38px;height:38px;line-height:0;border-radius:3px;overflow:hidden; transition:transform .15s ease} .brand-btn svg{width:38px;height:38px;display:block} .brand-btn:hover{transform:translateY(-2px)} @media (prefers-reduced-motion:reduce){.brand-btn,.brand-btn:hover{transition:none;transform:none}} .burger{display:none;background:none;border:1px solid var(--rule);width:42px;height:38px;cursor:pointer} .burger span{display:block;width:18px;height:2px;background:#000;margin:3px auto} @media (max-width:1340px){ :root{--head-h:81px;--mark:113px} .burger{display:block;order:3;margin-left:8px} .head .social{order:2;margin-left:auto} .head .cta{display:none} .nav{position:fixed;inset:var(--head-h) 0 auto 0;max-height:calc(100vh - var(--head-h));overflow-y:auto; flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:4px solid var(--flame); padding:6px var(--hpad) 22px;display:none} .nav.open{display:flex} .nav > li{border-bottom:1px solid var(--rule)} .nav a,.nav .top{padding:13px 0;width:100%;text-align:left} .submenu{position:static;display:none;border:0;box-shadow:none;padding:0 0 10px 14px;min-width:0; border-left:3px solid var(--sun)} .submenu a{padding:9px 0} .brand{padding-left:calc(var(--mark) + 14px)} } @media (max-width:520px){ :root{--mark:91px} .wordmark{width:clamp(119px,30vw,148px)} } /* On a 360px phone the roundel, wordmark, social icons and menu button together run past the edge and the menu button becomes unreachable. Give the logo a little back below 380px so the bar fits. */ @media (max-width:380px){ :root{--mark:60px} .wordmark{width:clamp(74px,23vw,94px)} } /* ---------- hero ---------- */ .hero{position:relative;background:#0E0E0E url("img/install-tray.jpg") center/cover no-repeat;color:#fff;overflow:hidden; min-height:clamp(420px,60vh,600px);display:flex;align-items:center} .hero-media{position:absolute;inset:0;z-index:0} .hero-still{position:absolute;inset:0;background-size:cover;background-position:center; animation:slowZoom 26s ease-in-out infinite alternate} @keyframes slowZoom{from{transform:scale(1.00)}to{transform:scale(1.12)}} @media (prefers-reduced-motion:reduce){.hero-still{animation:none}} .hero-media video,.hero-media .hero-vid{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;opacity:0;transition:opacity .8s ease} .hero-media video.playing{opacity:1} .hero-shade{position:absolute;inset:0;z-index:1;background: linear-gradient(94deg,rgba(12,10,9,.66) 0 22%,rgba(12,10,9,.44) 42%,rgba(12,10,9,.16) 68%,rgba(12,10,9,.10) 100%)} .hero-facets{position:absolute;inset:0;z-index:2;pointer-events:none} .hero-facets i{position:absolute;display:block} .hero .wrap{position:relative;z-index:3;padding-block:clamp(52px,7vw,80px);width:100%} .hero h1{color:#fff;max-width:17ch} .hero .lede{color:#FFE2D5;max-width:44ch;margin-top:18px} .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px} .hero-facts{display:grid;grid-template-columns:repeat(4,1fr);margin-top:38px; border-top:2px solid rgba(255,255,255,.6);max-width:660px} .stat{padding:13px 14px 4px 0;border-right:1px solid rgba(255,255,255,.3)} .stat:last-child{border-right:0} .stat b{display:block;font-size:1.4rem;color:#fff} .stat span{font-size:.81rem;color:#FFD9C8;display:block} @media (max-width:560px){ .hero-facts{grid-template-columns:1fr 1fr} .stat:nth-child(2n){border-right:0} .stat:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:12px} } /* page banner for inner pages */ .pagehead{background:var(--ink);color:#fff;position:relative;overflow:hidden} .pagehead .bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.42} .pagehead .sh{position:absolute;inset:0;background:linear-gradient(94deg,rgba(196,54,15,.92) 0 34%,rgba(14,14,14,.55) 100%)} .pagehead .wrap{position:relative;z-index:2;padding-block:clamp(38px,5vw,62px)} .pagehead h1{color:#fff} .pagehead p{color:#FFE2D5;margin:12px 0 0;max-width:56ch} .crumbs{font-size:.82rem;color:#FFD1BE;margin:0 0 10px} .crumbs a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:9px;padding:12px 20px;font-family:"Archivo",sans-serif; font-weight:700;font-stretch:112%;font-size:.94rem;text-decoration:none;border:1px solid transparent; cursor:pointer;background:none} .btn--solid{background:var(--flame);color:#fff} .btn--solid:hover{background:#C4360F} .btn--line{border-color:var(--ink);color:var(--ink)} .btn--line:hover{background:var(--ink);color:#fff} .btn--onorange{background:#fff;color:#B8320C} .btn--onorange:hover{background:var(--ink);color:#fff} .btn--ondark{border-color:#6A625B;color:#fff} .btn--ondark:hover{background:#fff;color:#000} .btn--wa{background:#128C4B;color:#fff} .btn--wa:hover{background:#0E6E3B} .btn svg{width:17px;height:17px;fill:currentColor;flex:none} /* ---------- philosophy ---------- */ .pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule); border:1px solid var(--rule);margin-top:28px} @media (max-width:900px){.pillars{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){.pillars{grid-template-columns:1fr}} .pillars div{background:#fff;padding:20px 18px;text-align:center} .pillars h4{margin-bottom:6px} .pillars p{font-size:.87rem;margin:0;color:#5C554E} .pillars div:nth-child(4n+1){box-shadow:inset 4px 0 0 var(--flame)} .pillars div:nth-child(4n+2){box-shadow:inset 4px 0 0 var(--ember)} .pillars div:nth-child(4n+3){box-shadow:inset 4px 0 0 var(--amber)} .pillars div:nth-child(4n+4){box-shadow:inset 4px 0 0 var(--sun)} /* ---------- sectors ---------- */ .sectors{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:28px} @media (max-width:900px){.sectors{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){.sectors{grid-template-columns:1fr}} .sector{position:relative;overflow:hidden;background:#151312;aspect-ratio:16/11;margin:0} .sector img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .sector:hover img{transform:scale(1.05)} @media (prefers-reduced-motion:reduce){.sector img,.sector:hover img{transition:none;transform:none}} .sector figcaption{position:absolute;inset:auto 0 0 0;padding:12px 14px 12px 18px; background:linear-gradient(180deg,rgba(14,14,14,0),rgba(14,14,14,.92) 46%)} .sector b{font-family:"Archivo",sans-serif;font-stretch:112%;font-weight:700;color:#fff; font-size:1rem;display:block} .sector span{font-size:.79rem;color:#E0D6CE;line-height:1.4;display:block;margin-top:2px} .sector::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--flame);z-index:2} .sector:nth-child(4n+2)::before{background:var(--ember)} .sector:nth-child(4n+3)::before{background:var(--amber)} .sector:nth-child(4n)::before{background:var(--sun)} /* ---------- manufacturing ---------- */ .mfg-wrap{position:relative;overflow:hidden} /* Scrim over the film: heavy where the heading sits, light further down so the footage still reads. The panels below carry their own background. */ .mfg-wrap::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(180deg,rgba(10,9,8,.74) 0,rgba(10,9,8,.36) 42%,rgba(10,9,8,.18) 100%)} .mfg-wrap video,.mfg-wrap .bg{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;background-size:cover;background-position:center;z-index:0;opacity:.78} .mfg-wrap .wrap{position:relative;z-index:2} /* The grid's own background is what shows through the gaps and, once the panels are translucent, through the panels too. Make it translucent as well so the film behind reads across the whole block, not just the seams. */ .mfg{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(42,37,34,.45); border:1px solid rgba(255,255,255,.10);margin-top:28px} @media (max-width:820px){.mfg{grid-template-columns:1fr 1fr}} @media (max-width:520px){.mfg{grid-template-columns:1fr}} /* Translucent rather than solid, so the film behind reads through the panels — the same treatment as the How we work boxes. The blur keeps the text legible over moving footage. */ .mfg div{background:rgba(16,14,13,.55);padding:22px 20px;scroll-margin-top:120px; -webkit-backdrop-filter:blur(7px) saturate(115%);backdrop-filter:blur(7px) saturate(115%)} @supports not (backdrop-filter:blur(2px)){.mfg div{background:rgba(16,14,13,.76)}} .mfg h4{margin-bottom:6px} .mfg p{font-size:.87rem;margin:0;color:#A79E96} /* ---------- accreditation strip ---------- */ .accred{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:26px} .accred .logo{background:#fff;padding:12px 16px;display:grid;place-items:center;min-width:104px} .accred .logo img{height:56px;width:auto} .accred .txt{border:1px solid #3A342E;color:#E7E1DB;padding:12px 16px;font-family:"Archivo",sans-serif; font-stretch:110%;font-weight:700;font-size:.9rem;letter-spacing:.02em;text-align:center;min-width:104px} .accred .txt small{display:block;font-family:"IBM Plex Sans",sans-serif;font-weight:400; font-size:.72rem;color:#9C948C;letter-spacing:0;margin-top:2px} /* ---------- cards / tabs / tables ---------- */ .tabs{display:flex;flex-wrap:wrap;margin-top:24px;border-bottom:2px solid var(--rule)} .tab{border:0;background:none;font:inherit;font-family:"Archivo",sans-serif;font-stretch:110%; font-weight:700;font-size:.92rem;padding:12px 18px;cursor:pointer;color:#6E655D; border-bottom:4px solid transparent;margin-bottom:-2px} .tab:hover{color:var(--ink)} .tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--flame)} .panel[hidden]{display:none} .panel{padding-top:24px} .tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px} .search{flex:1 1 250px;display:flex;align-items:center;gap:9px;border:2px solid var(--ink); padding:9px 13px;background:#fff} .search svg{width:16px;height:16px;fill:#6E655D;flex:none} .search input{border:0;outline:0;font:inherit;font-size:.95rem;width:100%;background:none} .chip{border:1px solid var(--rule);background:#fff;padding:9px 14px;font:inherit;font-size:.86rem; cursor:pointer;color:#403B36} .chip:hover{border-color:var(--flame)} .chip[aria-pressed="true"]{background:var(--flame);border-color:var(--flame);color:#fff} .tbl-scroll{overflow-x:auto;border:1px solid var(--rule)} table{border-collapse:collapse;width:100%;min-width:620px;font-size:.91rem;background:#fff} thead th{background:var(--flame);color:#fff;text-align:left;font-family:"Archivo",sans-serif; font-stretch:110%;font-weight:600;font-size:.84rem;padding:11px 14px;white-space:nowrap} tbody th{background:var(--cream);font-family:"Archivo",sans-serif;font-stretch:110%;text-align:left; padding:9px 14px;font-size:.85rem;color:var(--ink);border-top:1px solid var(--rule)} tbody td{padding:10px 14px;border-top:1px solid #F0E6DC;vertical-align:top} tbody tr:hover td{background:#FDEDE3} td.ref{font-weight:600;color:#000;white-space:nowrap} td.std{color:#6E655D;white-space:nowrap} .har{display:inline-block;border:1px solid var(--sun);background:#FFF6EC;padding:1px 7px; font-size:.77rem;color:#8A4A18} .count{font-size:.85rem;color:#6E655D;margin:10px 0 0} .empty{padding:26px 14px;color:#6E655D} .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} @media (max-width:860px){.cards{grid-template-columns:1fr 1fr}} @media (max-width:520px){.cards{grid-template-columns:1fr}} .card{border:1px solid var(--rule);border-top:4px solid var(--flame);padding:18px;background:#fff} .card h4{margin-bottom:6px} .card p{font-size:.88rem;margin:0;color:#5C554E} .card ul{margin:8px 0 0;padding-left:18px;font-size:.86rem;color:#5C554E} .card li{padding:2px 0} /* ---------- exclusive offers ---------- */ .offer-tools{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;align-items:center} .offers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px} @media (max-width:900px){.offers{grid-template-columns:1fr 1fr}} @media (max-width:560px){.offers{grid-template-columns:1fr}} .offer{border:1px solid var(--rule);background:#fff;display:flex;flex-direction:column;position:relative} .offer .tag{position:absolute;top:0;left:0;background:var(--flame);color:#fff; font-family:"Archivo",sans-serif;font-stretch:110%;font-weight:700;font-size:.74rem;padding:4px 10px;z-index:2} .offer .tag.clear{background:var(--ink)} .offer .tag.new{background:#128C4B} .offer img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff;padding:14px} .offer .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1} .offer .ref{font-size:.78rem;color:#6E655D;letter-spacing:.03em} .offer h3{font-size:1.08rem} .offer .spec{font-size:.86rem;color:#5C554E;margin:0} .offer .price{display:flex;align-items:baseline;gap:10px;margin-top:6px} .offer .now{font-family:"Archivo",sans-serif;font-stretch:112%;font-weight:800;font-size:1.35rem;color:var(--flame)} .offer .was{text-decoration:line-through;color:#8C847C;font-size:.9rem} .offer .unit{font-size:.78rem;color:#6E655D} .offer .meta{font-size:.8rem;color:#6E655D;margin:0} .offer .act{margin-top:auto;padding-top:14px;display:flex;gap:8px;flex-wrap:wrap} .offer .act .btn{padding:9px 14px;font-size:.86rem} .offers-empty{border:1px dashed var(--rule);padding:30px;text-align:center;color:#6E655D;margin-top:22px} /* ---------- copper ---------- */ .copper{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,48px); align-items:start;margin-top:26px} @media (max-width:900px){.copper{grid-template-columns:1fr}} .tv-card{background:#fff;border:1px solid var(--rule);padding:6px;min-height:180px} .cash{border-top:4px solid var(--flame);margin-top:18px} .cash dl{display:grid;grid-template-columns:1fr auto;margin:0} .cash dt{padding:11px 0;border-bottom:1px solid var(--rule);font-size:.93rem} .cash dd{padding:11px 0;border-bottom:1px solid var(--rule);margin:0;text-align:right; font-family:"Archivo",sans-serif;font-stretch:110%;font-weight:700;color:var(--ink)} /* ---------- accreditations page ---------- */ .bs-list{list-style:none;padding:0;margin:20px 0 0;border-top:4px solid var(--flame)} .bs-list li{padding:12px 0;border-bottom:1px solid var(--rule);display:grid; grid-template-columns:118px 1fr;gap:14px;font-size:.93rem} .bs-list b{font-family:"Archivo",sans-serif;font-stretch:110%;color:var(--ink)} .approvals{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px} .approvals span{border:1px solid var(--rule);background:#fff;padding:4px 10px;font-size:.81rem;color:#4A463F} .basec{display:flex;gap:16px;align-items:center;margin-top:22px;padding:16px;background:#fff; border:1px solid var(--rule)} .basec img{width:70px;flex:none} .basec p{margin:0;font-size:.88rem} /* ---------- people ---------- */ .people{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.5vw,30px);margin-top:28px} @media (max-width:820px){.people{grid-template-columns:1fr 1fr}} @media (max-width:520px){.people{grid-template-columns:1fr}} .person{margin:0;background:#fff;border:1px solid var(--rule);border-bottom:5px solid var(--flame)} .person img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--cream)} .person figcaption{padding:18px} .person b{display:block;font-family:"Archivo",sans-serif;font-stretch:112%;font-weight:800; font-size:1.12rem;color:var(--ink)} .person span{display:block;font-size:.88rem;color:var(--flame);font-weight:600;margin-top:2px} .person p{font-size:.87rem;color:#5C554E;margin:10px 0 0} /* A Cableologist with no photograph yet: the monogram holds the same square as a portrait, so the card sits level with the others instead of riding up. */ .person-mono{width:100%;aspect-ratio:1/1;background:var(--cream); display:flex;align-items:center;justify-content:center; font-family:"Archivo",sans-serif;font-stretch:112%;font-weight:800; font-size:clamp(2.4rem,7vw,3.4rem);color:var(--flame);letter-spacing:.04em} /* ---------- locations ---------- */ .loc{display:grid;grid-template-columns:390px 1fr;gap:20px;margin-top:26px;align-items:start} @media (max-width:960px){.loc{grid-template-columns:1fr}} .loc-list{display:flex;flex-direction:column;gap:10px;max-height:620px;overflow-y:auto;padding-right:4px} @media (max-width:960px){.loc-list{max-height:none;overflow:visible}} .loc-card{background:#fff;border:1px solid var(--rule);border-left:5px solid var(--rule); transition:border-color .15s ease,background .15s ease} .loc-card:hover{border-left-color:var(--amber)} .loc-card[aria-current="true"]{border-left-color:var(--flame);background:var(--cream)} .loc-head{display:block;width:100%;text-align:left;background:none;border:0;font:inherit; padding:16px 18px 12px;cursor:pointer;color:inherit} .loc-card h4{margin:0 0 6px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .loc-card h4 em{font-style:normal;font-family:"IBM Plex Sans",sans-serif;font-size:.72rem; font-weight:600;background:var(--flame);color:#fff;padding:2px 7px} .loc-card address{font-style:normal;font-size:.88rem;color:#5C554E;line-height:1.5} .loc-actions{display:flex;gap:7px;flex-wrap:wrap;padding:0 18px 16px} .pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--rule);background:#fff; padding:6px 11px;font:inherit;font-size:.8rem;color:#403B36;text-decoration:none;cursor:pointer} .pill:hover{border-color:var(--flame);color:#B8320C} .pill.wa:hover{border-color:#25D366;color:#0E6E3B} .pill span{width:14px;height:14px;flex:none;background-repeat:no-repeat;background-size:contain} .ic-wa{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%2325D366' d='M16 0a16 16 0 0 0-13.6 24.4L0 32l7.9-2.3A16 16 0 1 0 16 0Z'/%3E%3Cpath fill='%23fff' d='M23.6 21.2c-.3.9-1.9 1.7-2.6 1.8-.7.1-1.3.3-4.4-.9-3.7-1.5-6.1-5.2-6.3-5.5-.2-.2-1.5-2-1.5-3.8s.9-2.7 1.3-3.1c.3-.4.7-.4 1-.4h.7c.2 0 .5-.1.8.6.3.8 1.1 2.7 1.2 2.9.1.2.2.4 0 .7-.1.2-.2.4-.4.6l-.6.7c-.2.2-.4.4-.2.8.2.4 1 1.6 2.1 2.6 1.4 1.3 2.6 1.7 3 1.9.4.2.6.1.8-.1.2-.3.9-1.1 1.2-1.5.2-.4.5-.3.8-.2.3.1 2.2 1 2.6 1.2.4.2.6.3.7.4.1.2.1.9-.2 1.8Z'/%3E%3C/svg%3E")} .ic-mail{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23E8461C' d='M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Zm9 7.2 8-4.6V6.7l-8 4.6-8-4.6v1L12 12.2Z'/%3E%3C/svg%3E")} .ic-chat{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23E8461C' d='M12 3C6.9 3 2.8 6.4 2.8 10.6c0 2.3 1.2 4.4 3.2 5.8-.1 1-.6 2.3-1.6 3.4 1.9-.2 3.6-1 4.8-1.9.9.2 1.8.3 2.8.3 5.1 0 9.2-3.4 9.2-7.6S17.1 3 12 3Z'/%3E%3C/svg%3E")} .loc-card.all .loc-head h4{color:var(--flame)} .loc-map{position:relative} #map{height:620px;border:1px solid var(--rule);background:var(--cream);z-index:1} @media (max-width:960px){#map{height:420px}} .map-fallback{display:none;position:absolute;inset:0;margin:0;max-width:none;padding:26px;background:var(--cream); border:1px solid var(--rule);font-size:.9rem;color:#5C554E;align-items:center;z-index:2} .map-fallback.show{display:flex} .leaflet-container{font-family:"IBM Plex Sans",sans-serif} .pin{display:block;width:26px;height:26px;border-radius:50% 50% 50% 2px;transform:rotate(-45deg); background:var(--flame);border:3px solid #fff;box-shadow:0 3px 8px rgba(0,0,0,.35)} .pin.is-soon{background:#8A8078} .leaflet-popup-content{font-size:.88rem;line-height:1.5;margin:12px 14px} .leaflet-popup-content b{font-family:"Archivo",sans-serif;font-stretch:110%;display:block; margin-bottom:4px;color:var(--ink)} .leaflet-popup-content a{color:#C4360F} /* ---------- forms ---------- */ .quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px} .field{display:flex;flex-direction:column;gap:6px} .field.full{grid-column:1/-1} .field label{font-size:.85rem;font-weight:600;color:#FFE6DA} .field input,.field select,.field textarea{font:inherit;font-size:.95rem;padding:11px 13px; border:1px solid #F5A98F;background:#fff;color:#1F1D1B} .field textarea{min-height:96px;resize:vertical} .quote-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px;margin-top:6px;align-items:center} .hint{font-size:.85rem;color:#FFDCCC;margin:0;max-width:42ch} @media (max-width:700px){.quote-grid{grid-template-columns:1fr}} /* ---------- downloads ---------- */ .dl{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px} @media (max-width:820px){.dl{grid-template-columns:1fr}} .dl a{display:block;border:1px solid var(--rule);background:#fff;padding:20px; text-decoration:none;color:var(--body)} .dl a:hover{border-color:var(--flame)} .dl b{display:block;font-family:"Archivo",sans-serif;font-stretch:110%;color:var(--ink); font-size:1.02rem;margin-bottom:5px} .dl span{font-size:.86rem;color:#5C554E} /* ---------- footer ---------- */ .foot{background:var(--ink);color:#CFC8C1;padding-block:clamp(42px,6vw,64px);font-size:.93rem} .foot h3{color:#fff} .foot a{color:#fff} .foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px} .foot-grid ul{list-style:none;padding:0;margin:14px 0 0} .foot-grid li{padding:5px 0} .foot .wordmark{width:190px} .foot .wordmark .wm-b{fill:#fff} .foot-lockup{display:flex;align-items:center;gap:14px} .foot-lockup img{width:62px;height:62px} .foot-social{display:flex;gap:10px;margin-top:18px} .legal{border-top:1px solid #2B2622;margin-top:34px;padding-top:18px;font-size:.81rem; color:#8B837B;display:flex;flex-wrap:wrap;gap:6px 22px} @media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}} @media (max-width:560px){.foot-grid{grid-template-columns:1fr}} /* ---------- live chat ---------- */ .chat-launch{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;align-items:center;gap:9px; background:var(--flame);color:#fff;border:0;padding:13px 19px;font-family:"Archivo",sans-serif; font-weight:700;font-stretch:112%;font-size:.94rem;cursor:pointer;box-shadow:0 6px 22px rgba(0,0,0,.28)} .chat-launch:hover{background:#C4360F} .chat-launch svg{width:19px;height:19px;fill:currentColor} .chat-panel{position:fixed;right:18px;bottom:74px;z-index:60;width:min(324px,calc(100vw - 36px)); background:#fff;border:1px solid var(--ink);box-shadow:0 14px 40px rgba(0,0,0,.22);display:none} .chat-panel.open{display:block} .chat-head{background:var(--flame);color:#fff;padding:15px 18px;position:relative} .chat-head strong{font-family:"Archivo",sans-serif;font-stretch:112%;display:block;font-size:1.02rem} .chat-head span{font-size:.82rem;color:#FFDCCC} .chat-body{padding:14px 18px 18px} .chat-body a{display:flex;gap:12px;align-items:flex-start;padding:12px 0; border-bottom:1px solid var(--rule);text-decoration:none;color:#403B36} .chat-body a:last-child{border-bottom:0} .chat-body svg{width:20px;height:20px;fill:#6E655D;margin-top:2px;flex:none} .chat-body a:hover svg{fill:var(--flame)} .chat-body b{display:block;color:#000;font-weight:600;font-size:.94rem} .chat-body em{font-style:normal;font-size:.82rem;color:#6E655D} .chat-close{position:absolute;right:12px;top:12px;background:none;border:0;color:#fff; font-size:1.25rem;cursor:pointer;line-height:1} @media (max-width:640px){ .chat-launch{padding:0;width:52px;height:52px;border-radius:50%;justify-content:center;right:14px;bottom:14px} .chat-launch .lbl{position:absolute;left:-9999px} .chat-launch svg{width:22px;height:22px} .chat-panel{bottom:76px;right:14px} } /* ---------- product pictures ------------------------------------------- */ /* Cable tiles and thumbnails. Images come from the Wix media library the current site already uses, so they are requested at a single consistent size rather than at the mixed crops the old pages served. */ .cards--pic .card{display:flex;flex-direction:column} .card-pic{width:100%;height:132px;object-fit:contain;object-position:center; background:#fff;border-radius:8px;padding:10px;margin:-4px 0 14px; border:1px solid var(--rule, #E6D9CC)} table td.pic{width:168px;padding:5px 8px 5px 10px} table td.pic img{width:40px;height:40px;object-fit:contain;display:block} /* Cross-section beside the cut-away, the same pairing the cable types flyout uses. The column costs the description roughly 110px; below 1080 the cut-away is dropped and the cross-section alone carries the row, and below 720 the whole column goes, as it did before. */ .pic-pair{display:flex;align-items:center;gap:8px} .pic-pair .pic-x{width:34px;height:34px;flex:none} .pic-pair .pic-h{width:auto;height:30px;max-width:118px;object-fit:contain} tbody tr:hover .pic-pair img{opacity:1} @media (max-width:1080px){ table td.pic{width:54px;padding:4px 0 4px 10px} .pic-pair .pic-h{display:none} .pic-pair .pic-x{width:40px;height:40px} } @media (max-width:720px){table td.pic{display:none}} /* ---------- case studies ------------------------------------------------ */ /* Placeholders, deliberately obvious: the case studies page on the current site is empty, so there is nothing to carry over and nothing is invented. */ .cards--case .card--empty{border:1.5px dashed var(--rule, #E6D9CC);background:transparent} .cards--case .card--empty h4{color:var(--grey, #6E655D)} .cards--case .card--empty::before{content:"To add";display:inline-block; font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700; color:#fff;background:var(--grey, #6E655D);border-radius:3px;padding:2px 7px;margin-bottom:10px} /* ---------- a tile that is a link ---------------------------------------- */ .card--link{display:flex;flex-direction:column;text-decoration:none;color:inherit; transition:border-color .16s ease, transform .16s ease} .card--link:hover{border-color:var(--flame, #E8461C);transform:translateY(-2px)} .card--link h4{margin-bottom:6px} .card-go{margin-top:auto;padding-top:12px;font-size:.78rem;font-weight:600; color:var(--flame, #E8461C);display:inline-flex;align-items:center;gap:6px} .card-go::after{content:"→";font-size:.95rem;line-height:1} /* ---------- coming soon -------------------------------------------------- */ /* Sits in the flow rather than over it, so it reads as part of the page. */ .soon-band{display:flex;align-items:center;justify-content:space-between;gap:24px; flex-wrap:wrap;margin:0 0 22px;padding:18px 22px;border-radius:12px; background:linear-gradient(100deg,#FDF2E9 0%,#FFF9F4 62%,#FFFFFF 100%); border:1px solid var(--rule, #E6D9CC);border-left:4px solid var(--flame, #E8461C)} .soon-band b{display:block;font-family:"Archivo",sans-serif;font-size:1.02rem; color:var(--ink, #111);margin:8px 0 2px} .soon-band p{margin:0;max-width:62ch;font-size:.9rem;color:var(--grey, #6E655D)} .soon-tag{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:#fff;background:var(--flame, #E8461C); border-radius:3px;padding:3px 9px} .soon-band .btn{flex:none} @media (max-width:720px){.soon-band{flex-direction:column;align-items:flex-start}} /* ---------- case study tiles + lightbox --------------------------------- */ /* The study is a two-page LinkedIn carousel supplied as flat artwork at 800x576 a page. Rebuilding it as HTML was the other option; shown as tiles it stays exactly as designed, and the lightbox opens each page at its full 800px, which is the only size its body text is legible at. */ .cs-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:22px 0 0} .cs-head b{font-family:"Archivo",sans-serif;font-size:1.18rem;color:var(--ink, #0E0E0E)} .cs-tag{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:#fff;background:var(--flame, #E8461C); border-radius:3px;padding:3px 9px} .cs-tiles{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:14px 0 22px} @media (max-width:720px){.cs-tiles{grid-template-columns:1fr}} .cs-tile{display:block;padding:0;border:1px solid var(--rule, #E6D9CC); background:#fff;cursor:zoom-in;overflow:hidden;border-radius:10px; font:inherit;color:inherit;text-align:left;width:100%} .cs-tile img{display:block;width:100%;height:auto} .cs-tile:hover,.cs-tile:focus-visible{border-color:var(--flame, #E8461C); box-shadow:0 8px 26px rgba(42,37,34,.14);outline:none} /* The label sits under the artwork rather than over it: every corner of the supplied pages is already occupied -- logo, button, carousel dots, chevron -- so an overlay badge landed on top of the design. */ .cs-zoom{display:flex;align-items:center;justify-content:space-between; padding:9px 13px;border-top:1px solid var(--rule, #E6D9CC); font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--ink, #0E0E0E)} .cs-zoom::after{content:"\2922";font-size:1rem;line-height:1;font-weight:400; letter-spacing:0;color:var(--flame, #E8461C)} .cs-tile:hover .cs-zoom{background:#FDF2E9} .lightbox{position:fixed;inset:0;z-index:120;background:rgba(10,9,8,.90); display:flex;align-items:center;justify-content:center;padding:28px} .lightbox[hidden]{display:none} .lightbox figure{margin:0;max-width:100%;max-height:100%;overflow:auto; -webkit-overflow-scrolling:touch} /* 800px is the supplied artwork's own width; going past it only blurs the body text that the lightbox exists to make readable. */ .lightbox img{display:block;width:800px;max-width:100%;height:auto; background:#fff;border-radius:6px} .lightbox figcaption{margin-top:10px;color:#E8E1DA;font-size:.84rem;text-align:center} .lightbox-close{position:absolute;top:14px;right:18px;width:42px;height:42px; border:1px solid rgba(255,255,255,.34);background:rgba(255,255,255,.08); color:#fff;font-size:1.5rem;line-height:1;border-radius:50%;cursor:pointer} .lightbox-close:hover{background:#fff;color:var(--ink, #0E0E0E)} /* Below this the page would be scaled down far enough to lose its body text, so the image holds its width and the frame pans instead. */ @media (max-width:860px){.lightbox{padding:12px}.lightbox img{width:780px;max-width:none}} body.no-scroll{overflow:hidden} /* ---------- detail pages: cable, standard, industry ---------------------- */ /* Narrower right-hand column than the even .two split: the specification is a reference panel beside the prose, not a second column of equal weight. */ .two--spec{grid-template-columns:minmax(0,1.32fr) minmax(300px,.88fr)} /* minmax(0,1fr), not 1fr. A bare 1fr is minmax(auto,1fr), and auto means the item's min-content: the specification table will not go below about 620px, so on a phone the track was sized to the table and pushed the whole page 250px wider than the screen. Letting the track go to zero and giving the table its own scroller keeps the page the width of the phone. */ @media (max-width:900px){.two--spec{grid-template-columns:minmax(0,1fr)}} .ref-line{font-family:"Archivo",sans-serif;font-weight:700;font-stretch:110%; font-size:1rem;color:var(--flame);letter-spacing:.01em;margin:8px 0 0} .two--spec h3{margin-top:28px;padding-top:14px;border-top:1px solid var(--rule)} /* tick list — the house bullet, flame coloured, hanging outside the measure */ .ticks{list-style:none;margin:14px 0 0;padding:0;max-width:var(--measure)} .ticks li{position:relative;padding:5px 0 5px 26px;font-size:.95rem} .ticks li::before{content:"";position:absolute;left:4px;top:.86em;width:6px;height:11px; border-right:2.5px solid var(--flame);border-bottom:2.5px solid var(--flame); transform:translateY(-50%) rotate(45deg)} .spec-aside{position:sticky;top:124px;align-self:start;min-width:0} @media (max-width:900px){ .spec-aside{position:static} /* the table keeps its real column widths and scrolls sideways inside the column rather than dragging the page with it. min-width:0 is the point of this rule: the global table rule sets min-width:620px, which is what was forcing the grid track -- and the page -- wider than the phone. */ .spec-aside .spec-table{display:block;overflow-x:auto;min-width:0; -webkit-overflow-scrolling:touch} } .cad-figure{margin:0 0 20px;padding:18px;background:var(--cream); border:1px solid var(--rule);border-top:4px solid var(--flame)} .cad-figure img{width:100%;max-width:260px;margin-inline:auto} .cad-figure figcaption{margin-top:10px;text-align:center;font-size:.76rem; letter-spacing:.07em;text-transform:uppercase;color:#6E655D} .spec-table{width:100%;border-collapse:collapse;font-size:.88rem; border:1px solid var(--rule)} .spec-table caption{caption-side:top;text-align:left;background:var(--ink);color:#fff; font-family:"Archivo",sans-serif;font-stretch:110%;font-weight:700;font-size:.8rem; letter-spacing:.06em;text-transform:uppercase;padding:9px 14px} .spec-table th[scope="row"]{width:38%;vertical-align:top} .spec-table td{padding:9px 14px;border-top:1px solid var(--rule);vertical-align:top} .spec-aside .btn{margin-top:18px;width:100%;justify-content:center} /* the research caveat — visible, but clearly a note to Riz, not to a customer */ .note--check{margin-top:22px;max-width:78ch;padding:14px 18px;font-size:.84rem; line-height:1.55;color:#5C554E;background:#FFF8EE; border:1px dashed #D9B98C;border-left:4px solid var(--amber)} .note--check b{color:#8A5A12} /* ---------- Exclusive Offers: picked out in the menu bar ---------- */ .nav a.nav-feature{font-weight:700;color:var(--flame)} .nav a.nav-feature:hover{color:#fff;background:var(--flame)} .nav a.nav-feature[aria-current="page"]{color:#fff;background:var(--flame)} @media (max-width:1340px){ .nav a.nav-feature{color:var(--flame)} .nav a.nav-feature:hover{background:none;color:#B8320C} } /* ---------- hero: the still slide keeps the flame wash -------------------- The films play in their own colour. The one still in the reel is the server-room shot, and that one carries the orange phase-out on the left the way the original banner did. */ .hero-flame{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0; transition:opacity .8s ease;background: linear-gradient(94deg,rgba(196,54,15,.92) 0 28%,rgba(232,70,28,.70) 46%, rgba(196,54,15,.28) 72%,rgba(196,54,15,.12) 100%)} .hero--still .hero-flame{opacity:1} .hero--still .hero-still{animation-duration:38s} /* ---------- left-hand cable types flyout --------------------------------- A tab pinned to the left edge. Hover or focus opens it; it is a