/* =========================================================
   פטר מהנדסים ויועצים בע"מ — Design System
   Inspired by Linear / Stripe / Vercel
   ========================================================= */

/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */
:root{
  /* ---- Color palette : neutral (zinc) scale ---- */
  --white:#ffffff;
  --gray-50:#FAFAFA;
  --gray-100:#F4F4F5;
  --gray-150:#ECECEE;
  --gray-200:#E4E4E7;
  --gray-300:#D4D4D8;
  --gray-400:#A1A1AA;
  --gray-500:#71717A;
  --gray-600:#52525B;
  --gray-700:#3F3F46;
  --gray-800:#27272A;
  --gray-900:#18181B;
  --gray-950:#0A0A0B;

  /* ---- Color palette : brand accent (red) ---- */
  --accent-50:#FCF0F1;
  --accent-100:#FADFE1;
  --accent-400:#E5484D;
  --accent-500:#C11B2B;   /* primary accent */
  --accent-600:#9E2236;   /* brand red / hover */
  --accent-700:#821B2C;
  --accent-bright:#F26E75; /* accent on dark surfaces */

  /* ---- Semantic tokens ---- */
  --bg:var(--white);
  --bg-subtle:var(--gray-50);
  --bg-muted:var(--gray-100);
  --surface:var(--white);
  --ink:var(--gray-950);          /* dark surfaces (hero, footer) */
  --fg:var(--gray-950);           /* primary text */
  --fg-muted:var(--gray-600);     /* secondary text */
  --fg-subtle:var(--gray-500);    /* tertiary text */
  --border:var(--gray-200);
  --border-strong:var(--gray-300);
  --accent:var(--accent-500);
  --accent-hover:var(--accent-600);
  --accent-text:var(--accent-600);

  /* ---- Spacing scale (4px base) ---- */
  --space-1:.25rem; --space-2:.5rem;  --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem;  --space-10:2.5rem;
  --space-12:3rem;  --space-16:4rem;  --space-20:5rem;  --space-24:6rem; --space-32:8rem;

  /* ---- Typography scale ---- */
  --font-sans:'Heebo',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem;   --text-lg:1.125rem;
  --text-xl:1.25rem; --text-2xl:1.5rem; --text-3xl:1.875rem; --text-4xl:2.5rem; --text-5xl:3.25rem;
  --leading-tight:1.15; --leading-snug:1.35; --leading-normal:1.6;
  --tracking-tight:-.03em; --tracking-normal:0;

  /* ---- Radii ---- */
  --radius-sm:6px; --radius:8px; --radius-md:10px; --radius-lg:12px; --radius-xl:16px; --radius-2xl:24px; --radius-full:9999px;

  /* ---- Shadows (subtle, layered) ---- */
  --shadow-sm:0 1px 2px rgba(9,9,11,.05);
  --shadow:0 1px 3px rgba(9,9,11,.08),0 1px 2px rgba(9,9,11,.04);
  --shadow-md:0 6px 20px rgba(9,9,11,.08);
  --shadow-lg:0 20px 48px rgba(9,9,11,.14);

  /* ---- Motion ---- */
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.2s; --dur-slow:.4s;

  /* ---- Layout ---- */
  --nav-h:80px;
  --container:1200px;
  --font-scale:1;

  /* ---- Legacy aliases (keep secondary pages working) ---- */
  --navy:var(--gray-950); --navy-2:var(--gray-900); --navy-soft:var(--gray-800);
  --red:var(--accent); --red-2:var(--accent-hover);
  --off:var(--bg-subtle); --off-2:var(--gray-100);
  --text:var(--fg); --muted:var(--fg-muted);
}

/* =========================================================
   2. RESET & BASE
   ========================================================= */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;font-size:calc(16px * var(--font-scale));-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font-sans);color:var(--fg);background:var(--bg);
  overflow-x:hidden;line-height:var(--leading-normal);
  font-size:var(--text-base);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:inherit;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
::selection{background:var(--accent-100);color:var(--accent-700);}

/* =========================================================
   3. LAYOUT / CONTAINER
   ========================================================= */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--space-6);}
@media(min-width:1300px){.container{padding:0 var(--space-8);}}

