/*
Theme Name: Houston Legal Web
Theme URI: https://houstonlegalweb.com
Author: Francis Ariole
Author URI: https://francisariole.com
Description: Custom WordPress theme for Houston Legal Web — a web design and digital marketing agency serving Houston law firms.
Version: 1.0.5
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: houston-legal-web
*/

/* ============================================================
   RESET & BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Mulish',system-ui,sans-serif;background:#F8F4EB;color:#2A3A2D;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{font-family:'Marcellus',Georgia,serif;color:#0F1210;line-height:1.15;letter-spacing:-0.01em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:'Mulish',sans-serif;cursor:pointer}
input,select,textarea{font-family:'Mulish',sans-serif}

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root{
  --ink:#0A1410;
  --f950:#0F2018;
  --f900:#133022;
  --f800:#1B4332;
  --f700:#245F48;
  --f600:#2D6A4F;
  --f500:#40916C;
  --f400:#52B788;
  --f200:#95D5B2;
  --f100:#D8EDDF;
  --g400:#C49228;
  --g300:#D4AA44;
  --g100:#F0E2B0;
  --cr50:#FDFCF8;
  --cr100:#F8F4EB;
  --cr200:#F0EAD8;
  --cr300:#E4DBC6;
  --white:#FFFFFF;
  --t900:#0F1210;
  --t700:#2A3A2D;
  --t500:#52605A;
  --t300:#8A9A8D;
  --od1:#E8F4EC;
  --od2:#A0C8B0;
  --od3:#5A8068;
  --r-sm:8px;--r-md:16px;--r-lg:24px;--r-xl:40px;--r-pill:999px;
  --t:0.25s ease;--ts:0.45s cubic-bezier(0.4,0,0.2,1);
  --sh-xs:0 1px 4px rgba(10,20,16,.08);
  --sh-sm:0 2px 12px rgba(10,20,16,.10);
  --sh-md:0 4px 28px rgba(10,20,16,.13);
  --sh-lg:0 8px 48px rgba(10,20,16,.18);
  --sh-g:0 8px 40px rgba(27,67,50,.3);
}

/* ============================================================
   LAYOUT
   ============================================================ */
.container{max-width:1360px;margin:0 auto;padding:0 clamp(24px,4vw,72px)}
.section{padding:clamp(64px,8vw,108px) 0}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:var(--r-pill);font-family:'Mulish',sans-serif;font-weight:700;font-size:15px;cursor:pointer;transition:var(--t);border:none;white-space:nowrap;letter-spacing:.01em}
.btn-primary{background:var(--f800);color:var(--white);padding:16px 38px;box-shadow:var(--sh-g)}
.btn-primary:hover{background:var(--f700);transform:translateY(-2px);box-shadow:0 12px 48px rgba(27,67,50,.35)}
.btn-outline-dark{background:transparent;color:var(--f800);border:2px solid var(--f800);padding:14px 34px}
.btn-outline-dark:hover{background:var(--f800);color:var(--white)}
.btn-outline-light{background:transparent;color:var(--white);border:2px solid rgba(255,255,255,.3);padding:14px 34px}
.btn-outline-light:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.6)}
.btn-gold{background:linear-gradient(135deg,var(--g400),var(--g300));color:var(--f950);padding:16px 38px;font-weight:800;box-shadow:0 8px 32px rgba(196,146,40,.25)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(196,146,40,.35)}
.btn-lg{padding:19px 46px;font-size:16px}
.btn svg{width:18px;height:18px;flex-shrink:0}
.btn-text{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:var(--f600);background:none;border:none;cursor:pointer;transition:var(--t);padding:0}
.btn-text svg{width:16px;height:16px;transition:transform var(--t)}
.btn-text:hover{color:var(--f500)}
.btn-text:hover svg{transform:translateX(4px)}

/* ============================================================
   EYEBROW
   ============================================================ */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--f600);margin-bottom:20px}
.eyebrow::before{content:'';display:block;width:28px;height:2px;background:var(--f500);flex-shrink:0}
.eyebrow-light{color:var(--f200)}
.eyebrow-light::before{background:var(--f400)}

/* ============================================================
   NAVIGATION
   ============================================================ */
