/* =========================
       1) THEME + RESET
       ========================= */
    :root {
      --bg: #090a0f;
      --bg-soft: #10121a;
      --surface: rgba(20, 22, 31, .82);
      --surface-solid: #151821;
      --surface-2: #1d2130;
      --text: #f7f4ea;
      --muted: #aaaebc;
      --line: rgba(255,255,255,.11);
      --gold: #f6b73c;
      --gold-2: #ffdc86;
      --orange: #ff7a36;
      --magenta: #de4cff;
      --cyan: #55d6ff;
      --success: #55d98d;
      --danger: #ff6b72;
      --shadow: 0 18px 60px rgba(0,0,0,.28);
      --radius: 22px;
      --radius-sm: 14px;
      --nav-h: 74px;
      --max: 1220px;
    }

    html[data-theme="light"] {
      --bg: #f7f5ef;
      --bg-soft: #fffaf1;
      --surface: rgba(255,255,255,.84);
      --surface-solid: #ffffff;
      --surface-2: #f2eee5;
      --text: #16130f;
      --muted: #625e57;
      --line: rgba(20,18,14,.12);
      --shadow: 0 18px 60px rgba(80,57,15,.12);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background:
        radial-gradient(circle at 15% 0%, rgba(246,183,60,.12), transparent 30%),
        radial-gradient(circle at 85% 15%, rgba(222,76,255,.08), transparent 26%),
        var(--bg);
      color: var(--text);
      line-height: 1.6;
      overflow-x: hidden;
    }

    img { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    button, input, select, textarea { font: inherit; }
    button { cursor: pointer; }
    section { scroll-margin-top: calc(var(--nav-h) + 14px); }

    .container { width: min(var(--max), calc(100% - 32px)); margin-inline: auto; }
    .section { padding: 98px 0; position: relative; }
    .section.alt { background: linear-gradient(180deg, transparent, rgba(246,183,60,.025), transparent); }
    .eyebrow { color: var(--gold); text-transform: uppercase; letter-spacing: .2em; font-size: .78rem; font-weight: 800; }
    .section-title { margin: .5rem 0 .8rem; font-size: clamp(2rem, 5vw, 4.2rem); line-height: .98; letter-spacing: -.045em; }
    .section-lead { max-width: 730px; color: var(--muted); font-size: 1.04rem; margin-bottom: 2rem; }
    .gold-text { background: linear-gradient(90deg, var(--gold-2), var(--gold), var(--orange)); -webkit-background-clip: text; background-clip: text; color: transparent; }

    .glass {
      background: var(--surface);
      backdrop-filter: blur(18px);
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
    }

    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
      min-height: 48px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line);
      color: var(--text); background: var(--surface); font-weight: 800;
      transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
    }
    .btn:hover { transform: translateY(-2px); border-color: rgba(246,183,60,.55); box-shadow: 0 12px 35px rgba(246,183,60,.13); }
    .btn.primary { background: linear-gradient(120deg, var(--gold-2), var(--gold), var(--orange)); color: #201204; border-color: transparent; }
    .btn.small { min-height: 40px; padding: 0 15px; font-size: .9rem; }

    /* =========================
       2) NAVIGATION
       ========================= */
    .topbar {
      position: fixed; inset: 0 0 auto; height: var(--nav-h); z-index: 50;
      border-bottom: 1px solid var(--line);
      background: color-mix(in srgb, var(--bg) 76%, transparent);
      backdrop-filter: blur(18px);
    }
    .nav { height: 100%; display: flex; align-items: center; gap: 18px; }
    .nav-brand { display:flex; align-items:center; gap:10px; margin-right:auto; font-weight:900; letter-spacing:.02em; }
    .nav-brand img { width: 172px; height: 58px; object-fit: contain; }
    .nav-brand span { display:none; }
    .nav-links { display:flex; align-items:center; gap:18px; font-size:.88rem; color:var(--muted); }
    .nav-links a { transition: color .2s ease; white-space: nowrap; }
    .nav-links a:hover, .nav-links a.active { color: var(--gold); }
    .nav-actions { display:flex; gap:8px; align-items:center; }
    .icon-btn { width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--text); }
    .menu-btn { display:none; }

    /* =========================
       3) HERO SLIDESHOW
       ========================= */
    .hero { min-height: 100svh; display:grid; place-items:center; position:relative; overflow:hidden; padding-top: var(--nav-h); }
    .slides, .slide { position:absolute; inset:0; }
    .slide {
      opacity:0; transition: opacity 1.1s ease, transform 6s ease;
      background-size:cover; background-position:center; transform:scale(1.03);
    }
    .slide.active { opacity:1; transform:scale(1.09); }
    .slide::after {
      content:""; position:absolute; inset:0;
      background: linear-gradient(90deg, rgba(5,5,8,.82), rgba(5,5,8,.25) 55%, rgba(5,5,8,.64)),
                  linear-gradient(0deg, var(--bg), transparent 40%);
    }
    .hero-content { position:relative; z-index:2; width:min(960px, calc(100% - 34px)); text-align:center; padding:50px 0; }
    .hero-logo { width:min(860px, 94vw); height:260px; object-fit:contain; margin:0 auto 8px; filter: drop-shadow(0 16px 38px rgba(0,0,0,.42)); }
    .hero-emblem { width:88px; height:88px; object-fit:contain; margin:0 auto 16px; opacity:.95; filter: drop-shadow(0 10px 28px rgba(0,0,0,.42)); }
    .hero .sub { font-size:clamp(1rem, 2vw, 1.35rem); color:#ece8df; letter-spacing:.25em; text-transform:uppercase; font-weight:700; }
    .hero .buttons { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:26px; }
    .hero-badges { display:flex; justify-content:center; flex-wrap:wrap; gap:9px; margin-top:26px; }
    .hero-badge { padding:7px 12px; border-radius:999px; background:rgba(7,7,9,.48); border:1px solid rgba(255,255,255,.18); color:#f2eee6; font-size:.82rem; }
    .hero-dots { position:absolute; z-index:3; bottom:28px; display:flex; gap:9px; }
    .hero-dot { width:9px; height:9px; border:0; padding:0; border-radius:50%; background:rgba(255,255,255,.38); }
    .hero-dot.active { background:var(--gold); transform:scale(1.35); }

    /* =========================
       4) ABOUT + COMMON CARDS
       ========================= */
    .about-grid { display:grid; grid-template-columns: 1.05fr .95fr; gap:40px; align-items:center; }
    .about-visual { min-height:500px; border-radius:var(--radius); position:relative; overflow:hidden; background:var(--surface-2) center/cover no-repeat; }
    .about-visual::before { content:""; position:absolute; inset:12% 6% 10% auto; width:min(34%, 220px); background:url('../assets/images/brand/trident-serpent-emblem.png') center/contain no-repeat; opacity:.28; filter:drop-shadow(0 8px 30px rgba(0,0,0,.4)); z-index:1; }
    .about-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, rgba(0,0,0,.75)); }
    .about-card { border-radius:var(--radius); padding:28px; }
    .feature-row { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:25px; }
    .mini-stat { padding:17px; border-radius:16px; border:1px solid var(--line); background:var(--surface-2); }
    .mini-stat b { display:block; color:var(--gold); font-size:1.05rem; }
    .mini-stat span { color:var(--muted); font-size:.83rem; }

    .services-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
    .service-card { border-radius:var(--radius); overflow:hidden; transition: transform .3s ease, border-color .3s ease; }
    .service-card:hover { transform:translateY(-7px); border-color:rgba(246,183,60,.45); }
    .service-image { height:210px; background-size:cover; background-position:center; position:relative; }
    .service-image::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent, rgba(0,0,0,.72)); }
    .service-body { padding:22px; }
    .service-icon { width:46px; height:46px; display:grid; place-items:center; border-radius:14px; background:rgba(246,183,60,.12); border:1px solid rgba(246,183,60,.25); margin-bottom:15px; font-size:1.3rem; }
    .service-card h3 { margin:0 0 8px; font-size:1.18rem; }
    .service-card ul { margin:12px 0 0; padding:0; list-style:none; color:var(--muted); font-size:.9rem; }
    .service-card li { padding:5px 0; display:flex; gap:8px; }
    .service-card li::before { content:"✦"; color:var(--gold); }

    /* =========================
       5) BTS U1 U2 U3
       ========================= */
    .mode-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
    .mode-card { padding:28px; border-radius:var(--radius); position:relative; overflow:hidden; }
    .mode-card::before { content:""; position:absolute; width:180px; height:180px; border-radius:50%; background:var(--glow); filter:blur(65px); top:-90px; right:-60px; opacity:.4; }
    .mode-tag { display:inline-flex; align-items:center; justify-content:center; min-width:62px; height:38px; padding:0 15px; border-radius:999px; font-weight:900; border:1px solid var(--line); margin-bottom:22px; }
    .mode-card h3 { font-size:1.55rem; margin:0 0 8px; }
    .mode-card p, .tip-list { color:var(--muted); }
    .tip-list { padding-left:1.1rem; margin-bottom:0; }

    /* =========================
       6) PORTFOLIO + LIGHTBOX
       ========================= */
    .filters { display:flex; gap:9px; flex-wrap:wrap; margin:25px 0 26px; }
    .filter-btn { border:1px solid var(--line); background:var(--surface); color:var(--muted); border-radius:999px; padding:9px 15px; font-weight:700; }
    .filter-btn.active { color:#201204; background:linear-gradient(110deg,var(--gold-2),var(--gold)); border-color:transparent; }
    .gallery { display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:115px; gap:12px; }
    .gallery-item { border:0; padding:0; border-radius:18px; overflow:hidden; position:relative; background:var(--surface-2); min-height:220px; }
    .gallery-item:nth-child(1), .gallery-item:nth-child(6) { grid-column:span 5; grid-row:span 3; }
    .gallery-item:nth-child(2), .gallery-item:nth-child(5) { grid-column:span 3; grid-row:span 3; }
    .gallery-item:nth-child(3), .gallery-item:nth-child(4) { grid-column:span 4; grid-row:span 3; }
    .gallery-item:nth-child(n+7) { grid-column:span 4; grid-row:span 3; }
    .gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
    .gallery-item:hover img { transform:scale(1.06); }
    .gallery-caption { position:absolute; inset:auto 0 0; padding:35px 16px 14px; background:linear-gradient(transparent,rgba(0,0,0,.78)); color:white; text-align:left; opacity:0; transition:opacity .25s ease; }
    .gallery-item:hover .gallery-caption { opacity:1; }
    .gallery-item.hidden { display:none; }

    .lightbox { position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.92); display:none; align-items:center; justify-content:center; padding:24px; }
    .lightbox.open { display:flex; }
    .lightbox img { max-width:min(1200px,90vw); max-height:82vh; border-radius:16px; box-shadow:0 30px 80px rgba(0,0,0,.5); }
    .lb-close,.lb-prev,.lb-next { position:absolute; border:1px solid rgba(255,255,255,.2); background:rgba(0,0,0,.42); color:white; border-radius:50%; width:48px; height:48px; font-size:1.35rem; }
    .lb-close { top:22px; right:22px; }
    .lb-prev { left:22px; } .lb-next { right:22px; }

    /* =========================
       7) BEFORE / AFTER
       ========================= */
    .compare-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
    .compare-card { border-radius:var(--radius); padding:18px; }
    .compare-card h3 { margin:3px 4px 14px; }
    .compare { position:relative; overflow:hidden; border-radius:18px; aspect-ratio: 16/10; background:#222; }
    .compare > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
    .compare .after { clip-path:inset(0 50% 0 0); }
    .compare-line { position:absolute; top:0; bottom:0; left:50%; width:2px; background:white; box-shadow:0 0 0 1px rgba(0,0,0,.25); pointer-events:none; }
    .compare-knob { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:46px; height:46px; border-radius:50%; background:white; color:#111; display:grid; place-items:center; font-weight:900; pointer-events:none; }
    .compare-range { width:100%; margin-top:14px; accent-color:var(--gold); }
    .compare-labels { display:flex; justify-content:space-between; color:var(--muted); font-size:.83rem; margin-top:5px; }

    /* =========================
       8) CLIENT PORTAL
       ========================= */
    .portal-shell { display:grid; grid-template-columns:.85fr 1.15fr; gap:22px; }
    .portal-card { padding:28px; border-radius:var(--radius); }
    .portal-preview { min-height:360px; border-radius:var(--radius); overflow:hidden; position:relative; background:var(--surface-2) center/cover no-repeat; }
    .portal-preview::after { content:"Private Client Gallery"; position:absolute; inset:0; display:grid; place-items:center; background:rgba(5,5,9,.58); backdrop-filter:blur(3px); color:white; font-size:clamp(1.5rem,4vw,3rem); font-weight:900; letter-spacing:-.03em; }
    .portal-gallery { display:none; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:18px; }
    .portal-gallery.open { display:grid; }
    .portal-gallery img { aspect-ratio:1/1; object-fit:cover; border-radius:12px; }

    /* =========================
       9) FORMS + BOOKING CALENDAR
       ========================= */
    .booking-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:22px; align-items:start; }
    .calendar-card, .form-card { border-radius:var(--radius); padding:24px; }
    .calendar-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
    .calendar-head h3 { margin:0; }
    .cal-nav { display:flex; gap:7px; }
    .cal-nav button { width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--surface-2); color:var(--text); }
    .weekday, .days { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
    .weekday div { text-align:center; color:var(--muted); font-size:.74rem; padding:4px 0; }
    .day { aspect-ratio:1; border-radius:11px; border:1px solid transparent; background:transparent; color:var(--text); display:grid; place-items:center; }
    .day:hover:not(:disabled) { border-color:rgba(246,183,60,.4); background:rgba(246,183,60,.08); }
    .day.today { border-color:var(--gold); }
    .day.selected { background:var(--gold); color:#211306; font-weight:900; }
    .day:disabled { opacity:.28; cursor:not-allowed; }
    .day.blank { visibility:hidden; }
    .selected-date { margin-top:14px; color:var(--muted); font-size:.9rem; }

    .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
    .field { display:flex; flex-direction:column; gap:6px; }
    .field.full { grid-column:1/-1; }
    label { font-size:.84rem; font-weight:750; }
    input, select, textarea {
      width:100%; color:var(--text); background:var(--surface-2); border:1px solid var(--line); border-radius:13px; padding:12px 13px; outline:none;
      transition:border-color .2s ease, box-shadow .2s ease;
    }
    input:focus, select:focus, textarea:focus { border-color:rgba(246,183,60,.65); box-shadow:0 0 0 4px rgba(246,183,60,.1); }
    textarea { min-height:120px; resize:vertical; }
    .error { color:var(--danger); font-size:.78rem; min-height:1em; }
    .form-success { display:none; margin-top:14px; padding:12px 14px; border-radius:12px; background:rgba(85,217,141,.1); color:var(--success); border:1px solid rgba(85,217,141,.25); }

    /* =========================
       10) PAYMENT + CONTACT
       ========================= */
    .payment-grid { display:grid; grid-template-columns:.75fr 1.25fr; gap:24px; align-items:center; }
    .qr { border-radius:var(--radius); min-height:390px; display:grid; place-items:center; padding:28px; }
    .payment-qr { width:min(310px,82%); aspect-ratio:1; object-fit:contain; border-radius:20px; background:white; padding:12px; box-shadow:var(--shadow); }
    .payment-copy { padding:20px; }
    .steps { display:grid; gap:12px; margin-top:20px; }
    .step { display:grid; grid-template-columns:40px 1fr; gap:13px; align-items:start; }
    .step-num { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:rgba(246,183,60,.13); color:var(--gold); font-weight:900; border:1px solid rgba(246,183,60,.25); }

    .contact-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:30px; align-items:start; }
    .socials { display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
    .social { width:45px; height:45px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line); background:var(--surface); font-weight:900; }
    footer { padding:32px 0; border-top:1px solid var(--line); color:var(--muted); }
    .footer-row { display:flex; justify-content:space-between; gap:20px; align-items:center; flex-wrap:wrap; }
    .footer-brand { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
    .footer-main-logo { width:min(330px, 72vw); height:auto; object-fit:contain; }
    .footer-emblem { width:74px; height:74px; object-fit:contain; }
    .footer-copy { display:flex; flex-direction:column; gap:4px; }

    /* Reveal animation */
    .reveal { opacity:0; transform:translateY(26px); transition:opacity .75s ease, transform .75s ease; }
    .reveal.visible { opacity:1; transform:none; }

    @media (max-width: 1050px) {
      .nav-links { display:none; position:absolute; left:16px; right:16px; top:calc(var(--nav-h) - 3px); flex-direction:column; align-items:stretch; gap:0; padding:12px; border-radius:18px; background:var(--surface-solid); border:1px solid var(--line); box-shadow:var(--shadow); }
      .nav-links.open { display:flex; }
      .nav-links a { padding:10px 12px; border-radius:10px; }
      .nav-links a:hover { background:var(--surface-2); }
      .menu-btn { display:inline-grid; place-items:center; }
      .services-grid { grid-template-columns:repeat(2,1fr); }
      .gallery-item, .gallery-item:nth-child(n) { grid-column:span 6; grid-row:span 3; }
    }

    @media (max-width: 780px) {
      .section { padding:78px 0; }
      .about-grid, .portal-shell, .booking-grid, .payment-grid, .contact-grid, .compare-grid { grid-template-columns:1fr; }
      .about-visual { min-height:360px; order:-1; }
      .mode-grid { grid-template-columns:1fr; }
      .feature-row { grid-template-columns:1fr; }
      .form-grid { grid-template-columns:1fr; }
      .field.full { grid-column:auto; }
      .hero-logo { height:190px; }
      .hero-emblem { width:72px; height:72px; margin-bottom:14px; }
    }

    @media (max-width: 580px) {
      :root { --nav-h: 66px; }
      .container { width:min(var(--max), calc(100% - 22px)); }
      .nav-brand img { width:132px; height:44px; }
      .services-grid { grid-template-columns:1fr; }
      .gallery { display:grid; grid-template-columns:1fr; grid-auto-rows:auto; }
      .gallery-item, .gallery-item:nth-child(n) { grid-column:auto; grid-row:auto; aspect-ratio:4/3; }
      .gallery-caption { opacity:1; }
      .hero .sub { letter-spacing:.13em; }
      .lb-prev { left:8px; } .lb-next { right:8px; }
      .calendar-card,.form-card,.portal-card { padding:18px; }
    }
/* =========================
   13) SUNIDMI DIGITAL STUDIO — AI & SOFTWARE PILLAR
   ========================= */
.ai-section {
  background:
    radial-gradient(circle at 82% 16%, rgba(85,214,255,.08), transparent 27%),
    radial-gradient(circle at 18% 75%, rgba(246,183,60,.07), transparent 28%),
    linear-gradient(180deg, transparent, rgba(12,18,30,.28), transparent);
}
.ai-service-card { position:relative; isolation:isolate; }
.ai-service-card::after {
  content:""; position:absolute; inset:0; border-radius:var(--radius); pointer-events:none;
  background:linear-gradient(135deg, rgba(246,183,60,.08), transparent 36%, rgba(85,214,255,.06));
  z-index:-1;
}
.ai-service-card .service-icon { color:var(--gold); font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-weight:900; }
.ai-service-card .service-image { background-color:#0c111d; }

.digital-workflow {
  margin-top:30px; border:1px solid var(--line); border-radius:var(--radius); padding:28px;
  background:linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--surface-solid) 88%, rgba(85,214,255,.1)));
  box-shadow:var(--shadow);
}
.workflow-intro { display:grid; grid-template-columns:.45fr 1fr 1.2fr; gap:24px; align-items:center; margin-bottom:24px; }
.workflow-intro h3 { margin:0; font-size:clamp(1.25rem,2.3vw,2rem); }
.workflow-intro p { margin:0; color:var(--muted); }
.workflow-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.workflow-step {
  min-height:180px; padding:20px; border-radius:18px; border:1px solid var(--line); background:var(--surface-2);
  display:flex; flex-direction:column; gap:7px; position:relative; overflow:hidden;
}
.workflow-step::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:linear-gradient(var(--gold),var(--cyan)); }
.workflow-step span { color:var(--gold); font-weight:900; font-size:.8rem; letter-spacing:.12em; }
.workflow-step strong { font-size:1.25rem; }
.workflow-step small { color:var(--muted); font-size:.88rem; line-height:1.5; }

