/* ============================================
   Samar Kishor — Portfolio
   Design system inherited from agency.egiig.com
   ============================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    /* Dark Mode (default) */
    --bg-primary: #0a0a0a;
    --bg-secondary: #111111;
    --bg-tertiary: #1a1a1a;
    --bg-card: #1e1e1e;
    --bg-elevated: #252525;

    /* Brand turquoise */
    --primary-color: #3DD9B8;
    --primary-dark: #2BC4A3;
    --primary-ink: #3DD9B8;   /* brand colour safe for text on this bg */
    --primary-soft: rgba(61, 217, 184, 0.12);

    /* Accents */
    --accent-orange: #ff6b35;
    --accent-coral: #ff8c5a;
    --accent-ink: #ff6b35;    /* accent safe for text on this bg */
    --accent-green: #34d399;
    --accent-red: #f87171;

    /* Text */
    --text-primary: #f9fafb;
    --text-secondary: #d1d5db;
    --text-tertiary: #9ca3af;
    --text-muted: #949cab;

    /* Borders */
    --border-primary: #2a2a2a;
    --border-secondary: #333333;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #3DD9B8 0%, #2BC4A3 100%);
    --gradient-accent: linear-gradient(135deg, #ff6b35 0%, #ff8c5a 100%);

    /* Type */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Playfair Display', Georgia, serif;

    /* Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;

    /* Shadow */
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,.4);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.5);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.6);
    --shadow-glow: 0 0 20px rgba(61,217,184,.3);

    --transition-base: 300ms ease-in-out;
    --wrap: 1180px;
}

[data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #fafafa;
    --bg-tertiary: #f5f5f5;
    --bg-card: #ffffff;
    --bg-elevated: #f9fafb;
    --text-primary: #111827;
    --text-secondary: #374151;
    --text-tertiary: #5b6472;
    --text-muted: #5f6773;
    --border-primary: #e5e7eb;
    --border-secondary: #d1d5db;
    --primary-soft: rgba(61, 217, 184, 0.14);
    --primary-ink: #0D6B57;   /* darkened for AA contrast on white + tinted panels */
    --accent-ink: #B23C0B;    /* darkened orange for AA contrast on white */
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,.08);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.12);
}

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
    font-family: var(--font-primary);
    background: var(--bg-primary);
    color: var(--text-secondary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.container { max-width: var(--wrap); margin: 0 auto; padding: 0 1.5rem; }

h1, h2, h3, h4 { color: var(--text-primary); line-height: 1.2; font-weight: 800; }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); letter-spacing: -0.02em; }
h3 { font-size: 1.2rem; font-weight: 700; }

.section { padding: 6rem 0; }
.section-alt { background: var(--bg-secondary); }

.section-header { text-align: center; max-width: 720px; margin: 0 auto 3.5rem; }
.section-header p { color: var(--text-tertiary); font-size: 1.05rem; margin-top: 1rem; }

.eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .75rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--primary-ink);
    background: var(--primary-soft); border: 1px solid rgba(61,217,184,.25);
    padding: .4rem .9rem; border-radius: var(--radius-full);
    margin-bottom: 1.1rem;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    font-family: var(--font-primary); font-weight: 700; font-size: .95rem;
    padding: .9rem 1.7rem; border-radius: var(--radius-full);
    border: 1px solid transparent; cursor: pointer;
    transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
    white-space: nowrap;
}
.btn:focus-visible { outline: 3px solid var(--primary-color); outline-offset: 3px; }
.btn-primary { background: var(--gradient-primary); color: #06231d; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); }
.btn-accent { background: var(--gradient-accent); color: #2a0f05; }
.btn-accent:hover { transform: translateY(-2px); box-shadow: 0 0 20px rgba(255,107,53,.35); }
.btn-outline { background: transparent; color: var(--text-primary); border-color: var(--border-secondary); }
.btn-outline:hover { border-color: var(--primary-color); color: var(--primary-color); }

/* ============================================
   NAVBAR
   ============================================ */
.navbar {
    position: sticky; top: 0; z-index: 100;
    background: color-mix(in srgb, var(--bg-primary) 88%, transparent);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border-primary);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 78px; gap: 1.5rem; }

.brand { display: flex; align-items: center; gap: .7rem; }
.brand img { height: 42px; width: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-weight: 800; font-size: 1.02rem; color: var(--text-primary); letter-spacing: -.01em; }
.brand-role { font-size: .68rem; color: var(--text-muted); letter-spacing: .05em; }

.nav-links { display: flex; align-items: center; gap: 1.9rem; }
.nav-links a { font-size: .92rem; font-weight: 500; color: var(--text-tertiary); transition: color var(--transition-base); }
.nav-links a:hover { color: var(--primary-ink); }

.nav-actions { display: flex; align-items: center; gap: .9rem; }

.theme-toggle {
    width: 42px; height: 42px; border-radius: var(--radius-full);
    background: var(--bg-tertiary); border: 1px solid var(--border-primary);
    color: var(--text-secondary); cursor: pointer; font-size: .95rem;
    display: flex; align-items: center; justify-content: center;
    transition: all var(--transition-base);
}
.theme-toggle:hover { color: var(--primary-color); border-color: var(--primary-color); }
[data-theme="light"] .theme-toggle .fa-moon { display: none; }
[data-theme="dark"] .theme-toggle .fa-sun,
:root:not([data-theme="light"]) .theme-toggle .fa-sun { display: none; }

.nav-toggle { display: none; background: none; border: none; color: var(--text-primary); font-size: 1.4rem; cursor: pointer; }

/* ============================================
   HERO
   ============================================ */
.hero {
    padding: 5rem 0 5.5rem;
    background:
      radial-gradient(900px 500px at 88% -5%, rgba(61,217,184,.14), transparent 62%),
      var(--bg-primary);
    border-bottom: 1px solid var(--border-primary);
}
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3.5rem; align-items: center; }
.hero h1 { margin-bottom: 1.2rem; }
.hero h1 .accent { color: var(--primary-ink); }
.hero-lede { font-size: 1.08rem; color: var(--text-tertiary); max-width: 33rem; margin-bottom: 2rem; }
.hero-ctas { display: flex; gap: .9rem; flex-wrap: wrap; margin-bottom: 2.4rem; }
.hero-note { font-size: .85rem; color: var(--text-muted); margin-top: -1.4rem; margin-bottom: 2.2rem; }

.hero-stats { display: flex; gap: 2.4rem; flex-wrap: wrap; padding-top: 1.6rem; border-top: 1px solid var(--border-primary); }
.hero-stats .stat b { display: block; font-size: 1.6rem; font-weight: 800; color: var(--text-primary); }
.hero-stats .stat span { font-size: .82rem; color: var(--text-muted); }

