@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@700&display=swap');

:root{
  --page-width: 900px;
  --hero-offset: clamp(200px, 17vw, 400px);
  --gap: 22px;
  --panel-border: 4px;
  --frame-row-height: 360px;
}

*{ box-sizing: border-box; margin: 0; padding: 0; }
html{ scroll-behavior: smooth; }

body{
  font-family: 'Bangers', cursive;
  color: #000;
  font-size: 20px;
  letter-spacing: 1px;
 /* Wall behind the neon sign: pure black, so the fading logo blends in */
  background-color: #000;
}

/* ===== Header / Menu ===== */
.site-header{
  position: absolute;
  top: clamp(18px, 2vw, 30px);
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--page-width);
  background-color: #f4e4bc;
  border: 3px solid #000;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
  padding: 10px 0;
  z-index: 1000;
}

.site-nav ul{
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 0 5px;
}

.site-nav a{
  text-decoration: none;
  color: #2c1a0b;
  font-size: 1.4rem;
  text-transform: uppercase;
  transition: color 0.2s, transform 0.2s;
}

.site-nav a:hover{
  color: #d94424;
  transform: scale(1.06);
}

/* ===== Mobile hamburger toggle (hidden on desktop) ===== */
.nav-toggle{ display: none; }   /* the checkbox itself is never visible */
.nav-burger{ display: none; }   /* shown only inside the mobile media query */

/* ===== Neon logo overlay (shared on every page) =====
   Lives in the same centred column as the menu, so it never drifts
   relative to the menu at any zoom. The PNG fades to black on all
   edges, melting into the black wall. */
.hero-logo{
  position: absolute;
  top: clamp(28px, 4vw, 64px);     /* raised a little */
  left: 50%;
  transform: translateX(-50%);
  width: min(92%, 672px);          /* ~20% larger */
  z-index: -1;                     /* sit behind the content, above the black wall */
  pointer-events: none;
}
.hero-logo img{ display:block; width:100%; height:auto; }

/* Invisible click target over the neon sign -> home.
   Floats in the empty hero gap: above the content, below the menu,
   so it never covers the comic panels and never blocks the menu. */
.logo-home{
  position:absolute;
  top: clamp(42px, 5.5vw, 88px);   /* same start as the logo */
  left:50%;
  transform:translateX(-50%);
  width:min(80%, 520px);
  height:180px;                    /* only the glow area, stays above the first panel */
  z-index:950;                     /* above content, below the menu (1000) */
  cursor:pointer;
}

