/* ==========================================================
   Homepage hero: "Inside the cable"
   Four cables stripped back layer by layer (markup in index.html,
   behaviour in js/inside-cable.js).
   ========================================================== */
.ic{position:relative;width:100%;max-width:400px;aspect-ratio:1;justify-self:center}
.ic svg{width:100%;height:100%;display:block;overflow:visible;font-family:Inter,system-ui,sans-serif}
.ic-scene{transition:opacity .35s ease}
.ic-scene.is-out{opacity:0}
.ic-seg{animation:ic-wipe .6s cubic-bezier(.6,0,.2,1) both}
@keyframes ic-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.ic-fade{animation:ic-fade .5s ease-out both}
@keyframes ic-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ic-labels{font-size:11px;font-weight:700;letter-spacing:1px;fill:#0F172A}
.ic-sub{font-size:10px;font-weight:500;fill:#64748B}
.ic-family{font-size:10.5px;font-weight:700;letter-spacing:1.8px;fill:#1A9D77}
.ic-name{font-size:15px;font-weight:700;fill:#0F172A}
.ic-print{font-family:ui-monospace,Menlo,monospace;font-size:7.5px;letter-spacing:1.2px;fill:#fff;opacity:.55}
.ic-dots{position:absolute;left:0;right:0;bottom:6%;display:flex;justify-content:center;gap:6px}
.ic-dots button{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px;border-radius:50px;border:1px solid #E2E8F0;background:#fff;color:#475569;font:600 12px Inter,system-ui,sans-serif;cursor:pointer}
.ic-dots button::before{content:"";width:6px;height:6px;border-radius:50%;background:#CBD5E1}
.ic-dots button[aria-pressed="true"]{border-color:#1A9D77;color:#0F172A}
.ic-dots button[aria-pressed="true"]::before{background:#1A9D77}
.ic-dots button:focus-visible{outline:2px solid #1A9D77;outline-offset:2px}
@media (prefers-reduced-motion: reduce){.ic-seg,.ic-fade{animation:none}.ic-scene{transition:none}}

/* sits in the existing .hero-visual slot */
.hero-visual .ic { max-width: 440px; }
@media (max-width: 1024px) {
    .hero-visual:has(.ic) { opacity: 1; }
    .hero-visual .ic { max-width: 360px; }
}

/* soft brand-green circle behind the animation (no border, nothing cropped) */
.hero-visual .ic { isolation: isolate; }
.hero-visual .ic::before {
    content: "";
    position: absolute;
    inset: 4%;
    border-radius: 50%;
    background: radial-gradient(circle, #E3F4EE 0%, rgba(227, 244, 238, 0.55) 55%, rgba(227, 244, 238, 0) 71%);
    z-index: -1;
    pointer-events: none;
}

/* narrow phones: let the cable buttons wrap instead of running off-screen */
@media (max-width: 400px) {
    .ic-dots { flex-wrap: wrap; row-gap: 6px; }
    .ic-dots button { min-height: 30px; padding: 0 9px; font-size: 11.5px; }
}
@media (max-width: 600px) {
    .ic-dots button { min-height: 38px; padding: 0 12px; font-size: 12.5px; }
}

/* Phones and tablets: buttons sit below the drawing instead of over its bottom labels */
@media (max-width: 768px) {
    .hero-visual .ic,
    .ic { aspect-ratio: auto; }
    .ic-holder { aspect-ratio: 1 / 0.82; overflow: hidden; }
    .ic-holder svg { width: 100%; height: auto; margin-top: -4%; }
    .ic-dots { position: static; margin-top: 4px; }
}
@media (max-width: 600px) {
    .ic-dots { gap: 5px; }
    .ic-dots button { padding: 0 9px; gap: 5px; font-size: 12px; }
}
@media (max-width: 380px) {
    .ic-dots button::before { display: none; }
    .ic-dots button { padding: 0 11px; }
}