/* Portrait panel — mirrors the agency hero card */
.hero-panel {
    position: relative; background: var(--gradient-primary);
    border-radius: var(--radius-xl); padding: 0;
    min-height: 540px; display: flex; align-items: flex-end; justify-content: center;
    box-shadow: var(--shadow-xl); overflow: hidden;
}
.hero-panel .portrait {
    width: auto; max-width: 100%; max-height: 530px;
    object-fit: contain; object-position: bottom;
    filter: drop-shadow(0 18px 30px rgba(0,0,0,.28));
    /* The source photo is cropped at the thigh, so its bottom edge lands
       flush on the panel border and reads as "cut off". Fading the last
       sliver into the panel removes the hard line entirely. */
    -webkit-mask-image: linear-gradient(to bottom, #000 86%, rgba(0,0,0,.35) 96%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 86%, rgba(0,0,0,.35) 96%, transparent 100%);
}

.float-chip {
    position: absolute; background: var(--bg-tertiary); color: var(--text-primary);
    border-radius: var(--radius-lg); padding: .7rem 1.05rem;
    font-size: .84rem; font-weight: 700; box-shadow: var(--shadow-lg);
    display: flex; align-items: center; gap: .5rem; z-index: 2;
}
.float-chip i { color: var(--primary-color); font-size: .9rem; }
.chip-1 { top: 3%;  right: 1%;  animation: bob 6s ease-in-out infinite; }
.chip-2 { top: 19%; left: -4%;  animation: bob 6s ease-in-out infinite .6s; }
.chip-3 { top: 35%; right: -3%; animation: bob 6s ease-in-out infinite 1.2s; }
.chip-4 { top: 51%; left: -3%;  animation: bob 6s ease-in-out infinite 1.8s; }
.chip-5 { top: 67%; right: 0%;  animation: bob 6s ease-in-out infinite 2.4s; }
.chip-6 { top: 83%; left: 1%;   animation: bob 6s ease-in-out infinite 3s; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* ============================================
   MARQUEE / CREDIBILITY STRIP
   ============================================ */
.cred-strip { background: var(--bg-secondary); border-bottom: 1px solid var(--border-primary); padding: 2.2rem 0; }
.cred-grid { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.cred-item {
    background: var(--bg-card); border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg); padding: .9rem 1.4rem;
    font-size: .88rem; font-weight: 600; color: var(--text-secondary);
    display: flex; align-items: center; gap: .6rem;
}
.cred-item i { color: var(--primary-ink); }

/* ============================================
   CARDS
   ============================================ */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem; }

.card {
    background: var(--bg-card); border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl); padding: 1.9rem 1.6rem;
    transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
    height: 100%; display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-5px); border-color: rgba(61,217,184,.45); box-shadow: var(--shadow-lg); }
.card p { font-size: .93rem; color: var(--text-tertiary); }

.card-icon {
    width: 52px; height: 52px; border-radius: var(--radius-lg);
    background: var(--primary-soft); border: 1px solid rgba(61,217,184,.22);
    display: flex; align-items: center; justify-content: center;
    color: var(--primary-ink); font-size: 1.2rem; margin-bottom: 1.1rem;
}
.card h3 { margin-bottom: .6rem; }

/* Service cards */
.service-card .card-tag {
    font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--primary-ink); margin-bottom: .55rem;
}
.service-list { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--border-primary); }
.service-list li { font-size: .85rem; color: var(--text-tertiary); padding: .3rem 0; display: flex; gap: .55rem; }
.service-list li i { color: var(--primary-ink); font-size: .72rem; margin-top: .42rem; }

/* ============================================
   WORK / PROOF
   ============================================ */
.work-card { position: relative; overflow: hidden; }
.work-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .9rem; }
.work-cat {
    font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--accent-ink); white-space: nowrap; padding-top: .25rem;
}
.work-role { font-size: .82rem; color: var(--primary-ink); font-weight: 600; margin-bottom: .7rem; }
.work-result {
    background: var(--primary-soft); border-left: 3px solid var(--primary-color);
    border-radius: var(--radius-md); padding: .8rem 1rem; margin-top: 1rem; font-size: .87rem;
}
.work-result b { color: var(--primary-ink); }
.work-meta { margin-top: auto; padding-top: 1.1rem; display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: .78rem; color: var(--text-muted); }
.work-link {
    margin-top: 1rem; display: inline-flex; align-items: center; gap: .45rem;
    font-size: .85rem; font-weight: 700; color: var(--primary-ink);
}
.work-link:hover { gap: .7rem; }

/* ============================================
   TESTIMONIALS
   ============================================ */
.testimonial-card { background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: var(--radius-xl); padding: 1.9rem 1.7rem; height: 100%; display: flex; flex-direction: column; }
.testimonial-card .quote-mark { font-family: var(--font-display); font-size: 3rem; line-height: 1; color: var(--primary-color); opacity: .5; margin-bottom: .3rem; }
.testimonial-card blockquote { font-size: .98rem; color: var(--text-secondary); font-style: italic; margin-bottom: 1.4rem; }
.testimonial-person { display: flex; align-items: center; gap: .85rem; margin-top: auto; padding-top: 1.1rem; border-top: 1px solid var(--border-primary); }
.person-avatar {
    width: 46px; height: 46px; border-radius: var(--radius-full);
    background: var(--gradient-primary); color: #06231d;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: .95rem; flex-shrink: 0;
}
.person-name { font-weight: 700; color: var(--text-primary); font-size: .92rem; }
.person-role { font-size: .78rem; color: var(--text-muted); }

/* Video testimonial */
.video-testimonial { background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: var(--radius-xl); overflow: hidden; }
.video-facade { position: relative; aspect-ratio: 16/9; background: var(--bg-tertiary); cursor: pointer; display: block; width: 100%; border: none; padding: 0; }
.video-facade img { width: 100%; height: 100%; object-fit: cover; }
.video-facade::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.05));
}
.play-btn {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 74px; height: 74px; border-radius: var(--radius-full);
    background: var(--gradient-primary); color: #06231d;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; z-index: 3; box-shadow: var(--shadow-xl);
    transition: transform var(--transition-base);
}
.video-facade:hover .play-btn { transform: translate(-50%,-50%) scale(1.09); }
.video-facade:focus-visible { outline: 3px solid var(--primary-color); outline-offset: -3px; }
.video-caption { padding: 1.4rem 1.6rem; }
.video-testimonial iframe { width: 100%; aspect-ratio: 16/9; border: 0; display: block; }

/* ============================================
   SKILLS / STACK
   ============================================ */
.stack-group { margin-bottom: 2rem; }
.stack-label { font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .9rem; }
.pill-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.pill {
    background: var(--bg-card); border: 1px solid var(--border-primary);
    border-radius: var(--radius-full); padding: .5rem 1.05rem;
    font-size: .85rem; color: var(--text-secondary); font-weight: 500;
    transition: all var(--transition-base);
}
.pill:hover { border-color: var(--primary-color); color: var(--primary-ink); }

/* ============================================
   ABOUT
   ============================================ */
.about-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 3.5rem; align-items: center; }
.about-photo { position: relative; }
.about-photo .frame {
    background: var(--gradient-primary); border-radius: var(--radius-xl);
    display: flex; align-items: flex-end; justify-content: center;
    overflow: hidden; box-shadow: var(--shadow-xl); aspect-ratio: 1/1;
}
.about-photo .frame img { width: 94%; }
.about-badge {
    position: absolute; bottom: -18px; right: -14px;
    background: var(--bg-card); border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg); padding: .8rem 1.15rem;
    box-shadow: var(--shadow-lg); font-size: .8rem;
}
.about-badge b { display: block; color: var(--primary-ink); font-size: 1.15rem; }
.about-copy p { margin-bottom: 1.05rem; font-size: 1rem; }
.about-copy p:last-child { margin-bottom: 0; }
.about-copy strong { color: var(--text-primary); }

/* ============================================
   PROCESS
   ============================================ */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.process-step { background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: var(--radius-xl); padding: 1.7rem 1.4rem; position: relative; }
.process-num { font-family: var(--font-display); font-size: 2.1rem; color: var(--primary-color); opacity: .38; line-height: 1; margin-bottom: .5rem; }
.process-step h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.process-step p { font-size: .87rem; color: var(--text-tertiary); }

