/* KoreStack, global stylesheet, shared by every page */

:root{
  color-scheme: dark;
  --black:      #0A1220;
  --near-black: #0E1728;
  --panel:      #111C30;
  --line:       #22314B;
  --line-soft:  #182338;
  --white:      #EEF3FA;
  --gray-1:     #A9B7CC;
  --gray-2:     #7487A3;
  --gray-3:     #485974;

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', 'SF Mono', 'Fira Code', Consolas, monospace;

  /* Used sparingly, status/system indicators only, the site stays
     monochrome everywhere else on purpose. */
  --accent-green: #5FD4E6; /* blueprint cyan, kept under old var name so nothing breaks */
  --accent-amber: #F0B45A;
  --accent-blue:  #6FA8E8;
  --accent-red:   #E06060;

  --container: 1440px;
  --pad: 40px;
  --radius: 6px;
  --radius-lg: 12px;
  --glow: 95,212,230;

  --ease: cubic-bezier(.22,.61,.36,1);
}

@media (max-width: 720px){ :root{ --pad: 20px; } }

/* Light theme, toggled via [data-theme="light"] on <html>, default is dark */
html[data-theme="light"]{
  color-scheme: light;
  --black:      #F5F8FB;
  --near-black: #ECF1F7;
  --panel:      #E4EAF2;
  --line:       #CFD9E6;
  --line-soft:  #DFE6EF;
  --white:      #101B2E;
  --gray-1:     #3E4E66;
  --gray-2:     #64758F;
  --gray-3:     #93A2B8;
}
html[data-theme="light"] .site-header{ background:rgba(255,255,255,.78); }
html[data-theme="light"] .mobile-nav{ background:rgba(255,255,255,.98); }
html[data-theme="light"] .chat-launcher{ box-shadow:0 12px 30px -10px rgba(0,0,0,.18); }
html[data-theme="light"] .chat-panel{ box-shadow:0 20px 50px -15px rgba(0,0,0,.22); }
html, body{ transition:background-color .25s var(--ease), color .25s var(--ease); }

/* RTL (Arabic) layout adjustments */
html[dir="rtl"] .eyebrow::before{ margin-left:0; }
html[dir="rtl"] .service-card h3,
html[dir="rtl"] .breadcrumbs .container,
html[dir="rtl"] .footer-bottom{ direction:rtl; }
html[dir="rtl"] .service-card h3 .arrow{ transform:scaleX(-1); }
html[dir="rtl"] .service-card:hover h3 .arrow{ transform:scaleX(-1) translate(3px,-3px); }
html[dir="rtl"] .vision-statement{ border-left:none; border-right:2px solid var(--white); padding-left:0; padding-right:44px; }
html[dir="rtl"] .split .col-label{ text-align:right; }
@media (max-width:640px){ html[dir="rtl"] .vision-statement{ padding-right:24px; } }


*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }

::selection{ background:var(--white); color:var(--black); }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--black); }
::-webkit-scrollbar-thumb{ background:var(--line); border-radius:5px; border:2px solid var(--black); }
::-webkit-scrollbar-thumb:hover{ background:var(--gray-2); }
@supports (scrollbar-color: auto){ html{ scrollbar-color:var(--line) transparent; } }

:focus-visible{ outline:2px solid var(--white); outline-offset:3px; }

.skip-link{
  position:absolute; left:16px; top:-60px; z-index:2000;
  background:var(--white); color:var(--black);
  padding:12px 18px; border-radius:var(--radius);
  font-size:13px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  transition:top .2s var(--ease);
}
.skip-link:focus-visible{ top:16px; }

body{
  background:var(--black);
  color:var(--white);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-wrap:break-word;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--pad);
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gray-1);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{ content:''; width:14px; height:1px; background:var(--accent-green); flex-shrink:0; }

h1,h2,h3{ font-family:var(--font-display); font-weight:600; letter-spacing:-0.02em; overflow-wrap:break-word; word-break:break-word; }
h1{ font-size:clamp(36px,5.4vw,68px); line-height:1.05; letter-spacing:-0.03em; text-wrap:balance; }
h2{ font-size:clamp(28px,3.4vw,42px); line-height:1.1; text-wrap:balance; }
h3{ font-size:19px; line-height:1.3; text-transform:none; }
p{ color:var(--gray-1); }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px 26px;
  border-radius:var(--radius);
  font-family:var(--font-body);
  font-weight:600;
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1;
  transition:transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
  white-space:nowrap;
}
.btn-primary{ background:var(--white); color:var(--black); }
.btn-primary:hover{ background:var(--gray-1); transform:translateY(-1px); }
.btn-ghost{ border:1px solid var(--line); color:var(--white); }
.btn-ghost:hover{ border-color:var(--white); background:var(--near-black); }
.btn:focus-visible{ outline:2px solid var(--white); outline-offset:3px; }

/* Header, constant translucent panel, no jarring change on scroll.
   Add a tiny extra border/shadow once scrolled, nothing more. */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  border-bottom:1px solid var(--line-soft);
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header.is-scrolled{
  border-color:var(--line);
  box-shadow:0 8px 24px -16px rgba(0,0,0,.6);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:80px;
}

.logo{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.logo-mark{ width:auto; height:30px; color:var(--white); transition:color .25s var(--ease), opacity .2s var(--ease); }
.logo:hover .logo-mark{ opacity:.8; }

.main-nav{ display:flex; align-items:center; gap:32px; }
.main-nav a{
  font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--gray-2);
  position:relative; padding:6px 0;
  transition:color .2s var(--ease);
  display:inline-block;
}
.main-nav a:hover{ color:var(--white); }
.main-nav a.active{ color:var(--white); }
.main-nav a.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background:var(--white);
}

.header-actions{ display:flex; align-items:center; gap:14px; }
.header-actions .btn-ghost{ padding:12px 20px; }
.nav-toggle{ display:none; }

/* Theme toggle button */
.theme-toggle{ padding:12px 14px; position:relative; width:42px; }
.theme-icon{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:14px; line-height:1; transition:opacity .2s var(--ease); }
.theme-icon-sun{ opacity:0; }
.theme-icon-moon{ opacity:1; }
html[data-theme="light"] .theme-icon-sun{ opacity:1; }
html[data-theme="light"] .theme-icon-moon{ opacity:0; }


.mobile-nav{
  display:none;
  position:fixed; top:0; right:0; bottom:0; left:0;
  z-index:999;
  background:rgba(0,0,0,.97);
  padding:110px 28px 40px;
}
.mobile-nav.is-open{ display:block; }
.mobile-nav a{
  display:block; padding:16px 0; border-bottom:1px solid var(--line);
  font-family:var(--font-display); font-size:22px; text-transform:uppercase; color:var(--white);
}
.mobile-nav .mobile-actions{ display:flex; gap:14px; margin-top:28px; flex-wrap:wrap; }

@media (max-width: 980px){
  .main-nav{ display:none; }
  .header-actions .btn-ghost{ display:none; }
  .nav-toggle{ display:block; }
}

main{ padding-top:80px; }

body{ animation:page-in .5s var(--ease); }
@keyframes page-in{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, body{ animation:none !important; transition:none !important; }
}

/* Breadcrumbs */
.breadcrumbs{ border-bottom:1px solid var(--line-soft); background:var(--near-black); }
.breadcrumbs .container{ display:flex; align-items:center; gap:10px; padding:14px var(--pad); font-size:12px; letter-spacing:.04em; text-transform:uppercase; }
.breadcrumbs a{ color:var(--gray-2); transition:color .2s var(--ease); }
.breadcrumbs a:hover{ color:var(--white); }
.breadcrumbs span.sep{ color:var(--gray-3); }
.breadcrumbs span.current{ color:var(--white); }

/* Error pages (404 / 500) */
html, body{ height:100%; }
body{ display:flex; flex-direction:column; min-height:100vh; }
#main-content{ flex:1; display:flex; flex-direction:column; }
.site-footer{ margin-top:auto; }

.error-page{
  flex:1;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
}
.error-page .container{ display:flex; flex-direction:column; align-items:center; }
.error-page h1{ margin-top:18px; }
.error-page p.lead{ max-width:520px; margin:22px 0 0; }
.error-page .hero-ctas{ justify-content:center; margin-top:32px; }

/* Hero (home) */
.hero{ padding:56px 0 90px; border-bottom:1px solid var(--line); }
.hero h1{ max-width:920px; }
.hero p.lead{ font-size:18px; max-width:560px; margin:26px 0 38px; color:var(--gray-1); }
.hero-ctas{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }

/* Sections */
.section{ padding:100px 0; border-bottom:1px solid var(--line); }
.section-head{ max-width:660px; margin-bottom:56px; }
.section-head h2{ margin-top:16px; }
.section-head p{ margin-top:16px; font-size:16px; }

/* Services grid (home) */
.services-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.service-card{
  background:var(--black); padding:38px 32px; display:flex; flex-direction:column; gap:18px;
  transition:background .25s var(--ease);
}
.service-card:hover{ background:var(--near-black); }
.service-num{ font-family:var(--font-mono); font-size:12px; color:var(--accent-green); letter-spacing:.05em; }
.service-card h3{ display:flex; align-items:center; justify-content:space-between; font-weight:700; gap:12px; }
.service-card h3 .arrow{ font-size:16px; color:var(--gray-3); transition:transform .25s var(--ease), color .25s var(--ease); flex-shrink:0; }
.service-card:hover h3 .arrow{ transform:translate(3px,-3px); color:var(--white); }
.service-card p{ font-size:14px; flex:1; }
@media (max-width: 980px){ .services-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 640px){ .services-grid{ grid-template-columns:1fr; } }

/* Story / split layout (about) */
.split{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:start; }
.split .col-label{ position:sticky; top:120px; }
.split p{ font-size:16px; margin-bottom:18px; max-width:620px; }
.split p:last-child{ margin-bottom:0; }
@media (max-width:900px){
  .split{ grid-template-columns:1fr; gap:28px; }
  .split .col-label{ position:static; }
}

/* Values grid (about) */
.values-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.value-card{ background:var(--black); padding:38px 32px; }
.value-num{ font-family:var(--font-display); font-size:12px; color:var(--gray-2); letter-spacing:.1em; }
.value-card h3{ margin:16px 0 10px; font-weight:700; }
.value-card p{ font-size:14px; }
@media (max-width: 980px){ .values-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 640px){ .values-grid{ grid-template-columns:1fr; } }

/* Service rows (about) */
.service-rows{ border-top:1px solid var(--line); }
.service-row{
  display:grid; grid-template-columns:80px 1fr 1fr; gap:32px;
  padding:34px 0; border-bottom:1px solid var(--line);
  align-items:start;
}
.service-row .num{ font-family:var(--font-display); font-size:13px; color:var(--gray-2); letter-spacing:.08em; }
.service-row h3{ font-weight:700; }
.service-row p{ font-size:14px; margin:0; }
@media (max-width:780px){
  .service-row{ grid-template-columns:1fr; gap:10px; }
}

/* Process (home) */
.process{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.process-step{ background:var(--black); padding:36px 30px; }
.process-step .code{ font-family:var(--font-mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-green); }
.process-step h3{ margin:16px 0 10px; font-weight:700; }
.process-step p{ font-size:14px; }
@media (max-width:780px){ .process{ grid-template-columns:1fr; } }

/* Stats row (about) */
.stats-row{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); }
.stats-row div{ padding:30px 28px 0 0; }
.stats-row div:not(:first-child){ border-left:1px solid var(--line); padding-left:28px; }
.stats-row .num{ font-family:var(--font-display); font-weight:800; font-size:clamp(26px,3.2vw,38px); line-height:1; }
.stats-row .lbl{ font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--gray-2); margin-top:10px; line-height:1.4; }
@media (max-width:780px){
  .stats-row{ grid-template-columns:repeat(2,1fr); row-gap:24px; }
  .stats-row div:nth-child(3){ border-left:none; padding-left:0; }
}

/* Vision statement (About page only, intentionally not the boxed
   testimonial/leadership style used on the homepage) */
.vision-statement{
  border-left:2px solid var(--white);
  padding-left:44px;
  max-width:820px;
}
.vision-statement p{
  font-family:var(--font-display); font-weight:600; color:var(--white);
  font-size:clamp(22px,2.6vw,32px); line-height:1.45; text-transform:none;
}
@media (max-width:640px){ .vision-statement{ padding-left:24px; } }
.testimonial, .leadership{ border:1px solid var(--line); padding:60px; }
.testimonial blockquote, .leadership blockquote{ font-family:var(--font-display); font-size:clamp(20px,2.4vw,28px); font-weight:600; color:var(--white); line-height:1.4; max-width:780px; text-transform:none; }
.testimonial cite, .leadership cite{ display:block; margin-top:26px; font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--gray-2); }
@media (max-width:780px){ .testimonial, .leadership{ padding:34px; } }

/* CTA / pricing teaser banners */
.pricing-teaser, .cta-banner{
  border:1px solid var(--line); padding:60px;
  display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap;
  background:var(--near-black);
}
.pricing-teaser h2, .cta-banner h2{ max-width:480px; overflow-wrap:break-word; word-break:break-word; }
@media (max-width:640px){
  .pricing-teaser, .cta-banner{ padding:32px 24px; }
}

/* Footer */
.site-footer{ background:var(--black); }
.footer-top{ padding:70px 0 50px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:40px; }
.footer-brand .footer-logo{ display:inline-block; margin-bottom:22px; }
.footer-brand .footer-logo-img{ height:30px; width:auto; display:block; transition:filter .25s var(--ease); }
html[data-theme="light"] .footer-brand .footer-logo-img{ filter:invert(1); }
.footer-brand p{ font-size:14px; max-width:260px; }

/* ============================================================
   Pricing page
   ============================================================ */
.price-range-strip{
  display:flex; flex-wrap:wrap; border:1px solid var(--line); margin-top:48px;
}
.price-range-item{
  flex:1; min-width:200px; padding:28px 32px; border-right:1px solid var(--line);
}
.price-range-item:last-child{ border-right:none; }
.price-range-item .lbl{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--gray-2); }
.price-range-item .val{ font-family:var(--font-display); font-weight:800; font-size:clamp(20px,2.4vw,28px); margin-top:10px; letter-spacing:-.01em; }
@media (max-width:640px){ .price-range-item{ border-right:none; border-bottom:1px solid var(--line); } .price-range-item:last-child{ border-bottom:none; } }

.pricing-cats{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); margin-top:8px;
}
.pricing-cat{ background:var(--black); padding:42px 38px; }
.pricing-cat .num{ font-family:var(--font-display); font-size:12px; color:var(--gray-2); letter-spacing:.1em; }
.pricing-cat h3{ margin:14px 0 10px; font-weight:700; font-size:21px; }
.pricing-cat .desc{ font-size:14px; margin-bottom:22px; max-width:480px; }
.check-list{ display:grid; grid-template-columns:1fr 1fr; gap:9px 20px; }
.check-list li{ font-size:13px; color:var(--gray-1); padding-left:17px; position:relative; line-height:1.5; }
.check-list li::before{
  content:''; position:absolute; left:0; top:7px; width:6px; height:6px;
  background:var(--gray-3); border-radius:50%;
}
.chatbot-sub{ margin-top:26px; padding-top:22px; border-top:1px solid var(--line-soft); }
.chatbot-sub h4{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--white); margin-bottom:10px; font-weight:700; }
.chatbot-sub .check-list{ grid-template-columns:1fr 1fr; }
.check-list-3col{ grid-template-columns:repeat(3,1fr); }
@media (max-width:980px){ .pricing-cats{ grid-template-columns:1fr; } }
@media (max-width:780px){ .check-list-3col{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .check-list, .chatbot-sub .check-list, .check-list-3col{ grid-template-columns:1fr; } }
html[dir="rtl"] .check-list li{ padding-left:0; padding-right:17px; }
html[dir="rtl"] .check-list li::before{ left:auto; right:0; }

.includes-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); margin-top:40px;
}
.includes-item{
  background:var(--black); padding:26px 24px; display:flex; align-items:flex-start; gap:12px;
  font-size:14px; color:var(--white); line-height:1.4;
}
.includes-item .tick{
  flex-shrink:0; width:22px; height:22px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:11px; margin-top:1px;
}
@media (max-width:980px){ .includes-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .includes-grid{ grid-template-columns:1fr; } }

/* FAQ accordion (native <details>, no JS required) */
.faq-list{ border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); padding:24px 0; }
.faq-item summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between;
  font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--white);
  gap:20px; -webkit-tap-highlight-color:transparent;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-icon{ flex-shrink:0; font-size:20px; font-weight:400; color:var(--gray-2); transition:transform .25s var(--ease); line-height:1; }
.faq-item[open] .faq-icon{ transform:rotate(45deg); }
.faq-item p{ font-size:14px; margin-top:16px; max-width:760px; }

