/* ===========================
   LIGHT SKEUOMORPHISM + SOFT GLOWS
   Tactile depth · Ambient section lighting
   Aligned with light/dark mode branding tokens
=========================== */

/* ─────────────────────────────────────────────────
   1. SECTION AMBIENT GLOWS
   Each content section gets a warm radial halo
   that emanates from the centre-top, like a soft
   overhead lamp casting onto the surface below.
───────────────────────────────────────────────── */

.about.section,
.expertise.section,
.portfolio.section,
.process.section,
.testimonials.section,
.faq.section,
.certifications.section,
.tools.section,
.contact.section {
  position: relative;
}

.about.section::before,
.expertise.section::before,
.portfolio.section::before,
.process.section::before,
.testimonials.section::before,
.faq.section::before,
.certifications.section::before,
.tools.section::before,
.contact.section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1000px, 130%);
  height: 360px;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    ellipse 60% 100% at 50% 0%,
    rgba(124, 92, 69, 0.055) 0%,
    transparent 72%
  );
  filter: blur(2px);
}

[data-theme="dark"] .about.section::before,
[data-theme="dark"] .expertise.section::before,
[data-theme="dark"] .portfolio.section::before,
[data-theme="dark"] .process.section::before,
[data-theme="dark"] .testimonials.section::before,
[data-theme="dark"] .faq.section::before,
[data-theme="dark"] .certifications.section::before,
[data-theme="dark"] .tools.section::before,
[data-theme="dark"] .contact.section::before {
  background: radial-gradient(
    ellipse 60% 100% at 50% 0%,
    rgba(201, 160, 122, 0.090) 0%,
    transparent 72%
  );
}

/* Ensure section content clears the glow layer */
.about.section > .container,
.expertise.section > .container,
.portfolio.section > .container,
.process.section > .container,
.testimonials.section > .container,
.faq.section > .container,
.certifications.section > .container,
.tools.section > .container,
.contact.section > .container {
  position: relative;
  z-index: 1;
}

/* ─────────────────────────────────────────────────
   1b. TESTIMONIALS — Decorative oversized quote mark
───────────────────────────────────────────────── */

.testimonials.section::after {
  content: '\201C';
  position: absolute;
  right: 2%;
  top: 40px;
  font-family: var(--font-display);
  font-size: clamp(12rem, 22vw, 20rem);
  color: var(--accent);
  opacity: 0.028;
  line-height: 1;
  pointer-events: none;
  z-index: 0;
  font-style: italic;
  font-weight: 700;
}

/* ─────────────────────────────────────────────────
   2. SKEUOMORPHIC CARD RAISE
   Simulates a surface lit from above-left:
   top inset highlight → physical raised edge
   layered outer drop shadow → genuine depth
───────────────────────────────────────────────── */

.bento-card,
.portfolio-card,
.cert-group,
.tool-category,
.step-card,
.testimonial-card,
.faq-item,
.contact-card {
  box-shadow:
    /* Top inner highlight — surface catching overhead light */
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    /* Bottom inner shadow — base sits in shadow */
    inset 0 -1px 0 rgba(0, 0, 0, 0.045),
    /* Close ambient drop */
    0 1px 3px rgba(107, 79, 58, 0.07),
    /* Mid-range shadow */
    0 6px 20px rgba(107, 79, 58, 0.09),
    /* Soft edge ring */
    0 0 0 1px rgba(107, 79, 58, 0.055);
}

.bento-card:hover,
.portfolio-card:hover,
.cert-group:hover,
.tool-category:hover,
.step-card:hover,
.testimonial-card:hover,
.contact-card:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -1px 0 rgba(0, 0, 0, 0.055),
    0 2px 6px rgba(107, 79, 58, 0.09),
    0 12px 36px rgba(107, 79, 58, 0.14),
    0 0 0 1px rgba(107, 79, 58, 0.07),
    /* Warm ambient glow that blooms on hover */
    0 0 56px rgba(124, 92, 69, 0.09);
}

[data-theme="dark"] .bento-card,
[data-theme="dark"] .portfolio-card,
[data-theme="dark"] .cert-group,
[data-theme="dark"] .tool-category,
[data-theme="dark"] .step-card,
[data-theme="dark"] .testimonial-card,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .contact-card {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 1px 3px rgba(0, 0, 0, 0.22),
    0 6px 20px rgba(0, 0, 0, 0.30),
    0 0 0 1px rgba(255, 255, 255, 0.038);
}

