/*
Theme Name: Trevor Law Group
Theme URI: https://trevorlawgroup.com
Author: Trevor Law Group
Author URI: https://trevorlawgroup.com
Description: Custom production theme for Trevor Law Group — a premium, editorial, dark-mode digital-litigation practice site. Practice Areas are a custom post type; Insights uses native Posts. Built without a page builder; all admin-editable copy lives in the Customizer.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.7
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: trevor-law-group
Domain Path: /languages

This stylesheet also serves as WordPress's required theme stylesheet (per the
header above) and is enqueued as the site's main stylesheet in inc/enqueue.php.
It is a direct, unmodified port of the approved static design system — no
selectors were changed for WordPress; only this header block was added.
*/

/* =========================================================
   ACCESSIBILITY UTILITIES (WordPress conventions)
========================================================= */
.screen-reader-text{
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; margin: -1px; overflow: hidden; padding: 0;
  position: absolute !important; width: 1px; word-wrap: normal !important;
}
.skip-link{
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 1000;
  background: var(--gold, #b6975f);
  color: #0a0a09;
  padding: 10px 18px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: top .25s ease;
}
.skip-link:focus{ top: 12px; }

/* =========================================================
   TREVOR LAW GROUP — DESIGN SYSTEM
   Premium digital litigation practice. Dark, editorial, minimal.
========================================================= */

:root{
  --bg:            #0a0a09;
  --bg-alt:        #101010;
  --bg-raise:      #141413;
  --fg:            #f3f0e8;
  --fg-dim:        rgba(243,240,232,0.62);
  --fg-dimmer:     rgba(243,240,232,0.36);
  --gold:          #b6975f;
  --gold-soft:     rgba(182,151,95,0.55);
  --line:          rgba(243,240,232,0.12);
  --line-soft:     rgba(243,240,232,0.07);

  --font-display:  'Archivo', sans-serif;
  --font-body:     'Inter', sans-serif;

  --container:     92vw;
  --max:           1400px;

  --ease:          cubic-bezier(.16,.84,.44,1);
  --ease-soft:     cubic-bezier(.4,0,.2,1);
}

/* ---------- reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul,ol{ list-style: none; margin:0; padding:0; }
h1,h2,h3,h4,p{ margin: 0; }
button{ font-family: inherit; cursor: pointer; }
input, select, textarea{ font-family: inherit; }

::selection{ background: var(--gold); color: #0a0a09; }

/* ---------- grain overlay ---------- */
.grain{
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
  /* Promote to its own compositor layer so the blend mode is handled by the
     GPU at composite time instead of being repainted on the CPU every time
     content scrolls underneath this fixed, full-viewport overlay. */
  transform: translateZ(0);
  will-change: transform;
}

/* ---------- custom cursor (desktop only) ---------- */
.cursor-dot{
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  pointer-events: none;
  z-index: 998;
  transform: translate(-50%,-50%);
  transition: width .25s var(--ease), height .25s var(--ease), background .25s var(--ease), opacity .25s;
  opacity: 0;
}
@media (hover:hover) and (pointer:fine){
  .cursor-dot{ opacity: 1; }
}
.cursor-dot.is-active{
  width: 34px; height: 34px;
  background: transparent;
  border: 1px solid var(--gold);
}

/* ---------- helpers ---------- */
.section-label{
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-body);
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 22px;
}
.section-label .dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
  display: inline-block;
}
.section-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 46px);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.section-head{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 4vw;
}

/* Keeps section headings clear of the fixed header (now taller with the
   utility bar) when reached via a nav anchor link. */
