/*
  FJS Lawyers
  File: /assets/css/style.css
  Version: v3.0
  Updated: 2026-02-17
*/

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Montserrat:wght@600;700;800&family=Noto+Sans:wght@400;500;600;700;800&display=swap');


:root{
  --bg: #ffffff;
  --text: #0b1020;
  --muted: rgba(11,16,32,.72);

  --navy-1:#071532;
  --navy-2:#0b1f53;
  --navy-3:#132a6a;

  --slate:#2f394a;
  --slate-2:#1f2633;
  --slate-3:#a3abba;

  --blue:#6c93ff;
  --blue-2:#3f67ff;
  --blue-3:#88bdff;
  --blue-4:#28457e;
  --border: rgba(15, 23, 42, .12);

  --container: 1160px;
  --radius: 10px;
  --shadow: 0 12px 30px rgba(2,6,23,.10);
  
  --hero-start: #02152d;  
  --hero-end:   #2c4b7a;   
}

:root{
  /* shared hero sizing (ALL pages except home) */
  --page-hero-minh: 380px;      /* adjust if you want taller/shorter */
  --page-hero-pad-y: 90px;

  /* shared hero typography */
  --page-hero-h1: clamp(44px, 5vw, 66px);
  --page-hero-lead: 18px;
  --page-hero-letter: 0.04em;
}

.brand-logo {
  height: 42px;        /* adjust to match your header height */
  width: auto;
  display: block;
}

/* Shared hero for non-home pages */
.hero.page-hero{
  min-height: var(--page-hero-minh);
  padding: var(--page-hero-pad-y) 0;
  display: flex;
  align-items: center;
  color: #fff;
}

/* Make all hero headings/text consistent */
.hero.page-hero h1{
  font-size: var(--page-hero-h1);
  line-height: 0.92;
  letter-spacing: var(--page-hero-letter);
  text-transform: uppercase;
  margin: 0 0 16px;
}

.hero.page-hero .lead,
.hero.page-hero p{
  font-size: var(--page-hero-lead);
  line-height: 1.6;
  max-width: 62ch;
  margin: 0;
  opacity: 0.92;
}

/* .hero-home {
  /* opacity: 50; */
  /* transform: scale(1.05);   /* subtle zoom out effect */ 
  /* animation: heroFadeIn 1200ms ease-out forwards; */
  /* animation-delay: 100ms; 
}*/
/*
.hero-home {
  opacity: 0;
  animation: heroFadeIn 1800ms cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay: 200ms;
}*/

@keyframes heroFadeIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
/*  font-family:"Source Sans 3", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; */
  line-height:1.5;
}
html, body{
  overflow-x: hidden;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.container{
  width:min(var(--container), calc(100% - 48px));
  margin-inline:auto;
}
body{
  font-family:
    "Segoe UI",
    "Inter",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    Arial,
    sans-serif;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}


/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:#fff;
  border-bottom:1px solid var(--border);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px 0;
}
.brand{
  font-family:"Noto Sans", system-ui, sans-serif;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:18px;
}
.nav-desktop{
  display:flex;
  gap:24px;
  align-items:center;
}
.nav-desktop a{
  font-family:"Inter", system-ui, sans-serif;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:12px;
  color:rgba(11,16,32,.72);
  position:relative;
  padding-bottom:6px;
}
.nav-desktop a.active{ color:var(--text); }
.nav-desktop a.active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-0px;
  height:3px;
  background:var(--blue-3);
}

.nav-toggle{
  display:none;
  border:1px solid var(--border);
  background:#fff;
  border-radius:999px;
  padding:10px 12px;
  font-family:"Inter", system-ui, sans-serif;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
}
.nav-mobile{
  display:none;
  border-top:1px solid var(--border);
  background:#fff;
}
.nav-mobile .container{
  padding:10px 0 18px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.nav-mobile a{
  font-family:"Inter", system-ui, sans-serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:12px;
  color:rgba(11,16,32,.78);
  padding:10px 0;
}
/* Mobile active link */
.nav-mobile a.active{
  color: var(--blue-3);
  font-weight: 700;   /* optional */
}

/* Hero */
.hero {
  position: relative;
  background: linear-gradient(135deg, var(--hero-start), var(--hero-end));
  overflow: hidden;
  color: #ffffff;
}

/* Geometric pattern overlay
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background-image:
    linear-gradient(30deg, rgba(255,255,255,0.04) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,0.04) 87.5%, rgba(255,255,255,0.04)),
    linear-gradient(150deg, rgba(255,255,255,0.04) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,0.04) 87.5%, rgba(255,255,255,0.04));

  background-size: 120px 200px;
  opacity: 0.35;
} */


.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.58;
  z-index: 0;

  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);

  background-size: 60px 60px;
} 
/*
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;

  background-image:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,0.05),
      rgba(255,255,255,0.05) 2px,
      transparent 2px,
      transparent 90px
    ); */

/* HOME ONLY: stationary star twinkles over the grid */
.hero.hero-home{ position: relative; }

/* ensure stars sit above grid overlay but below text */
.hero-stars{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
}
.hero.hero-home .container{ position:relative; z-index:2; }