[data-theme="dark"] .bento-card:hover,
[data-theme="dark"] .portfolio-card:hover,
[data-theme="dark"] .cert-group:hover,
[data-theme="dark"] .tool-category:hover,
[data-theme="dark"] .step-card:hover,
[data-theme="dark"] .testimonial-card:hover,
[data-theme="dark"] .contact-card:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    inset 0 -1px 0 rgba(0, 0, 0, 0.33),
    0 2px 6px rgba(0, 0, 0, 0.28),
    0 12px 40px rgba(0, 0, 0, 0.40),
    0 0 0 1px rgba(255, 255, 255, 0.048),
    /* Caramel candlelight glow */
    0 0 56px rgba(201, 160, 122, 0.11);
}

/* ─────────────────────────────────────────────────
   3. CONTACT FORM PANEL — Elevated slab
───────────────────────────────────────────────── */

.contact-form {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 -1px 0 rgba(0, 0, 0, 0.040),
    0 4px 12px rgba(107, 79, 58, 0.08),
    0 16px 48px rgba(107, 79, 58, 0.11),
    0 0 0 1px rgba(107, 79, 58, 0.055);
}

[data-theme="dark"] .contact-form {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.048),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 4px 12px rgba(0, 0, 0, 0.28),
    0 16px 48px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(255, 255, 255, 0.035);
}

/* ─────────────────────────────────────────────────
   4. RECESSED FORM INPUTS
   Inputs look pressed into the surface — the
   opposite of a raised card (inset shadow only)
───────────────────────────────────────────────── */

.form-group input,
.form-group select,
.form-group textarea {
  background: rgba(255, 255, 255, 0.72);
  box-shadow:
    /* Primary recess shadow */
    inset 0 2px 5px rgba(107, 79, 58, 0.10),
    inset 0 1px 2px rgba(107, 79, 58, 0.07),
    /* Subtle bottom lip highlight */
    inset 0 -1px 0 rgba(255, 255, 255, 0.55);
  border-color: rgba(201, 187, 177, 0.85);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  background: rgba(255, 255, 255, 0.82);
  box-shadow:
    inset 0 2px 5px rgba(107, 79, 58, 0.08),
    inset 0 1px 2px rgba(107, 79, 58, 0.06),
    inset 0 -1px 0 rgba(255, 255, 255, 0.55),
    /* Focus ring */
    0 0 0 3px rgba(124, 92, 69, 0.14),
    /* Warm glow when active */
    0 0 24px rgba(124, 92, 69, 0.11);
}

/* Validation error state */
.form-group input.field-error,
.form-group select.field-error,
.form-group textarea.field-error {
  border-color: rgba(180, 60, 50, 0.55);
  box-shadow:
    inset 0 2px 5px rgba(180, 60, 50, 0.08),
    inset 0 1px 2px rgba(180, 60, 50, 0.06),
    0 0 0 3px rgba(180, 60, 50, 0.10);
}

[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea {
  background: rgba(18, 15, 13, 0.72);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.26),
    inset 0 1px 2px rgba(0, 0, 0, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.038);
  border-color: rgba(71, 65, 58, 0.92);
}

[data-theme="dark"] .form-group input:focus,
[data-theme="dark"] .form-group select:focus,
[data-theme="dark"] .form-group textarea:focus {
  background: rgba(22, 19, 17, 0.82);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.22),
    inset 0 1px 2px rgba(0, 0, 0, 0.15),
    inset 0 -1px 0 rgba(255, 255, 255, 0.042),
    0 0 0 3px rgba(201, 160, 122, 0.18),
    0 0 24px rgba(201, 160, 122, 0.12);
}

[data-theme="dark"] .form-group input.field-error,
[data-theme="dark"] .form-group select.field-error,
[data-theme="dark"] .form-group textarea.field-error {
  border-color: rgba(220, 80, 70, 0.50);
  box-shadow:
    inset 0 2px 5px rgba(220, 80, 70, 0.10),
    0 0 0 3px rgba(220, 80, 70, 0.12);
}

/* ─────────────────────────────────────────────────
   5. BUTTON GLOW & TACTILE PRESS
   Primary CTA buttons glow outward; pressing
   them depresses slightly to feel physical
───────────────────────────────────────────────── */

.btn-primary {
  box-shadow:
    /* Top gloss */
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    /* Colour-matched drop */
    0 4px 14px rgba(107, 79, 58, 0.30),
    /* Wide ambient bloom */
    0 8px 28px rgba(107, 79, 58, 0.18),
    /* Crisp edge ring */
    0 0 0 1px rgba(90, 63, 46, 0.18);
}

.btn-primary:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 6px 20px rgba(107, 79, 58, 0.36),
    0 14px 40px rgba(107, 79, 58, 0.22),
    0 0 0 1px rgba(90, 63, 46, 0.22),
    /* Wide warm halo */
    0 0 52px rgba(124, 92, 69, 0.18);
}