@media (max-width: 960px) {
  .workflow-intro { grid-template-columns:1fr; gap:8px; }
  .workflow-steps { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 580px) {
  .workflow-steps { grid-template-columns:1fr; }
  .digital-workflow { padding:18px; }
}

/* ================================================================
   50 / 50 DIGITAL STUDIO BALANCE
   Photography and AI/Software are intentionally equal visual pillars.
   ================================================================ */
.pillar-grid,
.process-dual-grid,
.transformation-dual-grid,
.delivery-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
}

.pillar-card { border-radius:var(--radius); overflow:hidden; }
.pillar-visual { min-height:290px; background:center/cover no-repeat; position:relative; }
.pillar-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.6)); }
.pillar-content { padding:28px; }
.pillar-content h3 { margin:.35rem 0 .75rem; font-size:clamp(1.5rem,2.3vw,2.25rem); }
.pillar-content p { color:var(--muted); min-height:5.2em; }
.pillar-kicker { display:inline-block; color:var(--gold); text-transform:uppercase; letter-spacing:.13em; font-size:.76rem; font-weight:900; }

.process-pillar { border-radius:var(--radius); padding:28px; }
.process-heading { min-height:94px; border-bottom:1px solid var(--line); margin-bottom:18px; }
.process-heading h3 { margin:.4rem 0 1rem; font-size:clamp(1.35rem,2.3vw,2rem); }
.process-stack { display:grid; gap:12px; }
.process-item { display:grid; grid-template-columns:56px 1fr; gap:14px; align-items:start; padding:15px; border-radius:16px; background:var(--surface-2); border:1px solid var(--line); }
.process-item > span { display:grid; place-items:center; min-height:44px; border-radius:12px; background:rgba(246,183,60,.12); color:var(--gold); font-weight:900; }
.process-item strong,.process-item small { display:block; }
.process-item small { color:var(--muted); margin-top:4px; line-height:1.45; }