#practice-areas, #about, #media, #insights, #contact{
  scroll-margin-top: 130px;
}
@media (max-width: 640px){
  #practice-areas, #about, #media, #insights, #contact{ scroll-margin-top: 110px; }
}
.accent{ color: var(--gold); font-style: italic; }
.placeholder-label{
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.placeholder-tag{
  font-size: 13px;
  color: var(--fg-dimmer);
  font-style: italic;
}

/* ---------- reveal animation ---------- */
[data-reveal], [data-reveal-line]{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
[data-reveal].is-visible, [data-reveal-line].is-visible{
  opacity: 1;
  transform: translateY(0);
}
.line{ display:block; overflow:hidden; }
[data-reveal-line]{ display:inline-block; }

/* ---------- buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 999px;
  white-space: nowrap;
  /* Scope the transition to the specific properties that actually change on
     hover instead of `all`, so the browser isn't checking every animatable
     property for changes each frame. */
  transition: color .35s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease);
}
.btn-outline{
  border: 1px solid var(--line);
  color: var(--fg);
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.btn-outline::before{
  content:"";
  position:absolute; inset:0;
  background: var(--fg);
  transform: translateY(100%);
  transition: transform .4s var(--ease);
  z-index:-1;
}
.btn-outline:hover{ color:#0a0a09; border-color: var(--fg); }
.btn-outline:hover::before{ transform: translateY(0); }

.btn-solid{
  background: var(--fg);
  color: #0a0a09;
  border: 1px solid var(--fg);
}
.btn-solid:hover{
  background: var(--gold);
  border-color: var(--gold);
}

/* =========================================================
   NAV
========================================================= */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  padding: 0 4vw;
  display: flex;
  flex-direction: column;
  transition: background .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled{
  background: rgba(10,10,9,0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

/* ---------- utility bar ----------
   A thin editorial metadata strip, not a second nav. Both halves are
   flex-shrink:0 and single-line by design, so at any width where the row
   would otherwise get tight, the row simplifies instead of wrapping (see
   the 980px breakpoint below, which matches where the main nav itself
   goes to the mobile menu). */
.utility-bar{
  border-bottom: 1px solid var(--line-soft);
}
.utility-inner{
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 8px 0;
}
.utility-left{
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.utility-name{
  color: var(--fg-dim);
  font-weight: 600;
}
.utility-slash{
  color: var(--gold-soft);
  font-weight: 400;
}
.utility-title{
  color: var(--fg-dimmer);
  font-weight: 400;
  letter-spacing: 0.06em;
}

.utility-right{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.utility-email{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--fg-dimmer);
  transition: color .3s;
}
.utility-icon{ flex-shrink: 0; opacity: 0.85; transition: opacity .3s; }
.utility-email:hover{ color: var(--gold); }
.utility-email:hover .utility-icon{ opacity: 1; }
.utility-sep{
  width: 1px; height: 11px;
  background: var(--line);
  display: inline-block;
}
.utility-x{
  display: inline-flex;
  align-items: center;
  color: var(--fg-dimmer);
  transition: color .3s;
}
.utility-x:hover{ color: var(--gold); }

.nav-inner{
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  transition: padding .4s var(--ease);
}
.site-header.is-scrolled .nav-inner{ padding: 14px 0; }
.nav-logo{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav-links{
  display: flex;
  gap: 34px;
  margin: 0 auto;
}
.nav-links a{
  position: relative;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-dim);
  padding: 4px 0;
  transition: color .3s;
}
.nav-links a::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:100%; height:1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav-links a:hover{ color: var(--fg); }
.nav-links a:hover::after{ transform: scaleX(1); }

.nav-cta{ flex-shrink: 0; }

.nav-toggle{
  display: none;
  width: 30px; height: 20px;
  position: relative;
  background: none;
  border: none;
  z-index: 600;
}
.nav-toggle span{
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--fg);
  transition: transform .35s var(--ease), opacity .3s;
}
.nav-toggle span:first-child{ top: 0; }
.nav-toggle span:last-child{ bottom: 0; }
.nav-toggle[aria-expanded="true"] span:first-child{ transform: translateY(9.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child{ transform: translateY(-9.5px) rotate(-45deg); }

.mobile-menu{
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 400;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
  padding: 8vw;
  transform: translateY(-100%);
  transition: transform .55s var(--ease);
}
.mobile-menu.is-open{ transform: translateY(0); }
.mobile-menu nav{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.mobile-menu nav a{
  font-family: var(--font-display);
  font-size: 9vw;
  font-weight: 600;
  line-height: 1.05;
}

/* =========================================================
   HERO
========================================================= */
.hero{
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 0 4vw;
  border-bottom: 1px solid var(--line-soft);
}
.hero-canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.55;
}
.hero-grid{
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size: 6.25vw 6.25vw;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 40%, transparent 90%);
  pointer-events: none;
}
.hero-content{
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
  padding-top: 130px; /* clears the fixed header: ~90px nav row + ~35px utility bar */
}
.eyebrow{
  font-size: 12.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 26px;
}
.hero-title{
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(48px, 9vw, 132px);
  line-height: 0.96;
  letter-spacing: -0.02em;
  max-width: 20ch;
}
.hero-title em{
  font-style: italic;
  font-weight: 500;
  color: var(--gold);
}
.hero-sub{
  margin-top: 34px;
  max-width: 46ch;
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--fg-dim);
  line-height: 1.6;
}
.hero-meta{
  position: absolute;
  right: 4vw;
  bottom: 120px;
  z-index: 2;
}
.rotated{
  display: inline-block;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-dimmer);
}
.scroll-cue{
  position: absolute;
  left: 4vw;
  bottom: 40px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dimmer);
}
.scroll-line{
  width: 1px;
  height: 46px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.scroll-line i{
  position: absolute;
  top: 0;
  left: 0; right: 0;
  height: 100%;
  background: var(--gold);
  transform: translateY(-100%);
  animation: scrollDrip 2.4s var(--ease-soft) infinite;
  will-change: transform;
}
/* Runs continuously for the life of the page, so it's written as a transform
   (compositor-only) rather than animating `top` (which would force layout
   on every tick). Same visual motion, off the main thread. */
@keyframes scrollDrip{
  0%{ transform: translateY(-100%); }
  60%{ transform: translateY(100%); }
  100%{ transform: translateY(100%); }
}

/* =========================================================
   EDITORIAL INTRO
========================================================= */
.intro{
  max-width: var(--max);
  margin: 0 auto;
  padding: 160px 4vw;
}
.intro-grid{
  display: grid;
  grid-template-columns: 1fr 2.3fr;
  gap: 6vw;
  align-items: start;
}
.intro-kicker{
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--fg-dimmer);
  text-transform: uppercase;
  padding-top: 8px;
}
.intro-statement{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--fg);
}

/* =========================================================
   PRACTICE AREAS
========================================================= */
.practice-areas{
  padding: 60px 0 160px;
}
.practice-list{
  max-width: var(--max);
  margin: 60px auto 0;
  padding: 0 4vw;
  border-top: 1px solid var(--line);
}
.practice-item{
  position: relative;
  display: grid;
  grid-template-columns: 70px 1fr auto 28px;
  align-items: center;
  gap: 28px;
  padding: 34px 20px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.practice-item::before{
  content:"";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(182,151,95,0.10), transparent 70%);
  transform: translateX(-100%);
  transition: transform .55s var(--ease);
  z-index: 0;
}
.practice-item:hover::before{ transform: translateX(0); }

/* The "squeeze inward" hover effect previously animated left/right padding
   (a layout-triggering property on every hover). It's reproduced here with
   transform on the individual columns instead, so hover is compositor-only. */
.practice-index{
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--gold);
  letter-spacing: 0.04em;
  z-index: 1;
  transition: transform .5s var(--ease);
}
.practice-item:hover .practice-index{ transform: translateX(14px); }