section{padding:var(--space-24) 0;}
section[id]{scroll-margin-top:calc(var(--nav-h) + 8px);}
.bg-off{background:var(--gray-150);border-top:1px solid var(--gray-200);border-bottom:1px solid var(--gray-200);}
.bg-navy{background:var(--ink);color:#fff;}

/* ---- Reveal on scroll ---- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);}
.reveal.in{opacity:1;transform:translateY(0);}
body.no-anim *{transition:none !important;animation:none !important;}

/* =========================================================
   4. TYPOGRAPHY / SECTION HEADERS
   ========================================================= */
.sec-hdr{max-width:720px;margin:0 auto var(--space-16);text-align:center;}
.sec-hdr.right{margin:0 0 var(--space-16);text-align:right;}
.eyebrow{
  display:inline-flex;align-items:center;gap:var(--space-2);
  font-size:1.125rem;font-weight:600;letter-spacing:.01em;
  color:var(--accent-text);margin-bottom:var(--space-4);
}
.sec-title{
  font-size:clamp(1.875rem,3.6vw,2.75rem);font-weight:700;color:var(--fg);
  line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);
}
.sec-hdr .sec-title::after{
  content:'';display:block;width:56px;height:3px;border-radius:2px;
  background:var(--accent);margin:var(--space-5) auto 0;
}
.sec-sub{font-size:var(--text-lg);color:var(--fg-muted);line-height:var(--leading-normal);margin-top:var(--space-4);}
#clients .sec-hdr{max-width:820px;}
#clients .eyebrow{background:var(--accent-50);color:var(--accent-text);padding:.5rem 1.15rem;border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-5);}
#clients .sec-title,#projects .sec-title,#contact .sec-title,#services .sec-title,#services-grid .sec-title,#projects-cards .sec-title{font-size:clamp(2.25rem,4.6vw,3.4rem);font-weight:800;letter-spacing:-.02em;display:inline-block;}
#clients .sec-title span,#projects .sec-title span,#contact .sec-title span,#services .sec-title span,#services-grid .sec-title span,#projects-cards .sec-title span{color:var(--accent-text);}
#contact .sec-title::after{content:'';display:block;width:56px;height:3px;border-radius:2px;background:var(--accent);margin:var(--space-5) 0 0;}
#clients .sec-sub{font-size:var(--text-xl);color:var(--fg-muted);max-width:640px;margin-inline:auto;margin-top:var(--space-6);line-height:1.7;}
.bg-navy .sec-title{color:#fff;}
.bg-navy .sec-sub{color:rgba(255,255,255,.6);}
.bg-navy .eyebrow{color:var(--accent-bright);}

/* =========================================================
   5. BUTTON SYSTEM
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  height:44px;padding:0 var(--space-6);border-radius:var(--radius-lg);
  font-size:var(--text-sm);font-weight:600;text-decoration:none;white-space:nowrap;
  border:1px solid transparent;cursor:pointer;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--accent);color:#fff;box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:var(--accent-hover);box-shadow:var(--shadow-md);}
.btn-dark{background:var(--gray-950);color:#fff;}
.btn-dark:hover{background:var(--gray-800);}
.btn-outline{background:var(--surface);color:var(--fg);border-color:var(--border-strong);}
.btn-outline:hover{background:var(--gray-50);border-color:var(--gray-400);}
.btn-outline-w{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.22);backdrop-filter:blur(6px);}
.btn-outline-w:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.45);}
.btn-sm{height:36px;padding:0 var(--space-4);font-size:var(--text-xs);}
.btn-lg{height:52px;padding:0 var(--space-8);font-size:var(--text-base);}

/* =========================================================
   6. NAV
   ========================================================= */
header#site-nav{
  position:fixed;inset-inline:0;top:0;z-index:900;height:var(--nav-h);
  background:#fff;
  border-bottom:1px solid var(--border);display:flex;align-items:center;
  transition:border-color var(--dur),background var(--dur);
}
header#site-nav.scrolled{background:#fff;box-shadow:0 1px 12px rgba(20,28,60,.07);}
.nav-inner{position:relative;width:100%;max-width:none;margin:0 auto;display:flex;align-items:center;gap:var(--space-6);padding:0 clamp(20px,4vw,60px);}
.nav-logo{display:flex;align-items:center;}
.nav-logo img{height:46px;width:auto;}
.nav-spacer{flex:1;}
.nav-links{display:flex;gap:var(--space-3);}
.nav-links a{
  padding:var(--space-2) var(--space-4);font-size:var(--text-base);font-weight:500;
  color:var(--fg-muted);text-decoration:none;border-radius:var(--radius-sm);
  transition:color var(--dur),background var(--dur);white-space:nowrap;
}
.nav-links a:hover{color:var(--fg);background:var(--gray-100);}
.nav-links a.active{color:var(--fg);background:var(--gray-100);font-weight:600;}
.nav-phone{
  display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);font-weight:600;
  color:var(--fg);text-decoration:none;white-space:nowrap;
  padding-inline-start:var(--space-4);border-inline-start:1px solid var(--border);
}
.nav-phone svg{width:16px;height:16px;flex:none;}
.nav-cta{height:var(--nav-h);border-radius:0;padding-inline:var(--space-8);margin-inline-start:var(--space-5);margin-inline-end:calc(-1 * clamp(20px,4vw,60px));font-weight:600;}
.lang-toggle{height:38px;padding:0 12px;border:1px solid var(--border-strong);border-radius:var(--radius);background:transparent;font-weight:700;font-size:.82rem;letter-spacing:.02em;cursor:pointer;flex:none;line-height:1;transition:border-color var(--dur),background var(--dur);}
.lang-toggle:hover{border-color:var(--accent);background:var(--accent-50);}
.lang-toggle .lt-seg{color:var(--fg-subtle);transition:color var(--dur);}
.lang-toggle .lt-seg.lt-on{color:var(--accent-text);}
.lang-toggle .lt-sep{margin:0 5px;color:var(--border-strong);font-weight:400;}
.nav-burger{display:none;width:40px;height:40px;align-items:center;justify-content:center;border-radius:var(--radius-sm);}
.nav-burger:hover{background:var(--gray-100);}
.nav-burger span,.nav-burger span::before,.nav-burger span::after{
  content:'';display:block;width:20px;height:2px;background:var(--fg);border-radius:2px;position:relative;transition:.25s;
}
.nav-burger span::before{position:absolute;top:-6px;}
.nav-burger span::after{position:absolute;top:6px;}
.mobile-nav{
  position:fixed;top:var(--nav-h);inset-inline:0;bottom:0;background:var(--bg);z-index:850;
  display:none;flex-direction:column;padding:var(--space-6) var(--space-6);gap:var(--space-1);overflow-y:auto;
  border-top:1px solid var(--border);
}
.mobile-nav.open{display:flex;}
.mobile-nav a{padding:var(--space-4) var(--space-2);font-size:var(--text-lg);font-weight:500;color:var(--fg);border-bottom:1px solid var(--border);text-decoration:none;}

/* =========================================================
   7. HERO
   ========================================================= */
