/* ==========================================================
   GETDIGITAL BUZZ — Premium Light Theme v4.0
   Honey Gold #F7AA1F · Space Grotesk + Inter
   ========================================================== */

/* ── 1. Design Tokens ───────────────────────────────────── */
:root {
    --gd-bg:           #FFFFFF;
    --gd-bg-2:         #F6F6F4;
    --gd-bg-card:      rgba(0,0,0,0.028);
    --gd-bg-card-h:    rgba(247,170,31,0.07);
    --gd-bg-dark:      #2d3748;
    --gd-accent:       #F7AA1F;
    --gd-accent-rgb:   247,170,31;
    --gd-accent-dim:   rgba(247,170,31,0.10);
    --gd-accent-brd:   rgba(247,170,31,0.30);
    --gd-accent-dark:  #C98A00;
    --gd-text:         #0B0B0B;
    --gd-heading:      #2D3748;
    --gd-text-muted:   rgba(11,11,11,0.56);
    --gd-text-faint:   rgba(11,11,11,0.36);
    --gd-text-on-dark:       rgba(255,255,255,0.92);
    --gd-text-muted-on-dark: rgba(255,255,255,0.55);
    --gd-text-faint-on-dark: rgba(255,255,255,0.30);
    --gd-border:       rgba(11,11,11,0.08);
    --gd-border-dark:  rgba(255,255,255,0.10);
    --gd-font-display: 'Space Grotesk', -apple-system, sans-serif;
    --gd-font-body:    'Inter', -apple-system, sans-serif;
    --gd-radius:       10px;
    --gd-radius-lg:    16px;
    --gd-radius-xl:    24px;
    --gd-container:    1200px;
    --gd-transition:   0.22s cubic-bezier(0.4,0,0.2,1);
}

/* ── 2. Reset & Base ────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family:      var(--gd-font-body);
    font-size:        16px;
    line-height:      1.7;
    color:            var(--gd-text);
    background-color: var(--gd-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--gd-accent); text-decoration: none; transition: color var(--gd-transition); }
a:hover { color: var(--gd-accent-dark); }
ul, ol { list-style: none; }

/* ── 3. Typography ──────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 {
    font-family: var(--gd-font-display);
    font-weight: 700;
    line-height: 1.1;
    color:       var(--gd-heading);
    letter-spacing: -0.03em;
}
h1 { font-size: clamp(2.4rem,5vw,4rem);     font-weight: 800; }
h2 { font-size: clamp(1.8rem,3.5vw,2.8rem); }
h3 { font-size: clamp(1.15rem,2vw,1.5rem);  }
h4 { font-size: 1.1rem; }
p  { color: var(--gd-text-muted); line-height: 1.75; }

.text-accent { color: var(--gd-accent) !important; }
.text-dark   { color: var(--gd-text) !important; }
.text-muted  { color: var(--gd-text-muted) !important; }
.text-center { text-align: center; }

/* ── 4. Layout ──────────────────────────────────────────── */
.container { max-width: var(--gd-container); margin-inline: auto; padding-inline: 24px; }
.section    { padding-block: 100px; }
.section--sm { padding-block: 64px; }
.section--lg { padding-block: 128px; }
.section--dark { background: var(--gd-bg-dark); }
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4 { color: var(--gd-text-on-dark); }
.section--dark p { color: var(--gd-text-muted-on-dark); }

.section__tag { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gd-accent); margin-bottom: 14px; }
.section__header { margin-bottom: 60px; }
.section__header h2 { margin-bottom: 12px; }
.section__header p  { max-width: 520px; font-size: 1.05rem; }
.section__header.centered { text-align: center; }
.section__header.centered p { margin-inline: auto; }

.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }

/* ── 5. Buttons ─────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 26px; border-radius: var(--gd-radius);
    font-family: var(--gd-font-display); font-size: 14px; font-weight: 700;
    letter-spacing: 0.01em; cursor: pointer; border: none;
    transition: all var(--gd-transition); white-space: nowrap; text-decoration: none; line-height: 1;
}
.btn--primary { background: var(--gd-accent); color: #0B0B0B; }
.btn--primary:hover { background: #f0a510; color: #0B0B0B; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(247,170,31,0.35); }
.btn--primary:active { transform: translateY(0); }
.btn--secondary { background: transparent; color: var(--gd-text); border: 1.5px solid var(--gd-border); }
.btn--secondary:hover { border-color: rgba(11,11,11,0.25); background: rgba(11,11,11,0.04); color: var(--gd-text); transform: translateY(-1px); }
.btn--secondary-dark { background: transparent; color: rgba(255,255,255,0.8); border: 1.5px solid rgba(255,255,255,0.2); }
.btn--secondary-dark:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.35); color: #fff; transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--gd-text); padding: 0; font-size: 13px; font-weight: 600; }
.btn--ghost:hover { color: var(--gd-accent); gap: 12px; }
.btn--ghost-gold { background: transparent; color: var(--gd-accent); padding: 0; font-size: 13px; font-weight: 600; }
.btn--ghost-gold:hover { color: var(--gd-accent-dark); gap: 12px; }
.btn-group { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ── 6. Announcement Bar ────────────────────────────────── */
.announce-bar { background: var(--gd-accent); color: #0B0B0B; text-align: center; padding: 10px 24px; font-family: var(--gd-font-display); font-size: 13px; font-weight: 600; position: sticky; top: 0; z-index: 200; }
.announce-bar a { color: #0B0B0B; text-decoration: underline; text-underline-offset: 2px; margin-left: 8px; }
.announce-bar a:hover { opacity: 0.7; }
.announce-bar__dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #0B0B0B; margin-right: 8px; animation: pulse 2s ease-in-out infinite; vertical-align: middle; }

/* ── 7. Navigation ──────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--gd-bg); border-bottom: 1px solid var(--gd-border); transition: box-shadow var(--gd-transition), background var(--gd-transition); }
.site-header.scrolled { background: rgba(255,255,255,0.96); box-shadow: 0 1px 20px rgba(0,0,0,0.06); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.site-nav { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; max-width: var(--gd-container); margin-inline: auto; }
.site-logo { font-family: var(--gd-font-display); font-size: 17px; font-weight: 800; color: var(--gd-text); letter-spacing: -0.04em; text-decoration: none; display: flex; align-items: center; gap: 7px; transition: opacity var(--gd-transition); }
.site-logo:hover { opacity: 0.7; color: var(--gd-text); }
.site-logo__accent { color: var(--gd-accent); }
.site-logo img { height: 32px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a { font-size: 13px; font-weight: 500; color: var(--gd-text-muted); transition: color var(--gd-transition); position: relative; }
.nav-links a:hover,.nav-links a.current-menu-item { color: var(--gd-text); }
.nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1.5px; background: var(--gd-accent); transition: width var(--gd-transition); }
.nav-links a:hover::after { width: 100%; }
.nav-cta-wrap { display: flex; align-items: center; gap: 14px; }
.nav-lang { font-size: 12px; font-weight: 600; color: var(--gd-text-faint); cursor: pointer; transition: color var(--gd-transition); }
.gd-lang-switcher { position: relative; }
.gd-lang-switcher__current { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 20px; background: var(--gd-bg-2); border: 1px solid var(--gd-border); cursor: pointer; font-family: var(--gd-font-display); font-size: 12px; font-weight: 700; color: var(--gd-text); transition: all var(--gd-transition); }
.gd-lang-switcher__current:hover { border-color: var(--gd-accent-brd); background: var(--gd-accent-dim); }
.gd-lang-switcher__flag { font-size: 15px; line-height: 1; }
.gd-lang-switcher__caret { flex-shrink: 0; transition: transform var(--gd-transition); }
.gd-lang-switcher.open .gd-lang-switcher__caret { transform: rotate(180deg); }
.gd-lang-switcher__menu {
    position: absolute; top: calc(100% + 8px); right: 0; min-width: 170px;
    background: var(--gd-bg); border: 1px solid var(--gd-border); border-radius: var(--gd-radius);
    box-shadow: 0 12px 40px rgba(0,0,0,0.14); padding: 6px;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity var(--gd-transition), transform var(--gd-transition), visibility var(--gd-transition);
    z-index: 200;
}
.gd-lang-switcher.open .gd-lang-switcher__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.gd-lang-switcher__option { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--gd-text); transition: background var(--gd-transition); }
.gd-lang-switcher__option:hover { background: var(--gd-bg-2); color: var(--gd-text); }
.gd-lang-switcher__option .gd-lang-switcher__flag { font-size: 17px; }
.nav-lang:hover { color: var(--gd-accent); }
.nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; background: transparent; border: none; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--gd-text); border-radius: 2px; transition: all var(--gd-transition); }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── 8. Hero ────────────────────────────────────────────── */
.hero-section {
    position: relative;
    z-index: 0;
    min-height: calc(100vh - 60px);
    display: flex; align-items: center;
    overflow: hidden;
    padding-block: 80px;
    background: linear-gradient(135deg, #fff 0%, #fffcf5 55%, #fff 100%);
}
.hero-section::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: var(--gd-border); }
/* Gold glow blob in hero */
.hero-section::before {
    content: '';
    position: absolute;
    top: -60px; right: -80px;
    width: 640px; height: 640px;
    background: radial-gradient(circle, rgba(247,170,31,0.08) 0%, transparent 65%);
    pointer-events: none;
    border-radius: 50%;
}
#hero-particles {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
}
.hero-section .container { position: relative; z-index: 1; }
.hero-inner { position: relative; z-index: 1; max-width: 760px; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--gd-accent-dim); border: 1px solid var(--gd-accent-brd); border-radius: 20px; padding: 5px 14px; margin-bottom: 24px; font-size: 12px; font-weight: 600; color: var(--gd-accent-dark); letter-spacing: 0.02em; }
.hero-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gd-accent); animation: pulse 2s ease-in-out infinite; flex-shrink: 0; }
.hero-title { font-size: clamp(2.8rem,6vw,4.8rem); font-weight: 800; line-height: 1.05; margin-bottom: 20px; letter-spacing: -0.04em; color: var(--gd-heading); }
.hero-title__accent { color: var(--gd-accent); }
.hero-sub { font-size: 1.1rem; color: var(--gd-text-muted); line-height: 1.75; max-width: 500px; margin-bottom: 36px; }
.hero-social-strip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--gd-border); }
.hero-social-strip__label { font-size: 11px; color: var(--gd-text-faint); white-space: nowrap; margin-right: 4px; }
.social-pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(0,0,0,0.04); border: 1px solid var(--gd-border); border-radius: 20px; padding: 5px 12px; font-size: 12px; color: var(--gd-text-muted); transition: all var(--gd-transition); text-decoration: none; }
.social-pill:hover { background: var(--gd-accent-dim); border-color: var(--gd-accent-brd); color: var(--gd-accent-dark); }

/* ── 9. Stats Bar (Dark Band) ───────────────────────────── */
.stats-bar { background: var(--gd-bg-dark); }
.stats-bar__inner { display: grid; grid-template-columns: repeat(4,1fr); }
.stat-item { text-align: center; padding: 32px 16px; border-left: 1px solid var(--gd-border-dark); transition: background var(--gd-transition); }
.stat-item:first-child { border-left: none; }
.stat-item:hover { background: rgba(255,255,255,0.04); }
.stat-item__number { display: block; font-family: var(--gd-font-display); font-size: clamp(1.8rem,3vw,2.4rem); font-weight: 800; color: var(--gd-accent); line-height: 1; margin-bottom: 6px; letter-spacing: -0.04em; }
.stat-item__label  { font-size: 12px; color: var(--gd-text-faint-on-dark); line-height: 1.4; }