.btn-primary:active {
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.18),
    0 1px 4px rgba(107, 79, 58, 0.18),
    0 0 0 1px rgba(90, 63, 46, 0.14);
  transform: translateY(1px) !important;
}

[data-theme="dark"] .btn-primary {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 4px 14px rgba(0, 0, 0, 0.38),
    0 8px 28px rgba(0, 0, 0, 0.26),
    0 0 0 1px rgba(201, 160, 122, 0.20);
}

[data-theme="dark"] .btn-primary:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 6px 20px rgba(0, 0, 0, 0.44),
    0 14px 40px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(201, 160, 122, 0.26),
    /* Caramel candlelight */
    0 0 52px rgba(201, 160, 122, 0.17);
}

[data-theme="dark"] .btn-primary:active {
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.35),
    0 1px 4px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(201, 160, 122, 0.14);
  transform: translateY(1px) !important;
}

/* ─────────────────────────────────────────────────
   6. CREDENTIALS CARD — Sticky sidebar slab
───────────────────────────────────────────────── */

.about-credentials {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04),
    0 4px 16px rgba(107, 79, 58, 0.10),
    0 20px 56px rgba(107, 79, 58, 0.13),
    0 0 0 1px rgba(107, 79, 58, 0.055);
}

[data-theme="dark"] .about-credentials {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.050),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 4px 16px rgba(0, 0, 0, 0.28),
    0 20px 56px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(255, 255, 255, 0.035);
}

/* ─────────────────────────────────────────────────
   7. STEP NUMBERS — Glowing badge disc
───────────────────────────────────────────────── */

.step-number {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06),
    0 4px 14px rgba(107, 79, 58, 0.12),
    0 0 0 1px rgba(107, 79, 58, 0.06),
    0 0 22px rgba(124, 92, 69, 0.10);
}

.step-card:hover .step-number {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 -1px 0 rgba(0, 0, 0, 0.07),
    0 10px 26px rgba(107, 79, 58, 0.20),
    0 0 0 1px rgba(107, 79, 58, 0.08),
    0 0 36px rgba(124, 92, 69, 0.16);
}

[data-theme="dark"] .step-number {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.060),
    inset 0 -1px 0 rgba(0, 0, 0, 0.24),
    0 4px 14px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.035),
    0 0 22px rgba(201, 160, 122, 0.11);
}

[data-theme="dark"] .step-card:hover .step-number {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.080),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    0 10px 26px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.045),
    0 0 36px rgba(201, 160, 122, 0.17);
}

/* ─────────────────────────────────────────────────
   8. FAQ — Glows when item is open
───────────────────────────────────────────────── */

.faq-item:has(.faq-question[aria-expanded="true"]) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04),
    0 4px 16px rgba(107, 79, 58, 0.10),
    0 8px 28px rgba(107, 79, 58, 0.10),
    0 0 0 1px rgba(107, 79, 58, 0.10),
    0 0 44px rgba(124, 92, 69, 0.09);
  border-color: rgba(124, 92, 69, 0.22);
}

[data-theme="dark"] .faq-item:has(.faq-question[aria-expanded="true"]) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    inset 0 -1px 0 rgba(0, 0, 0, 0.26),
    0 4px 16px rgba(0, 0, 0, 0.28),
    0 8px 28px rgba(0, 0, 0, 0.30),
    0 0 0 1px rgba(201, 160, 122, 0.15),
    0 0 44px rgba(201, 160, 122, 0.11);
  border-color: rgba(201, 160, 122, 0.18);
}

/* ─────────────────────────────────────────────────
   9. TOOL CHIPS — Tactile raised pills
───────────────────────────────────────────────── */

.tool-chip {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05),
    0 2px 6px rgba(107, 79, 58, 0.08),
    0 0 0 1px rgba(107, 79, 58, 0.04);
}

.tool-chip:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.80),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06),
    0 4px 14px rgba(107, 79, 58, 0.14),
    0 0 0 1px rgba(107, 79, 58, 0.09),
    0 0 22px rgba(124, 92, 69, 0.11);
}

[data-theme="dark"] .tool-chip {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    inset 0 -1px 0 rgba(0, 0, 0, 0.20),
    0 2px 6px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.030);
}

[data-theme="dark"] .tool-chip:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.065),
    inset 0 -1px 0 rgba(0, 0, 0, 0.24),
    0 4px 14px rgba(0, 0, 0, 0.30),
    0 0 0 1px rgba(255, 255, 255, 0.040),
    0 0 22px rgba(201, 160, 122, 0.13);
}

/* ─────────────────────────────────────────────────
   10. CONTACT LINKS — Skeuomorphic raised tiles
───────────────────────────────────────────────── */