/* ============================================
   FAQ
   ============================================ */
.faq-list { max-width: 850px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border-primary); }
.faq-item summary {
    cursor: pointer; list-style: none; padding: 1.3rem 0;
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    font-weight: 700; color: var(--text-primary); font-size: 1.02rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '\f067'; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: var(--primary-ink); font-size: .85rem; transition: transform var(--transition-base); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding-bottom: 1.3rem; font-size: .94rem; color: var(--text-tertiary); }

/* ============================================
   CTA
   ============================================ */
.cta-band {
    background: var(--bg-card); border: 1px solid var(--border-primary);
    border-radius: 1.4rem; padding: 3.4rem 2.5rem; text-align: center;
    position: relative; overflow: hidden;
}
.cta-band::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(600px 260px at 50% 0%, rgba(61,217,184,.14), transparent 70%);
}
.cta-band > * { position: relative; }
.cta-band p { max-width: 520px; margin: 1rem auto 1.9rem; color: var(--text-tertiary); }

/* ============================================
   FOOTER
   ============================================ */
.footer { background: var(--bg-secondary); border-top: 1px solid var(--border-primary); padding: 3.8rem 0 1.8rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2.2rem; margin-bottom: 2.6rem; }
.footer-brand p { font-size: .88rem; color: var(--text-muted); margin-top: 1rem; max-width: 17rem; }
.footer h5 { font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-primary); margin-bottom: 1rem; }
.footer li { margin-bottom: .65rem; }
.footer li a { font-size: .89rem; color: var(--text-muted); transition: color var(--transition-base); }
.footer li a:hover { color: var(--primary-ink); }
.footer-bottom {
    border-top: 1px solid var(--border-primary); padding-top: 1.5rem;
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: .8rem;
    font-size: .82rem; color: var(--text-muted);
}
.social-row { display: flex; gap: .7rem; margin-top: 1.2rem; }
.social-row a {
    width: 38px; height: 38px; border-radius: var(--radius-full);
    background: var(--bg-card); border: 1px solid var(--border-primary);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-tertiary); transition: all var(--transition-base);
}
.social-row a:hover { color: var(--primary-color); border-color: var(--primary-color); transform: translateY(-2px); }

/* ============================================
   REVEAL
   ============================================ */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) and (min-width: 769px) {
    /* Tablet — hero and about stay side by side, just tighter */
    .hero-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .hero-panel { min-height: 470px; }
    .hero-panel .portrait { max-height: 460px; }
    .about-grid { grid-template-columns: .9fr 1.1fr; gap: 2.2rem; }
    .float-chip { font-size: .74rem; padding: .5rem .75rem; }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .process-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    /* Mobile — photo leads, copy follows */
    .hero { padding: 2.5rem 0 3.5rem; }
    .hero-grid { grid-template-columns: 1fr; gap: 2.2rem; }
    .hero-visual { order: -1; }
    .hero-panel { min-height: 340px; }
    .hero-panel .portrait { max-height: 390px; }
    .about-grid { grid-template-columns: 1fr; gap: 2.2rem; }
    .about-photo { order: -1; max-width: 320px; margin: 0 auto; }
    .grid-2, .grid-3, .grid-4, .process-grid, .footer-grid { grid-template-columns: 1fr; }
    .section { padding: 3.6rem 0; }
    .float-chip { font-size: .72rem; padding: .45rem .7rem; }
    .chip-2 { left: -1%; } .chip-3 { right: -1%; }
    .cta-band { padding: 2.2rem 1.3rem; }
    .about-badge { right: 0; bottom: -14px; }
    .hero-ctas .btn { width: 100%; }
}

@media (max-width: 860px) {
    .nav-links {
        display: none; position: fixed; top: 78px; left: 0; right: 0;
        flex-direction: column; align-items: flex-start; gap: 0;
        background: var(--bg-secondary); border-bottom: 1px solid var(--border-primary);
        padding: 1rem 1.5rem 1.4rem; box-shadow: var(--shadow-lg);
    }
    .nav-links.open { display: flex; }
    .nav-links a { padding: .85rem 0; width: 100%; border-bottom: 1px solid var(--border-primary); }
    .nav-links a:last-child { border-bottom: none; }
    .nav-toggle { display: block; }
    .nav-cta-desktop { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    .reveal { opacity: 1; transform: none; }
}

/* Inline text link (hero LinkedIn) */
.inline-link {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .92rem; font-weight: 600; color: var(--text-tertiary);
    transition: color var(--transition-base);
}
.inline-link i { color: var(--primary-ink); font-size: 1.05rem; }
.inline-link:hover { color: var(--primary-ink); }
.inline-link:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 3px; border-radius: 4px; }

/* ============================================
   WEBSITE SHOWCASE — desktop + mobile side by side
   (ported from the agency site's "Website Design Projects")
   ============================================ */
.showcase-card { background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: var(--radius-xl); padding: 1.7rem; transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); }
.showcase-card:hover { transform: translateY(-5px); border-color: rgba(61,217,184,.45); box-shadow: var(--shadow-lg); }

.showcase-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; }
.showcase-head .icon {
    width: 56px; height: 56px; border-radius: var(--radius-lg); flex-shrink: 0;
    background: linear-gradient(135deg, rgba(61,217,184,.2), rgba(61,217,184,.08));
    display: flex; align-items: center; justify-content: center;
    color: var(--primary-ink); font-size: 1.4rem;
}
.showcase-head h3 { margin: 0; font-size: 1.15rem; }
.showcase-head span { font-size: .85rem; color: var(--text-muted); }

/* the pair */
.shot-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.3rem; }
.shot {
    position: relative; border-radius: var(--radius-md); overflow: hidden;
    border: 2px solid rgba(61,217,184,.3); cursor: zoom-in; padding: 0;
    background: var(--bg-tertiary); display: block; width: 100%;
    transition: border-color var(--transition-base);
}
.shot:hover { border-color: rgba(61,217,184,.75); }
.shot:focus-visible { outline: 3px solid var(--primary-color); outline-offset: 2px; }
.shot img { width: 100%; height: 280px; object-fit: cover; object-position: top; display: block; }
.shot-label {
    position: absolute; top: .5rem; left: .5rem; z-index: 2;
    background: rgba(61,217,184,.95); color: #0a0a0a;
    padding: .35rem .7rem; border-radius: var(--radius-sm);
    font-size: .68rem; font-weight: 700; display: flex; align-items: center; gap: .3rem;
}
.shot-zoom {
    position: absolute; bottom: .5rem; right: .5rem; z-index: 2;
    background: rgba(0,0,0,.8); color: #fff;
    padding: .3rem .6rem; border-radius: var(--radius-sm); font-size: .66rem; font-weight: 600;
}
.shot-fallback {
    display: none; padding: 2rem 1rem; text-align: center;
    font-size: .8rem; color: var(--text-muted); line-height: 1.5;
}
.shot.broken img { display: none; }
.shot.broken .shot-fallback { display: block; }

.showcase-card > p { font-size: .93rem; color: var(--text-tertiary); margin-bottom: 1rem; }
.showcase-meta {
    display: flex; flex-wrap: wrap; gap: .5rem 1.1rem;
    padding-top: 1rem; border-top: 1px solid var(--border-primary);
    font-size: .8rem; color: var(--text-muted);
}
.showcase-meta .live { color: var(--accent-green); font-weight: 700; display: flex; align-items: center; gap: .35rem; }
.showcase-meta .live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-green); }