.balanced-gallery .gallery-item:nth-child(n) { grid-column:span 4; grid-row:span 3; }

.transformation-column { display:grid; gap:18px; align-content:start; }
.transformation-column > .pillar-kicker { margin:0 4px -4px; }
.digital-before-after { border-radius:var(--radius); padding:22px; display:grid; grid-template-columns:1fr 44px 1fr; gap:14px; align-items:stretch; min-height:210px; }
.digital-state { padding:18px; border-radius:16px; background:var(--surface-2); border:1px solid var(--line); display:flex; flex-direction:column; justify-content:center; }
.digital-state > span { color:var(--muted); font-size:.72rem; letter-spacing:.14em; font-weight:900; }
.digital-state strong { font-size:1.15rem; margin:.4rem 0; }
.digital-state small { color:var(--muted); line-height:1.5; }
.digital-state.after-state { border-color:rgba(246,183,60,.35); background:linear-gradient(145deg,rgba(246,183,60,.09),var(--surface-2)); }
.transform-arrow { display:grid; place-items:center; color:var(--gold); font-size:1.8rem; font-weight:900; }

.delivery-grid > * { min-height:100%; }
.project-workspace { padding:28px; border-radius:var(--radius); }
.project-workspace > p { color:var(--muted); }
.workspace-preview { margin:20px 0 14px; padding:20px; display:flex; justify-content:space-between; gap:14px; align-items:center; border-radius:16px; background:linear-gradient(135deg,rgba(85,214,255,.1),rgba(222,76,255,.08)); border:1px solid var(--line); }
.workspace-preview small,.workspace-preview strong { display:block; }
.workspace-preview small { color:var(--muted); letter-spacing:.12em; font-weight:900; }
.workspace-preview strong { margin-top:5px; }
.workspace-status { padding:7px 10px; border-radius:999px; color:var(--gold); background:rgba(246,183,60,.1); border:1px solid rgba(246,183,60,.22); font-size:.76rem; font-weight:900; white-space:nowrap; }
.workspace-modules { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin-bottom:20px; }
.workspace-modules span { padding:11px 12px; border-radius:12px; background:var(--surface-2); border:1px solid var(--line); color:var(--muted); font-size:.84rem; }

