/*
Theme Name: Northstar Agency
Theme URI: https://example.com/
Author: Your Agency
Description: Bold editorial agency theme. Giant type, marquee, stats, numbered services, built-in contact form and SEO. No plugins required.
Version: 2.1.0
Requires at least: 6.3
Tested up to: 6.8
Requires PHP: 7.4
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: northstar-agency
*/

:root{--accent:#d7ff1f;--on-accent:#0b0b0c;--ink:#0b0b0c;--paper:#f4f1ea;--white:#fff;--muted:#5c5b57;--line:#0b0b0c;--max:1240px;
--hdr-top:0px;--font:"Helvetica Neue","Arial Nova",Arial,"Segoe UI",system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
[id]{scroll-margin-top:calc(var(--hdr-top) + 84px)}
body.admin-bar{--hdr-top:32px}
@media (max-width:782px){body.admin-bar{--hdr-top:46px}}
@media (max-width:600px){body.admin-bar{--hdr-top:0px}}
body{margin:0;font:17px/1.6 var(--font);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.nav-open{overflow:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-weight:800;line-height:.95;letter-spacing:-.045em;margin:0 0 .5em;text-transform:uppercase}
h1{font-size:clamp(2.4rem,7vw,5rem)}
h2{font-size:clamp(2rem,5vw,3.6rem)}
h3{font-size:1.3rem}
em{font-style:normal;-webkit-box-decoration-break:clone;box-decoration-break:clone}
p{margin:0 0 1em}
.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 22px}
.container.narrow{max-width:780px}
.center{text-align:center}
.muted{color:var(--muted)}
.screen-reader-text,.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip-link{position:absolute;left:-999px;top:0;background:#000;color:#fff;padding:10px 16px;z-index:300}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.dark :focus-visible,.hero :focus-visible,.site-footer :focus-visible{outline-color:var(--accent)}
.eyebrow{font-size:.85rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px}

/* Buttons */
.btn{display:inline-block;padding:.95em 1.7em;font:700 .95rem/1.1 var(--font);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;border:2px solid var(--ink);cursor:pointer;background:var(--paper);color:var(--ink);box-shadow:4px 4px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-outline{background:transparent}
.hero .btn,.dark .btn{box-shadow:4px 4px 0 var(--accent)}
.hero .btn:hover,.dark .btn:hover{box-shadow:1px 1px 0 var(--accent)}
.btn-ghost{background:transparent;color:#fff;border-color:#fff}

/* Header */
.site-header{position:sticky;top:var(--hdr-top);z-index:100;background:var(--paper);border-bottom:2px solid var(--ink)}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:68px;gap:16px}
.brand{min-width:0}
.brand-text{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;font-weight:800;font-size:1.35rem;text-decoration:none;letter-spacing:-.04em;text-transform:uppercase}
.brand-dot{color:var(--ink);background:var(--accent);padding:0 .12em;margin-left:2px}
.custom-logo{max-height:42px;width:auto}
.primary-nav{display:flex;align-items:center;gap:28px}
.primary-nav .menu{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.primary-nav .menu a{text-decoration:none;font-weight:600;text-transform:uppercase;font-size:.85rem;letter-spacing:.05em;padding:4px 0;border-bottom:2px solid transparent}
.primary-nav .menu a:hover,.primary-nav .current-menu-item>a{border-bottom-color:var(--ink)}
.primary-nav{flex-shrink:0}
.primary-nav .sub-menu{display:none}
.nav-cta{padding:.7em 1.2em}
.nav-toggle{display:none;background:none;border:0;padding:14px 8px;cursor:pointer}
.bars,.bars::before,.bars::after{display:block;width:26px;height:3px;background:var(--ink);position:relative;transition:.2s}
.bars::before,.bars::after{content:"";position:absolute;left:0}
.bars::before{top:-8px}.bars::after{top:8px}
.nav-open .bars{background:transparent}
.nav-open .bars::before{top:0;transform:rotate(45deg)}
.nav-open .bars::after{top:0;transform:rotate(-45deg)}

/* Hero */
.hero{position:relative;overflow:hidden;background:var(--ink);color:#fff;padding:clamp(56px,10vw,130px) 0 clamp(64px,10vw,120px)}
.hero-inner{position:relative;z-index:2}
.hero-title{font-size:clamp(2.6rem,9vw,8rem);line-height:.92;letter-spacing:-.055em;max-width:15ch;margin:0 0 .45em;overflow-wrap:break-word}
.hero-title em{color:var(--accent)}
.badge{display:inline-flex;align-items:center;gap:10px;border:2px solid #fff;padding:7px 16px;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;margin-bottom:28px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--accent);animation:pulse 1.6s infinite}
.hero-row{display:flex;gap:40px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
.lead{font-size:clamp(1.05rem,1.8vw,1.35rem);max-width:46ch;color:#d9d7d0;margin:0}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap}
.hero-shape{position:absolute;border-radius:50%;z-index:1}
.hero-shape.s1{width:min(46vw,560px);aspect-ratio:1;background:#17171a;right:-8vw;top:-6vw;animation:float 9s ease-in-out infinite}
.hero-shape.s2{width:min(34vw,420px);aspect-ratio:1;border:2px solid var(--accent);opacity:.45;right:6vw;top:4vw;animation:float 11s ease-in-out infinite reverse}
@keyframes float{50%{transform:translateY(24px)}}
@keyframes pulse{50%{opacity:.3}}

/* Marquee */
.marquee{background:var(--accent);color:var(--on-accent);border-block:2px solid var(--ink);overflow:hidden;white-space:nowrap}
.marquee-track{display:inline-flex;align-items:center;padding:16px 0;animation:marquee 38s linear infinite;will-change:transform}
.marquee span{font-size:clamp(1.3rem,3vw,2.2rem);font-weight:800;text-transform:uppercase;letter-spacing:-.03em}
.marquee i{font-style:normal;font-size:1.4rem;padding:0 28px}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Stats */
.stats{border-bottom:2px solid var(--ink)}
.stats-grid{display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
.stat{padding:36px 24px;border-left:2px solid var(--ink);display:flex;flex-direction:column;gap:4px}
.stat:first-child{border-left:0;padding-left:0}
.stat-num{font-size:clamp(2.4rem,5.5vw,4.4rem);font-weight:800;letter-spacing:-.05em;line-height:1}
.stat-label{font-size:.85rem;text-transform:uppercase;letter-spacing:.07em;font-weight:600}

/* Sections */
.section{padding:clamp(60px,9vw,120px) 0}
.section-title{margin-bottom:.7em}
.section-title.left{text-align:left}
.section-title em{background:var(--accent);color:var(--on-accent);padding:0 .12em}
.dark{background:var(--ink);color:#fff}
.dark .section-title em{background:var(--accent)}

/* Services list */
.svc-list{list-style:none;margin:40px 0 0;padding:0;border-top:2px solid var(--ink)}
.svc-row{display:grid;grid-template-columns:70px 1.1fr 1.4fr 40px;gap:24px;align-items:center;padding:28px 12px;border-bottom:2px solid var(--ink);text-decoration:none;transition:background .2s,padding .25s}
.svc-row:hover{background:var(--accent);color:var(--on-accent);padding-left:26px}
.svc-num{font-weight:700;font-size:.95rem}
.svc-title{font-size:clamp(1.4rem,3.2vw,2.5rem);font-weight:800;letter-spacing:-.04em;text-transform:uppercase;line-height:1}
.svc-desc{color:var(--muted)}
.svc-row:hover .svc-desc{color:inherit}
.svc-arrow{font-size:1.8rem;font-weight:700;transition:transform .2s}
.svc-row:hover .svc-arrow{transform:rotate(45deg)}

/* Process */
.steps{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:2px solid #fff}
.steps li{padding:30px 24px 30px 0;display:flex;flex-direction:column;gap:8px}
.steps li+li{padding-left:24px;border-left:2px solid #333}
.step-n{font-size:clamp(3.4rem,7vw,6rem);font-weight:800;line-height:1;color:transparent;-webkit-text-stroke:2px var(--accent);letter-spacing:-.05em}
.steps strong{font-size:1.25rem;text-transform:uppercase;letter-spacing:-.02em}
.steps li>span:last-child{color:#c4c2bb}

/* Work */
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;margin:40px 0}
.work{text-decoration:none;display:block}
.work-img{display:block;aspect-ratio:4/3;overflow:hidden;border:2px solid var(--ink);background:var(--accent)}
.work-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.work:hover .work-img img{transform:scale(1.06)}
.work-meta{display:flex;justify-content:space-between;align-items:center;padding-top:14px;font-size:1.25rem;text-transform:uppercase;letter-spacing:-.02em}
.work-meta span{font-size:1.6rem;transition:transform .2s}
.work:hover .work-meta span{transform:rotate(45deg)}

/* Quote */
.quote-sec{background:#fff;border-block:2px solid var(--ink)}
.quote-sec blockquote{margin:0;padding:0;border:0}
.quote-sec blockquote::before{content:"\201C";display:block;font-size:6rem;font-weight:800;line-height:.6;margin-bottom:.15em}
.quote-sec blockquote p{font-size:clamp(1.6rem,4vw,2.8rem);font-weight:800;line-height:1.1;letter-spacing:-.03em}
.quote-sec blockquote cite{font-style:normal;font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:.9rem}

/* Mega CTA */
.mega-cta{display:block;background:var(--accent);color:var(--on-accent);text-decoration:none;padding:clamp(46px,8vw,100px) 0;border-bottom:2px solid var(--ink);overflow:hidden;transition:background .25s,color .25s}
.mega-cta .container{display:block;font-size:clamp(2rem,8vw,7rem);font-weight:800;text-transform:uppercase;letter-spacing:-.055em;line-height:.92}
.mega-cta em{color:var(--on-accent);text-decoration:underline;text-decoration-thickness:.07em;text-underline-offset:.1em;transition:color .25s}
.mega-arrow{display:inline-block;transition:transform .3s}
.mega-cta:hover{background:var(--ink);color:#fff}
.mega-cta:hover em{color:var(--accent)}
.mega-cta:hover .mega-arrow{transform:translate(10px,-10px)}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:start}
.contact-list{list-style:none;padding:0;margin:28px 0 0}
.contact-list li{margin-bottom:10px}
.contact-list strong{display:inline-block;min-width:84px;text-transform:uppercase;font-size:.8rem;letter-spacing:.07em}
.form-card{background:#fff;border:2px solid var(--ink);padding:30px;box-shadow:8px 8px 0 var(--ink)}
.field{margin-bottom:18px}
.field label{display:block;font-weight:700;margin-bottom:6px;font-size:.8rem;text-transform:uppercase;letter-spacing:.07em}
.field input,.field textarea{width:100%;padding:13px 14px;font:inherit;border:2px solid var(--ink);border-radius:0;background:var(--paper);color:var(--ink)}
.field input:focus,.field textarea:focus{outline:none;background:#fff;box-shadow:4px 4px 0 var(--accent)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:.85rem;color:var(--muted);margin:14px 0 0}
.notice{padding:14px 16px;margin-bottom:18px;font-weight:600;border:2px solid var(--ink)}
.notice-ok{background:var(--accent);color:var(--on-accent)}
.notice-err{background:#ffd9d4}

/* Pages & posts */
.site-main{min-height:50vh}
.page-header{padding:56px 0 24px}
.page-header h1{font-size:clamp(2.2rem,6vw,4.6rem)}
.entry{padding-bottom:56px}
.entry-content{font-size:1.08rem}
.entry-content img{margin:1.5em 0;border:2px solid var(--ink)}
.entry-content h2,.entry-content h3{margin-top:1.6em;line-height:1.1}
.entry-content h2{font-size:clamp(1.6rem,3.4vw,2.2rem)}
.entry-content ul,.entry-content ol{padding-left:1.3em;margin:0 0 1em}
.entry-content blockquote{margin:1.6em 0;padding:.2em 0 .2em 1.2em;border-left:6px solid var(--accent);font-size:1.15rem;font-weight:600}
.entry-content blockquote p{margin:0}
.entry-content table{width:100%;border-collapse:collapse;margin:1.4em 0}
.entry-content th,.entry-content td{border:2px solid var(--ink);padding:10px 12px;text-align:left}
.entry-content pre{background:var(--ink);color:#fff;padding:16px;overflow:auto}
.entry-content hr{border:0;border-top:2px solid var(--ink);margin:2em 0}
.entry-content a{text-decoration-thickness:2px;text-underline-offset:3px}
.grid{display:grid;gap:28px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.card{background:#fff;border:2px solid var(--ink);padding:22px;transition:transform .2s,box-shadow .2s}
.card:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--ink)}
.card img{margin-bottom:16px;width:100%;border:2px solid var(--ink)}
.card-title{font-size:1.25rem;line-height:1.05}
.card-title a{text-decoration:none}
.meta{color:var(--muted);font-size:.85rem;text-transform:uppercase;letter-spacing:.06em}
.pagination,.post-navigation{margin:44px 0}
.pagination .nav-links{justify-content:flex-start}
.grid+.pagination{margin-top:48px}
.nav-links{display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between}
.page-numbers{padding:9px 15px;border:2px solid var(--ink);text-decoration:none;font-weight:700}
.page-numbers.current,.page-numbers:hover{background:var(--accent);color:var(--on-accent)}
.search-form{display:flex;gap:8px;margin:20px 0}
.search-form{align-items:stretch}
.search-form label{flex:1;display:block}
.search-field{width:100%;padding:12px;border:2px solid var(--ink);font:inherit;background:#fff;border-radius:0}
.search-submit{padding:12px 20px;border:2px solid var(--ink);background:var(--accent);color:var(--on-accent);font:700 .9rem var(--font);text-transform:uppercase;cursor:pointer;border-radius:0}

/* Footer */
.site-footer{background:var(--ink);color:#c9c7c0;padding:72px 0 0;overflow:hidden}
.site-footer a{color:#fff}
.footer-grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:36px 64px}
.footer-grid>div{min-width:180px}
.footer-grid>div:first-child{flex:1 1 360px}
.footer-lead{text-transform:uppercase;letter-spacing:.07em;font-size:.8rem;font-weight:700;margin-bottom:10px}
.footer-mail{font-size:clamp(1.8rem,4vw,3rem);font-weight:800;text-decoration:none;text-transform:uppercase;letter-spacing:-.045em;color:var(--accent)!important}
.footer-menu,.socials{list-style:none;margin:0;padding:0}
.footer-menu li,.socials li{margin-bottom:8px}
.wordmark{max-width:var(--max);margin:56px auto 0;padding:0 22px;font-size:clamp(2.4rem,10vw,9rem);font-weight:800;text-transform:uppercase;letter-spacing:-.05em;line-height:.9;color:transparent;-webkit-text-stroke:2px #3a3a3d;overflow-wrap:anywhere}
.copyright{padding-top:20px;padding-bottom:6px;font-size:.85rem}

/* WP core alignment */
.alignleft{float:left;margin:0 1.5em 1em 0}.alignright{float:right;margin:0 0 1em 1.5em}.aligncenter{margin:0 auto;display:block}
.wp-caption-text{font-size:.9rem;color:var(--muted)}

/* Scroll reveal (only when JS is on) */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in,.no-reveal .reveal{opacity:1!important;transform:none!important}
.js .stats-grid .reveal:nth-child(2),.js .steps .reveal:nth-child(2){transition-delay:.08s}
.js .stats-grid .reveal:nth-child(3),.js .steps .reveal:nth-child(3){transition-delay:.16s}
.js .stats-grid .reveal:nth-child(4),.js .steps .reveal:nth-child(4){transition-delay:.24s}

/* Responsive */
@media (max-width:1000px){
	.nav-toggle{display:block}
	.primary-nav{display:none;position:fixed;top:calc(70px + var(--hdr-top));left:0;right:0;bottom:0;background:var(--ink);color:#fff;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:28px 22px 40px;gap:24px;overflow-y:auto}
	.nav-open .primary-nav{display:flex}
	.primary-nav .menu{flex-direction:column;gap:0}
	.primary-nav .menu a{display:block;font-size:2rem;font-weight:800;letter-spacing:-.04em;padding:12px 0;border-bottom:2px solid #2b2b2e;text-transform:uppercase}
	.primary-nav .menu a:hover{color:var(--accent);border-bottom-color:#2b2b2e}
	.nav-cta{text-align:center;box-shadow:4px 4px 0 var(--accent)}
	.grid-3{grid-template-columns:repeat(2,1fr)}
	.stats-grid{grid-auto-flow:row;grid-template-columns:repeat(2,1fr)}
	.stat:nth-child(odd){border-left:0;padding-left:0}
	.stat:nth-child(even){border-left:2px solid var(--ink)}
	.stat:nth-child(n+3){border-top:2px solid var(--ink)}
	.svc-row{grid-template-columns:44px 1fr 30px;gap:6px 16px;padding:24px 8px}
	.svc-desc{grid-column:2;grid-row:2;font-size:.95rem}
	.svc-arrow{grid-column:3;grid-row:1/3;align-self:center}
	.steps{grid-template-columns:repeat(2,1fr)}
	.steps li:nth-child(3){padding-left:0;border-left:0}
	.steps li:nth-child(n+3){border-top:2px solid #333}
	.contact-grid{grid-template-columns:1fr;gap:36px}
}
@media (max-width:620px){
	body{font-size:16px}
	.grid-3,.work-grid{grid-template-columns:1fr}
	.steps{grid-template-columns:1fr}
	.steps li,.steps li+li{padding:24px 0;border-left:0}
	.steps li+li{border-top:2px solid #333}
	.hero-actions{width:100%;flex-direction:column}
	.hero-actions .btn{width:100%;text-align:center}
	.hero-shape.s1{width:64vw;right:-24vw;top:-18vw}
	.hero-shape.s2{display:none}
	.stat{padding:26px 16px}
	.form-card{padding:20px;box-shadow:5px 5px 0 var(--ink)}
	.search-form{flex-direction:column}
	.footer-grid{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}
	*,*::before,*::after{animation:none!important;transition:none!important}
	.js .reveal{opacity:1;transform:none}
}