.practice-name{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 2.6vw, 32px);
  letter-spacing: -0.01em;
  z-index: 1;
  transition: transform .5s var(--ease), color .4s;
}
.practice-item:hover .practice-name{ transform: translateX(14px); color: var(--fg); }

.practice-desc{
  z-index: 1;
  max-width: 34ch;
  font-size: 14px;
  color: var(--fg-dimmer);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
  display: none;
}
.practice-arrow{
  z-index: 1;
  font-size: 20px;
  color: var(--gold);
  opacity: 0;
  transform: translate(6px,8px) rotate(-45deg);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.practice-item:hover .practice-arrow{ opacity: 1; transform: translate(-14px,0) rotate(-45deg); }

/* =========================================================
   STATEMENT
========================================================= */
.statement{
  position: relative;
  padding: 200px 6vw;
  text-align: center;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-alt);
  overflow: hidden;
}
.statement-lines{
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(115deg, transparent 0 120px, var(--line-soft) 120px 121px);
  opacity: 0.5;
  pointer-events: none;
}
.statement-text{
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(30px, 5.4vw, 78px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  max-width: 16ch;
  margin: 0 auto;
}

/* =========================================================
   PROCESS
========================================================= */
.process{
  padding: 160px 0;
}
.process-track{
  position: relative;
  max-width: var(--max);
  margin: 70px auto 0;
  padding: 0 4vw;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
.process-track::before{
  content:"";
  position: absolute;
  top: 8px;
  left: 4vw; right: 4vw;
  height: 1px;
  background: var(--line);
}
.process-progress{
  position: absolute;
  top: 8px;
  left: 4vw;
  right: 4vw;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.2s var(--ease);
  will-change: transform;
}
.process-step{ position: relative; padding-top: 40px; }
.process-num{
  position: absolute;
  top: -4px; left: 0;
  width: 16px; height: 16px;
  transform: translateY(-50%);
  font-size: 0;
}
.process-num::before{
  content: attr(data-num);
}
.process-step .process-num{
  position: static;
  display: block;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--gold);
  margin-bottom: 18px;
  transform: none;
}
.process-step h3{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2vw, 26px);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.process-step p{
  font-size: 14.5px;
  color: var(--fg-dim);
  line-height: 1.6;
  max-width: 32ch;
}

/* =========================================================
   ABOUT
========================================================= */
.about{ padding: 160px 0; }
.about-grid{
  max-width: var(--max);
  margin: 60px auto 0;
  padding: 0 4vw;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 6vw;
  align-items: start;
}
.about-text{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.5;
  color: var(--fg);
}
.about-placeholder{
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 28px;
}
.about-placeholder p:not(.placeholder-label):not(.placeholder-tag):not(.about-owner-name):not(.about-owner-title){
  font-size: 14.5px;
  color: var(--fg-dim);
  margin-bottom: 10px;
  line-height: 1.6;
}
.about-owner-name{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  color: var(--fg);
  margin-bottom: 4px;
}
.about-owner-title{
  font-size: 14px;
  color: var(--fg-dimmer);
  margin-bottom: 18px;
}

/* =========================================================
   INSIGHTS
========================================================= */
.insights{ padding: 160px 0; }
.insights-grid{
  max-width: var(--max);
  margin: 60px auto 0;
  padding: 0 4vw;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.insight-card{
  background: var(--bg);
  padding: 44px 30px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: background .4s var(--ease);
}
.insight-card:hover{ background: var(--bg-raise); }
.insight-tag{
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.insight-card h3{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  margin-top: 28px;
  color: var(--fg-dim);
}

/* =========================================================
   CONTACT
========================================================= */
.contact{
  padding: 160px 0 100px;
  border-top: 1px solid var(--line-soft);
}
.contact-grid{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 4vw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8vw;
  align-items: start;
}
.contact-title{
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(36px, 5.2vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.01em;
}
.contact-sub{
  margin-top: 26px;
  max-width: 40ch;
  color: var(--fg-dim);
  font-size: 15.5px;
  line-height: 1.6;
}
.contact-info{
  margin-top: 50px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}
.contact-owner-name{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  color: var(--fg);
  margin-bottom: 4px;
}
.contact-owner-title{
  font-size: 14px;
  color: var(--fg-dimmer);
  margin-bottom: 14px;
}
.contact-email-link{
  display: inline-block;
  font-size: 15px;
  color: var(--gold);
  border-bottom: 1px solid var(--gold-soft);
  transition: color .3s, border-color .3s;
}
.contact-email-link:hover{
  color: var(--fg);
  border-color: var(--fg);
}

.contact-form{ display: flex; flex-direction: column; gap: 22px; }
.form-row{ display: flex; flex-direction: column; gap: 8px; }
.form-row label{
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dimmer);
}
.form-row input,
.form-row select,
.form-row textarea{
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  color: var(--fg);
  padding: 10px 2px;
  font-size: 16px; /* iOS Safari zooms the viewport on focus for inputs under 16px */
  resize: vertical;
  transition: border-color .3s;
}
.form-row select option{ background: var(--bg-raise); color: var(--fg); }
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus{
  outline: none;
  border-color: var(--gold);
}
.form-submit{
  margin-top: 10px;
  align-self: flex-start;
}
.form-note{
  font-size: 13px;
  color: var(--gold);
  min-height: 18px;
}

/* =========================================================
   FOOTER
========================================================= */
.site-footer{
  border-top: 1px solid var(--line);
  padding: 60px 4vw 40px;
}
.footer-top{
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line-soft);
}
.footer-logo{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.footer-links{ display: flex; gap: 28px; flex-wrap: wrap; padding-top: 3px; }
.footer-links a{
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-dim);
  transition: color .3s;
}
.footer-links a:hover{ color: var(--gold); }

/* ---------- footer identity block ----------
   The firm mark, a short gold rule, and the owner/contact line read as one
   editorial masthead composition — no card, no border, no panel. */
.footer-identity{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 360px;
}
.footer-identity-rule{
  width: 28px;
  height: 1px;
  background: var(--gold-soft);
}
.footer-person{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.footer-person-name{
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--fg-dim);
}
.footer-person-title{
  font-size: 12.5px;
  color: var(--fg-dimmer);
}
.footer-person-contact{
  display: flex;
  align-items: center;
  gap: 20px;
}
.footer-email{
  font-size: 12.5px;
  color: var(--fg-dim);
  letter-spacing: 0.01em;
  transition: color .3s;
}
.footer-email:hover{ color: var(--gold); }
.footer-x{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--fg-dimmer);
  letter-spacing: 0.02em;
  transition: color .3s;
}
.footer-x-icon{ transition: opacity .3s; opacity: 0.85; }
.footer-x:hover{ color: var(--gold); }
.footer-x:hover .footer-x-icon{ opacity: 1; }

.footer-bottom{
  max-width: var(--max);
  margin: 0 auto;
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px 32px;
  font-size: 12.5px;
  color: var(--fg-dimmer);
}
.footer-legal{
  max-width: 46ch;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--fg-dimmer);
}