/* ── 10. Services ───────────────────────────────────────── */
.services-section {
    background: linear-gradient(150deg, #fff 0%, #fffdf6 100%);
    position: relative; overflow: hidden;
}
.services-section::before {
    content: ''; position: absolute;
    top: -150px; right: -150px;
    width: 550px; height: 550px;
    background: radial-gradient(circle, rgba(247,170,31,0.08) 0%, transparent 65%);
    pointer-events: none; border-radius: 50%;
}
.services-section .container { position: relative; z-index: 1; }
.services-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.service-card { background: var(--gd-bg); border: 1px solid var(--gd-border); border-radius: var(--gd-radius-lg); padding: 32px; transition: all var(--gd-transition); text-decoration: none; display: block; }
.service-card:hover { border-color: var(--gd-accent-brd); background: var(--gd-bg-card-h); transform: translateY(-2px); box-shadow: 0 12px 40px rgba(247,170,31,0.10); }
.service-card__icon { width: 44px; height: 44px; background: var(--gd-accent-dim); border: 1px solid var(--gd-accent-brd); border-radius: var(--gd-radius); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; flex-shrink: 0; }
.service-card__icon svg { width: 22px; height: 22px; stroke: var(--gd-accent); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.service-card__title { font-family: var(--gd-font-display); font-size: 1.15rem; font-weight: 700; color: var(--gd-heading); margin-bottom: 10px; letter-spacing: -0.02em; }
.service-card__desc  { font-size: 14px; color: var(--gd-text-muted); line-height: 1.65; margin-bottom: 20px; }
.service-card__arrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--gd-accent); transition: gap var(--gd-transition), color var(--gd-transition); }
.service-card:hover .service-card__arrow { gap: 10px; color: var(--gd-accent-dark); }

/* ── 11. Portfolio Preview ──────────────────────────────── */
.portfolio-section { background: var(--gd-bg-2); position: relative; overflow: hidden; }
.portfolio-section::after {
    content: ''; position: absolute;
    top: 40%; right: -180px;
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(247,170,31,0.05) 0%, transparent 70%);
    pointer-events: none; border-radius: 50%;
}
.portfolio-section .container { position: relative; z-index: 1; }
.portfolio-grid    { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.portfolio-card { background: #FFFFFF; border: 1px solid var(--gd-border); border-radius: var(--gd-radius-lg); overflow: hidden; transition: all var(--gd-transition); text-decoration: none; display: block; }
.portfolio-card:hover { transform: translateY(-4px); border-color: var(--gd-accent-brd); box-shadow: 0 16px 48px rgba(0,0,0,0.08); }
.portfolio-card__img { aspect-ratio: 16/10; overflow: hidden; background: var(--gd-bg-2); position: relative; }
/* Clean top-of-page crop — the (full-load, cookie-banner-free) capture is good
   enough to stand on its own. Subtle zoom on hover, nothing gimmicky. */
.portfolio-card__img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.5s ease; }
.portfolio-card:hover .portfolio-card__img img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
    .portfolio-card:hover .portfolio-card__img img { transform: none; }
}
.portfolio-card__placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.portfolio-card__placeholder svg { width: 40px; height: 40px; stroke: var(--gd-text-faint); fill: none; stroke-width: 1.5; }
.portfolio-card__overlay { position: absolute; inset: 0; background: rgba(11,11,11,0.38); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.25s ease; }
.portfolio-card:hover .portfolio-card__overlay { opacity: 1; }
.portfolio-card__overlay-text { background: var(--gd-accent); color: #0B0B0B; font-family: var(--gd-font-display); font-size: 13px; font-weight: 700; padding: 9px 20px; border-radius: 20px; }
.portfolio-card__body   { padding: 18px 20px 20px; }
.portfolio-card__tag    { display: inline-block; background: var(--gd-accent-dim); color: var(--gd-accent-dark); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; margin-bottom: 10px; }
.portfolio-card__title  { font-family: var(--gd-font-display); font-size: 1rem; font-weight: 700; color: var(--gd-heading); margin-bottom: 5px; letter-spacing: -0.02em; line-height: 1.3; }
.portfolio-card__client { font-size: 12px; color: var(--gd-text-faint); margin-bottom: 14px; }
.portfolio-card__metric { padding-top: 14px; border-top: 1px solid var(--gd-border); display: flex; align-items: baseline; gap: 6px; }
.metric__number { font-family: var(--gd-font-display); font-size: 1.1rem; font-weight: 800; color: var(--gd-accent-dark); letter-spacing: -0.03em; line-height: 1; }
.metric__label  { font-size: 11px; color: var(--gd-text-faint); }

/* ── 12. Process (Dark) ─────────────────────────────────── */
.process-section {
    background: var(--gd-bg-dark);
    position: relative; overflow: hidden;
}
.process-section::before {
    content: ''; position: absolute;
    bottom: -120px; left: -120px;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(247,170,31,0.07) 0%, transparent 65%);
    pointer-events: none; border-radius: 50%;
}
.process-section::after {
    content: ''; position: absolute;
    top: -80px; right: -80px;
    width: 350px; height: 350px;
    background: radial-gradient(circle, rgba(247,170,31,0.05) 0%, transparent 65%);
    pointer-events: none; border-radius: 50%;
}
.process-section .section__tag     { color: var(--gd-accent); }
.process-section .section__header h2 { color: var(--gd-text-on-dark); }
.process-section .section__header p  { color: var(--gd-text-muted-on-dark); }
.process-section .container { position: relative; z-index: 1; }
.process-grid    { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--gd-border-dark); border-radius: var(--gd-radius-xl); overflow: hidden; margin-top: 48px; }
.process-step    { padding: 40px 36px; background: transparent; border-right: 1px solid var(--gd-border-dark); transition: background var(--gd-transition); }
.process-step:last-child { border-right: none; }
.process-step:hover { background: rgba(255,255,255,0.04); }
.process-step__num   { font-family: var(--gd-font-display); font-size: 3.5rem; font-weight: 800; color: var(--gd-accent); line-height: 1; margin-bottom: 20px; letter-spacing: -0.06em; }
.process-step__title { font-size: 1.1rem; font-weight: 700; color: var(--gd-text-on-dark); margin-bottom: 10px; letter-spacing: -0.02em; }
.process-step__desc  { font-size: 14px; color: var(--gd-text-muted-on-dark); line-height: 1.65; }

