/*
Theme Name: Sharp Ranker
Theme URI: https://www.sharpranker.com/
Author: Sharp Ranker
Author URI: https://www.sharpranker.com/
Description: A premium, fully editable dark-mode agency theme with a 3D hero object, animated stats, editable team & testimonials, and a working contact form. Manage everything from Appearance > Customize and the Team Members / Testimonials menus — no code required.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sharp-ranker
Tags: dark, one-page, agency, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready

This theme is not a copy of any commercial theme. Built for sharpranker.com.
*/

/* This stylesheet is the theme's required style.css. All actual rules live below,
   ported from the original design plus new rules added for WordPress dynamic content
   (Customizer-driven text/images, team & testimonial post types, working contact form,
   and the second 3D "bookend" sphere section near the footer). */

:root{
  --bg: #08080a;
  --surface: #131317;
  --surface-2: #1a1a1f;
  --ink: #f4f1ea;
  --muted: #8b8b94;
  --line: rgba(244,241,234,0.09);
  --brass: #e3a63e;
  --blue: #5c86ff;
  --serif: "Fraunces", serif;
  --sans: "Inter", sans-serif;
  --ease: cubic-bezier(.16,.84,.44,1);
  --header-h: 92px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{background:var(--bg);scroll-behavior:smooth;}
html,body{height:100%;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  overflow-x:hidden;
  cursor:none;
}
::selection{background:var(--brass);color:#09090b;}

/* every anchor target section gets breathing room below the fixed
   header, so #services etc actually land in a readable spot */
section[id]{scroll-margin-top:calc(var(--header-h) + 16px);}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:none;}

/* ---------- grain overlay ---------- */
.grain{
  position:fixed;inset:0;z-index:998;pointer-events:none;
  opacity:0.045;mix-blend-mode:overlay;
}

/* ---------- preloader ----------
   CSS drives the guaranteed hide (animation-delay) so the loader
   can never get stuck even if JS fails; JS only adds a nicer
   logo-draw animation on top when it's available. */
.preloader{
  position:fixed;inset:0;z-index:2000;
  background:#08080a;
  display:flex;align-items:center;justify-content:center;
  animation:preloaderOut 0.7s ease forwards;
  animation-delay:1.5s;
}
.preloader .pl-mark{
  font-family:var(--serif);font-size:1.6rem;letter-spacing:0.02em;
  display:flex;align-items:center;gap:10px;
}
.preloader .pl-mark .sq{width:10px;height:10px;background:var(--brass);transform:rotate(45deg);}
.preloader .pl-bar{
  position:absolute;bottom:42%;left:50%;transform:translateX(-50%);
  width:160px;height:1px;background:var(--line);overflow:hidden;
}
.preloader .pl-bar::after{
  content:'';position:absolute;left:-100%;top:0;width:100%;height:100%;background:var(--brass);
  animation:plfill 1.3s ease forwards;
}
@keyframes plfill{ to{ left:0; } }
@keyframes preloaderOut{
  to{ opacity:0; visibility:hidden; pointer-events:none; }
}

/* ---------- custom cursor ---------- */
.cursor-dot,.cursor-ring{
  position:fixed;top:0;left:0;pointer-events:none;z-index:1500;
  border-radius:50%;transform:translate(-50%,-50%);
}
.cursor-dot{width:6px;height:6px;background:var(--brass);}
.cursor-ring{
  width:36px;height:36px;border:1px solid rgba(244,241,234,0.35);
  transition:width .3s var(--ease),height .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.cursor-ring.hover{
  width:64px;height:64px;background:rgba(227,166,62,0.08);border-color:var(--brass);
}
@media(max-width:900px){.cursor-dot,.cursor-ring{display:none;}body{cursor:auto;}}

/* ---------- layout helpers ---------- */
.wrap{max-width:1400px;margin:0 auto;padding:0 6vw;}
section{position:relative;}

/* ---------- global texture ----------
   A faint fixed dot-grid so the page reads as an intentional dark
   canvas rather than plain flat black between sections. */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(244,241,234,0.09) 1px, transparent 1px);
  background-size:34px 34px;
  opacity:0.35;
}
header, .preloader, .menu-overlay, .grain, .hero, main, .marquee-section, footer{ position:relative; z-index:1; }