.contact-link {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04),
    0 2px 8px rgba(107, 79, 58, 0.09),
    0 6px 20px rgba(107, 79, 58, 0.07),
    0 0 0 1px rgba(107, 79, 58, 0.05);
}

.contact-link:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.80),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05),
    0 4px 18px rgba(107, 79, 58, 0.14),
    0 10px 32px rgba(107, 79, 58, 0.10),
    0 0 0 1px rgba(107, 79, 58, 0.09),
    0 0 44px rgba(124, 92, 69, 0.09);
}

[data-theme="dark"] .contact-link {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.050),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22),
    0 2px 8px rgba(0, 0, 0, 0.24),
    0 6px 20px rgba(0, 0, 0, 0.20),
    0 0 0 1px rgba(255, 255, 255, 0.030);
}

[data-theme="dark"] .contact-link:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.065),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 4px 18px rgba(0, 0, 0, 0.32),
    0 10px 32px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.038),
    0 0 44px rgba(201, 160, 122, 0.12);
}

/* ─────────────────────────────────────────────────
   11. SECTION TITLE SOFT GLOW
   Barely-there text-shadow warms the headlines
───────────────────────────────────────────────── */

.section-title {
  text-shadow: 0 2px 28px rgba(124, 92, 69, 0.07);
}

[data-theme="dark"] .section-title {
  text-shadow: 0 2px 28px rgba(201, 160, 122, 0.11);
}

/* ─────────────────────────────────────────────────
   12. ABOUT PHOTO FRAME — Physical print depth
───────────────────────────────────────────────── */

.about-photo-frame {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.24) inset,
    0 28px 64px rgba(107, 79, 58, 0.20),
    0 8px 24px rgba(107, 79, 58, 0.12),
    0 0 56px rgba(124, 92, 69, 0.09);
}

[data-theme="dark"] .about-photo-frame {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.055) inset,
    0 28px 64px rgba(0, 0, 0, 0.42),
    0 8px 24px rgba(0, 0, 0, 0.28),
    0 0 56px rgba(201, 160, 122, 0.08);
}

/* ─────────────────────────────────────────────────
   13. ABOUT-DECISION & PHILOSOPHY — Glassy depth
───────────────────────────────────────────────── */

.about-decision {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.70),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04),
    0 4px 16px rgba(107, 79, 58, 0.08),
    0 0 0 1px rgba(107, 79, 58, 0.05);
}

[data-theme="dark"] .about-decision {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    inset 0 -1px 0 rgba(0, 0, 0, 0.24),
    0 4px 16px rgba(0, 0, 0, 0.26),
    0 0 0 1px rgba(255, 255, 255, 0.028);
}

/* ─────────────────────────────────────────────────
   14. CRED ICON BADGE — Tactile coin look
───────────────────────────────────────────────── */

.cred-icon {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.60),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06),
    0 2px 8px rgba(107, 79, 58, 0.11);
}

.credentials-list li:hover .cred-icon {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 rgba(0, 0, 0, 0.07),
    0 6px 16px rgba(107, 79, 58, 0.19),
    0 0 22px rgba(124, 92, 69, 0.12);
}

[data-theme="dark"] .cred-icon {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.050),
    inset 0 -1px 0 rgba(0, 0, 0, 0.24),
    0 2px 8px rgba(0, 0, 0, 0.26);
}

[data-theme="dark"] .credentials-list li:hover .cred-icon {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.065),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    0 6px 16px rgba(0, 0, 0, 0.36),
    0 0 22px rgba(201, 160, 122, 0.14);
}

/* ─────────────────────────────────────────────────
   15. NAV — Scroll-aware glow
───────────────────────────────────────────────── */

.nav-header.scrolled {
  box-shadow:
    0 4px 24px rgba(107, 79, 58, 0.10),
    0 1px 0 rgba(255, 255, 255, 0.32) inset,
    0 0 48px rgba(124, 92, 69, 0.05);
}

[data-theme="dark"] .nav-header.scrolled {
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 0 48px rgba(201, 160, 122, 0.05);
}

/* Theme toggle button glow on hover */
.theme-toggle:hover {
  box-shadow:
    var(--glass-shadow),
    0 0 20px rgba(124, 92, 69, 0.14);
}

[data-theme="dark"] .theme-toggle:hover {
  box-shadow:
    var(--glass-shadow),
    0 0 20px rgba(201, 160, 122, 0.16);
}

/* ─────────────────────────────────────────────────
   16. FORM SUBMIT ERROR MESSAGE
───────────────────────────────────────────────── */

.form-submit-error {
  font-size: 0.85rem;
  color: #b43232;
  text-align: center;
  padding: 10px 0 0;
  line-height: 1.55;
}

[data-theme="dark"] .form-submit-error {
  color: #e07070;
}