#photography-services,
#ai-services { position:relative; }
#photography-services::before,
#ai-services::before { content:"50%"; position:absolute; top:28px; right:max(16px,calc((100vw - var(--max))/2)); font-size:clamp(2.6rem,8vw,7rem); font-weight:950; line-height:1; color:rgba(246,183,60,.045); pointer-events:none; }

@media (max-width: 900px) {
  .pillar-grid,.process-dual-grid,.transformation-dual-grid,.delivery-grid { grid-template-columns:1fr; }
  .pillar-content p { min-height:0; }
}

@media (max-width: 580px) {
  .digital-before-after { grid-template-columns:1fr; }
  .transform-arrow { transform:rotate(90deg); min-height:30px; }
  .workspace-preview { flex-direction:column; align-items:flex-start; }
  .workspace-modules { grid-template-columns:1fr; }
}


/* Phase 1 — Production Contact */
.contact-honeypot { position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; clip:rect(1px,1px,1px,1px) !important; white-space:nowrap !important; }
.optional,.field-help { color:var(--muted); font-size:.84rem; font-weight:500; }
.contact-route { margin:14px 0 16px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; color:var(--muted); background:rgba(255,255,255,.025); font-size:.9rem; }
.form-status { display:none; margin-top:14px; padding:12px 14px; border-radius:12px; border:1px solid var(--line); color:var(--muted); background:rgba(255,255,255,.025); }
.form-status.error { color:#ffb2b2; border-color:rgba(255,100,100,.3); background:rgba(255,90,90,.08); }
#contactSubmit[disabled] { opacity:.65; cursor:wait; }
.contact-email-fallback a { color:var(--gold); text-decoration:none; }
.contact-email-fallback a:hover { text-decoration:underline; }


/* =========================
   Phase 2 — Booking & Project Intake
   ========================= */
.booking-calendar-note { margin-top:14px; color:var(--muted); font-size:.86rem; line-height:1.5; }
.booking-path-panel { margin-top:18px; padding:18px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.025); }
.booking-path-panel[hidden] { display:none !important; }
.booking-path-title { display:flex; align-items:center; gap:10px; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.booking-path-title span { color:var(--gold); font-size:.76rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.booking-path-title strong { font-size:1rem; }
.booking-general-notes { margin-top:18px; }
#bookingSubmit[disabled] { opacity:.65; cursor:wait; }
.selected-date.date-error { color:#ffb2b2; border-color:rgba(255,100,100,.35); background:rgba(255,90,90,.08); }
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color:rgba(255,100,100,.55); box-shadow:0 0 0 1px rgba(255,100,100,.12); }
#bookingSuccess strong { color:inherit; }


/* ==========================================================
   Phase 2 v5 — Unified Premium Booking UI
   Visual-only polish. Existing form IDs and booking logic remain.
   ========================================================== */
.booking-polish-section { overflow:visible; }
.booking-polish-intro { text-align:center; max-width:980px; margin:0 auto 26px; }
.booking-polish-intro .section-title { margin-bottom:10px; }
.booking-polish-intro .section-lead { margin-left:auto; margin-right:auto; max-width:850px; }

.booking-progress {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  margin:22px auto 6px;
  max-width:430px;
}
.booking-progress-step {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  min-width:52px;
  color:var(--muted);
  font-size:.8rem;
}
.booking-progress-step span {
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  font-weight:900;
}
.booking-progress-step.active { color:var(--gold); }
.booking-progress-step.active span {
  color:#111;
  background:linear-gradient(135deg,var(--gold),#ffb641);
  border-color:transparent;
}
.booking-progress-line {
  flex:1;
  height:1px;
  min-width:54px;
  background:var(--line);
  transform:translateY(-9px);
}

.booking-premium-shell {
  display:grid;
  grid-template-columns:minmax(310px,.72fr) minmax(0,1.28fr);
  border:1px solid color-mix(in srgb, var(--gold) 45%, var(--line));
  background:
    radial-gradient(circle at 12% 5%, rgba(255,191,72,.055), transparent 30%),
    linear-gradient(135deg,rgba(255,255,255,.035),rgba(255,255,255,.015));
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.18);
}
.booking-calendar-column,
.booking-form-column { min-width:0; }
.booking-calendar-column {
  padding:30px;
  border-right:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.008));
}
.booking-form-column { padding:30px; }

