/* ==========================================================================
   Yakubu Afuye Theme — base stylesheet
   Design tokens on :root; original class names kept; mobile-first.
   ========================================================================== */

/* ---- Fonts (self-hosted, swap) ---- */
@font-face{font-family:'Antonio';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/antonio-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Antonio';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/antonio-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Antonio';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/antonio-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/geist-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/geist-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/geist-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/geist-latin-700-normal.woff2') format('woff2')}

/* ---- Design tokens ---- */
:root{
	--bg:#0A1226;
	--bg-alt:#0D1631;
	--card:#111B36;
	--card-2:#1A2547;
	--card-3:#16213F;        /* hero contact card */
	--navy:#1F2D52;
	--blue:#3D63C2;
	--blue-hover:#5578D6;
	--blue-light:#8FA9E6;
	--blue-pale:#B9C9EC;
	--text:#FFFFFF;
	--text-soft:#DCE4F4;
	--text-muted:#C3CAD8;
	--text-faint:#9AA6BF;    /* input placeholders */
	--line:rgba(255,255,255,0.12);
	--line-strong:rgba(255,255,255,0.2);
	--card-border:rgba(143,169,230,0.2);
	--card-border-hover:rgba(143,169,230,0.6);
	--field-border:rgba(143,169,230,0.35);
	--rec-muted:#E6ECF9;
	--rec-rule:rgba(255,255,255,0.25);
	--shadow-rec:0 24px 60px rgba(61,99,194,0.35);
	--shadow-float:0 10px 28px rgba(0,0,0,0.45);
	--shadow-card:0 20px 50px rgba(0,0,0,0.35);
	--radius-pill:999px;
	--radius-card:20px;
	--radius-price:22px;
	--radius-sm:12px;
	--maxw:1360px;
	--maxw-narrow:1100px;
	--ease:cubic-bezier(.2,.7,.2,1);
	--font-display:'Antonio',sans-serif;
	--font-body:'Geist',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

/* ---- Reset / base ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:17px;line-height:1.6;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
:where(h1,h2,h3,h4){font-family:var(--font-display);text-transform:capitalize}
a{color:var(--text);transition:color .18s var(--ease)}
a:hover{color:var(--blue-pale)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--blue-light);outline-offset:3px;border-radius:8px}

/* ---- Custom cursor (desktop, fine pointer only) ---- */
@media (hover:hover) and (pointer:fine){
	html,body,body *{cursor:url('../cursors/cursor-dot.svg') 16 16,auto}
	a,a *,button,button *,summary,select,label,input[type=checkbox]{cursor:url('../cursors/cursor-link.svg') 20 20,pointer}
	input:not([type=checkbox]),textarea{cursor:text}
}

/* ---- Accessibility helpers ---- */
.yafu-skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--blue);color:#fff;padding:12px 18px;border-radius:0 0 10px 0;font-weight:600;text-decoration:none}
.yafu-skip:focus{left:0}
.yafu-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- Section glows / backgrounds ---- */
.hero-stage{background:radial-gradient(ellipse 46% 52% at 50% 34%,rgba(74,111,206,.62),rgba(74,111,206,0) 72%),radial-gradient(ellipse 40% 60% at 12% 30%,rgba(45,79,158,.38),rgba(45,79,158,0) 70%),radial-gradient(ellipse 40% 60% at 90% 25%,rgba(45,79,158,.32),rgba(45,79,158,0) 70%),var(--bg)}
.page-hero{background:radial-gradient(ellipse 55% 80% at 50% 0%,rgba(74,111,206,.55),rgba(74,111,206,0) 72%),var(--bg)}
.glow-left{background:radial-gradient(ellipse 45% 60% at 0% 0%,rgba(61,99,194,.28),rgba(61,99,194,0) 70%),var(--bg)}
.glow-right{background:radial-gradient(ellipse 45% 60% at 100% 0%,rgba(61,99,194,.28),rgba(61,99,194,0) 70%),var(--bg-alt)}
.glow-center{background:radial-gradient(ellipse 55% 70% at 50% 45%,rgba(74,111,206,.45),rgba(74,111,206,0) 72%),var(--bg)}
.foot-glow{background:radial-gradient(ellipse 70% 45% at 50% 82%,rgba(85,120,214,.85),rgba(74,111,206,0) 72%),radial-gradient(ellipse 40% 40% at 8% 95%,rgba(61,99,194,.6),rgba(45,79,158,0) 70%),radial-gradient(ellipse 40% 40% at 92% 70%,rgba(61,99,194,.45),rgba(45,79,158,0) 70%),var(--bg)}

/* ---- Hero photo mask / offsets ---- */
.hero-photo{-webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 98%);mask-image:linear-gradient(to bottom,#000 62%,transparent 98%)}
.hero-bottom{margin-top:clamp(-300px,-21vw,-60px)}

/* ---- Interactive component transitions ---- */
.pill-link{transition:background-color .18s var(--ease),color .18s}
.pill-link:hover{background:#FFFFFF!important;color:var(--bg)!important}
.cta-hot{transition:background-color .18s var(--ease)}
.cta-hot:hover{background:var(--blue-hover)!important;color:#FFFFFF!important}
.card{transition:border-color .2s var(--ease)}
.card:hover{border-color:var(--card-border-hover)!important}
.shot{transition:transform .5s var(--ease)}
.proj:hover .shot{transform:scale(1.03)}
.idx{transition:background-color .2s var(--ease)}
.idx:hover{background:rgba(255,255,255,.04)}
.idx:hover .idx-arrow{transform:translate(4px,-4px)}
.idx-arrow{display:inline-block;transition:transform .2s var(--ease)}

/* ---- Ticker ---- */
.ticker{display:flex;gap:48px;width:max-content;animation:tick 48s linear infinite}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---- Nav display switches ---- */
.nav-links{display:flex}
.yafu-nav{display:flex}
.menu-btn{display:none}
.wa-float{display:flex}

/* ---- Primary nav (pills) ---- */
.yafu-nav ul{list-style:none;display:flex;align-items:center;gap:6px;margin:0;padding:0;font-size:14px;font-weight:500}
.yafu-nav a{display:inline-block;line-height:1;text-decoration:none;padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
.yafu-nav a.is-current{background:#FFFFFF;color:var(--bg);border-color:#FFFFFF}
.yafu-mlink{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12);font-family:var(--font-display);font-weight:700;font-size:40px;line-height:1;text-transform:capitalize;text-decoration:none}

/* ---- Front-end "Edit this section" chips ---- */
.yafu-edit-link{position:absolute;z-index:20;transform:translateY(-6px);display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;background:var(--blue-light);color:var(--bg);padding:5px 10px;border-radius:999px;text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.yafu-edit-link:hover{background:#fff;color:var(--bg)}

/* ---- Admin-only inline notices (missing form / pricing) ---- */
.yafu-admin-note{display:block;margin:12px auto;max-width:var(--maxw);padding:12px 16px;border:1px dashed var(--blue-light);border-radius:12px;color:var(--text-soft);font-size:14px;background:rgba(143,169,230,.08)}

/* ---- Modal (website review popup) ---- */
.yafu-modal[hidden]{display:none}
.yafu-modal{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;background:rgba(5,9,20,.72);padding:24px 16px}
.yafu-modal__panel{position:relative;width:min(520px,100%);margin:6vh 0;background:var(--card);border:1px solid var(--field-border);border-radius:var(--radius-price);padding:26px;box-shadow:var(--shadow-rec)}
.yafu-modal__close{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;font:inherit;font-size:22px;line-height:1}

/* ---- Mobile menu overlay: closed by default (JS sets panel.hidden to open/close).
   The panel carries an inline display:flex for its open layout, which beats the
   UA [hidden] rule, so this !important keeps it hidden while the attribute is set. */
.yafu-menu[hidden]{display:none!important}

/* ---- WPForms (enquiry + review) restyled for the dark theme ----
   Modern markup themes via CSS custom properties on the container, which
   out-specify plain overrides — so set the variables there. Direct rules
   below cover what the variables don't (classic-markup fallback too). */
.yafu-form .wpforms-container-full.wpforms-render-modern{
	--wpforms-field-border-radius:12px!important;
	--wpforms-field-border-style:solid!important;
	--wpforms-field-border-size:1px!important;
	--wpforms-field-background-color:#0A1226!important;
	--wpforms-field-border-color:rgba(143,169,230,.35)!important;
	--wpforms-field-text-color:#ffffff!important;
	--wpforms-field-menu-color:#0A1226!important;
	--wpforms-label-color:#ffffff!important;
	--wpforms-label-sublabel-color:#C3CAD8!important;
	--wpforms-label-error-color:#FFB4B4!important;
	--wpforms-button-background-color:#3D63C2!important;
	--wpforms-button-text-color:#ffffff!important;
	--wpforms-button-border-radius:999px!important;
	--wpforms-button-border-style:none!important;
	--wpforms-button-border-size:0!important;
}
.yafu-form .wpforms-title,.yafu-form .wpforms-description{display:none!important}
.yafu-form .wpforms-container{margin:0}
.yafu-form .wpforms-field{padding:0 0 18px;max-width:none}
.yafu-form .wpforms-field-label{font-family:'Geist',system-ui,sans-serif;font-weight:600;font-size:15px;line-height:1.3}
.yafu-form .wpforms-required-label{color:#8FA9E6!important;margin-left:4px}
.yafu-form .wpforms-field-description{margin:6px 0 0;font-size:14px;color:#C3CAD8!important}
.yafu-form .wpforms-field-description a,.yafu-form .wpforms-field-sublabel a{color:#8FA9E6}
.yafu-form input[type=text],.yafu-form input[type=email],.yafu-form input[type=tel],.yafu-form input[type=url],.yafu-form input[type=number],.yafu-form select,.yafu-form textarea{width:100%;box-sizing:border-box;min-height:50px;padding:12px 14px;border-radius:12px;border:1px solid rgba(143,169,230,.35);background:#0A1226;color:#fff;font:inherit;font-size:16px}
.yafu-form textarea{min-height:120px!important;resize:vertical}
.yafu-form .wpforms-field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%238FA9E6' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:42px!important}
.yafu-form input::placeholder,.yafu-form textarea::placeholder{color:#9AA6BF!important;opacity:1}
.yafu-form input:focus-visible,.yafu-form select:focus-visible,.yafu-form textarea:focus-visible{outline:3px solid #8FA9E6;outline-offset:1px}
.yafu-form .wpforms-field-checkbox label,.yafu-form .wpforms-field-radio label{color:#DCE4F4}
.yafu-form .wpforms-field-checkbox input,.yafu-form .wpforms-field-radio input{accent-color:#3D63C2}
.yafu-form .wpforms-submit{min-height:54px;padding:0 30px;font-weight:600;font-size:16px;cursor:pointer}
.yafu-form .wpforms-submit:hover{background:#5578D6!important}
.yafu-form label.wpforms-error{display:block;margin:6px 0 0;color:#FFB4B4!important;font-size:14px;font-weight:500}
.yafu-form .wpforms-error{border-color:#E08686!important}
.yafu-form .wpforms-confirmation-container-full{margin:0;background:rgba(143,169,230,.1);border:1px solid rgba(143,169,230,.35);border-radius:14px;padding:20px 22px;color:#fff;font-size:16px}

/* ---- Native enquiry form (design underline style, 2-col grid) ---- */
.yafu-enquiry{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:30px 28px}
.yafu-uline{width:100%;box-sizing:border-box;min-height:46px;padding:10px 0;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.5);border-radius:0;color:#fff;font:inherit;font-size:16px;transition:border-color .18s cubic-bezier(.2,.7,.2,1)}
.yafu-uline:focus-visible{outline:none;border-bottom-color:#8FA9E6;box-shadow:0 2px 0 #8FA9E6}
.yafu-uline::placeholder{color:#9AA6BF}
.yafu-uline option{color:#0A1226}
select.yafu-uline{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:28px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%238FA9E6' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 2px center}
textarea.yafu-uline{min-height:104px;resize:vertical;line-height:1.5}
.yafu-enquiry .yafu-err{color:#FFB4B4;font-size:13px;font-weight:500}
.yafu-enquiry input[aria-invalid="true"],.yafu-enquiry select[aria-invalid="true"],.yafu-enquiry textarea[aria-invalid="true"]{border-bottom-color:#E08686}
.yafu-enquiry-alert{background:rgba(224,134,134,.12);border:1px solid rgba(224,134,134,.5);border-radius:12px;padding:12px 16px;color:#FFD2D2;font-size:15px}
.yafu-enquiry-consent{grid-column:1/-1;display:flex;align-items:flex-start;gap:12px;font-size:15px;color:#DCE4F4;cursor:pointer}
.yafu-enquiry-consent input{width:20px;height:20px;margin:2px 0 0;accent-color:#3D63C2;flex:0 0 auto}
.yafu-enquiry-consent a{color:#8FA9E6;font-weight:600}
.yafu-enquiry-done{background:rgba(143,169,230,.1);border:1px solid rgba(143,169,230,.35);border-radius:16px;padding:28px 26px}
.yafu-enquiry-done h3{margin:0 0 8px;font-family:'Antonio',sans-serif;font-weight:600;font-size:28px;text-transform:capitalize}
.yafu-enquiry-done p{margin:0;color:#C3CAD8;font-size:16px}
.yafu-enquiry-done a{color:#8FA9E6;font-weight:600}

/* ---- Pricing: currency + billing toggles ---- */
.yafu-toggle{display:inline-flex;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:4px}
.yafu-toggle button{min-height:44px;padding:0 20px;border:0;border-radius:999px;font:inherit;font-size:15px;font-weight:600;cursor:pointer;background:transparent;color:#fff}
.yafu-toggle button[aria-pressed="true"]{background:#fff;color:var(--bg)}
/* JS-off: show default currency / monthly, hide the rest (progressive enhancement) */
.yafu-cur-usd{display:none}
.no-js .yafu-cur-usd{display:none}
.no-js .yafu-cur-ngn{display:inline}

/* ---- Work filter ---- */
.yafu-filter{display:flex;flex-wrap:wrap;gap:10px}
.yafu-filter button{min-height:44px;padding:9px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:#fff;font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.yafu-filter button[aria-pressed="true"]{background:#fff;color:var(--bg);border-color:#fff}
.yafu-filter button span{opacity:.7;margin-left:6px}
.proj[hidden]{display:none}

/* ---- FAQ accordion ---- */
summary{cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
.faq-plus{transition:transform .2s var(--ease)}
details[open] .faq-plus{transform:rotate(45deg)}

/* ---- Prose (generic page / case study body) ---- */
.yafu-prose{color:var(--text-soft);font-size:17px;line-height:1.7}
.yafu-prose h2{font-size:clamp(28px,3vw,40px);margin:1.4em 0 .4em}
.yafu-prose h3{font-size:24px;margin:1.2em 0 .3em}
.yafu-prose a{color:var(--blue-pale);text-decoration:underline}
.yafu-prose img{border-radius:12px}
.yafu-prose ul,.yafu-prose ol{padding-left:1.2em}

/* ---- Form fields ---- */
.field{width:100%;box-sizing:border-box;min-height:50px;padding:12px 14px;border-radius:12px;border:1px solid var(--field-border);background:var(--bg);color:var(--text);font:inherit;font-size:16px}
.field::placeholder{color:var(--text-faint)}
.field:focus-visible{outline:3px solid var(--blue-light);outline-offset:1px}
.uline{width:100%;box-sizing:border-box;min-height:46px;padding:10px 0;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.5);border-radius:0;color:var(--text);font:inherit;font-size:16px;transition:border-color .18s var(--ease)}
.uline:focus-visible{outline:none;border-bottom-color:var(--blue-light);box-shadow:0 2px 0 var(--blue-light)}
.uline option,.field option{color:var(--bg)}

/* ---- Responsive ---- */
/* Tablet: switch to the mobile menu before the desktop nav + CTA would clip. */
@media (max-width:900px){
	.nav-links{display:none}
	.yafu-nav{display:none}
	.menu-btn{display:inline-flex}
}
@media (max-width:760px){
	.nav-links{display:none}
	.yafu-nav{display:none}
	.menu-btn{display:inline-flex}
	.hero-bottom{margin-top:-56px}
	.hero-photo{width:min(74vw,300px)!important;margin-top:10px!important}
	.hero-hi{margin-left:0!important;text-align:center}
	/* Name is nowrap; size it to the viewport minus gutters so "Afuye" never clips. */
	.hero-stage h1{font-size:calc((100vw - 48px) / 5.8)!important}
	/* WhatsApp float: compact icon-only circle so it doesn't cover hero copy. */
	.wa-float{font-size:0;gap:0!important;padding:0!important;min-height:0!important;width:56px!important;height:56px;justify-content:center;background:#25D366!important}
	.wa-float span{width:56px!important;height:56px!important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M17.5 14.4c-.3-.1-1.8-.9-2-1s-.5-.1-.7.1-.8 1-.9 1.2-.3.2-.6.1a8 8 0 0 1-4-3.5c-.3-.5.3-.5.9-1.6.1-.2 0-.4 0-.5l-.9-2.2c-.2-.6-.5-.5-.7-.5h-.6a1.100 1.100 0 0 0-.8.4 3.4 3.4 0 0 0-1 2.5 5.9 5.9 0 0 0 1.2 3.1 13.5 13.5 0 0 0 5.2 4.600c1.9.8 2.7.9 3.6.7a3.100 3.100 0 0 0 2-1.400 2.500 2.500 0 0 0 .2-1.400c-.1-.1-.3-.2-.6-.3zM12 21.8a9.8 9.8 0 0 1-5-1.4l-.4-.2-3.7 1 1-3.6-.2-.4A9.8 9.8 0 1 1 12 21.8zm8.4-18.2A11.8 11.8 0 0 0 1.8 17.8L.1 24l6.4-1.7A11.8 11.8 0 0 0 12 23.700 11.8 11.8 0 0 0 20.4 3.6z'/%3E%3C/svg%3E") center/28px no-repeat!important;color:transparent!important}
}

/* ≥1400px: cap the home "more projects" index at 2 columns (design note). */
@media (min-width:1400px){
	.yafu-more-grid{grid-template-columns:repeat(2,1fr)!important}
}

@media (prefers-reduced-motion:reduce){
	*,*::before,*::after{transition-duration:.01ms!important;animation:none!important;scroll-behavior:auto!important}
}