.hero{
  position:relative;margin-top:var(--nav-h);
  display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-bottom:var(--space-6);
  background:
    radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,.06),transparent 60%),
    linear-gradient(180deg,#14161C 0%,#0A0B0E 55%,#050608 100%);
}
.hero-media{position:absolute;inset:0;z-index:0;}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover;}
.hero::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,11,.78) 0%,rgba(10,10,11,.58) 45%,rgba(10,10,11,.88) 100%);
}
.hero::after{display:none;}
.hero-content{position:relative;z-index:2;width:100%;max-width:none;margin:0 auto;padding:var(--space-20) clamp(20px,4vw,60px) var(--space-4);text-align:center;}
.hero h1{
  font-size:clamp(2.5rem,5vw,3.5rem);font-weight:800;color:#fff;
  line-height:1.12;letter-spacing:-.02em;margin:0 auto var(--space-6);max-width:26ch;
}
.hero h1 span{color:var(--accent-bright);}
.hero-desc{
  font-size:1.25rem;color:rgba(255,255,255,.62);line-height:1.6;font-weight:400;
  margin:0 auto var(--space-8);max-width:56ch;
}
.hero-btns{display:flex;gap:var(--space-4);flex-wrap:wrap;justify-content:center;margin-top:var(--space-12);}
.hero-btns .btn{border-radius:var(--radius-lg);padding-inline:var(--space-10);height:56px;font-size:1.05rem;}
.hero-stats{
  position:relative;z-index:2;width:100%;max-width:none;margin:var(--space-12) auto 0;padding-inline:clamp(20px,4vw,60px);
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(255,255,255,.1);
}
.hstat{padding:var(--space-6) var(--space-4);text-align:center;}
.hstat-num{font-size:clamp(2rem,3.5vw,3rem);font-weight:700;color:#fff;line-height:1;letter-spacing:-.02em;}
.hstat-num span{color:var(--accent-bright);}
.hstat-label{font-size:var(--text-sm);color:rgba(255,255,255,.5);margin-top:var(--space-2);}

/* =========================================================
   8. CARD SYSTEM (shared)
   ========================================================= */
.card,.team-card,.svc-card,.proj-card,.client-tile{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.team-card:hover,.svc-card:hover,.proj-card:hover{
  border-color:var(--border-strong);box-shadow:var(--shadow-md);transform:translateY(-3px);
}

/* =========================================================
   9. ABOUT / TEAM
   ========================================================= */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16);align-items:center;}
.about-media{position:relative;border-radius:var(--radius-xl);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-lg);}
.about-media img{width:100%;height:520px;object-fit:cover;}
.about-text p{color:var(--fg-muted);margin-bottom:var(--space-5);line-height:1.85;font-size:var(--text-xl);}
.about-text .sec-title{margin-bottom:var(--space-6);}
#about .about-text{text-align:start;}
#about > .container{max-width:none;padding-inline:clamp(20px,4vw,60px);}
#about .about-text .sec-title{font-size:clamp(2.25rem,4.6vw,3.4rem);font-weight:800;letter-spacing:-.02em;color:var(--accent-text);display:inline-block;}
#about .about-text .sec-title::after{content:'';display:block;width:56px;height:3px;border-radius:2px;background:var(--accent);margin:var(--space-5) 0 0;}
.about-text .sec-title span{color:var(--accent-text);}
.about-layout{display:grid;grid-template-columns:2.6fr 1fr;gap:var(--space-16);align-items:center;}
/* About stays "text-left / numbers-right" in both languages: force LTR column order in RTL,
   while keeping the Hebrew paragraph text reading right-to-left */
[dir="rtl"] .about-layout{direction:ltr;}
[dir="rtl"] .about-text,[dir="rtl"] .about-stats{direction:rtl;}
.about-stats{display:flex;flex-direction:column;gap:var(--space-10);}
.astat{border-inline-start:2px solid var(--border);padding-inline-start:var(--space-6);text-align:right;}
/* English (LTR): keep the numbers right-aligned with the accent line on their right */
[dir="ltr"] .astat{border-inline-start:0;border-inline-end:2px solid var(--border);padding-inline-start:0;padding-inline-end:var(--space-6);}
.astat-num{font-size:clamp(2.2rem,3.5vw,3.25rem);font-weight:700;color:var(--fg);line-height:1;letter-spacing:-.02em;}
.astat-label{font-size:var(--text-sm);color:var(--fg-muted);margin-top:var(--space-2);}

.team-grid{margin-top:var(--space-20);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);}
.team-card{padding:var(--space-6);}
.team-name{font-size:var(--text-lg);font-weight:600;color:var(--fg);letter-spacing:-.01em;margin-bottom:var(--space-1);}
.team-role{font-size:var(--text-sm);color:var(--accent-text);font-weight:600;margin-bottom:var(--space-3);}
.team-bio{font-size:var(--text-sm);color:var(--fg-muted);line-height:1.7;}

/* =========================================================
   10. CLIENTS
   ========================================================= */
.clients-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-3);}
.client-tile{
  display:flex;align-items:center;justify-content:center;height:150px;padding:var(--space-1);border-radius:var(--radius-lg);
}
.client-tile:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm);}
.client-tile img{width:100%;height:100%;object-fit:contain;filter:none;opacity:1;transition:transform var(--dur);}
.client-tile:hover img{transform:scale(1.05);}
.client-tile.note-tile{
  grid-column:1 / -1;height:auto;background:transparent;border:none;
  font-size:clamp(1.25rem,2.4vw,1.65rem);font-weight:600;color:var(--fg);text-align:center;
  padding:var(--space-10) var(--space-4) var(--space-2);white-space:normal;line-height:1.4;
}
.client-tile.note-tile:hover{box-shadow:none;}
.clients-note{text-align:center;color:var(--fg-muted);margin-top:var(--space-8);font-size:var(--text-sm);}

/* =========================================================
   11. SERVICES
   ========================================================= */
