/* ========================================================================
   SocialOpp WordPress Theme — main stylesheet
   Self-contained, no framework. Matches the React design 1:1.
   ======================================================================== */

/* ---------- Fonts ---------- */
@font-face{
  font-family:"Norwester";
  src:url("../fonts/norwester.otf") format("opentype");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{font-family:"Plus Jakarta Sans";src:url("../fonts/PlusJakartaSans-Regular.ttf") format("truetype");font-weight:400;font-display:swap;}
@font-face{font-family:"Plus Jakarta Sans";src:url("../fonts/PlusJakartaSans-Medium.ttf") format("truetype");font-weight:500;font-display:swap;}
@font-face{font-family:"Plus Jakarta Sans";src:url("../fonts/PlusJakartaSans-SemiBold.ttf") format("truetype");font-weight:600;font-display:swap;}
@font-face{font-family:"Plus Jakarta Sans";src:url("../fonts/PlusJakartaSans-Bold.ttf") format("truetype");font-weight:700;font-display:swap;}
@font-face{font-family:"Plus Jakarta Sans";src:url("../fonts/PlusJakartaSans-ExtraBold.ttf") format("truetype");font-weight:800;font-display:swap;}

/* ---------- Tokens ---------- */
:root{
  --ivory:#fdf6f0;
  --pulse:#3d2c5a;
  --current:#6c5ce7;
  --blaze:#ff7675;
  --steel:#6d6d6d;
  --rule:#e6dccf;
  --secondary:#f4ebe1;
  --shell:1400px;
  --pad:1.5rem;
}
@media (min-width:1024px){:root{--pad:3rem;}}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
  background:var(--ivory);
  color:var(--pulse);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
::selection{background:var(--current);color:var(--ivory);}
h1,h2,h3,h4,h5,h6,p,ul,ol,figure{margin:0;}
ul,ol{padding:0;list-style:none;}

.font-display{
  font-family:"Norwester","Arial Narrow",sans-serif;
  letter-spacing:.01em;
  text-transform:uppercase;
  line-height:.92;
  font-weight:400;
}
.eyebrow{
  font-family:"Norwester","Arial Narrow",sans-serif;
  font-size:.75rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--blaze);
}

/* ---------- Layout ---------- */
.shell{max-width:var(--shell);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}
.section{border-bottom:1px solid var(--rule);}
.section-inner{max-width:var(--shell);margin:0 auto;padding:5rem var(--pad);}
@media (min-width:768px){.section-inner{padding:7rem var(--pad);}}
.section--secondary{background:rgba(244,235,225,.4);}
.section--pulse{background:var(--pulse);color:var(--ivory);}
.section--pulse .eyebrow{color:var(--blaze);}
.section--blaze{background:var(--blaze);color:var(--pulse);}
.rule-line{display:block;height:1px;width:100%;background:var(--rule);}

/* ---------- Grid helpers ---------- */
.grid{display:grid;gap:3rem;}
.grid-12{grid-template-columns:repeat(12,1fr);}
@media (max-width:1023px){.grid-12{grid-template-columns:1fr;}}
.col-4{grid-column:span 4;}
.col-5{grid-column:span 5;}
.col-7{grid-column:span 7;}
.col-8{grid-column:span 8;}
@media (max-width:1023px){.col-4,.col-5,.col-7,.col-8{grid-column:1/-1;}}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:40;
  background:rgba(253,246,240,.9);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--rule);
}
.site-header__inner{
  max-width:var(--shell);margin:0 auto;padding:1rem var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.site-header__logo img{height:28px;width:auto;}
@media (min-width:768px){.site-header__logo img{height:32px;}}
.primary-nav{display:none;align-items:center;gap:2.5rem;}
@media (min-width:768px){.primary-nav{display:flex;}}
.primary-nav a{
  font-size:.875rem;font-weight:500;
  color:rgba(61,44,90,.8);transition:color .15s;
}
.primary-nav a:hover,.primary-nav .current-menu-item>a,.primary-nav .current_page_item>a{color:var(--pulse);}
.primary-nav ul{display:flex;gap:2.5rem;margin:0;}
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.75rem 1.5rem;font-size:.875rem;font-weight:600;
  border-radius:2px;transition:background-color .15s,color .15s,border-color .15s;
  border:none;cursor:pointer;line-height:1;
}
.btn--primary{background:var(--pulse);color:var(--ivory);}
.btn--primary:hover{background:var(--current);}
.btn--ghost{background:transparent;color:var(--pulse);border:1px solid rgba(61,44,90,.25);}
.btn--ghost:hover{background:var(--pulse);color:var(--ivory);border-color:var(--pulse);}
.btn--ivory{background:var(--ivory);color:var(--pulse);}
.btn--ivory:hover{background:rgba(253,246,240,.85);}
.btn--lg{padding:1rem 1.75rem;}
.btn .arrow::after{content:"↗";display:inline-block;margin-left:.25rem;transition:transform .15s;}
.btn:hover .arrow::after{transform:translate(2px,-2px);}

