/* seomelbourne.com — hub family stylesheet: declarations shared by every hub page (generated 2026-09-02, tranche 5 task 2). Chrome (nav/footer/modal) lives in chrome.css. */
*{box-sizing:border-box;margin:0;padding:0}
*::before{box-sizing:border-box;margin:0;padding:0}
*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.7;-webkit-font-smoothing:antialiased}
body::after{content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:0.015;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.ambient{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.ambient-orb{position:absolute;border-radius:50%;filter:blur(120px)}
.ambient-orb:nth-child(2){width:500px;height:500px;background:radial-gradient(circle, rgba(59,130,246,0.06), transparent 70%);top:40%;right:-200px;animation:drift2 35s ease-in-out infinite}
.container{max-width:1200px;margin:0 auto;padding:0 2rem}
.post-hero{position:relative;z-index:2;padding:9rem 2rem 2rem}
.post-hero-inner{max-width:780px;margin:0 auto}
.breadcrumb{font-size:0.85rem;color:var(--text-dim);margin-bottom:1.5rem}
.breadcrumb a{color:var(--text-muted);text-decoration:none;transition:color 0.3s}
.breadcrumb a:hover{color:var(--primary)}
.breadcrumb span{margin:0 0.4rem}
.post-hero h1{font-family:var(--font-display);font-size:clamp(2rem, 5vw, 2.8rem);font-weight:800;line-height:1.12;letter-spacing:-0.025em;margin-bottom:1rem}
.post-meta{display:flex;gap:1.5rem;flex-wrap:wrap;font-size:0.85rem;color:var(--text-dim);margin-bottom:2rem}
.post-meta span{display:flex;align-items:center;gap:0.4rem}
.post-featured-svg{max-width:780px;margin:0 auto 2rem;padding:0 2rem}
.post-featured-svg svg{width:100%;height:auto;border-radius:20px}
.post-tldr{max-width:780px;margin:0 auto 2.5rem;padding:0 2rem}
.tldr-box::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg, var(--primary), var(--accent));border-radius:16px 16px 0 0}
.tldr-label{font-family:var(--font-display);font-size:0.7rem;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:0.75rem;display:flex;align-items:center;gap:0.5rem}
.tldr-label svg{width:16px;height:16px}
.tldr-text{font-size:0.95rem;color:var(--text-muted);line-height:1.7}
.article{max-width:780px;margin:0 auto;padding:0 2rem 3rem;position:relative;z-index:2}
.article p{margin-bottom:1.5rem;color:rgba(255,255,255,0.8);font-size:1.05rem;line-height:1.8}
.article h2{font-family:var(--font-display);margin:2.5rem 0 1rem;font-size:1.5rem;font-weight:700;letter-spacing:-0.02em}
.article h3{font-family:var(--font-display);margin:1.5rem 0 0.5rem;font-size:1.05rem;font-weight:600}
.article ul{margin:1rem 0 1.5rem 1.5rem;color:rgba(255,255,255,0.7)}
.article ol{margin:1rem 0 1.5rem 1.5rem;color:rgba(255,255,255,0.7)}
.article li{margin-bottom:0.5rem;line-height:1.7}
.article a{color:var(--primary);text-decoration:underline;text-underline-offset:3px}
.article img{max-width:100%;border-radius:12px;margin:1.5rem 0}
.article code{background:rgba(255,255,255,0.06);padding:0.15rem 0.4rem;border-radius:4px;font-size:0.9em}
.article table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:0.9rem}
.article th{text-align:left;padding:0.75rem 1rem;background:rgba(255,255,255,0.04);border-bottom:1px solid var(--border);font-weight:600}
.article td{padding:0.75rem 1rem;border-bottom:1px solid var(--border);color:var(--text-muted)}
.info-box{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:1.5rem;margin:1.5rem 0}
.info-box h3{margin-top:0;margin-bottom:0.75rem}
.comparison-table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:0.85rem}
.comparison-table th{padding:0.75rem;border-bottom:1px solid var(--border);text-align:left}
.comparison-table td{padding:0.75rem;border-bottom:1px solid var(--border);text-align:left}
.comparison-table th{background:rgba(255,255,255,0.03);font-weight:600}
.cta-box h3{font-family:var(--font-display);margin-bottom:0.5rem}
.cta-box p{color:var(--text-muted);margin-bottom:1rem}
.btn-primary{display:inline-flex;align-items:center;gap:0.5rem;padding:0.75rem 1.5rem;background:var(--primary);color:#000;font-weight:700;border-radius:10px;text-decoration:none;transition:all 0.3s}
.article .btn-primary{color:#000!important;text-decoration:none!important}
.article .btn-primary:hover{color:#000!important;text-decoration:none!important}
.article .post-cta-btn{color:#000!important;text-decoration:none!important}
.article .post-cta-btn:hover{color:#000!important;text-decoration:none!important}
.post-faq{max-width:780px;margin:0 auto;padding:0 2rem 3rem}
.faq-heading{font-family:var(--font-display);font-size:1.5rem;font-weight:700;margin-bottom:1.5rem;display:flex;align-items:center;gap:0.75rem}
.faq-heading::before{content:'';width:4px;height:28px;background:linear-gradient(180deg, var(--primary), var(--accent));border-radius:2px}
.faq-item{border:1px solid var(--border);border-radius:14px;margin-bottom:0.75rem;overflow:hidden;transition:border-color 0.3s}
.faq-item:hover{border-color:rgba(255,255,255,0.1)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.15rem 1.5rem;background:transparent;border:none;color:var(--text);font-family:var(--font-body);font-size:0.95rem;font-weight:600;cursor:pointer;text-align:left}
.faq-q svg{color:var(--text-dim);transition:transform 0.3s}
.faq-item.open .faq-q svg{transform:rotate(180deg);color:var(--primary)}
.faq-a{max-height:0;overflow:hidden;transition:max-height 0.4s ease, padding 0.3s ease}
.faq-a p{font-size:0.9rem;color:var(--text-muted);line-height:1.7;margin:0}
.post-related{max-width:780px;margin:0 auto;padding:0 2rem 3rem}
.related-heading{font-family:var(--font-display);font-size:1.3rem;font-weight:700;margin-bottom:1.25rem}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));gap:1rem}
.related-card{display:flex;flex-direction:column;gap:0.5rem;padding:1.25rem;background:var(--surface);border:1px solid var(--border);border-radius:14px;text-decoration:none;transition:all 0.3s}
.related-tag{display:inline-block;padding:0.15rem 0.5rem;background:color-mix(in srgb, var(--tag-color) 10%, transparent);color:var(--tag-color);font-size:0.65rem;font-weight:600;border-radius:4px;text-transform:uppercase;letter-spacing:0.04em;width:fit-content}
.related-card h3{font-family:var(--font-display);font-size:0.9rem;font-weight:700;line-height:1.3;color:var(--text)}
.related-card:hover h3{color:var(--primary)}
.related-meta{font-size:0.75rem;color:var(--text-dim)}
.post-cta{max-width:780px;margin:0 auto;padding:0 2rem 2rem}
.post-cta-box h2{font-family:var(--font-display);font-size:1.5rem;font-weight:800;margin-bottom:0.75rem}
.post-cta-box p{color:var(--text-muted);max-width:450px;margin:0 auto 1.5rem}
.post-cta-btn{display:inline-flex;align-items:center;gap:0.5rem;padding:0.9rem 2rem;background:var(--primary);color:#000;font-weight:700;font-size:0.95rem;border-radius:12px;text-decoration:none;transition:all 0.3s}
@media (max-width: 768px){.post-hero{padding:8rem 1.5rem 2rem}
.article{padding-left:1.5rem;padding-right:1.5rem}
.post-tldr{padding-left:1.5rem;padding-right:1.5rem}
.post-faq{padding-left:1.5rem;padding-right:1.5rem}
.post-related{padding-left:1.5rem;padding-right:1.5rem}
.post-cta{padding-left:1.5rem;padding-right:1.5rem}
.post-featured-svg{padding-left:1.5rem;padding-right:1.5rem}
.related-grid{grid-template-columns:1fr}}
.faq-q svg{width:20px!important;height:20px!important;min-width:20px!important;max-width:20px!important;flex-shrink:0!important}
div.faq-q svg{width:20px!important;height:20px!important;min-width:20px!important;max-width:20px!important;flex-shrink:0!important}
.faq-wrapper .faq-q svg{width:20px!important;height:20px!important;min-width:20px!important;max-width:20px!important;flex-shrink:0!important}
@media(max-width:1024px){*{animation:none!important;animation-delay:0s!important;animation-duration:0s!important;transition:none!important;transition-delay:0s!important;transition-duration:0s!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;filter:none!important;box-shadow:none!important;will-change:auto!important}
*::before{animation:none!important;animation-delay:0s!important;animation-duration:0s!important;transition:none!important;transition-delay:0s!important;transition-duration:0s!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;filter:none!important;box-shadow:none!important;will-change:auto!important}
*::after{animation:none!important;animation-delay:0s!important;animation-duration:0s!important;transition:none!important;transition-delay:0s!important;transition-duration:0s!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;filter:none!important;box-shadow:none!important;will-change:auto!important}
.btn-primary::before{display:none!important}
.btn-primary .btn-glow{display:none!important}
.btn-primary:active .btn-surface{transform:translateY(0)!important;box-shadow:none!important}
.btn-secondary .btn-surface{box-shadow:none!important;transform:translateY(0)!important}
canvas{display:none!important}
.client-logo-item img{filter:brightness(0) invert(1)!important}
[class*="orb"]{display:none!important}
[class*="glow"]{display:none!important}
[class*="ambient"]{display:none!important}
[class*="particle"]{display:none!important}
svg animate{display:none!important}
svg animateTransform{display:none!important}
svg animateMotion{display:none!important}

.trust-section{content-visibility:auto;contain-intrinsic-size:auto 500px}
.services-section{content-visibility:auto;contain-intrinsic-size:auto 500px}
.guides-section{content-visibility:auto;contain-intrinsic-size:auto 500px}
.case-studies-section{content-visibility:auto;contain-intrinsic-size:auto 500px}
.faq-section{content-visibility:auto;contain-intrinsic-size:auto 500px}
.harbour-cta-section{content-visibility:auto;contain-intrinsic-size:auto 500px}
.process-section{content-visibility:auto;contain-intrinsic-size:auto 500px}}
p a{color:#00ff6a;text-decoration:underline;text-decoration-color:rgba(0,255,106,0.3);text-underline-offset:3px;transition:color 0.2s,text-decoration-color 0.2s}
.faq-a a{color:#00ff6a;text-decoration:underline;text-decoration-color:rgba(0,255,106,0.3);text-underline-offset:3px;transition:color 0.2s,text-decoration-color 0.2s}
td a{color:#00ff6a;text-decoration:underline;text-decoration-color:rgba(0,255,106,0.3);text-underline-offset:3px;transition:color 0.2s,text-decoration-color 0.2s}
dd a{color:#00ff6a;text-decoration:underline;text-decoration-color:rgba(0,255,106,0.3);text-underline-offset:3px;transition:color 0.2s,text-decoration-color 0.2s}
article li a{color:#00ff6a;text-decoration:underline;text-decoration-color:rgba(0,255,106,0.3);text-underline-offset:3px;transition:color 0.2s,text-decoration-color 0.2s}
section li a:not(.nav-link){color:#00ff6a;text-decoration:underline;text-decoration-color:rgba(0,255,106,0.3);text-underline-offset:3px;transition:color 0.2s,text-decoration-color 0.2s}
p a:hover{color:#fff;text-decoration-color:#00ff6a}
.faq-a a:hover{color:#fff;text-decoration-color:#00ff6a}
td a:hover{color:#fff;text-decoration-color:#00ff6a}
dd a:hover{color:#fff;text-decoration-color:#00ff6a}
article li a:hover{color:#fff;text-decoration-color:#00ff6a}
section li a:not(.nav-link):hover{color:#fff;text-decoration-color:#00ff6a}
@media(max-width:600px){.inline-cta{flex-direction:column!important;text-align:center!important;padding:1.5rem!important}
.inline-cta a{width:100%;justify-content:center}}
html{overflow-x:hidden!important}
body{overflow-x:hidden!important;max-width:100vw!important}
@media(max-width:768px){*{max-width:100vw;box-sizing:border-box}
img{max-width:100%!important;height:auto!important}
video{max-width:100%!important;height:auto!important}
iframe{max-width:100%!important;height:auto!important}
embed{max-width:100%!important;height:auto!important}
pre{overflow-x:auto;max-width:100%}
code{overflow-x:auto;max-width:100%}}
@keyframes drift1{0%, 100% { transform: translate(0, 0); } 50% { transform: translate(40px, 60px); }}
@keyframes drift2{0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-50px, 40px); }}
@keyframes drift3{0%, 100% { transform: translate(0, 0); } 50% { transform: translate(60px, -40px); }}
@keyframes btnPulse{0%,100%{opacity:0.3} 50%{opacity:0.6}}