/* Reusable numbered section label, e.g. "01, Website Development" */
.section-num{ font-family:var(--font-mono); font-size:12px; color:var(--accent-green); letter-spacing:.05em; }
#main-content{ transition:opacity .18s var(--ease); }
#main-content.is-loading{ opacity:0; }
.footer-col h4{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--gray-2); margin-bottom:18px; font-weight:600; }
.footer-col ul{ display:flex; flex-direction:column; gap:12px; }
.footer-col a{ font-size:14px; color:var(--gray-1); transition:color .2s var(--ease); }
.footer-col a:hover{ color:var(--white); }
.footer-bottom{ border-top:1px solid var(--line); padding:24px 0; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.footer-bottom p{ font-size:13px; color:var(--gray-2); }
.footer-legal{ display:flex; gap:24px; flex-wrap:wrap; }
.footer-legal a{ font-size:13px; color:var(--gray-2); }
.footer-legal a:hover{ color:var(--white); }
@media (max-width:980px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .footer-top{ grid-template-columns:1fr; } }

.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in-view{ opacity:1; transform:translateY(0); }

/* Chat widget */
.chat-launcher{
  position:fixed; bottom:26px; right:26px; z-index:1100;
  display:flex; align-items:center; gap:10px;
  padding:14px 20px; background:var(--white); color:var(--black);
  border-radius:var(--radius); font-size:13px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.6);
  transition:transform .25s var(--ease), background .25s var(--ease);
}
.chat-launcher:hover{ background:var(--gray-1); transform:translateY(-2px); }
.chat-launcher .ico{ width:8px; height:8px; border-radius:50%; background:var(--black); flex-shrink:0; }

.chat-panel{
  position:fixed; bottom:26px; right:26px; z-index:1100;
  width:340px; max-width:calc(100% - 32px);
  background:var(--near-black); border:1px solid var(--line);
  display:none; flex-direction:column;
  box-shadow:0 20px 50px -15px rgba(0,0,0,.7);
}
.chat-panel.is-open{ display:flex; }
.chat-panel-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border-bottom:1px solid var(--line);
}
.chat-panel-header .title{ font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; display:flex; align-items:center; gap:8px; }
.chat-panel-header .title .dot{ width:6px; height:6px; border-radius:50%; background:var(--white); }
.chat-panel-header button{ color:var(--gray-2); font-size:18px; line-height:1; }
.chat-panel-header button:hover{ color:var(--white); }
.chat-body{ padding:18px; font-size:13px; color:var(--gray-1); line-height:1.6; max-height:320px; overflow-y:auto; display:flex; flex-direction:column; gap:10px; }
.chat-body p{ margin-bottom:12px; }
.chat-msg{ padding:9px 13px; border-radius:var(--radius); max-width:88%; white-space:pre-wrap; }
.chat-msg-agent{ background:var(--near-black); border:1px solid var(--line); align-self:flex-start; }
.chat-msg-user{ background:var(--white); color:var(--black); align-self:flex-end; }
html[data-theme="light"] .chat-msg-user{ background:var(--black); color:var(--white); }
.chat-typing{ display:flex; align-items:center; gap:4px; padding:13px 15px; }
.chat-typing span{
  width:6px; height:6px; border-radius:50%; background:var(--gray-2);
  animation:chatTypingBounce 1.1s infinite ease-in-out;
}
.chat-typing span:nth-child(2){ animation-delay:.15s; }
.chat-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes chatTypingBounce{
  0%, 60%, 100%{ transform:translateY(0); opacity:.5; }
  30%{ transform:translateY(-4px); opacity:1; }
}
.chat-input-row{ display:flex; border-top:1px solid var(--line); }
.chat-input-row input{
  flex:1; background:transparent; border:none; padding:14px 16px;
  color:var(--white); font-size:13px; font-family:var(--font-body);
}
.chat-input-row input::placeholder{ color:var(--gray-3); }
.chat-input-row input:disabled{ cursor:not-allowed; }
.chat-input-row button{ padding:0 18px; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--gray-2); }
.chat-input-row button:disabled{ cursor:not-allowed; }

/* ============================================================
   Auth pages (login / register)
   ============================================================ */