.booking-calendar-head { margin-bottom:18px; }
.booking-calendar-column .weekday { margin-bottom:7px; }
.booking-calendar-column .days { gap:8px; }
.booking-calendar-column .day {
  min-height:40px;
  border-radius:11px;
}
.booking-calendar-column .day.selected {
  background:linear-gradient(135deg,var(--gold),#ffb640);
  color:#151515;
  box-shadow:0 6px 18px rgba(236,176,61,.22);
}
.booking-calendar-column .day.today:not(.selected) {
  border-color:var(--gold);
  box-shadow:inset 0 0 0 1px var(--gold);
}

.booking-summary-card {
  margin-top:24px;
  padding:4px 18px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.025);
}
.booking-summary-row {
  display:grid;
  grid-template-columns:34px 1fr;
  gap:12px;
  align-items:center;
  padding:15px 0;
}
.booking-summary-row + .booking-summary-row { border-top:1px solid var(--line); }
.booking-summary-icon {
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  color:var(--gold);
  font-weight:900;
  font-size:1.05rem;
}
.booking-summary-row span {
  display:block;
  color:var(--muted);
  font-size:.76rem;
  margin-bottom:4px;
}
.booking-summary-row strong {
  display:block;
  color:var(--text);
  font-size:.94rem;
  line-height:1.35;
}
.booking-selected-date-status {
  margin-top:12px;
  min-height:1.2em;
  color:var(--muted);
  font-size:.82rem;
}
.booking-buffer-card {
  display:grid;
  grid-template-columns:30px 1fr;
  gap:12px;
  margin-top:18px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.022);
}
.booking-buffer-icon {
  width:24px;
  height:24px;
  border:1px solid var(--gold);
  color:var(--gold);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-weight:900;
  font-size:.75rem;
}
.booking-buffer-card strong { font-size:.87rem; }
.booking-buffer-card p {
  margin:5px 0 0;
  color:var(--muted);
  font-size:.77rem;
  line-height:1.55;
}
.booking-calendar-column .booking-calendar-note {
  margin-top:14px;
  font-size:.76rem;
}