/* Keep hero actions animation on wrapper, but make button text crisp */
.hero-actions .btn{
  opacity: 1;                 /* don't let opacity blending affect text */
  transform: translateZ(0);   /* put button on its own layer */
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* base star dot */
.hero-stars .star{
  position:absolute;
  width:3px;
  height:3px;
  transform: translate(-50%, -50%);
  border-radius: 999px; /* will be nuked by your global radius reset; harmless */
  background: rgba(255,255,255,0.55);
  opacity: 0.25;
  /* filter: drop-shadow(0 0 3px rgba(255,255,255,0.25)); */
  filter: none !important;
  animation: starTwinkle 5.6s ease-in-out infinite;
}

/* star rays (short flare) */
.hero-stars .star::before,
.hero-stars .star::after{
  content:"";
  position:absolute;
  inset:-10px;
  opacity:0;
  transform: scale(0.8);
  animation: starFlare 5.6s ease-in-out infinite;
  animation-delay: inherit;
  pointer-events:none;
}

/* vertical + horizontal rays */
.hero-stars .star::before{
  background:
    linear-gradient(transparent 56%, rgba(255,255,255,0.45) 50%, transparent 54%),
    linear-gradient(90deg, transparent 46%, rgba(255,255,255,0.35) 50%, transparent 54%);
}

/* diagonal rays */
.hero-stars .star::after{
  background:
    linear-gradient(45deg, transparent 47%, rgba(255,255,255,0.28) 50%, transparent 53%),
    linear-gradient(-45deg, transparent 47%, rgba(255,255,255,0.22) 50%, transparent 53%);
}

/* Positions (tweak as you like) */
.hero-stars .s1{ left: 22%; top: 28%; animation-delay: .2s; }
.hero-stars .s2{ left: 64%; top: 22%; animation-delay: 1.1s; }
.hero-stars .s3{ left: 72%; top: 68%; animation-delay: 2.0s; }
.hero-stars .s4{ left: 82%; top: 44%; animation-delay: 3.0s; }
.hero-stars .s5{ left: 28%; top: 70%; animation-delay: 4.1s; }

@keyframes starTwinkle{
  0%, 100% { opacity: 0.18; transform: translate(-50%,-50%) scale(0.9); }
  40%      { opacity: 0.22; }
  55%      { opacity: 0.75; transform: translate(-50%,-50%) scale(1.15); }
  65%      { opacity: 0.26; transform: translate(-50%,-50%) scale(0.95); }
}

@keyframes starFlare{
  0%, 45%, 100% { opacity: 0; transform: scale(0.6); }
  55%           { opacity: 0.55; transform: scale(1.05); }
  62%           { opacity: 0.10; transform: scale(0.85); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero-stars .star,
  .hero-stars .star::before,
  .hero-stars .star::after{
    animation: none !important;
    opacity: 0.18 !important;
    transform: translate(-50%,-50%) scale(1) !important;
  }
}
/* Hero Title Base */
.hero-title{
  margin:0;
  line-height: .92;
  text-transform: uppercase;
}

/* Top line (FJS) */
.hero-fjs{
  display:inline-block;
  font-family: "Noto Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(90px, 10vw, 145px);
  letter-spacing: .04em;
}

/* Bottom line (LAWYERS) */
.hero-lawyers{
  font-family: "Segoe UI", "Inter", system-ui, -apple-system, sans-serif;
  font-weight: 300; /* semibold */
  font-size: clamp(36px, 4vw, 58px);
  letter-spacing: .06em;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.08), transparent 30%, rgba(0,0,0,.18));
  pointer-events:none;
  z-index: 0;
}
.hero .container{ position:relative; z-index:1; }
.hero-home{
  text-align:center;
  padding:92px 0 78px;
}
.hero-left{
  text-align:left;
  padding:86px 0 70px;
}
.home-kicker{
  font-family:"Segoe UI", system-ui, sans-serif;
  font-weight:400;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:16px;
  opacity:.99;
  margin-bottom:20px;
  color:var(--blue-3)
}
.kicker{
  font-family:"Inter", system-ui, sans-serif;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:20px;
  opacity:.78;
  margin-bottom:18px;
}
.hero h1{
  margin:0;
  font-family:"Inter", system-ui, sans-serif;
  font-weight:900;
  letter-spacing:.02em;
  text-transform:uppercase;
  line-height:.92;
  font-size: clamp(46px, 6.2vw, 84px);
}
.hero p.lead{
  margin:20px auto 0;
  max-width:720px;
  color:rgba(255,255,255,0.92);
  font-weight: 300;
  font-size:20px;
  letter-spacing: 0.04em;
}
/* apply the “muted” look using color instead of opacity */
.hero .lead-wrap p.lead{
  color: rgba(255,255,255,0.86); /* adjust to taste */
}

/* optional: make wrapper a block so animation is clean */
.lead-wrap{ display:block; }

.hero-left p.lead{ margin-left:0; margin-right:0; max-width:760px; }

.hero-actions{
  margin-top:26px;
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}
.hero-left .hero-actions{ justify-content:flex-start; }
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:168px;
  height:44px;
  padding:0 18px;
  border-radius:6px;
  font-family:"Inter", system-ui, sans-serif;
  font-weight:400;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:12px;
  border:1px solid transparent;
}
.btn-primary{
  background:var(--blue);
  box-shadow: 0 6px 12px rgba(79,125,255,.20);
}
.btn-outline{
  background:transparent;
  border-color:rgba(255,255,255,.25);
}
.btn-dark{
  background:#111827;
  border-color:#111827;
}
.btn-ghost{
  background:transparent;
  border-color:rgba(17,24,39,.18);
  color:var(--text);
}
.scroll-indicator{
  margin:36px auto 0;
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:.85;
}
.scroll-indicator span{
  width:8px; height:8px;
  border-right:2px solid rgba(255,255,255,.7);
  border-bottom:2px solid rgba(255,255,255,.7);
  transform: rotate(45deg);
  margin-top:-2px;
}