/* Off-white section + white cards with a soft shadow (per תחומי פעילות.docx layout guidance) */
#services{background:var(--gray-50);border-top:1px solid var(--gray-200);border-bottom:1px solid var(--gray-200);}
#services .sec-sub{margin-top:var(--space-6);}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);}
.svc-card{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  text-decoration:none;color:inherit;cursor:pointer;
  padding:var(--space-8);background:var(--white);border-radius:var(--radius-lg);box-shadow:0 4px 12px rgba(0,0,0,.05);
}
.svc-icon{
  flex:none;display:flex;align-items:center;justify-content:center;
  background:transparent;color:var(--accent-text);
  margin-bottom:var(--space-5);transition:color var(--dur) var(--ease);
}
.svc-icon svg{width:40px;height:40px;}
.svc-card:hover .svc-icon,.svc-card:focus-visible .svc-icon{color:var(--accent);}
.svc-title{font-size:var(--text-lg);font-weight:600;color:var(--accent-text);letter-spacing:-.01em;margin-bottom:var(--space-3);}
.svc-desc{font-size:var(--text-sm);color:var(--fg-muted);line-height:1.85;}
.svc-more{
  display:inline-block;margin-top:var(--space-5);font-size:var(--text-sm);font-weight:600;color:var(--fg-subtle);
  opacity:0;transform:translateX(6px);transition:opacity var(--dur),transform var(--dur),color var(--dur);
}
.svc-card:hover .svc-more,.svc-card:focus-visible .svc-more{opacity:1;transform:translateX(0);color:var(--accent-text);}
.svc-cta-wrap{text-align:center;margin-top:var(--space-16);}

/* ---- Featured services: 2 wide rows + grid, blueprint watermark ---- */
.sf-featured{display:grid;grid-template-columns:1fr;gap:var(--space-5);margin-bottom:var(--space-5);}
.sf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);}
.sf-card{
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  text-decoration:none;color:inherit;background:var(--white);
  border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-8);
  transition:border-color var(--dur),box-shadow var(--dur),transform var(--dur);
}
.sf-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md);transform:translateY(-3px);}
/* blueprint graph-paper grid at ~5% */
.sf-card::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(14,26,48,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(14,26,48,.05) 1px,transparent 1px);
  background-size:26px 26px;
}
/* engineering drawing watermark at 5% */
.sf-bp{position:absolute;inset-inline-start:-4%;bottom:-14%;width:52%;height:auto;color:var(--ink);opacity:.05;z-index:0;pointer-events:none;}
.sf-body{position:relative;z-index:1;}
.sf-kicker{display:inline-block;font-size:var(--text-xs);font-weight:600;letter-spacing:.08em;color:var(--accent-text);margin-bottom:var(--space-3);}
.sf-title{font-size:var(--text-lg);font-weight:600;color:var(--accent-text);letter-spacing:-.01em;margin-bottom:var(--space-3);}
.sf-desc{font-size:var(--text-sm);color:var(--fg-muted);line-height:1.85;}
.sf-more{display:inline-block;margin-top:var(--space-5);font-size:var(--text-sm);font-weight:600;color:var(--fg-subtle);transition:color var(--dur);}
.sf-card:hover .sf-more{color:var(--accent-text);}
/* featured (wide) emphasis */
.sf-featured .sf-card{min-height:240px;border-top:3px solid var(--accent);}
.sf-featured .sf-title{font-size:var(--text-2xl);}
.sf-featured .sf-desc{font-size:var(--text-base);line-height:1.8;}
.sf-featured .sf-bp{width:44%;}
@media(max-width:900px){.sf-featured{grid-template-columns:1fr;}.sf-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.sf-grid{grid-template-columns:1fr;}}

/* ---- Checkerboard services grid (PDF mockup: alternating red/white tiles) ---- */
.sg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);}
.sg-card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  text-decoration:none;padding:var(--space-10) var(--space-8);min-height:240px;border-radius:var(--radius-lg);
  transition:transform var(--dur),box-shadow var(--dur);
}
.sg-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.sg-card:nth-child(odd){background:var(--accent-700);color:#fff;}
.sg-card:nth-child(even){background:var(--white);color:var(--fg);border:1px solid var(--border);}
.sg-icon{display:flex;margin-bottom:var(--space-4);}
.sg-icon svg{width:36px;height:36px;}
.sg-card:nth-child(odd) .sg-icon{color:#fff;}
.sg-card:nth-child(even) .sg-icon{color:var(--accent-text);}
.sg-title{font-size:var(--text-xl);font-weight:700;letter-spacing:-.01em;margin-bottom:var(--space-3);}
.sg-card:nth-child(odd) .sg-title{color:#fff;}
.sg-card:nth-child(even) .sg-title{color:var(--accent-text);}
.sg-desc{font-size:var(--text-base);line-height:1.8;max-width:34ch;}
.sg-card:nth-child(odd) .sg-desc{color:rgba(255,255,255,.85);}
.sg-card:nth-child(even) .sg-desc{color:var(--fg-muted);}
@media(max-width:900px){.sg-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.sg-grid{grid-template-columns:1fr;}}

/* ---- Projects cards: image box + category tag & name below ---- */
.pc-grid{column-count:4;column-gap:var(--space-4);width:100vw;margin-inline:calc(50% - 50vw);padding-inline:clamp(1.25rem,4vw,4rem);}
.pc-card{position:relative;break-inside:avoid;margin-bottom:var(--space-4);border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;min-height:220px;background:linear-gradient(135deg,var(--gray-900),var(--gray-800));}
.pc-card img{width:100%;height:auto;display:block;transition:transform .55s var(--ease-out);}
.pc-card:hover img{transform:scale(1.05);}
.pc-card::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.15) 40%,transparent 65%);}
.pc-tag{position:absolute;top:var(--space-3);left:var(--space-3);z-index:2;background:rgba(18,18,22,.72);color:#fff;font-size:var(--text-xs);font-weight:600;padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);backdrop-filter:blur(4px);}
.pc-name{position:absolute;bottom:var(--space-4);inset-inline:var(--space-4);z-index:2;color:#fff;font-size:var(--text-lg);font-weight:700;line-height:1.3;text-align:start;text-shadow:0 1px 8px rgba(0,0,0,.45);}
@media(max-width:1080px){.pc-grid{column-count:3;}}
@media(max-width:720px){.pc-grid{column-count:2;}}
@media(max-width:480px){.pc-grid{column-count:1;}}

/* ---- Service areas accordion ---- */
.accordion{max-width:840px;margin:0 auto;display:grid;gap:var(--space-3);}
.acc-item{
  border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);overflow:hidden;
  transition:border-color var(--dur),box-shadow var(--dur);
}
.acc-item.open{border-color:var(--border-strong);box-shadow:var(--shadow);}
.acc-header{
  width:100%;display:flex;align-items:center;gap:var(--space-4);
  padding:var(--space-5) var(--space-6);cursor:pointer;text-align:right;background:none;border:none;font-family:inherit;
}
.acc-num{font-size:var(--text-sm);font-weight:700;color:var(--accent-text);flex:none;letter-spacing:.02em;}
.acc-title{font-size:var(--text-lg);font-weight:600;color:var(--fg);flex:1;letter-spacing:-.01em;}
.acc-chevron{width:20px;height:20px;color:var(--fg-subtle);flex:none;transition:transform var(--dur) var(--ease);}
.acc-item.open .acc-chevron{transform:rotate(180deg);color:var(--accent);}
.acc-panel{max-height:0;overflow:hidden;transition:max-height var(--dur-slow) var(--ease);}
.acc-item.open .acc-panel{max-height:360px;}
.acc-list{padding:0 calc(var(--space-6) + 2rem) var(--space-6);display:grid;gap:var(--space-3);}
.acc-list li{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-base);color:var(--fg-muted);}
.acc-list li::before{content:'';width:6px;height:6px;border-radius:var(--radius-full);background:var(--accent);flex:none;}