.menu-toggle{
  display:inline-flex;background:transparent;border:none;color:var(--pulse);padding:.25rem;
}
@media (min-width:768px){.menu-toggle{display:none;}}
.menu-toggle svg{width:24px;height:24px;}
.mobile-nav{display:none;border-top:1px solid var(--rule);background:var(--ivory);}
.mobile-nav.is-open{display:block;}
.mobile-nav .menu{padding:1rem var(--pad);display:flex;flex-direction:column;gap:.25rem;}
.mobile-nav a{display:block;padding:.75rem .5rem;font-weight:500;color:rgba(61,44,90,.85);border-radius:2px;}
.mobile-nav a:hover,.mobile-nav .current-menu-item>a{background:var(--secondary);color:var(--pulse);}
.mobile-nav .btn{margin-top:.5rem;justify-content:center;}

/* ---------- Hero (home) ---------- */
.hero-inner{
  max-width:var(--shell);margin:0 auto;padding:4rem var(--pad);
  display:grid;grid-template-columns:repeat(12,1fr);gap:3rem;
}
@media (max-width:1023px){.hero-inner{grid-template-columns:1fr;padding:4rem var(--pad);}}
@media (min-width:1024px){.hero-inner{padding:8rem var(--pad);gap:4rem;}}
.hero__text{grid-column:span 7;}
.hero__media{grid-column:span 5;position:relative;}
@media (max-width:1023px){.hero__text,.hero__media{grid-column:1/-1;}}
.hero h1{
  font-family:"Norwester","Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:.01em;line-height:.92;
  font-size:clamp(2.75rem,7vw,5.5rem);color:var(--pulse);margin-top:1.5rem;
}
.hero__lede{margin-top:2rem;max-width:36rem;font-size:1.125rem;line-height:1.65;color:rgba(61,44,90,.75);}
.hero__ctas{margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:1rem;}
.hero__frame{aspect-ratio:4/5;overflow:hidden;border-radius:2px;border:1px solid var(--rule);}
.hero__frame img{width:100%;height:100%;object-fit:cover;}
.hero__badge{
  position:absolute;left:-1.5rem;bottom:-1.5rem;
  background:var(--ivory);border:1px solid var(--rule);
  padding:1rem 1.25rem;box-shadow:0 1px 2px rgba(0,0,0,.04);
}
@media (max-width:767px){.hero__badge{display:none;}}
.hero__badge .eyebrow{font-size:.7rem;}
.hero__badge p+p{font-family:"Norwester";font-size:1.5rem;color:var(--pulse);margin-top:.25rem;text-transform:uppercase;}

/* ---------- SectionHead ---------- */
.section-head{max-width:48rem;}
.section-head--center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head h2{
  font-family:"Norwester";text-transform:uppercase;letter-spacing:.01em;line-height:.92;
  margin-top:1rem;font-size:clamp(2.25rem,5vw,3.75rem);color:var(--pulse);
}
.section-head .intro{margin-top:1.5rem;font-size:1.125rem;line-height:1.65;color:rgba(61,44,90,.75);}
.section--pulse .section-head h2{color:var(--ivory);}
.section--pulse .intro{color:rgba(253,246,240,.8);}

/* ---------- SignalList ---------- */
.signal-list{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}
.signal-list li{
  display:flex;gap:1rem;align-items:flex-start;
  padding:1.25rem 0;border-top:1px solid var(--rule);
  color:rgba(61,44,90,.85);font-size:1.0625rem;font-style:italic;
  transition:background-color .15s;
}
.signal-list li:first-child{border-top:none;}
.signal-list li:hover{background:rgba(244,235,225,.6);}
.signal-list .arr{font-family:"Norwester";color:var(--blaze);font-size:1.5rem;line-height:1;}