/* Sections */
.section{
  padding:64px 0;
}
.section-tight{ padding:52px 0; }
.section-alt{
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    #f4f7fb 100%
  );
}
.section-dark{
  background:var(--slate);
  color:#fff;
}
.section-blue{
  background:var(--blue-4);
  color:#fff;
}

.split-head{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:20px;
  align-items:start;
  margin-bottom:22px;
}
.h2{
  font-family:"Inter", system-ui, sans-serif;
  font-weight:900;
  letter-spacing:.02em;
  text-transform:uppercase;
  font-size: clamp(44px, 4.2vw, 72px);
  margin:0;
}
.split-head p{
  margin:0;
  color:var(--muted);
  font-size:18px;
  line-height: 1.6;
}
.section-dark .split-head p,
.section-blue .split-head p{ color:rgba(255,255,255,.82); }

/* Practice cards */
.practice-list{
  max-width: 920px;
  margin: 0 auto;
  display:flex;
  flex-direction:column;
  gap:18px;
}
/* Vertical accent line for Practice Areas */
.practice-list{
  position: relative;
  padding-left: 40px;  /* space for the line */
}

.practice-list::before{
  content:"";
  position:absolute;
  left:-20px;
  top:6px;
  bottom:6px;
  width:1px;
  background: rgba(15,23,42,.12);  /* soft grey */
}
.practice-card{
  display:grid;
  grid-template-columns: 56px 1fr 44px;
  gap:14px;
  align-items:center;
  padding:22px 22px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  min-height:110px;
}
.practice-icon{
  width:42px; height:42px;
  border-radius:10px;
  background: #edf2ff;
  display:flex; align-items:center; justify-content:center;
  color:var(--blue);
  font-family:"Inter", system-ui, sans-serif;
  font-weight:900;
}
.practice-card h3{
  margin:0;
  font-family:"Inter", system-ui, sans-serif;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.02em;
  font-size:16px;
}
.practice-card p{
  margin:4px 0 0;
  color:rgba(11,16,32,.68);
  font-size:13px;
}
.practice-arrow{
  width:34px; height:34px;
  border-radius:999px;
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:rgba(11,16,32,.62);
}
.practice-card:hover{
  background:#fbfdff;
}
.practice-card:hover .practice-arrow{
  border-color:rgba(79,125,255,.35);
  color:var(--blue);
}

/* Track record tiles: no gaps + subtitle line) */
.tiles{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:0; /* NO spacing between cards */
  margin-top:18px;
  border:1px solid var(--border); /* outer border like Wix */
  background:#fff;
}

.tile{
  border:none;                 /* handled by grid + dividers */
  padding:34px 26px;
  background:#fff;
  position:relative;
  overflow:hidden;
}

/* vertical dividers between cards */
.tile:not(:last-child){
  border-right:1px solid var(--border);
}

/* "01" */
.tile .label{
  font-family:"Inter", system-ui, sans-serif;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:14px;
  color:rgba(11,16,32,.55);
}

/* big title */
.tile .value{
  margin-top:14px;
  font-family:"Inter", system-ui, sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-size:18px;
  line-height:1.25;
  transition: transform 220ms ease;
}

/* NEW: subtitle (small line under title) */
.tile .sub{
  margin-top:10px;
  font-size:15px;
  color:rgba(11,16,32,.55);
}

/* hover overlay + title shift like your requirement */
.tile::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(17,24,39,.06);
  opacity:0;
  transition: opacity 220ms ease;
  pointer-events:none;
}

.tile:hover::before{ opacity:1; }
.tile:hover .value{ transform: translateX(8px); }

/* CTA band */
.cta-band{
  padding:54px 0;
  text-align:center;
}
.cta-band h2{
  margin:0;
  font-family:"Inter", system-ui, sans-serif;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.02em;
  font-size: clamp(40px, 4vw, 60px);
}
.cta-band p{
  margin:10px auto 0;
  max-width:760px;
  color:rgba(255,255,255,.82);
  font-size:18px;
}
.cta-band .actions{
  margin-top:22px;
  display:flex;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
}

/* Two-column content blocks */
.grid-2{
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  gap:28px;
  align-items:start;
}
.card{
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  box-shadow: var(--shadow);
}
.card.pad{ padding:18px; }
.photo-frame{
  background:var(--blue);
  padding:16px;
  border-radius:12px;
}
.photo{
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.10)), #c7d2fe;
  border-radius:10px;
  aspect-ratio: 4/3;
}