/* ===== Sub-pages (About, Dream Guitar) ===== */
.page{
  max-width: var(--page-width);
  margin: 0 auto;
  padding: var(--hero-offset) 18px 120px;
  position: relative;
  z-index: 10;
}
.page-panel{
  background:#F6E7D4;
  border:4px solid #000;
  box-shadow:6px 6px 0 rgba(0,0,0,0.45);
  padding:28px 30px;
  margin-bottom:26px;
}
.page-title{
  font-family:'Bangers', cursive;
  font-size:clamp(2.4rem, 6vw, 4rem);
  color:#d94424;
  text-transform:uppercase;
  line-height:1;
  margin-bottom:16px;
}
.page-panel p{ font-family:'Comic Neue',sans-serif; font-weight:700; color:#2c1a0b; line-height:1.5; font-size:1.05rem; margin-bottom:12px; }
.page-panel a{ color:#d94424; text-decoration:none; border-bottom:2px solid #d94424; }
.page-panel a:hover{ color:#fff; background:#d94424; }
.back-btn{ display:inline-block; margin-top:6px; font-family:'Bangers',cursive; letter-spacing:1px; color:#f4e4bc; text-decoration:none; font-size:1.4rem; }
.back-btn:hover{ color:#d94424; }

/* Inline gold links inside the About text */
.about-body a{
  color:#e6a23c;
  text-decoration:none;
  transition:color .2s ease;
}
.about-body a:hover{
  color:#ffce7a;                  /* brighter gold on hover */
}

/* ===== Main container ===== */
.comic-container{
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 15px;
  padding-top: var(--hero-offset);
  padding-bottom: 120px;
}

/* ===== Mockup grid ===== */
.frames-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  align-items: stretch; 
}

/* ===== Panel shell ===== */
.comic-panel{
  position: relative;
  border: var(--panel-border) solid #000;
  background: #000;
  overflow: hidden;
}

/* ===== Comic Text Boxes ===== */
.comic-text {
  position: absolute;
  background-color: #F6E7D4;
  border: 3px solid #000;
  font-family: 'Bangers', cursive;
  font-size: 1.0rem;
  line-height: 1.1;
  padding: 10px 15px;
  z-index: 20;
  
  opacity: 0;
  transform: translateY(30px);
}

.comic-text.has-typed {
  opacity: 1; 
}

.caption-box {
  background: #F6E7D4; 
  text-transform: uppercase;
}

.speech-bubble {
  font-family: 'Comic Neue', cursive; 
  font-weight: 700; 
  letter-spacing: 0.5px; 
  border-radius: 50%;
  text-align: center;
  border-width: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -13px; 
  left: 20px;
  border-width: 20px 20px 0 0;
  border-style: solid;
  border-color: #F6E7D4 transparent transparent transparent;
  display: block;
  width: 0;
}

.speech-bubble::before {
  content: '';
  position: absolute;
  bottom: -17px; 
  left: 17px; 
  border-width: 24px 24px 0 0;
  border-style: solid;
  border-color: #000 transparent transparent transparent;
  display: block;
  width: 0;
  z-index: -1;
}

/* Frame 3 (Viral) Bubble Fix */
#txt-videos-speech::before,
#txt-videos-speech::after {
  left: auto;  
  right: 20px; 
}

#txt-videos-speech::before {
  right: 17px; 
  border-width: 24px 0 0 24px;
}

#txt-videos-speech::after {
  border-width: 20px 0 0 20px;
}

/* Red Links */
.comic-link {
  font-family: 'Bangers', cursive; /* NEW: Sets font to Bangers */
  letter-spacing: 1px;             /* NEW: Adds spacing standard for Bangers */
  font-weight: normal;             /* NEW: Bangers is already bold by default */
  color: #d94424;
  text-decoration: none;
  cursor: pointer;
  font-size: 1.5em; 
  padding: 0 4px;
}
.comic-link:hover {
  background-color: #d94424;
  color: #fff;
}

/* ===== Images & Layers ===== */
.panel-fixed{
  height: var(--frame-row-height);
}

.panel-image,
.panel-bg{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; 
}

.panel-layered{ position: relative; }

#bg-guitars{
  filter: blur(0px);
  transition: filter 150ms ease-out;
  will-change: filter;
}

.panel-layered .panel-fg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; 
  pointer-events: none;
  z-index: 30; 
}

#img-cat-downloads{
  inset: auto;          
  top: -44px;           
  right: -64px;         
  width: clamp(200px, 48%, 320px);
  height: auto;         
  z-index: 60;          
}

/* === IMAGE SCROLL CONTROL SETUP === */
#img-guitar,
#img-cat,
#img-cat-downloads,
#img-cat-planner {
  opacity: 0;
  transform: translateY(50px) scale(0.9);
  transition: none;
}

/* ===== Grid Arrangement ===== */
.panel-about { grid-column: 1 / 2; overflow: visible; z-index: 100; }
.panel-guitars   { grid-column: 2 / 4; }
.panel-videos    { grid-column: 1 / 3; } 
.panel-downloads { 
  grid-column: 3 / 4; 
  overflow: visible; 
  z-index: 110;      
} 
#txt-downloads { z-index: 100; }
.panel-music     { grid-column: 1 / 4; }
.panel-bottom    { 
  grid-column: 1 / 4; 
  overflow: visible; 
  z-index: 120;
}
#txt-frame7-nerds {
  z-index: 120; /* Higher than diagonal-line (20) but stays within panel-bottom (120) */
  text-transform: uppercase;
  pointer-events: auto; /* Ensures links remain clickable */
}
.panel-contact   { 
  grid-column: 1 / 4; 
  overflow: visible; /* <--- This allows the bubble to pop outside the border */
  z-index: 130;      /* <--- Ensures it floats on top of everything else */
}