/* ---------- discreet secondary reference ----------
   A single quiet line, well below the disclaimer, clearly framed as an
   unrelated public record rather than a credential or endorsement. */
.footer-reference{
  max-width: var(--max);
  margin: 18px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}
.footer-reference p{
  max-width: 62ch;
  font-size: 11px;
  line-height: 1.6;
  color: var(--fg-dimmer);
  opacity: 0.75;
}
.footer-reference-link{
  color: var(--fg-dimmer);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--line);
  transition: color .3s;
  margin-left: 4px;
  white-space: nowrap;
}
.footer-reference-link:hover{ color: var(--gold); }

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 1024px){
  .intro-grid{ grid-template-columns: 1fr; gap: 24px; }
  .about-grid{ grid-template-columns: 1fr; }
  .process-track{ grid-template-columns: repeat(2, 1fr); row-gap: 60px; }
  .process-track::before, .process-progress{ display: none; }
  .contact-grid{ grid-template-columns: 1fr; gap: 60px; }
  .insights-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 980px){
  /* 980px (not 860px) so the nav row never enters the narrow zone where
     "TREVOR LAW GROUP" + full links + CTA no longer fit on one line and
     the logo wraps to two lines — verified clean down to 980px. */
  .nav-links, .nav-cta{ display: none; }
  .nav-toggle{ display: block; }
  .practice-desc{ display: none; }
  .practice-item{ grid-template-columns: 40px 1fr 24px; }

  /* backdrop-filter is one of the pricier effects on mobile GPUs. The header
     is a thin strip over an otherwise dark page, so a slightly more opaque
     solid background reads almost identically without the blur cost. */
  .site-header.is-scrolled{
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(10,10,9,0.94);
  }

  /* Utility bar simplifies at the same point the main nav goes to the
     mobile menu, rather than squeezing the desktop composition into a
     narrower row: just the name on the left, icon-only email + X on the
     right. Both links remain fully tappable via their icon, and the bar
     never grows past a single thin line. */
  .utility-slash, .utility-title, .utility-email-text{ display: none; }
  .utility-inner{ padding: 7px 0; gap: 14px; }
  .utility-right{ gap: 12px; }
}