/* Bands with heading */
.band-head{
  padding:48px 0;
}
.band-head h2{ color:#fff; }

/* Dark cards inside blue */
.dark-cards{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  margin-top:18px;
}
.dark-card{
  background: #1b2536;
  border-radius:10px;
  padding:18px 16px;
  border:1px solid rgba(255,255,255,.08);
}
.dark-card h3{
  margin:0;
  font-family:"Inter", system-ui, sans-serif;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.02em;
  font-size:12px;
  color:#fff;
}
.dark-card p{
  margin:10px 0 0;
  color:rgba(255,255,255,.78);
  font-size:13px;
}

/* Pills list (professional involvement) */
.pills{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px 16px;
  margin-top:18px;
}
.pill{
  background: var(--blue);
  color:#fff;
  border-radius:6px;
  padding:12px 14px;
  font-family:"Inter", system-ui, sans-serif;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:11px;
}

/* Services blocks */
.service-block{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap:26px;
  align-items:stretch;
  margin-top:22px;
}
.panel{
  border-radius:10px;
  display:flex;
  align-items:flex-end;
  padding:26px;
  color:#fff;
  font-family:"Inter", system-ui, sans-serif;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.02em;
  min-height:210px;
  position:relative;
  overflow:hidden;
}
.panel.blue{ background:var(--blue); }
.panel.dark{ background:#1b2536; }
.panel .panel-icon{
  position:absolute;
  top:20px; left:20px;
  width:52px; height:52px;
  border-radius:12px;
  background: rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center;
  font-size:22px;
}
.service-body h3{
  margin:0;
  font-family:"Inter", system-ui, sans-serif;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.02em;
  font-size:12px;
  color:rgba(11,16,32,.55);
}
.service-body ul{
  margin:12px 0 0;
  padding-left:18px;
  columns:2;
  gap:26px;
  color:rgba(11,16,32,.72);
  font-size:13px;
}
.section-dark .service-body h3,
.section-dark .service-body ul{ color:rgba(255,255,255,.85); }

/* Contact page */
.contact-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:24px;
  align-items:start;
}
.form-panel{
  background:var(--blue);
  border-radius:12px;
  padding:22px;
  color:#fff;
}
.form-panel h3{
  margin:0 0 14px;
  font-family:"Inter", system-ui, sans-serif;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.02em;
  font-size:14px;
}
.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.form-grid .full{ grid-column: 1 / -1; }
input, textarea{
  width:100%;
  border:none;
  border-radius:6px;
  background:#111827;
  color:#fff;
  padding:12px 12px;
  font-size:13px;
  outline:none;
}
textarea{ min-height:120px; resize:vertical; }
.form-actions{ margin-top:12px; }
.info-stack{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.info-card{
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  padding:14px 14px;
}
.info-card .t{
  font-family:"Inter", system-ui, sans-serif;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:10px;
  color:rgba(11,16,32,.55);
}
.info-card .v{
  margin-top:8px;
  color:rgba(11,16,32,.78);
  font-size:13px;
}

/* Expertise band + notice */
.expertise-band{
  background:var(--slate);
  color:#fff;
  padding:54px 0;
  text-align:center;
}
.expertise-band h2{
  margin:0;
  font-family:"Inter", system-ui, sans-serif;
  font-weight:900;
  text-transform:uppercase;
  font-size: clamp(24px, 3vw, 40px);
}
.expertise-actions{
  margin-top:18px;
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
}
.expertise-actions a{
  background:var(--blue);
  color:#fff;
  border-radius:6px;
  padding:14px 16px;
  min-width:200px;
  font-family:"Inter", system-ui, sans-serif;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:11px;
}
.notice{
  background:#5a8cff;
  color:#fff;
  border-radius:10px;
  padding:18px;
  margin-top:18px;
}
.notice h3{
  margin:0;
  font-family:"Inter", system-ui, sans-serif;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:12px;
}
.notice p{
  margin:10px 0 0;
  color:rgba(255,255,255,.86);
  font-size:12px;
}

/* Footer */
.site-footer{
  background:var(--slate);
  color:#fff;
  padding:46px 0 30px;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap:24px;
}
.footer-grid h4{
  margin:0 0 12px;
  font-family:"Inter", system-ui, sans-serif;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:10px;
  color:rgba(255,255,255,.78);
}
.footer-grid p, .footer-grid li{
  margin:0;
  color:rgba(255,255,255,.78);
  font-size:13px;
}
.footer-grid ul{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.footer-bottom{
  margin-top:26px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.60);
  font-size:12px;
}
/* Team page stack + separators */
.team-stack{
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.team-rule{
  height: 1px;
  background: rgba(15,23,42,.12);
  width: 100%;
}

/* Optional: add a touch more spacing around each row */
.team-row{
  padding: 6px 0;
}
/* Team name underline accent */
.team-name{
  margin-top: 8px;
  position: relative;
  padding-bottom: 14px;
}

.team-name::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 72px;            /* adjust length */
  height: 3px;            /* thickness */
  background: var(--blue-2);
}
/* Mobile: keep layout consistent + no weird reversals */
@media (max-width: 900px){
  .team-stack{ gap: 26px; }
  .team-row{ padding: 0; }
}

/* Responsive */
@media (max-width: 900px){
  .nav-desktop{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .split-head{ grid-template-columns:1fr; }
  .tiles{ grid-template-columns:1fr 1fr; }
  .grid-2{ grid-template-columns:1fr; }
  .service-block{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .hero-center, .hero-left{ padding:76px 0 60px; }
  .nav-desktop a.active::after{ display:none; }
}
@media (max-width: 520px){
  .tiles{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .btn{ min-width: 152px; }
}

.nav-mobile.open{ display:block; }


/* Scroll reveal animations (Home) */
.reveal,
.reveal-zoom{
  opacity:0;
  transform: translateY(18px);
  will-change: transform, opacity;
}
/*.reveal.in{
  opacity:1;
  transform: translateY(0);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(.2,.9,.2,1);
} */
.reveal.in{
  opacity:1;
  transform: translateY(0);
  transition:
    opacity 1100ms ease,
    transform 1400ms cubic-bezier(.22,.61,.36,1);
}

.reveal-zoom{
  opacity: 0;
  transform: scale(.92);   
  will-change: transform, opacity;
}
.reveal-zoom.in{
  opacity:1;
  transform: scale(1);
  transition:
    opacity 1200ms ease,
    transform 2000ms cubic-bezier(.22,.61,.36,1);
}

/* Slide-in from right reveal */
.reveal-right{
  opacity: 0;
  transform: translateX(70px);
  will-change: transform, opacity;
}

.reveal-right.in{
  opacity: 1;
  transform: translateX(0);
  transition:
    opacity 900ms ease,
    transform 1200ms cubic-bezier(.22,.61,.36,1);
}

/* Image slide-in animation */
.photo-frame.reveal-right{
  opacity: 0;
  transform: translateX(60px);
  transition:
    opacity 1000ms ease,
    transform 1200ms cubic-bezier(.22,.61,.36,1);
}

.photo-frame.reveal-right.in{
  opacity: 1;
  transform: translateX(0);
}

/* Subtle image hover movement */
.photo-frame{
  overflow: hidden;
}

.photo{
  transition: transform 450ms cubic-bezier(.22,.61,.36,1);
}

.photo-frame:hover .photo{
  transform: translateX(6px) scale(1.02);
}
/* Slide-in from left reveal */
.reveal-left{
  opacity: 0;
  transform: translateX(-70px);
  will-change: transform, opacity;
}

.reveal-left.in{
  opacity: 1;
  transform: translateX(0);
  transition:
    opacity 900ms ease,
    transform 1200ms cubic-bezier(.22,.61,.36,1);
}

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-zoom{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* ===== Version v7 - Square Card Corners ===== */
.card,
.practice-card,
.stat-card,
.info-card,
.service-card,
.cta-card,
.tile,
.panel {
    border-radius: 0 !important;
}

/* ===== Version v8 - Square corners + hover outline highlight on ALL cards ===== */

/* Square corners for all card-like elements site-wide */
.card,
[class*="card"],
.tile,
.panel,
.box,
.practice-card,
.stat-card,
.info-card,
.service-card,
.cta-card,
.team-card,
.form-panel,
.contact-panel,
.practice-list > a,
.practice-list > div,
.stats-grid > div,
.cards-grid > div,
.grid > .card {
  border-radius: 0 !important;
}

/* Hover highlight: border + subtle lift + optional overlay feel (matches Wix-like UI) */
.card:hover,
[class*="card"]:hover,
.tile:hover,
.panel:hover,
.box:hover,
.practice-card:hover,
.stat-card:hover,
.info-card:hover,
.service-card:hover,
.cta-card:hover,
.team-card:hover,
.practice-list > a:hover,
.practice-list > div:hover,
.stats-grid > div:hover,
.cards-grid > div:hover {
  border-color: rgba(25, 110, 255, 0.9) !important;
  box-shadow: 0 10px 28px rgba(2, 6, 23, 0.14);
  transform: translateY(-2px);
}

/* If any card doesn't have a border already, ensure it becomes visible on hover */
.card,
[class*="card"],
.tile,
.panel,
.box,
.practice-list > a,
.practice-list > div,
.stats-grid > div,
.cards-grid > div {
  border: 1px solid rgba(148, 163, 184, 0.35);
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

/* Nuclear override: remove border radius globally, including pseudo-elements */
*, *::before, *::after {
  border-radius: 0 !important;
}

/* Explicit targets (kept for clarity and to catch edge-case specificity) */
button, .btn, a.btn, .button, a.button,
input, textarea, select,
img, svg, figure, .photo, .avatar, .frame,
.card, [class*="card"], .tile, .panel, .box {
  border-radius: 0 !important;
}

/* ===== Practice Areas (Home) */
.practice-list{
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.practice-card{
  display: grid;
  grid-template-columns: 52px 1fr 72px;
  gap: 22px;
  align-items: start;

  padding: 34px 34px;
  min-height: 200px;

  background: #fff;
  border: 1px solid rgba(15, 23, 42, .10);
  box-shadow: 0 18px 50px rgba(2, 6, 23, 0.06);
}

/* icon: remove tile look */
.practice-icon{
  width: auto;
  height: auto;
  background: transparent !important;
  border-radius: 0 !important;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  font-size: 30px;          /* emoji size */
  line-height: 1;
  color: var(--blue-2);
  margin-top: 6px;
}
.practice-icon img{
  width: 34px;     /* adjust */
  height: 34px;    /* keeps icons consistent */
  filter: grayscale(1) brightness(0) saturate(100%) invert(33%) sepia(80%) saturate(2000%) hue-rotate(210deg);
  object-fit: contain;
  display: block;
}

/* title/desc sizing */
.practice-card h3{
  margin: 0;
  font-size: 32px;
  letter-spacing: .02em;
}

.practice-card p{
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(11,16,32,.70);
  max-width: 72ch;
}

.practice-arrow{
  width: 54px;
  height: 54px;
  border: 1px solid rgba(11,16,32,.45);
  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px !important;
  font-size: 18px;
  color: rgba(11,16,32,.80);

  transition: transform 280ms cubic-bezier(.22,.61,.36,1),
              border-color 220ms ease,
              color 220ms ease,
              background 220ms ease;
}

/* hover feel */
.practice-card:hover{
  transform: translateY(-2px);
  border-color: rgba(25,110,255,.55) !important;
  box-shadow: 0 22px 60px rgba(2, 6, 23, 0.10);
}

.practice-card:hover .practice-arrow{
  border-color: rgba(25,110,255,.90);
  color: rgba(25,110,255,.95);
  background: rgba(25,110,255,.06);
  transform: translateY(-1px);
  transform: rotate(45deg);   /* turns ↗ toward → (3pm) */
}
@media (max-width: 520px){

  /* Make cards fit comfortably on small screens */
  .practice-card{
    grid-template-columns: 38px 1fr; /* icon + text */
    grid-template-areas:
      "icon title"
      "icon desc"
      "arrow arrow";
    gap: 14px;

    padding: 22px 20px;
    min-height: auto;
  }

  /* Place items into grid areas */
  .practice-card .practice-icon{ grid-area: icon; }
  .practice-card > div:nth-child(2){ grid-area: title; } /* the text wrapper */
  .practice-card .practice-arrow{
    grid-area: arrow;
    justify-self: start;
    margin-top: 6px;
  }

  /* Smaller title + safer wrapping */
  .practice-card h3{
    font-size: 20px;
    line-height: 1.15;
    letter-spacing: .01em;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .practice-card p{
    font-size: 14px;
    line-height: 1.55;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}
/* Shared hover behavior */
.btn{
  transition:
    background 220ms ease,
    border-color 220ms ease,
    color 220ms ease,
    transform 160ms ease;
}

/* Both buttons turn blue */
.btn-primary:hover,
.btn-ghost:hover,
.btn-outline:hover,
.btn-dark:hover{
  background: var(--blue);
  border-color: var(--blue);
  color: #ffffff;
}

/* ============================= */
/* SERVICES – Left Cards Layout */
/* ============================= */

.service-row{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap: 60px;
  align-items:center;
  margin-top: 70px;
}

.service-row:first-of-type{
  margin-top: 0;
}

/* Colored Card */
.service-card{
  position:relative;
  aspect-ratio: 1 / 1;
  padding: 32px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  color:#fff;
}

.service-card .service-icon{
  position:absolute;
  top: 28px;
  left: 28px;
  font-size: 34px;
  opacity:.9;
}

.service-card .service-title{
  font-family:"Inter", system-ui, sans-serif;
  font-weight:900;
  text-transform:uppercase;
  line-height:1.05;
  font-size: clamp(28px, 2.8vw, 42px);
}

/* Rotate background colors */
.service-card.slate{ background: var(--slate); }
.service-card.slate-2{ background: var(--slate-2); }
.service-card.slate-3{ background: var(--slate-3); color: var(--text); }

/* Right Side Content */
.service-content h3{
  font-family:"Inter", system-ui, sans-serif;
  font-weight:900;
  text-transform:uppercase;
  font-size:18px;
  margin-bottom:16px;
}

.service-content ul{
  columns:2;
  gap: 60px;
  font-size:14px;
  color:rgba(11,16,32,.75);
}

.service-content li{
  margin-bottom:10px;
}

/* Mobile */
@media (max-width: 900px){
  .service-row{
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .service-content ul{
    columns:1;
  }

  .service-card{
    aspect-ratio: auto;
    min-height: 260px;
  }
}

/* ================================= */
/* SERVICES – Clean Left Card Layout */
/* ================================= */

.services-section{
  padding-top: 60px;
}

.service-row{
  display:grid;
  grid-template-columns: 340px 1fr;
  gap: 70px;
  align-items:center;
  margin-top: 70px;
}

.service-row:first-of-type{
  margin-top: 0;
}

.service-row > *{
  min-width: 0;
}

.service-card{
  position:relative;
  aspect-ratio: 1 / 1;
  padding: 32px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  color:#fff;
  box-sizing:border-box;
}

.service-card .service-icon{
  position:absolute;
  top: 28px;
  left: 28px;
  font-size: 32px;
  opacity:.9;
}

.service-card .service-title{
  font-family:"Inter", system-ui, sans-serif;
  font-weight:900;
  text-transform:uppercase;
  font-size: clamp(28px, 2.6vw, 42px);
  line-height:1.05;
}

/* Rotate colors */
.service-card.slate{ background: var(--slate); }
.service-card.slate-2{ background: var(--slate-2); }
.service-card.slate-3{ background: var(--slate-3); color: var(--text); }

/* Right Side */
.service-content h3{
  font-family:"Inter", system-ui, sans-serif;
  font-weight:900;
  text-transform:uppercase;
  font-size:18px;
  margin-bottom:18px;
}

.service-content ul{
  columns:2;
  gap:60px;
  font-size:14px;
  color:rgba(11,16,32,.75);
}

.service-content li{
  margin-bottom:10px;
}

/* Mobile */
@media (max-width: 900px){
  .service-row{
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .service-content ul{
    columns:1;
  }

  .service-card{
    aspect-ratio:auto;
    min-height:260px;
  }
}

/* ===============================
   Team Page Bio Typography
   =============================== */

.team-stack .bio-recognition {
    margin: 12px 0 0;
    color: rgba(11,16,32,.76);
    font-size: 1.4rem;        /* Adjust this once for all bios */
    font-weight: 400;      /* Medium weight for emphasis */
    line-height: 1.6;
}

.team-stack .bio-meta {
    margin-top: 18px;
    color: rgba(11,16,32,.76);
    font-size: 1.0rem;        /* Adjust this once for all bios */
     font-weight: 300;      /* Clean professional normal weight */
    line-height: 1.6;
}

.team-stack .bio-meta div {
    margin-bottom: 4px;
}

/* ===============================
   TEAM PAGE — Reveal Delay
   =============================== */

.team-stack .reveal-left,
.team-stack .reveal-right {
  transition-delay: 0.25s !important;
}

/* ===============================
   CONTACT PAGE STYLING
   =============================== */

/* Whole contact section light grey */
#contactForm{
  background: #f3f4f6;
}

/* Form panel white */
#contactForm .form-panel{
  background: #ffffff;
  padding: 40px;
  border-radius: 12px;
  box-shadow: var(--shadow);
}

/* Input + textarea light grey */
#contactForm input,
#contactForm textarea{
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  color: #0b1020;
  padding: 14px 16px;
  border-radius: 8px;
}

/* Focus state */
#contactForm input:focus,
#contactForm textarea:focus{
  outline: none;
  border-color: rgba(63,103,255,1);
  box-shadow: 0 0 0 2px rgba(63,103,255,0.12);
  background: #ffffff;
}

/* ===============================
   CONTACT — Info Cards (Wix-style)
   =============================== */

#contactForm .info-stack{
  display: grid;
  gap: 18px;
}

#contactForm .info-card{
  display: flex;
  gap: 16px;
  align-items: flex-start;

  background: #fff;
  border: 1px solid #e5e7eb; /* light grey border */
  border-radius: 12px;

  padding: 18px 20px;
  min-height: 140px; /* makes cards taller like your screenshot */
}

#contactForm .info-icon{
  width: 40px;
  height: 40px;
  
  display: flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  color: rgba(63,103,255,1);
  flex: 0 0 40px;
}

#contactForm .info-icon svg{
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#contactForm .info-card .t{
  font-weight: 800;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: #0b1020;
}

#contactForm .info-card .v{
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(11,16,32,.72);
}
/* Footer Logo */
.footer-logo{
  height: 30px;
  width: auto;
  display: block;
  margin-bottom: 12px; /* keeps spacing under logo */
}
/* ================================
   SERVICES v2 — Team-style dividers
   + chips grid + mobile fixes
   Paste at BOTTOM of style.css
   ================================ */

.services-v2{
  overflow-x: clip; /* prevents reveal transforms causing horizontal scroll on iOS */
}

/* INDEX HEAD */
.services-v2 .services-index-head{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
  margin-bottom: 18px;
}
@media (max-width: 900px){
  .services-v2 .services-index-head{
    grid-template-columns: 1fr;
  }
}

/* CHIP GRID */
.services-v2 .services-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.services-v2 .svc-chip{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 14px 16px;
  border: 1px solid rgba(148, 163, 184, 0.55);
  background: #fff;

  transition: border-color 220ms ease, transform 180ms ease, box-shadow 220ms ease;
}

.services-v2 .svc-name{
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
  color: rgba(11,16,32,.86);
}

.services-v2 .svc-go{
  font-size: 14px;
  color: rgba(11,16,32,.55);
}

.services-v2 .svc-chip:hover{
  border-color: rgba(25, 110, 255, 0.9);
  box-shadow: 0 10px 28px rgba(2, 6, 23, 0.10);
  transform: translateY(-1px);
}

@media (max-width: 520px){
  .services-v2 .services-grid{
    grid-template-columns: 1fr; /* clean single-column chips on iPhone */
  }
}

/* DETAILS WRAPPER + TEAM-STYLE RULES */
.services-v2 .services-details{
  margin-top: 34px;
  border-top: 1px solid rgba(15,23,42,.12);
  border-bottom: 1px solid rgba(15,23,42,.12);
}

/* EACH SERVICE ROW */
.services-v2 .svc-block{
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 56px;

  padding: 46px 0;
  border-top: 1px solid rgba(15,23,42,.12);
}
.services-v2 .svc-block:first-child{
  border-top: none; /* top border handled by services-details */
}

/* Prevent grid children from forcing overflow */
.services-v2 .svc-left,
.services-v2 .svc-right{
  min-width: 0;
}

/* LEFT */
.services-v2 .svc-badge{
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(148, 163, 184, 0.55);
  background: #fff;
  font-size: 20px;
  margin-bottom: 14px;
}

.services-v2 .svc-title{
  margin: 0;
  font-family:"Inter", system-ui, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: 30px;
  line-height: 1.05;
  position: relative;
  display: inline-block;
  padding-bottom: 14px;
}

/* Blue line "grow" underline (like team-name accent, but animated) */
.services-v2 .svc-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width: 64px;
  height: 3px;
  background: var(--blue-2);
  transform: scaleX(0.55);
  transform-origin: left;
  transition: transform 260ms cubic-bezier(.22,.61,.36,1), width 260ms cubic-bezier(.22,.61,.36,1);
}

/* Hover: title shift + underline grow 
.services-v2 .svc-block:hover .svc-title{
  transform: translateX(6px);
  transition: transform 240ms cubic-bezier(.22,.61,.36,1);
} */

/* ======================================
   SERVICES — Unified Row Shift on Hover
   ====================================== */

.services-v2 .svc-left,
.services-v2 .svc-right{
  transition: transform 320ms cubic-bezier(.22,.61,.36,1);
}

/* subtle editorial shift */
.services-v2 .svc-block:hover .svc-left,
.services-v2 .svc-block:hover .svc-right{
  transform: translateX(8px);
}

.services-v2 .svc-block:hover .svc-title::after{
  transform: scaleX(1);
  width: 92px;
}

.services-v2 .svc-lead{
  margin: 14px 0 0;
  color: rgba(11,16,32,.76);
  font-size: 16px;
  line-height: 1.65;
  max-width: 72ch;
}

/* MICRO + TAGS */
.services-v2 .svc-micro{
  margin-top: 18px;
}
.services-v2 .svc-micro-label{
  font-family:"Inter", system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: 14px;
  color: rgba(11,16,32,.55);
  margin-bottom: 10px;
}

.services-v2 .svc-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 10px;
}
.services-v2 .svc-tags span{
  display: inline-flex;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.55);
  background: #fff;

  font-family:"Inter", system-ui, sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
  color: rgba(11,16,32,.78);
}