/* ---------- Metric ---------- */
.metric .value{font-family:"Norwester";font-size:clamp(2.5rem,4.5vw,3.75rem);color:var(--blaze);text-transform:uppercase;line-height:.92;}
.metric .label{margin-top:.75rem;font-size:.875rem;color:rgba(61,44,90,.7);}
.metric-row{display:grid;gap:3rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}

/* ---------- Work cards (grid) ---------- */
.cards{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.card{
  display:block;background:var(--ivory);border:1px solid var(--rule);
  overflow:hidden;transition:border-color .15s;color:var(--pulse);
}
.card:hover{border-color:var(--pulse);}
.card__img{aspect-ratio:4/5;overflow:hidden;}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease;}
.card:hover .card__img img{transform:scale(1.05);}
.card__body{padding:1.5rem;}
.card__tag{font-family:"Norwester";font-size:.75rem;letter-spacing:.18em;color:var(--blaze);text-transform:uppercase;}
.card__title{font-family:"Norwester";margin-top:.75rem;font-size:1.5rem;color:var(--pulse);text-transform:uppercase;line-height:.95;}
.card__desc{margin-top:.75rem;font-size:.9375rem;line-height:1.6;color:rgba(61,44,90,.75);}

/* ---------- Process / numbered list ---------- */
.steps{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:3.5rem;}
.steps li{border-top:1px solid var(--pulse);padding-top:1.5rem;}
.steps .n{font-family:"Norwester";font-size:.875rem;color:var(--blaze);text-transform:uppercase;}
.steps h3{font-family:"Norwester";margin-top:.75rem;font-size:1.5rem;color:var(--pulse);text-transform:uppercase;line-height:.95;}
.steps p{margin-top:.75rem;font-size:.875rem;line-height:1.6;color:rgba(61,44,90,.7);}

/* ---------- Final CTA strip ---------- */
.cta-strip{background:var(--blaze);}
.cta-strip__inner{
  max-width:var(--shell);margin:0 auto;padding:5rem var(--pad);
  display:flex;flex-direction:column;align-items:flex-start;gap:2rem;
}
@media (min-width:768px){.cta-strip__inner{flex-direction:row;align-items:flex-end;justify-content:space-between;padding:7rem var(--pad);}}
.cta-strip h2{font-family:"Norwester";font-size:clamp(2.25rem,5vw,3.75rem);color:var(--pulse);text-transform:uppercase;line-height:.92;}
.cta-strip .eyebrow{color:var(--pulse);}
.cta-strip p{margin-top:1.5rem;font-size:1.125rem;color:rgba(61,44,90,.85);}

/* ---------- Page header ---------- */
.page-header{border-bottom:1px solid var(--rule);}
.page-header__inner{max-width:var(--shell);margin:0 auto;padding:5rem var(--pad);}
@media (min-width:768px){.page-header__inner{padding:7rem var(--pad);}}
.page-header h1{
  font-family:"Norwester";text-transform:uppercase;letter-spacing:.01em;line-height:.92;
  margin-top:1.5rem;font-size:clamp(3rem,8vw,7rem);color:var(--pulse);
}
.page-header .intro{margin-top:2rem;max-width:42rem;font-size:1.125rem;line-height:1.65;color:rgba(61,44,90,.75);}

/* ---------- About: team grid ---------- */
.team-grid{display:grid;gap:3rem;margin-top:4rem;}
@media (min-width:768px){.team-grid{grid-template-columns:1fr 1fr;column-gap:4rem;row-gap:5rem;}}
.team-grid article .role{font-family:"Norwester";font-size:.75rem;letter-spacing:.18em;color:var(--blaze);text-transform:uppercase;}
.team-grid article h3{font-family:"Norwester";margin-top:.75rem;font-size:clamp(1.75rem,3vw,2.25rem);color:var(--pulse);text-transform:uppercase;line-height:.95;}
.team-grid article .bio{margin-top:1.5rem;line-height:1.7;color:rgba(61,44,90,.75);}
.team-grid article .rule-line{margin-top:1.5rem;}
.full-bleed-img{aspect-ratio:16/7;width:100%;overflow:hidden;border-bottom:1px solid var(--rule);}
.full-bleed-img img{width:100%;height:100%;object-fit:cover;}