.booking-primary-grid { row-gap:16px; }
.booking-form-column .field label {
  font-size:.77rem;
  font-weight:800;
}
.booking-form-column input,
.booking-form-column select,
.booking-form-column textarea {
  border-radius:11px;
}
.booking-form-column textarea { min-height:108px; }
.booking-form-column #bookingNotes { min-height:92px; }

.booking-service-panel {
  padding:0;
  overflow:hidden;
  border-radius:16px;
  background:rgba(255,255,255,.018);
}
.booking-service-panel .booking-tab-title {
  margin:0;
  padding:14px 18px;
  background:rgba(255,255,255,.018);
}
.booking-service-panel .form-grid { padding:18px; }

.booking-tab-title span {
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--gold);
}
.booking-route-polish {
  margin-top:16px;
  border-radius:10px;
}
.booking-submit-polish {
  width:100%;
  margin-top:14px;
  justify-content:center;
  min-height:48px;
  font-weight:900;
}
.booking-security-note {
  margin-top:10px;
  text-align:center;
  color:var(--muted);
  font-size:.72rem;
}

@media (max-width: 940px) {
  .booking-premium-shell { grid-template-columns:1fr; }
  .booking-calendar-column {
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .booking-calendar-column,
  .booking-form-column { padding:22px; }
  .booking-summary-card {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    padding:0 14px;
  }
  .booking-summary-row { grid-template-columns:28px 1fr; }
  .booking-summary-row + .booking-summary-row {
    border-top:0;
    border-left:1px solid var(--line);
    padding-left:14px;
  }
}

@media (max-width: 640px) {
  .booking-polish-intro { text-align:left; }
  .booking-progress { justify-content:flex-start; margin-left:0; }
  .booking-progress-line { min-width:28px; }
  .booking-premium-shell { border-radius:18px; }
  .booking-calendar-column,
  .booking-form-column { padding:17px; }
  .booking-summary-card { display:block; padding:4px 14px; }
  .booking-summary-row + .booking-summary-row {
    border-left:0;
    border-top:1px solid var(--line);
    padding-left:0;
  }
  .booking-form-column .form-grid { grid-template-columns:1fr; }
  .booking-progress-step strong { font-size:.72rem; }
}


/* ==========================================================
   Phase 2 v7 — Rollback Polish
   Restore approved v5 layout; remove decorative progress strip only.
   ========================================================== */

.booking-progress {
  display: none !important;
}

/* Keep the approved headline on one line on normal desktop widths. */
@media (min-width: 980px) {
  .booking-polish-intro {
    max-width: 1180px;
  }

  .booking-polish-intro .section-title {
    white-space: nowrap;
    font-size: clamp(2rem, 3.3vw, 3.85rem);
  }
}

/* Allow natural wrapping again on tablets and phones. */
@media (max-width: 979px) {
  .booking-polish-intro .section-title {
    white-space: normal;
  }
}


/* ==========================================================
   Phase 2 v8 — Booking top-spacing refinement
   Reduce only the gap between site navigation and booking intro.
   ========================================================== */

#booking.booking-polish-section {
  padding-top: 28px;
}