/* ── 13. Testimonials ───────────────────────────────────── */
.testimonials-section { background: linear-gradient(160deg, #F6F6F4 0%, #FFF9ED 100%); }
.testimonials-grid    { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.testi-card { background: #FFFFFF; border: 1px solid var(--gd-border); border-radius: var(--gd-radius-lg); padding: 28px; transition: border-color var(--gd-transition), box-shadow var(--gd-transition); display: flex; flex-direction: column; }
.testi-card:hover { border-color: var(--gd-accent-brd); box-shadow: 0 8px 32px rgba(0,0,0,0.06); }
.testi-card__stars  { display: flex; gap: 3px; margin-bottom: 16px; }
.testi-card__star   { width: 15px; height: 15px; fill: var(--gd-accent); }
.testi-card__quote  { font-size: 15px; color: var(--gd-text-muted); line-height: 1.7; font-style: italic; flex: 1; margin-bottom: 20px; }
.testi-card__author { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--gd-border); }
.testi-card__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--gd-accent-dim); border: 1px solid var(--gd-accent-brd); display: flex; align-items: center; justify-content: center; font-family: var(--gd-font-display); font-size: 13px; font-weight: 700; color: var(--gd-accent-dark); flex-shrink: 0; overflow: hidden; }
.testi-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.testi-card__name    { font-size: 14px; font-weight: 600; color: var(--gd-text); line-height: 1.3; }
.testi-card__company { font-size: 12px; color: var(--gd-text-faint); margin-top: 2px; }

/* ── 14. CTA (Dark) ─────────────────────────────────────── */
.cta-section { background: var(--gd-bg-dark); text-align: center; padding-block: 120px; position: relative; overflow: hidden; }
.cta-section::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 700px; height: 700px; background: radial-gradient(circle, rgba(247,170,31,0.10) 0%, transparent 68%); pointer-events: none; }
.cta-section::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(247,170,31,0.3), transparent); pointer-events: none; }
.cta-section__inner { position: relative; z-index: 1; }
.cta-section h2 { font-size: clamp(2rem,4vw,3.2rem); margin-bottom: 14px; letter-spacing: -0.04em; color: var(--gd-text-on-dark); }
.cta-section p  { font-size: 1.05rem; margin-bottom: 36px; max-width: 440px; margin-inline: auto; color: var(--gd-text-muted-on-dark); }
.cta-section .btn-group { justify-content: center; }
.cta-section__note { margin-top: 18px; font-size: 12px; color: var(--gd-text-faint-on-dark); }
.cta-section__phone {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--gd-font-display); font-size: 1.05rem;
    font-weight: 700; color: var(--gd-accent); text-decoration: none;
    transition: all var(--gd-transition);
}
.cta-section__phone:hover { color: #F7AA1F; transform: translateY(-1px); filter: brightness(1.1); }
.cta-section__phone svg { flex-shrink: 0; }

/* ── 15. Footer (Dark) ──────────────────────────────────── */
.site-footer { background: var(--gd-bg-dark); border-top: 1px solid var(--gd-border-dark); padding-block: 64px 32px; }
.footer-main { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid var(--gd-border-dark); margin-bottom: 28px; }
.footer-brand__logo { font-family: var(--gd-font-display); font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -0.04em; display: inline-block; margin-bottom: 14px; text-decoration: none; }
.footer-brand__logo span { color: var(--gd-accent); }
.footer-brand__logo img { height: 34px; width: auto; display: block; }
.footer-brand__desc { font-size: 14px; color: var(--gd-text-faint-on-dark); line-height: 1.7; max-width: 280px; margin-bottom: 20px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a { width: 36px; height: 36px; border-radius: 8px; background: rgba(255,255,255,0.05); border: 1px solid var(--gd-border-dark); display: flex; align-items: center; justify-content: center; color: var(--gd-text-faint-on-dark); transition: all var(--gd-transition); text-decoration: none; }
.footer-social a:hover { background: var(--gd-accent-dim); border-color: var(--gd-accent-brd); color: var(--gd-accent); }
.footer-social svg { width: 16px; height: 16px; fill: currentColor; }
.footer-col h4 { font-size: 13px; font-weight: 700; color: #fff; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 18px; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col ul a, .footer-col ul span { font-size: 14px; color: var(--gd-text-faint-on-dark); transition: color var(--gd-transition); text-decoration: none; }
.footer-col ul a:hover { color: var(--gd-accent); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--gd-text-faint-on-dark); flex-wrap: wrap; gap: 8px; }
.footer-bottom a { color: var(--gd-text-faint-on-dark); text-decoration: none; }
.footer-bottom a:hover { color: var(--gd-accent); }
.footer-contact-row { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.footer-contact-row a { font-size: 14px; color: var(--gd-text-muted-on-dark); text-decoration: none; transition: color var(--gd-transition); }
.footer-contact-row a:hover { color: var(--gd-accent); }

/* ── 16. WhatsApp Float ─────────────────────────────────── */
.wa-float { position: fixed; bottom: 28px; right: 28px; z-index: 999; width: 54px; height: 54px; border-radius: 50%; background: #25d366; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(37,211,102,0.35); transition: all var(--gd-transition); text-decoration: none; }
.wa-float:hover { transform: scale(1.1); background: #20bf5c; }
.wa-float svg { width: 28px; height: 28px; fill: #fff; }

/* ── 17. Ticker ─────────────────────────────────────────── */
.ticker-section { overflow: hidden; border-block: 1px solid var(--gd-border); padding-block: 14px; background: var(--gd-bg-2); }
.ticker-track   { display: flex; width: max-content; animation: tickerScroll 30s linear infinite; }
.ticker-track:hover { animation-play-state: paused; }
.ticker-item { display: flex; align-items: center; padding: 0 28px; white-space: nowrap; font-family: var(--gd-font-display); font-size: 13px; font-weight: 500; color: var(--gd-text-faint); }
.ticker-item::before { content: '◆'; color: var(--gd-accent); font-size: 6px; margin-right: 16px; }

/* ── 17b. Client logos ──────────────────────────────────── */
.clients-section { padding-block: 64px; background: var(--gd-bg); }
.clients-track-wrap {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.clients-track { display: flex; align-items: center; width: max-content; animation: tickerScroll 55s linear infinite; }
.clients-track:hover { animation-play-state: paused; }
.client-logo-item {
    display: flex; align-items: center; justify-content: center;
    width: 160px; height: 84px; margin: 0 22px; flex-shrink: 0;
    filter: grayscale(1); opacity: 0.55;
    transition: filter var(--gd-transition), opacity var(--gd-transition), transform var(--gd-transition);
}
.client-logo-item:hover { filter: grayscale(0); opacity: 1; transform: translateY(-2px); }
.client-logo-item img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* ── 18. Single Portfolio ───────────────────────────────── */
.portfolio-hero { padding-block: 80px; border-bottom: 1px solid var(--gd-border); background: var(--gd-bg); }
.portfolio-hero__meta { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.portfolio-hero__back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--gd-text-muted); transition: color var(--gd-transition); text-decoration: none; }
.portfolio-hero__back:hover { color: var(--gd-accent); }
.portfolio-hero__cat { background: var(--gd-accent-dim); color: var(--gd-accent-dark); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; }
.portfolio-hero h1 { margin-bottom: 10px; font-size: clamp(1.9rem, 3.6vw, 2.75rem); line-height: 1.15; }
.portfolio-hero__client { font-size: 14px; color: var(--gd-text-faint); }
/* Mid-page conversion band, shown after the Uzdevums/Risinājums story. */
.portfolio-cta { margin-top: 56px; padding: 40px; border-radius: var(--gd-radius-xl); background: var(--gd-bg-2); border: 1px solid var(--gd-border); text-align: center; }
.portfolio-cta__text { font-family: var(--gd-font-display); font-weight: 700; font-size: clamp(1.15rem, 2.2vw, 1.5rem); color: var(--gd-heading); letter-spacing: -0.01em; margin: 0 0 22px; }
.portfolio-cta__btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

.portfolio-featured-img { border-radius: var(--gd-radius-xl); overflow: hidden; margin-block: 48px; border: 1px solid var(--gd-border); }
.portfolio-featured-img img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }

.portfolio-results { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--gd-border); border-radius: var(--gd-radius-lg); overflow: hidden; margin-block: 48px; border: 1px solid var(--gd-border); }
.portfolio-result { background: var(--gd-bg); padding: 28px 24px; text-align: center; }
.portfolio-result__num   { font-family: var(--gd-font-display); font-size: 2.2rem; font-weight: 800; color: var(--gd-accent-dark); letter-spacing: -0.04em; line-height: 1; margin-bottom: 6px; }
.portfolio-result__label { font-size: 13px; color: var(--gd-text-faint); }

/* Story blocks (Uzdevums / Risinājums u.tml.) — hollow accent-coloured
   numerals, navy headings, alternating (zigzag) left/right composition so
   the section doesn't read as a repetitive vertical stack. */
.story-blocks { display: flex; flex-direction: column; gap: 56px; margin-block: 64px; }
.story-block {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 28px;
    align-items: start;
    max-width: 640px; /* keeps numeral + text grouped as one unit instead of
                          stretching across the whole container on wide
                          screens, which is what made the mirrored block
                          look disconnected/floating */
}
.story-block__num {
    grid-column: 1;
    font-family: var(--gd-font-display); font-weight: 800;
    font-size: clamp(3.4rem, 7vw, 5.5rem); line-height: 0.85; letter-spacing: -0.03em;
    color: transparent;
    -webkit-text-stroke: 2.5px var(--gd-accent);
    text-stroke: 2.5px var(--gd-accent); /* Firefox draft support */
    user-select: none;
}
.story-block__content { grid-column: 2; padding-top: 0.75em; }
.story-block__heading {
    font-family: var(--gd-font-display); font-weight: 800;
    font-size: clamp(1.3rem, 2.2vw, 1.75rem); color: var(--gd-heading);
    margin-bottom: 10px; letter-spacing: -0.01em;
}
.story-block__text { font-size: 16px; line-height: 1.8; color: var(--gd-text-muted); }

/* Zigzag: every second block mirrors the composition (numeral swaps to the
   right, text aligns toward it) AND shifts to the right side of the
   container — the max-width above keeps the pair grouped together as it
   moves, instead of the grid columns themselves stretching edge to edge. */
.story-block:nth-child(even) {
    grid-template-columns: 1fr auto;
    margin-left: auto;
}
.story-block:nth-child(even) .story-block__num { grid-column: 2; text-align: right; }
.story-block:nth-child(even) .story-block__content { grid-column: 1; padding-top: 0.25em; text-align: right; }

@media (max-width:640px) {
    .story-block,
    .story-block:nth-child(even) { grid-template-columns: 1fr; text-align: left !important; }
    .story-block__num,
    .story-block:nth-child(even) .story-block__num { grid-column: 1; grid-row: 1; text-align: left; font-size: 3rem; }
    .story-block__content,
    .story-block:nth-child(even) .story-block__content { grid-column: 1; grid-row: 2; padding-top: 8px; text-align: left; }
    .story-block__text,
    .story-block:nth-child(even) .story-block__text { margin-left: 0; }
}

.portfolio-video-wrap { border-radius: var(--gd-radius-xl); overflow: hidden; aspect-ratio: 16/9; background: var(--gd-bg-dark); margin-block: 48px; border: 1px solid var(--gd-border); position: relative; }
.portfolio-video-wrap iframe { width: 100%; height: 100%; border: none; display: block; }
/* Vertical (Shorts/Reels) — narrow portrait player instead of a wide 16:9 box */
.portfolio-video-wrap--vertical { aspect-ratio: 9/16; max-width: 420px; margin-inline: auto; }
/* Click-to-play facade: our own thumbnail + play button, no YouTube chrome until clicked */
.gd-video-facade { position: absolute; inset: 0; cursor: pointer; background: var(--gd-bg-dark); display: flex; align-items: center; justify-content: center; }
.gd-video-facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.gd-video-facade__scrim {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(11,11,11,0.15) 0%, rgba(11,11,11,0.15) 55%, rgba(11,11,11,0.65) 100%);
    transition: background var(--gd-transition);
}
.gd-video-facade:hover .gd-video-facade__scrim { background: rgba(11,11,11,0.45); }
.gd-video-facade__play {
    position: relative; z-index: 1;
    width: 84px; height: 84px; border-radius: 50%;
    background: var(--gd-accent); display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 40px rgba(247,170,31,0.45), 0 0 0 8px rgba(247,170,31,0.12);
    transition: transform var(--gd-transition), box-shadow var(--gd-transition);
}
.gd-video-facade__play svg { width: 30px; height: 30px; color: #0B0B0B; margin-left: 4px; }
.gd-video-facade:hover .gd-video-facade__play { transform: scale(1.08); box-shadow: 0 14px 48px rgba(247,170,31,0.6), 0 0 0 10px rgba(247,170,31,0.16); }
.gd-video-facade__label {
    position: absolute; z-index: 1; bottom: 22px; left: 50%; transform: translateX(-50%);
    font-family: var(--gd-font-display); font-size: 12px; font-weight: 700;
    letter-spacing: 0.5px; text-transform: uppercase; color: #fff;
    background: rgba(11,11,11,0.5); padding: 7px 16px; border-radius: 20px;
    backdrop-filter: blur(4px);
}
/* Custom minimal controls after playback starts — no YouTube UI at all (controls:0 via IFrame API) */
.gd-video-clickcatch { position: absolute; inset: 0; cursor: pointer; z-index: 1; }
.gd-video-toggle {
    position: absolute; z-index: 2; bottom: 18px; left: 18px;
    width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(11,11,11,0.55); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity var(--gd-transition), background var(--gd-transition), transform var(--gd-transition);
}
.gd-video-toggle svg { width: 18px; height: 18px; color: #fff; }
.portfolio-video-wrap:hover .gd-video-toggle,
.gd-video-toggle:focus-visible { opacity: 1; }
.gd-video-toggle:hover { background: var(--gd-accent); transform: scale(1.06); }
.gd-video-toggle:hover svg { color: #0B0B0B; }

.portfolio-gallery { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-block: 48px; }
.portfolio-gallery img { border-radius: var(--gd-radius); width: 100%; aspect-ratio: 4/3; object-fit: cover; border: 1px solid var(--gd-border); }
.portfolio-gallery img:first-child { grid-column: span 2; aspect-ratio: 16/9; }

/* CSS Device Mockup */
/* Composed device mockup: laptop is the base, phone overlaps its bottom-
   right corner so the two read as ONE image, not two side-by-side. The phone
   is absolutely positioned and sized as a % of the wrap, so the whole
   composition scales as one unit down to mobile. */
.device-mockup-wrap { position: relative; max-width: 760px; margin: 48px auto 0; padding-bottom: 26px; }
/* Laptop is the dominant device (left, ~84% of the wrap); the phone overlaps its
   bottom-right corner at a realistic size (phone ≈ 26% of the laptop's width,
   like a real phone next to a laptop). */
.device-laptop { width: 84%; max-width: 84%; }
.device-laptop__frame { background: #2C2C2E; border-radius: 12px 12px 0 0; padding: 10px 10px 0; border: 1px solid rgba(255,255,255,0.07); box-shadow: 0 20px 60px rgba(0,0,0,0.18); }
.device-laptop__bar   { display: flex; align-items: center; gap: 6px; padding: 0 0 8px; }
.device-laptop__dot   { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.device-laptop__dot:nth-child(1) { background: #FF5F57; }
.device-laptop__dot:nth-child(2) { background: #FFBD2E; }
.device-laptop__dot:nth-child(3) { background: #28C840; }
.device-laptop__screen { border-radius: 4px; overflow: hidden; aspect-ratio: 16/10; background: #E5E5E5; }
/* object-fit:cover + top — auto screenshots are captured at this frame's exact
   aspect (so cover = a perfect fit, no crop), and a manually uploaded image of
   any other aspect is cropped from the TOP rather than letterboxed. Either way
   there is never a grey strip (which is what contain left behind whenever the
   aspect didn't match). */
.device-laptop__screen img { width: 100%; height: 100%; object-fit: fill; display: block; }
.device-laptop__base  { background: #3A3A3C; height: 14px; border-radius: 0 0 4px 4px; }
.device-laptop__stand { width: 40%; height: 8px; background: #3A3A3C; margin: 0 auto; border-radius: 0 0 8px 8px; }
.device-laptop__foot  { width: 58%; height: 4px; background: rgba(0,0,0,0.12); margin: 0 auto; border-radius: 2px; }
/* Modern phone: larger + readable, vertically centred over the laptop's right
   edge. Dynamic-island pill, thin bezels, deep rounded corners. */
.device-phone { position: absolute; right: 1%; bottom: -2%; top: auto; transform: none; width: 22%; z-index: 3; }
.device-phone__frame  { position: relative; background: linear-gradient(155deg,#3a3a3c,#1c1c1e); border-radius: 34px; border: 1px solid rgba(255,255,255,0.09); padding: 8px; box-shadow: 0 30px 70px rgba(0,0,0,0.30), inset 0 0 0 2px rgba(255,255,255,0.04); }
.device-phone__camera { position: absolute; top: 15px; left: 50%; transform: translateX(-50%); width: 30%; max-width: 46px; height: 12px; background: #060606; border-radius: 8px; z-index: 4; margin: 0; }
.device-phone__screen { position: relative; border-radius: 26px; overflow: hidden; aspect-ratio: 1284 / 2778; background: #E5E5E5; }
/* height:auto keeps the mobile shot at natural aspect: an ~one-screen shot fills
   the frame exactly; a tall full-page shot overflows and JS auto-scrolls it. */
.device-phone__screen img { width: 100%; height: auto; display: block; will-change: transform; }

/* Entrance + power-on reveal — JS adds .will-reveal, then .is-revealed when the
   mockup scrolls into view. No-JS keeps everything visible (no .will-reveal). */
.device-mockup-wrap.will-reveal { opacity: 0; transform: translateY(30px) scale(.985); }
.device-mockup-wrap.will-reveal.is-revealed { opacity: 1; transform: none; transition: opacity .7s ease, transform .85s cubic-bezier(.2,.75,.2,1); }
.device-mockup-wrap.will-reveal .device-laptop__screen,
.device-mockup-wrap.will-reveal .device-phone__screen { filter: brightness(.5) saturate(.65); }
.device-mockup-wrap.will-reveal.is-revealed .device-laptop__screen,
.device-mockup-wrap.will-reveal.is-revealed .device-phone__screen { filter: none; transition: filter 1s ease .25s; }

/* Work type chips */
.portfolio-work-types { margin-block: 40px; padding: 24px; background: var(--gd-bg-2); border-radius: var(--gd-radius-lg); border: 1px solid var(--gd-border); }
.portfolio-work-types__title { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gd-text-faint); margin-bottom: 14px; }
.work-type-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.work-chip         { display: inline-flex; align-items: center; gap: 5px; background: var(--gd-bg); border: 1px solid var(--gd-border); border-radius: 20px; padding: 5px 13px; font-size: 12px; font-weight: 600; color: var(--gd-text-muted); }
.work-chip--active { background: var(--gd-accent-dim); border-color: var(--gd-accent-brd); color: var(--gd-accent-dark); }
/* ── Project Scope ─────────────────────────────────────── */
.project-scope { margin-block: 56px 0; background: var(--gd-bg-dark); border-radius: var(--gd-radius-xl); overflow: hidden; position: relative; }
.project-scope::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, var(--gd-accent) 35%, var(--gd-accent) 65%, transparent 100%); }
.project-scope__block { padding: 36px 40px; }
.project-scope__block + .project-scope__block { border-top: 1px solid rgba(255,255,255,0.07); }
.project-scope__eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--gd-accent); margin: 0 0 20px; display: block; }
.project-scope__eyebrow::after { display: none; }
.scope-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.scope-item { display: flex; align-items: center; gap: 10px; padding: 9px 15px 9px 11px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09); border-radius: 8px; transition: background .18s, border-color .18s, transform .18s; cursor: default; }
.scope-item:hover { background: rgba(247,170,31,0.13); border-color: rgba(247,170,31,0.38); transform: translateY(-1px); }
.scope-item__icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: rgba(247,170,31,0.14); border-radius: 6px; }
.scope-item__icon svg { width: 14px; height: 14px; stroke: var(--gd-accent); }
.scope-item__body { min-width: 0; }
.scope-item__label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.88); line-height: 1.2; }
.scope-item__desc { display: none; }
/* Platform pills */
.platform-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.platform-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px 7px 10px; border-radius: 30px; font-size: 12px; font-weight: 700; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.78); transition: background .18s, border-color .18s, transform .15s; cursor: default; }
.platform-pill:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.22); transform: translateY(-1px); }
.platform-pill svg { width: 14px; height: 14px; flex-shrink: 0; stroke: rgba(255,255,255,0.55); }
.platform-pill--youtube   { background: rgba(255,50,50,0.13);    border-color: rgba(255,80,80,0.28);    color: #ff7a7a; }
.platform-pill--youtube   svg { stroke: #ff7a7a; }
.platform-pill--instagram { background: rgba(225,48,108,0.13);  border-color: rgba(225,48,108,0.28);  color: #f07295; }
.platform-pill--instagram svg { stroke: #f07295; }
.platform-pill--tiktok    { background: rgba(255,255,255,0.07);  border-color: rgba(255,255,255,0.14);  color: rgba(255,255,255,0.85); }
.platform-pill--tiktok    svg { stroke: rgba(255,255,255,0.75); }
.platform-pill--facebook  { background: rgba(24,119,242,0.14);  border-color: rgba(24,119,242,0.32);  color: #6baeff; }
.platform-pill--facebook  svg { stroke: #6baeff; }
.platform-pill--google    { background: rgba(66,133,244,0.14);  border-color: rgba(66,133,244,0.28);  color: #7ab4ff; }
.platform-pill--google    svg { stroke: #7ab4ff; }
.platform-pill--meta      { background: rgba(0,130,251,0.13);   border-color: rgba(0,130,251,0.28);   color: #55b8ff; }
.platform-pill--meta      svg { stroke: #55b8ff; }
.platform-pill--linkedin  { background: rgba(0,119,181,0.14);   border-color: rgba(0,119,181,0.30);   color: #4db3e8; }
.platform-pill--linkedin  svg { stroke: #4db3e8; }
.platform-pill--x-twitter { background: rgba(255,255,255,0.07);  border-color: rgba(255,255,255,0.14);  color: rgba(255,255,255,0.85); }
.platform-pill--x-twitter svg { stroke: rgba(255,255,255,0.75); }
.platform-pill--majaslapa { background: rgba(247,170,31,0.12);  border-color: rgba(247,170,31,0.28);  color: var(--gd-accent); }
.platform-pill--majaslapa svg { stroke: var(--gd-accent); }

.portfolio-content { padding-block: 64px; }
.portfolio-content__body { max-width: 720px; }
.portfolio-content__body h2,.portfolio-content__body h3 { margin-block: 32px 12px; }
.portfolio-content__body p { margin-bottom: 18px; }
/* Portfolio prev/next navigation */
.portfolio-nav { background: var(--gd-bg-dark); border-top: none; padding: 0; }
.portfolio-nav__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; min-height: 110px; }
.portfolio-nav__item { display: flex; align-items: center; gap: 20px; padding: 32px 40px; text-decoration: none; background: transparent; border: none; border-radius: 0; max-width: none; flex: none; min-width: 0; transition: background .22s; }
.portfolio-nav__item:hover { background: rgba(247,170,31,0.07); box-shadow: none; transform: none; border-color: transparent; }
.portfolio-nav__item--prev { border-right: 1px solid rgba(255,255,255,0.07); }
.portfolio-nav__item--next { flex-direction: row-reverse; border-left: 1px solid rgba(255,255,255,0.07); }
.portfolio-nav__item svg { width: 22px; height: 22px; stroke: rgba(255,255,255,0.25); flex-shrink: 0; transition: stroke .22s, transform .22s; }
.portfolio-nav__item:hover svg { stroke: var(--gd-accent); }
.portfolio-nav__item--prev:hover svg { transform: translateX(-4px); }
.portfolio-nav__item--next:hover svg { transform: translateX(4px); }
.portfolio-nav__text { min-width: 0; }
.portfolio-nav__label { display: block; font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,0.30); margin-bottom: 7px; }
.portfolio-nav__title { display: block; font-size: 16px; font-weight: 700; color: rgba(255,255,255,0.82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .22s; }
.portfolio-nav__item:hover .portfolio-nav__title { color: #fff; }
.portfolio-nav__all { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; padding: 0 36px; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.28); border: none; border-left: 1px solid rgba(255,255,255,0.07); border-right: 1px solid rgba(255,255,255,0.07); text-decoration: none; transition: color .22s, background .22s; white-space: nowrap; border-radius: 0; background: transparent; }
.portfolio-nav__all:hover { color: var(--gd-accent); background: rgba(247,170,31,0.07); border-color: rgba(255,255,255,0.07); }
.portfolio-nav__all svg { stroke: currentColor; width: 20px; height: 20px; }

/* ── 19. Archive ────────────────────────────────────────── */
.archive-header { padding-block: 80px 56px; border-bottom: 1px solid var(--gd-border); margin-bottom: 56px; }
.portfolio-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 28px; }
.filter-btn { background: transparent; border: 1px solid var(--gd-border); color: var(--gd-text-muted); padding: 7px 16px; border-radius: 20px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all var(--gd-transition); font-family: var(--gd-font-body); }
.filter-btn:hover,.filter-btn.active { background: var(--gd-accent-dim); border-color: var(--gd-accent-brd); color: var(--gd-accent-dark); }
.portfolio-archive-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; padding-bottom: 80px; }

/* ── 20. Contact (inline section) ───────────────────────── */
.contact-section { padding-block: 96px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start; }
.contact-info h2 { margin-bottom: 14px; }
.contact-info p  { margin-bottom: 32px; }
.contact-info__items { display: flex; flex-direction: column; gap: 20px; margin-top: 32px; }
.contact-info__item  { display: flex; align-items: flex-start; gap: 14px; }
.contact-info__icon  { width: 40px; height: 40px; background: var(--gd-accent-dim); border: 1px solid var(--gd-accent-brd); border-radius: var(--gd-radius); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-info__icon svg { width: 18px; height: 18px; stroke: var(--gd-accent); fill: none; stroke-width: 1.8; }
.contact-info__text strong { display: block; font-size: 14px; font-weight: 600; color: var(--gd-text); margin-bottom: 2px; }
.contact-info__text span   { font-size: 13px; color: var(--gd-text-faint); }
.wpforms-container { background: var(--gd-bg-2); border: 1px solid var(--gd-border); border-radius: var(--gd-radius-xl); padding: 36px; }
.wpforms-form .wpforms-field-label { font-size: 13px !important; font-weight: 600 !important; color: var(--gd-text-muted) !important; margin-bottom: 8px !important; }
.wpforms-form input[type="text"],.wpforms-form input[type="email"],.wpforms-form input[type="tel"],.wpforms-form select,.wpforms-form textarea { background: var(--gd-bg) !important; border: 1px solid var(--gd-border) !important; border-radius: var(--gd-radius) !important; color: var(--gd-text) !important; font-family: var(--gd-font-body) !important; font-size: 14px !important; padding: 12px 14px !important; }
.wpforms-form input:focus,.wpforms-form textarea:focus { border-color: var(--gd-accent) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(247,170,31,0.10) !important; }
.wpforms-form .wpforms-submit { background: var(--gd-accent) !important; color: #0B0B0B !important; font-family: var(--gd-font-display) !important; font-weight: 700 !important; font-size: 14px !important; border: none !important; border-radius: var(--gd-radius) !important; padding: 14px 28px !important; cursor: pointer !important; transition: all var(--gd-transition) !important; width: 100% !important; }
.wpforms-form .wpforms-submit:hover { background: #f0a510 !important; transform: translateY(-1px) !important; }

/* ── 21. Generic & 404 ──────────────────────────────────── */
.page-content { padding-block: 80px; max-width: 800px; margin-inline: auto; }
.page-content h1 { margin-bottom: 24px; }
.page-content h2,.page-content h3 { margin-block: 32px 12px; }
.page-content p  { margin-bottom: 18px; }
.page-content ul,.page-content ol { padding-left: 20px; color: var(--gd-text-muted); margin-bottom: 18px; }
.page-content ul li { list-style: disc; margin-bottom: 6px; }
.page-content ol li { list-style: decimal; margin-bottom: 6px; }
.error-404-section { min-height: 80vh; display: flex; align-items: center; justify-content: center; text-align: center; padding-block: 80px; }
.error-404-section .big-num { font-family: var(--gd-font-display); font-size: clamp(6rem,20vw,14rem); font-weight: 800; color: var(--gd-accent-brd); line-height: 1; letter-spacing: -0.06em; margin-bottom: 16px; }

/* ── 22. Animations ─────────────────────────────────────── */
@keyframes pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.5; transform:scale(0.85); } }
@keyframes tickerScroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes fadeInUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeInLeft { from { opacity:0; transform:translateX(-24px); } to { opacity:1; transform:translateX(0); } }
@keyframes scaleIn { from { opacity:0; transform:scale(0.94); } to { opacity:1; transform:scale(1); } }
@keyframes modalIn { from { opacity:0; transform:translateY(20px) scale(0.97); } to { opacity:1; transform:translateY(0) scale(1); } }

.animate-in { opacity:0; transform:translateY(24px); }
.animate-in[data-anim="left"]  { transform:translateX(-24px); }
.animate-in[data-anim="right"] { transform:translateX(24px); }
.animate-in[data-anim="scale"] { transform:scale(0.94); }
.animate-in.is-visible {
    animation: fadeInUp 0.6s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
}
.animate-in[data-anim="left"].is-visible  { animation-name: fadeInLeft; }
.animate-in[data-anim="scale"].is-visible { animation-name: scaleIn; }
.animate-in:nth-child(1).is-visible { animation-delay:0s; }
.animate-in:nth-child(2).is-visible { animation-delay:0.07s; }
.animate-in:nth-child(3).is-visible { animation-delay:0.14s; }
.animate-in:nth-child(4).is-visible { animation-delay:0.21s; }
.animate-in:nth-child(5).is-visible { animation-delay:0.28s; }
.animate-in:nth-child(6).is-visible { animation-delay:0.35s; }

/* ── 23. Mobile Nav ─────────────────────────────────────── */
@media (max-width:900px) {
    .nav-links  { display:none; }
    /* .nav-toggle stays in NORMAL FLOW (position:relative), positioned naturally
       by the header's own flex layout — this way it's always in the right spot
       whether or not .announce-bar is present, instead of a hardcoded pixel
       coordinate that breaks the moment the layout above it changes.
       The actual fix is the STACKING CONTEXT chain: .site-header must beat
       .announce-bar (z-index:200) so the WHOLE header — and everything inside
       it, including this toggle — paints above the announce bar. Then
       .nav-toggle only needs to beat .nav-links.open (z-index:9999) *within*
       that header context. Neither comparison is about the toggle's own
       z-index in isolation — a fixed/high z-index on a descendant can never
       win against a sibling of an ancestor that has a lower z-index. */
    .site-header { z-index: 500; }
    .nav-toggle {
        display:flex;
        z-index: 10000;
        position: relative;
        border-radius: 50%;
        padding: 4px;
        transition: background var(--gd-transition);
    }
    .nav-toggle.open {
        background: var(--gd-accent-dim);
    }
    .nav-toggle.open span {
        background: var(--gd-accent-dark);
    }
    .nav-links.open {
        display:flex; flex-direction:column;
        position:fixed; inset:0; top:0; padding-top:88px;
        background:rgba(255,255,255,0.98);
        backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
        padding-inline:32px; gap:28px; z-index:9999;
        overflow-y: auto; -webkit-overflow-scrolling: touch;
    }
    .nav-links.open a { font-size:1.3rem; font-weight:600; color:var(--gd-text); }
    .nav-cta-wrap .btn { display:none; }
}


/* ── 24. Responsive ─────────────────────────────────────── */

/* Tablet landscape */
@media (max-width:1024px) {
    .footer-main { grid-template-columns:1fr 1fr; gap:36px; }
    .portfolio-grid,.portfolio-archive-grid { grid-template-columns:repeat(2,1fr); }
    .testimonials-grid { grid-template-columns:repeat(2,1fr); }
}

/* Tablet portrait */
@media (max-width:768px) {
    .section    { padding-block:56px; }
    .section--lg { padding-block:72px; }

    /* Hero */
    .hero-section { min-height:auto; padding-block:56px; }
    .hero-title   { font-size:2.4rem; }
    .hero-sub     { font-size:1rem; }
    .hero-social-strip { margin-top:28px; padding-top:24px; gap:8px; }
    /* Top announce-bar already shows this message — the badge above H1
       just duplicates it and makes the mobile hero feel crowded. */
    .hero-badge   { display:none; }

    /* Stats */
    .stats-bar__inner { grid-template-columns:repeat(2,1fr); }
    .stat-item:nth-child(3) { border-left:none; border-top:1px solid var(--gd-border-dark); }
    .stat-item:nth-child(4) { border-top:1px solid var(--gd-border-dark); }

    /* Grids */
    .services-grid,.portfolio-grid,.portfolio-archive-grid,.process-grid,.testimonials-grid { grid-template-columns:1fr; }
    .process-step { border-right:none; border-bottom:1px solid var(--gd-border-dark); }
    .process-step:last-child { border-bottom:none; }
    .contact-grid { grid-template-columns:1fr; gap:40px; }
    .footer-main  { grid-template-columns:1fr 1fr; }

    /* Portfolio single */
    .portfolio-results { grid-template-columns:repeat(3,1fr); }
    .project-scope__block { padding:28px 24px; }
    .portfolio-hero { padding-block:48px 32px; }
    .portfolio-cta { padding:28px 20px; }
    .portfolio-cta__btns .btn { flex:1 1 auto; justify-content:center; }

    /* Portfolio nav — stack vertically */
    .portfolio-nav__inner { grid-template-columns:1fr; min-height:auto; }
    .portfolio-nav__item  { padding:22px 24px; border-right:none !important; border-left:none !important; border-bottom:1px solid rgba(255,255,255,0.07) !important; }
    .portfolio-nav__item--next { flex-direction:row; }
    .portfolio-nav__item--next:hover svg { transform:translateX(4px); }
    .portfolio-nav__all   { flex-direction:row; justify-content:center; gap:10px; padding:18px 24px; border-left:none !important; border-right:none !important; border-top:1px solid rgba(255,255,255,0.07) !important; }

    /* CTA */
    .cta-section { padding-block:72px; }
    .cta-section .btn-group { flex-direction:column; align-items:center; }
    .cta-section .btn-group .btn { width:100%; max-width:320px; justify-content:center; }

    /* Device mockup — on small screens stack the phone below the laptop at a
       readable width instead of a tiny overlap. */
    .device-mockup-wrap { max-width: 440px; padding-bottom: 0; }
    .device-laptop { width: 100%; max-width: 100%; }
    .device-phone { position: static; transform: none; width: 58%; margin: 18px auto 0; right: auto; top: auto; bottom: auto; }

    /* Gallery */
    .portfolio-gallery { grid-template-columns:1fr; }
    .portfolio-gallery img:first-child { grid-column:span 1; aspect-ratio:4/3; }

    /* Archive */
    .portfolio-filter { gap:6px; }
    .filter-btn { font-size:12px; padding:6px 13px; }

    /* Booking calendar */
    .cal-wrap { grid-template-columns:1fr; }
    .cal-slots-grid { grid-template-columns:repeat(3,1fr); }
}

/* Phone */
@media (max-width:480px) {
    .container   { padding-inline:18px; }

    /* Smaller on phones: the uploaded logo file is likely only sized for
       desktop 1x display, so it looks soft on high-density phone screens.
       Displaying it a bit smaller raises the effective pixel density for
       the same source file. The real fix is re-uploading a higher-res
       logo (ideally ~600px wide) via Customizer — this is a mitigation. */
    .site-logo img { height:26px; }

    /* Hero */
    .hero-section { padding-block:48px; }
    .hero-title   { font-size:2rem; }
    .hero-sub     { font-size:0.95rem; }
    .hero-social-strip { gap:6px; }

    /* Stats — single column */
    .stats-bar__inner { grid-template-columns:1fr; }
    .stat-item { border-left:none !important; border-top:1px solid var(--gd-border-dark) !important; }
    .stat-item:first-child { border-top:none !important; }

    /* Buttons */
    .btn         { padding:11px 20px; font-size:13px; }
    .btn-group   { flex-direction:column; align-items:flex-start; }
    .btn-group .btn { width:100%; justify-content:center; }

    /* Footer */
    .footer-main { grid-template-columns:1fr; gap:28px; }

    /* Portfolio */
    .portfolio-results { grid-template-columns:repeat(2,1fr); }
    .portfolio-nav__item { padding:18px; }
    .portfolio-nav__title { font-size:13px; }

    /* Scope */
    .project-scope__block { padding:22px 18px; }
    .scope-item   { padding:8px 12px 8px 9px; }

    /* Service card */
    .service-card { padding:24px 20px; }

    /* Announce bar */
    .announce-bar { font-size:12px; padding:9px 16px; }

    /* Headings */
    h2 { font-size:clamp(1.6rem,5.5vw,2.4rem); }
}

/* Small phones (iPhone SE, Galaxy A) */
@media (max-width:390px) {
    .container   { padding-inline:14px; }
    .hero-title  { font-size:1.85rem; }
    .hero-badge  { font-size:11px; padding:4px 11px; }
    .hero-sub    { font-size:0.9rem; }
    .portfolio-results { grid-template-columns:1fr; }
    .portfolio-nav__title { max-width:180px; }
}

/* ── 25. Booking Calendar (inside modal) ────────────────── */
.cal-wrap { display: grid; grid-template-columns: 340px 1fr; gap: 40px; align-items: start; }
.cal-picker { background: var(--gd-bg); border: 1px solid var(--gd-border); border-radius: var(--gd-radius-xl); overflow: hidden; box-shadow: 0 4px 32px rgba(0,0,0,0.05); }
.cal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--gd-border); }
.cal-month-label { font-family: var(--gd-font-display); font-weight: 700; font-size: 1rem; color: var(--gd-text); }
.cal-nav { width: 34px; height: 34px; border: 1px solid var(--gd-border); border-radius: 8px; background: var(--gd-bg-2); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--gd-text-muted); transition: all var(--gd-transition); }
.cal-nav:hover:not([disabled]) { border-color: var(--gd-accent-brd); color: var(--gd-accent); background: var(--gd-accent-dim); }
.cal-nav[disabled] { opacity: 0.3; cursor: not-allowed; }
.cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 3px; padding: 16px; }
.cal-dow { text-align: center; font-size: 11px; font-weight: 700; color: var(--gd-text-faint); padding: 6px 2px; letter-spacing: 0.5px; }
.cal-day { aspect-ratio: 1; border: none; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all var(--gd-transition); background: transparent; font-family: var(--gd-font-body); }
.cal-day--empty { pointer-events: none; background: transparent; }
.cal-day--avail { color: var(--gd-text); }
.cal-day--avail:hover { background: var(--gd-accent-dim); color: var(--gd-accent-dark); font-weight: 600; }
.cal-day--sel { background: var(--gd-accent) !important; color: #0B0B0B !important; font-weight: 700 !important; box-shadow: 0 4px 12px rgba(247,170,31,0.35); }
.cal-day--off { color: var(--gd-text-faint); cursor: not-allowed; opacity: 0.35; }
.cal-aside { display: flex; flex-direction: column; gap: 20px; max-height: 500px; overflow-y: auto; }
.cal-hint { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 24px; background: var(--gd-bg); border: 1.5px dashed var(--gd-border); border-radius: var(--gd-radius-xl); color: var(--gd-text-faint); gap: 12px; min-height: 220px; }
.cal-hint svg { opacity: 0.4; }
.cal-hint p { font-size: 14px; color: var(--gd-text-faint); margin: 0; }
.cal-slots { background: var(--gd-bg); border: 1px solid var(--gd-border); border-radius: var(--gd-radius-lg); padding: 20px; }
.cal-slots-title { font-size: 13px; font-weight: 600; color: var(--gd-text); margin-bottom: 14px; }
.cal-slots-date { color: var(--gd-accent-dark); }
.cal-slots-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }
.slot-btn { padding: 10px 6px; border: 1px solid var(--gd-border); border-radius: 8px; background: var(--gd-bg-2); font-size: 13px; font-weight: 600; color: var(--gd-text-muted); cursor: pointer; transition: all var(--gd-transition); font-family: var(--gd-font-body); }
.slot-btn:hover { border-color: var(--gd-accent-brd); color: var(--gd-accent-dark); background: var(--gd-accent-dim); }
.slot-btn--sel { background: var(--gd-accent) !important; border-color: var(--gd-accent) !important; color: #0B0B0B !important; box-shadow: 0 3px 10px rgba(247,170,31,0.30); }
.cal-form-wrap { background: var(--gd-bg); border: 1.5px solid var(--gd-accent-brd); border-radius: var(--gd-radius-lg); padding: 20px; }
.cal-form-title { font-size: 14px; font-weight: 700; color: var(--gd-text); margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.cal-sel-summary { font-size: 12px; font-weight: 600; color: var(--gd-accent-dark); background: var(--gd-accent-dim); padding: 3px 10px; border-radius: 12px; border: 1px solid var(--gd-accent-brd); }
.cal-ref-banner { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--gd-accent-dark); background: var(--gd-accent-dim); border: 1px solid var(--gd-accent-brd); border-radius: var(--gd-radius); padding: 9px 13px; margin-bottom: 14px; }
.cal-ref-banner::before { content: '💬'; font-size: 13px; }
.cal-form-row { margin-bottom: 10px; }
.cal-input { width: 100%; padding: 11px 13px; border: 1px solid var(--gd-border); border-radius: var(--gd-radius); font-size: 14px; font-family: var(--gd-font-body); color: var(--gd-text); background: var(--gd-bg-2); transition: border-color var(--gd-transition), box-shadow var(--gd-transition); }
.cal-input:focus { outline: none; border-color: var(--gd-accent); box-shadow: 0 0 0 3px rgba(247,170,31,0.10); background: var(--gd-bg); }
.cal-contact-type { display: flex; gap: 10px; }
.cal-type-opt { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--gd-border); border-radius: var(--gd-radius); cursor: pointer; font-size: 14px; font-family: var(--gd-font-body); color: var(--gd-text-muted); transition: all var(--gd-transition); flex: 1; background: var(--gd-bg-2); }
.cal-type-opt.is-checked { border-color: var(--gd-accent); background: var(--gd-accent-dim); color: var(--gd-accent-dark); font-weight: 600; }
.cal-type-opt input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.cal-submit { width: 100%; justify-content: center; margin-top: 6px; }
.cal-thank { text-align: center; padding: 40px 24px 32px; background: var(--gd-bg); border: 1.5px solid var(--gd-accent-brd); border-radius: var(--gd-radius-xl); }
.cal-thank__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--gd-accent); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 22px; font-weight: 900; color: #0B0B0B; }
.cal-thank h3 { margin-bottom: 8px; color: var(--gd-heading); }
.cal-thank p  { color: var(--gd-text-muted); font-size: 14px; margin: 0 0 20px; }
@media (max-width:820px) {
    .cal-wrap { grid-template-columns: 1fr; gap: 20px; }
    .cal-aside { max-height: none; }
}
@media (max-width:480px) {
    .cal-slots-grid { grid-template-columns: repeat(3,1fr); }
}

/* ── 26. Contact Page (full page) ────────────────────────── */
.contact-page-hero { background: var(--gd-bg-dark); padding-block: 80px 56px; position: relative; overflow: hidden; }
.contact-page-hero::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse 60% 80% at 100% 50%, rgba(247,170,31,0.06) 0%, transparent 60%); pointer-events:none; }
.contact-page-hero .container { position: relative; z-index: 1; }
.contact-page-hero .section__tag { color: var(--gd-accent); }
.contact-page-hero h1 { color: var(--gd-text-on-dark); margin-bottom: 12px; }
.contact-page-hero p  { color: var(--gd-text-muted-on-dark); max-width: 480px; margin: 0; }
.contact-map-wrap { height: 420px; overflow: hidden; position: relative; }
.contact-map-wrap::after { content:''; position:absolute; inset:0; pointer-events:none; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06); }
.contact-map-wrap iframe { width: 100%; height: 100%; border: none; display: block; filter: grayscale(15%); }
.contact-fullpage-section { padding-block: 80px; }
.contact-fullpage-grid { display: grid; grid-template-columns: 1fr 1.55fr; gap: 64px; align-items: start; }
.contact-details { position: sticky; top: 100px; }
.contact-details h3 { margin-bottom: 24px; font-size: 1.3rem; }
.contact-rekviziti { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--gd-border); }
.contact-rekviziti h4 { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gd-text-faint); margin-bottom: 14px; }
.contact-rekviziti p  { font-size: 13px; color: var(--gd-text-faint); line-height: 1.9; margin: 0; }
@media (max-width:768px) {
    .contact-fullpage-grid { grid-template-columns: 1fr; gap: 40px; }
    .contact-details { position: static; }
    .contact-map-wrap { height: 280px; }
    .contact-page-hero { padding-block: 56px 40px; }
}

/* ── 27. FAQ ─────────────────────────────────────────────── */
.faq-item { border-bottom: 1px solid var(--gd-border); }
.faq-item__q {
    width: 100%; display: flex; justify-content: space-between; align-items: center;
    padding: 22px 0; background: transparent; border: none; cursor: pointer;
    text-align: left; gap: 16px; font-family: var(--gd-font-display);
}
.faq-item__q-text {
    font-size: 16px; font-weight: 600; color: var(--gd-text); line-height: 1.4;
}
.faq-icon {
    flex-shrink: 0; transition: transform 0.25s ease;
    stroke: var(--gd-accent);
}
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-item__a {
    max-height: 0; overflow: hidden; transition: max-height 0.32s ease;
}
.faq-item__a-inner { padding-bottom: 20px; }
.faq-item__a-inner p { color: var(--gd-text-muted); margin: 0; }

/* ── 28. Booking Modal ───────────────────────────────────── */
/* Demote sticky header when modal is open — fixes iOS sticky-above-fixed bug */
body.modal-open .announce-bar,
body.modal-open .site-header { z-index: 1 !important; }

.gd-modal-overlay {
    position: fixed; inset: 0; z-index: 99999;
    background: rgba(11,11,11,0.65);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    opacity: 0; pointer-events: none;
    transition: opacity 0.28s ease;
}
.gd-modal-overlay.is-open {
    opacity: 1;
    pointer-events: all;
}
.gd-modal {
    background: var(--gd-bg);
    border-radius: var(--gd-radius-xl);
    width: 100%; max-width: 960px;
    max-height: 90vh;
    overflow-y: auto;
    transform: translateY(28px) scale(0.97);
    transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
    box-shadow: 0 32px 80px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.06);
}
.gd-modal-overlay.is-open .gd-modal {
    transform: translateY(0) scale(1);
}
.gd-modal-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 30px 36px 20px; gap: 16px;
    border-bottom: 1px solid var(--gd-border);
}
.gd-modal-header-text .section__tag { margin-bottom: 6px; }
.gd-modal-header-text h3 { font-size: 1.5rem; margin-bottom: 4px; }
.gd-modal-header-text p  { font-size: 14px; color: var(--gd-text-muted); margin: 0; }
.gd-modal-close {
    width: 38px; height: 38px; flex-shrink: 0;
    border: 1.5px solid var(--gd-border); border-radius: 50%;
    background: var(--gd-bg-2); color: var(--gd-text-muted);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; line-height: 1; cursor: pointer;
    transition: all var(--gd-transition);
}
.gd-modal-close:hover {
    background: var(--gd-text); color: #fff; border-color: var(--gd-text);
    transform: rotate(90deg);
}
.gd-modal-body { padding: 28px 36px 36px; }
@media (max-width:820px) {
    .gd-modal-header { padding: 22px 20px 16px; }
    .gd-modal-body   { padding: 20px 20px 28px; }
}
@media (max-width:480px) {
    .gd-modal-overlay { padding: 0; align-items: flex-end; }
    .gd-modal {
        border-radius: var(--gd-radius-lg) var(--gd-radius-lg) 0 0;
        max-height: calc(100dvh - 60px);
        transform: translateY(100%);
    }
    .gd-modal-overlay.is-open .gd-modal { transform: translateY(0); }
    .gd-modal-header { position: sticky; top: 0; background: var(--gd-bg); z-index: 2; }
}

/* ── 29. Service Landing Page ────────────────────────────── */
.service-hero { background: var(--gd-bg-dark); padding-block: 64px 72px; position: relative; overflow: hidden; }
.service-hero::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse 60% 80% at 100% 20%, rgba(247,170,31,0.09) 0%, transparent 60%); pointer-events:none; }
.service-hero .container { position: relative; z-index: 1; }
.service-hero__back { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--gd-text-faint-on-dark); text-decoration: none; margin-bottom: 24px; transition: color .2s, gap .2s; }
.service-hero__back:hover { color: var(--gd-accent); gap: 12px; }
.service-hero .section__tag { color: var(--gd-accent); }
.service-hero h1 { color: var(--gd-text-on-dark); margin-bottom: 16px; max-width: 780px; }
.service-hero p.service-hero__sub { color: var(--gd-text-muted-on-dark); max-width: 560px; font-size: 1.1rem; margin-bottom: 28px; }
.trust-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.trust-pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 30px; padding: 8px 16px 8px 12px; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.82); }
.trust-pill svg { width: 15px; height: 15px; stroke: var(--gd-accent); flex-shrink: 0; }