/* lightbox */
.lightbox {
    display: none; position: fixed; inset: 0; z-index: 200;
    background: rgba(0,0,0,.93); padding: 2rem; overflow: auto;
}
.lightbox.open { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lightbox img { max-width: 96%; max-height: 82vh; border-radius: var(--radius-md); box-shadow: var(--shadow-xl); }
.lightbox-caption { color: #fff; margin-top: 1rem; font-size: .92rem; text-align: center; }
.lightbox-close {
    position: fixed; top: 1.2rem; right: 1.5rem;
    background: var(--bg-card); border: 1px solid var(--border-secondary);
    color: #fff; width: 46px; height: 46px; border-radius: var(--radius-full);
    font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.lightbox-close:hover { border-color: var(--primary-color); color: var(--primary-color); }

@media (max-width: 680px) {
    .shot img { height: 200px; }
    .lightbox { padding: 1rem; }
}

/* ============================================
   IN-SHORT BAND — what I do + proof per service
   ============================================ */
.short-band {
    padding: 4.2rem 0;
    background:
      radial-gradient(760px 300px at 50% 0%, rgba(61,217,184,.10), transparent 68%),
      var(--bg-secondary);
    border-bottom: 1px solid var(--border-primary);
}
.short-line {
    text-align: center; max-width: 760px; margin: 0 auto 2.8rem;
}
.short-line h2 { font-size: clamp(1.35rem, 2.6vw, 1.95rem); line-height: 1.35; }
.short-line h2 .accent { color: var(--primary-ink); }
.short-line p { color: var(--text-tertiary); font-size: .95rem; margin-top: .85rem; }

.proof-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.proof {
    background: var(--bg-card); border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl); padding: 1.5rem 1.3rem;
    transition: transform var(--transition-base), border-color var(--transition-base);
}
.proof:hover { transform: translateY(-4px); border-color: rgba(61,217,184,.45); }
.proof .service {
    font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--primary-ink); display: block; margin-bottom: .85rem;
}
.proof .figure {
    font-size: clamp(1.85rem, 3.4vw, 2.35rem); font-weight: 800;
    color: var(--text-primary); line-height: 1; letter-spacing: -.02em;
}
.proof .figure small { font-size: .95rem; font-weight: 700; margin-left: .2rem; color: var(--text-secondary); }
.proof .what { font-size: .9rem; color: var(--text-secondary); margin-top: .5rem; font-weight: 600; }
.proof .source {
    font-size: .76rem; color: var(--text-muted); margin-top: .8rem;
    padding-top: .7rem; border-top: 1px solid var(--border-primary);
    display: flex; align-items: center; gap: .4rem;
}
.proof .source i { color: var(--primary-ink); font-size: .68rem; }

@media (max-width: 900px) { .proof-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .proof-row { grid-template-columns: 1fr; } .short-band { padding: 3rem 0; } }

/* ============================================
   AUTOMATION FLOW — what happens after one enquiry
   ============================================ */
.flow-wrap {
    background: var(--bg-card); border: 1px solid var(--border-primary);
    border-radius: 1.4rem; padding: 2.2rem 1.8rem; position: relative; overflow: hidden;
}
.flow-wrap::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(700px 300px at 50% 0%, rgba(61,217,184,.09), transparent 70%);
    pointer-events: none;
}
.flow-wrap > * { position: relative; }

.flow-stage { display: grid; grid-template-columns: 210px 1fr; gap: 1.6rem; align-items: start; }
@media (max-width: 860px) { .flow-stage { grid-template-columns: 1fr; gap: 1.2rem; } }

/* trigger */
.flow-trigger {
    background: var(--gradient-primary); color: #06231d;
    border-radius: var(--radius-xl); padding: 1.4rem 1.2rem; text-align: center;
    box-shadow: var(--shadow-lg);
}
.flow-trigger i { font-size: 1.6rem; margin-bottom: .6rem; display: block; }
.flow-trigger .t { font-weight: 800; font-size: 1rem; line-height: 1.25; }
.flow-trigger .s { font-size: .78rem; opacity: .78; margin-top: .35rem; font-weight: 600; }

/* the fan-out steps */
.flow-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem; }
@media (max-width: 1024px) { .flow-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .flow-steps { grid-template-columns: 1fr; } }

.flow-step {
    background: var(--bg-tertiary); border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg); padding: .95rem 1rem;
    display: flex; gap: .75rem; align-items: flex-start;
    transition: border-color var(--transition-base), transform var(--transition-base);
}
.flow-step:hover { border-color: rgba(61,217,184,.5); transform: translateY(-2px); }
.flow-step .ic {
    width: 34px; height: 34px; border-radius: var(--radius-md); flex-shrink: 0;
    background: var(--primary-soft); color: var(--primary-ink);
    display: flex; align-items: center; justify-content: center; font-size: .85rem;
}
.flow-step b { display: block; font-size: .87rem; color: var(--text-primary); font-weight: 700; }
.flow-step span { font-size: .78rem; color: var(--text-tertiary); line-height: 1.45; }
.flow-step .when {
    font-family: var(--font-primary); font-size: .68rem; font-weight: 700;
    color: var(--primary-ink); display: block; margin-top: .3rem;
}

/* outcome bar */
.flow-outcome {
    margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px dashed var(--border-secondary);
    display: flex; align-items: center; justify-content: center; gap: .7rem;
    flex-wrap: wrap; text-align: center;
}
.flow-outcome .pillbox {
    background: var(--primary-soft); border: 1px solid rgba(61,217,184,.3);
    color: var(--primary-ink); border-radius: var(--radius-full);
    padding: .55rem 1.1rem; font-size: .85rem; font-weight: 700;
    display: inline-flex; align-items: center; gap: .45rem;
}
.flow-outcome .rest { font-size: .88rem; color: var(--text-tertiary); }

.flow-note { text-align: center; margin-top: 1.5rem; font-size: .84rem; color: var(--text-muted); }

/* ============================================
   AUTOMATION CANVAS — n8n-style node graph
   ============================================ */
.canvas-wrap {
    background: var(--bg-card); border: 1px solid var(--border-primary);
    border-radius: 1.4rem; padding: 1.6rem 1.4rem 1.3rem; position: relative; overflow: hidden;
}
.canvas-wrap::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(var(--border-primary) 1px, transparent 1px),
        linear-gradient(90deg, var(--border-primary) 1px, transparent 1px);
    background-size: 26px 26px; opacity: .35;
}
.canvas-wrap > * { position: relative; }

.canvas-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.canvas-hint { font-size: .8rem; color: var(--text-muted); display: flex; align-items: center; gap: .45rem; }
.canvas-hint i { color: var(--primary-ink); }
.btn-run {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--gradient-primary); color: #06231d; border: none;
    border-radius: var(--radius-full); padding: .6rem 1.2rem;
    font-family: var(--font-primary); font-size: .85rem; font-weight: 700; cursor: pointer;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.btn-run:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); }
.btn-run:focus-visible { outline: 3px solid var(--primary-color); outline-offset: 3px; }
.btn-run.running { opacity: .65; cursor: default; }

.flow-canvas { width: 100%; height: auto; display: block; overflow: visible; }

/* edges */
.edge { fill: none; stroke: var(--border-secondary); stroke-width: 2; transition: stroke .3s ease, stroke-width .3s ease; }
.edge.hot { stroke: var(--primary-color); stroke-width: 2.6; }
.edge.dim { opacity: .22; }