/* ---------- section background variation ---------- */
.section-about{ background: radial-gradient(ellipse 1000px 600px at 15% 0%, rgba(92,134,255,0.09), transparent 60%), #0b0b0f; }
.section-why{ background: radial-gradient(ellipse 1000px 600px at 85% 0%, rgba(227,166,62,0.08), transparent 60%), #0a0a0d; }
.section-services{ background: radial-gradient(ellipse 1000px 620px at 20% 10%, rgba(227,166,62,0.09), transparent 60%), #0d0d11; }
.section-team{ background: radial-gradient(ellipse 900px 560px at 85% 20%, rgba(92,134,255,0.08), transparent 60%), #0c0c10; }
.section-blog{ background: radial-gradient(ellipse 900px 560px at 15% 80%, rgba(160,140,255,0.07), transparent 60%), #0b0b0e; }
.section-contact{ background: radial-gradient(ellipse 1100px 650px at 50% 100%, rgba(227,166,62,0.09), transparent 60%), #08080a; }

/* decorative glow orbs — soft blurred circles echoing the hero's
   lighting, placed low-opacity behind section content */
.deco-orb{
  position:absolute;border-radius:50%;filter:blur(70px);
  pointer-events:none;z-index:0;opacity:0.5;
}
.deco-orb.brass{background:radial-gradient(circle, rgba(227,166,62,0.35), transparent 70%);}
.deco-orb.blue{background:radial-gradient(circle, rgba(92,134,255,0.32), transparent 70%);}

/* faint wireframe accent, echoing the hero's 3D object motif */
.deco-wire{position:absolute;opacity:0.16;pointer-events:none;z-index:0;}
.deco-wire svg{width:100%;height:100%;stroke:var(--brass);fill:none;}

/* ---------- header ---------- */
header{
  position:fixed;top:0;left:0;width:100%;z-index:100;
  height:var(--header-h);
  padding:0 6vw;display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(to bottom, rgba(8,8,10,0.75), rgba(8,8,10,0.35) 70%, transparent);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.logo{
  display:flex;align-items:baseline;gap:6px;
  font-family:var(--serif);font-weight:600;font-size:1.2rem;letter-spacing:0.01em;
  position:relative;z-index:1600;
}
.logo .mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:9px;height:9px;border-radius:2px;background:var(--brass);
  transform:rotate(45deg);margin-right:8px;
}
.logo .accent{font-style:italic;font-weight:400;color:var(--brass);}
nav.links{display:flex;gap:2.1rem;}
nav.links a{
  font-size:0.82rem;font-weight:500;color:var(--muted);
  position:relative;padding-bottom:3px;
  transition:color .3s var(--ease);
}
nav.links a::after{
  content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--ink);
  transition:width .4s var(--ease);
}
nav.links a:hover{color:var(--ink);}
nav.links a:hover::after{width:100%;}
.header-right{display:flex;align-items:center;gap:1.2rem;}
@media(max-width:960px){ nav.links{display:none;} }
.nav-cta{
  font-size:0.82rem;font-weight:500;
  border:1px solid var(--line);border-radius:100px;
  padding:10px 20px;
}
.menu-btn{
  display:flex;align-items:center;gap:10px;
  font-size:0.82rem;font-weight:500;
  border:1px solid var(--line);border-radius:100px;padding:9px 18px 9px 10px;
  position:relative;z-index:1600;
}
.menu-btn .bars{display:flex;flex-direction:column;gap:3px;}
.menu-btn .bars span{width:14px;height:1px;background:var(--ink);transition:transform .3s var(--ease), opacity .3s var(--ease);}
.menu-btn.open .bars span:nth-child(1){transform:translateY(4px) rotate(45deg);}
.menu-btn.open .bars span:nth-child(2){opacity:0;}
.menu-btn.open .bars span:nth-child(3){transform:translateY(-4px) rotate(-45deg);}
@media(max-width:600px){.nav-cta{display:none;}}

/* ---------- full-screen menu overlay ---------- */
.menu-overlay{
  position:fixed;inset:0;z-index:1400;
  background:rgba(8,8,10,0.98);
  backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .5s var(--ease), visibility .5s;
}
.menu-overlay.open{opacity:1;visibility:visible;pointer-events:auto;}
.menu-overlay-inner{display:flex;flex-direction:column;gap:0.4rem;text-align:center;}
.menu-overlay a{
  font-family:var(--serif);font-weight:340;
  font-size:clamp(2.2rem,6vw,4.2rem);color:var(--ink);
  padding:0.35rem 0;position:relative;
  opacity:0.94;transition:opacity .3s var(--ease), color .3s var(--ease);
}
.menu-overlay a:hover{color:var(--brass);opacity:1;}
.menu-overlay .num{font-family:var(--sans);font-size:0.9rem;color:var(--muted);vertical-align:super;margin-right:14px;}
.menu-overlay-foot{
  position:absolute;bottom:6vh;left:0;right:0;display:flex;justify-content:center;gap:2.4rem;
  font-size:0.8rem;color:var(--muted);
}

/* ---------- hero ---------- */
.hero{ min-height:100svh;position:relative;display:flex;flex-direction:column;overflow:hidden; }
#hero-canvas{ position:absolute;inset:0;width:100%;height:100%;z-index:1; }
.hero-inner{
  position:relative;z-index:2;flex:1;width:100%;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:calc(var(--header-h) + 48px) 6vw 6vw;
  gap:2.2rem;
}
.hero-eyebrow{ display:flex;align-items:center;gap:0.6rem; font-size:0.8rem;color:var(--muted); }
.hero-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--brass);}
h1.hero-headline{
  font-family:var(--serif); font-weight:340; font-size:clamp(2.3rem, 6.4vw, 6.2rem);
  line-height:0.98; letter-spacing:-0.01em; max-width:13ch;
}
h1.hero-headline em{ font-style:italic;font-weight:300;color:var(--brass); }
.hero-foot{ display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap; }
.hero-sub{max-width:34ch;color:var(--muted);font-size:1rem;line-height:1.6;}
.scroll-cue{ display:flex;align-items:center;gap:10px;color:var(--muted);font-size:0.78rem; }
.scroll-cue .line{width:1px;height:34px;background:var(--line);position:relative;overflow:hidden;}
.scroll-cue .line::after{
  content:'';position:absolute;top:-100%;left:0;width:100%;height:100%;background:var(--brass);
  animation:scrollline 2.2s ease-in-out infinite;
}
@keyframes scrollline{ 0%{top:-100%;}50%{top:0;}100%{top:100%;} }

.hero-side{
  position:absolute;z-index:2;top:50%;transform:translateY(-50%);
  writing-mode:vertical-rl; font-size:0.76rem;letter-spacing:0.14em;color:var(--muted);
  display:flex;align-items:center;gap:10px;
}
.hero-side.left{left:2.4vw;}
.hero-side.right{right:2.4vw;}
.hero-side .tick{width:1px;height:44px;background:var(--line);}
.hero-chip{
  position:absolute;z-index:2; display:flex;align-items:center;gap:8px;
  border:1px solid var(--line);border-radius:100px; padding:9px 16px;font-size:0.76rem;color:var(--muted);
  background:rgba(19,19,23,0.4);backdrop-filter:blur(6px);
}
.hero-chip .dot{width:5px;height:5px;border-radius:50%;background:var(--brass);}
.hero-chip.c1{top:26%;right:8vw;}
.hero-chip.c2{top:40%;right:15vw;}
@media(max-width:900px){ .hero-side, .hero-chip{display:none;} }

/* ---------- magnetic button ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px; font-size:0.85rem;font-weight:500;
  border:1px solid var(--line);border-radius:100px; padding:16px 30px; position:relative;
}
.btn.solid{background:var(--ink);color:#09090b;border-color:var(--ink);}
.magnetic-wrap{display:inline-block;}

/* ---------- section titles ---------- */
.section-head{
  display:flex;justify-content:space-between;align-items:flex-end; gap:2rem;flex-wrap:wrap;
  padding:1.2rem 0 3.4rem;
}
h2.section-title{
  font-family:var(--serif);font-weight:340; font-size:clamp(2rem,4.4vw,3.6rem); line-height:1.02; max-width:16ch;
}
.section-note{max-width:32ch;color:var(--muted);font-size:0.95rem;line-height:1.6;text-align:right;}
@media(max-width:800px){.section-note{text-align:left;}}

.section-flourish{ display:flex;align-items:center;gap:14px; padding-top:6.4rem; border-top:1px solid var(--line); }
.section-flourish .fl-line{flex:0 0 auto;width:64px;height:1px;background:var(--brass);transform:scaleX(0);transform-origin:left;}
.section-flourish .fl-text{font-size:0.78rem;letter-spacing:0.12em;color:var(--muted);text-transform:uppercase;}

/* ---------- services ---------- */
.services{padding-bottom:6.5rem;}
.service-cards{ display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem; border-top:1px solid var(--line);padding-top:2.6rem; }
.service-card{
  border:1px solid var(--line);border-radius:14px; padding:2.6rem 2rem 2.2rem;
  background:linear-gradient(160deg, rgba(244,241,234,0.03), rgba(244,241,234,0));
  position:relative;overflow:hidden;
  transition:border-color .4s var(--ease), transform .4s var(--ease);
}
.service-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 30% 0%, rgba(227,166,62,0.14), transparent 55%);
  opacity:0;transition:opacity .5s var(--ease);
}
.service-card:hover{border-color:rgba(227,166,62,0.5);transform:translateY(-6px);}
.service-card:hover::before{opacity:1;}
.service-card .icon{
  width:48px;height:48px;border-radius:10px; display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);margin-bottom:1.8rem; position:relative;z-index:1;
  transition:transform .5s var(--ease), border-color .5s var(--ease);
}
.service-card:hover .icon{transform:rotate(-8deg) scale(1.06);border-color:var(--brass);}
.service-card .icon svg{width:22px;height:22px;stroke:var(--brass);}
.service-card .num{ position:absolute;top:1.8rem;right:2rem;font-size:0.78rem;color:var(--muted); }
.service-card h3{ font-family:var(--serif);font-weight:400;font-size:1.6rem;margin-bottom:0.7rem;position:relative;z-index:1; }
.service-card p{color:var(--muted);font-size:0.9rem;line-height:1.6;position:relative;z-index:1;}
@media(max-width:900px){.service-cards{grid-template-columns:1fr;}}