/* Format cards */
.format-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 40px; }
.format-card { background: var(--gd-bg); border: 1px solid var(--gd-border); border-radius: var(--gd-radius-lg); padding: 30px 28px; transition: all var(--gd-transition); }
.format-card:hover { border-color: var(--gd-accent-brd); box-shadow: 0 12px 40px rgba(247,170,31,0.10); transform: translateY(-2px); }
.format-card__icon { width: 46px; height: 46px; background: var(--gd-accent-dim); border: 1px solid var(--gd-accent-brd); border-radius: var(--gd-radius); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.format-card__icon svg { width: 22px; height: 22px; fill: none; stroke: var(--gd-accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.format-card__title { font-family: var(--gd-font-display); font-size: 1.05rem; font-weight: 700; color: var(--gd-heading); margin-bottom: 8px; letter-spacing: -0.02em; }
.format-card__desc { font-size: 13.5px; color: var(--gd-text-muted); line-height: 1.65; margin: 0; }

/* Service detail rows (icon + title + desc), light or dark */
.service-detail-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 40px; }
.service-detail-item { display: flex; flex-direction: column; gap: 14px; }
.service-detail-item__icon { width: 44px; height: 44px; background: var(--gd-accent-dim); border: 1px solid var(--gd-accent-brd); border-radius: var(--gd-radius); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.service-detail-item__icon svg { width: 20px; height: 20px; fill: none; stroke: var(--gd-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.service-detail-item__title { font-family: var(--gd-font-display); font-size: 1rem; font-weight: 700; color: var(--gd-heading); letter-spacing: -0.02em; }
.service-detail-item__desc { font-size: 13.5px; color: var(--gd-text-muted); line-height: 1.7; margin: 0; }
/* Dark variant */
.service-detail-grid--dark .service-detail-item__icon { background: rgba(247,170,31,0.14); border-color: rgba(247,170,31,0.28); }
.service-detail-grid--dark .service-detail-item__title { color: var(--gd-text-on-dark); }
.service-detail-grid--dark .service-detail-item__desc { color: var(--gd-text-muted-on-dark); }

/* ── About page: prose column + founder bio ────────────── */
.about-prose { max-width: 760px; margin-inline: auto; display: flex; flex-direction: column; gap: 20px; }
.about-founder-grid { display: grid; grid-template-columns: 1fr 300px; gap: 48px; align-items: center; margin-top: 8px; }
.about-founder-photo { position: relative; }
.about-founder-photo::before {
    content: ''; position: absolute; inset: -15%;
    background: radial-gradient(circle, rgba(247,170,31,0.35) 0%, transparent 70%);
    filter: blur(30px); z-index: 0; pointer-events: none;
}
.about-founder-photo img { position: relative; z-index: 1; width: 100%; height: auto; display: block; object-fit: contain; }
@media (max-width:768px) {
    .about-founder-grid { grid-template-columns: 1fr; }
    .about-founder-photo { max-width: 260px; margin-inline: auto; }
}

/* Dark feature section wrapper (reused visual language from project-scope) */
.feature-panel { background: var(--gd-bg-dark); border-radius: var(--gd-radius-xl); padding: 48px; position: relative; overflow: hidden; }
.feature-panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, var(--gd-accent) 35%, var(--gd-accent) 65%, transparent 100%); }
.feature-panel__eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--gd-accent); margin-bottom: 14px; display: block; }
.feature-panel h3 { color: var(--gd-text-on-dark); font-size: 1.5rem; margin-bottom: 12px; }
.feature-panel > p { color: var(--gd-text-muted-on-dark); max-width: 560px; margin-bottom: 0; }

/* Pricing */
.pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 44px; align-items: stretch; }
.pricing-card { display: flex; flex-direction: column; background: var(--gd-bg); border: 1.5px solid var(--gd-border); border-radius: var(--gd-radius-xl); padding: 32px 28px; position: relative; transition: all var(--gd-transition); }
.pricing-card:hover { border-color: var(--gd-accent-brd); box-shadow: 0 16px 48px rgba(247,170,31,0.10); transform: translateY(-3px); }
.pricing-card--featured { border-color: var(--gd-accent); box-shadow: 0 16px 48px rgba(247,170,31,0.16); }
.pricing-card__badge { position: absolute; top: -13px; left: 28px; background: var(--gd-accent); color: #0B0B0B; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; padding: 5px 14px; border-radius: 20px; display: inline-flex; align-items: center; gap: 5px; }
.pricing-card__badge svg { width: 12px; height: 12px; fill: #0B0B0B; }
.pricing-card__title { font-family: var(--gd-font-display); font-size: 1.15rem; font-weight: 700; color: var(--gd-heading); margin-bottom: 6px; letter-spacing: -0.02em; }
.pricing-card__tagline { font-size: 13px; color: var(--gd-text-faint); margin-bottom: 22px; line-height: 1.5; }
.pricing-card__price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.pricing-card__price-amount { font-family: var(--gd-font-display); font-size: 2rem; font-weight: 800; color: var(--gd-text); letter-spacing: -0.03em; }
.pricing-card__price-from { font-size: 12px; font-weight: 600; color: var(--gd-text-faint); text-transform: uppercase; letter-spacing: 0.5px; }
.pricing-card__price-note { font-size: 12.5px; color: var(--gd-text-faint); margin-bottom: 24px; }
.pricing-feature-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; flex: 1; }
.pricing-feature { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--gd-text-muted); line-height: 1.5; }
.pricing-feature svg { width: 16px; height: 16px; flex-shrink: 0; stroke: var(--gd-accent-dark); stroke-width: 2.5; margin-top: 1px; }
.pricing-card .btn { justify-content: center; width: 100%; }
.pricing-disclaimer { text-align: center; font-size: 12.5px; color: var(--gd-text-faint); margin-top: 24px; max-width: 520px; margin-inline: auto; }