/* ===== Bottom Diagonal Split ===== */
.diagonal-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  background: #fdf5e6;
  overflow: hidden;
}

.split-side {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shop-side {
  left: 0;
  width: 100%;
  background: #fdf5e6;
  z-index: 1;
  clip-path: polygon(65% 0, 100% 0, 100% 100%, 45% 100%);
  padding: 0;
  display: block;
  overflow: hidden;
}

.shop-side .split-bg{
  position: absolute;
  top: 0;
  right: 0;
  height: 110%;
  width: auto;
  z-index: 2;
  pointer-events: none;
}

.planner-side {
  left: 0;
  width: 100%;
  background: #fdf5e6;
  z-index: 2;
  clip-path: polygon(0 0, 65% 0, 45% 100%, 0 100%);
  padding: 0;
  display: block;     
  overflow: hidden;   
}

.planner-side .split-bg{
  position: absolute;
  top: 0;
  left: 0;
  height: 110%;
  width: auto;
  z-index: 2;
  pointer-events: none;
}

.planner-side .split-fg{
  position: absolute;
  bottom: -18px;
  right:42%;
  width: clamp(300px, 24%, 250px);
  height: auto;
  z-index: 12;
  pointer-events: none;
  transform: rotate(-5deg);
  transform-origin: 50% 100%;
}

/* Inner text blocks */
#txt-planner-speech .planner-bubble-left,
#txt-planner-speech .planner-bubble-right{
  width: 100%;
  font-family: inherit;
  font-size: 0.85rem;     
  line-height: 1.05;
  white-space: pre-line;
  word-break: break-word;
}

#txt-planner-speech .planner-bubble-center{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

#txt-planner-speech .planner-bubble-center .comic-link{
  font-family: 'Bangers', cursive; /* FORCE BANGERS HERE */
  font-weight: normal;
  letter-spacing: 1px;
  text-transform: inherit;
  font-size: 1.65rem;     
 /* 1. Reset line-height to 1 so the background covers the whole letter height */
  line-height: 1.0; 
  
  /* 2. Add generous padding for the big red box look */
  padding: 4px 8px; 
  
  /* 3. Use negative margin to keep the bubble from getting too tall */
  margin: -6px 0;
  display: inline-block;
  color: #d94424;
  border-bottom: 0;
  text-decoration: none;
}
/* Specific hover rule for Frame 6 to ensure text turns white */
#txt-planner-speech .planner-bubble-center .comic-link:hover {
  color: #ffffff;       /* Forces text white */
  background-color: #d94424; /* Keeps background red */
  border-radius: 4px;   /* Optional: adds slight rounded corners like other links */
}
.diagonal-line{
  position: absolute;
  inset: 0;
  background: #000;
  z-index: 20;
  pointer-events: none;
  clip-path: polygon(
    calc(65% - 3px) 0,
    calc(65% + 3px) 0,
    calc(45% + 3px) 100%,
    calc(45% - 3px) 100%
  );
}

.marker-text {
  font-family: 'Bangers', cursive;
  font-size: 3.5rem;
  color: #d94424; 
  text-transform: uppercase;
  transform: rotate(-2deg); 
}

/* Frame 7 bubble tail */
#txt-shop-speech::before,
#txt-shop-speech::after{
  left: 46px;   
}

#txt-shop-speech{
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Frame 6 speech bubble (Target style) */
#txt-planner-speech{
  z-index: 500;
  pointer-events: auto;
  top: -14px;               
  left: 15%;                
  transform: translateX(-50%);
  width: clamp(324px, 42%, 423px);
  min-height: 100px;        
  height: auto;
  border-radius: 50%;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  text-align: center;
  line-height: 1.05;
  overflow: visible;        
}

#txt-planner-speech::before,
#txt-planner-speech::after{
  top: auto !important;
  right: auto !important;
}

#txt-planner-speech::before{
  content: '';
  position: absolute;
  bottom: -88px;            
  left: 240px;               
  width: 0;
  height: 10;
  border-width: 96px 26px 0 0;
  border-style: solid;
  border-color: #000 transparent transparent transparent;
  z-index: -1;
}