/* Bulleted lists */
.bullets{margin-top:1rem;display:flex;flex-direction:column;gap:.75rem;color:rgba(61,44,90,.85);}
.bullets li{display:flex;gap:.75rem;align-items:flex-start;}
.bullets .dot{width:6px;height:6px;border-radius:50%;background:var(--current);margin-top:.6rem;flex:none;}
.bullets .dot--blaze{background:var(--blaze);}
.kicker{margin-top:2.5rem;font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(61,44,90,.6);}

/* Numbered ordered list (about) */
.rules{margin-top:2rem;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}
.rules li{display:flex;gap:1.5rem;padding:1.25rem 0;border-top:1px solid var(--rule);}
.rules li:first-child{border-top:none;}
.rules .n{font-family:"Norwester";width:2.5rem;font-size:1.5rem;color:var(--blaze);}
.rules .t{color:rgba(61,44,90,.85);}

/* ---------- Services pillars ---------- */
.pillar h2{font-family:"Norwester";margin-top:1rem;font-size:clamp(2.25rem,4.5vw,3rem);color:var(--pulse);text-transform:uppercase;line-height:.95;}
.pillar .num{font-family:"Norwester";font-size:.875rem;color:var(--blaze);}
.pillar .owner{margin-top:1rem;font-size:.875rem;font-style:italic;color:rgba(61,44,90,.65);}
.pillar .pitch{font-family:"Norwester";font-size:clamp(1.5rem,2.5vw,1.875rem);line-height:1.15;color:var(--pulse);text-transform:uppercase;}
.pillar .lede{margin-top:1.5rem;font-size:1.0625rem;line-height:1.7;color:rgba(61,44,90,.75);}
.pillar .micro-label{font-family:"Norwester";margin-top:3rem;font-size:.75rem;letter-spacing:.18em;color:var(--blaze);text-transform:uppercase;}
.pillar .terms{margin-top:.75rem;color:rgba(61,44,90,.85);}

/* ---------- Work / case study ---------- */
.case-block{margin-top:2.5rem;}
.case-block .micro-label{font-family:"Norwester";font-size:.75rem;letter-spacing:.18em;color:var(--blaze);text-transform:uppercase;}
.case-block .body{margin-top:.75rem;font-size:1.0625rem;line-height:1.7;color:rgba(61,44,90,.85);}
.case h2{font-family:"Norwester";font-size:clamp(2.25rem,5vw,3.75rem);color:var(--pulse);text-transform:uppercase;line-height:.92;}
.case .sub{margin-top:.75rem;font-size:.875rem;font-style:italic;color:rgba(61,44,90,.65);}
.case .hook{font-family:"Norwester";margin-top:1.5rem;font-size:clamp(1.5rem,2.5vw,1.875rem);line-height:1.15;color:var(--pulse);text-transform:uppercase;}
.case__frame{aspect-ratio:4/5;border:1px solid var(--rule);overflow:hidden;}
.case__frame img{width:100%;height:100%;object-fit:cover;}