/* Scoped video-service FAQ */
.gd-video-faq .faq-item.active .faq-icon { transform: rotate(45deg); }
.gd-video-faq .faq-item.active .faq-item__a { max-height: 600px; }

@media (max-width:1024px) {
    .format-grid,.service-detail-grid,.pricing-grid { grid-template-columns: 1fr; }
    .feature-panel { padding: 36px 28px; }
}
@media (max-width:768px) {
    .service-hero { padding-block: 48px 56px; }
    .trust-pills { gap: 8px; }
}

/* ── 30. Blog ─────────────────────────────────────────────── */

/* Branded image treatment — applied to every blog featured image so
   photos from any source read as part of the same visual system. */
.blog-card__img-wrap img,
.single-post-featured img {
    filter: saturate(0.82) contrast(1.06) brightness(0.97);
}
.blog-card__img-wrap::after,
.single-post-featured::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(247,170,31,0.30) 0%, rgba(45,55,72,0.14) 55%, transparent 100%);
    mix-blend-mode: multiply; pointer-events: none;
}

/* Archive hero + category bar */
.blog-hero { padding-block: 80px 8px; border-bottom: 1px solid var(--gd-border); }
.blog-cat-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 28px; }
.blog-cat-pill { display: inline-flex; align-items: center; background: transparent; border: 1px solid var(--gd-border); color: var(--gd-text-muted); padding: 7px 16px; border-radius: 20px; font-size: 13px; font-weight: 500; text-decoration: none; transition: all var(--gd-transition); }
.blog-cat-pill:hover, .blog-cat-pill.active { background: var(--gd-accent-dim); border-color: var(--gd-accent-brd); color: var(--gd-accent-dark); }