/* pulses */
.pulse { fill: var(--primary-color); filter: drop-shadow(0 0 5px rgba(61,217,184,.75)); }
.pulse.dim { opacity: .12; }

/* nodes */
.node { cursor: pointer; }
.node-box { fill: var(--bg-tertiary); stroke: var(--border-primary); stroke-width: 1.4; transition: stroke .3s ease, fill .3s ease; }
.node:hover .node-box, .node:focus .node-box { stroke: var(--primary-color); }
.node:focus { outline: none; }
.node:focus .node-box { stroke-width: 2.4; }
.node.active .node-box { stroke: var(--primary-color); stroke-width: 2.4; fill: var(--bg-elevated); }
.node.dim { opacity: .3; }

.node-chip { fill: var(--primary-soft); stroke: rgba(61,217,184,.28); stroke-width: 1; }
.node-ic { font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 14px; fill: var(--primary-ink); }
.node-title { font-family: var(--font-primary); font-size: 13.5px; font-weight: 700; fill: var(--text-primary); }
.node-sub { font-family: var(--font-primary); font-size: 11px; fill: var(--text-muted); }

.node-trigger .node-box { fill: var(--bg-elevated); }
.node-brain .node-box { stroke: rgba(61,217,184,.55); }
.node-brain .node-chip { fill: rgba(61,217,184,.22); }

.col-cap {
    font-family: var(--font-primary); font-size: 10.5px; font-weight: 800;
    letter-spacing: .11em; text-transform: uppercase; fill: var(--text-muted);
}

/* detail readout */
.canvas-detail {
    margin-top: 1rem; padding: .95rem 1.1rem; min-height: 62px;
    background: var(--bg-tertiary); border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    display: flex; align-items: center; gap: .8rem;
}
.canvas-detail .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--primary-color); flex-shrink: 0; }
.canvas-detail b { color: var(--text-primary); font-size: .9rem; }
.canvas-detail span { color: var(--text-tertiary); font-size: .86rem; }

/* mobile stacked fallback */
.canvas-stack { display: none; }
.canvas-stack .flow-step { margin-bottom: .6rem; }
.canvas-stack .rail { text-align: center; color: var(--primary-ink); font-size: .8rem; margin: .1rem 0 .5rem; }

/* One canvas per breakpoint — each drawn for the space it has */
.cv-wide   { display: block; }
.cv-mid,
.cv-narrow { display: none; }

@media (max-width: 1024px) {
    .cv-wide   { display: none; }
    .cv-mid    { display: block; }
}