/* ---------- Footer ---------- */
.site-footer{background:var(--pulse);color:var(--ivory);}
.site-footer__top{
  max-width:var(--shell);margin:0 auto;padding:4rem var(--pad);
  display:grid;gap:3rem;grid-template-columns:repeat(12,1fr);
}
@media (max-width:767px){.site-footer__top{grid-template-columns:1fr;}}
.site-footer__brand{grid-column:span 5;}
.site-footer__col-a{grid-column:span 3;}
.site-footer__col-b{grid-column:span 4;}
@media (max-width:767px){.site-footer__brand,.site-footer__col-a,.site-footer__col-b{grid-column:1/-1;}}
.site-footer img.wm{height:40px;width:auto;opacity:.95;}
.site-footer .lede{margin-top:1.5rem;max-width:24rem;font-size:.875rem;line-height:1.65;color:rgba(253,246,240,.7);}
.site-footer .contact{margin-top:2rem;font-size:.875rem;color:rgba(253,246,240,.7);}
.site-footer .contact a:hover{color:var(--ivory);}
.site-footer h4{font-family:"Norwester";font-size:.75rem;letter-spacing:.05em;color:rgba(253,246,240,.5);text-transform:uppercase;font-weight:400;}
.site-footer ul.links{margin-top:1rem;display:flex;flex-direction:column;gap:.5rem;font-size:.875rem;}
.site-footer ul.links a{color:rgba(253,246,240,.85);}
.site-footer ul.links a:hover{color:var(--ivory);}
.site-footer ul.founders li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;}
.site-footer ul.founders .role{font-size:.75rem;color:rgba(253,246,240,.45);}
.site-footer__bottom{border-top:1px solid rgba(253,246,240,.1);}
.site-footer__bottom-inner{
  max-width:var(--shell);margin:0 auto;padding:1.5rem var(--pad);
  display:flex;flex-direction:column;gap:.75rem;font-size:.75rem;color:rgba(253,246,240,.55);
}
@media (min-width:768px){.site-footer__bottom-inner{flex-direction:row;justify-content:space-between;align-items:center;}}
.site-footer__bottom .mark{font-family:"Norwester";letter-spacing:.18em;color:rgba(253,246,240,.4);text-transform:uppercase;}

/* ---------- Contact form ---------- */
.form{margin-top:2.5rem;display:flex;flex-direction:column;gap:1.5rem;}
.form .row{display:grid;gap:1.5rem;}
.form .row-2{grid-template-columns:1fr 1fr;}
.form .row-3{grid-template-columns:repeat(3,1fr);}
@media (max-width:767px){.form .row-2,.form .row-3{grid-template-columns:1fr;}}
.field label{display:block;font-family:"Norwester";font-size:.75rem;letter-spacing:.18em;color:rgba(61,44,90,.6);text-transform:uppercase;}
.field .control{margin-top:.5rem;}
.field input,.field select,.field textarea{
  width:100%;border:1px solid var(--rule);background:var(--ivory);
  padding:.85rem 1rem;font-family:inherit;font-size:1rem;color:var(--pulse);border-radius:2px;
  outline:none;transition:border-color .15s,box-shadow .15s;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(61,44,90,.35);}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--pulse);box-shadow:0 0 0 3px rgba(108,92,231,.3);}
.field textarea{min-height:6rem;resize:vertical;}
.form-actions{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;padding-top:.5rem;}
@media (min-width:640px){.form-actions{flex-direction:row;align-items:center;}}
.form-actions .micro{font-size:.75rem;color:rgba(61,44,90,.55);}
.aside-card{border:1px solid var(--rule);background:rgba(244,235,225,.4);padding:2rem;}
@media (min-width:768px){.aside-card{padding:2.5rem;}}
.aside-card h3{font-family:"Norwester";margin-top:1rem;font-size:clamp(1.75rem,3vw,2.25rem);color:var(--pulse);text-transform:uppercase;line-height:.95;}

/* ---------- Editor / generic content (page.php, single.php) ---------- */
.entry-content{max-width:48rem;margin:0 auto;padding:4rem var(--pad);}
.entry-content h1,.entry-content h2,.entry-content h3{font-family:"Norwester";color:var(--pulse);text-transform:uppercase;line-height:.95;margin-top:2rem;}
.entry-content h1{font-size:2.5rem;}
.entry-content h2{font-size:2rem;}
.entry-content h3{font-size:1.5rem;}
.entry-content p,.entry-content ul,.entry-content ol{margin-top:1.25rem;line-height:1.7;color:rgba(61,44,90,.85);}
.entry-content a{color:var(--current);text-decoration:underline;}

/* Utility */
.mt-2{margin-top:.5rem;}.mt-4{margin-top:1rem;}.mt-6{margin-top:1.5rem;}
.mt-8{margin-top:2rem;}.mt-10{margin-top:2.5rem;}.mt-12{margin-top:3rem;}
.mt-14{margin-top:3.5rem;}.mt-16{margin-top:4rem;}
.text-center{text-align:center;}

.skip-link{position:absolute;left:-9999px;}
.skip-link:focus{left:1rem;top:1rem;background:var(--pulse);color:var(--ivory);padding:.5rem 1rem;z-index:100;}

.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden;}