#txt-planner-speech::after{
  content: '';
  position: absolute;
  bottom: -84px;
  left: 240px;
  width: 0;
  height: 10;
  border-width: 92px 22px 0 0;
  border-style: solid;
  border-color: #F6E7D4 transparent transparent transparent;
  z-index: 1;
}

#txt-planner-speech .comic-link{
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: #d94424;
  text-decoration: none;
  display: inline-block;
  font-size: 1rem;        
  line-height: 1;
  margin: 4px 0 2px;
  border-bottom: 0;         
  position: relative;
}

#txt-planner-speech .comic-link::after{
  /* This removes the custom underline specific to the Planner bubble */
  display: none;
}
/* === FRAME 8 (CONTACT) FIXES === */

/* 1. Layout: Fix scrambled text */
#txt-contact-speech {
  display: block;        /* Disables flexbox */
  padding-top: 15px;     /* Increased padding to center the text vertically */
  height: 130px;         /* Increased height to fit all 3 lines of text */
  white-space: pre-line; /* CRITICAL: This makes the line breaks work */
  line-height: 1.3;      /* Adjusts spacing between lines */
}

/* 2. Tail: Point to the Orange Cat (Left side) */
#txt-contact-speech::before,
#txt-contact-speech::after {
  left: auto;   
  right: 60px; /* Moved further left to align with the orange cat */
}

#txt-contact-speech::before {
  right: 57px; /* Offset to match the border width */
  border-width: 24px 24px 0 0; /* Points Down-Left */
}

#txt-contact-speech::after {
  border-width: 20px 20px 0 0; /* Points Down-Left */
}
/* === FRAME 8 CONTACT FORM === */

/* 1. Greeting Bubble Positioning */
.greeting-bubble {
  top: 0px;   /* KEEPS BUBBLE IN PLACE */
  left: 0%;   /* KEEPS BUBBLE IN PLACE */
  width: 250px;
  z-index: 150;
}

/* === TAIL FIX: MOVE TO RIGHT & POINT TO CAT === */

/* The Black Outline (Behind) */
.greeting-bubble::before {
  left: auto;             /* Turn off left positioning */
  right: 30px;            /* Move to the RIGHT side */
  transform: scaleX(-1);  /* FLIP the triangle to point right */
}

/* The Beige Fill (Inside) */
.greeting-bubble::after {
  left: auto;             /* Turn off left positioning */
  right: 33px;            /* Offset by 3px to center inside the black border */
  transform: scaleX(-1);  /* FLIP the triangle to point right */
}

/* 2. Square Form Bubble */
.form-bubble {
  position: absolute;
  /* Adjust these top/left values based on your final image to align with the phone */
  top: -50px; 
  left: 40%; 
  width: 250px;
  background-color: #F6E7D4;
  border: 3px solid #000;
  border-radius: 10px; /* Rounded square corners */
  padding: 15px;
  z-index: 150;
  box-shadow: 6px 6px 0px rgba(0,0,0,0.2);
}
/* === NEW SVG TAIL STYLES === */
.lightning-tail {
  position: absolute;
  /* Adjust these to move the tail UP/DOWN or LEFT/RIGHT */
  top: 70px;
  left: -45px; 
  
  width: 50px;
  height: 80px;
  z-index: 200; /* Ensures it sits ON TOP of the border to blend in */
  overflow: visible;
  pointer-events: none; /* Lets clicks pass through if it covers anything */
}
/* 3. Form Input Styling */
.comic-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left; /* Override parent center alignment */
}

.comic-form label {
  font-family: 'Bangers', cursive;
  font-size: 1.1rem;
  color: #d94424;
  letter-spacing: 1px;
}

.comic-form input, 
.comic-form textarea {
  font-family: 'Comic Neue', sans-serif;
  font-weight: bold;
  font-size: 1rem;
  border: 2px solid #000;
  border-radius: 4px;
  padding: 8px;
  background: #fff;
  outline: none;
  resize: none;
}