/* RIGHT */
.services-v2 .svc-panel{
  padding-top: 4px; /* keeps it clean without a “card” */
}
.services-v2 .svc-panel-head{
  font-family:"Inter", system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: 14px;
  color: rgba(11,16,32,.55);
  margin-bottom: 12px;
}
.services-v2 .svc-list{
  margin: 0;
  padding-left: 18px;
  color: rgba(11,16,32,.76);
  font-size: 14px;
  line-height: 1.75;
}
.services-v2 .svc-list li{
  margin-bottom: 8px;
}

/* MOBILE STACK */
@media (max-width: 900px){
  .services-v2 .svc-block{
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 34px 0;
  }

  .services-v2 .svc-title{
    font-size: 24px;
  }
}

/* ================================
   Services-only reveal boost
   (more dramatic, but clipped)
   ================================ */
.services-v2 .reveal-left{
  transform: translateX(-110px);
}
.services-v2 .reveal-right{
  transform: translateX(110px);
}
.services-v2 .reveal-left.in,
.services-v2 .reveal-right.in{
  transform: translateX(0);
  transition:
    opacity 900ms ease,
    transform 1200ms cubic-bezier(.22,.61,.36,1);
}

/* === Services: remove badge spacing now that icons are gone === */
.services-v2 .svc-badge{ display:none; }
.services-v2 .svc-left{ padding-top: 2px; } /* tiny top balance */