.capabilities{ display:flex;flex-wrap:wrap;gap:0.8rem;padding-top:3.2rem; }
.chip{
  border:1px solid var(--line);border-radius:100px; padding:11px 20px;font-size:0.84rem;color:var(--muted);
  transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.chip:hover{border-color:var(--brass);color:var(--ink);background:rgba(227,166,62,0.06);}

/* ---------- about ---------- */
.about{padding:8rem 0;}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:start;}
.about h2{ font-family:var(--serif);font-weight:320;font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.12; }
.about-copy{color:var(--muted);font-size:1.02rem;line-height:1.75;}
.about-copy p+p{margin-top:1.3rem;}

.about-visual{
  margin-top:2.6rem;border-radius:14px;overflow:hidden;border:1px solid var(--line);
  aspect-ratio:16/10;position:relative;
}
.about-visual .img{position:absolute;inset:0;width:100%;height:100%;}
.about-visual .cap{
  position:absolute;left:0;right:0;bottom:0;padding:1.2rem 1.4rem;
  font-size:0.78rem;color:var(--muted);
  background:linear-gradient(to top, rgba(8,8,10,0.85), transparent);
}

/* animated stat counters — professional, evenly laid out, count
   up into view rather than sitting static */
.about-stats{
  display:grid;grid-template-columns:repeat(2,1fr);gap:0;
  margin-top:3.4rem;border-top:1px solid var(--line);
}
.stat-block{
  padding:2rem 1.6rem 2rem 0;border-bottom:1px solid var(--line);
  position:relative;
}
.stat-block:nth-child(odd){border-right:1px solid var(--line);padding-right:2rem;}
.stat-block .n{
  font-family:var(--serif);font-size:clamp(2.1rem,3.6vw,3.1rem);color:var(--brass);
  display:flex;align-items:baseline;gap:2px;
}
.stat-block .l{color:var(--muted);font-size:0.84rem;margin-top:0.4rem;}
@media(max-width:600px){.about-stats{grid-template-columns:1fr;}.stat-block:nth-child(odd){border-right:none;padding-right:0;}}