/* Grid + cards */
.blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; padding-block: 56px 72px; }
.blog-card { background: var(--gd-bg); border: 1px solid var(--gd-border); border-radius: var(--gd-radius-lg); overflow: hidden; text-decoration: none; display: block; transition: all var(--gd-transition); }
.blog-card:hover { border-color: var(--gd-accent-brd); box-shadow: 0 16px 48px rgba(0,0,0,0.08); transform: translateY(-4px); }
.blog-card__img-wrap { aspect-ratio: 16/10; overflow: hidden; position: relative; background: var(--gd-bg-2); }
.blog-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.blog-card:hover .blog-card__img-wrap img { transform: scale(1.05); }
.blog-card__img-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--gd-bg-2), #fff9ec); }
.blog-card__img-placeholder svg { width: 36px; height: 36px; stroke: var(--gd-accent-brd); fill: none; stroke-width: 1.5; }
.blog-card__body { padding: 22px 22px 24px; }
.blog-card__cat { display: inline-block; background: var(--gd-accent-dim); color: var(--gd-accent-dark); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; margin-bottom: 12px; }
.blog-card__title { font-family: var(--gd-font-display); font-size: 1.05rem; font-weight: 700; color: var(--gd-heading); margin-bottom: 8px; letter-spacing: -0.02em; line-height: 1.35; }
.blog-card__excerpt { font-size: 13.5px; color: var(--gd-text-muted); line-height: 1.65; margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-card__meta { display: flex; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid var(--gd-border); font-size: 12px; color: var(--gd-text-faint); }
.blog-card__meta svg { width: 13px; height: 13px; stroke: var(--gd-text-faint); flex-shrink: 0; }

/* Homepage "latest posts" preview */
.blog-preview-section { background: var(--gd-bg-2); position: relative; overflow: hidden; }
.blog-preview-section .blog-grid { padding-block: 0; }

/* Single post */
.single-post-hero { padding-block: 64px 40px; border-bottom: 1px solid var(--gd-border); }
.single-post-hero__meta { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.single-post-hero__back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--gd-text-muted); text-decoration: none; transition: color var(--gd-transition); }
.single-post-hero__back:hover { color: var(--gd-accent); }
.single-post-hero__cat { background: var(--gd-accent-dim); color: var(--gd-accent-dark); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; text-decoration: none; }
.single-post-hero h1 { max-width: 800px; margin-bottom: 16px; }
.single-post-hero__info { display: flex; align-items: center; gap: 16px; font-size: 13px; color: var(--gd-text-faint); flex-wrap: wrap; }
.single-post-hero__info span { display: inline-flex; align-items: center; gap: 6px; }
.single-post-hero__info svg { width: 14px; height: 14px; stroke: var(--gd-text-faint); flex-shrink: 0; }