@media (max-width: 760px) {
    .cv-mid    { display: none; }
    .cv-narrow { display: block; }
    .canvas-wrap { padding: 1.2rem .9rem; }
    .canvas-bar { justify-content: center; gap: .7rem; }
    .canvas-hint { font-size: .74rem; text-align: center; }
    .btn-run { width: 100%; justify-content: center; }
    .canvas-detail { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .pulse { display: none; }
}

/* ============================================
   HERO SOCIAL ROW — under the portrait panel
   ============================================ */
.hero-visual { display: flex; flex-direction: column; gap: 1.15rem; }

.hero-social {
    display: flex; align-items: center; justify-content: center;
    gap: .6rem; flex-wrap: wrap;
}
.hero-social a {
    width: 46px; height: 46px; border-radius: var(--radius-full);
    background: var(--bg-card); border: 1px solid var(--border-primary);
    color: var(--text-tertiary); font-size: 1.08rem;
    display: flex; align-items: center; justify-content: center;
    transition: color var(--transition-base), border-color var(--transition-base),
                transform var(--transition-base), background var(--transition-base);
}
.hero-social a:hover {
    color: #06231d; background: var(--gradient-primary);
    border-color: transparent; transform: translateY(-3px);
    box-shadow: var(--shadow-glow);
}
.hero-social a:focus-visible { outline: 3px solid var(--primary-color); outline-offset: 3px; }

@media (max-width: 400px) {
    .hero-social a { width: 44px; height: 44px; font-size: 1rem; }
    .hero-social { gap: .45rem; }
}

/* Optical balance: the Facebook "f" and LinkedIn "in" are narrower
   glyphs than the envelope, so they need a nudge to read as equal size. */
.hero-social .fa-facebook-f { font-size: 1.22rem; }
.hero-social .fa-linkedin-in { font-size: 1.14rem; }
.social-row .fa-facebook-f { font-size: 1.1rem; }


/* Personal aside in the hero lede */
.lede-aside { color: var(--text-muted); }

/* ============================================
   BRAND-COLOURED SOCIAL ICONS
   Each brand gets a light variant for the dark theme and the
   official shade for the light theme, so both clear 3:1 against
   their background (WCAG 1.4.11 for non-text UI).
   ============================================ */
.hero-social a.soc, .social-row a.soc { transition: color var(--transition-base), background var(--transition-base),
                                                    border-color var(--transition-base), transform var(--transition-base); }
.soc-linkedin  { --brand: #4DA3E8; --brand-solid: #0A66C2; }
.soc-facebook  { --brand: #5A9BF8; --brand-solid: #1877F2; }
.soc-whatsapp  { --brand: #25D366; --brand-solid: #128C7E; }
.soc-email     { --brand: #3DD9B8; --brand-solid: #0D6B57; }

[data-theme="light"] .soc-linkedin { --brand: #0A66C2; }
[data-theme="light"] .soc-facebook { --brand: #1877F2; }
[data-theme="light"] .soc-whatsapp { --brand: #128C7E; }
[data-theme="light"] .soc-email    { --brand: #0D6B57; }

.hero-social a.soc { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 34%, transparent); }
.hero-social a.soc:hover {
    background: var(--brand-solid); border-color: var(--brand-solid);
    color: #ffffff; transform: translateY(-3px);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--brand-solid) 45%, transparent);
}
.social-row a.soc { color: var(--brand); }
.social-row a.soc:hover { background: var(--brand-solid); border-color: var(--brand-solid); color: #fff; }

/* WhatsApp green is bright — a white glyph on it is illegible, so the
   hover state uses a dark glyph instead. */
.hero-social a.soc-whatsapp:hover, .social-row a.soc-whatsapp:hover { color: #ffffff; }


/* Narrow canvas is a tall column; give it a viewport-bounded scroll area
   so the section doesn't run to several screens on a phone. */
@media (max-width: 760px) {
    .canvas-scroll { max-height: 68vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
                     border-radius: var(--radius-lg); }
    .canvas-scroll::-webkit-scrollbar { width: 5px; }
    .canvas-scroll::-webkit-scrollbar-thumb { background: var(--border-secondary); border-radius: 4px; }
}


/* ============================================
   PLATFORMS — real brand marks, muted until hover
   ============================================ */
.pf-label {
    font-size: .72rem; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: var(--text-muted);
    margin-bottom: 1rem; text-align: center;
}
.pf-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: .8rem; max-width: 960px; margin: 0 auto;
}
.pf-core { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); max-width: 660px; }

.pf-tile {
    background: var(--bg-card); border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg); padding: 1.05rem .6rem .85rem;
    display: flex; flex-direction: column; align-items: center; gap: .6rem;
    transition: border-color var(--transition-base), transform var(--transition-base),
                background var(--transition-base);
}
.pf-tile:hover { transform: translateY(-3px); border-color: var(--brand); }

.pf-mark { width: 26px; height: 26px; flex-shrink: 0; }
.pf-mark path { fill: var(--text-tertiary); transition: fill var(--transition-base); }
.pf-tile:hover .pf-mark path { fill: var(--brand); }

/* GoHighLevel has no vector mark in any icon set — labelled monogram instead */
.pf-mono {
    width: 26px; height: 26px; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    font-size: .68rem; font-weight: 800; letter-spacing: .02em;
    background: var(--bg-elevated); color: var(--text-tertiary);
    border: 1px solid var(--border-secondary);
    transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
.pf-tile:hover .pf-mono { background: var(--brand); color: #fff; border-color: var(--brand); }

.pf-name { font-size: .76rem; font-weight: 600; color: var(--text-secondary); text-align: center; line-height: 1.25; }

.pf-core .pf-tile { padding: 1.3rem .7rem 1.1rem; }
.pf-core .pf-mark, .pf-core .pf-mono { width: 34px; height: 34px; }
.pf-core .pf-mono { font-size: .82rem; border-radius: 9px; }
.pf-core .pf-name { font-size: .88rem; font-weight: 700; }

@media (max-width: 520px) {
    .pf-grid { grid-template-columns: repeat(auto-fit, minmax(94px, 1fr)); gap: .6rem; }
    .pf-core { grid-template-columns: repeat(2, 1fr); }
    .pf-name { font-size: .72rem; }
}

/* ============================================
   EMBEDDED WIDGET FRAMES
   ============================================ */
.widget-frame {
    position: relative; width: 100%; overflow: hidden;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary); border-radius: var(--radius-xl);
    margin-bottom: 1.5rem;
}
.widget-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
/* Fills whatever box it's given, so a plain ratio is enough */
.widget-ratio { aspect-ratio: 16 / 10; }
@media (max-width: 620px) { .widget-ratio { aspect-ratio: 4 / 3; } }

.widget-cap {
    font-size: .78rem; color: var(--text-muted); text-align: center;
    margin: -.9rem 0 1.9rem; display: flex; align-items: center; justify-content: center; gap: .4rem;
}
.widget-cap i { color: var(--primary-ink); font-size: .7rem; }

/* Several brand colours are very dark (Slack #4A154B, ChatGPT #412991) or
   very light (Mailchimp #FFE01B). Mix toward the opposite end per theme so
   every logo stays visible on hover without losing its brand identity. */
.pf-tile:hover .pf-mark path { fill: color-mix(in srgb, var(--brand) 72%, #ffffff); }
.pf-tile:hover .pf-mono { background: color-mix(in srgb, var(--brand) 78%, #ffffff); color: #0a0a0a; }
.pf-tile:hover { border-color: color-mix(in srgb, var(--brand) 60%, transparent); }

[data-theme="light"] .pf-tile:hover .pf-mark path { fill: color-mix(in srgb, var(--brand) 86%, #000000); }
[data-theme="light"] .pf-tile:hover .pf-mono { background: color-mix(in srgb, var(--brand) 86%, #000000); color: #fff; }

/* Light theme: the resting monogram chip was near-invisible (1.18:1) */
[data-theme="light"] .pf-mono {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-color: var(--border-secondary);
}

/* The website widget's bundler adds a player bar (play / restart / export)
   along the bottom. Export is authoring chrome and the animation loops on
   its own, so the bar is cropped out rather than shown on the portfolio. */
.widget-crop-bottom iframe { height: calc(100% + 54px); }

/* ============================================
   WHAT I DO — four statements, each linked to its proof
   ============================================ */
.whatido { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin: 1.6rem 0 1.9rem; }
.whatido a {
    display: flex; align-items: center; gap: .7rem;
    background: var(--bg-card); border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg); padding: .75rem .9rem;
    transition: border-color var(--transition-base), transform var(--transition-base), background var(--transition-base);
}
.whatido a:hover { border-color: var(--primary-color); transform: translateX(3px); }
.whatido a:focus-visible { outline: 3px solid var(--primary-color); outline-offset: 3px; }
.whatido a > i:first-child { color: var(--primary-ink); font-size: .95rem; width: 20px; text-align: center; flex-shrink: 0; }
.whatido span { display: flex; flex-direction: column; line-height: 1.3; flex: 1; }
.whatido b { font-size: .88rem; font-weight: 700; color: var(--text-primary); }
.whatido span { font-size: .76rem; color: var(--text-muted); }
.whatido .go { font-size: .72rem; color: var(--text-muted); transition: transform var(--transition-base), color var(--transition-base); }
.whatido a:hover .go { color: var(--primary-ink); transform: translateX(3px); }

@media (max-width: 1024px) { .whatido { grid-template-columns: 1fr; } }
@media (max-width: 680px)  { .whatido { gap: .5rem; margin: 1.3rem 0 1.5rem; } }

/* ============================================
   PLATFORM LOGOS IN BRAND COLOUR AT REST
   Each tile carries three values: the true brand hex (--brand) plus
   --bd / --bl, the same hue nudged in lightness only as far as it needs
   to clear 3.4:1 on the dark and light card respectively. Most brands
   are unchanged; only the near-black and near-white ones move.
   ============================================ */
.pf-mark path { fill: var(--bd); }
.pf-mono { background: var(--bd); color: #0a0a0a; border-color: transparent; }
.pf-tile { border-color: color-mix(in srgb, var(--bd) 18%, var(--border-primary)); }
.pf-tile:hover { border-color: color-mix(in srgb, var(--bd) 60%, transparent); }

[data-theme="light"] .pf-mark path { fill: var(--bl); }
[data-theme="light"] .pf-mono { background: var(--bl); color: #fff; }
[data-theme="light"] .pf-tile { border-color: color-mix(in srgb, var(--bl) 18%, var(--border-primary)); }
[data-theme="light"] .pf-tile:hover { border-color: color-mix(in srgb, var(--bl) 60%, transparent); }


/* Poster still behind each widget. The iframe covers it when it renders;
   if a sandbox blocks nested frames, the visitor sees the still rather
   than an empty box. */
.widget-frame { background-size: cover; background-position: top center; background-repeat: no-repeat; }
.widget-frame iframe { position: relative; z-index: 2; }


/* ============================================
   ABOUT / CONTACT — photo one side, CTA the other
   ============================================ */
.about-cta { display: grid; grid-template-columns: .8fr 1.2fr; gap: 3rem; align-items: center; }

.cta-panel { background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 1.2rem; padding: 2rem 1.9rem; }
.cta-panel h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: .7rem; }
.cta-panel > p { color: var(--text-tertiary); font-size: .95rem; margin-bottom: 1.5rem; }

.cta-form { display: flex; flex-direction: column; gap: .85rem; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.f-field { display: flex; flex-direction: column; gap: .35rem; }
.f-field > span { font-size: .76rem; font-weight: 700; letter-spacing: .04em; color: var(--text-muted); text-transform: uppercase; }
.f-field input, .f-field textarea {
    background: var(--bg-tertiary); border: 1px solid var(--border-primary);
    border-radius: var(--radius-md); padding: .7rem .85rem;
    font-family: var(--font-primary); font-size: .92rem; color: var(--text-primary);
    transition: border-color var(--transition-base);
}
.f-field input::placeholder, .f-field textarea::placeholder { color: var(--text-muted); }
.f-field input:focus, .f-field textarea:focus { outline: none; border-color: var(--primary-color); }
.f-field input:focus-visible, .f-field textarea:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 1px; }
.f-field textarea { resize: vertical; min-height: 84px; }
.f-field.invalid input, .f-field.invalid textarea { border-color: var(--accent-red); }

.f-submit { align-self: flex-start; margin-top: .3rem; }
.f-note { font-size: .82rem; min-height: 1.1rem; margin: 0; }
.f-note.err { color: var(--accent-red); }
.f-note.ok  { color: var(--accent-green); }

.cta-alt { margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid var(--border-primary); }
.cta-alt > span { font-size: .78rem; color: var(--text-muted); display: block; margin-bottom: .6rem; }
.cta-alt-links { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.cta-alt-links a { display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; font-weight: 600; color: var(--text-secondary); }
.cta-alt-links a i { color: var(--primary-ink); }
.cta-alt-links a:hover { color: var(--primary-ink); }

@media (max-width: 900px) {
    .about-cta { grid-template-columns: 1fr; gap: 2.2rem; }
    .about-photo { max-width: 300px; margin: 0 auto; }
}
@media (max-width: 560px) {
    .f-row { grid-template-columns: 1fr; }
    .cta-panel { padding: 1.5rem 1.2rem; }
    .f-submit { width: 100%; justify-content: center; }
}

/* ============================================
   PAIR — the process demo beside the work it produced
   ============================================ */
.pair { display: grid; grid-template-columns: 1.05fr .95fr; gap: 1.8rem; align-items: start; margin-bottom: 3.4rem; }
.pair-demo { position: sticky; top: 96px; }
.pair-demo .widget-frame { margin-bottom: .8rem; }
.pair-demo .widget-cap { margin: 0; }
.pair-work { display: flex; flex-direction: column; gap: 1.1rem; }
.pair-work > * { margin: 0; }

@media (max-width: 1024px) {
    .pair { grid-template-columns: 1fr; gap: 1.6rem; }
    .pair-demo { position: static; }
}

/* Grid children default to min-content width, and the SEO iframe is a
   fixed 640px while it scales — that forced the column open on phones.
   min-width:0 lets the column shrink as intended. */
.pair > * { min-width: 0; }
.widget-frame { max-width: 100%; }

/* ============================================
   FOOTER — one row: logo with name + email beside it, socials opposite
   ============================================ */
.footer-slim { padding: 2.4rem 0; }
.footer-slim-row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }

.footer-id { display: flex; align-items: center; gap: .9rem; }
.footer-id .brand img { height: 40px; width: auto; }
.footer-id-text { display: flex; flex-direction: column; line-height: 1.45; }
.footer-name { font-size: .86rem; font-weight: 600; color: var(--text-secondary); }
.footer-mail { font-size: .84rem; color: var(--text-muted); }
.footer-mail:hover { color: var(--primary-ink); }

.footer-slim .social-row { margin-top: 0; }
.footer-slim .social-row a { width: 40px; height: 40px; }

@media (max-width: 560px) {
    .footer-slim-row { flex-direction: column; text-align: center; gap: 1.2rem; }
    .footer-id { flex-direction: column; gap: .6rem; }
    .footer-id-text { align-items: center; }
}

/* Group heading now lives in the work column, beside its demo */
.pair-head { margin-bottom: .3rem; }
.pair-head h3 { font-size: 1.35rem; display: flex; align-items: center; gap: .55rem; margin-bottom: .4rem; }
.pair-head h3 i { color: var(--primary-ink); font-size: 1rem; }
.pair-head p { font-size: .92rem; color: var(--text-tertiary); }

/* Result figures on each project */
.metrics { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.mt {
    flex: 1 1 auto; min-width: 88px;
    background: var(--primary-soft); border: 1px solid rgba(61,217,184,.22);
    border-radius: var(--radius-md); padding: .6rem .7rem; text-align: center;
}
.mt b { display: block; font-size: 1.08rem; font-weight: 800; color: var(--primary-ink); line-height: 1.15; letter-spacing: -.01em; }
.mt span { display: block; font-size: .68rem; color: var(--text-tertiary); margin-top: .2rem; line-height: 1.25; }
[data-theme="light"] .mt { background: rgba(13,107,87,.09); border-color: rgba(13,107,87,.2); }

/* ============================================
   LIGHT MODE — icons and data need real weight here.
   The dark theme carries them on contrast alone; on white they were
   washing out, so tinted chips and stronger ink are used instead.
   ============================================ */
[data-theme="light"] .card-icon,
[data-theme="light"] .showcase-head .icon {
    background: rgba(13,107,87,.10);
    border-color: rgba(13,107,87,.28);
    color: var(--primary-ink);
}
[data-theme="light"] .node-chip { fill: rgba(13,107,87,.12); stroke: rgba(13,107,87,.3); }
[data-theme="light"] .node-ic { fill: var(--primary-ink); }
[data-theme="light"] .node-box { fill: #ffffff; stroke: #d7dde4; }
[data-theme="light"] .node.active .node-box { stroke: var(--primary-ink); }
[data-theme="light"] .edge { stroke: #c4ccd6; }
[data-theme="light"] .edge.hot { stroke: var(--primary-ink); }
[data-theme="light"] .pulse { fill: var(--primary-ink); filter: none; }
[data-theme="light"] .col-cap { fill: var(--text-muted); }

[data-theme="light"] .flow-step .ic { background: rgba(13,107,87,.10); color: var(--primary-ink); }
[data-theme="light"] .whatido a > i:first-child { color: var(--primary-ink); }
[data-theme="light"] .shot { border-color: rgba(13,107,87,.32); }
[data-theme="light"] .shot-label { background: var(--primary-ink); color: #fff; }
[data-theme="light"] .work-result { background: rgba(13,107,87,.08); border-left-color: var(--primary-ink); }
[data-theme="light"] .canvas-wrap::before { opacity: .5; }
[data-theme="light"] .canvas-detail { background: #f4f6f8; }
[data-theme="light"] .service-list li i { color: var(--primary-ink); }
[data-theme="light"] .cred-item i { color: var(--primary-ink); }

/* social icons keep their true brand colour in light mode too */
[data-theme="light"] .soc-linkedin { --brand: #0A66C2; }
[data-theme="light"] .soc-facebook { --brand: #1877F2; }
[data-theme="light"] .soc-whatsapp { --brand: #128C7E; }
[data-theme="light"] .soc-email    { --brand: #0D6B57; }
[data-theme="light"] .hero-social a.soc,
[data-theme="light"] .social-row a.soc {
    color: var(--brand);
    border-color: color-mix(in srgb, var(--brand) 38%, transparent);
    background: color-mix(in srgb, var(--brand) 7%, transparent);
}
[data-theme="light"] .hero-social a.soc:hover,
[data-theme="light"] .social-row a.soc:hover {
    background: var(--brand); color: #fff; border-color: var(--brand);
}

/* GoHighLevel has no vector mark in any icon set, so it gets a deliberate
   wordmark tile rather than a two-letter stub that reads as a failure. */
.pf-word {
    display: flex; align-items: center; justify-content: center;
    height: 34px; padding: 0 .6rem; border-radius: 8px;
    background: var(--bd); color: #0a0a0a;
    font-size: .82rem; font-weight: 800; letter-spacing: .04em;
}
[data-theme="light"] .pf-word { background: var(--bl); color: #fff; }
.pf-core .pf-word { height: 38px; font-size: .92rem; }

/* ============================================
   AI AGENT DEMOS — run the real agent inside the page
   ============================================ */
.agents { background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: var(--radius-xl); overflow: hidden; }
.agent-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--border-primary); }
.agent-tab {
    background: transparent; border: 0; border-right: 1px solid var(--border-primary);
    padding: .95rem 1rem; cursor: pointer; text-align: left;
    display: flex; flex-direction: column; gap: .12rem;
    transition: background var(--transition-base);
}
.agent-tab:last-child { border-right: 0; }
.agent-tab b { font-size: .92rem; font-weight: 700; color: var(--text-primary); }
.agent-tab span { font-size: .74rem; color: var(--text-muted); }
.agent-tab:hover { background: var(--bg-tertiary); }
.agent-tab.is-on { background: var(--primary-soft); box-shadow: inset 0 -2px 0 var(--primary-color); }
.agent-tab.is-on b { color: var(--primary-ink); }
.agent-tab:focus-visible { outline: 3px solid var(--primary-color); outline-offset: -3px; }

.agent-stage { position: relative; aspect-ratio: 16 / 11; background: var(--bg-tertiary); }
.agent-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.agent-idle {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center;
    gap: .6rem; padding: 1.6rem;
}
.agent-idle > i { font-size: 1.9rem; color: var(--primary-ink); }
.agent-idle b { font-size: 1.05rem; color: var(--text-primary); }
.agent-idle span { font-size: .88rem; color: var(--text-tertiary); max-width: 42ch; }
.agent-idle small { font-size: .74rem; color: var(--text-muted); }
.agent-idle .btn { margin-top: .3rem; }

@media (max-width: 620px) {
    .agent-tabs { grid-template-columns: 1fr; }
    .agent-tab { border-right: 0; border-bottom: 1px solid var(--border-primary); }
    .agent-tab.is-on { box-shadow: inset 3px 0 0 var(--primary-color); }
    .agent-stage { aspect-ratio: 3 / 4; }
}

/* SEO demo gets a heading on mobile, where it sits far from its column title.
   Hidden by default — the media query is the only thing that shows it. */
.widget-demo-head {
    display: none;
    font-size: 1.05rem; font-weight: 700; color: var(--text-primary);
    margin: 0 0 .6rem; align-items: center; gap: .5rem;
}
.widget-demo-head::before { content: '\f201'; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: var(--primary-ink); font-size: .9rem; }
@media (max-width: 1024px) { .widget-demo-head { display: flex; } }

/* ============================================
   TIGHTER RHYTHM
   Sections were carrying 6rem of padding plus 3.5rem header margins,
   which read as dead space once the labels came off.
   ============================================ */
.section { padding: 3.9rem 0; }
.section-header { margin-bottom: 2.2rem; }
.section-header p { margin-top: .6rem; }
.pair { margin-bottom: 2.4rem; }
.hero { padding: 3.4rem 0 3.6rem; }
.flow-note { margin-top: 1.1rem; }
.short-band { padding: 3rem 0; }

@media (max-width: 680px) {
    .section { padding: 2.9rem 0; }
    .section-header { margin-bottom: 1.7rem; }
}


/* ============================================
   BOTTOM CTA — photo column matches the form's height
   ============================================ */
.about-cta { align-items: stretch; }
.about-photo { display: flex; }
.about-photo .frame { width: 100%; height: 100%; aspect-ratio: auto; align-items: flex-end; }
.about-photo .frame img { width: auto; max-width: 100%; max-height: 100%; object-fit: contain; object-position: bottom; margin: 0 auto; }
@media (max-width: 900px) {
    .about-photo .frame { aspect-ratio: 1 / 1; }
}


/* Where I build: a fixed 4-across grid, so 8 tiles land as two clean rows
   rather than reflowing to an odd count. */
.pf-core { grid-template-columns: repeat(4, 1fr); max-width: 760px; }
@media (max-width: 760px)  { .pf-core { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px)  { .pf-core { grid-template-columns: repeat(2, 1fr); } }

/* The agent demo stage was taller than it needed to be */
.agent-stage { aspect-ratio: 16 / 8.5; }
@media (max-width: 620px) { .agent-stage { aspect-ratio: 4 / 3.4; } }
.agent-idle > i { font-size: 1.6rem; }
.agent-idle b { font-size: .98rem; }
.agent-idle span { font-size: .84rem; }
.agent-tab { padding: .8rem .9rem; }

/* the GHL wordmark chip was 4px taller than the SVG marks, leaving the
   two rows slightly uneven */
.pf-core .pf-word { height: 34px; font-size: .85rem; }
.pf-tile { justify-content: flex-start; }

/* ============================================
   PAIR GRID — heading beside the work on desktop,
   above the demo on mobile
   ============================================ */
.pair {
    grid-template-areas: "demo head" "demo work";
    grid-template-rows: auto 1fr;
}
.pair-head { grid-area: head; }
.pair-demo { grid-area: demo; }
.pair-work { grid-area: work; }

@media (max-width: 1024px) {
    .pair { grid-template-areas: "head" "demo" "work"; grid-template-rows: auto auto auto; }
}

/* ============================================
   AGENT TABS — full names on desktop, short codes on mobile
   so all three stay on one row
   ============================================ */
.t-abbr { display: none; }
@media (max-width: 620px) {
    .agent-tabs { grid-template-columns: repeat(3, 1fr); }
    .agent-tab {
        border-right: 1px solid var(--border-primary); border-bottom: 0;
        padding: .6rem .4rem; text-align: center; align-items: center; gap: .05rem;
    }
    .agent-tab:last-child { border-right: 0; }
    .agent-tab.is-on { box-shadow: inset 0 -2px 0 var(--primary-color); }
    .t-full { display: none; }
    .t-abbr { display: inline; }
    .agent-tab b { font-size: .95rem; letter-spacing: .02em; }
    .agent-tab span { font-size: .62rem; line-height: 1.2; }
}


/* ============================================
   VIDEO TESTIMONIALS
   Wistia's own player is mounted directly: it supplies the real
   high-resolution poster and play control, and does not autoplay, so
   playback is still click-only. Both videos sit in an identical box
   (one is portrait 0.63, the other landscape 1.79) and are letterboxed,
   so the pair reads as a set and the height never changes on play.
   ============================================ */
.vid-grid { align-items: stretch; }
.vid-card {
    margin: 0; height: 100%;
    border-radius: var(--radius-xl); overflow: hidden;
    border: 1px solid var(--border-primary);
    background: #0d0f12;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.vid-card:hover { transform: translateY(-4px); border-color: rgba(61,217,184,.42); box-shadow: var(--shadow-xl); }

.vid-embed { position: relative; width: 100%; aspect-ratio: 16 / 10; background: #0d0f12; }
.vid-embed wistia-player,
.vid-embed > div,
.vid-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* keep the portrait video whole rather than cropping the speaker */
.vid-embed wistia-player { --wistia-player-object-fit: contain; }

/* placeholder while the player script boots */
.vid-embed::before {
    content: ''; position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(140deg, #16202a 0%, #0d0f12 70%);
}
.vid-embed.is-live::before { display: none; }

/* The Websites heading carries "Tap any screen to view it full size",
   which refers to the showcase cards — above the demo it reads as an
   instruction for the wrong thing. On mobile it drops below the demo so
   it sits directly on top of the cards it describes. */
@media (max-width: 1024px) {
    .pair-head-below { grid-template-areas: "demo" "head" "work"; }
}

/* ============================================
   MOBILE CONTAINMENT
   Third-party embeds (Wistia player, the agent iframe) size themselves
   once their scripts load. Without hard containment a tall or wide
   render can push the page and leave dead space past the footer.
   ============================================ */
html, body { overflow-x: hidden; }
.vid-embed, .agent-stage, .widget-frame { overflow: hidden; contain: paint; }
.vid-embed > *, .agent-stage > * { max-width: 100%; }
footer { position: relative; z-index: 1; }