/* =========================================================
   12. PROJECT GALLERY (carousel + filters) + MODAL
   ========================================================= */
/* Category filters */
.proj-filters{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center;margin-bottom:var(--space-10);}
.proj-filter{
  padding:var(--space-2) var(--space-5);border-radius:var(--radius);
  font-size:var(--text-sm);font-weight:500;font-family:inherit;
  background:var(--surface);border:1px solid var(--border);color:var(--fg-muted);
  cursor:pointer;transition:background var(--dur),color var(--dur),border-color var(--dur);
}
.proj-filter:hover{background:var(--gray-100);color:var(--fg);border-color:var(--border-strong);}
.proj-filter.active{background:var(--gray-950);color:#fff;border-color:var(--gray-950);font-weight:600;}

/* Horizontal carousel — full-bleed width, arrows below */
.proj-carousel{position:relative;width:100vw;margin-inline:calc(50% - 50vw);}
.proj-track{
  display:flex;gap:var(--space-6);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:var(--space-1) clamp(1.25rem,5vw,4rem) var(--space-3);scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.proj-track::-webkit-scrollbar{display:none;}
.proj-track .proj-card{flex:0 0 clamp(280px,24%,340px);scroll-snap-align:start;}
.carousel-controls{display:flex;justify-content:center;gap:var(--space-3);margin-top:var(--space-6);}
.carousel-arrow{
  width:52px;height:52px;border-radius:var(--radius-md);
  background:var(--gray-950);color:#fff;border:none;box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center;
  transition:transform var(--dur),background var(--dur);
}
.carousel-arrow svg{width:28px;height:28px;}
.carousel-arrow:hover{transform:scale(1.06);background:var(--accent);}

.proj-grid-all{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);width:100vw;margin-inline:calc(50% - 50vw);padding-inline:clamp(1.25rem,4vw,4rem);}
@media(max-width:1080px){.proj-grid-all{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.proj-grid-all{grid-template-columns:1fr;}}
/* Lesico-style flip tiles: image+navy front, flips on hover to navy back with CTA */
.proj-card{
  position:relative;cursor:pointer;border:none;background:transparent;
  height:280px;perspective:1200px;
}
.proj-card:hover{box-shadow:none;transform:none;}
.proj-flip{
  position:relative;width:100%;height:100%;
  transition:transform .6s var(--ease-out);transform-style:preserve-3d;
}
.proj-card:hover .proj-flip,.proj-card:focus-visible .proj-flip{transform:rotateY(180deg);}
.proj-face{
  position:absolute;inset:0;overflow:hidden;border-radius:var(--radius-lg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:var(--space-6);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}
.proj-front{background:var(--gray-900);justify-content:flex-end;}
.proj-media{position:absolute;inset:0;z-index:0;}
.proj-media img{width:100%;height:100%;object-fit:cover;}
.proj-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.proj-placeholder svg{width:60px;height:60px;opacity:.3;}
.proj-front::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(15,20,38,.6) 0%,rgba(15,20,38,.12) 45%,rgba(15,20,38,.05) 100%);transition:background var(--dur);}
.proj-card:hover .proj-front::before{background:linear-gradient(to top,rgba(15,20,38,.7) 0%,rgba(15,20,38,.25) 55%,rgba(15,20,38,.15) 100%);}
.proj-front .proj-content{position:relative;z-index:2;}
.proj-tag{display:block;font-size:var(--text-xs);font-weight:600;color:rgba(255,255,255,.9);letter-spacing:.08em;margin-bottom:var(--space-2);text-shadow:0 1px 6px rgba(0,0,0,.5);}
.proj-line{font-size:clamp(1.4rem,2vw,1.75rem);font-weight:600;color:#fff;line-height:1.25;letter-spacing:-.01em;text-wrap:balance;text-shadow:0 2px 10px rgba(0,0,0,.55);}
.proj-back .proj-tag,.proj-back .proj-line{text-shadow:none;}
.proj-back{background:#2b374a;color:#fff;transform:rotateY(180deg);gap:var(--space-4);}
.proj-back .proj-line{font-size:var(--text-xl);}
.proj-view{
  display:inline-flex;align-items:center;gap:var(--space-2);
  font-size:var(--text-base);font-weight:600;color:#fff;
  padding:var(--space-3) var(--space-6);border:1px solid rgba(255,255,255,.6);
  border-radius:var(--radius-sm);transition:background var(--dur),color var(--dur),border-color var(--dur);
}
.proj-card:hover .proj-view{background:#fff;color:#2b374a;border-color:#fff;}

/* Modal */
.modal-overlay{
  position:fixed;inset:0;background:rgba(10,10,11,.6);z-index:1000;
  display:none;align-items:flex-start;justify-content:center;padding:5vh 4vw;overflow-y:auto;
  backdrop-filter:blur(4px);
}
.modal-overlay.open{display:flex;}
.modal-box{
  background:var(--surface);max-width:880px;width:100%;border-radius:var(--radius-xl);overflow:hidden;
  border:1px solid var(--border);box-shadow:var(--shadow-lg);position:relative;animation:modalIn .28s var(--ease-out);
}
@keyframes modalIn{from{opacity:0;transform:translateY(14px) scale(.99);}to{opacity:1;transform:none;}}
.modal-close{
  position:absolute;top:var(--space-4);inset-inline-end:var(--space-4);width:38px;height:38px;border-radius:var(--radius-full);
  background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;color:var(--fg);z-index:3;box-shadow:var(--shadow);transition:background var(--dur);
}
.modal-close:hover{background:#fff;}
.modal-media{height:340px;position:relative;background:linear-gradient(135deg,var(--gray-900),var(--gray-800));}
.modal-media img{width:100%;height:100%;object-fit:cover;}
.modal-media .proj-placeholder svg{width:84px;height:84px;}
.modal-content{padding:var(--space-8) var(--space-10) var(--space-10);}
.modal-title{font-size:var(--text-3xl);font-weight:700;color:var(--fg);letter-spacing:-.02em;margin-bottom:var(--space-6);line-height:1.15;}
.modal-list-title{font-size:var(--text-xs);font-weight:600;color:var(--fg-subtle);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--space-3);}
.modal-meta{display:flex;gap:var(--space-8);flex-wrap:wrap;margin-bottom:var(--space-6);padding-bottom:var(--space-6);border-bottom:1px solid var(--border);}
.modal-meta div{font-size:var(--text-sm);}
.modal-meta b{display:block;color:var(--fg-subtle);font-weight:500;font-size:var(--text-xs);margin-bottom:var(--space-1);}
.modal-meta span{color:var(--fg);font-weight:600;}
.modal-desc{color:var(--fg-muted);line-height:1.75;margin-bottom:var(--space-6);}
.modal-list{display:grid;gap:var(--space-2);margin-bottom:var(--space-2);}
.modal-list li{display:flex;gap:var(--space-3);font-size:var(--text-sm);color:var(--fg-muted);align-items:flex-start;line-height:1.6;}
.modal-list li::before{content:'';flex:none;width:6px;height:6px;border-radius:var(--radius-full);background:var(--accent);margin-top:.5rem;}
.modal-challenge{background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-5) var(--space-6);margin-bottom:var(--space-6);}
.modal-challenge p{color:var(--fg-muted);font-size:var(--text-sm);line-height:1.75;margin:0;}
.modal-solution{margin-bottom:var(--space-6);}
.modal-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);}
.mstat{background:var(--ink);border-radius:var(--radius-md);padding:var(--space-5) var(--space-3);text-align:center;}
.mstat-num{font-size:var(--text-2xl);font-weight:700;color:#fff;line-height:1.15;letter-spacing:-.02em;}
.mstat-label{font-size:var(--text-xs);color:rgba(255,255,255,.6);margin-top:var(--space-1);line-height:1.4;}

/* ---- Project modal : case-study layout ---- */
.pm-head{margin-bottom:var(--space-6);}
.pm-head .modal-title{margin-bottom:0;}
.pm-rule{display:block;width:60px;height:3px;background:var(--accent);border-radius:2px;margin:var(--space-4) 0;}
.pm-lead{font-size:var(--text-base);color:var(--fg-muted);line-height:1.7;}
.pm-statbar{
  display:flex;flex-wrap:wrap;background:var(--ink);border-radius:var(--radius-lg);
  padding:var(--space-5) var(--space-2);margin-bottom:var(--space-8);
}
.pm-stat{flex:1;min-width:150px;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-1) var(--space-5);border-inline-start:1px solid rgba(255,255,255,.12);}
.pm-stat:first-child{border-inline-start:none;}
.pm-stat svg{width:26px;height:26px;color:var(--accent-bright);flex:none;}
.pm-stat-v{display:block;color:#fff;font-weight:600;font-size:var(--text-sm);line-height:1.3;}
.pm-stat-l{display:block;color:rgba(255,255,255,.5);font-size:var(--text-xs);margin-top:2px;}
.pm-quote{background:var(--bg-subtle);border-radius:var(--radius-lg);padding:var(--space-6) var(--space-8);margin-bottom:var(--space-8);text-align:center;}
.pm-qmark{display:block;color:var(--accent);font-size:2.5rem;font-weight:700;line-height:.6;font-family:Georgia,'Times New Roman',serif;margin-bottom:var(--space-2);}
.pm-quote p{font-size:var(--text-lg);font-weight:500;color:var(--fg);line-height:1.6;margin:0;}
.pm-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);margin-bottom:var(--space-8);align-items:start;}
.pm-col-head{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:1px solid var(--border);}
.pm-col-num{font-size:var(--text-sm);font-weight:700;color:var(--accent-text);letter-spacing:.04em;}
.pm-col-title{font-size:var(--text-lg);font-weight:600;color:var(--fg);letter-spacing:-.01em;}
.pm-col-text{font-size:var(--text-sm);color:var(--fg-muted);line-height:1.85;}
.pm-timeline{display:grid;gap:var(--space-4);}
.pm-timeline li{position:relative;padding-inline-start:var(--space-6);font-size:var(--text-sm);color:var(--fg-muted);line-height:1.6;}
.pm-timeline li::before{content:'';position:absolute;inset-inline-start:0;top:.4rem;width:9px;height:9px;border-radius:var(--radius-full);background:var(--accent);}
.pm-timeline li::after{content:'';position:absolute;inset-inline-start:4px;top:1.1rem;bottom:-1rem;width:1px;background:var(--border);}
.pm-timeline li:last-child::after{display:none;}
.pm-bigstats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);border-top:1px solid var(--border);padding-top:var(--space-6);}
.pm-big{text-align:center;border-inline-start:1px solid var(--border);}
.pm-big:first-child{border-inline-start:none;}
.pm-big-n{font-size:var(--text-3xl);font-weight:700;color:var(--fg);letter-spacing:-.02em;line-height:1.1;}
.pm-big-l{font-size:var(--text-xs);color:var(--accent-text);margin-top:var(--space-2);}
.pm-result{display:flex;gap:var(--space-5);align-items:flex-start;background:var(--ink);border-radius:var(--radius-lg);padding:var(--space-6) var(--space-8);margin-top:var(--space-8);}
.pm-result-icon{
  width:52px;height:52px;border-radius:var(--radius-full);flex:none;
  background:rgba(193,27,43,.16);color:var(--accent-bright);
  display:flex;align-items:center;justify-content:center;
}
.pm-result-icon svg{width:26px;height:26px;}
.pm-result-title{color:#fff;font-weight:700;font-size:var(--text-lg);margin-bottom:var(--space-2);letter-spacing:-.01em;}
.pm-result p{color:rgba(255,255,255,.72);font-size:var(--text-sm);line-height:1.75;margin:0;}
@media(max-width:640px){
  .pm-result{flex-direction:column;gap:var(--space-4);padding:var(--space-5) var(--space-6);}
  .pm-statbar{flex-direction:column;gap:var(--space-3);padding:var(--space-5);}
  .pm-stat{border-inline-start:none;padding:0;min-width:0;}
  .pm-cols{grid-template-columns:1fr;gap:var(--space-6);}
  .pm-bigstats{grid-template-columns:1fr;gap:var(--space-5);}
  .pm-big{border-inline-start:none;}
}

/* =========================================================
   13. CONTACT
   ========================================================= */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--space-16);}