.single-post-featured { border-radius: var(--gd-radius-xl); overflow: hidden; margin-block: 48px; border: 1px solid var(--gd-border); position: relative; aspect-ratio: 16/8; }
.single-post-featured img { width: 100%; height: 100%; object-fit: cover; }

.single-post-body { max-width: 720px; margin-inline: auto; padding-block: 8px 56px; }
.single-post-body h2 { margin-block: 40px 16px; font-size: 1.6rem; }
.single-post-body h3 { margin-block: 32px 12px; font-size: 1.25rem; }
.single-post-body p { margin-bottom: 18px; }
.single-post-body ul, .single-post-body ol { margin-bottom: 20px; padding-left: 22px; color: var(--gd-text-muted); }
.single-post-body ul li { list-style: disc; margin-bottom: 8px; line-height: 1.7; }
.single-post-body ol li { list-style: decimal; margin-bottom: 8px; line-height: 1.7; }
.single-post-body blockquote { margin: 28px 0; padding: 20px 24px; border-left: 3px solid var(--gd-accent); background: var(--gd-bg-2); border-radius: 0 var(--gd-radius) var(--gd-radius) 0; font-style: italic; color: var(--gd-text); }
.single-post-body blockquote p { margin-bottom: 0; }
.single-post-body table { width: 100%; border-collapse: collapse; margin-block: 28px; font-size: 13.5px; border-radius: var(--gd-radius); overflow: hidden; border: 1px solid var(--gd-border); }
.single-post-body th, .single-post-body td { padding: 11px 16px; text-align: left; border-bottom: 1px solid var(--gd-border); }
.single-post-body th { background: var(--gd-bg-2); font-weight: 700; color: var(--gd-text); font-family: var(--gd-font-display); font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; }
.single-post-body td { color: var(--gd-text-muted); }
.single-post-body tr:last-child td { border-bottom: none; }
.single-post-body strong { color: var(--gd-text); }
.single-post-body a { text-decoration: underline; text-underline-offset: 2px; }
.single-post-body img { border-radius: var(--gd-radius); margin-block: 24px; }