/* Base label colors (already grey, but we’ll ensure consistency) */
.services-v2 .svc-micro-label,
.services-v2 .svc-panel-head{
  color: rgba(11,16,32,.55);
  transition: color 220ms ease;
}

/* Hover: color the labels to match underline blue */
.services-v2 .svc-block:hover .svc-micro-label,
.services-v2 .svc-block:hover .svc-panel-head{
  color: var(--blue-2);
}

/* =========================================================
   SERVICES V2 — Premium Hover Package
   - faint background wash
   - vertical accent line grow
   - micro parallax feel
   ========================================================= */

.services-v2 .svc-block{
  position: relative;
  overflow: hidden;                 /* keeps wash + accent clean */
}

/* 1) FAINT BACKGROUND WASH (sits behind content) */
.services-v2 .svc-block::before{
  content:"";
  position:absolute;
  inset: -2px -18px;               /* slightly wider than container */
  background: linear-gradient(
    90deg,
    rgba(63,103,255,0.00) 0%,
    rgba(63,103,255,0.055) 35%,
    rgba(63,103,255,0.030) 65%,
    rgba(63,103,255,0.00) 100%
  );
  opacity: 0;
  transform: translateX(-14px);
  transition:
    opacity 320ms ease,
    transform 520ms cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
  z-index: 0;
}