.comic-form input:focus, 
.comic-form textarea:focus {
  background: #fffbe6;
  border-color: #d94424;
}

.comic-form button {
  font-family: 'Bangers', cursive;
  font-size: 1.4rem;
  background-color: #d94424;
  color: #fff;
  border: 2px solid #000;
  padding: 8px;
  margin-top: 5px;
  cursor: pointer;
  letter-spacing: 1px;
  transition: transform 0.1s, background-color 0.2s;
}

.comic-form button:hover {
  transform: scale(1.05);
  background-color: #b5361b;
}
#txt-contact-crazy {
  z-index: 160; /* Higher than the image and greeting bubble */
}

/* =========================================
   MOBILE MENU  — burger instead of the full menu bar.
   Fires below 768px (narrow windows) AND on any touch screen,
   so a phone held sideways still gets the burger.
========================================= */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {

  /* ---------- Hamburger: just 3 light lines, no box ---------- */
  .site-header{
    background: transparent;
    border: 0;
    box-shadow: none;
    max-width: 100%;
    padding: 14px 14px 0;
    text-align: left;
  }
  .nav-burger{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 34px;
    height: 23px;
    cursor: pointer;
    position: relative;
    z-index: 1001;
  }
  .nav-burger span{
    display: block;
    width: 100%;
    height: 3px;
    background: #f4e4bc;                 /* light lines, readable on the black wall */
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,.7);
    transition: transform .25s ease, opacity .2s ease;
  }

  /* nav stays hidden until the burger is tapped, then opens as a small beige card */
  .site-nav ul{
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: max-content;
    max-width: 80vw;
    margin-top: 10px;
    padding: 10px 18px;
    background: #f4e4bc;
    border: 3px solid #000;
    box-shadow: 4px 4px 0 rgba(0,0,0,.4);
  }
  .nav-toggle:checked ~ .site-nav ul{ display: flex; }
  .site-nav a{ font-size: 1.6rem; padding: 5px 2px; }

  /* burger morphs into an X while the menu is open */
  .nav-toggle:checked ~ .nav-burger span:nth-child(1){ transform: translateY(10px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2){ opacity: 0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3){ transform: translateY(-10px) rotate(-45deg); }
}