.single-post-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--gd-border); max-width: 720px; margin-inline: auto; }
.single-post-tags a { display: inline-flex; align-items: center; background: var(--gd-bg-2); border: 1px solid var(--gd-border); color: var(--gd-text-muted); font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 20px; text-decoration: none; transition: all var(--gd-transition); }
.single-post-tags a:hover { background: var(--gd-accent-dim); border-color: var(--gd-accent-brd); color: var(--gd-accent-dark); }

/* Comments */
.comments-area { max-width: 720px; margin-inline: auto; padding-block: 8px 64px; }
.comments-title { font-size: 1.4rem; margin-bottom: 32px; }
.comment-list { list-style: none; margin: 0 0 40px; padding: 0; }
.comment-list .children { list-style: none; padding-left: 44px; margin-top: 4px; }
.comment-body { display: flex; gap: 14px; padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--gd-border); }
.comment-avatar { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; background: var(--gd-accent-dim); border: 1px solid var(--gd-accent-brd); overflow: hidden; }
.comment-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.comment-content { flex: 1; min-width: 0; }
.comment-meta { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.comment-author { font-weight: 700; font-size: 14px; color: var(--gd-text); font-family: var(--gd-font-display); }
.comment-date { font-size: 12px; color: var(--gd-text-faint); text-decoration: none; }
.comment-text p { font-size: 14px; color: var(--gd-text-muted); margin-bottom: 8px; line-height: 1.7; }
.comment-reply-link { font-size: 12px; font-weight: 600; color: var(--gd-accent); text-decoration: none; }
.comment-reply-link:hover { color: var(--gd-accent-dark); }
.comment-awaiting-moderation { font-size: 12px; color: var(--gd-text-faint); font-style: italic; }
.comment-respond { padding-top: 24px; }
.comment-reply-title { font-size: 1.2rem; margin-bottom: 20px; }
.comment-reply-title small a { font-size: 13px; font-weight: 500; margin-left: 10px; }
.comment-form p { margin-bottom: 14px; }
.comment-form label { display: block; font-size: 13px; font-weight: 600; color: var(--gd-text-muted); margin-bottom: 6px; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
    width: 100%; padding: 12px 14px; border: 1px solid var(--gd-border); border-radius: var(--gd-radius);
    font-size: 14px; font-family: var(--gd-font-body); background: var(--gd-bg-2); color: var(--gd-text);
    transition: border-color var(--gd-transition), box-shadow var(--gd-transition);
}
.comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: var(--gd-accent); box-shadow: 0 0 0 3px rgba(247,170,31,0.10); background: var(--gd-bg); }
.comment-form textarea { min-height: 120px; resize: vertical; }
.comment-form-cookies-consent { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--gd-text-faint); }
.comment-notes { font-size: 12px; color: var(--gd-text-faint); margin-bottom: 20px; }
.comment-form .btn { margin-top: 4px; }
.no-comments { font-size: 14px; color: var(--gd-text-faint); }

@media (max-width:1024px) {
    .blog-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width:768px) {
    .blog-grid { grid-template-columns: 1fr; padding-block: 40px 56px; }
    .blog-hero { padding-block: 56px 8px; }
    .single-post-hero { padding-block: 40px 28px; }
    .single-post-featured { aspect-ratio: 4/3; margin-block: 32px; }
    .comment-body { gap: 10px; }
    .comment-list .children { padding-left: 20px; }
}

/* ── Cookie consent banner ──────────────────────────────── */
.gd-cookie { position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 9998; max-width: 760px; margin: 0 auto; background: var(--gd-bg-dark); color: #fff; border-radius: var(--gd-radius-lg); box-shadow: 0 20px 60px rgba(0,0,0,0.35); padding: 20px 24px; opacity: 0; transform: translateY(24px); transition: opacity .32s ease, transform .32s ease; }
.gd-cookie.is-visible { opacity: 1; transform: none; }
.gd-cookie__inner { display: flex; align-items: center; gap: 18px 24px; flex-wrap: wrap; }
.gd-cookie__text { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.82); flex: 1 1 320px; }
.gd-cookie__text a { color: var(--gd-accent); text-decoration: underline; }
.gd-cookie__btns { display: flex; gap: 10px; flex-shrink: 0; }
@media (max-width: 600px) {
    .gd-cookie { left: 12px; right: 12px; bottom: 12px; padding: 18px; }
    .gd-cookie__btns { width: 100%; }
    .gd-cookie__btns .btn { flex: 1; justify-content: center; }
}

/* ── Portfolio preview cards ─────────────────────────────────── */
/* Flat variant: the uploaded Featured Image fills the card as-is. */
.gd-rc-flat { aspect-ratio: 16/10; overflow: hidden; position: relative; background: var(--gd-bg-2); }
.gd-rc-flat img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.5s ease; }
.portfolio-card:hover .gd-rc-flat img { transform: scale(1.04); }
@media (prefers-reduced-motion:reduce){ .portfolio-card:hover .gd-rc-flat img{ transform:none; } }

/* ── Retro line-art portfolio preview cards (fallback, no Featured Image) ── */
:root{ --gd-stroke:#CE8A12; }
.gd-rc{ aspect-ratio:16/10; overflow:hidden; position:relative;
    background:linear-gradient(180deg,#FBF0DB,#F5E8D0 55%,#ffffff); }
.gd-rc>svg{ position:absolute; inset:0; width:100%; height:100%; transition:transform .55s cubic-bezier(.2,.7,.2,1); }
.portfolio-card:hover .gd-rc>svg{ transform:scale(1.08); }
.gd-rc .r-ln{ fill:none; stroke:var(--gd-stroke); stroke-width:1.7; stroke-linejoin:round; stroke-linecap:round; }
.gd-rc .r-ln2{ fill:none; stroke:#FFD37A; stroke-width:1.2; stroke-linecap:round; opacity:.85; }
.gd-rc .r-lnt{ fill:none; stroke:var(--gd-stroke); stroke-width:1; stroke-linecap:round; opacity:.6; }
.gd-rc .r-floor{ stroke:var(--gd-stroke); stroke-width:.6; opacity:.15; fill:none; }
.gd-rc .r-shadow{ fill:#000; opacity:.05; }
.gd-rc .r-glare{ transition:opacity .35s ease; }
.gd-rc .r-noise{ opacity:.34; transform-box:fill-box; animation:gdSnow .5s steps(1) infinite; transition:opacity .35s ease; }

@keyframes gdFlick{ 0%,100%{opacity:1} 46%{opacity:.9} 50%{opacity:.72} 54%{opacity:.94} 72%{opacity:.85} }
@keyframes gdCrtScan{ 0%{ transform:translateY(-4px) } 100%{ transform:translateY(80px) } }
@keyframes gdFlashPop{ 0%{opacity:0;transform:scale(.3)} 6%{opacity:1;transform:scale(1)} 22%{opacity:0} 100%{opacity:0} }
@keyframes gdFlashScreen{ 0%,6%,100%{opacity:0} 3%{opacity:.42} }
@keyframes gdNote{ 0%{transform:translateY(6px);opacity:0} 35%{opacity:1} 100%{transform:translateY(-12px);opacity:0} }
/* Moving TV snow: pan the noise field in fast discrete jumps (works in Chrome,
   where SMIL feTurbulence animation is frozen). The rect is oversized + clipped
   so the jumps never reveal an edge. */
@keyframes gdSnow{ 0%{transform:translate(0,0)} 14%{transform:translate(-12px,8px)} 28%{transform:translate(10px,-10px)} 42%{transform:translate(-8px,-13px)} 57%{transform:translate(13px,6px)} 71%{transform:translate(-13px,-6px)} 85%{transform:translate(7px,12px)} 100%{transform:translate(-5px,-9px)} }
.gd-rc .r-flick{ animation:gdFlick 2.4s steps(1) infinite; }
.gd-rc .r-scan{ animation:gdCrtScan 3.2s linear infinite; }
.gd-rc .r-flash{ transform-box:fill-box; transform-origin:center; animation:gdFlashPop 2.6s ease-out infinite; }
.gd-rc .r-flashscreen{ animation:gdFlashScreen 2.6s ease-out infinite; }
.gd-rc .r-note{ animation:gdNote 1.9s ease-in-out infinite; }
.gd-rc .r-note:nth-of-type(2){ animation-delay:.6s } .gd-rc .r-note:nth-of-type(3){ animation-delay:1.2s }

.portfolio-card:hover .gd-rc .r-flick{ animation:none; opacity:1; }
.portfolio-card:hover .gd-rc .r-scan{ animation:none; opacity:0; }
.portfolio-card:hover .gd-rc .r-glare{ opacity:0; }
.portfolio-card:hover .gd-rc .r-noise{ opacity:0; animation:none; }
.portfolio-card:hover .gd-rc .r-flash,.portfolio-card:hover .gd-rc .r-flashscreen{ animation:none; opacity:0; }
.portfolio-card:hover .gd-rc .r-note{ animation:none; opacity:0; }

.gd-rc__cta{ position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; padding-bottom:16px; opacity:0; transition:opacity .3s; pointer-events:none; }
.gd-rc__cta span{ background:var(--gd-accent); color:#0B0B0B; font-family:var(--gd-font-display); font-weight:700; font-size:13px; padding:10px 20px; border-radius:24px; box-shadow:0 8px 22px rgba(247,170,31,.5); transform:translateY(10px); transition:transform .3s; }
.portfolio-card:hover .gd-rc__cta{ opacity:1; } .portfolio-card:hover .gd-rc__cta span{ transform:none; }
@media (prefers-reduced-motion:reduce){ .gd-rc *{ animation:none!important } .portfolio-card:hover .gd-rc>svg{ transform:none } }