@media (max-width: 640px){
  .hero-content{ padding-top: 150px; }
  .hero-meta{ display: none; }
  .intro, .practice-areas, .statement, .process, .about, .insights, .contact{
    padding-top: 100px;
    padding-bottom: 100px;
  }
  .process-track{ grid-template-columns: 1fr; }
  .practice-item{ padding: 26px 10px; grid-template-columns: 34px 1fr 20px; gap: 14px; }
  .practice-name{ font-size: 19px; }
  .cursor-dot{ display: none; }

  .footer-bottom{ flex-direction: column; gap: 14px; }
  .footer-legal{ max-width: none; }
  .footer-reference{ margin-top: 14px; padding-top: 14px; }
  .footer-reference p{ max-width: none; }
}

/* =========================================================
   INTERIOR PAGES (WordPress: single practice-area / post / page / archive / 404)
   Same design language as the homepage sections — dark background,
   editorial type, thin rules, generous whitespace — scaled down to a
   single-column reading layout for content that isn't part of the
   one-page homepage scroll.
========================================================= */
.page-hero{
  padding: 190px 4vw 60px;
  border-bottom: 1px solid var(--line-soft);
}
.page-hero-inner{
  max-width: var(--max);
  margin: 0 auto;
}
.page-hero .section-label{ margin-bottom: 18px; }
.page-hero-title{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 5vw, 64px);
  letter-spacing: -0.01em;
  line-height: 1.08;
  max-width: 18ch;
}
.interior-content{ padding: 70px 4vw 140px; }
.interior-content-inner{
  max-width: 860px;
  margin: 0 auto;
}
.interior-content-inner.interior-wide{
  max-width: var(--max);
}
.interior-lede{
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 500;
  color: var(--fg);
  line-height: 1.4;
  margin-bottom: 40px;
  max-width: 46ch;
}
.interior-meta{
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-dimmer);
  margin-bottom: 32px;
}
.interior-thumb{
  margin-bottom: 48px;
  border: 1px solid var(--line-soft);
  overflow: hidden;
}
.interior-thumb img{ display: block; width: 100%; height: auto; }
.interior-body{
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--fg-dim);
  max-width: 68ch;
}
.interior-body > * + *{ margin-top: 22px; }
.interior-body h2{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px);
  color: var(--fg);
  line-height: 1.25;
  margin-top: 48px;
}
.interior-body h3{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(18px, 2vw, 22px);
  color: var(--fg);
  margin-top: 36px;
}
.interior-body a{ color: var(--gold); text-underline-offset: 3px; }
.interior-body a:hover{ color: var(--fg); }
.interior-body ul, .interior-body ol{ padding-left: 1.2em; }
.interior-body blockquote{
  border-left: 2px solid var(--gold-soft);
  padding-left: 24px;
  font-style: italic;
  color: var(--fg);
}
.interior-cta{
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.interior-back{
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--fg-dim);
  transition: color .3s;
}
.interior-back:hover{ color: var(--gold); }