/* =========================================
   MOBILE ADJUSTMENTS  (phones, <= 768px)
========================================= */
@media (max-width: 768px) {

  /* ---------- One frame at a time, full width, FULL image (no crop) ---------- */
  .comic-container{ overflow-x: hidden; }
  .frames-grid{ grid-template-columns: 1fr; gap: 14px; }
  .frames-grid > .comic-panel{ grid-column: 1 / -1 !important; }

  /* drop the fixed 360px height so each panel grows to its image's natural height */
  .panel-fixed{ height: auto; }
  .panel-image,
  .panel-bg{ height: auto; object-fit: contain; }

  /* shrink hand-placed captions so they fit a narrow frame */
  .comic-text{ font-size: .82rem; max-width: calc(100% - 24px); }

  /* ---------- per-frame caption nudges ---------- */
  /* Frame 2 (Dream Guitars): pull the box in from the left so "HE" isn't clipped */
  #txt-guitars{ max-width: 78%; }

  /* ---------- Shop / Planner split: stack vertically, show full images ---------- */
  .panel-bottom .diagonal-wrapper{
    height: auto;
    display: flex;
    flex-direction: column;
    background: #fdf5e6;
  }
  .panel-bottom .split-side{
    position: relative;          /* relative = stays in flow AND anchors its labels */
    width: 100%;
    height: auto;
    display: block;
    clip-path: none;
    overflow: visible;
  }
  .panel-bottom .split-bg{
    position: static;
    width: 100%;
    height: auto;
    display: block;
  }
  .panel-bottom .diagonal-line{ display: none; }
  .planner-side .split-fg{ display: none; }   /* hide the floating planner cat on phones */

  /* the red SHOP word uses inline positioning and kept colliding — hide it on
     phones; the "I LOVE SHOP DUTY" bubble already marks the shop */
  .shop-side .marker-text{ display: none; }

  /* remove the cream backgrounds so there is no odd white band between the
     stacked shop and planner images */
  .panel-bottom .diagonal-wrapper,
  .panel-bottom .shop-side,
  .panel-bottom .planner-side{ background: transparent; }
  .panel-bottom .diagonal-wrapper{ gap: 14px; }

  /* ---------- Captions that drop UNDER their frame (Videos, Music, Shop, Planner) ---------- */
  #txt-planner-speech,
  #txt-frame7-nerds,
  #txt-videos,
  #txt-music{
    position: static;
    width: auto;
    max-width: 100%;
    min-height: 0;
    margin: 12px 0 0;
    top: auto; right: auto; bottom: auto; left: auto;
    transform: none;
    border-radius: 8px;
  }
  /* Videos & Music carry inline widths — force them to span the full frame */
  #txt-videos, #txt-music{ width: auto !important; }
  /* remove the speech-bubble tails / svg pointer when bubbles are in flow */
  #txt-planner-speech::before, #txt-planner-speech::after,
  #txt-contact-greeting::before, #txt-contact-greeting::after,
  #txt-contact-form .lightning-tail{ display: none; }

  /* ---------- Frame 8 (Contact): WHOLE image visible, bubble + caption floating ON
     the image (desktop style), and the FORM dropped underneath ---------- */
  .panel-contact{ position: relative; }
  /* the image keeps the global full-width / uncropped treatment (object-fit: contain) */

  /* "Hi there..." bubble — top-RIGHT, on the image, so it sits over the black
     cat and leaves the orange cat + CONTACT sign visible */
  .panel-contact #txt-contact-greeting{
    position: absolute;
    top: 10px;
    left: auto !important;
    right: 10px !important;
    bottom: auto !important;
    width: auto;
    max-width: 58%;
    margin: 0;
    z-index: 20;
  }
  /* "TALK TO HIM..." caption — below the bubble on the RIGHT side.
     18vw tracks roughly with the image height (which also scales with screen width) */
  .panel-contact #txt-contact-crazy{
    position: absolute;
    top: 18vw;
    left: auto !important;
    right: 10px !important;
    bottom: auto !important;
    max-width: 52%;
    margin: 0;
    z-index: 20;
  }
  /* the form drops into normal flow, directly under the image */
  .panel-contact #txt-contact-form{
    position: static;
    width: auto;
    max-width: calc(100% - 24px);
    margin: 12px auto 4px;
    top: auto; left: auto; right: auto; bottom: auto;
    transform: none;
  }
}

/* =========================================
   PHONE PORTRAIT ONLY — Frame 8 (Contact) tweaks.
   Landscape phones and desktop are untouched:
   this block only fires below 768px AND in portrait.
========================================= */
@media (max-width: 768px) and (orientation: portrait) {

  /* "Hi there..." bubble: narrower, still top-right */
.panel-contact #txt-contact-greeting{
  max-width: 46%;   /* wider/narrower */
  top: -10px;        /* smaller = higher, bigger = lower */
  right: 65px !important;     /* smaller = closer to right edge, bigger = pushed left */
}

  /* Bring the bubble tail back and point it down-LEFT,
     toward the orange cat on the phone */
.panel-contact #txt-contact-greeting::before{
  display: block;
  left: 7px;
  right: auto;
  transform: rotate(20deg);      /* replaces both old lines */
  transform-origin: top left;    /* pivot where the tail meets the bubble */
  bottom: -10px;   /* was -17px — closer to 0 = higher */
}
.panel-contact #txt-contact-greeting::after{
  display: block;
  left: 10px;
  right: auto;
  transform: rotate(20deg);
  transform-origin: top left;
  bottom: -6px;    /* was -13px — keep it 4px above the outline */
}
  

  /* "TALK TO HIM..." caption: drop UNDER the image, into normal flow
     (same treatment as the Videos / Music captions).
     position:static makes the inline bottom/left offsets irrelevant,
     so no !important fight is needed for them. */
  .panel-contact #txt-contact-crazy{
    position: static;
    width: auto !important;   /* beats the inline width:190px */
    max-width: 100%;
    margin: 12px 0 0;
    transform: none;
    border-radius: 8px;
  }
}