:root {
      --black:#050506;
      --black2:#090a0d;
      --black3:#0f1115;
      --panel:#121419;
      --panel2:#171a20;
      --white:#f7f7f8;
      --silver:#dadbe0;
      --muted:#9ea2aa;
      --red:#f20d18;
      --red2:#bc000b;
      --green:#39c86b;
      --amber:#f1b840;
      --line:rgba(255,255,255,.10);
      --soft:rgba(255,255,255,.055);
      --shadow:0 22px 80px rgba(0,0,0,.48);
      --radius:14px;
      --max:1240px;
    }

    * { box-sizing:border-box; }
    html { scroll-behavior:smooth; background:var(--black); }
    body {
      margin:0;
      color:var(--white);
      background:
        radial-gradient(circle at 75% -10%, rgba(242,13,24,.10), transparent 32rem),
        var(--black);
      font-family:Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
      line-height:1.5;
      overflow-x:hidden;
    }

    button,input,textarea,select { font:inherit; }
    button,a { -webkit-tap-highlight-color:transparent; }
    a { color:inherit; text-decoration:none; }
    img { display:block; max-width:100%; }
    .hidden { display:none !important; }
    .shell { width:min(var(--max), calc(100% - 42px)); margin-inline:auto; }

    /* ===== BRAND ===== */
    .brand {
      display:flex;
      align-items:center;
      gap:12px;
      min-width:255px;
    }
    .brand img {
      width:236px;
      height:64px;
      object-fit:contain;
      object-position:left center;
    }
    .brand.compact img { width:174px; height:48px; }
    .shield-img {
      width:112px;
      height:112px;
      border-radius:24px;
      object-fit:cover;
      box-shadow:0 14px 45px rgba(0,0,0,.45);
    }

    /* ===== GENERAL ===== */
    .eyebrow {
      display:flex;
      align-items:center;
      gap:11px;
      text-transform:uppercase;
      letter-spacing:.28em;
      font-size:11px;
      font-weight:800;
      color:#c8c9cd;
    }
    .eyebrow::before {
      content:"";
      width:32px;
      height:3px;
      border-radius:8px;
      background:var(--red);
      box-shadow:0 0 16px rgba(242,13,24,.5);
    }
    .red { color:var(--red); }
    .muted { color:var(--muted); }
    .money { font-variant-numeric:tabular-nums; }

    .btn {
      min-height:50px;
      padding:0 22px;
      border:0;
      border-radius:7px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:9px;
      cursor:pointer;
      text-transform:uppercase;
      letter-spacing:.075em;
      font-size:12px;
      font-weight:900;
      transition:transform .18s ease, filter .18s ease, border-color .18s ease;
    }
    .btn:hover { transform:translateY(-2px); filter:brightness(1.05); }
    .btn:active { transform:translateY(0); }
    .btn-red {
      color:#fff;
      background:linear-gradient(180deg,#ff1c26,#db000d);
      box-shadow:0 14px 34px rgba(242,13,24,.16);
    }
    .btn-ghost {
      color:#fff;
      background:rgba(5,5,6,.44);
      border:1px solid rgba(255,255,255,.36);
    }
    .btn-soft {
      color:#fff;
      background:rgba(255,255,255,.065);
      border:1px solid var(--line);
    }
    .btn.small { min-height:38px; padding:0 15px; font-size:10px; }

    /* ===== PUBLIC NAV ===== */
    .site-nav {
      height:78px;
      position:fixed;
      top:0;
      left:0;
      right:0;
      z-index:100;
      background:rgba(4,4,5,.84);
      border-bottom:1px solid var(--line);
      backdrop-filter:blur(18px);
    }
    .site-nav .inner {
      height:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:28px;
    }
    .nav-links {
      display:flex;
      align-items:center;
      gap:28px;
      margin-left:auto;
    }
    .nav-links a {
      font-size:12px;
      font-weight:800;
      color:#dedfe2;
      letter-spacing:.05em;
      position:relative;
    }
    .nav-links a::after {
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:-12px;
      height:2px;
      transform:scaleX(0);
      background:var(--red);
      transition:.2s ease;
    }
    .nav-links a:hover::after { transform:scaleX(1); }
    .nav-login {
      min-height:42px;
      border:1px solid var(--red);
      border-radius:7px;
      background:rgba(242,13,24,.04);
      padding:0 18px;
      color:#fff;
      font-weight:900;
      font-size:11px;
      cursor:pointer;
      text-transform:uppercase;
      letter-spacing:.06em;
    }
    .mobile-menu-btn {
      display:none;
      width:45px;
      height:45px;
      border:1px solid var(--line);
      border-radius:8px;
      background:#0e1014;
      color:white;
      font-size:20px;
    }

    /* ===== HERO ===== */
    .hero {
      min-height:790px;
      padding-top:78px;
      position:relative;
      display:flex;
      align-items:center;
      background:
        linear-gradient(90deg, rgba(2,2,3,.95) 0%, rgba(2,2,3,.76) 35%, rgba(2,2,3,.13) 72%, rgba(2,2,3,.56) 100%),
        url("https://images.unsplash.com/photo-1500375592092-40eb2168fd21?auto=format&fit=crop&w=2200&q=88") center/cover;
      overflow:hidden;
    }
    .hero::after {
      content:"";
      position:absolute;
      left:0; right:0; bottom:0;
      height:180px;
      background:linear-gradient(transparent,var(--black));
    }
    .hero-copy {
      width:min(790px,100%);
      padding:95px 0 195px;
      position:relative;
      z-index:2;
    }
    .hero-kicker {
      margin-bottom:18px;
      text-transform:uppercase;
      letter-spacing:.24em;
      font-size:12px;
      font-weight:800;
      color:#efeff2;
    }
    .hero h1 {
      margin:0 0 18px;
      font-size:clamp(58px,7.4vw,108px);
      line-height:.88;
      letter-spacing:-.055em;
      text-transform:uppercase;
      font-style:italic;
      font-weight:950;
      text-shadow:0 12px 42px rgba(0,0,0,.38);
    }
    .hero h1 .red {
      display:inline-block;
      text-shadow:0 10px 30px rgba(242,13,24,.20);
    }
    .tagline {
      margin:0 0 30px;
      font-size:clamp(15px,1.5vw,22px);
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.11em;
      color:#f1f1f2;
    }
    .hero-actions { display:flex; flex-wrap:wrap; gap:13px; }
    .hero-services {
      position:absolute;
      left:0; right:0; bottom:38px;
      z-index:3;
    }
    .hero-service-grid {
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:1px;
      border:1px solid var(--line);
      background:var(--line);
      box-shadow:var(--shadow);
    }
    .hero-service {
      min-height:91px;
      background:rgba(7,8,10,.85);
      backdrop-filter:blur(13px);
      padding:17px 18px;
      text-align:center;
    }
    .hero-service .ico { font-size:24px; color:white; margin-bottom:5px; }
    .hero-service b {
      display:block;
      text-transform:uppercase;
      font-size:12px;
      letter-spacing:.05em;
    }
    .hero-service span {
      color:var(--muted);
      font-size:10px;
      text-transform:uppercase;
      letter-spacing:.08em;
    }

    /* ===== PUBLIC SECTIONS ===== */
    .section { padding:94px 0; }
    .section.alt {
      background:#090a0d;
      border-top:1px solid var(--line);
      border-bottom:1px solid var(--line);
    }
    .section-head {
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:40px;
      margin-bottom:38px;
    }
    .section-head h2 {
      margin:10px 0 0;
      font-size:clamp(39px,5.6vw,72px);
      line-height:.93;
      letter-spacing:-.04em;
      text-transform:uppercase;
      font-style:italic;
    }
    .section-head p { margin:0; width:min(470px,100%); color:var(--muted); }

    .services {
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:15px;
    }
    .service-card {
      border:1px solid var(--line);
      border-radius:var(--radius);
      overflow:hidden;
      background:linear-gradient(180deg,#13151a,#0e1014);
      box-shadow:var(--shadow);
    }
    .service-card img { height:205px; width:100%; object-fit:cover; }
    .service-card .body { padding:22px; }
    .service-card h3 {
      margin:0 0 10px;
      text-transform:uppercase;
      letter-spacing:.04em;
      font-size:17px;
    }
    .service-card p { margin:0 0 18px; color:var(--muted); font-size:14px; }
    .text-link {
      color:var(--red);
      font-size:11px;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.08em;
    }

    .portfolio-grid {
      display:grid;
      grid-template-columns:repeat(12,1fr);
      grid-auto-rows:235px;
      gap:14px;
    }
    .portfolio-card {
      position:relative;
      overflow:hidden;
      border-radius:12px;
      border:1px solid var(--line);
      background:#101216;
    }
    .portfolio-card:nth-child(1),
    .portfolio-card:nth-child(4) { grid-column:span 7; }
    .portfolio-card:nth-child(2),
    .portfolio-card:nth-child(3) { grid-column:span 5; }
    .portfolio-card img {
      width:100%;
      height:100%;
      object-fit:cover;
      transition:transform .35s ease;
    }
    .portfolio-card:hover img { transform:scale(1.035); }
    .portfolio-card::after {
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(transparent 42%,rgba(0,0,0,.86));
    }
    .portfolio-label {
      position:absolute;
      z-index:2;
      left:20px;
      bottom:17px;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.05em;
    }
    .portfolio-label small {
      display:block;
      color:var(--red);
      font-size:10px;
      margin-bottom:3px;
    }

    .social-grid {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:18px;
    }
    .social-card {
      min-height:170px;
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:
        radial-gradient(circle at 90% 20%,rgba(242,13,24,.12),transparent 12rem),
        #101216;
      padding:26px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      box-shadow:var(--shadow);
    }
    .social-card h3 {
      margin:0 0 6px;
      font-size:28px;
      text-transform:uppercase;
      font-style:italic;
    }
    .social-card p { margin:0; color:var(--muted); }
    .social-circle {
      width:68px;
      height:68px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:#090a0c;
      border:1px solid var(--line);
      font-size:29px;
      color:white;
    }

    .contact-grid {
      display:grid;
      grid-template-columns:.83fr 1.17fr;
      gap:50px;
      align-items:start;
    }
    .contact-grid h2 {
      margin:10px 0 18px;
      font-size:clamp(42px,5.8vw,74px);
      line-height:.92;
      letter-spacing:-.045em;
      text-transform:uppercase;
      font-style:italic;
    }
    .contact-grid p { color:var(--muted); }
    .contact-form {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:15px;
      padding:25px;
      background:var(--panel);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
    }
    .field { display:grid; gap:7px; }
    .field.full { grid-column:1/-1; }
    label {
      font-size:10px;
      text-transform:uppercase;
      font-weight:900;
      letter-spacing:.12em;
      color:#d4d5d9;
    }
    input,select,textarea {
      width:100%;
      border:1px solid var(--line);
      border-radius:8px;
      background:#090a0d;
      color:white;
      padding:14px;
      outline:none;
    }
    input:focus,select:focus,textarea:focus { border-color:rgba(242,13,24,.75); }
    textarea { min-height:125px; resize:vertical; }
    .form-status { min-height:22px; grid-column:1/-1; color:var(--muted); font-size:13px; }

    footer {
      border-top:1px solid var(--line);
      padding:28px 0 42px;
      color:var(--muted);
      font-size:12px;
    }
    .footer-inner {
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:18px;
    }

    /* ===== LOGIN ===== */
    .login-view {
      min-height:100svh;
      display:grid;
      grid-template-columns:1fr 1fr;
      background:#07080a;
    }
    .login-art {
      min-height:100svh;
      background:
        linear-gradient(90deg,rgba(0,0,0,.18),rgba(0,0,0,.72)),
        url("https://images.unsplash.com/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=1800&q=88") center/cover;
      border-right:1px solid var(--line);
      position:relative;
    }
    .login-art::after {
      content:"";
      position:absolute;
      inset:0;
      background:radial-gradient(circle at 35% 50%,rgba(242,13,24,.17),transparent 20rem);
    }
    .login-back {
      position:absolute;
      top:28px;
      left:28px;
      z-index:3;
    }
    .login-panel {
      display:grid;
      place-items:center;
      padding:42px;
      background:
        radial-gradient(circle at 50% 10%,rgba(242,13,24,.08),transparent 24rem),
        #08090b;
    }
    .login-box {
      width:min(470px,100%);
      text-align:center;
    }
    .login-brand {
      display:grid;
      justify-items:center;
      gap:14px;
      margin-bottom:25px;
    }
    .login-box h1 {
      margin:0;
      text-transform:uppercase;
      font-size:35px;
      letter-spacing:-.02em;
    }
    .login-box > p {
      margin:0 0 26px;
      color:var(--muted);
      font-size:14px;
    }
    .login-form {
      display:grid;
      gap:14px;
      text-align:left;
    }
    .login-form .btn { width:100%; }
    .login-row {
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:18px;
      font-size:12px;
      color:var(--muted);
    }
    .login-row button {
      border:0;
      background:none;
      color:var(--red);
      cursor:pointer;
      padding:0;
    }
    .login-status {
      min-height:22px;
      color:var(--muted);
      text-align:center;
      font-size:13px;
    }
    .demo-note {
      margin-top:18px;
      padding:13px;
      border:1px dashed rgba(242,13,24,.35);
      background:rgba(242,13,24,.045);
      border-radius:9px;
      color:#b8bbc2;
      font-size:11px;
      line-height:1.7;
    }

    /* ===== PORTAL ===== */
    .portal {
      min-height:100svh;
      background:#08090b;
    }
    .portal-layout {
      min-height:100svh;
      display:grid;
      grid-template-columns:238px 1fr;
    }
    .portal-side {
      position:sticky;
      top:0;
      height:100svh;
      border-right:1px solid var(--line);
      background:#0a0b0e;
      padding:19px 14px;
      display:flex;
      flex-direction:column;
      z-index:20;
    }
    .side-brand {
      padding:2px 6px 18px;
      border-bottom:1px solid var(--line);
      margin-bottom:15px;
    }
    .side-nav {
      display:grid;
      gap:6px;
    }
    .side-nav button {
      width:100%;
      min-height:46px;
      border:0;
      border-radius:8px;
      background:transparent;
      color:#c6c9cf;
      text-align:left;
      padding:0 13px;
      cursor:pointer;
      display:flex;
      align-items:center;
      gap:11px;
      font-weight:800;
      font-size:12px;
    }
    .side-nav button.active {
      background:linear-gradient(90deg,rgba(242,13,24,.90),rgba(116,0,7,.22));
      color:white;
    }
    .side-bottom {
      margin-top:auto;
      display:grid;
      gap:8px;
    }
    .portal-main {
      min-width:0;
      padding-bottom:80px;
    }
    .portal-top {
      min-height:72px;
      border-bottom:1px solid var(--line);
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:15px;
      padding:0 28px;
      position:sticky;
      top:0;
      z-index:15;
      background:rgba(8,9,11,.90);
      backdrop-filter:blur(18px);
    }
    .avatar {
      width:38px;
      height:38px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:#35383f;
      color:white;
      font-weight:900;
    }
    .portal-content {
      width:min(1120px,calc(100% - 56px));
      margin:0 auto;
      padding:38px 0;
    }
    .portal-hero {
      display:grid;
      grid-template-columns:1fr 360px;
      gap:20px;
      align-items:stretch;
      margin-bottom:22px;
    }
    .welcome-card {
      min-height:190px;
      border:1px solid var(--line);
      border-radius:var(--radius);
      padding:28px;
      background:
        linear-gradient(90deg,rgba(0,0,0,.89),rgba(0,0,0,.28)),
        url("https://images.unsplash.com/photo-1494548162494-384bba4ab999?auto=format&fit=crop&w=1200&q=88") center/cover;
      box-shadow:var(--shadow);
    }
    .welcome-card h1 {
      margin:0;
      font-size:42px;
      letter-spacing:-.035em;
    }
    .welcome-card p { margin:7px 0 0; color:#dddfe3; }

    .summary-card {
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:#111318;
      padding:20px;
      box-shadow:var(--shadow);
    }
    .summary-card small {
      display:block;
      color:var(--muted);
      text-transform:uppercase;
      font-weight:900;
      letter-spacing:.1em;
      margin-bottom:6px;
    }
    .summary-card strong {
      display:block;
      font-size:31px;
      margin-bottom:13px;
    }

    .project-card {
      display:grid;
      grid-template-columns:160px 1.1fr .9fr 180px;
      gap:18px;
      align-items:center;
      border:1px solid var(--line);
      background:#f4f4f5;
      color:#111318;
      border-radius:var(--radius);
      padding:16px;
      box-shadow:var(--shadow);
    }
    .project-card img,
    .project-card canvas {
      height:110px;
      width:160px;
      object-fit:cover;
      border-radius:9px;
    }
    .project-card h3 { margin:0 0 8px; font-size:19px; }
    .project-meta {
      display:grid;
      gap:5px;
      color:#50545c;
      font-size:12px;
    }
    .status-list { display:grid; gap:6px; font-size:12px; }
    .status-item { display:flex; gap:8px; align-items:center; }
    .dot {
      width:17px;
      height:17px;
      border-radius:50%;
      display:grid;
      place-items:center;
      color:#fff;
      font-size:10px;
      flex:0 0 auto;
    }
    .dot.ok { background:#167f35; }
    .dot.due { background:var(--red); }
    .dot.lock { background:#8a8d94; }
    .balance {
      text-align:right;
      min-width:0;
    }
    .balance small { display:block; color:#656870; font-weight:800; }
    .balance strong { display:block; font-size:28px; margin:1px 0 9px; }

    .quick-actions {
      margin-top:16px;
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:1px;
      border:1px solid var(--line);
      background:var(--line);
      border-radius:12px;
      overflow:hidden;
    }
    .quick-actions button {
      min-height:85px;
      border:0;
      background:#f4f4f5;
      color:#101216;
      font-weight:850;
      cursor:pointer;
      display:grid;
      place-items:center;
      align-content:center;
      gap:5px;
    }
    .quick-actions .qico { font-size:23px; }

    .portal-section-title {
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:20px;
      margin:32px 0 14px;
    }
    .portal-section-title h2 { margin:0; font-size:23px; }
    .portal-section-title button {
      border:0;
      background:none;
      color:var(--red);
      font-weight:850;
      cursor:pointer;
    }
    .recent-grid {
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:13px;
    }
    .recent-card {
      border:1px solid var(--line);
      border-radius:11px;
      overflow:hidden;
      background:#111318;
    }
    .recent-card img,
    .recent-card canvas { height:150px; width:100%; object-fit:cover; }
    .recent-card .body { padding:13px; }
    .recent-card b { display:block; font-size:13px; }
    .recent-card span { color:var(--muted); font-size:11px; }

    /* ===== GALLERY ===== */
    .gallery-top {
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:20px;
      margin-bottom:20px;
    }
    .gallery-top h1 { margin:0 0 5px; font-size:32px; }
    .gallery-top p { margin:0; color:var(--muted); }
    .gallery-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
    .gallery-actions .favorites-active {
      color:white;
      border-color:rgba(242,13,24,.55);
      background:rgba(242,13,24,.13);
      box-shadow:inset 0 0 0 1px rgba(242,13,24,.10);
    }
    .gallery-tabs {
      display:flex;
      gap:6px;
      overflow:auto;
      border-bottom:1px solid var(--line);
      margin-bottom:18px;
      padding-bottom:7px;
      scrollbar-width:none;
    }
    .gallery-tabs::-webkit-scrollbar { display:none; }
    .gallery-tabs button {
      flex:0 0 auto;
      border:0;
      background:none;
      color:#9da1a8;
      padding:9px 12px;
      font-weight:850;
      cursor:pointer;
      border-bottom:2px solid transparent;
    }
    .gallery-tabs button.active {
      color:white;
      border-bottom-color:var(--red);
    }
    .client-gallery {
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:12px;
    }
    .gallery-item {
      position:relative;
      aspect-ratio:4/3;
      border-radius:10px;
      overflow:hidden;
      border:1px solid var(--line);
      background:#101216;
      cursor:pointer;
    }
    .gallery-item img { width:100%; height:100%; object-fit:cover; }
    .gallery-item::after {
      content:"";
      position:absolute;
      inset:55% 0 0;
      background:linear-gradient(transparent,rgba(0,0,0,.72));
    }
    .gallery-item .caption {
      position:absolute;
      z-index:2;
      left:12px;
      right:12px;
      bottom:10px;
      display:flex;
      justify-content:space-between;
      align-items:end;
      gap:10px;
    }
    .gallery-item .caption b { font-size:12px; }
    .heart {
      width:30px;
      height:30px;
      border-radius:50%;
      border:1px solid rgba(255,255,255,.30);
      background:rgba(0,0,0,.45);
      color:white;
      display:grid;
      place-items:center;
      cursor:pointer;
    }
    .gallery-lock {
      padding:18px;
      border-radius:11px;
      border:1px solid rgba(242,13,24,.32);
      background:rgba(242,13,24,.055);
      margin-bottom:18px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
    }
    .gallery-lock b { display:block; margin-bottom:3px; }
    .gallery-lock span { color:var(--muted); font-size:13px; }

    /* ===== INVOICE ===== */
    .invoice-card {
      background:#f6f6f7;
      color:#101216;
      border-radius:var(--radius);
      overflow:hidden;
      box-shadow:var(--shadow);
    }
    .invoice-head {
      padding:24px;
      background:#15171c;
      color:white;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:20px;
    }
    .invoice-head h1 { margin:0; font-size:27px; }
    .invoice-body {
      display:grid;
      grid-template-columns:1.2fr .8fr;
      gap:0;
    }
    .invoice-details { padding:27px; }
    .invoice-summary {
      padding:27px;
      background:#e8e8ea;
      border-left:1px solid #d6d7da;
    }
    .invoice-grid {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:18px;
    }
    .invoice-grid small {
      display:block;
      color:#676a72;
      text-transform:uppercase;
      font-weight:850;
      letter-spacing:.07em;
      font-size:9px;
      margin-bottom:4px;
    }
    .invoice-grid b { font-size:13px; }
    .payment-line {
      display:flex;
      justify-content:space-between;
      gap:18px;
      padding:10px 0;
      border-bottom:1px solid #d0d1d4;
      font-size:13px;
    }
    .payment-line.total {
      font-size:18px;
      font-weight:900;
      border-bottom:0;
      padding-top:17px;
    }
    .payment-line .paid { color:#17843a; }
    .payment-line .due { color:var(--red2); }







    /* ===== V12 SMART BRAND / PROJECT SWITCHER ===== */
    .brand-button {
      border:0;
      background:transparent;
      color:inherit;
      padding:0;
      cursor:pointer;
      text-align:left;
    }

    .portal-top {
      justify-content:space-between;
    }

    .portal-project-switch {
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
    }

    .portal-project-switch span {
      color:#8f939c;
      font-size:9px;
      font-weight:900;
      letter-spacing:.12em;
      text-transform:uppercase;
      white-space:nowrap;
    }

    .portal-project-switch select {
      min-width:250px;
      max-width:440px;
      height:40px;
      border:1px solid var(--line);
      border-radius:8px;
      padding:0 34px 0 12px;
      background:#111318;
      color:white;
      font-size:12px;
      font-weight:800;
    }

    .client-projects-grid {
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:15px;
    }

    .client-project-card {
      border:1px solid var(--line);
      border-radius:14px;
      background:#111318;
      overflow:hidden;
      min-width:0;
    }

    .client-project-cover {
      height:190px;
      background:#090a0c;
      overflow:hidden;
    }

    .client-project-cover img,
    .client-project-cover canvas {
      width:100%;
      height:100%;
      object-fit:cover;
    }

    .client-project-body {
      padding:17px;
    }

    .client-project-body h3 {
      margin:0;
      font-size:19px;
    }

    .client-project-body .meta {
      margin-top:5px;
      color:#8f939c;
      font-size:11px;
    }

    .client-project-stats {
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:8px;
      margin-top:15px;
    }

    .client-project-stat {
      border:1px solid var(--line);
      border-radius:8px;
      padding:9px;
      background:#0b0d10;
    }

    .client-project-stat small {
      display:block;
      color:#777b84;
      font-size:8px;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.08em;
    }

    .client-project-stat b {
      display:block;
      margin-top:2px;
      font-size:12px;
    }

    .client-project-actions {
      display:flex;
      gap:7px;
      flex-wrap:wrap;
      margin-top:14px;
    }

    /* ===== V12 DRIVE GALLERY UPLOAD ===== */
    .gallery-manager-head {
      padding:20px;
      border-bottom:1px solid var(--line);
      display:flex;
      justify-content:space-between;
      gap:18px;
      align-items:center;
      flex-wrap:wrap;
    }

    .drive-upload-drop {
      min-height:120px;
      border:1px dashed rgba(242,13,24,.48);
      border-radius:12px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:center;
      gap:3px;
      background:rgba(242,13,24,.045);
      cursor:pointer;
      text-align:center;
      padding:18px;
      text-transform:none !important;
      letter-spacing:0 !important;
    }

    .drive-upload-drop:hover {
      background:rgba(242,13,24,.075);
      border-color:rgba(242,13,24,.72);
    }

    .drive-upload-drop strong {
      color:white;
      font-size:14px;
    }

    .drive-upload-drop span:last-child {
      color:#8f939c;
      font-size:10px;
    }

    .drive-upload-icon {
      color:#ff2632;
      font-size:25px;
      font-weight:900;
    }

    .upload-queue {
      display:grid;
      gap:8px;
    }

    .upload-queue-item {
      display:grid;
      grid-template-columns:minmax(0,1fr) minmax(150px,1fr) auto;
      gap:9px;
      align-items:center;
      border:1px solid var(--line);
      border-radius:9px;
      padding:9px;
      background:#0b0d10;
    }

    .upload-file-name {
      min-width:0;
    }

    .upload-file-name b {
      display:block;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      font-size:11px;
    }

    .upload-file-name span {
      color:#7f838b;
      font-size:9px;
    }

    .upload-title-input {
      height:38px !important;
      min-height:38px !important;
      padding:0 10px !important;
    }

    .gallery-admin-actions {
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:6px;
      flex-wrap:wrap;
    }

    .preview-badge {
      display:inline-flex !important;
      width:max-content;
      align-items:center;
      gap:4px;
      color:#75e59a !important;
      font-weight:900;
      margin-top:4px !important;
    }

    @media (max-width:760px) {
      .portal-project-switch span { display:none; }
      .portal-project-switch select { min-width:0; width:155px; max-width:44vw; }

      .client-projects-grid { grid-template-columns:1fr; }

      .upload-queue-item {
        grid-template-columns:1fr;
      }

      .gallery-admin-actions {
        grid-column:1/-1;
        justify-content:stretch;
      }

      .gallery-admin-actions .btn {
        width:auto;
        flex:1 1 110px;
      }
    }


    /* ===== V16 CLIENT CRM ===== */
    .client-crm-grid {
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:15px;
    }

    .client-doc-card {
      border:1px solid var(--line);
      border-radius:11px;
      padding:13px;
      background:#0c0e11;
      margin-bottom:8px;
    }

    .client-doc-card b { font-size:12px; }

    .client-doc-card .meta {
      color:#8b8f97;
      font-size:9px;
      margin-top:3px;
    }

    .crm-record-actions {
      display:flex;
      gap:6px;
      flex-wrap:wrap;
      margin-top:10px;
    }

    .crm-pill {
      display:inline-flex;
      align-items:center;
      min-height:23px;
      border:1px solid var(--line);
      border-radius:999px;
      padding:0 8px;
      color:#c9cbd1;
      font-size:8px;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.05em;
    }

    .crm-pill.red {
      border-color:rgba(242,13,24,.45);
      color:#ff666e;
    }

    .crm-pill.green {
      border-color:rgba(57,200,107,.42);
      color:#75e59a;
    }

    .crm-pill.amber {
      border-color:rgba(241,184,64,.45);
      color:#ffd16d;
    }

    .quote-sign-summary {
      border:1px solid var(--line);
      border-radius:10px;
      background:#0c0e11;
      padding:14px;
      color:#d8dae0;
      font-size:11px;
      line-height:1.55;
    }
    .quote-sign-summary strong { font-size:18px; display:block; margin-bottom:4px; }

    .contract-body {
      white-space:pre-wrap;
      border:1px solid var(--line);
      border-radius:10px;
      background:#090b0e;
      padding:16px;
      color:#c9cbd1;
      font-size:12px;
      line-height:1.65;
      max-height:55vh;
      overflow:auto;
    }

    @media (max-width:900px) {
      .client-crm-grid {
        grid-template-columns:1fr;
      }
    }


    /* ===== V17 ADMIN MEDIA CRM ===== */
    .crm-admin-head { align-items:flex-end; }

    .crm-admin-nav {
      display:flex;
      gap:7px;
      overflow-x:auto;
      padding:0 0 14px;
      margin-bottom:4px;
      scrollbar-width:thin;
    }

    .crm-admin-nav button {
      flex:0 0 auto;
      border:1px solid var(--line);
      border-radius:9px;
      background:#111318;
      color:#a6a9b0;
      padding:10px 13px;
      cursor:pointer;
      font-size:10px;
      font-weight:900;
      letter-spacing:.06em;
      text-transform:uppercase;
    }

    .crm-admin-nav button.active {
      background:var(--red);
      border-color:var(--red);
      color:white;
    }

    .crm-search-wrap {
      position:relative;
      min-width:min(420px,48vw);
    }

    .crm-search-wrap input {
      width:100%;
      height:42px;
      border:1px solid var(--line);
      border-radius:9px;
      background:#0d0f12;
      color:white;
      padding:0 13px;
      font-size:11px;
    }

    .crm-search-results {
      position:absolute;
      z-index:5000;
      pointer-events:auto;
      top:calc(100% + 7px);
      left:0;
      right:0;
      max-height:360px;
      overflow:auto;
      border:1px solid var(--line);
      border-radius:10px;
      background:#111318;
      box-shadow:0 25px 60px rgba(0,0,0,.5);
      padding:6px;
    }

    .crm-search-result {
      width:100%;
      border:0;
      pointer-events:auto;
      position:relative;
      z-index:5001;
      background:transparent;
      color:white;
      padding:10px;
      border-radius:7px;
      text-align:left;
      cursor:pointer;
    }

    .crm-search-result:hover { background:#1b1e23; }
    .crm-search-result b { display:block; font-size:11px; }
    .crm-search-result span { display:block; color:#8d9199; font-size:9px; margin-top:2px; }

    .crm-stat-grid {
      display:grid;
      grid-template-columns:repeat(7,minmax(0,1fr));
      gap:10px;
      margin-bottom:18px;
    }

    .crm-dashboard-grid {
      grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .crm-record-list {
      display:grid;
      gap:8px;
    }

    .crm-record {
      border:1px solid var(--line);
      border-radius:10px;
      background:#0c0e11;
      padding:12px;
    }

    .crm-record-head {
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:12px;
      flex-wrap:wrap;
    }

    .crm-record h3,
    .crm-record h4 {
      margin:0;
      font-size:13px;
    }

    .crm-record .meta {
      color:#858992;
      font-size:9px;
      margin-top:3px;
      line-height:1.5;
    }

    .pipeline-workspace { overflow:hidden; }
    .pipeline-page-head {
      display:flex;
      justify-content:space-between;
      gap:16px;
      align-items:flex-end;
      flex-wrap:wrap;
      margin-bottom:14px;
    }
    .pipeline-toolbar { display:flex; gap:8px; flex-wrap:wrap; }
    .pipeline-toolbar input,
    .pipeline-toolbar select {
      min-height:38px;
      border:1px solid var(--line);
      border-radius:8px;
      background:#0d0f12;
      color:#fff;
      padding:0 10px;
      font-size:9px;
    }
    .pipeline-toolbar input { width:min(330px,70vw); }
    .pipeline-stage-summary {
      display:grid;
      grid-template-columns:repeat(6,minmax(0,1fr));
      gap:7px;
      margin-bottom:10px;
      min-width:1040px;
    }
    .pipeline-summary-card {
      border:1px solid var(--line);
      border-radius:8px;
      background:#0c0e11;
      padding:8px 10px;
      position:relative;
      overflow:hidden;
    }
    .pipeline-summary-card::before {
      content:"";
      position:absolute; left:0; top:0; bottom:0; width:3px;
      background:var(--stage-accent,#7d838d);
    }
    .pipeline-summary-card small { display:block; color:#858992; font-size:7px; text-transform:uppercase; letter-spacing:.08em; }
    .pipeline-summary-card strong { display:block; margin-top:3px; font-size:15px; }
    .pipeline-summary-card span { display:block; margin-top:2px; color:#8d9199; font-size:8px; }

    .crm-pipeline-board {
      display:grid;
      grid-template-columns:repeat(6,minmax(205px,1fr));
      gap:8px;
      min-width:1320px;
    }
    .crm-pipeline-board-pro { overflow:visible; }
    #crmAdminPipeline .pipeline-workspace { overflow-x:auto; padding-bottom:10px; }

    .crm-pipeline-column {
      border:1px solid var(--line);
      border-radius:9px;
      background:#090b0e;
      min-width:0;
      overflow:hidden;
      border-top:2px solid var(--stage-accent,#737983);
    }

    .crm-pipeline-column > header {
      padding:8px 9px;
      border-bottom:1px solid var(--line);
      font-size:8px;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.075em;
      color:#c3c5ca;
      display:flex;
      justify-content:space-between;
      gap:8px;
      align-items:center;
    }

    .crm-pipeline-column .body {
      padding:6px;
      display:grid;
      gap:5px;
      max-height:68vh;
      overflow:auto;
      align-content:start;
    }

    .crm-lead-card {
      border:1px solid #252930;
      border-radius:7px;
      padding:7px 8px;
      background:#101217;
      transition:border-color .15s ease, transform .15s ease;
    }
    .crm-lead-card:hover { border-color:#3a3f48; transform:translateY(-1px); }
    .crm-lead-card b { display:block; font-size:9px; line-height:1.25; }
    .crm-lead-card span { display:block; color:#878b94; font-size:7.5px; margin-top:2px; line-height:1.35; }
    .crm-lead-card .crm-record-actions { margin-top:6px; gap:4px; }
    .crm-lead-card .btn.small { min-height:27px; padding:5px 7px; font-size:7px; }
    .crm-lead-card .crm-pill { padding:4px 6px; font-size:6.5px; }

    .crm-lead-stage {
      width:100%;
      min-height:34px;
      margin-top:8px;
      border:1px solid var(--line);
      border-radius:7px;
      background:#0b0d10;
      color:#fff;
      padding:0 8px;
      font-size:9px;
      font-weight:800;
    }

    .pipeline-command-center { background:linear-gradient(180deg,#0c0e11 0%,#090b0d 100%); }
    .pipeline-health-grid {
      display:grid;
      grid-template-columns:repeat(6,minmax(0,1fr));
      gap:8px;
      margin-bottom:10px;
    }
    .pipeline-health-card {
      border:1px solid #282c33;
      border-radius:9px;
      background:#101217;
      padding:10px 12px;
      min-height:72px;
      position:relative;
      overflow:hidden;
    }
    .pipeline-health-card::after {
      content:"";
      position:absolute;
      left:0;right:0;bottom:0;height:2px;
      background:var(--health-accent,#525862);
      opacity:.85;
    }
    .pipeline-health-card small { display:block;color:#818791;font-size:7px;text-transform:uppercase;letter-spacing:.09em; }
    .pipeline-health-card strong { display:block;font-size:20px;margin-top:5px;line-height:1; }
    .pipeline-health-card span { display:block;color:#8d929b;font-size:8px;margin-top:5px;line-height:1.35; }
    .pipeline-health-card.attention { cursor:pointer; }
    .pipeline-health-card.attention:hover { border-color:#4a505b; }

    .pipeline-bottleneck-strip {
      display:flex;
      gap:7px;
      overflow:auto;
      padding:0 0 10px;
      scrollbar-width:thin;
    }
    .pipeline-insight-chip {
      flex:0 0 auto;
      border:1px solid #2a2e35;
      background:#0d1014;
      color:#c5c9cf;
      border-radius:999px;
      padding:7px 10px;
      font-size:8px;
      line-height:1.2;
    }
    .pipeline-insight-chip strong { color:#fff; }

    .pipeline-filter-panel {
      border:1px solid #23272d;
      border-radius:9px;
      background:#0a0c0f;
      padding:8px;
      margin-bottom:10px;
    }
    .pipeline-toolbar-pro { display:grid;grid-template-columns:minmax(220px,1.6fr) repeat(6,minmax(120px,.8fr));width:100%; }
    .pipeline-toolbar-pro input,
    .pipeline-toolbar-pro select { width:100%;min-width:0; }

    .pipeline-summary-card.ready-book {
      background:linear-gradient(180deg,#131819,#0d1112);
      border-color:#334745;
    }
    .pipeline-summary-card.ready-book::before { background:#70aaa7; }

    .pipeline-source-badge,
    .pipeline-priority-badge,
    .pipeline-returning-badge,
    .pipeline-attention-badge {
      display:inline-flex !important;
      align-items:center;
      width:auto !important;
      border-radius:999px;
      padding:3px 6px;
      margin:0 4px 4px 0 !important;
      font-size:6.5px !important;
      line-height:1 !important;
      color:#d8dce2 !important;
      border:1px solid rgba(255,255,255,.10);
    }
    .pipeline-priority-badge { background:#2c2522;color:#e7c7a9 !important;border-color:#514136; }
    .pipeline-returning-badge { background:#1c2824;color:#a7d0bd !important;border-color:#2f4b41; }
    .pipeline-attention-badge { background:#2b2224;color:#e1b2b6 !important;border-color:#4d3438; }
    .pipeline-next-action {
      margin-top:6px;
      border-left:2px solid #444a54;
      padding:5px 7px;
      background:#0b0d10;
      color:#b8bdc6;
      font-size:7.5px;
      line-height:1.35;
    }
    .pipeline-card-top { display:flex;align-items:flex-start;justify-content:space-between;gap:6px; }
    .pipeline-card-top .priority-star {
      appearance:none;border:0;background:transparent;color:#737983;cursor:pointer;font-size:14px;line-height:1;padding:0 0 2px 4px;
    }
    .pipeline-card-top .priority-star.active { color:#d7b889; }
    .pipeline-mini-meta { display:flex;flex-wrap:wrap;gap:4px 7px;margin-top:5px;color:#7f858e;font-size:7px; }
    .pipeline-mini-meta span { margin:0 !important;display:inline !important; }
    .pipeline-card-tools { display:flex;gap:4px;flex-wrap:wrap;margin-top:6px; }
    .pipeline-card-tools .btn.small { min-height:25px;padding:4px 6px; }

    .pipeline-performance-panel {
      margin-top:12px;
      border:1px solid #242830;
      border-radius:9px;
      background:#0b0d10;
      overflow:hidden;
    }
    .pipeline-performance-panel summary {
      cursor:pointer;
      list-style:none;
      padding:10px 12px;
      font-size:8px;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.08em;
      color:#c5c9cf;
      border-bottom:1px solid #20242a;
    }
    .pipeline-performance-panel summary::-webkit-details-marker { display:none; }
    .pipeline-performance-grid {
      display:grid;
      grid-template-columns:repeat(5,minmax(0,1fr));
      gap:8px;
      padding:10px;
    }
    .pipeline-performance-stat {
      border:1px solid #24282f;
      border-radius:8px;
      padding:9px 10px;
      background:#0f1115;
    }
    .pipeline-performance-stat small { display:block;color:#808690;font-size:7px;text-transform:uppercase;letter-spacing:.08em; }
    .pipeline-performance-stat strong { display:block;font-size:14px;margin-top:4px; }
    .pipeline-performance-stat span { display:block;color:#8d929b;font-size:7px;margin-top:3px; }
    .pipeline-performance-notes { padding:0 10px 10px;display:grid;gap:5px; }
    .pipeline-performance-note { border-left:2px solid #4b515b;padding:6px 8px;background:#0d0f13;color:#aeb4bd;font-size:8px;line-height:1.4; }

    .lead-ops-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
    .lead-ops-grid .field.full { grid-column:1/-1; }

    @media (max-width:1200px) {
      .pipeline-health-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
      .pipeline-toolbar-pro { grid-template-columns:repeat(3,minmax(0,1fr)); }
      .pipeline-toolbar-pro input { grid-column:1/-1; }
      .pipeline-performance-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    }
    @media (max-width:760px) {
      .pipeline-health-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .pipeline-toolbar-pro { grid-template-columns:1fr 1fr; }
      .pipeline-toolbar-pro input { grid-column:1/-1; }
      .pipeline-performance-grid { grid-template-columns:1fr 1fr; }
      .pipeline-stage-summary { grid-template-columns:repeat(7,minmax(120px,1fr));min-width:900px; }
    }

    .lead-analytics-toolbar {
      display:flex;
      justify-content:space-between;
      gap:12px;
      align-items:center;
      flex-wrap:wrap;
      margin-bottom:14px;
    }

    .lead-analytics-toolbar select,
    .lead-analytics-toolbar input {
      min-height:40px;
      border:1px solid var(--line);
      border-radius:8px;
      background:#0d0f12;
      color:#fff;
      padding:0 11px;
      font-size:10px;
    }

    .lead-analytics-grid {
      display:grid;
      grid-template-columns:minmax(145px,165px) minmax(0,1fr);
      gap:18px;
      align-items:center;
      min-width:0;
    }

    .lead-pie-wrap {
      display:grid;
      place-items:center;
      min-height:180px;
      min-width:0;
    }

    .lead-pie {
      width:min(160px,42vw);
      aspect-ratio:1;
      border-radius:50%;
      position:relative;
      background:#202329;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 18px 42px rgba(0,0,0,.28);
    }

    .lead-pie::after {
      content:"";
      position:absolute;
      inset:27%;
      border-radius:50%;
      background:#0c0e11;
      border:1px solid var(--line);
    }

    .lead-pie-center {
      position:absolute;
      inset:0;
      z-index:2;
      display:grid;
      place-content:center;
      text-align:center;
      pointer-events:none;
    }

    .lead-pie-center strong { font-size:30px; line-height:1; }
    .lead-pie-center span { color:#92969e; font-size:9px; text-transform:uppercase; letter-spacing:.09em; margin-top:6px; }

    .lead-source-row {
      display:grid;
      grid-template-columns:minmax(82px,1fr) 42px 50px 64px;
      gap:6px;
      align-items:center;
      width:100%;
      min-width:0;
      padding:9px 0;
      border-bottom:1px solid rgba(255,255,255,.07);
      font-size:9px;
    }

    .lead-source-row.header {
      color:#81858e;
      font-size:8px;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.06em;
    }

    .lead-source-name { display:flex; align-items:center; gap:7px; min-width:0; overflow:hidden; }
    .lead-source-name > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .lead-source-dot { width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
    .lead-source-row strong { text-align:right; min-width:0; white-space:nowrap; }

    .lead-history-controls {
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      margin-bottom:10px;
    }

    .lead-history-controls input,
    .lead-history-controls select {
      min-height:38px;
      border:1px solid var(--line);
      border-radius:8px;
      background:#0d0f12;
      color:#fff;
      padding:0 10px;
      font-size:10px;
    }

    .lead-origin-box {
      border:1px solid rgba(242,13,24,.28);
      border-radius:9px;
      padding:11px;
      background:rgba(242,13,24,.055);
      margin-top:10px;
      font-size:9px;
      color:#c7c9cf;
      line-height:1.6;
    }

    .role-chip {
      display:inline-flex;
      align-items:center;
      min-height:25px;
      padding:0 9px;
      border-radius:999px;
      border:1px solid rgba(242,13,24,.35);
      background:rgba(242,13,24,.08);
      font-size:8px;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.07em;
    }

    .access-user-row {
      display:grid;
      grid-template-columns:minmax(170px,1.4fr) minmax(130px,.8fr) 110px 90px;
      gap:10px;
      align-items:center;
      padding:11px;
      border:1px solid var(--line);
      border-radius:9px;
      background:#0c0e11;
      margin-bottom:8px;
    }

    .access-user-row select {
      width:100%;
      min-height:38px;
      border:1px solid var(--line);
      border-radius:7px;
      background:#111318;
      color:#fff;
      padding:0 8px;
      font-size:9px;
    }

    .staff-schedule-grid { display:grid; gap:10px; }
    .staff-booking-card {
      display:grid;
      grid-template-columns:130px minmax(0,1fr) auto;
      gap:14px;
      align-items:center;
      border:1px solid var(--line);
      border-radius:11px;
      background:#0c0e11;
      padding:14px;
    }
    .staff-booking-date { font-size:11px; font-weight:900; text-transform:uppercase; color:#ff666e; }
    .staff-booking-card h3 { margin:0; font-size:14px; }
    .staff-booking-card .meta { color:#8d9199; font-size:9px; margin-top:4px; line-height:1.55; }
    .staff-booking-actions { display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; align-items:center; }
    .staff-upload-progress { margin-top:8px; color:#aeb2ba; font-size:9px; min-height:14px; }
    .staff-assignment-list { display:flex; gap:6px; flex-wrap:wrap; margin-top:7px; }
    .staff-assignment-pill { border:1px solid #2c3038; border-radius:999px; padding:4px 8px; color:#cfd2d8; font-size:8px; font-weight:800; }
    .job-upload-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; padding:11px 0; border-bottom:1px solid var(--line); }
    .job-upload-row:last-child { border-bottom:0; }

    .production-queue-grid { display:grid; gap:12px; }
    .production-card { border:1px solid var(--line); border-radius:12px; background:#0c0e11; padding:16px; }
    .production-card-head { display:flex; justify-content:space-between; gap:14px; align-items:flex-start; margin-bottom:12px; }
    .production-card h3 { margin:0 0 4px; font-size:16px; }
    .production-meta { color:#90949d; font-size:10px; line-height:1.6; }
    .production-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:12px; }
    .production-files { margin-top:12px; border-top:1px solid var(--line); padding-top:10px; }
    .production-file-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid #1f2228; }
    .production-file-row:last-child { border-bottom:0; }
    .qc-preview-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(125px,1fr)); gap:9px; margin-top:12px; }
    .qc-preview { min-height:120px; border:1px solid var(--line); border-radius:9px; background:#090b0e; overflow:hidden; display:flex; align-items:center; justify-content:center; }
    .qc-preview img { width:100%; height:140px; object-fit:cover; display:block; }
    .qc-note-box { width:100%; min-height:76px; resize:vertical; border:1px solid var(--line); border-radius:8px; background:#0b0d10; color:#fff; padding:10px; font:inherit; margin-top:10px; }

    .crm-calendar-head {
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      margin-bottom:12px;
    }

    .crm-calendar {
      display:grid;
      grid-template-columns:repeat(7,1fr);
      border-left:1px solid var(--line);
      border-top:1px solid var(--line);
    }

    .crm-calendar-day,
    .crm-calendar-label {
      min-height:92px;
      border-right:1px solid var(--line);
      border-bottom:1px solid var(--line);
      padding:7px;
      background:#0c0e11;
    }

    .crm-calendar-label {
      min-height:auto;
      background:#15171b;
      color:#8d9199;
      font-size:8px;
      font-weight:900;
      text-transform:uppercase;
      text-align:center;
    }

    .crm-calendar-day.muted { opacity:.35; }
    .crm-calendar-date { font-size:9px; color:#9a9da5; font-weight:900; }

    .crm-calendar-event {
      display:block;
      margin-top:5px;
      border-radius:5px;
      padding:4px 5px;
      background:rgba(242,13,24,.15);
      border:1px solid rgba(242,13,24,.35);
      color:#fff;
      font-size:7px;
      line-height:1.35;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .crm-check {
      display:flex !important;
      align-items:center;
      gap:8px;
      text-transform:none !important;
      letter-spacing:0 !important;
      font-size:11px !important;
    }

    .crm-check input { width:auto !important; }

    .crm-archived { opacity:.45; }

    @media (max-width:1050px) {
      .crm-stat-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
      .crm-dashboard-grid { grid-template-columns:1fr; }
    }

    @media (max-width:760px) {
      .crm-search-wrap { min-width:0; width:100%; }
      .crm-admin-head .admin-toolbar { width:100%; }
      .crm-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .crm-pipeline-board { grid-template-columns:repeat(6,minmax(205px,1fr)); }
      .lead-analytics-grid { grid-template-columns:1fr; gap:14px; }
      .lead-pie-wrap { min-height:170px; }
      .lead-pie { width:min(155px,48vw); }
      .lead-source-row { grid-template-columns:minmax(82px,1fr) 42px 50px 64px; }
      .access-user-row { grid-template-columns:1fr; }
      .staff-booking-card { grid-template-columns:1fr; }
      .crm-calendar-day { min-height:72px; padding:4px; }
      .crm-calendar-event { font-size:6px; }
    }

    /* ===== V10 ACCOUNT / PROFILE MENU ===== */
    .portal-profile-menu { position:relative; margin-left:auto; }

    .portal-profile-trigger {
      display:flex;
      align-items:center;
      gap:11px;
      border:0;
      background:transparent;
      color:white;
      padding:5px 7px 5px 12px;
      border-radius:11px;
      cursor:pointer;
      font:inherit;
    }

    .portal-profile-trigger:hover,
    .portal-profile-trigger:focus-visible {
      background:#14161a;
      outline:none;
    }

    .portal-profile-name {
      font-weight:800;
      font-size:13px;
      max-width:230px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .portal-profile-caret {
      color:#8f939c;
      font-size:12px;
      transition:transform .18s ease;
    }

    .portal-profile-menu.open .portal-profile-caret {
      transform:rotate(180deg);
    }

    .portal-profile-dropdown {
      position:absolute;
      top:calc(100% + 9px);
      right:0;
      width:220px;
      display:none;
      padding:7px;
      border:1px solid var(--line);
      border-radius:12px;
      background:#111318;
      box-shadow:0 22px 55px rgba(0,0,0,.46);
    }

    .portal-profile-menu.open .portal-profile-dropdown {
      display:grid;
      gap:4px;
    }

    .portal-profile-dropdown button {
      min-height:42px;
      border:0;
      border-radius:8px;
      padding:0 11px;
      background:transparent;
      color:#d7d9de;
      cursor:pointer;
      text-align:left;
      font-weight:800;
      font-size:12px;
    }

    .portal-profile-dropdown button:hover,
    .portal-profile-dropdown button:focus-visible {
      background:#1b1e23;
      color:white;
      outline:none;
    }

    .portal-profile-dropdown button.logout { color:#ff666e; }

    /* ===== V10 WATERMARKED PREVIEWS ===== */
    .protected-preview {
      display:block;
      width:100%;
      height:100%;
      object-fit:cover;
      background:#0c0e11;
      user-select:none;
      -webkit-user-select:none;
      -webkit-touch-callout:none;
    }

    .project-card canvas.protected-preview {
      height:110px;
      width:160px;
      border-radius:9px;
    }

    .recent-card canvas.protected-preview {
      height:150px;
      width:100%;
    }

    .gallery-item canvas.protected-preview {
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
    }

    .modal-photo-canvas {
      width:100%;
      max-height:70svh;
      display:none;
      background:#060709;
    }

    .modal-photo-canvas.show { display:block; }

    .protected-note {
      margin-top:7px;
      color:#8f939c;
      font-size:10px;
      line-height:1.45;
    }

    /* ===== V10 BRANDED NOTICE ===== */
    .site-notice-icon {
      width:66px;
      height:66px;
      border-radius:50%;
      display:grid;
      place-items:center;
      margin:0 auto 17px;
      border:1px solid rgba(242,13,24,.35);
      background:rgba(242,13,24,.10);
      color:#ff2c37;
      font-size:27px;
      font-weight:900;
    }

    .site-notice-body {
      padding:28px;
      text-align:center;
    }

    .site-notice-body h2 {
      margin:7px 0 8px;
      font-size:27px;
    }

    .site-notice-body p {
      margin:0 auto;
      max-width:430px;
      color:#b7bac1;
      line-height:1.55;
      font-size:13px;
    }

    .site-notice-actions {
      display:flex;
      justify-content:center;
      gap:9px;
      flex-wrap:wrap;
      margin-top:22px;
    }

    /* ===== V10 ADMIN CLIENT EMAIL ===== */
    .admin-client-actions {
      display:flex;
      gap:6px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }

    .admin-email-summary {
      padding:13px 14px;
      border:1px solid var(--line);
      border-radius:10px;
      background:#0b0d10;
      margin-bottom:15px;
    }

    .admin-email-summary small {
      display:block;
      color:#8f939c;
      font-size:9px;
      text-transform:uppercase;
      letter-spacing:.12em;
      font-weight:850;
      margin-bottom:4px;
    }

    .admin-email-summary b { overflow-wrap:anywhere; }

    @media (max-width:700px) {
      .portal-profile-name { max-width:145px; }

      .portal-profile-dropdown {
        width:min(220px, calc(100vw - 30px));
      }

      .admin-client-actions {
        justify-content:flex-start;
        margin-top:10px;
      }

      .project-card canvas.protected-preview {
        width:100%;
        height:150px;
      }

      .recent-card canvas.protected-preview { height:110px; }
    }

    /* ===== ADMIN GALLERY MANAGER + DELETION ===== */
    .admin-action-row {
      display:flex;
      gap:6px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }

    .btn-danger {
      color:#fff;
      background:linear-gradient(180deg,#b70c15,#780008);
      border:1px solid rgba(255,90,100,.28);
    }

    .gallery-manager-grid {
      display:grid;
      grid-template-columns:.82fr 1.18fr;
      gap:16px;
      align-items:start;
    }

    .gallery-admin-list {
      display:grid;
      gap:9px;
      max-height:520px;
      overflow:auto;
    }

    .gallery-admin-item {
      display:grid;
      grid-template-columns:78px minmax(0,1fr) auto;
      gap:12px;
      align-items:center;
      padding:10px;
      border:1px solid var(--line);
      border-radius:10px;
      background:#0b0d10;
    }

    .gallery-admin-item img {
      width:78px;
      height:62px;
      object-fit:cover;
      border-radius:7px;
      background:#15171c;
    }

    .gallery-admin-item b {
      display:block;
      font-size:12px;
    }

    .gallery-admin-item span {
      display:block;
      color:var(--muted);
      font-size:10px;
      margin-top:2px;
    }

    .delete-warning {
      padding:14px;
      border:1px solid rgba(242,13,24,.28);
      background:rgba(242,13,24,.055);
      border-radius:10px;
      color:#d1d3d8;
      line-height:1.55;
      font-size:12px;
    }

    @media (max-width:760px) {
      .gallery-manager-grid {
        grid-template-columns:1fr;
      }

      .gallery-admin-item {
        grid-template-columns:68px 1fr;
      }

      .gallery-admin-item img {
        width:68px;
        height:56px;
      }

      .gallery-admin-item .btn {
        grid-column:1/-1;
        width:100%;
      }

      .admin-action-row {
        justify-content:flex-start;
      }
    }


    /* ===== V14 STRIPE RETURN TAB ===== */
    .checkout-return-card {
      width:min(520px,calc(100% - 30px));
      margin:80px auto;
      padding:34px;
      border:1px solid rgba(255,255,255,.11);
      border-radius:20px;
      background:
        radial-gradient(
          circle at 86% 0%,
          rgba(242,13,24,.18),
          transparent 38%
        ),
        linear-gradient(180deg,#121418,#090a0d);
      text-align:center;
    }

    .checkout-return-card h1 {
      margin:12px 0 8px;
      font-size:31px;
    }

    .checkout-return-card p {
      margin:0 auto 22px;
      max-width:390px;
      color:#b7bac1;
      line-height:1.55;
      font-size:13px;
    }

    /* ===== BRANDED PAYMENT SUCCESS ===== */
    .payment-success-overlay {
      position:fixed;
      inset:0;
      z-index:9999;
      display:none;
      align-items:center;
      justify-content:center;
      padding:20px;
      background:rgba(0,0,0,.78);
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
    }

    .payment-success-overlay.show {
      display:flex;
      animation:paymentFadeIn .22s ease both;
    }

    .payment-success-card {
      width:min(520px, 100%);
      border:1px solid rgba(255,255,255,.11);
      border-radius:22px;
      overflow:hidden;
      background:
        radial-gradient(circle at 85% 5%, rgba(242,13,24,.20), transparent 38%),
        linear-gradient(180deg,#121418 0%,#090a0d 100%);
      box-shadow:0 32px 90px rgba(0,0,0,.58);
      transform-origin:center;
      animation:paymentPop .28s cubic-bezier(.2,.9,.3,1.15) both;
    }

    .payment-success-top {
      padding:34px 30px 24px;
      text-align:center;
    }

    .payment-success-icon {
      width:78px;
      height:78px;
      margin:0 auto 20px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:linear-gradient(145deg,#ff1925,#ba0009);
      box-shadow:0 0 0 8px rgba(242,13,24,.10), 0 14px 35px rgba(242,13,24,.25);
      font-size:36px;
      font-weight:900;
      color:white;
    }

    .payment-success-kicker {
      color:#ff3d47;
      font-size:10px;
      font-weight:900;
      letter-spacing:.18em;
      text-transform:uppercase;
      margin-bottom:9px;
    }

    .payment-success-card h2 {
      margin:0;
      font-size:34px;
      letter-spacing:-.035em;
    }

    .payment-success-card p {
      margin:10px auto 0;
      max-width:390px;
      color:#b7bac1;
      line-height:1.55;
      font-size:14px;
    }

    .payment-success-summary {
      margin:0 22px 22px;
      border:1px solid rgba(255,255,255,.08);
      border-radius:14px;
      background:rgba(255,255,255,.035);
      overflow:hidden;
    }

    .payment-success-row {
      display:flex;
      justify-content:space-between;
      gap:16px;
      padding:13px 16px;
      border-bottom:1px solid rgba(255,255,255,.07);
      font-size:13px;
    }

    .payment-success-row:last-child {
      border-bottom:0;
    }

    .payment-success-row span {
      color:#8f939c;
    }

    .payment-success-row strong {
      text-align:right;
    }

    .payment-success-actions {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
      padding:0 22px 22px;
    }

    .payment-success-actions .btn {
      width:100%;
    }

    @keyframes paymentFadeIn {
      from { opacity:0; }
      to { opacity:1; }
    }

    @keyframes paymentPop {
      from { opacity:0; transform:translateY(16px) scale(.965); }
      to { opacity:1; transform:translateY(0) scale(1); }
    }

    @media (max-width:560px) {
      .payment-success-card {
        border-radius:18px;
      }

      .payment-success-top {
        padding:28px 20px 20px;
      }

      .payment-success-card h2 {
        font-size:29px;
      }

      .payment-success-actions {
        grid-template-columns:1fr;
      }
    }

    /* ===== ACCOUNT SETTINGS ===== */
    .account-grid {
      display:grid;
      grid-template-columns:.9fr 1.1fr;
      gap:18px;
      align-items:start;
    }
    .account-card {
      border:1px solid var(--line);
      background:#111318;
      border-radius:14px;
      padding:22px;
      box-shadow:var(--shadow);
    }
    .account-card h2 {
      margin:0 0 6px;
      font-size:21px;
    }
    .account-card p {
      margin:0 0 18px;
      color:var(--muted);
      font-size:13px;
    }
    .account-profile {
      display:grid;
      gap:12px;
    }
    .account-profile-row {
      padding:13px 14px;
      border:1px solid var(--line);
      border-radius:9px;
      background:#0b0d10;
    }
    .account-profile-row small {
      display:block;
      color:var(--muted);
      text-transform:uppercase;
      letter-spacing:.08em;
      font-weight:900;
      font-size:9px;
      margin-bottom:4px;
    }
    .account-profile-row b {
      display:block;
      word-break:break-word;
    }
    .account-form {
      display:grid;
      gap:13px;
    }
    .account-status {
      min-height:21px;
      color:var(--muted);
      font-size:12px;
      line-height:1.5;
    }
    .account-notice {
      margin-top:13px;
      border:1px solid rgba(242,13,24,.25);
      background:rgba(242,13,24,.045);
      border-radius:9px;
      padding:12px;
      color:#b9bcc3;
      font-size:11px;
      line-height:1.6;
    }

    @media (max-width:900px) {
      .account-grid { grid-template-columns:1fr; }
    }

    /* ===== ADMIN PORTAL ===== */
    .admin-head {
      display:flex;
      justify-content:space-between;
      align-items:flex-end;
      gap:20px;
      margin-bottom:22px;
    }
    .admin-head h1 {
      margin:6px 0 0;
      font-size:34px;
      letter-spacing:-.035em;
    }
    .admin-stats {
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:12px;
      margin-bottom:18px;
    }
    .admin-stat {
      border:1px solid var(--line);
      background:#111318;
      border-radius:12px;
      padding:18px;
    }
    .admin-stat small {
      display:block;
      color:var(--muted);
      text-transform:uppercase;
      font-weight:900;
      letter-spacing:.09em;
      font-size:9px;
      margin-bottom:7px;
    }
    .admin-stat strong {
      display:block;
      font-size:28px;
      line-height:1;
    }
    .admin-grid {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:16px;
      align-items:start;
      margin-bottom:18px;
    }
    .admin-panel {
      border:1px solid var(--line);
      background:#111318;
      border-radius:14px;
      padding:20px;
      box-shadow:var(--shadow);
    }
    .admin-panel h2 {
      margin:0 0 5px;
      font-size:20px;
    }
    .admin-panel > p {
      margin:0 0 17px;
      color:var(--muted);
      font-size:12px;
    }
    .admin-form {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
    }
    .admin-form .full { grid-column:1/-1; }
    .admin-form .btn { width:100%; }
    .admin-status {
      grid-column:1/-1;
      min-height:20px;
      color:var(--muted);
      font-size:12px;
    }
    .admin-success {
      color:#75e59a;
    }
    .admin-warning {
      color:#f4c15c;
    }
    .admin-table-wrap {
      overflow:auto;
      border:1px solid var(--line);
      border-radius:11px;
      background:#0c0e12;
    }
    .admin-table {
      width:100%;
      min-width:760px;
      border-collapse:collapse;
      font-size:12px;
    }
    .admin-table th,
    .admin-table td {
      padding:12px 13px;
      text-align:left;
      border-bottom:1px solid var(--line);
      vertical-align:middle;
    }
    .admin-table th {
      color:#afb2ba;
      text-transform:uppercase;
      letter-spacing:.07em;
      font-size:9px;
      background:#101216;
      position:sticky;
      top:0;
    }
    .admin-table tr:last-child td { border-bottom:0; }
    .admin-table .admin-actions {
      white-space:nowrap;
      text-align:right;
    }
    .admin-badge {
      display:inline-flex;
      align-items:center;
      min-height:25px;
      padding:0 9px;
      border-radius:999px;
      font-size:9px;
      text-transform:uppercase;
      letter-spacing:.06em;
      font-weight:900;
      border:1px solid var(--line);
      background:#171a20;
    }
    .admin-badge.due { color:#ff7a82; border-color:rgba(242,13,24,.3); }
    .admin-badge.paid { color:#75e59a; border-color:rgba(57,200,107,.3); }
    .admin-two-col {
      display:grid;
      grid-template-columns:.8fr 1.2fr;
      gap:16px;
      margin-top:18px;
    }
    .admin-client-list {
      display:grid;
      gap:8px;
      max-height:440px;
      overflow:auto;
    }
    .admin-client {
      border:1px solid var(--line);
      background:#0c0e12;
      border-radius:10px;
      padding:12px;
    }
    .admin-client b { display:block; }
    .admin-client span { color:var(--muted); font-size:11px; }
    .admin-toolbar {
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      align-items:center;
    }
    .admin-toolbar .btn { min-height:40px; }
    .admin-helper {
      margin-top:10px;
      color:var(--muted);
      font-size:11px;
      line-height:1.55;
    }
    .admin-secret {
      margin-top:10px;
      padding:10px 12px;
      border:1px dashed rgba(244,193,92,.45);
      border-radius:8px;
      background:rgba(244,193,92,.05);
      color:#f4c15c;
      font-size:11px;
      word-break:break-all;
    }

    /* Project card should remain clean when no cover photo exists. */
    .project-card.no-photo {
      grid-template-columns:1.2fr .9fr 180px;
    }
    .project-card.no-photo .project-main {
      min-width:0;
    }

    @media (max-width:1100px) {
      .admin-grid,
      .admin-two-col { grid-template-columns:1fr; }
      .admin-stats { grid-template-columns:repeat(3,1fr); }
      .project-card.no-photo { grid-template-columns:1fr 165px; }
      .project-card.no-photo .status-list { display:none; }
    }

    @media (max-width:699px) {
      .admin-head {
        align-items:flex-start;
        flex-direction:column;
      }
      .admin-head h1 { font-size:29px; }
      .admin-stats { grid-template-columns:1fr 1fr; }
      .admin-stat:last-child { grid-column:1/-1; }
      .admin-grid,
      .admin-form,
      .admin-two-col { grid-template-columns:1fr; }
      .admin-form .full,
      .admin-status { grid-column:auto; }
      .admin-panel { padding:15px; }
      .admin-table { min-width:660px; }

      .project-card.no-photo {
        grid-template-columns:1fr;
      }
      .project-card.no-photo .project-main {
        padding:3px 2px 0;
      }
      .project-card.no-photo .balance {
        grid-column:1;
      }
      .portal-mobile-nav.admin-enabled {
        grid-template-columns:repeat(7,minmax(0,1fr));
      }
      .portal-mobile-nav.admin-enabled button {
        min-width:0;
        padding:4px 1px;
        font-size:7.5px;
        line-height:1.05;
        white-space:nowrap;
        overflow:hidden;
      }
      .portal-mobile-nav.admin-enabled button span {
        font-size:17px;
        line-height:1;
      }
    }

    /* ===== MOBILE PORTAL NAV ===== */
    .portal-mobile-nav {
      display:none;
      position:fixed;
      z-index:50;
      left:0; right:0; bottom:0;
      min-height:68px;
      padding-bottom:env(safe-area-inset-bottom);
      border-top:1px solid var(--line);
      background:rgba(8,9,11,.95);
      backdrop-filter:blur(18px);
      grid-template-columns:repeat(5,1fr);
    }
    .portal-mobile-nav button {
      border:0;
      background:none;
      color:#b4b7be;
      display:grid;
      min-width:0;
      place-items:center;
      align-content:center;
      gap:2px;
      padding:4px 2px;
      font-size:9px;
      font-weight:800;
      white-space:nowrap;
      overflow:hidden;
    }
    .portal-mobile-nav button span { font-size:20px; }
    .portal-mobile-nav button.active { color:white; }

    /* ===== MODAL ===== */
    .modal {
      position:fixed;
      inset:0;
      z-index:200;
      display:none;
      place-items:center;
      padding:20px;
      background:rgba(0,0,0,.82);
      backdrop-filter:blur(8px);
    }
    .modal.show { display:grid; }
    #adminClientProfileModal { z-index:6005; }
    .modal-card {
      width:min(980px,100%);
      max-height:90svh;
      overflow:auto;
      border-radius:14px;
      border:1px solid var(--line);
      background:#111318;
      box-shadow:0 30px 100px rgba(0,0,0,.65);
    }
    .modal-card img { width:100%; max-height:70svh; object-fit:contain; background:#060709; }
    .modal-foot {
      padding:15px 17px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:15px;
    }

    /* ===== TABLET LANDSCAPE ===== */
    @media (min-width:768px) and (max-width:1100px) {
      .site-nav .brand img { width:190px; }
      .nav-links { gap:17px; }
      .nav-links a { font-size:11px; }
      .hero { min-height:700px; }
      .hero-copy { width:690px; }
      .services { grid-template-columns:1fr 1fr; }
      .portal-layout { grid-template-columns:190px 1fr; }
      .portal-content { width:min(100% - 34px,1000px); }
      .portal-hero { grid-template-columns:1fr 280px; }
      .project-card {
        grid-template-columns:135px 1fr 165px;
      }
      .project-card img { width:135px; }
      .status-list { display:none; }
      .client-gallery { grid-template-columns:1fr 1fr; }
    }

    /* ===== TABLET PORTRAIT ===== */
    @media (orientation:portrait) and (min-width:700px) and (max-width:1100px) {
      .site-nav { height:72px; }
      .site-nav .inner { gap:14px; }
      .nav-links { display:none; }
      .mobile-menu-btn { display:block; }
      .hero {
        min-height:780px;
        padding-top:72px;
        background-position:58% center;
      }
      .hero h1 { font-size:78px; }
      .hero-service-grid { grid-template-columns:1fr 1fr; }
      .hero-services { bottom:30px; }
      .section { padding:78px 0; }
      .section-head { display:block; }
      .section-head p { margin-top:16px; }
      .portfolio-grid { grid-template-columns:1fr 1fr; grid-auto-rows:240px; }
      .portfolio-card:nth-child(n) { grid-column:auto; }
      .contact-grid { grid-template-columns:1fr; }

      .portal-layout { grid-template-columns:82px 1fr; }
      .side-brand .brand img { width:54px; object-fit:cover; object-position:left; }
      .side-nav button {
        justify-content:center;
        padding:0;
        font-size:0;
      }
      .side-nav button span { font-size:20px; }
      .side-bottom .btn { font-size:0; padding:0; }
      .portal-hero { grid-template-columns:1fr; }
      .project-card { grid-template-columns:125px 1fr 160px; }
      .project-card img { width:125px; height:105px; }
      .status-list { display:none; }
      .quick-actions { grid-template-columns:1fr 1fr; }
      .recent-grid { grid-template-columns:1fr 1fr; }
      .client-gallery { grid-template-columns:1fr 1fr; }
      .invoice-body { grid-template-columns:1fr; }
      .invoice-summary { border-left:0; border-top:1px solid #d6d7da; }
    }

    /* ===== v22.2 MOBILE DOCK + CRM NAV =====
       On phones/tablets, the full CRM section matrix stays collapsed until
       the user explicitly opens it. This keeps the work area visible. */
    .crm-mobile-nav-toggle { display:none; }

    @media (max-width:850px) {
      .crm-mobile-nav-toggle {
        width:100%;
        min-height:50px;
        border:1px solid var(--line);
        border-radius:10px;
        background:rgba(13,15,18,.98);
        color:#fff;
        padding:8px 12px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        position:sticky;
        top:0;
        z-index:39;
        cursor:pointer;
        text-align:left;
        box-shadow:0 8px 22px rgba(0,0,0,.22);
      }
      .crm-mobile-nav-title { min-width:0; display:grid; gap:2px; }
      .crm-mobile-nav-title small {
        color:#858992;
        font-size:7px;
        line-height:1;
        font-weight:900;
        letter-spacing:.11em;
        text-transform:uppercase;
      }
      .crm-mobile-nav-title strong {
        min-width:0;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        font-size:12px;
        letter-spacing:.04em;
        text-transform:uppercase;
      }
      .crm-mobile-nav-action {
        flex:0 0 auto;
        display:flex;
        align-items:center;
        gap:7px;
        color:#ff3a43;
        font-size:8px;
        font-weight:950;
        letter-spacing:.09em;
        text-transform:uppercase;
      }
      .crm-mobile-nav-action i {
        color:#fff;
        font-style:normal;
        font-size:15px;
        line-height:1;
        transition:transform .16s ease;
      }
      .crm-mobile-nav-toggle[aria-expanded="true"] .crm-mobile-nav-action i { transform:rotate(180deg); }

      #crmAdminSectionNav.crm-admin-nav {
        display:none;
        position:relative;
        top:auto;
        z-index:38;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:6px;
        margin:7px 0 10px;
        padding:8px;
        max-height:min(52vh,390px);
        overflow-y:auto;
        overflow-x:hidden;
        border:1px solid var(--line);
        border-radius:10px;
        background:#0b0d10;
        backdrop-filter:none;
      }
      #crmAdminSectionNav.crm-admin-nav.mobile-open { display:grid; }
      #crmAdminSectionNav.crm-admin-nav button {
        min-height:42px;
        padding:8px 7px;
        font-size:8px;
      }
    }

    @media (max-width:420px) {
      #crmAdminSectionNav.crm-admin-nav { grid-template-columns:1fr 1fr; }
      .crm-mobile-nav-toggle { min-height:48px; }
    }

    /* ===== PHONE ===== */
    @media (max-width:699px) {
      .shell { width:min(100% - 24px,var(--max)); }
      .site-nav { height:66px; }
      .site-nav .brand { min-width:0; }
      .site-nav .brand img { width:172px; height:48px; }
      .nav-links,.site-nav .nav-login { display:none; }
      .mobile-menu-btn { display:block; }

      .hero {
        min-height:760px;
        padding-top:66px;
        align-items:flex-start;
        background-position:60% center;
      }
      .hero::before {
        content:"";
        position:absolute;
        inset:0;
        background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.87) 58%,rgba(0,0,0,.94));
      }
      .hero-copy {
        padding:255px 0 236px;
      }
      .hero-kicker {
        font-size:9px;
        letter-spacing:.18em;
        margin-bottom:12px;
      }
      .hero h1 {
        font-size:clamp(48px,15vw,68px);
        line-height:.86;
        letter-spacing:-.055em;
      }
      .tagline {
        font-size:12px;
        max-width:340px;
        line-height:1.55;
      }
      .hero-actions { display:grid; grid-template-columns:1fr; }
      .hero-services { bottom:19px; }
      .hero-service-grid { grid-template-columns:repeat(4,1fr); }
      .hero-service {
        min-height:86px;
        padding:13px 5px;
      }
      .hero-service .ico { font-size:20px; }
      .hero-service b { font-size:8px; }
      .hero-service span { display:none; }

      .section { padding:68px 0; }
      .section-head { display:block; }
      .section-head h2 { font-size:45px; }
      .section-head p { margin-top:16px; }
      .services { grid-template-columns:1fr; }
      .service-card img { height:230px; }
      .portfolio-grid { grid-template-columns:1fr; grid-auto-rows:245px; }
      .portfolio-card:nth-child(n) { grid-column:auto; }
      .social-grid { grid-template-columns:1fr; }
      .social-card { min-height:145px; }
      .contact-grid { grid-template-columns:1fr; gap:28px; }
      .contact-form { grid-template-columns:1fr; padding:18px; }
      .field.full,.form-status { grid-column:auto; }
      .footer-inner { flex-direction:column; align-items:flex-start; }

      .login-view { grid-template-columns:1fr; }
      .login-art { display:none; }
      .login-panel {
        padding:28px 18px;
        min-height:100svh;
      }
      .login-back {
        display:block;
        position:fixed;
        top:16px;
        left:14px;
        z-index:3;
      }
      .login-brand .shield-img { width:92px; height:92px; }
      .login-box h1 { font-size:31px; }

      .portal-layout { display:block; }
      .portal-side { display:none; }
      .portal-top {
        min-height:62px;
        padding:0 14px;
      }
      .portal-content {
        width:min(100% - 24px,1120px);
        padding:20px 0 88px;
      }
      .portal-hero { grid-template-columns:1fr; }
      .welcome-card {
        min-height:150px;
        padding:21px;
      }
      .welcome-card h1 { font-size:33px; }
      .summary-card { display:none; }
      .project-card {
        grid-template-columns:88px 1fr;
        gap:12px;
        padding:12px;
      }
      .project-card img {
        width:88px;
        height:88px;
      }
      .project-card h3 { font-size:15px; }
      .project-meta { font-size:10px; }
      .status-list { display:none; }
      .balance {
        grid-column:1/-1;
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:10px;
        align-items:end;
        text-align:left;
      }
      .balance .btn { min-height:42px; }
      .balance strong { margin:0; font-size:25px; }
      .quick-actions { grid-template-columns:1fr 1fr; }
      .quick-actions button { min-height:74px; font-size:11px; }
      .recent-grid { grid-template-columns:1fr 1fr; }
      .recent-card img { height:110px; }
      .portal-mobile-nav { display:grid; }

      .gallery-top { display:block; }
      .gallery-top h1 { font-size:27px; }
      .gallery-actions {
        justify-content:flex-start;
        margin-top:14px;
      }
      .gallery-actions .btn { min-height:39px; padding:0 12px; font-size:9px; }
      .gallery-lock {
        align-items:flex-start;
        flex-direction:column;
      }
      .client-gallery { grid-template-columns:1fr 1fr; gap:8px; }
      .gallery-item .caption b { font-size:10px; }
      .heart { width:26px; height:26px; }
      .invoice-head {
        align-items:flex-start;
        flex-direction:column;
      }
      .invoice-body { grid-template-columns:1fr; }
      .invoice-summary { border-left:0; border-top:1px solid #d6d7da; }
      .invoice-grid { grid-template-columns:1fr; }
    }

    /* ===== PHONE LANDSCAPE ===== */
    @media (orientation:landscape) and (max-height:520px) and (max-width:950px) {
      .site-nav { height:58px; }
      .site-nav .brand img { width:155px; height:43px; }
      .hero {
        min-height:590px;
        padding-top:58px;
      }
      .hero-copy {
        width:570px;
        padding:70px 0 190px;
      }
      .hero h1 { font-size:57px; }
      .hero-services { bottom:14px; }
      .hero-service { min-height:72px; padding:9px 6px; }
      .section { padding:54px 0; }
      .login-panel { min-height:100svh; padding:18px; }
      .login-brand { margin-bottom:12px; }
      .login-brand .shield-img { width:70px; height:70px; }
      .login-box h1 { font-size:27px; }
      .login-box > p { margin-bottom:14px; }
      .login-form { gap:9px; }
      .login-form input { padding:10px 12px; }
      .login-form .btn { min-height:42px; }
      .demo-note { display:none; }
    }

    /* ===== MOBILE MENU DRAWER ===== */
    .mobile-drawer {
      position:fixed;
      inset:66px 0 auto;
      z-index:90;
      background:rgba(7,8,10,.98);
      border-bottom:1px solid var(--line);
      padding:18px 18px 24px;
      display:none;
    }
    .mobile-drawer.show { display:grid; gap:8px; }
    .mobile-drawer a,
    .mobile-drawer button {
      min-height:48px;
      border:1px solid var(--line);
      border-radius:8px;
      background:#101216;
      color:white;
      padding:0 14px;
      display:flex;
      align-items:center;
      text-align:left;
      font-weight:850;
    }
    .mobile-drawer .login-link { border-color:var(--red); color:white; }
  
    /* v19 CRM operations */
    .v19-kpi-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;margin-bottom:14px}
    .v19-kpi{border:1px solid var(--line);border-radius:10px;background:#0c0e11;padding:12px;position:relative;overflow:hidden}
    .v19-kpi:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--v19-accent,#8b929c)}
    .v19-kpi small{display:block;color:#858992;font-size:8px;text-transform:uppercase;letter-spacing:.07em}.v19-kpi strong{display:block;font-size:19px;margin-top:4px}.v19-kpi span{display:block;color:#8d9199;font-size:9px;margin-top:3px}
    .v19-board{display:grid;grid-template-columns:repeat(4,minmax(230px,1fr));gap:10px;overflow:auto;padding-bottom:8px}.v19-column{border:1px solid var(--line);border-radius:10px;background:#090b0e;min-width:230px}.v19-column>header{padding:10px;border-bottom:1px solid var(--line);font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.07em}.v19-column .body{padding:7px;display:grid;gap:7px;max-height:62vh;overflow:auto}
    .v19-tag{display:inline-flex;align-items:center;border:1px solid #313640;border-radius:999px;padding:4px 7px;font-size:8px;color:#c8cbd1;background:#15181d;margin:2px 3px 2px 0}.v19-tag.red{border-color:#6f2f34;color:#ffb0b4}.v19-tag.green{border-color:#295d3b;color:#90e5a9}.v19-tag.amber{border-color:#6b5527;color:#e7cc89}
    .v19-split{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr);gap:14px}.v19-scroll{max-height:68vh;overflow:auto}.v19-compact{font-size:9px;color:#9ba0a8}.v19-money{font-variant-numeric:tabular-nums}
    .job360-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.job360-section{border:1px solid var(--line);border-radius:10px;background:#0d0f12;padding:12px}.job360-section h3{margin:0 0 8px;font-size:11px}.job360-section.full{grid-column:1/-1}
    .crm-admin-nav{position:sticky;top:0;z-index:35;background:rgba(8,10,13,.97);padding:8px 0;backdrop-filter:blur(10px)}
    .client360-metrics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}.client360-metric{border:1px solid var(--line);background:#0d0f12;border-radius:8px;padding:9px}.client360-metric small{display:block;color:#858992;font-size:7px;text-transform:uppercase}.client360-metric strong{display:block;margin-top:3px;font-size:13px}
    .qc-history{display:grid;gap:6px}.qc-history .crm-record{padding:9px}
    .upload-progressbar{height:6px;border-radius:99px;background:#20242a;overflow:hidden;margin-top:5px}.upload-progressbar span{display:block;height:100%;background:#9b4449;width:0%}
    @media(max-width:1000px){.v19-kpi-grid{grid-template-columns:repeat(3,1fr)}.v19-split{grid-template-columns:1fr}.job360-grid{grid-template-columns:1fr 1fr}.client360-metrics{grid-template-columns:repeat(3,1fr)}}
    @media(max-width:680px){.v19-kpi-grid{grid-template-columns:repeat(2,1fr)}.job360-grid{grid-template-columns:1fr}.client360-metrics{grid-template-columns:repeat(2,1fr)}}


    /* ===== v19.1 VERTICAL-FLOW CRM =====
       CRM navigation and workspaces wrap vertically instead of requiring
       left/right scrolling at any supported viewport width. */
    #portalView,
    #crmAdminView,
    .crm-admin-panel,
    .admin-panel,
    .pipeline-workspace,
    .modal-card { min-width:0; max-width:100%; }

    .crm-admin-nav {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(108px,1fr));
      gap:7px;
      overflow:visible;
      width:100%;
    }
    .crm-admin-nav button {
      min-width:0;
      width:100%;
      white-space:normal;
      line-height:1.2;
    }

    .gallery-tabs {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(100px,1fr));
      overflow:visible;
      width:100%;
    }
    .gallery-tabs button { min-width:0; white-space:normal; }

    .pipeline-stage-summary {
      grid-template-columns:repeat(auto-fit,minmax(135px,1fr));
      min-width:0;
      width:100%;
    }
    .crm-pipeline-board {
      grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
      min-width:0;
      width:100%;
    }
    #crmAdminPipeline .pipeline-workspace,
    .crm-pipeline-board-pro { overflow-x:visible; }

    .pipeline-bottleneck-strip {
      flex-wrap:wrap;
      overflow:visible;
    }
    .pipeline-insight-chip {
      flex:1 1 190px;
      min-width:0;
      white-space:normal;
    }
    .pipeline-toolbar-pro {
      grid-template-columns:repeat(auto-fit,minmax(135px,1fr));
    }
    .pipeline-toolbar-pro input { grid-column:auto; }

    .v19-board {
      grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
      overflow:visible;
      width:100%;
    }
    .v19-column { min-width:0; }

    .admin-table-wrap {
      overflow:visible;
      max-width:100%;
    }
    .admin-table {
      min-width:0;
      width:100%;
      table-layout:fixed;
    }
    .admin-table th,
    .admin-table td {
      min-width:0;
      overflow-wrap:anywhere;
      word-break:normal;
      white-space:normal;
    }
    .admin-table .admin-actions { white-space:normal; }
    .admin-table .admin-action-row { justify-content:flex-start; }

    .crm-record,
    .staff-booking-card,
    .gallery-admin-item,
    .job360-section,
    .client360-metric,
    .v19-kpi { min-width:0; }

    @media (max-width:1100px) {
      .pipeline-health-grid { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
      .pipeline-performance-grid { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
      .crm-pipeline-board { grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
      .pipeline-stage-summary { grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); }
    }

    @media (max-width:850px) {
      .shell { width:min(var(--max),calc(100% - 24px)); }
      .crm-admin-nav { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .crm-admin-nav button { padding:9px 8px; font-size:8px; }

      .pipeline-health-grid,
      .pipeline-stage-summary,
      .pipeline-performance-grid,
      .v19-kpi-grid,
      .client360-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }

      .crm-pipeline-board,
      .v19-board { grid-template-columns:1fr; }

      .pipeline-toolbar-pro { grid-template-columns:1fr 1fr; }
      .pipeline-toolbar-pro input { grid-column:1/-1; }

      /* Projects become vertical cards rather than a squeezed/scrolled table. */
      .admin-table,
      .admin-table tbody,
      .admin-table tr,
      .admin-table td { display:block; width:100%; }
      .admin-table thead { display:none; }
      .admin-table tbody { display:grid; gap:10px; }
      .admin-table tr {
        border:1px solid var(--line);
        border-radius:10px;
        background:#0c0e12;
        overflow:hidden;
      }
      .admin-table td {
        display:grid;
        grid-template-columns:minmax(88px,.38fr) minmax(0,.62fr);
        gap:10px;
        align-items:start;
        padding:9px 11px;
        border-bottom:1px solid var(--line);
        text-align:left !important;
      }
      .admin-table td:last-child { border-bottom:0; }
      .admin-table td::before {
        content:attr(data-label);
        color:#858992;
        font-size:7px;
        font-weight:900;
        letter-spacing:.08em;
        text-transform:uppercase;
        padding-top:2px;
      }
      .admin-table td[colspan] { display:block; }
      .admin-table td[colspan]::before { display:none; }
      .admin-table .admin-action-row { justify-content:flex-start; }
      .admin-table .admin-action-row .btn { flex:1 1 105px; }
    }

    @media (max-width:520px) {
      .crm-admin-nav { grid-template-columns:1fr 1fr; }
      .pipeline-health-grid,
      .pipeline-stage-summary,
      .pipeline-performance-grid,
      .v19-kpi-grid,
      .client360-metrics { grid-template-columns:1fr 1fr; }
      .pipeline-toolbar-pro { grid-template-columns:1fr; }
      .pipeline-toolbar-pro input { grid-column:auto; }
      .pipeline-insight-chip { flex-basis:100%; }
      .admin-table td { grid-template-columns:82px minmax(0,1fr); }
    }


    /* ===== v19.3 PUBLIC PAGE SYSTEM ===== */
    .nav-links a.active { color:#fff; }
    .nav-links a.active::after { transform:scaleX(1); }
    .mobile-drawer a.active { color:#fff; border-color:rgba(242,13,24,.45); background:rgba(242,13,24,.08); }
    .public-page.hidden { display:none !important; }
    .public-page { min-height:calc(100svh - 78px); }

    .page-hero {
      min-height:510px;
      padding:150px 0 92px;
      position:relative;
      display:flex;
      align-items:end;
      overflow:hidden;
      border-bottom:1px solid var(--line);
      background:
        linear-gradient(90deg,rgba(2,2,3,.96),rgba(2,2,3,.76) 46%,rgba(2,2,3,.38)),
        var(--page-bg, linear-gradient(135deg,#111319,#07080a));
      background-size:cover;
      background-position:center;
    }
    .page-hero::after {
      content:"";
      position:absolute;
      inset:auto 0 0;
      height:155px;
      background:linear-gradient(transparent,var(--black));
      pointer-events:none;
    }
    .page-hero .shell { position:relative; z-index:2; }
    .page-hero-copy { width:min(850px,100%); }
    .page-hero h1 {
      margin:10px 0 18px;
      font-size:clamp(52px,7vw,96px);
      line-height:.9;
      letter-spacing:-.05em;
      text-transform:uppercase;
      font-style:italic;
    }
    .page-hero p { width:min(680px,100%); margin:0; color:#d4d6da; font-size:16px; line-height:1.75; }
    .page-hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }

    .public-section { padding:86px 0; }
    .public-section.alt { background:#090a0d; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
    .public-title-row { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr); gap:42px; align-items:end; margin-bottom:34px; }
    .public-title-row h2 { margin:8px 0 0; font-size:clamp(38px,5vw,68px); line-height:.94; letter-spacing:-.04em; text-transform:uppercase; font-style:italic; }
    .public-title-row p { margin:0; color:var(--muted); line-height:1.75; }

    .public-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
    .public-card {
      min-width:0;
      border:1px solid var(--line);
      border-radius:14px;
      background:linear-gradient(180deg,#14161b,#0d0f13);
      overflow:hidden;
      box-shadow:var(--shadow);
    }
    .public-card-media { height:220px; overflow:hidden; background:#111318; }
    .public-card-media img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
    .public-card:hover .public-card-media img { transform:scale(1.03); }
    .public-card-body { padding:24px; }
    .public-card-body h3 { margin:0 0 9px; text-transform:uppercase; font-size:18px; letter-spacing:.025em; }
    .public-card-body p { margin:0; color:var(--muted); line-height:1.7; font-size:14px; }
    .public-card-body .text-link { display:inline-flex; margin-top:18px; }

    .public-stat-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; border:1px solid var(--line); background:var(--line); border-radius:12px; overflow:hidden; box-shadow:var(--shadow); }
    .public-stat { padding:24px 18px; background:#0e1014; text-align:center; }
    .public-stat strong { display:block; margin-bottom:5px; color:#fff; font-size:24px; text-transform:uppercase; font-style:italic; }
    .public-stat span { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.1em; }

    .service-detail-list { display:grid; gap:18px; }
    .service-detail {
      display:grid;
      grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr);
      gap:0;
      border:1px solid var(--line);
      border-radius:15px;
      overflow:hidden;
      background:#0f1115;
      box-shadow:var(--shadow);
    }
    .service-detail:nth-child(even) { grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr); }
    .service-detail:nth-child(even) .service-detail-media { order:2; }
    .service-detail-media { min-height:310px; }
    .service-detail-media img { width:100%; height:100%; object-fit:cover; }
    .service-detail-copy { padding:34px; align-self:center; }
    .service-detail-copy h3 { margin:5px 0 12px; font-size:clamp(28px,3.2vw,44px); text-transform:uppercase; font-style:italic; line-height:.95; }
    .service-detail-copy p { color:var(--muted); line-height:1.75; }
    .service-points { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 0; }
    .service-points span { padding:8px 10px; border:1px solid var(--line); border-radius:999px; background:#090a0d; color:#d6d8dc; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; }

    .process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
    .process-step { position:relative; padding:25px; border:1px solid var(--line); border-radius:12px; background:#0f1115; }
    .process-step .num { color:var(--red); font-size:11px; font-weight:950; letter-spacing:.14em; }
    .process-step h3 { margin:12px 0 8px; text-transform:uppercase; font-size:18px; }
    .process-step p { margin:0; color:var(--muted); line-height:1.65; font-size:13px; }

    .portfolio-page-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-auto-rows:230px; gap:14px; }
    .portfolio-page-card { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:13px; background:#101216; }
    .portfolio-page-card.wide { grid-column:span 7; }
    .portfolio-page-card.medium { grid-column:span 5; }
    .portfolio-page-card.third { grid-column:span 4; }
    .portfolio-page-card.tall { grid-row:span 2; }
    .portfolio-page-card img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
    .portfolio-page-card:hover img { transform:scale(1.035); }
    .portfolio-page-card::after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 44%,rgba(0,0,0,.9)); }
    .portfolio-page-label { position:absolute; z-index:2; left:19px; right:19px; bottom:17px; text-transform:uppercase; font-weight:900; letter-spacing:.04em; }
    .portfolio-page-label small { display:block; margin-bottom:4px; color:var(--red); font-size:9px; letter-spacing:.12em; }

    .about-split { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:44px; align-items:center; }
    .about-image { min-height:520px; border-radius:15px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); }
    .about-image img { width:100%; height:100%; object-fit:cover; }
    .about-copy h2 { margin:8px 0 18px; font-size:clamp(40px,5vw,67px); line-height:.92; text-transform:uppercase; font-style:italic; letter-spacing:-.045em; }
    .about-copy p { color:var(--muted); line-height:1.8; }
    .principles-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:25px; }
    .principle { padding:20px; border:1px solid var(--line); border-radius:11px; background:#0e1014; }
    .principle strong { display:block; margin-bottom:6px; text-transform:uppercase; font-size:13px; }
    .principle span { color:var(--muted); font-size:13px; line-height:1.6; }

    .contact-info-stack { display:grid; gap:14px; margin-top:24px; }
    .contact-info-card { padding:20px; border:1px solid var(--line); border-radius:11px; background:#0f1115; }
    .contact-info-card strong { display:block; margin-bottom:5px; text-transform:uppercase; font-size:12px; }
    .contact-info-card span { color:var(--muted); font-size:13px; }
    .contact-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:28px; }
    .contact-step { padding:20px; border-left:2px solid var(--red); background:#0d0f12; }
    .contact-step b { display:block; margin-bottom:6px; text-transform:uppercase; font-size:12px; }
    .contact-step span { color:var(--muted); font-size:12px; line-height:1.6; }

    .public-cta {
      padding:42px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:28px;
      border:1px solid rgba(242,13,24,.3);
      border-radius:15px;
      background:
        radial-gradient(circle at 88% 50%,rgba(242,13,24,.16),transparent 18rem),
        linear-gradient(180deg,#13151a,#0d0f13);
      box-shadow:var(--shadow);
    }
    .public-cta h3 { margin:0 0 7px; font-size:clamp(28px,3.5vw,46px); line-height:.95; text-transform:uppercase; font-style:italic; }
    .public-cta p { margin:0; color:var(--muted); }
    .public-cta .btn { flex:0 0 auto; }

    @media (max-width:980px) {
      .public-title-row,.about-split { grid-template-columns:1fr; }
      .public-card-grid { grid-template-columns:1fr 1fr; }
      .public-stat-strip { grid-template-columns:1fr 1fr; }
      .service-detail,.service-detail:nth-child(even) { grid-template-columns:1fr; }
      .service-detail:nth-child(even) .service-detail-media { order:0; }
      .service-detail-media { min-height:260px; }
      .process-grid { grid-template-columns:1fr 1fr; }
      .portfolio-page-card.wide,.portfolio-page-card.medium,.portfolio-page-card.third { grid-column:span 6; }
      .about-image { min-height:400px; }
      .contact-steps { grid-template-columns:1fr; }
    }
    @media (max-width:680px) {
      .public-page { min-height:calc(100svh - 58px); }
      .page-hero { min-height:430px; padding:118px 0 62px; }
      .page-hero h1 { font-size:clamp(44px,14vw,66px); }
      .public-section { padding:62px 0; }
      .public-card-grid,.process-grid,.principles-grid { grid-template-columns:1fr; }
      .public-stat-strip { grid-template-columns:1fr 1fr; }
      .portfolio-page-grid { grid-template-columns:1fr; grid-auto-rows:235px; }
      .portfolio-page-card.wide,.portfolio-page-card.medium,.portfolio-page-card.third { grid-column:1; }
      .portfolio-page-card.tall { grid-row:span 1; }
      .public-cta { padding:28px 22px; align-items:flex-start; flex-direction:column; }
      .service-detail-copy { padding:25px; }
    }


    /* ===== v19.4 PREMIUM CLIENT EXPERIENCE ===== */
    .client-premium-nav,
    .client-top-brand { display:none; }

    .portal.client-experience {
      --client-panel:#0e1014;
      --client-panel-2:#12151a;
      --client-soft:#171a20;
      --client-line:rgba(255,255,255,.10);
      background:
        radial-gradient(circle at 72% -10%, rgba(242,13,24,.10), transparent 34rem),
        #07080a;
    }
    .portal.client-experience .portal-layout {
      display:block;
      min-height:100svh;
    }
    .portal.client-experience .portal-side { display:none; }
    .portal.client-experience .portal-main {
      width:100%;
      padding-bottom:96px;
    }
    .portal.client-experience .portal-top {
      min-height:70px;
      padding:0 clamp(18px,4vw,60px);
      justify-content:space-between;
      border-bottom:1px solid rgba(255,255,255,.08);
      background:rgba(6,7,9,.88);
      box-shadow:0 16px 45px rgba(0,0,0,.22);
    }
    .client-top-brand {
      border:0;
      background:transparent;
      color:white;
      align-items:center;
      gap:10px;
      padding:0;
      cursor:pointer;
      text-align:left;
      font-family:inherit;
    }
    .client-top-brand .mini-mark {
      width:34px;
      height:38px;
      display:grid;
      place-items:center;
      clip-path:polygon(50% 0,94% 14%,88% 77%,50% 100%,12% 77%,6% 14%);
      background:linear-gradient(145deg,#ff2932,#9b0007);
      box-shadow:0 0 30px rgba(242,13,24,.22);
      color:#fff;
      font-weight:1000;
      font-size:11px;
      letter-spacing:-.04em;
    }
    .client-top-brand b {
      display:block;
      font-size:13px;
      line-height:1.05;
      letter-spacing:-.02em;
    }
    .client-top-brand small {
      display:block;
      color:#ff3e47;
      font-size:7px;
      letter-spacing:.22em;
      font-weight:950;
      margin-top:3px;
    }
    .portal.client-experience .client-top-brand { display:flex; }
    .portal.client-experience .client-premium-nav {
      display:flex;
      align-items:center;
      gap:4px;
      margin-left:auto;
      margin-right:16px;
    }
    .client-premium-nav button {
      position:relative;
      border:0;
      background:transparent;
      color:#b7bac1;
      min-height:46px;
      padding:0 13px;
      cursor:pointer;
      font:800 11px/1 inherit;
      letter-spacing:.025em;
    }
    .client-premium-nav button::after {
      content:"";
      position:absolute;
      left:13px;
      right:13px;
      bottom:3px;
      height:2px;
      border-radius:99px;
      background:transparent;
    }
    .client-premium-nav button:hover { color:#fff; }
    .client-premium-nav button.active { color:#fff; }
    .client-premium-nav button.active::after { background:var(--red); }
    .portal.client-experience .portal-project-switch { display:none !important; }
    .portal.client-experience .portal-content {
      width:min(1340px,calc(100% - clamp(28px,7vw,100px)));
      padding:30px 0 58px;
    }

    /* Client dashboard */
    .client-dashboard-hero {
      position:relative;
      min-height:340px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.10);
      border-radius:22px;
      background:#111319;
      box-shadow:0 30px 90px rgba(0,0,0,.32);
      margin-bottom:18px;
    }
    .client-hero-media {
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 70% 20%,rgba(242,13,24,.12),transparent 35%),
        linear-gradient(145deg,#171a20,#090a0d);
    }
    .client-hero-media img,
    .client-hero-media canvas {
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
    .client-dashboard-hero::after {
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(90deg,rgba(4,5,7,.97) 0%,rgba(4,5,7,.84) 34%,rgba(4,5,7,.25) 69%,rgba(4,5,7,.48) 100%),
        linear-gradient(0deg,rgba(4,5,7,.80),transparent 52%);
      pointer-events:none;
    }
    .client-hero-copy {
      position:relative;
      z-index:2;
      width:min(620px,82%);
      padding:clamp(30px,5vw,64px);
      display:flex;
      min-height:340px;
      flex-direction:column;
      justify-content:flex-end;
    }
    .client-hero-copy .eyebrow { margin-bottom:10px; }
    .client-hero-copy h1 {
      margin:0;
      font-size:clamp(38px,5vw,68px);
      line-height:.94;
      letter-spacing:-.055em;
      max-width:620px;
    }
    .client-hero-copy p {
      margin:13px 0 0;
      color:#d6d8dd;
      font-size:clamp(14px,1.5vw,18px);
      line-height:1.55;
      max-width:520px;
    }
    .client-hero-pills {
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:18px;
    }
    .client-hero-pill {
      border:1px solid rgba(255,255,255,.16);
      background:rgba(5,6,8,.55);
      backdrop-filter:blur(12px);
      border-radius:999px;
      padding:8px 11px;
      color:#d9dbe0;
      font-size:10px;
      font-weight:800;
    }

    .client-stat-grid {
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:11px;
      margin:14px 0 26px;
    }
    .client-stat-card {
      min-width:0;
      border:1px solid var(--client-line);
      border-radius:15px;
      padding:17px 18px;
      background:linear-gradient(145deg,#111319,#0c0e12);
      box-shadow:0 18px 50px rgba(0,0,0,.16);
      display:grid;
      grid-template-columns:38px 1fr;
      align-items:center;
      gap:12px;
    }
    .client-stat-icon {
      width:38px;
      height:38px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:rgba(242,13,24,.10);
      border:1px solid rgba(242,13,24,.22);
      color:#ff4a52;
      font-size:16px;
    }
    .client-stat-card small {
      display:block;
      color:#8f949e;
      font-size:8px;
      text-transform:uppercase;
      letter-spacing:.12em;
      font-weight:950;
    }
    .client-stat-card strong {
      display:block;
      color:#fff;
      font-size:20px;
      margin-top:2px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .premium-project-card {
      position:relative;
      min-height:260px;
      display:grid;
      grid-template-columns:minmax(0,1.35fr) minmax(310px,.65fr);
      overflow:hidden;
      border:1px solid var(--client-line);
      border-radius:20px;
      background:#101216;
      box-shadow:0 25px 70px rgba(0,0,0,.25);
    }
    .premium-project-visual {
      position:relative;
      min-height:260px;
      background:#15181d;
      overflow:hidden;
    }
    .premium-project-visual img,
    .premium-project-visual canvas {
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
    .premium-project-visual::after {
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(0deg,rgba(4,5,7,.88),transparent 58%);
      pointer-events:none;
    }
    .premium-project-overlay {
      position:absolute;
      z-index:2;
      left:24px;
      right:24px;
      bottom:22px;
    }
    .premium-project-overlay h2 {
      margin:5px 0 7px;
      font-size:clamp(25px,3vw,38px);
      letter-spacing:-.04em;
    }
    .premium-project-overlay .meta {
      color:#d1d3d8;
      font-size:11px;
      line-height:1.5;
    }
    .premium-project-panel {
      padding:24px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      background:
        radial-gradient(circle at 100% 0%,rgba(242,13,24,.08),transparent 40%),
        #101216;
    }
    .premium-project-status {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:13px;
    }
    .client-status-badge {
      display:inline-flex;
      align-items:center;
      gap:7px;
      border-radius:999px;
      border:1px solid rgba(242,13,24,.28);
      background:rgba(242,13,24,.09);
      color:#ff5a61;
      padding:7px 10px;
      font-size:8px;
      text-transform:uppercase;
      letter-spacing:.12em;
      font-weight:950;
    }
    .client-progress {
      margin:14px 0 16px;
    }
    .client-progress-track {
      height:6px;
      background:#23262d;
      border-radius:99px;
      overflow:hidden;
    }
    .client-progress-fill {
      height:100%;
      border-radius:inherit;
      background:linear-gradient(90deg,#bd0009,#ff1b25);
      box-shadow:0 0 18px rgba(242,13,24,.25);
    }
    .client-progress-label {
      display:flex;
      justify-content:space-between;
      gap:12px;
      color:#8f949e;
      font-size:9px;
      margin-top:7px;
    }
    .client-balance-line {
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:14px;
      border-top:1px solid rgba(255,255,255,.08);
      padding-top:17px;
    }
    .client-balance-line small {
      display:block;
      color:#8d929c;
      font-size:8px;
      letter-spacing:.12em;
      text-transform:uppercase;
      font-weight:900;
    }
    .client-balance-line strong {
      display:block;
      margin-top:3px;
      font-size:24px;
    }

    .client-dashboard-two {
      display:grid;
      grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
      gap:14px;
      margin-top:14px;
    }
    .client-premium-panel {
      border:1px solid var(--client-line);
      border-radius:17px;
      background:linear-gradient(145deg,#101216,#0c0e12);
      padding:21px;
      min-width:0;
    }
    .client-premium-panel h3 {
      margin:0;
      font-size:16px;
      letter-spacing:-.02em;
    }
    .client-panel-kicker {
      color:#ff434c;
      font-size:8px;
      font-weight:950;
      letter-spacing:.13em;
      text-transform:uppercase;
      margin-bottom:6px;
    }
    .client-next-title {
      font-size:23px;
      line-height:1.08;
      margin:12px 0 8px;
      letter-spacing:-.035em;
    }
    .client-next-copy {
      color:#aeb2ba;
      font-size:11px;
      line-height:1.65;
      margin:0;
    }

    .client-timeline {
      display:grid;
      grid-template-columns:repeat(11,minmax(0,1fr));
      margin-top:21px;
      gap:0;
      min-height:48px;
      position:relative;
      isolation:isolate;
    }
    .client-timeline-step {
      position:relative;
      min-width:0;
      height:48px;
      text-align:center;
      color:#656a74;
    }
    .client-timeline-step::before {
      content:"";
      position:absolute;
      top:10px;
      left:0;
      right:0;
      height:2px;
      background:#292c33;
      z-index:0;
    }
    .client-timeline-step:first-child::before { left:50%; }
    .client-timeline-step:last-child::before { right:50%; }
    .client-timeline-step.done::before,
    .client-timeline-step.current::before { background:#e20d17; }
    .client-timeline-dot {
      position:absolute;
      top:0;
      left:50%;
      transform:translateX(-50%);
      width:22px;
      height:22px;
      padding:0;
      border-radius:50%;
      display:grid;
      place-items:center;
      border:2px solid #373b44;
      background:#101216;
      color:#707681;
      z-index:2;
      font:900 8px/1 Inter,Arial,sans-serif;
      cursor:pointer;
      transition:border-color .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease;
    }
    .client-timeline-dot:hover,
    .client-timeline-dot:focus-visible {
      border-color:#777e89;
      color:#d5d7dc;
      outline:none;
      transform:translateX(-50%) scale(1.08);
    }
    .client-timeline-step.done .client-timeline-dot {
      border-color:#ed111b;
      background:#ed111b;
      color:#fff;
    }
    .client-timeline-step.current .client-timeline-dot {
      border-color:#ff2630;
      background:#121419;
      color:#ff4a52;
      box-shadow:0 0 0 5px rgba(242,13,24,.11),0 0 18px rgba(242,13,24,.16);
    }
    .client-timeline-hint {
      position:absolute;
      left:0;
      right:0;
      bottom:0;
      color:#777c86;
      font-size:8px;
      font-weight:750;
      letter-spacing:.03em;
      text-align:center;
      pointer-events:none;
    }
    .client-timeline-popover {
      position:absolute;
      left:50%;
      bottom:31px;
      width:min(220px,70vw);
      transform:translate(-50%,6px);
      padding:12px 13px 11px;
      border:1px solid rgba(255,255,255,.11);
      border-top:2px solid #ed111b;
      border-radius:12px;
      background:linear-gradient(145deg,#15171c,#0d0f13);
      box-shadow:0 18px 42px rgba(0,0,0,.46);
      text-align:left;
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transition:opacity .15s ease,transform .15s ease,visibility .15s ease;
      z-index:30;
    }
    .client-timeline-step:first-child .client-timeline-popover {
      left:0;
      transform:translate(0,6px);
    }
    .client-timeline-step:last-child .client-timeline-popover {
      left:auto;
      right:0;
      transform:translate(0,6px);
    }
    .client-timeline-step.open .client-timeline-popover,
    .client-timeline-step:focus-within .client-timeline-popover {
      opacity:1;
      visibility:visible;
      transform:translate(-50%,0);
      pointer-events:auto;
    }
    .client-timeline-step:first-child.open .client-timeline-popover,
    .client-timeline-step:first-child:focus-within .client-timeline-popover,
    .client-timeline-step:last-child.open .client-timeline-popover,
    .client-timeline-step:last-child:focus-within .client-timeline-popover {
      transform:translate(0,0);
    }
    @media (hover:hover) and (pointer:fine) {
      .client-timeline-step:hover .client-timeline-popover {
        opacity:1;
        visibility:visible;
        transform:translate(-50%,0);
      }
      .client-timeline-step:first-child:hover .client-timeline-popover,
      .client-timeline-step:last-child:hover .client-timeline-popover {
        transform:translate(0,0);
      }
    }
    .client-timeline-popover::after {
      content:"";
      position:absolute;
      left:50%;
      bottom:-6px;
      width:10px;
      height:10px;
      background:#0f1115;
      border-right:1px solid rgba(255,255,255,.11);
      border-bottom:1px solid rgba(255,255,255,.11);
      transform:translateX(-50%) rotate(45deg);
    }
    .client-timeline-step:first-child .client-timeline-popover::after { left:11px; transform:rotate(45deg); }
    .client-timeline-step:last-child .client-timeline-popover::after { left:auto; right:11px; transform:rotate(45deg); }
    .client-timeline-popover .step-kicker {
      color:#ff434c;
      font-size:7px;
      font-weight:950;
      letter-spacing:.14em;
      text-transform:uppercase;
    }
    .client-timeline-popover strong {
      display:block;
      margin-top:4px;
      color:#f2f3f5;
      font-size:12px;
      line-height:1.25;
    }
    .client-timeline-popover .step-status {
      display:inline-flex;
      align-items:center;
      margin-top:8px;
      padding:4px 7px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.09);
      background:#181b21;
      color:#a5aab3;
      font-size:7px;
      font-weight:900;
      letter-spacing:.07em;
      text-transform:uppercase;
    }
    .client-timeline-step.done .step-status,
    .client-timeline-step.current .step-status {
      border-color:rgba(242,13,24,.25);
      background:rgba(242,13,24,.08);
      color:#ff5a61;
    }
    .client-timeline-popover .step-time,
    .client-timeline-popover .step-note {
      display:block;
      margin-top:7px;
      color:#9ca1aa;
      font-size:8px;
      line-height:1.45;
    }

    .client-booking-card {
      margin-top:14px;
      border:1px solid rgba(255,255,255,.08);
      background:#0b0d10;
      border-radius:13px;
      padding:14px;
    }
    .client-booking-card b { display:block; font-size:13px; }
    .client-booking-card .meta { margin-top:5px; color:#999ea7; font-size:10px; line-height:1.55; }

    .client-home-section-head {
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:16px;
      margin:31px 0 13px;
    }
    .client-home-section-head h2 {
      margin:0;
      font-size:24px;
      letter-spacing:-.035em;
    }
    .client-home-section-head button {
      border:0;
      background:transparent;
      color:#ff4149;
      font-weight:850;
      font-size:10px;
      cursor:pointer;
    }

    .portal.client-experience .recent-grid {
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:12px;
    }
    .portal.client-experience .recent-card {
      position:relative;
      min-height:230px;
      border-radius:15px;
      background:#101216;
      cursor:pointer;
    }
    .portal.client-experience .recent-card img,
    .portal.client-experience .recent-card canvas {
      height:230px;
      width:100%;
      object-fit:cover;
    }
    .portal.client-experience .recent-card::after {
      content:"";
      position:absolute;
      inset:45% 0 0;
      background:linear-gradient(transparent,rgba(0,0,0,.90));
      pointer-events:none;
    }
    .portal.client-experience .recent-card .body {
      position:absolute;
      z-index:2;
      left:0;
      right:0;
      bottom:0;
      padding:18px;
    }
    .portal.client-experience .recent-card b { font-size:15px; }
    .portal.client-experience .recent-card span { color:#c2c5cb; }

    /* Project, docs and payment surfaces */
    .portal.client-experience .client-project-card,
    .portal.client-experience .invoice-card,
    .portal.client-experience .admin-panel,
    .portal.client-experience .account-card {
      border-color:var(--client-line);
      background:linear-gradient(145deg,#101216,#0c0e12);
      box-shadow:0 20px 55px rgba(0,0,0,.18);
    }
    .portal.client-experience .client-project-card { border-radius:17px; overflow:hidden; }
    .portal.client-experience .client-project-cover { min-height:220px; }
    .portal.client-experience .client-project-cover img,
    .portal.client-experience .client-project-cover canvas { min-height:220px; object-fit:cover; }
    .portal.client-experience .client-doc-card {
      border:1px solid rgba(255,255,255,.08);
      background:#0b0d10;
      border-radius:13px;
      padding:15px;
    }

    /* Gallery: varied sizes that lock together */
    .portal.client-experience .gallery-top {
      padding:10px 0 4px;
      align-items:end;
    }
    .portal.client-experience .gallery-top h1 {
      font-size:clamp(30px,4vw,48px);
      letter-spacing:-.045em;
    }
    .portal.client-experience .gallery-tabs {
      overflow:visible;
      flex-wrap:wrap;
      border:0;
      gap:7px;
      padding:0;
      margin:0 0 18px;
    }
    .portal.client-experience .gallery-tabs button {
      border:1px solid rgba(255,255,255,.10);
      border-radius:999px;
      background:#101216;
      padding:8px 12px;
      font-size:9px;
    }
    .portal.client-experience .gallery-tabs button.active {
      background:#e8111b;
      border-color:#e8111b;
      color:white;
    }
    .portal.client-experience .client-gallery.premium-masonry {
      display:grid;
      grid-template-columns:repeat(12,minmax(0,1fr));
      grid-auto-rows:52px;
      grid-auto-flow:dense;
      gap:8px;
      align-items:stretch;
    }
    .portal.client-experience .premium-masonry .gallery-item {
      aspect-ratio:auto;
      grid-column:span 3;
      grid-row:span 4;
      min-height:216px;
      border-radius:12px;
    }
    .portal.client-experience .premium-masonry .gallery-item.masonry-wide {
      grid-column:span 6;
      grid-row:span 4;
    }
    .portal.client-experience .premium-masonry .gallery-item.masonry-tall {
      grid-column:span 3;
      grid-row:span 6;
    }
    .portal.client-experience .premium-masonry .gallery-item.masonry-large {
      grid-column:span 6;
      grid-row:span 6;
    }
    .portal.client-experience .premium-masonry .gallery-item img,
    .portal.client-experience .premium-masonry .gallery-item canvas {
      width:100%;
      height:100%;
      object-fit:cover;
    }
    .portal.client-experience .gallery-item {
      border-color:rgba(255,255,255,.08);
      transition:transform .18s ease,border-color .18s ease;
    }
    .portal.client-experience .gallery-item:hover {
      transform:translateY(-2px);
      border-color:rgba(255,255,255,.22);
    }

    @media (max-width:1050px) {
      .portal.client-experience .client-premium-nav button { padding:0 8px; }
      .portal.client-experience .client-premium-nav button::after { left:8px; right:8px; }
      .client-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .premium-project-card { grid-template-columns:1fr; }
      .premium-project-visual { min-height:310px; }
      .client-dashboard-two { grid-template-columns:1fr; }
      .portal.client-experience .premium-masonry .gallery-item { grid-column:span 4; }
      .portal.client-experience .premium-masonry .gallery-item.masonry-wide { grid-column:span 8; }
      .portal.client-experience .premium-masonry .gallery-item.masonry-tall { grid-column:span 4; }
      .portal.client-experience .premium-masonry .gallery-item.masonry-large { grid-column:span 8; }
    }
    @media (max-width:760px) {
      .portal.client-experience .portal-top {
        min-height:61px;
        padding:0 16px;
      }
      .portal.client-experience .client-top-brand b,
      .portal.client-experience .client-top-brand small { display:none; }
      .portal.client-experience .client-premium-nav { display:none; }
      .portal.client-experience .portal-profile-name { display:none; }
      .portal.client-experience .portal-content {
        width:calc(100% - 24px);
        padding:12px 0 90px;
      }
      .client-dashboard-hero {
        min-height:340px;
        border-radius:17px;
      }
      .client-hero-copy {
        min-height:340px;
        width:100%;
        padding:25px 22px;
      }
      .client-dashboard-hero::after {
        background:linear-gradient(0deg,rgba(4,5,7,.96) 0%,rgba(4,5,7,.60) 62%,rgba(4,5,7,.18) 100%);
      }
      .client-hero-copy h1 { font-size:42px; }
      .client-stat-grid { grid-template-columns:1fr 1fr; gap:8px; }
      .client-stat-card { padding:13px; grid-template-columns:32px 1fr; gap:9px; }
      .client-stat-icon { width:32px; height:32px; }
      .client-stat-card strong { font-size:16px; }
      .premium-project-visual { min-height:245px; }
      .premium-project-panel { padding:19px; }
      .client-timeline {
        grid-template-columns:repeat(11,minmax(0,1fr));
        row-gap:0;
        min-height:52px;
      }
      .client-timeline-dot {
        width:20px;
        height:20px;
        font-size:7px;
      }
      .client-timeline-step::before { top:9px; }
      .client-timeline-popover {
        width:min(210px,76vw);
        bottom:30px;
      }
      .client-timeline-step:nth-child(-n+3) .client-timeline-popover {
        left:0;
        right:auto;
        transform:translate(0,6px);
      }
      .client-timeline-step:nth-last-child(-n+3) .client-timeline-popover {
        left:auto;
        right:0;
        transform:translate(0,6px);
      }
      .client-timeline-step:nth-child(-n+3).open .client-timeline-popover,
      .client-timeline-step:nth-child(-n+3):focus-within .client-timeline-popover,
      .client-timeline-step:nth-last-child(-n+3).open .client-timeline-popover,
      .client-timeline-step:nth-last-child(-n+3):focus-within .client-timeline-popover {
        transform:translate(0,0);
      }
      .client-timeline-step:nth-child(-n+3) .client-timeline-popover::after { left:9px; right:auto; transform:rotate(45deg); }
      .client-timeline-step:nth-last-child(-n+3) .client-timeline-popover::after { left:auto; right:9px; transform:rotate(45deg); }
      .client-timeline-hint { font-size:7px; }
      .portal.client-experience .recent-grid { grid-template-columns:1fr; }
      .portal.client-experience .recent-card,
      .portal.client-experience .recent-card img,
      .portal.client-experience .recent-card canvas { height:245px; }
      .portal.client-experience .gallery-actions { justify-content:flex-start; margin-top:13px; }
      .portal.client-experience .client-gallery.premium-masonry {
        grid-template-columns:repeat(6,minmax(0,1fr));
        grid-auto-rows:42px;
        gap:6px;
      }
      .portal.client-experience .premium-masonry .gallery-item {
        grid-column:span 3;
        grid-row:span 4;
        min-height:174px;
      }
      .portal.client-experience .premium-masonry .gallery-item.masonry-wide {
        grid-column:span 6;
        grid-row:span 4;
      }
      .portal.client-experience .premium-masonry .gallery-item.masonry-tall {
        grid-column:span 3;
        grid-row:span 6;
      }
      .portal.client-experience .premium-masonry .gallery-item.masonry-large {
        grid-column:span 6;
        grid-row:span 6;
      }
      .portal.client-experience .gallery-item .caption { left:9px; right:9px; bottom:8px; }
      .portal.client-experience .portal-mobile-nav {
        background:rgba(6,7,9,.94);
        backdrop-filter:blur(18px);
        border-top:1px solid rgba(255,255,255,.08);
      }
    }
    @media (max-width:420px) {
      .client-stat-grid { grid-template-columns:1fr 1fr; }
      .client-stat-card { display:block; }
      .client-stat-icon { margin-bottom:8px; }
      .portal.client-experience .premium-masonry .gallery-item,
      .portal.client-experience .premium-masonry .gallery-item.masonry-tall {
        grid-column:span 3;
      }
    }


    /* ===== v22.2 OPERATIONS FOUNDATION + MOBILE FIXES (includes v21.1 Email Center) ===== */
    #adminProjectProfileModal { z-index:6020; }
    #adminQuoteDetailModal, #adminAgreementDetailModal { z-index:6040; }
    .crm-profile-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:10px; }
    .crm-project-hub { display:grid; gap:12px; }
    .crm-project-box { border:1px solid rgba(255,255,255,.1); border-radius:14px; background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015)); overflow:hidden; }
    .crm-project-box-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:14px 15px; border-bottom:1px solid rgba(255,255,255,.08); }
    .crm-project-title-btn { appearance:none; border:0; padding:0; background:none; color:#fff; font:inherit; font-weight:900; text-align:left; cursor:pointer; letter-spacing:.01em; }
    .crm-project-title-btn:hover { color:#ff6b71; }
    .crm-project-box-body { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:12px; }
    .crm-project-doc { min-width:0; border:1px solid rgba(255,255,255,.08); border-radius:11px; background:rgba(0,0,0,.16); padding:11px; }
    .crm-project-doc-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
    .crm-project-doc-head b { font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:#d9dbe0; }
    .crm-doc-link { width:100%; appearance:none; border:0; background:transparent; color:inherit; text-align:left; padding:8px 0; cursor:pointer; border-top:1px solid rgba(255,255,255,.06); }
    .crm-doc-link:first-of-type { border-top:0; padding-top:0; }
    .crm-doc-link strong { display:block; color:#fff; font-size:11px; }
    .crm-doc-link span { display:block; color:var(--muted); font-size:9px; margin-top:3px; line-height:1.45; }
    .crm-empty-slot { color:#70747c; font-size:10px; padding:5px 0 2px; }
    .crm-record-vault { border:1px solid rgba(255,255,255,.09); border-radius:12px; background:rgba(255,255,255,.02); padding:11px 12px; }
    .crm-record-vault summary { cursor:pointer; color:#d9dbe0; font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.1em; }
    .crm-count-badge { display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:rgba(255,255,255,.08); margin-left:6px; font-size:9px; }
    .crm-unassigned-record { display:grid; grid-template-columns:minmax(0,1fr) minmax(160px,230px) auto; gap:8px; align-items:center; }
    .crm-detail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
    .crm-detail-stat { border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:11px; background:rgba(255,255,255,.025); }
    .crm-detail-stat small { display:block; color:#858992; font-size:8px; text-transform:uppercase; letter-spacing:.1em; margin-bottom:5px; }
    .crm-detail-stat strong { color:#fff; font-size:12px; word-break:break-word; }
    .crm-detail-section { border-top:1px solid rgba(255,255,255,.08); padding-top:14px; margin-top:14px; }
    .crm-detail-section h3 { margin:0 0 9px; font-size:11px; text-transform:uppercase; letter-spacing:.1em; }
    .crm-detail-copy { white-space:pre-wrap; color:#d0d2d7; font-size:11px; line-height:1.65; }
    .crm-project-actions { display:flex; gap:8px; flex-wrap:wrap; padding:0 12px 12px; }
    @media (max-width:700px) {
      .crm-project-box-body { grid-template-columns:1fr; }
      .crm-unassigned-record { grid-template-columns:1fr; }
      .crm-detail-grid { grid-template-columns:1fr 1fr; }
      .crm-project-box-head { align-items:flex-start; }
    }
  
/* Firebase public-site migration additions */
.site-nav .brand img{width:auto;height:46px;max-width:290px;object-fit:contain}.login-link-anchor{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}.nav-login.login-link-anchor{min-height:42px;border:1px solid var(--red);border-radius:7px;background:rgba(242,13,24,.04);padding:0 18px;color:#fff;font-weight:900;font-size:11px;text-transform:uppercase;letter-spacing:.06em}.mobile-drawer .login-link-anchor{width:100%;min-height:44px;border:1px solid var(--red);border-radius:7px;background:rgba(242,13,24,.04);color:#fff;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.footer-service-area{width:100%;color:#777b84;font-size:10px;margin-top:8px;letter-spacing:.02em}.migration-service-area{margin-top:18px;color:#b7bac2;font-size:12px;line-height:1.7}.portal-transition-card{width:min(720px,calc(100% - 36px));margin:160px auto 80px;padding:44px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,#111318,#090a0d);text-align:center}.portal-transition-card h1{font-size:clamp(34px,7vw,64px);margin:8px 0 16px}.portal-transition-card p{color:#a9adb5;line-height:1.7}.portal-transition-card .btn{margin-top:18px}.portal-transition-kicker{text-transform:uppercase;letter-spacing:.2em;color:var(--red);font-weight:900;font-size:11px}
@media(max-width:700px){.site-nav .brand img{height:34px;max-width:210px}.portal-transition-card{margin-top:110px;padding:30px 22px}}


/* ===== v26.5.3 iOS PWA GLOBAL TOP SAFE AREA =====
   Public pages use their own fixed navigation outside portal.html. With
   viewport-fit=cover, iOS standalone mode can place that 66px navigation
   under the status bar / Dynamic Island. Keep the bar background full-bleed
   while placing all public navigation controls below the safe area. */
@media (max-width:699px) {
  .site-nav {
    height:calc(66px + env(safe-area-inset-top, 0px));
    padding-top:env(safe-area-inset-top, 0px);
  }
  .site-nav .inner {
    height:66px;
  }
  .mobile-drawer {
    top:calc(66px + env(safe-area-inset-top, 0px));
    left:0;
    right:0;
  }
  .hero {
    min-height:calc(760px + env(safe-area-inset-top, 0px));
    padding-top:calc(66px + env(safe-area-inset-top, 0px));
  }
  .page-hero {
    padding-top:calc(118px + env(safe-area-inset-top, 0px));
  }
}