#booking .booking-polish-intro {
  margin-top: 0;
}

@media (max-width: 940px) {
  #booking.booking-polish-section {
    padding-top: 24px;
  }
}

@media (max-width: 640px) {
  #booking.booking-polish-section {
    padding-top: 20px;
  }
}


/* Phase 4+8 v2 — canonical navigation consistency */
.nav-links a.active,
.nav-links a[aria-current="page"] {
  color: var(--gold);
}


/* ==========================================================
   Phase 4+8 v3 — One-line navigation consistency
   Match Photography / AI & Software / detail pages to main nav.
   ========================================================== */

.detail-nav .container,
.detail-nav .nav,
.topbar .container.nav {
  max-width: 1180px;
}

/* Root detail-page header */
.detail-nav,
.detail-header {
  min-height: var(--nav-h);
}

.detail-nav .detail-nav-inner,
.detail-header .detail-nav-inner,
.detail-nav .container,
.detail-header .container {
  display: flex;
  align-items: center;
  gap: 18px;
}

.detail-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  white-space: nowrap;
  min-width: 0;
}

.detail-links a {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: .88rem;
}

/* Give the logo only the width it needs so Contact stays on line one. */
.detail-brand,
.detail-logo,
.detail-nav .nav-brand {
  flex: 0 0 auto;
  width: auto;
  max-width: 180px;
}