.auth-wrap{ display:flex; justify-content:center; padding:70px 0 100px; }
.auth-card{ width:100%; max-width:440px; border:1px solid var(--line); padding:44px 38px; background:var(--panel); box-shadow:0 30px 80px -30px rgba(0,0,0,.5); }
.auth-card h1{ font-size:24px; margin-bottom:8px; }
.auth-card .sub{ font-size:14px; margin-bottom:32px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--gray-2); margin-bottom:8px; }
.field input{
  width:100%; padding:13px 16px; background:var(--near-black); border:1px solid var(--line);
  color:var(--white); font-family:var(--font-body); font-size:14px; transition:border-color .2s var(--ease);
}
.field input:focus{ outline:none; border-color:var(--white); }
.field input::placeholder{ color:var(--gray-3); }
.auth-submit{ width:100%; justify-content:center; margin-top:6px; }
.auth-divider{ display:flex; align-items:center; gap:14px; margin:26px 0; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--gray-3); }
.auth-divider::before, .auth-divider::after{ content:''; flex:1; height:1px; background:var(--line); }
.btn-google{
  width:100%; justify-content:center; display:flex; align-items:center; gap:10px;
  background:#FFFFFF; color:#1f1f1f; border:1px solid #DDDDDD;
}
.btn-google:hover{ background:#f1f1f1; }
.btn-google svg{ width:18px; height:18px; flex-shrink:0; }
.btn-discord, .btn-github{
  width:100%; justify-content:center; display:flex; align-items:center; gap:10px;
  margin-top:10px;
}
.btn-discord svg, .btn-github svg{ width:18px; height:18px; flex-shrink:0; }
.btn-discord{ background:#5865F2; color:#FFFFFF; border:1px solid #5865F2; }
.btn-discord:hover{ background:#4752C4; }
.btn-github{ background:#181717; color:#FFFFFF; border:1px solid #333333; }
.btn-github:hover{ background:#2b2b2b; }
.auth-foot{ margin-top:28px; font-size:13px; text-align:center; }
.auth-foot a{ color:var(--white); text-decoration:underline; }
.auth-alert{
  padding:13px 16px; margin-bottom:22px; font-size:13px; border:1px solid var(--line);
  background:var(--near-black); color:var(--white);
}
.auth-alert.is-error{ border-color:#7a2e2e; }
.auth-alert.is-success{ border-color:#2e6b47; }
.auth-alert.is-info{ border-color:var(--gray-2); }

/* ============================================================
   Legal / policy pages
   ============================================================ */
.legal-content{ max-width:820px; }
.legal-content h2{ font-size:20px; margin:44px 0 14px; text-transform:none; }
.legal-content h2:first-child{ margin-top:0; }
.legal-content p{ font-size:14px; margin-bottom:14px; }
.legal-content ul{ margin:0 0 14px; padding-left:20px; }
.legal-content li{ font-size:14px; margin-bottom:8px; color:var(--gray-1); }
.legal-updated{ font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--gray-2); margin-bottom:36px; }
html[dir="rtl"] .legal-content ul{ padding-left:0; padding-right:20px; }

/* ============================================================
   Cookie consent banner
   ============================================================ */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  background:var(--black); border-top:1px solid var(--line);
  padding:22px var(--pad); display:none;
  transform:translateY(100%); transition:transform .35s var(--ease);
}
.cookie-banner.is-visible{ display:block; }
.cookie-banner.is-shown{ transform:translateY(0); }
.cookie-banner-inner{
  max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:28px; flex-wrap:wrap;
}
.cookie-banner p{ font-size:13px; color:var(--gray-1); max-width:640px; margin:0; }
.cookie-banner a{ color:var(--white); text-decoration:underline; }
.cookie-banner-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.cookie-banner .btn{ padding:11px 22px; font-size:12px; }
@media (max-width:640px){
  .cookie-banner-inner{ flex-direction:column; align-items:flex-start; }
  .cookie-banner-actions{ width:100%; }
  .cookie-banner-actions .btn{ flex:1; }
}

/* Password field with show/hide toggle */
.pw-field{ position:relative; }
.pw-field input{ padding-right:44px; }
.pw-toggle{
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; cursor:pointer; opacity:.5; font-size:15px;
  transition:opacity .2s var(--ease);
}
.pw-toggle:hover, .pw-toggle.is-active{ opacity:1; }
html[dir="rtl"] .pw-field input{ padding-right:16px; padding-left:44px; }
html[dir="rtl"] .pw-toggle{ right:auto; left:4px; }

/* Password strength meter */
.pw-strength{ display:flex; gap:4px; margin-top:8px; }
.pw-strength span{ height:3px; flex:1; background:var(--line); transition:background .2s var(--ease); }
.pw-strength.s1 span:nth-child(1){ background:#7a3b3b; }
.pw-strength.s2 span:nth-child(-n+2){ background:#8a6a2e; }
.pw-strength.s3 span:nth-child(-n+3){ background:#6a7a3b; }
.pw-strength.s4 span{ background:#2e6b47; }
.pw-hint{ font-size:12px; color:var(--gray-2); margin-top:8px; }

/* Name / phone row layouts on register */
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.phone-row{ display:grid; grid-template-columns:110px 1fr; gap:10px; }
.field select{
  width:100%; padding:13px 12px; background:var(--near-black); border:1px solid var(--line);
  color:var(--white); font-family:var(--font-body); font-size:13px; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23808080'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}
.field select:focus{ outline:none; border-color:var(--white); }
.field .optional-tag{ color:var(--gray-3); text-transform:none; letter-spacing:0; font-size:11px; }
@media (max-width:480px){ .field-row{ grid-template-columns:1fr; } .phone-row{ grid-template-columns:100px 1fr; } }

/* Account pill in header/mobile-nav when logged in */
.account-pill{ display:inline-flex; align-items:center; gap:8px; }
.account-dot{ width:7px; height:7px; border-radius:50%; background:#4ea86f; display:inline-block; }

/* Chat widget locked state (not logged in) */
.chat-locked{ text-align:center; padding:40px 20px; }
.chat-locked p{ font-size:14px; color:var(--gray-1); }

/* The header is position:fixed at 80px tall and removed from normal
   document flow, so the first thing after it (breadcrumbs on some
   pages, #main-content directly on others) needs to clear that height
   itself. Handled once here on body rather than per page type, so no
   page can end up hidden behind the header regardless of which it opens with. */
body{ padding-top:80px; }

/* Inner-page hero (about, contact, pricing, login, dashboard, etc.)
   This class had no matching CSS rule at all before, so every page
   using it opened with zero breathing room under the header. */
.page-hero{ padding:56px 0 64px; border-bottom:1px solid var(--line); }
@media (max-width:640px){ .page-hero{ padding:36px 0 44px; } }

/* Terms agreement checkbox row on registration */
.agree-row{
  display:flex; align-items:flex-start; gap:10px; margin:4px 0 22px;
  font-size:13px; color:var(--gray-1); cursor:pointer; line-height:1.5;
}
.agree-row input{ margin-top:3px; flex-shrink:0; width:16px; height:16px; accent-color:var(--white); cursor:pointer; }
.agree-row a{ color:var(--white); text-decoration:underline; }

/* ============================================================
   Small button size variant (used on dashboard profile/balance cards)
   ============================================================ */
.btn-sm{ padding:9px 16px; font-size:11px; }

/* ============================================================
   Privacy / screen-sharing mode. The mask itself is decided
   server-side (see includes/privacy.php), so there's no real
   sensitive text in the page to hide, this just styles the toggle
   button, which now renders its on/off icon from the server too.
   ============================================================ */
.privacy-toggle{ position:relative; display:inline-flex; align-items:center; justify-content:center; }
.privacy-toggle svg{ width:17px; height:17px; }

/* ============================================================
   Dashboard: profile-completion reminder banner
   ============================================================ */
.profile-reminder{
  position:relative; border:1px solid var(--line); background:var(--panel);
  padding:26px 30px; margin-bottom:32px;
}
.profile-reminder h3{ font-size:16px; margin:0 0 8px; padding-right:30px; }
.profile-reminder p{ font-size:13.5px; color:var(--gray-1); margin:0 0 18px; max-width:600px; }
.profile-reminder-close{
  position:absolute; top:18px; right:20px; background:transparent; border:none;
  color:var(--gray-2); font-size:22px; line-height:1; cursor:pointer; padding:4px;
}
.profile-reminder-close:hover{ color:var(--white); }
.profile-reminder-form{ display:flex; gap:16px; flex-wrap:wrap; align-items:flex-end; }
.profile-reminder-form .field{ margin-bottom:0; min-width:200px; }
@media (max-width:640px){ .profile-reminder-form{ flex-direction:column; align-items:stretch; } }

/* ============================================================
   Dashboard: balance card (PayPal top-up, coming soon)
   ============================================================ */
.balance-card{
  border:1px solid var(--line); background:var(--panel); padding:26px 30px;
  margin-bottom:32px; max-width:420px;
}
.balance-card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.badge-soon{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--gray-2);
  border:1px solid var(--line); padding:4px 9px;
}
.balance-amount{ font-family:var(--font-display); font-size:34px; font-weight:700; margin-bottom:16px; }
.balance-note{ font-size:12px; color:var(--gray-2); margin:10px 0 0; }

/* ============================================================
   Dashboard: linked accounts (Google / GitHub / Discord)
   ============================================================ */
.linked-accounts-list{ border:1px solid var(--line); background:var(--panel); }
.linked-account-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px; border-bottom:1px solid var(--line);
  gap:16px;
}
.linked-account-row:last-child{ border-bottom:none; }
.linked-account-info{ display:flex; flex-direction:column; gap:4px; }
.linked-account-info strong{ font-size:14px; }
.linked-account-status{ font-size:12px; color:var(--gray-3); }
.linked-account-status.is-linked{ color:#3fae6f; }
.linked-account-form{ margin:0; }

/* ============================================================
   Chat widget: "thinking" indicator shown while waiting on a reply
   ============================================================ */
.chat-msg-typing{ display:flex; align-items:center; gap:5px; padding:11px 14px; }
.chat-msg-typing .dot{
  width:6px; height:6px; border-radius:50%; background:var(--gray-2);
  animation:chatTypingBounce 1.1s infinite ease-in-out;
}
.chat-msg-typing .dot:nth-child(2){ animation-delay:.15s; }
.chat-msg-typing .dot:nth-child(3){ animation-delay:.3s; }
@keyframes chatTypingBounce{
  0%, 60%, 100%{ transform:translateY(0); opacity:.5; }
  30%{ transform:translateY(-4px); opacity:1; }
}

/* ============================================================
   Dashboard: Project Workspace card
   ============================================================ */
.project-card{
  background:var(--black); border:1px solid var(--line); padding:38px 36px;
  margin-bottom:8px; position:relative; overflow:hidden;
}
.project-card::before{
  content:''; position:absolute; top:0; left:0; width:3px; height:100%; background:var(--white);
  opacity:.08;
}
.project-card .num{ font-family:var(--font-display); font-size:12px; color:var(--gray-2); letter-spacing:.1em; }
.project-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin:16px 0 12px; }
.project-card-head strong{ font-family:var(--font-display); font-size:19px; font-weight:700; letter-spacing:-.01em; line-height:1.3; }
.project-card p{ font-size:14px; color:var(--gray-2); margin-bottom:22px; max-width:460px; line-height:1.6; }
.project-card .btn{ min-width:200px; justify-content:center; }

/* Status badges, shared between the dashboard card and the full status view */
.status-badge{
  font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:6px 13px; border-radius:20px; border:1px solid var(--line); color:var(--gray-1); white-space:nowrap;
  flex-shrink:0;
}
.status-draft{ color:var(--gray-2); }
.status-submitted{ color:var(--accent-blue); border-color:var(--accent-blue); }
.status-under-review{ color:var(--accent-amber); border-color:var(--accent-amber); }
.status-awaiting-client{ color:var(--accent-amber); border-color:var(--accent-amber); }
.status-in-progress{ color:#5bb5d5; border-color:#5bb5d5; }
.status-on-hold{ color:#c77b3f; border-color:#c77b3f; }
.status-completed{ color:var(--accent-green); border-color:var(--accent-green); }
.status-cancelled{ color:var(--accent-red); border-color:var(--accent-red); }

/* Simple industry-only settings panel */
.settings-panel{ background:var(--black); border:1px solid var(--line); padding:30px 32px; }

/* ============================================================
   Project request form
   ============================================================ */
.project-form-section{ background:var(--black); border:1px solid var(--line); padding:40px; margin-bottom:1px; }
.project-form-section .section-num{ display:block; margin-bottom:14px; }
.project-form-section h3{ font-family:var(--font-display); font-size:19px; font-weight:700; text-transform:uppercase; letter-spacing:-.01em; margin-bottom:8px; }
.project-form-section .section-intro{ font-size:13px; color:var(--gray-2); margin-bottom:26px; max-width:520px; }
.project-form-section h4{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--gray-3); margin:22px 0 12px; font-weight:600; }
.project-form-section h4:first-of-type{ margin-top:0; }
.field-hint{ font-size:12px; color:var(--gray-3); margin:-6px 0 16px; }

.project-form textarea{
  width:100%; padding:14px 16px; background:var(--near-black); border:1px solid var(--line);
  color:var(--white); font-family:var(--font-body); font-size:14px; resize:vertical; transition:border-color .2s var(--ease);
}
.project-form textarea:focus{ outline:none; border-color:var(--white); }
.project-form input[type="file"]{
  width:100%; padding:12px; background:var(--near-black); border:1px solid var(--line);
  color:var(--gray-1); font-size:13px;
}

.service-group{ margin-bottom:4px; }
.service-checklist{ display:grid; grid-template-columns:repeat(2, 1fr); gap:9px 20px; }
.service-check{ display:flex; align-items:flex-start; gap:9px; font-size:13px; color:var(--gray-1); cursor:pointer; line-height:1.4; padding:2px 0; transition:color .15s var(--ease); }
.service-check:hover{ color:var(--white); }
.service-check input{ margin-top:3px; flex-shrink:0; width:15px; height:15px; accent-color:var(--white); cursor:pointer; }
@media (max-width:560px){ .service-checklist{ grid-template-columns:1fr; } }

.style-checklist{ display:flex; flex-wrap:wrap; gap:10px; }
.style-check{ position:relative; }
.style-check input{ position:absolute; opacity:0; }
.style-check span{
  display:inline-block; padding:9px 16px; border:1px solid var(--line); border-radius:20px;
  font-size:12px; color:var(--gray-2); cursor:pointer; transition:all .15s var(--ease);
}
.style-check input:checked + span{ background:var(--white); color:var(--black); border-color:var(--white); font-weight:600; }
.style-check:hover span{ border-color:var(--gray-1); }

.project-form-submit{
  background:var(--black); border:1px solid var(--line); border-top:none; padding:32px 40px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.project-form-submit p{ font-size:12px; color:var(--gray-3); max-width:400px; margin:0; }
.project-form-submit .btn{ width:100%; justify-content:center; }
@media (min-width:480px){ .project-form-submit .btn{ width:auto; } }
@media (max-width:480px){ .project-form-submit{ padding:24px 22px; } }

/* ============================================================
   Locked project status view
   ============================================================ */
.project-status-card{ background:var(--black); border:1px solid var(--line); padding:44px; }
.project-status-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:6px; }
.project-status-head h2{ font-family:var(--font-display); font-size:24px; font-weight:700; margin-top:8px; letter-spacing:-.01em; }
.project-status-note{ font-size:13px; color:var(--gray-2); margin-bottom:8px; }

/* Status stepper: horizontal progression through the workflow */
.status-stepper{ display:flex; margin:34px 0 8px; border-top:1px solid var(--line); padding-top:24px; }
.status-step{ flex:1; position:relative; padding-right:14px; }
.status-step:last-child{ padding-right:0; }
.status-step-bar{ height:3px; background:var(--line); margin-bottom:10px; border-radius:2px; overflow:hidden; }
.status-step.is-done .status-step-bar{ background:var(--white); }
.status-step.is-current .status-step-bar{ background:var(--white); opacity:.55; }
.status-step-label{ font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--gray-3); line-height:1.3; }
.status-step.is-done .status-step-label, .status-step.is-current .status-step-label{ color:var(--gray-1); }
.status-step.is-cancelled .status-step-bar{ background:#c75f5f; }
@media (max-width:640px){
  .status-stepper{ flex-wrap:wrap; gap:12px 0; }
  .status-step{ flex:0 0 50%; padding-right:10px; }
}

.chat-gate{
  margin:26px 0; padding:18px 20px; border:1px dashed var(--line); font-size:13px; color:var(--gray-2);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}

.project-detail-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:20px 28px; margin:30px 0; padding-top:30px; border-top:1px solid var(--line-soft); }
.project-detail{ display:flex; flex-direction:column; gap:5px; }
.project-detail span{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--gray-3); }
.project-detail strong{ font-size:14px; font-weight:600; }
.project-detail-block{ margin-top:26px; padding-top:26px; border-top:1px solid var(--line-soft); }
.project-detail-block > span{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--gray-3); display:block; margin-bottom:12px; }
.project-detail-block p{ font-size:14px; color:var(--gray-1); line-height:1.7; }
.service-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.service-tag{ font-size:12px; padding:6px 13px; border:1px solid var(--line); border-radius:20px; color:var(--gray-1); }
.attachment-list{ list-style:none; padding:0; margin:0; }
.attachment-list li{ margin-bottom:8px; }
.attachment-list a{ font-size:13px; color:var(--white); text-decoration:underline; }
@media (max-width:640px){
  .project-detail-grid{ grid-template-columns:1fr; }
  .project-status-head{ flex-direction:column; }
  .project-form-section{ padding:28px 22px; }
  .project-status-card{ padding:28px 22px; }
}

/* ============================================================
   Project chat
   ============================================================ */
.project-chat-thread{
  border:1px solid var(--line); background:var(--panel); padding:24px;
  max-height:520px; overflow-y:auto; margin-bottom:20px;
  display:flex; flex-direction:column; gap:16px;
}
.project-chat-empty{ font-size:13px; color:var(--gray-3); text-align:center; padding:20px 0; }
.project-chat-msg{ max-width:80%; }
.project-chat-msg.is-mine{ align-self:flex-end; text-align:right; }
.project-chat-msg-head{ display:flex; align-items:baseline; gap:8px; margin-bottom:4px; flex-wrap:wrap; }
.project-chat-msg.is-mine .project-chat-msg-head{ justify-content:flex-end; }
.project-chat-msg-head strong{ font-size:13px; }
.project-chat-msg-role{ font-size:11px; color:var(--gray-3); text-transform:uppercase; letter-spacing:.04em; }
.project-chat-msg-head time{ font-size:11px; color:var(--gray-3); }
.project-chat-msg p{
  font-size:14px; color:var(--gray-1); line-height:1.5; background:var(--near-black);
  border:1px solid var(--line); padding:10px 14px; border-radius:var(--radius); display:inline-block; text-align:left;
}
.project-chat-msg.is-mine p{ background:var(--white); color:var(--black); border-color:var(--white); }
.project-chat-attachments{ list-style:none; padding:0; margin:6px 0 0; }
.project-chat-attachments a{ font-size:12px; color:var(--white); text-decoration:underline; }

.project-chat-composer{ border:1px solid var(--line); background:var(--panel); padding:18px; }
.project-chat-composer textarea{
  width:100%; padding:12px 14px; background:var(--near-black); border:1px solid var(--line);
  color:var(--white); font-family:var(--font-body); font-size:14px; resize:vertical; margin-bottom:12px;
}
.project-chat-composer textarea:focus{ outline:none; border-color:var(--white); }
.project-chat-composer-actions{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.project-chat-composer-actions input[type="file"]{ font-size:12px; color:var(--gray-2); max-width:60%; }
@media (max-width:560px){
  .project-chat-msg{ max-width:100%; }
  .project-chat-composer-actions{ flex-direction:column; align-items:stretch; }
  .project-chat-composer-actions input[type="file"]{ max-width:100%; }
}

/* ============================================================
   Staff "Access Chats" listing
   ============================================================ */
.chat-list{ display:flex; flex-direction:column; border:1px solid var(--line); }
.chat-list-item{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:20px 26px; border-bottom:1px solid var(--line); background:var(--black);
  transition:background .15s var(--ease);
}
.chat-list-item:last-child{ border-bottom:none; }
.chat-list-item:hover{ background:var(--near-black); }
.chat-list-item.is-locked{ opacity:.55; }
.chat-list-item-main{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.chat-list-item-main strong{ font-size:14px; }
.chat-list-item-meta{ font-size:12px; color:var(--gray-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-list-item-side{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.chat-list-item-count{ font-size:11px; color:var(--gray-2); white-space:nowrap; }
@media (max-width:560px){
  .chat-list-item{ flex-direction:column; align-items:flex-start; gap:10px; padding:18px 20px; }
  .chat-list-item-side{ width:100%; justify-content:space-between; }
}

/* Status history log on the client project status view */
.status-history{ margin:20px 0 8px; padding-top:18px; border-top:1px solid var(--line-soft); }
.status-history-row{ display:flex; align-items:center; gap:10px; padding:7px 0; font-size:12px; }
.status-history-dot{ width:6px; height:6px; border-radius:50%; background:var(--gray-2); flex-shrink:0; }
.status-history-label{ color:var(--gray-1); font-weight:600; min-width:120px; }
.status-history-time{ color:var(--gray-3); }
@media (max-width:480px){
  .status-history-row{ flex-wrap:wrap; }
  .status-history-label{ min-width:0; }
}

/* Chat image attachment previews */
.project-chat-images{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.project-chat-images img{
  width:110px; height:110px; object-fit:cover; border-radius:var(--radius);
  border:1px solid var(--line); cursor:pointer; transition:opacity .15s var(--ease);
}
.project-chat-images img:hover{ opacity:.85; }
@media (max-width:480px){ .project-chat-images img{ width:88px; height:88px; } }

/* ============================================================
   Language switcher (Google Translate under the hood)
   ============================================================ */
.lang-switch{ position:relative; }
.lang-switch-btn{ padding:0 16px; min-width:56px; justify-content:center; }
.lang-code{ font-size:12px; font-weight:700; letter-spacing:.06em; }
.lang-switch-menu{
  display:none; position:absolute; top:calc(100% + 8px); right:0; min-width:150px;
  background:var(--near-black); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 16px 36px -14px rgba(0,0,0,.5); padding:6px; z-index:1200;
}
.lang-switch.is-open .lang-switch-menu{ display:block; }
.lang-switch-menu a{
  display:block; padding:10px 12px; font-size:13px; color:var(--gray-1);
  border-radius:var(--radius); transition:background .15s var(--ease), color .15s var(--ease);
}
.lang-switch-menu a:hover{ background:var(--line-soft); color:var(--white); }
.lang-switch-menu a.active{ color:var(--white); font-weight:600; }

.mobile-lang-switch{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px; }
.mobile-lang-switch a{
  padding:9px 16px; border:1px solid var(--line); border-radius:var(--radius);
  font-family:var(--font-body); font-size:13px; text-transform:none; color:var(--gray-1);
}
.mobile-lang-switch a.active{ color:var(--white); border-color:var(--white); font-weight:600; }

/* ============================================================
   Project request form step wizard (QCM-style, one step at a time)
   ============================================================ */
.form-wizard-progress{ margin-bottom:24px; }
.form-wizard-bar{ height:3px; background:var(--line); border-radius:2px; overflow:hidden; margin-bottom:10px; }
.form-wizard-bar-fill{ height:100%; background:var(--white); transition:width .35s var(--ease); }
.form-wizard-step-label{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--gray-3); }
.form-wizard-nav{ display:flex; justify-content:space-between; align-items:center; margin-top:28px; padding-top:24px; border-top:1px solid var(--line-soft); }

/* ============================================================
   Design system v2 — full visual overhaul layer.
   Same markup, same class names, elevated aesthetic:
   atmospheric depth, glass surfaces, glow interactions.
   ============================================================ */

/* --- Buttons: pill geometry, gradient primary, glow on hover --- */
.btn{ border-radius:999px; padding:15px 30px; }
.btn-primary{
  background:linear-gradient(180deg, var(--white), var(--gray-1));
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 8px 24px -12px rgba(0,0,0,.8);
}
.btn-primary:hover{
  background:linear-gradient(180deg, var(--white), var(--white));
  transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 14px 32px -12px rgba(var(--glow), .45);
}
.btn-ghost{ backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.btn-ghost:hover{ border-color:rgba(var(--glow), .6); background:rgba(var(--glow), .07); }
.header-actions .btn-ghost, .theme-toggle, .lang-switch-btn{ border-radius:999px; }

/* --- Header: floating glass with gradient hairline --- */
.site-header{
  background:rgba(7,9,11,.6);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  border-bottom:1px solid transparent;
  border-image:linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent) 1;
}
html[data-theme="light"] .site-header{ background:rgba(250,250,248,.65); }
.main-nav a.active::after{
  height:2px; border-radius:2px;
  background:linear-gradient(90deg, rgb(var(--glow)), transparent);
}

/* --- Forms: soft radius, green focus ring --- */
.field input, .field select, .project-form textarea, .project-chat-composer textarea{
  border-radius:var(--radius);
}
.field input:focus, .field select:focus, .project-form textarea:focus, .project-chat-composer textarea:focus{
  border-color:rgba(var(--glow), .65);
  box-shadow:0 0 0 3px rgba(var(--glow), .14);
}
.auth-card{
  border-radius:var(--radius-lg);
  background:linear-gradient(170deg, var(--panel), var(--black) 80%);
  border-color:var(--line);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.02) inset;
}
.auth-alert, .profile-reminder, .balance-card, .linked-accounts-list,
.project-card, .project-status-card, .project-form-section, .settings-panel,
.project-chat-thread, .project-chat-composer, .chat-list, .testimonial,
.leadership, .pricing-teaser, .cta-banner, .price-range-strip{
  border-radius:var(--radius-lg);
}
.project-form-submit{ border-top:1px solid var(--line); margin-top:16px; border-radius:var(--radius-lg); }
.project-card::before{ border-radius:3px 0 0 3px; background:rgb(var(--glow)); opacity:.55; }

/* --- FAQ, trust strip, breadcrumbs polish --- */
.faq-item summary:hover .faq-icon{ color:rgb(var(--glow)); }
.breadcrumbs{ background:transparent; }

/* --- Chat widget: pill launcher with live pulse, rounded panel --- */
.chat-launcher{ border-radius:999px; box-shadow:0 16px 40px -14px rgba(0,0,0,.7), 0 0 0 1px var(--line); }
.chat-launcher .ico{ background:rgb(var(--glow)); }
@keyframes chatPulse{
  0%, 100%{ box-shadow:0 0 0 0 rgba(var(--glow), .5); }
  55%{ box-shadow:0 0 0 7px rgba(var(--glow), 0); }
}
.chat-panel{ border-radius:var(--radius-lg); overflow:hidden; }
.chat-panel-header .title .dot{ background:rgb(var(--glow)); }
.chat-msg{ border-radius:14px; }
.chat-msg-user{ border-bottom-right-radius:4px; }
.chat-msg-agent{ border-bottom-left-radius:4px; }

/* --- Language switcher menu: glass dropdown --- */
.lang-switch-menu{
  border-radius:14px; padding:8px;
  background:rgba(12,15,18,.9);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
html[data-theme="light"] .lang-switch-menu{ background:rgba(250,250,248,.92); }
.lang-switch-menu a{ border-radius:9px; }
.lang-switch-menu a.active{ background:rgba(var(--glow), .1); color:rgb(var(--glow)); }
.mobile-lang-switch a{ border-radius:999px; }
.mobile-nav{ background:rgba(7,9,11,.97); }

/* --- Translating state: spinner inside the language button, page untouched --- */
.lang-switch-btn{ position:relative; }
.lang-switch-btn.is-loading .lang-code{ opacity:0; }
.lang-switch-btn.is-loading::after{
  content:''; position:absolute; top:50%; left:50%; width:14px; height:14px;
  margin:-8px 0 0 -8px; border-radius:50%;
  border:2px solid var(--line); border-top-color:rgb(var(--glow));
  animation:langSpin .7s linear infinite;
}
@keyframes langSpin{ to{ transform:rotate(360deg); } }

/* --- Selection + status stepper accent --- */
::selection{ background:rgb(var(--glow)); color:#06130C; }
.status-step.is-done .status-step-bar{ background:rgb(var(--glow)); }
.status-step.is-current .status-step-bar{ background:rgb(var(--glow)); opacity:.5; }
.form-wizard-bar-fill{ background:linear-gradient(90deg, rgb(var(--glow)), var(--white)); }

/* --- Reveal animation: slightly springier --- */
.reveal{ transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s cubic-bezier(.16,1,.3,1); }

@media (prefers-reduced-motion: reduce){
  .chat-launcher .ico{ animation:none; }
  body{ background-attachment:scroll; }
}


/* ============================================================
   REDESIGN 2026 — "Blueprint to Build"
   Overrides layered on top of the original component styles.
   Idea → engineered reality: drafting-grid texture, blueprint
   cyan accent, sentence-case Space Grotesk headings.
   ============================================================ */

/* Breathing room between headings and the text under them */
.page-hero h1{ margin:14px 0 0; }
.page-hero p.lead{ font-size:18px; max-width:720px; margin:24px 0 0; }
.section-head h2{ margin-bottom:16px; }

/* Cookie banner must not sit under the chat launcher */
.cookie-banner-inner{ padding-right:230px !important; }
@media (max-width:720px){ .cookie-banner-inner{ padding-right:var(--pad) !important; padding-bottom:84px !important; } }
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth; }
}

/* Buttons: sentence case, tighter, cyan hover edge */
.btn{ text-transform:none; letter-spacing:0; font-size:14.5px; font-weight:600; padding:14px 24px; }
.btn-primary{ background:var(--accent-green); color:#08131F; }
.btn-primary:hover{ background:var(--white); color:var(--black); transform:translateY(-1px); }
.btn-ghost:hover{ border-color:var(--accent-green); background:transparent; color:var(--white); }

/* Eyebrows: quiet mono label with cyan tick */
.eyebrow{ letter-spacing:.1em; color:var(--gray-2); }
.eyebrow::before{ width:8px; height:8px; background:transparent; border:1.5px solid var(--accent-green); border-radius:2px; }

/* Process steps: connected build pipeline */
.process-step{ border-radius:var(--radius); border:1px solid var(--line-soft); background:var(--near-black); }
.process-step .code{ color:var(--accent-amber); }

/* Header polish on the new palette */
.site-header{ background:rgba(10,18,32,.72); }
html[data-theme="light"] .site-header{ background:rgba(245,248,251,.8); }

/* Focus ring in accent for keyboard users */
:focus-visible{ outline:2px solid var(--accent-green); outline-offset:3px; }

@media (prefers-reduced-motion: reduce){
  .service-card::after{ transition:none; }
  html, body{ transition:none; }
}

/* ============================================================
   Auth UX — live validation, password strength, match check
   ============================================================ */
.field input.is-invalid{ border-color:var(--accent-red) !important; }
.field input.is-valid{ border-color:rgba(95,212,230,.7) !important; }
.field-msg{ margin:8px 0 0; font-size:13px; line-height:1.4; }
.field-msg.is-error{ color:var(--accent-red); }
.field-msg.is-ok{ color:var(--accent-green); }
.field-msg.is-ok::before{ content:'✓ '; }
.caps-warn{ margin:8px 0 0; font-size:12.5px; color:var(--accent-amber); }

.pw-strength{ margin-top:10px; display:flex; align-items:center; gap:12px; }
.pw-bars{ display:flex; gap:5px; flex:1; }
.pw-bars span{ height:5px; flex:1; border-radius:3px; background:var(--line); transition:background .3s var(--ease); }
.pw-strength-label{ font-size:12.5px; min-width:110px; text-align:right; color:var(--gray-2); }
.pw-strength.level-1 .pw-bars span:nth-child(-n+1){ background:var(--accent-red); }
.pw-strength.level-2 .pw-bars span:nth-child(-n+2){ background:var(--accent-amber); }
.pw-strength.level-3 .pw-bars span:nth-child(-n+3){ background:#8BD17C; }
.pw-strength.level-4 .pw-bars span{ background:var(--accent-green); }
.pw-strength.level-1 .pw-strength-label{ color:var(--accent-red); }
.pw-strength.level-2 .pw-strength-label{ color:var(--accent-amber); }
.pw-strength.level-3 .pw-strength-label{ color:#8BD17C; }
.pw-strength.level-4 .pw-strength-label{ color:var(--accent-green); }

.pw-reqs{ margin:10px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:5px 14px; font-size:12.5px; color:var(--gray-2); }
.pw-reqs li{ display:flex; align-items:center; gap:7px; transition:color .2s var(--ease); }
.pw-reqs li::before{ content:''; width:12px; height:12px; border-radius:50%; border:1.5px solid var(--gray-3); flex-shrink:0; transition:all .2s var(--ease); }
.pw-reqs li.is-met{ color:var(--gray-1); }
.pw-reqs li.is-met::before{ background:var(--accent-green); border-color:var(--accent-green);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.2 4.8-4.8' fill='none' stroke='%2308131F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size:10px; background-position:center; }
@media (max-width:480px){ .pw-reqs{ grid-template-columns:1fr; } }

.agree-row.is-invalid{ color:var(--accent-red); }
.agree-row.is-invalid input{ outline:2px solid var(--accent-red); outline-offset:2px; border-radius:3px; }

.btn.is-busy{ opacity:.7; cursor:progress; }
@keyframes korestack-shake{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-5px); } 75%{ transform:translateX(5px); } }
form.shake{ animation:korestack-shake .28s var(--ease); }
@media (prefers-reduced-motion: reduce){ form.shake{ animation:none; } }

/* ============================================================
   Marketing pages, October 2026
   One accent (cyan) reserved for actions and prices. Hairline
   rules instead of floating cards. No decorative motion.
   ============================================================ */
:root{ --accent-ink:#5FD4E6; --accent-ink-soft:rgba(95,212,230,.12); }
html[data-theme="light"]{ --accent-ink:#0B7285; --accent-ink-soft:rgba(11,114,133,.08); }
html[data-theme="light"] .btn-primary{ background:#0B7285; color:#fff; }
html[data-theme="light"] .btn-primary:hover{ background:var(--white); color:var(--black); }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.section-head h2{ margin-top:0; }
.section-head p{ font-size:17px; line-height:1.6; }
.section{ padding:96px 0; }
@media (max-width:720px){ .section{ padding:64px 0; } }

.btn-icon svg{ width:18px; height:18px; flex-shrink:0; }

/* ---- Home hero: headline + price board ---- */
.hero-home{ padding:72px 0 96px; }
.hero-layout{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:72px; align-items:center; }
.hero-home h1{ font-size:clamp(44px,6.4vw,84px); line-height:1; letter-spacing:-.035em; max-width:11ch; }
.hero-home p.lead{ font-size:18px; line-height:1.65; max-width:34em; margin:28px 0 36px; }
.hero-chat{ display:inline-flex; align-items:center; gap:10px; margin-top:28px; font-size:14.5px; color:var(--gray-1);
  border-bottom:1px solid transparent; transition:color .2s var(--ease), border-color .2s var(--ease); }
.hero-chat svg{ width:18px; height:18px; color:var(--accent-ink); }
.hero-chat:hover{ color:var(--white); border-color:var(--line); }
@media (max-width:980px){
  .hero-layout{ grid-template-columns:1fr; gap:56px; }
  .hero-home{ padding:48px 0 72px; }
}

.price-board{ border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--near-black); overflow:hidden; }
.price-board-head{ padding:26px 28px 20px; border-bottom:1px solid var(--line); }
.price-board-head h2{ font-size:22px; line-height:1.25; letter-spacing:-.01em; }
.price-board-head p{ font-size:14px; margin-top:6px; color:var(--gray-2); }
.price-board-list li + li{ border-top:1px solid var(--line-soft); }
.price-board-list a{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:15px 28px;
  transition:background .2s var(--ease); }
.price-board-list a:hover{ background:var(--accent-ink-soft); }
.price-board-name{ font-weight:500; color:var(--white); font-size:15.5px; }
.price-board-foot{ display:block; padding:16px 28px; border-top:1px solid var(--line); font-size:14px; font-weight:600;
  color:var(--accent-ink); transition:background .2s var(--ease); }
.price-board-foot:hover{ background:var(--accent-ink-soft); }
@media (max-width:480px){
  .price-board-head, .price-board-list a, .price-board-foot{ padding-left:20px; padding-right:20px; }
  .price-board-list a{ flex-direction:column; gap:2px; }
}

/* Price label: "From $600 / year" */
.price{ white-space:nowrap; font-size:14px; color:var(--gray-2); }
.price-amount{ font-family:var(--font-display); font-weight:600; font-size:17px; color:var(--accent-ink); font-variant-numeric:tabular-nums; }
.price.is-custom{ color:var(--gray-1); font-size:14px; }

/* ---- Service tiles (home, services) ---- */
.service-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.service-tile{ display:flex; flex-direction:column; gap:12px; padding:32px 30px 28px; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  transition:background .2s var(--ease); }
.service-tile:hover{ background:var(--near-black); }
.service-tile h3{ font-size:20px; font-weight:600; }
.service-tile p{ font-size:15px; line-height:1.6; flex:1; }
.service-tile-link{ font-size:14px; font-weight:600; color:var(--accent-ink); }
.service-tile:hover .service-tile-link{ text-decoration:underline; text-underline-offset:4px; }
@media (max-width:980px){ .service-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px){ .service-grid{ grid-template-columns:1fr; } }

/* ---- Numbered steps (real sequences only) ---- */
.steps{ display:grid; grid-template-columns:repeat(var(--steps,3),minmax(0,1fr)); gap:40px; list-style:none; counter-reset:none; }
.step{ border-top:1px solid var(--line); padding-top:24px; }
.step-num{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%;
  border:1px solid var(--line); font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--white); }
.step h3{ margin:18px 0 10px; font-size:20px; }
.step p{ font-size:15px; line-height:1.65; }
@media (max-width:900px){ .steps{ grid-template-columns:1fr; gap:32px; } }

/* ---- Heading on the left, content on the right ---- */
.split-intro{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:64px; align-items:start; }
.split-intro .section-head{ margin-bottom:0; }
@media (max-width:900px){ .split-intro{ grid-template-columns:1fr; gap:32px; } }

.tick-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 32px; }
.tick-list li{ position:relative; padding:16px 0 16px 30px; border-bottom:1px solid var(--line-soft); color:var(--white); font-size:15.5px; }
.tick-list li::before{ content:''; position:absolute; left:2px; top:22px; width:12px; height:7px;
  border-left:2px solid var(--accent-ink); border-bottom:2px solid var(--accent-ink); transform:rotate(-45deg); }
@media (max-width:620px){ .tick-list{ grid-template-columns:1fr; } }
html[dir="rtl"] .tick-list li{ padding:16px 30px 16px 0; }
html[dir="rtl"] .tick-list li::before{ left:auto; right:2px; }

/* ---- Founder note ---- */
.founder-note{ max-width:860px; }
.founder-note blockquote p{ font-family:var(--font-display); font-weight:500; color:var(--white);
  font-size:clamp(22px,2.6vw,32px); line-height:1.4; letter-spacing:-.01em; }
.founder-note figcaption{ margin-top:24px; font-size:15px; color:var(--gray-2); }

/* ---- Closing call to action ---- */
.cta-band{ padding:88px 0; }
.cta-band-inner{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; }
.cta-band-copy h2{ max-width:16ch; }
.cta-band-copy p{ margin-top:14px; font-size:17px; }
.cta-band-actions{ display:flex; gap:12px; flex-wrap:wrap; }
@media (max-width:620px){
  .cta-band{ padding:64px 0; }
  .cta-band-actions{ width:100%; }
  .cta-band-actions .btn{ flex:1 1 auto; }
}

/* ---- Inner page hero ---- */
.page-hero h1{ max-width:18ch; }
.page-hero p.lead{ max-width:36em; line-height:1.65; }
.page-hero .hero-ctas{ margin-top:32px; }
.page-hero .hero-price{ display:inline-flex; margin-top:22px; padding:8px 14px; border:1px solid var(--line); border-radius:999px; }

/* ---- Services page rows ---- */
.service-list{ border-top:1px solid var(--line); }
.service-list a{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto; gap:32px; align-items:baseline;
  padding:30px 8px; border-bottom:1px solid var(--line); transition:background .2s var(--ease); }
.service-list a:hover{ background:var(--near-black); }
.service-list h3{ font-size:21px; }
.service-list p{ font-size:15px; line-height:1.6; }
@media (max-width:900px){ .service-list a{ grid-template-columns:1fr; gap:8px; padding:24px 0; } }

/* ---- Pricing plans ---- */
.plans{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.plan{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px; background:var(--near-black); }
.plan h3{ font-size:20px; }
.plan-for{ margin-top:6px; font-size:14px; color:var(--gray-2); min-height:2.9em; }
.plan-price{ margin:22px 0 20px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.plan-price .price-amount{ font-size:36px; letter-spacing:-.02em; }
.plan-price .price{ font-size:15px; }
.plan-price .price.is-custom{ font-family:var(--font-display); font-size:28px; font-weight:600; color:var(--white); }
.plan .tick-list{ grid-template-columns:1fr; margin-bottom:28px; flex:1; }
.plan .tick-list li{ font-size:14.5px; padding:10px 0 10px 28px; border:none; }
.plan .tick-list li::before{ top:16px; }
.plan .btn{ align-self:flex-start; }
@media (max-width:1100px){ .plans{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:680px){ .plans{ grid-template-columns:1fr; } .plan-for{ min-height:0; } }

.facts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; }
.fact{ border-top:1px solid var(--line); padding-top:22px; }
.fact h3{ font-size:18px; margin-bottom:10px; }
.fact p{ font-size:15px; line-height:1.65; }
@media (max-width:900px){ .facts{ grid-template-columns:1fr; gap:28px; } }

.faq-list{ max-width:860px; }

/* ---- About ---- */
.prose p{ font-size:17px; line-height:1.75; max-width:38em; }
.prose p + p{ margin-top:18px; }

/* ---- Contact ---- */
.contact-layout{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:48px; align-items:start; }
.channel-list{ border-top:1px solid var(--line); }
.channel-list a{ display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:18px; align-items:center;
  padding:22px 8px; border-bottom:1px solid var(--line); transition:background .2s var(--ease); }
.channel-list a:hover{ background:var(--near-black); }
.channel-icon{ width:44px; height:44px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--white); }
.channel-name{ display:block; font-weight:600; color:var(--white); font-size:16px; }
.channel-hint{ display:block; font-size:14px; color:var(--gray-2); margin-top:2px; }
.channel-handle{ font-size:15px; color:var(--accent-ink); font-weight:500; text-align:right; }
.start-card{ border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px; background:var(--near-black); position:sticky; top:110px; }
.start-card h2{ font-size:26px; }
.start-card p{ margin:12px 0 24px; font-size:15px; line-height:1.65; }
.start-card .btn{ width:100%; }
.start-card-foot{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line); font-size:14px; color:var(--gray-2); }
.start-card-foot a{ color:var(--white); text-decoration:underline; text-underline-offset:3px; }
@media (max-width:900px){ .contact-layout{ grid-template-columns:1fr; } .start-card{ position:static; } }
@media (max-width:520px){
  .channel-list a{ grid-template-columns:40px minmax(0,1fr); }
  .channel-icon{ width:40px; height:40px; }
  .channel-handle{ grid-column:2; text-align:left; margin-top:-10px; }
}

/* ---- Footer social links ---- */
.social-links{ display:flex; gap:10px; margin-top:22px; }
.social-links a{ width:40px; height:40px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--gray-1); transition:color .2s var(--ease), border-color .2s var(--ease); }
.social-links a:hover{ color:var(--white); border-color:var(--gray-2); }
.social-links svg{ width:18px; height:18px; }

@media (prefers-reduced-motion: reduce){
  .price-board-list a, .service-tile, .service-list a, .channel-list a, .social-links a{ transition:none; }
}

/* ---- Chrome: sentence case labels, footer side padding ---- */
.main-nav a{ text-transform:none; letter-spacing:0; font-size:14.5px; font-weight:500; }
.main-nav a.active::after{ height:2px; bottom:-6px; background:var(--accent-ink); border-radius:2px; }
.footer-top{ padding:72px var(--pad) 48px; }
.footer-bottom{ padding:24px var(--pad); }
.footer-col h4{ font-size:14px; letter-spacing:0; text-transform:none; color:var(--white); font-weight:600; }
.chat-launcher{ text-transform:none; letter-spacing:0; font-size:14px; }
.hero-home h1{ max-width:14ch; }
.mobile-nav > a{ text-transform:none; letter-spacing:-.01em; }

/* ---- Review pass fixes ---- */
.breadcrumbs .container{ text-transform:none; letter-spacing:0; font-size:13px; }

/* Services list: fixed price column so rows line up */
.service-list a{ grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) 180px; }
.service-list .price{ text-align:right; }
@media (max-width:900px){ .service-list a{ grid-template-columns:1fr; } .service-list .price{ text-align:left; } }

/* Custom-quote plan spans the full row */
.plan-wide{ grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto; gap:20px 48px; align-items:center; }
.plan-wide .plan-for{ min-height:0; }
.plan-wide .plan-price{ margin:18px 0 0; padding:0; border:none; }
.plan-wide .tick-list{ grid-template-columns:repeat(2,minmax(0,1fr)); margin:0; gap:0 24px; }
@media (max-width:900px){
  .plan-wide{ grid-template-columns:1fr; align-items:start; }
  .plan-wide .plan-price{ margin:18px 0 0; padding-bottom:20px; border-bottom:1px solid var(--line); }
}
@media (max-width:560px){ .plan-wide .tick-list{ grid-template-columns:1fr; } }

/* Chat launcher: icon button on phones so it never covers content */
.chat-launcher-icon{ display:none; }
@media (max-width:620px){
  .chat-launcher{ width:52px; height:52px; padding:0; border-radius:50%; justify-content:center; bottom:18px; right:18px; }
  .chat-launcher .ico, .chat-launcher-label{ display:none; }
  .chat-launcher-icon{ display:block; }
}

/* Phones: tighter hero spacing, two-column footer links */
@media (max-width:620px){
  .hero-home{ padding:28px 0 56px; }
  .page-hero{ padding-top:40px; padding-bottom:48px; }
  .footer-top{ grid-template-columns:1fr 1fr; gap:36px 24px; }
  .footer-brand{ grid-column:1 / -1; }
}
.plan-wide .btn{ align-self:center; }