#nav{position:fixed;top:0;left:0;right:0;z-index:200;padding:22px 0;transition:background var(--t),box-shadow var(--t),padding var(--t)}
#nav.scrolled{background:rgba(10,20,16,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 1px 0 rgba(255,255,255,.06);padding:14px 0}
.nav-inner{display:flex;align-items:center;justify-content:space-between;max-width:1360px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.nav-logo{display:flex;align-items:center;gap:10px;font-family:'Marcellus',serif;font-size:18px;color:var(--white)}
.nav-mark{width:36px;height:36px;border-radius:8px;background:var(--f600);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nav-mark svg{width:18px;height:18px;color:var(--white)}
.nav-logo .gold{color:var(--g300)}
.nav-links{display:flex;align-items:center;gap:34px;list-style:none}
.nav-links a{font-size:14px;font-weight:600;color:rgba(255,255,255,.6);transition:color var(--t)}
.nav-links a:hover{color:var(--white)}
.nav-actions{display:flex;align-items:center;gap:12px}
.nav-ham{display:none;background:none;border:none;color:var(--white);padding:6px;cursor:pointer}
.nav-ham svg{width:22px;height:22px}

/* ============================================================
   MOBILE NAV
   ============================================================ */
.mob-nav{position:fixed;inset:0;z-index:190;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;opacity:0;pointer-events:none;transition:opacity var(--ts)}
.mob-nav.open{opacity:1;pointer-events:all}
.mob-nav a,.mob-nav button{font-family:'Marcellus',serif;font-size:30px;color:var(--white);background:none;border:none;cursor:pointer;transition:color var(--t)}
.mob-nav a:hover,.mob-nav button:hover{color:var(--g300)}
.mob-close{position:absolute;top:24px;right:24px;background:none;border:none;color:var(--white);cursor:pointer;padding:8px}
.mob-close svg{width:24px;height:24px}

/* ============================================================
   HERO
   ============================================================ */
#hero{min-height:100vh;background:var(--ink);position:relative;overflow:hidden;display:flex;flex-direction:column}
.hero-bg{position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse 110% 80% at 65% 35%,rgba(27,67,50,.55) 0%,transparent 55%),radial-gradient(ellipse 70% 60% at 5% 85%,rgba(15,32,24,.8) 0%,transparent 50%),linear-gradient(155deg,var(--f950) 0%,var(--ink) 55%,#050D08 100%)}
.hero-grid-pat{position:absolute;inset:0;z-index:0;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:72px 72px;mask-image:radial-gradient(ellipse 90% 80% at 50% 50%,black 20%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 50%,black 20%,transparent 75%)}
.hero-arc{position:absolute;right:-160px;top:-160px;width:660px;height:660px;border-radius:50%;border:1px solid rgba(64,145,108,.12);box-shadow:inset 0 0 80px rgba(64,145,108,.05);z-index:0}
.hero-arc2{position:absolute;right:-60px;top:-60px;width:460px;height:460px;border-radius:50%;border:1px solid rgba(64,145,108,.07);z-index:0}
.hero-body{position:relative;z-index:1;display:grid;grid-template-columns:65% 35%;gap:32px;align-items:center;flex:1;padding:130px 0 72px}
.hero-left{padding-right:0}
.hero-ey{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--f300,#74B496);margin-bottom:28px}
.hero-ey span{display:inline-block;width:24px;height:1px;background:var(--f400)}
.hero-h1{font-family:'Marcellus',serif;font-size:clamp(48px,7vw,104px);color:var(--white);line-height:1.03;letter-spacing:-.03em;margin-bottom:28px}
.hero-h1 .ital{font-style:italic;color:var(--g300)}
.hero-sub{font-size:18px;line-height:1.75;color:var(--od2);max-width:600px;margin-bottom:44px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:52px}
.hero-trust{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--od3);font-weight:500}
.trust-avs{display:flex}
.trust-avs span{width:30px;height:30px;border-radius:50%;background:var(--f800);border:2px solid var(--f700);display:flex;align-items:center;justify-content:center;font-family:'Marcellus',serif;font-size:11px;color:var(--f300,#74B496)}
.trust-avs span:not(:first-child){margin-left:-10px}

/* Hero image side */
.hero-right{position:relative}
.hero-img-box{width:100%;aspect-ratio:4/5;border-radius:var(--r-lg);background:linear-gradient(160deg,var(--f800) 0%,var(--f950) 55%,#0A1A10 100%);border:1px solid rgba(64,145,108,.18);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.hero-img-box::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 40%,rgba(64,145,108,.14) 0%,transparent 55%),radial-gradient(circle at 75% 75%,rgba(27,67,50,.2) 0%,transparent 50%)}
.hero-img-box::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:40px 40px}
.hero-img-ph{position:relative;z-index:1;text-align:center}
.hero-img-ph .ph-icon{width:52px;height:52px;margin:0 auto;border-radius:50%;border:1px dashed rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center}
.hero-img-ph .ph-icon svg{width:22px;height:22px;color:rgba(255,255,255,.25)}
.hero-img-ph p{font-size:11px;font-weight:700;color:rgba(255,255,255,.22);letter-spacing:.1em;text-transform:uppercase;margin-top:10px}

/* Hero float cards */
.hfloat1{position:absolute;bottom:-20px;left:-36px;z-index:2;background:var(--white);border-radius:var(--r-md);padding:20px 24px;box-shadow:var(--sh-lg);min-width:176px}
.hf-num{font-family:'Marcellus',serif;font-size:38px;color:var(--f800);line-height:1}
.hf-label{font-size:12px;color:var(--t500);font-weight:600;margin-top:4px}
.hf-ind{display:flex;align-items:center;gap:6px;margin-top:10px}
.hf-dot{width:7px;height:7px;border-radius:50%;background:#22C55E;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.4)}}
.hf-ind span{font-size:11px;color:var(--t300);font-weight:600}
.hfloat2{position:absolute;top:36px;right:-28px;z-index:2;background:var(--f800);border-radius:var(--r-md);padding:18px 22px;box-shadow:var(--sh-g)}
.hfloat2 p{font-size:12px;color:var(--f200);font-weight:600;margin-bottom:6px}
.hf2-stat{display:flex;align-items:baseline;gap:4px}
.hf2-big{font-family:'Marcellus',serif;font-size:28px;color:var(--white)}
.hf2-unit{font-size:14px;color:var(--f300,#74B496);font-weight:700}

/* Hero stats bar */
.hero-bar{position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.07);padding:30px 0}
.hero-stats{display:flex;align-items:center;justify-content:space-around;flex-wrap:wrap;gap:20px;max-width:1360px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.hs-item{text-align:center}
.hs-num{font-family:'Marcellus',serif;font-size:26px;color:var(--white);line-height:1}
.hs-label{font-size:12px;color:var(--od3);margin-top:4px;font-weight:600}
.hs-div{width:1px;height:36px;background:rgba(255,255,255,.09)}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee-wrap{background:var(--f800);padding:17px 0;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.06)}
.marquee-track{display:flex;align-items:center;animation:marq 32s linear infinite;width:max-content}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-track:hover{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}
.mq-item{display:flex;align-items:center;gap:14px;padding:0 32px;white-space:nowrap;font-size:13px;font-weight:700;color:rgba(255,255,255,.45);letter-spacing:.06em;text-transform:uppercase}
.mq-dot{width:4px;height:4px;border-radius:50%;background:var(--f400)}

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
@media(prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease}
  .rv.in{opacity:1;transform:translateY(0)}
  .rv-d1{transition-delay:.1s}.rv-d2{transition-delay:.2s}.rv-d3{transition-delay:.3s}.rv-d4{transition-delay:.4s}
}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

/* ============================================================
   INTERACTIVE STATES
   ============================================================ */
.srv-row:hover{border-left-color:var(--f500)!important}
.work-card:hover{transform:translateY(-6px)!important;box-shadow:var(--sh-md)!important}
.t-card:hover{transform:translateY(-4px)!important;box-shadow:var(--sh-md)!important}
.pc-card:hover{transform:translateY(-6px)!important;box-shadow:var(--sh-md)!important}
.rnum-c:hover{background:var(--f800)!important}
.play-ring:hover{background:rgba(255,255,255,.22)!important;transform:scale(1.08)}
.fsoc:hover{border-color:var(--f500)!important;color:var(--f300)!important}
.flink:hover{color:var(--white)!important}
input:focus,select:focus,textarea:focus{border-color:var(--f500)!important;background:var(--white)!important;box-shadow:0 0 0 3px rgba(64,145,108,.12)!important}

/* ============================================================
   RESPONSIVE — TABLET (1024px)
   ============================================================ */
@media(max-width:1024px){
  .hero-body{grid-template-columns:1fr;padding:130px 0 60px}
  .hero-right{display:none}
  .process-connector{display:none}
  #statement .container>div{grid-template-columns:1fr!important;gap:28px!important}
  #services .container>div{grid-template-columns:1fr!important;gap:40px!important}
  #services .container>div>div:first-child{position:static!important}
  #work .container>div:last-child{grid-template-columns:1fr!important}
  #results .container>div:first-child{grid-template-columns:1fr!important;gap:48px!important}
  #local .container>div{grid-template-columns:1fr!important;gap:48px!important}
  footer .container>div:first-child{grid-template-columns:1fr 1fr!important;gap:36px!important}
}

/* ============================================================
   RESPONSIVE — MOBILE (768px)
   ============================================================ */
@media(max-width:768px){
  /* Nav */
  #nav{padding:16px 0}
  .nav-links,.nav-actions .btn-outline-light{display:none}
  .nav-ham{display:flex}
  /* Hero */
  .hero-h1{font-size:clamp(40px,10vw,60px)}
  .hs-div{display:none}
  /* Statement image: reduce height when stacked */
  .stmt-img-wrap img{height:280px!important}
  /* Process: 2-column grid */
  #process .container>div:last-child{grid-template-columns:1fr 1fr!important;gap:24px!important}
  #process .container>div:last-child>div:nth-child(1){display:none!important}
  /* Testimonials */
  #testimonials .container>div:nth-child(2){grid-template-columns:1fr!important}
  #testimonials .container>div:nth-child(3){grid-template-columns:1fr!important}
  /* Pricing */
  #pricing .container>div:last-child{grid-template-columns:1fr!important}
  #pricing .container>div:last-child>div:nth-child(2){transform:none!important}
  /* Footer */
  footer .container>div:first-child{grid-template-columns:1fr!important}
  footer .container>div:last-child{flex-direction:column!important;text-align:center!important}
  /* Modal */
  #modal-panel{padding:28px 20px!important;border-radius:var(--r-lg)!important}
  /* Form: stack columns */
  #contact-form>div:first-child,
  #contact-form>div:nth-child(3){grid-template-columns:1fr!important}
}

/* ============================================================
   RESPONSIVE — PHABLET (640px)
   ============================================================ */
@media(max-width:640px){
  /* Local search card bars: stack label above bar */
  .search-bar-row{flex-wrap:wrap!important;gap:6px 0!important}
  .search-label{min-width:unset!important;width:100%}
  .search-bar-track{width:100%}
  /* Search card: reduce padding */
  .search-card{padding:24px!important}
}

/* ============================================================
   RESPONSIVE — SMALL MOBILE (480px)
   ============================================================ */
@media(max-width:480px){
  /* Process: single column */
  #process .container>div:last-child{grid-template-columns:1fr!important}
  /* Results numbers: keep 2-col */
  #results .container>div>div:last-child{grid-template-columns:1fr 1fr!important}
  /* Results number cell padding */
  .rnum-c{padding:28px 16px!important}
  /* Statement image: smaller on phones */
  .stmt-img-wrap img{height:220px!important}
  /* CTA section: full-width buttons */
  #cta-section .btn{width:100%!important;justify-content:center!important}
  /* Hero stats: 2×2 grid */
  .hero-stats{display:grid!important;grid-template-columns:1fr 1fr!important;justify-items:center;gap:20px!important}
  /* Pricing: remove featured card negative margin */
  #pricing .container>div:last-child>div:nth-child(2){margin-top:0!important}
}

/* ============================================================
   RESPONSIVE — TINY PHONES (380px)
   ============================================================ */
@media(max-width:380px){
  /* Hide nav action buttons so logo + hamburger have room */
  .nav-actions{display:none!important}
  /* Reduce container padding slightly */
  .container{padding:0 16px!important}
  /* Hero padding */
  .hero-stats{padding:0 16px!important}
  /* Footer bottom bar */
  footer .container>div:last-child>div{gap:16px!important}
}