/* ---------- why choose ---------- */
.why{padding-bottom:6.5rem;}
.why-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem; border-top:1px solid var(--line);padding-top:2.6rem; }
.why-card{padding:1.8rem 0;border-right:1px solid var(--line);padding-right:1.6rem;}
.why-card:last-child{border-right:none;}
.why-card .n{font-family:var(--serif);color:var(--brass);font-size:1.1rem;margin-bottom:0.9rem;}
.why-card h4{font-family:var(--serif);font-weight:400;font-size:1.25rem;margin-bottom:0.6rem;}
.why-card p{color:var(--muted);font-size:0.86rem;line-height:1.6;}
@media(max-width:900px){ .why-grid{grid-template-columns:1fr 1fr;} .why-card{border-right:none;border-bottom:1px solid var(--line);padding-bottom:1.8rem;} }
@media(max-width:560px){.why-grid{grid-template-columns:1fr;}}

/* testimonial rotator — one card visible at a time, auto-cycling,
   with dot navigation; degrades to "just show the first one" if
   JS never runs, since only .is-active is display:block by default */
.testimonial-rotator{ margin-top:4rem;border-top:1px solid var(--line);padding-top:3rem; }
.testimonial-track{position:relative;min-height:168px;}
.result-card{
  border:1px solid var(--line);border-radius:12px;padding:2.2rem;
  background:rgba(244,241,234,0.02);
  position:absolute;inset:0;
  opacity:0;pointer-events:none;
  transition:opacity .6s var(--ease);
}
.result-card.is-active{opacity:1;pointer-events:auto;position:relative;}
.result-card .quote{font-family:var(--serif);font-size:1.25rem;line-height:1.55;font-style:italic;margin-bottom:1.3rem;max-width:60ch;}
.result-card .who{font-size:0.85rem;color:var(--muted);}
.result-card .who b{color:var(--ink);font-weight:500;}
.testimonial-dots{display:flex;gap:8px;margin-top:1.6rem;}
.testimonial-dots button{
  width:8px;height:8px;border-radius:50%;background:var(--line);
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.testimonial-dots button.is-active{background:var(--brass);transform:scale(1.3);}
.placeholder-note{color:var(--muted);font-size:0.78rem;margin-top:1.4rem;}

/* ---------- team ---------- */
.team{padding-bottom:8rem;}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;}
.team-card{border-top:1px solid var(--line);padding-top:1.4rem;}
.team-card .ph{
  aspect-ratio:3/4;background:var(--surface);border-radius:6px;margin-bottom:1rem;overflow:hidden;position:relative;
}
.team-card .ph .img{position:absolute;inset:0;width:100%;height:100%;transition:filter .5s var(--ease);}
.team-card h4{font-family:var(--serif);font-weight:400;font-size:1.15rem;}
.team-card p{color:var(--muted);font-size:0.82rem;margin-top:0.2rem;}
@media(max-width:900px){.team-grid{grid-template-columns:repeat(2,1fr);}}