.contact-info-list{margin-top:var(--space-8);display:grid;gap:var(--space-5);}
.contact-info-item{display:flex;gap:var(--space-4);align-items:flex-start;}
.ci-icon{
  width:44px;height:44px;border-radius:var(--radius-md);background:var(--accent-50);border:1px solid var(--accent-100);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.ci-icon svg{width:19px;height:19px;color:var(--accent);}
.ci-label{font-size:var(--text-xs);color:var(--fg-subtle);margin-bottom:var(--space-1);}
.ci-value{font-weight:600;color:var(--fg);font-size:var(--text-base);}
.ci-value a{text-decoration:none;}
.ci-value a:hover{color:var(--accent);}

.contact-form{background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--border);padding:var(--space-8);box-shadow:var(--shadow-lg);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);}
.field{margin-bottom:var(--space-4);}
.field label{display:block;font-size:var(--text-sm);font-weight:600;color:var(--fg);margin-bottom:var(--space-2);}
.field label .req{color:var(--accent);font-weight:700;}
.field input,.field textarea{
  width:100%;height:44px;padding:0 var(--space-4);border:1px solid var(--border-strong);border-radius:var(--radius-lg);
  font-family:inherit;font-size:var(--text-base);color:var(--fg);background:var(--surface);
  transition:border-color var(--dur),box-shadow var(--dur);
}
.field textarea{height:auto;min-height:120px;padding:var(--space-3) var(--space-4);resize:vertical;line-height:1.6;}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-50);}
.form-note{font-size:var(--text-xs);color:var(--fg-subtle);margin-top:var(--space-3);line-height:1.5;}
.form-success{display:none;background:#ECFDF3;color:#087443;border:1px solid #A6F0C6;padding:var(--space-3) var(--space-4);border-radius:var(--radius);font-size:var(--text-sm);margin-bottom:var(--space-4);}
.form-success.show{display:block;}

/* =========================================================
   14. FOOTER
   ========================================================= */
footer{background:var(--white);color:var(--fg-muted);padding:var(--space-16) 0 0;border-top:1px solid var(--gray-200);}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--space-10);padding-bottom:var(--space-12);border-bottom:1px solid var(--border);}
.footer-logo{display:inline-block;margin-bottom:var(--space-5);}
.footer-logo img{height:36px;display:block;}
.footer-desc{font-size:var(--text-sm);line-height:1.8;color:var(--fg-muted);max-width:340px;}
.footer-title{color:var(--fg);font-weight:600;margin-bottom:var(--space-4);font-size:var(--text-sm);}
.footer-links{display:grid;gap:var(--space-3);}
.footer-links a{text-decoration:none;font-size:var(--text-sm);color:var(--fg-muted);transition:color var(--dur);}
.footer-links a:hover{color:var(--fg);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-4);padding:var(--space-6) 0;font-size:var(--text-xs);color:var(--fg-subtle);}
.footer-bottom a{text-decoration:none;color:var(--fg-muted);}
.footer-bottom a:hover{color:var(--fg);}