/* Practice-area / insights index pages reuse the exact homepage list/grid
   components, just inside the interior-content wrapper instead of a
   homepage <section>. */
.archive-practice-areas .practice-list,
.interior-content-inner .practice-list{ margin-top: 8px; }

.pagination, .navigation.pagination{
  max-width: var(--max);
  margin: 40px auto 0;
  padding: 0 4vw 100px;
  display: flex;
  gap: 20px;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.pagination a{ transition: color .3s; }
.pagination a:hover{ color: var(--gold); }
.pagination .current{ color: var(--gold); }

@media (max-width: 640px){
  .page-hero{ padding: 150px 6vw 44px; }
  .interior-content{ padding: 50px 6vw 100px; }
}

/* =========================================================
   MEDIA (additive feature — homepage section, /media/ archive,
   /media/{slug}/ single page). Nothing above this point was changed to
   add this section; it reuses the same tokens, spacing rhythm, and
   .section-head/.section-label/.section-title helpers as every other
   section on the page.
========================================================= */
.media-section{ padding: 160px 0; border-top: 1px solid var(--line-soft); }

/* ---------- shared item — used by both the homepage list and the
   /media/ archive, laid out differently by each parent below ---------- */
.media-item{
  position: relative;
  display: flex;
  flex-direction: column;
  color: var(--fg);
  transition: opacity .3s var(--ease);
}
.media-thumb{
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--bg-alt);
  border: 1px solid var(--line-soft);
  aspect-ratio: 16 / 10;
}
.media-preview-img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.media-item:hover .media-preview-img{ transform: scale(1.045); }
.media-thumb-empty{
  display: block;
  width: 100%;
  height: 100%;
  background:
    repeating-linear-gradient(115deg, transparent 0 18px, var(--line-soft) 18px 19px);
}
.media-body{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 18px;
}
.media-type-tag{
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.media-title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  color: var(--fg);
  transition: color .3s var(--ease);
  line-height: 1.25;
}
.media-item:hover .media-title{ color: var(--gold); }
.media-date{
  font-size: 12.5px;
  color: var(--fg-dimmer);
}
.media-arrow{
  position: absolute;
  top: 18px;
  right: 0;
  font-size: 18px;
  color: var(--gold);
  opacity: 0;
  transform: translate(-6px, 6px) rotate(-45deg);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.media-item:hover .media-arrow{ opacity: 1; transform: translate(0,0) rotate(-45deg); }

/* ---------- homepage: asymmetric editorial layout — one large item,
   two smaller items stacked beside it ---------- */
.media-list{
  max-width: var(--max);
  margin: 60px auto 0;
  padding: 0 4vw;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  grid-auto-rows: 1fr;
  gap: 6vw 40px;
}
.media-list .media-item:nth-child(1){ grid-column: 1; grid-row: 1 / span 2; }
.media-list .media-item:nth-child(2){ grid-column: 2; grid-row: 1; }
.media-list .media-item:nth-child(3){ grid-column: 2; grid-row: 2; }
.media-list .media-item:nth-child(1) .media-title{ font-size: 28px; }
.media-list .media-item:nth-child(1) .media-thumb{ aspect-ratio: 16 / 11; }
.media-list .media-item:nth-child(n+2) .media-thumb{ aspect-ratio: 16 / 9; }

/* ---------- /media/ archive: a plain responsive grid, all items the
   same size (no asymmetry — that's a homepage-only accent) ---------- */
.media-archive-list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6vw 40px;
}