/* 2) VERTICAL ACCENT LINE (grows on hover) */
.services-v2 .svc-block::after{
  content:"";
  position:absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: rgba(63,103,255,0.00);
  transform: scaleY(0.15);
  transform-origin: top;
  transition:
    transform 520ms cubic-bezier(.22,.61,.36,1),
    background 260ms ease;
  pointer-events:none;
  z-index: 0;
}

/* ensure content sits above wash/line */
.services-v2 .svc-left,
.services-v2 .svc-right{
  position: relative;
  z-index: 1;
  transition: transform 380ms cubic-bezier(.22,.61,.36,1);
}

/* 3) MICRO PARALLAX FEEL (different shift per side) */
.services-v2 .svc-block:hover .svc-left{
  transform: translateX(10px);
}
.services-v2 .svc-block:hover .svc-right{
  transform: translateX(6px);
}

/* activate wash + line */
.services-v2 .svc-block:hover::before{
  opacity: 1;
  transform: translateX(0);
}
.services-v2 .svc-block:hover::after{
  background: rgba(63,103,255,0.95);   /* same “Team underline” blue */
  transform: scaleY(1);
}

/* OPTIONAL: slightly lift title + keep underline grow (if you already have underline logic, leave it) */
.services-v2 .svc-title{
  transition: color 220ms ease, transform 380ms cubic-bezier(.22,.61,.36,1);
}
.services-v2 .svc-block:hover .svc-title{
  transform: translateX(2px);          /* tiny extra = “alive” */
}

/* MOBILE SAFETY: avoid hover transforms on touch devices */
@media (max-width: 900px){
  .services-v2 .svc-block::before,
  .services-v2 .svc-block::after{
    display:none;
  }
  .services-v2 .svc-block:hover .svc-left,
  .services-v2 .svc-block:hover .svc-right,
  .services-v2 .svc-block:hover .svc-title{
    transform:none;
  }
}