/* =========================================================
   15. ACCESSIBILITY WIDGET
   ========================================================= */
#a11y-toggle{
  position:fixed;bottom:var(--space-6);inset-inline-end:var(--space-6);z-index:1200;
  width:52px;height:52px;border-radius:var(--radius-full);background:var(--gray-950);color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);
  transition:transform var(--dur),background var(--dur);
}
#a11y-toggle:hover{background:var(--accent);transform:scale(1.05);}
#a11y-toggle svg{width:26px;height:26px;}
#a11y-panel{
  position:fixed;bottom:calc(var(--space-6) + 64px);inset-inline-end:var(--space-6);z-index:1200;width:300px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);
  padding:var(--space-5);display:none;max-height:80vh;overflow-y:auto;
}
#a11y-panel.open{display:block;}
.a11y-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-4);}
.a11y-hdr h3{font-size:var(--text-base);font-weight:600;color:var(--fg);}
.a11y-close{width:28px;height:28px;border-radius:var(--radius-full);background:var(--gray-100);display:flex;align-items:center;justify-content:center;font-size:1rem;}
.a11y-opt{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-1);border-bottom:1px solid var(--border);font-size:var(--text-sm);color:var(--fg);}
.a11y-opt:last-of-type{border-bottom:none;}
.a11y-btns{display:flex;gap:var(--space-1);}
.a11y-btns button{width:30px;height:30px;border-radius:var(--radius-sm);background:var(--gray-100);font-weight:700;font-size:var(--text-sm);color:var(--fg);display:flex;align-items:center;justify-content:center;transition:background var(--dur),color var(--dur);}
.a11y-btns button:hover{background:var(--gray-950);color:#fff;}
.a11y-switch{width:40px;height:22px;border-radius:var(--radius-full);background:var(--gray-300);position:relative;transition:background var(--dur);flex:none;}
.a11y-switch::after{content:'';position:absolute;top:2px;inset-inline-start:2px;width:18px;height:18px;border-radius:var(--radius-full);background:#fff;transition:inset-inline-start var(--dur);box-shadow:var(--shadow-sm);}
.a11y-switch.active{background:var(--accent);}
.a11y-switch.active::after{inset-inline-start:20px;}
.a11y-reset{width:100%;margin-top:var(--space-3);padding:var(--space-2);border-radius:var(--radius);background:var(--gray-100);font-weight:600;font-size:var(--text-sm);color:var(--fg);transition:background var(--dur),color var(--dur);}
.a11y-reset:hover{background:var(--gray-950);color:#fff;}
.a11y-link{display:block;text-align:center;margin-top:var(--space-3);font-size:var(--text-xs);color:var(--accent-text);font-weight:600;text-decoration:none;}

/* ---- High contrast mode ---- */
body.a11y-contrast{background:#000;color:#FFEA00;}
body.a11y-contrast section,body.a11y-contrast .hero{background:#000 !important;}
body.a11y-contrast .hero::before,body.a11y-contrast .hero::after,body.a11y-contrast .hero-media{display:none;}
body.a11y-contrast .sec-title,body.a11y-contrast h1,body.a11y-contrast h2,body.a11y-contrast h3,body.a11y-contrast .hero h1{color:#FFEA00 !important;}
body.a11y-contrast .sec-sub,body.a11y-contrast p,body.a11y-contrast .hero-desc,body.a11y-contrast .hstat-num,body.a11y-contrast .hstat-label{color:#FFEA00 !important;}
body.a11y-contrast .hstat-num span,body.a11y-contrast .hero h1 span{color:#FFEA00 !important;}
body.a11y-contrast header#site-nav{background:#000;border-color:#FFEA00;}
body.a11y-contrast .nav-links a,body.a11y-contrast .nav-phone{color:#FFEA00 !important;}
body.a11y-contrast .nav-logo img{background:#fff;border-radius:4px;padding:2px;}
body.a11y-contrast .svc-card,body.a11y-contrast .team-card,body.a11y-contrast .proj-card,body.a11y-contrast .client-tile,body.a11y-contrast .contact-form,body.a11y-contrast .modal-box,body.a11y-contrast .modal-challenge,body.a11y-contrast .mstat{
  background:#000 !important;border:1px solid #FFEA00 !important;
}
body.a11y-contrast .btn-primary{background:#FFEA00;color:#000;}
body.a11y-contrast .client-tile.note-tile{color:#FFEA00 !important;border:none !important;}
body.a11y-contrast footer{background:#000;border-top:1px solid #FFEA00;}
body.a11y-links a{text-decoration:underline !important;}
body.a11y-readable,body.a11y-readable p,body.a11y-readable li,body.a11y-readable span{
  font-family:Arial,Helvetica,sans-serif !important;letter-spacing:.02em;line-height:1.9 !important;
}

/* =========================================================
   16. FOCUS / SKIP LINK / REDUCED MOTION
   ========================================================= */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
.proj-card:focus-visible,.a11y-switch:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-sm);
}
.skip-link{
  position:absolute;top:-80px;inset-inline-start:var(--space-4);z-index:1300;
  background:var(--gray-950);color:#fff;padding:var(--space-3) var(--space-5);border-radius:0 0 var(--radius) var(--radius);
  text-decoration:none;font-weight:600;transition:top var(--dur);
}
.skip-link:focus{top:0;}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
  .reveal{opacity:1 !important;transform:none !important;}
}

/* =========================================================
   17. RESPONSIVE
   ========================================================= */
@media(max-width:1080px){
  .clients-grid{grid-template-columns:repeat(4,1fr);}
  .svc-grid{grid-template-columns:repeat(2,1fr);}
  .about-grid,.about-layout,.contact-grid{grid-template-columns:1fr;gap:var(--space-12);}
  .about-stats{flex-direction:row;flex-wrap:wrap;gap:var(--space-8);}
  .about-media img{height:420px;}
  .team-grid{grid-template-columns:repeat(3,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .client-tile.note-tile{grid-column:1 / -1;}
}
@media(max-width:960px){
  .nav-links,.nav-phone{display:none;}
  .nav-burger{display:flex;}
}
@media(max-width:760px){
  section{padding:var(--space-16) 0;}
  .sec-hdr{margin-bottom:var(--space-12);}
  .clients-grid{grid-template-columns:repeat(3,1fr);}
  .svc-grid,.team-grid{grid-template-columns:1fr;}
  .proj-track .proj-card{flex:0 0 min(85%,320px);}
  .form-row{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;gap:var(--space-8);}
  .modal-media{height:220px;}
  .modal-content{padding:var(--space-6);}
  .modal-title{font-size:var(--text-2xl);}
  .modal-stats{grid-template-columns:repeat(2,1fr);}
  .hstat{padding:var(--space-5) var(--space-2);}
}
@media(max-width:400px){
  .nav-cta{display:none;}
  .clients-grid{grid-template-columns:repeat(2,1fr);}
}