/* ---------- individual media page ---------- */
.media-single .interior-meta{
  display: flex;
  align-items: center;
  gap: 10px;
}
.media-meta-sep{ color: var(--fg-dimmer); }
.media-player{ margin-bottom: 44px; }
.media-figure{ margin: 0; border: 1px solid var(--line-soft); overflow: hidden; }
.media-full-img{ display: block; width: 100%; height: auto; }
.media-video{ line-height: 0; border: 1px solid var(--line-soft); overflow: hidden; }
.media-video video{ display: block; width: 100%; height: auto; }
.media-embed{ position: relative; width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--line-soft); overflow: hidden; }
.media-embed iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.media-external-link a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--gold);
  border-bottom: 1px solid var(--gold-soft);
  padding-bottom: 2px;
  transition: color .3s;
}
.media-external-link a:hover{ color: var(--fg); }
.media-description{ margin-bottom: 0; }

.media-adjacent-nav{
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
}
.media-adjacent-prev, .media-adjacent-next{
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--fg-dim);
}
.media-adjacent-nav a{ transition: color .3s; display: inline-flex; align-items: baseline; gap: 8px; }
.media-adjacent-nav a:hover{ color: var(--gold); }
.media-adjacent-title{
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--fg);
  margin-top: 4px;
}
.media-archive-back{ width: 100%; order: 3; }

@media (max-width: 1024px){
  .media-list{ grid-template-columns: 1fr; grid-auto-rows: auto; gap: 48px; }
  .media-list .media-item:nth-child(1),
  .media-list .media-item:nth-child(2),
  .media-list .media-item:nth-child(3){ grid-column: 1; grid-row: auto; }
  .media-list .media-item:nth-child(1) .media-title{ font-size: 24px; }
  .media-list .media-item:nth-child(1) .media-thumb,
  .media-list .media-item:nth-child(n+2) .media-thumb{ aspect-ratio: 16 / 10; }
  .media-archive-list{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px){
  .media-archive-list{ grid-template-columns: repeat(2, 1fr); gap: 40px 28px; }
}

@media (max-width: 640px){
  .media-section{ padding: 100px 0; }
  .media-list{ padding: 0 6vw; gap: 40px; }
  .media-archive-list{ grid-template-columns: 1fr; gap: 40px; }
  .media-title{ font-size: 19px; }
  .media-list .media-item:nth-child(1) .media-title{ font-size: 21px; }
  .media-adjacent-nav{ flex-direction: column; align-items: flex-start; }
}