.detail-brand img,
.detail-logo img,
.detail-nav .nav-brand img {
  max-width: 165px;
  width: auto;
  height: auto;
}

/* Theme/action button should not consume flexible space. */
.detail-actions,
.detail-nav .nav-actions,
.detail-header .nav-actions {
  flex: 0 0 auto;
  margin-left: 2px;
}

/* Desktop: preserve one-line nav exactly like the main page. */
@media (min-width: 1001px) {
  .detail-links {
    overflow: visible;
  }
}

/* Slightly tighter spacing for narrower desktop/laptop widths. */
@media (min-width: 1001px) and (max-width: 1260px) {
  .detail-links {
    gap: 13px;
  }

  .detail-links a {
    font-size: .82rem;
  }

  .detail-brand img,
  .detail-logo img,
  .detail-nav .nav-brand img {
    max-width: 150px;
  }
}

/* Mobile behavior remains hamburger/stacked as originally designed. */
@media (max-width: 1000px) {
  .detail-links {
    white-space: normal;
  }
}


/* ==========================================================
   Phase 4+8 v4 — final one-line detail navigation
   Keep every item, including Contact, on the first line.
   ========================================================== */

@media (min-width: 1001px) {
  .detail-nav .container,
  .detail-header .container {
    max-width: 1240px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .detail-nav .detail-nav-inner,
  .detail-header .detail-nav-inner,
  .detail-nav .container,
  .detail-header .container {
    gap: 10px;
  }

  .detail-links {
    gap: 12px;
    flex-wrap: nowrap !important;
    white-space: nowrap;
  }

  .detail-links a {
    font-size: .78rem;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .detail-brand,
  .detail-logo,
  .detail-nav .nav-brand {
    max-width: 150px;
  }

  .detail-brand img,
  .detail-logo img,
  .detail-nav .nav-brand img {
    max-width: 145px;
  }

  .detail-actions,
  .detail-nav .nav-actions,
  .detail-header .nav-actions {
    margin-left: 0;
  }
}

/* Give narrower laptops a little more breathing room without wrapping. */
@media (min-width: 1001px) and (max-width: 1180px) {
  .detail-links {
    gap: 9px;
  }

  .detail-links a {
    font-size: .74rem;
  }

  .detail-brand img,
  .detail-logo img,
  .detail-nav .nav-brand img {
    max-width: 132px;
  }
}


/* ==========================================================
   Phase 4+8 v5 FINAL — exact home-page topbar on subpages
   No detail-nav squeezing. The same .topbar/.nav/.nav-links
   markup and spacing used by index.html is now authoritative.
   ========================================================== */

.topbar .nav-links a.active {
  color: var(--gold);
}

/* Root detail pages now have the same fixed/sticky header height behavior
   as the main page. Preserve their existing hero/content spacing. */
body:has(.detail-hero) .detail-hero {
  scroll-margin-top: var(--nav-h);
}