/* ---------- blog ---------- */
.blog{padding-bottom:8rem;}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;border-top:1px solid var(--line);padding-top:2.6rem;}
.blog-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:rgba(244,241,234,0.02);transition:border-color .4s var(--ease), transform .4s var(--ease);}
.blog-card:hover{border-color:rgba(227,166,62,0.45);transform:translateY(-5px);}
.blog-card .thumb{aspect-ratio:16/10;position:relative;}
.blog-card .thumb .img{position:absolute;inset:0;width:100%;height:100%;}
.blog-card .body{padding:1.6rem 1.6rem 1.8rem;}
.blog-card .meta{display:flex;gap:0.8rem;font-size:0.76rem;color:var(--muted);margin-bottom:0.7rem;}
.blog-card h3{font-family:var(--serif);font-weight:400;font-size:1.25rem;line-height:1.3;margin-bottom:0.7rem;}
.blog-card p{color:var(--muted);font-size:0.86rem;line-height:1.55;}
.blog-card .read{display:inline-block;margin-top:1rem;font-size:0.8rem;color:var(--brass);}
@media(max-width:900px){.blog-grid{grid-template-columns:1fr;}}

/* ---------- marquee (multi-direction) ---------- */
.marquee-section{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:#0a0a0d;padding:3.2rem 0;}
.marquee-row{overflow:hidden;padding:0.8rem 0;}
.marquee-track{display:flex;gap:5vw;white-space:nowrap;width:max-content;}
.marquee-track.dir-left{animation:marqueeLeft 34s linear infinite;}
.marquee-track.dir-right{animation:marqueeRight 30s linear infinite;}
.marquee-track span{
  font-family:var(--serif);font-size:clamp(1.4rem,2.8vw,2.2rem);color:var(--muted);
  font-style:italic;font-weight:300;
}
.marquee-row.row-2 .marquee-track span{color:rgba(139,139,148,0.55);}
@keyframes marqueeLeft{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes marqueeRight{from{transform:translateX(-50%);}to{transform:translateX(0);}}

/* ---------- contact ---------- */
.contact{padding:9rem 0 5rem;}
.contact-cta{ font-family:var(--serif);font-weight:320; font-size:clamp(2.4rem,7.2vw,7rem);line-height:0.98; max-width:18ch; }
.contact-cta em{font-style:italic;color:var(--brass);font-weight:300;}
.contact-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:6vw;margin-top:5rem;}
.contact-info{display:flex;flex-direction:column;gap:2.6rem;}
.info-block .l{color:var(--muted);font-size:0.8rem;margin-bottom:0.5rem;}
.info-block .v{font-family:var(--serif);font-size:1.5rem;}
form{display:flex;flex-direction:column;gap:1.6rem;}
.field{border-bottom:1px solid var(--line);padding-bottom:0.9rem;position:relative;}
.field label{display:block;font-size:0.78rem;color:var(--muted);margin-bottom:0.6rem;}
.field input,.field textarea{
  width:100%;background:transparent;border:none;outline:none;color:var(--ink);
  font-family:var(--sans);font-size:1rem;resize:none;
}
.field::after{
  content:'';position:absolute;left:0;bottom:-1px;width:0;height:1px;background:var(--brass);
  transition:width .4s var(--ease);
}
.field.focus::after{width:100%;}
.submit-row{display:flex;justify-content:flex-start;margin-top:0.8rem;}

footer{
  border-top:1px solid var(--line);padding:2.6rem 0 3rem;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;
}
footer .fl{display:flex;gap:2rem;}
footer a{color:var(--muted);font-size:0.82rem;}
footer a:hover{color:var(--ink);}
footer .fname{font-family:var(--serif);font-size:1rem;color:var(--muted);}

/* ---------- unified scroll-reveal "template" ----------
   Applied the same way across every section: fade + rise + a
   slight 3D tilt (rotateX), so scrolling the whole site feels
   consistent rather than each section doing its own thing.
   Visible by default; JS opts in to the hidden pre-state only
   once GSAP is confirmed present. */
.reveal{opacity:1;transform:none;}
.js-anim-ready .reveal{opacity:0;transform:translateY(30px) rotateX(6deg);}
.reveal{transform-style:preserve-3d;}
main, section{perspective:1200px;}

@media(max-width:800px){
  .wrap{padding:0 6vw;}
  .contact-grid{grid-template-columns:1fr;}
}

/* ==========================================================================
   Added for the WordPress theme build (not in the original static design)
   ========================================================================== */

/* generic content image now used for real uploads (team photos, blog
   thumbnails, about visual) — falls back to the JS canvas placeholder
   only when no real image is set (see .img.js-placeholder) */
.about-visual .img img,
.team-card .img img,
.blog-card .thumb .img img{
  width:100%;height:100%;object-fit:cover;display:block;
}

/* WordPress core image/caption/alignment classes, kept minimal so
   editor-inserted content on single posts still looks correct */
.wp-caption{max-width:100%;}
.wp-caption-text{color:var(--muted);font-size:0.8rem;margin-top:0.5rem;}
.alignleft{float:left;margin:0 1.5rem 1rem 0;}
.alignright{float:right;margin:0 0 1rem 1.5rem;}
.aligncenter{display:block;margin:0 auto 1rem;}
.screen-reader-text{
  position:absolute !important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;
  overflow:hidden;white-space:nowrap;
}

/* single post / page content, styled to match the rest of the site */
.single-content, .page-content{
  padding:calc(var(--header-h) + 4rem) 0 6rem;max-width:74ch;margin:0 auto;
}
.single-content h1{font-family:var(--serif);font-weight:340;font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.1;margin-bottom:1.4rem;}
.single-content .entry-meta{color:var(--muted);font-size:0.85rem;margin-bottom:2.2rem;}
.single-content .entry-thumb{border-radius:14px;overflow:hidden;border:1px solid var(--line);margin-bottom:2.4rem;aspect-ratio:16/9;}
.single-content .entry-thumb img{width:100%;height:100%;object-fit:cover;}
.single-content .entry-body{color:var(--muted);font-size:1.02rem;line-height:1.8;}
.single-content .entry-body p{margin-bottom:1.3rem;}
.single-content .entry-body h2,.single-content .entry-body h3{font-family:var(--serif);color:var(--ink);font-weight:400;margin:2.2rem 0 1rem;}
.single-content .entry-body a{color:var(--brass);text-decoration:underline;text-underline-offset:3px;}
.single-content .entry-body blockquote{border-left:2px solid var(--brass);padding-left:1.4rem;font-style:italic;color:var(--ink);margin:1.6rem 0;}
.single-content .entry-body img{border-radius:10px;margin:1.6rem 0;}
.back-link{display:inline-block;margin-bottom:2rem;color:var(--muted);font-size:0.85rem;}
.back-link:hover{color:var(--brass);}

/* archive / blog listing page (front page blog section reuses .blog-grid) */
.archive-head{padding:calc(var(--header-h) + 3.4rem) 0 1rem;}
.archive-head h1{font-family:var(--serif);font-weight:340;font-size:clamp(2rem,4.4vw,3.2rem);}
.wp-pagination{display:flex;gap:0.8rem;justify-content:center;padding:3rem 0 6rem;}
.wp-pagination a, .wp-pagination span{
  border:1px solid var(--line);border-radius:100px;padding:9px 18px;font-size:0.85rem;color:var(--muted);
}
.wp-pagination .current{border-color:var(--brass);color:var(--brass);}
.no-results{padding:6rem 0;color:var(--muted);}

/* comments (kept simple, only shown if a theme user enables discussion) */
.comments-area{max-width:74ch;margin:0 auto;padding:2rem 0 6rem;}
.comments-area .comment-list{list-style:none;margin:2rem 0;}
.comments-area .comment{border-top:1px solid var(--line);padding:1.6rem 0;}
.comments-area textarea, .comments-area input[type=text], .comments-area input[type=email]{
  width:100%;background:var(--surface);border:1px solid var(--line);border-radius:8px;color:var(--ink);
  padding:0.8rem 1rem;font-family:var(--sans);margin-bottom:1rem;
}
.comments-area .comment-form button{border:1px solid var(--line);border-radius:100px;padding:12px 26px;}

/* contact form: success / error notice from the real server-side handler */
.form-notice{
  border-radius:10px;padding:1rem 1.2rem;font-size:0.88rem;margin-bottom:1.4rem;
  border:1px solid var(--line);
}
.form-notice.success{border-color:rgba(227,166,62,0.5);color:var(--brass);}
.form-notice.error{border-color:rgba(255,90,90,0.5);color:#ff8a8a;}
/* honeypot spam trap field — hidden from real visitors, bots fill it in */
.hp-field{position:absolute;left:-9999px;top:-9999px;opacity:0;pointer-events:none;}

/* team member "read more" bio toggle, only appears if a bio was written */
.team-card .bio-toggle{display:inline-block;margin-top:0.6rem;font-size:0.78rem;color:var(--brass);cursor:pointer;}
.team-card .bio{display:none;color:var(--muted);font-size:0.82rem;line-height:1.55;margin-top:0.6rem;}
.team-card.bio-open .bio{display:block;}

/* ---------- bottom "bookend" 3D sphere section ----------
   Mirrors the hero's icosahedron object lower on the page, behind the
   closing call-to-action, so the premium 3D moment isn't only at the
   very top of the site. */
.cta-visual{
  position:relative;overflow:hidden;
  padding:7rem 0 2rem;
  background: radial-gradient(ellipse 900px 500px at 50% 100%, rgba(227,166,62,0.10), transparent 65%), #08080a;
  border-top:1px solid var(--line);
}
#cta-canvas{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:0.9;
  pointer-events:none;
}
.cta-visual .cta-inner{position:relative;z-index:1;text-align:center;max-width:52ch;margin:0 auto;}
.cta-visual .cta-eyebrow{display:flex;align-items:center;justify-content:center;gap:0.6rem;font-size:0.8rem;color:var(--muted);margin-bottom:1.2rem;}
.cta-visual .cta-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--brass);}
.cta-visual h2{font-family:var(--serif);font-weight:340;font-size:clamp(1.9rem,4.6vw,3.2rem);line-height:1.08;margin-bottom:1.4rem;}
.cta-visual h2 em{font-style:italic;color:var(--brass);font-weight:300;}
.cta-visual p{color:var(--muted);font-size:1rem;line-height:1.65;margin-bottom:2.2rem;}
.cta-orbit-ring{
  position:absolute;top:8%;left:6%;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(244,241,234,0.35);z-index:1;pointer-events:none;
}
.cta-orbit-ring::after{
  content:'';position:absolute;top:50%;left:50%;width:6px;height:6px;margin:-3px;
  border-radius:50%;background:var(--brass);
}
@media(max-width:900px){ #cta-canvas{opacity:0.55;} }