:root{
  --ink:#3c3c3c;
  --site:#feece8;
  --panel:#f7f3f1;
  --accent:#dfbfae;

  --btn:#d8a89e;
  --btn-hover:#bf8c84;

  --cta2:#dfbfae;
  --cta3:#b8c3b3;

  --line: rgba(60,60,60,0.25);
  --shadow: 0 10px 30px rgba(60,60,60,0.08);
  --tile-hover: rgba(216,168,158,0.16);
}

/* ===== Base ===== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--site);
  color:var(--ink);
  line-height:1.55;
}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}

/* ===== Header ===== */
.ll-header{
  position:sticky; top:0; z-index:50;
  background:rgba(254,236,232,0.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.ll-header-inner{
  max-width:980px;
  margin:0 auto;
  padding:10px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.ll-logo{
  font-weight:700;
  letter-spacing:0.3px;
  font-size:14px;
  white-space:nowrap;
}
.ll-nav{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  font-size:13px;
  letter-spacing:0.7px;
  text-transform:uppercase;
  opacity:0.95;
}
.ll-nav a{
  padding:6px 8px;
  border-radius:999px;
}
.ll-nav a:hover{
  text-decoration:none;
  background:rgba(255,255,255,0.55);
}

/* ===== Dropdown Menu ===== */
.ll-menu{ position:relative; }
.ll-menu-btn{
  display:none;
  align-items:center;
  gap:10px;
  border:1px solid var(--line);
  background:rgba(255,255,255,0.55);
  border-radius:999px;
  padding:10px 12px;
  cursor:pointer;
  font-family:inherit;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:0.8px;
}
.ll-menu-bars{ width:16px;height:12px; display:inline-block; position:relative; }
.ll-menu-bars::before,
.ll-menu-bars::after{
  content:"";
  position:absolute; left:0; right:0;
  height:2px; background:var(--ink);
  border-radius:999px;
}
.ll-menu-bars::before{ top:0; }
.ll-menu-bars::after{ bottom:0; }

.ll-menu-panel{
  position:absolute;
  right:0;
  top:52px;
  width:min(300px, 86vw);
  background:rgba(255,255,255,0.9);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow: var(--shadow);
  padding:10px;
  display:none;
}
.ll-menu-panel.open{ display:block; }
.ll-menu-panel a{
  display:block;
  padding:12px 12px;
  border-radius:12px;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:0.7px;
}
.ll-menu-panel a:hover{
  background:rgba(216,168,158,0.18);
  text-decoration:none;
}
.ll-menu-divider{
  height:1px;
  background:var(--line);
  margin:8px 0;
}
@media (max-width:820px){
  .ll-nav{ display:none; }
  .ll-menu-btn{ display:flex; }
}

/* ===== Layout ===== */
.ll-section{ padding:44px 16px; }
.ll-section-tight{ padding-top:18px; }
.ll-wrap{ max-width:980px; margin:0 auto; }

/* Tighten the gap between Hero and Tiles */
.ll-hero{ padding-bottom:6px; }          /* was effectively larger */
section#tiles.ll-section{ padding-top:2px; }  /* was 44px */

/* ===== Type ===== */
.ll-h1{
  margin:0;
  font-family:"DM Serif Display",serif;
  font-weight:700;
  font-size:clamp(28px,4.3vw,44px);
  line-height:1.02;
  letter-spacing:0.2px;
}
.ll-h2{
  margin:0 0 6px;
  font-family:"DM Serif Display",serif;
  font-weight:700;
  font-size:clamp(22px,3.6vw,34px);
  line-height:1.0;
  letter-spacing:0.5px;
}
/* ===== Hero ===== */
.ll-hero{ 
  padding-top:28px; 
  Padding-bottom:0; 
}

.ll-hero-inner{
  max-width:980px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ll-hero-content{
  margin:0 auto;
  text-align:center;
  padding:10px 6px;
  max-width:100%;
}

/* ======================
   HERO TITLE
   ====================== */

/* Mobile-first: allow wrapping */
.ll-hero-title{
  letter-spacing:-0.2px;
  margin-bottom:6px;
  position:relative;
  padding-bottom:2px;

  font-size:clamp(30px, 4.2vw, 40px);
  font-weight:600;
  line-height:1.05;

  white-space:normal;
  max-width:20ch;          /* nice wrapping on small screens */
  margin-left:auto;
  margin-right:auto;
}

/* ======================
   SUBHEAD
   ====================== */

.ll-hero-subhead{
  font-weight:600;
  font-size:18px;
  letter-spacing:0.2px;
  margin-top:2px;
  margin-bottom:6px;

  line-height:1.2;
  white-space:normal;

  max-width:42ch;
  margin-left:auto;
  margin-right:auto;
}

/* ======================
   LEAD
   ====================== */

.ll-hero-lead{
  font-size:14px;
  font-weight:300;
  margin-top:2px;
  opacity:0.9;

  line-height:1.3;
  white-space:normal;

  max-width:48ch;
  margin-left:auto;
  margin-right:auto;
}

/* ======================
   DESKTOP: FORCE ALL TO ONE LINE
   ====================== */

@media (min-width: 820px){
  .ll-hero-title,
  .ll-hero-subhead,
  .ll-hero-lead{
    white-space:nowrap;    /* 🔒 one line only */
    max-width:none;
    overflow:hidden;       /* safety */
    text-overflow:clip;
  }
}

/* Balanced wrapping where supported (mobile/tablet only) */
.ll-hero-title,
.ll-hero-subhead,
.ll-hero-lead{
  text-wrap: balance;
}

.ll-accent{ 
  color:var(--accent); 
  font-weight:700; 
}

.ll-hero-links{
  max-width:520px;
  margin:10px auto 0;
  text-align:center;
  font-weight:400;
  font-size:13px;
  letter-spacing:0.9px;
  text-transform:uppercase;
}
.ll-hero-links a{
  text-decoration:none;
  border-bottom:1px solid rgba(60,60,60,0.28);
  padding-bottom:2px;
}
.ll-hero-links a:hover{
  border-bottom-color: rgba(60,60,60,0.55);
  text-decoration:none;
}
.ll-dot{
  display:inline-block;
  margin:0 10px;
  opacity:0.55;
}
.ll-divider{
  max-width:520px;
  margin:12px auto 0;
  height:1px;
  background:rgba(60,60,60,0.22);
  border-radius:999px;
}

/* ===== Puppy nested flip tile (inside Our Services back) ===== */
.ll-nested-flip{
  margin-top:10px;
}

/* Make the nested flip feel like a subtile */
.ll-nested-flip .ll-card-front{
  align-items:flex-start;
  text-align:left;
  padding:14px 14px;
  background:#fff;
  border:2px solid rgba(60,60,60,0.35);
}
.ll-nested-flip .ll-card-front:hover{
  background:rgba(216,168,158,0.10);
}

/* Back matches your panel look */
.ll-nested-flip .ll-card-back{
  background:var(--panel);
  border:2px solid rgba(60,60,60,0.35);
}

/* Two option tiles side-by-side */
.ll-choice-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-top:10px;
}
@media (min-width: 760px){
  .ll-choice-grid{ grid-template-columns:1fr 1fr; }
}

/* Smaller flip tiles for choices */
.ll-choice-flip{
  --card-h: 120px;
}
.ll-choice-flip .ll-card-front{
  padding:14px 12px;
  border:2px solid rgba(60,60,60,0.35);
  background:#fff;
}
.ll-choice-flip .ll-card-back{
  border:2px solid rgba(60,60,60,0.35);
  background:#fff;
}

/* Pricing tables inside choice backs */
.ll-choice-desc{
  margin:0;
  font-size:12px;
  font-weight:300;
  line-height:1.35;
  opacity:0.9;
}

/* Tiny close button inside nested backs */
.ll-close-mini{
  display:inline-block;
  margin-left:auto;
  padding:7px 10px;
  border-radius:999px;
  border:1.5px solid rgba(60,60,60,0.30);
  background:rgba(255,255,255,0.75);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.7px;
  cursor:pointer;
  white-space:nowrap;
}
.ll-close-mini:hover{ background:rgba(223,191,174,0.35); }

/* ===== Walks flips as a whole + table switches inside ===== */

.ll-walks-flip{ --card-h: 120px; }

/* Make Walks front look like your subtiles */
.ll-walks-flip .ll-card-front{
  align-items:flex-start;
  text-align:left;
  padding:12px 12px;
  background:#fff;
  border:2px solid rgba(60,60,60,0.35);
}
.ll-walks-flip .ll-card-front:hover{ background:rgba(216,168,158,0.10); }

/* Choice buttons (two side-by-side) */
.ll-choice-buttons{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-top:10px;
}
@media (min-width:760px){
  .ll-choice-buttons{ grid-template-columns:1fr 1fr; }
}

.ll-choice-btn{
  display:block;
  width:100%;
  text-align:left;
  padding:12px 12px;
  border-radius:14px;
  border:2px solid rgba(60,60,60,0.30);
  background:#fff;
  cursor:pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .10s ease;
}
.ll-choice-btn:hover{
  background:rgba(216,168,158,0.10);
  border-color:rgba(60,60,60,0.42);
  transform:translateY(-1px);
}
.ll-choice-btn strong{
  display:block;
  font-weight:700;
  font-size:13px;
  letter-spacing:0.3px;
  text-transform:uppercase;
}
.ll-choice-btn span{
  display:block;
  margin-top:4px;
  font-size:12px;
  font-weight:300;
  opacity:0.85;
  line-height:1.2;
}

/* Switcher: show the correct panel based on radio selection */
.ll-choice-radio{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.ll-choice-panels{
  margin-top:12px;
  background:rgba(255,255,255,0.55);
  border:1px solid rgba(60,60,60,0.18);
  border-radius:14px;
  padding:12px 12px;
}

.ll-choice-panel{ display:none; }
#puppyWalkTrained:checked ~ .ll-choice-panels #panelTrained{ display:block; }
#puppyWalkUntrained:checked ~ .ll-choice-panels #panelUntrained{ display:block; }

/* Active state styling for the selected choice tile */
#puppyWalkTrained:checked ~ .ll-choice-buttons label[for="puppyWalkTrained"],
#puppyWalkUntrained:checked ~ .ll-choice-buttons label[for="puppyWalkUntrained"]{
  background:rgba(223,191,174,0.35);
  border-color:rgba(60,60,60,0.45);
}

/* ===== Tiles stack ===== */
.ll-tiles-stack{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.ll-tiles-narrow{
  max-width:520px;
  margin:0 auto;
}

/* ===== Flip tiles ===== */
.ll-flip-tile{ perspective: 1200px; }
.ll-card-toggle{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

/* When jumping to a tile, offset for the sticky header */
.ll-flip-tile { scroll-margin-top: 90px; 
}

/* Logo above tiles */
.ll-logo-block{
  display:flex;
  justify-content:center;
  margin-top:6px;
  margin-bottom:18px;
}

.ll-logo-img{
  width:160px;            /* bigger */
  height:160px;           /* force a true circle frame */
  border-radius:50%;
  object-fit:cover;       /* helps if the PNG has extra padding */
  display:block;

  background:rgba(255,255,255,0.35);    /* soft halo */
  box-shadow:0 10px 28px rgba(60,60,60,0.10);
}
@media (min-width:820px){
  .ll-logo-img{
    width:190px;
    height:190px;
  }
}

.ll-card-inner{
  position:relative;
  height: var(--card-h,150px);
  transform-style: preserve-3d;
  transition: transform .55s ease;
  border-radius:18px;
}
.ll-card-toggle:checked + .ll-card-inner{
  transform: rotateY(180deg);
  height:auto;
}
.ll-card-toggle:checked + .ll-card-inner .ll-card-back{
  position:relative;
  inset:auto;
  min-height: var(--card-h,150px);
}
.ll-card-face{
  position:absolute;
  inset:0;
  border-radius:18px;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  overflow:hidden;
}
.ll-card-front{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  gap:4px;
  padding:16px 16px;
  background:rgba(255,255,255,0.48);
  border:2px solid rgba(60,60,60,0.55);
  box-shadow: var(--shadow);
  cursor:pointer;
  transition: background-color .18s ease;
}
.ll-card-front:hover{
  background: var(--tile-hover);
  text-decoration:none;
}
.ll-tile-head{ margin:0 0 4px; }
.ll-tile-desc{
  margin:0;
  max-width:62ch;
  font-size:13px;
  font-weight:300;
  line-height:1.35;
}
.ll-card-back{
  transform: rotateY(180deg);
  background:var(--panel);
  border:2px solid rgba(60,60,60,0.55);
  box-shadow: var(--shadow);
  padding:14px 14px;
  text-align:left;
  overflow:visible;
}

/* ===== Card header ===== */
.ll-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
  margin-bottom:10px;
}
.ll-back-title{
  margin:0;
  font-family:"DM Serif Display",serif;
  font-weight:700;
  font-size:clamp(22px,3.6vw,34px);
  line-height:1.0;
  letter-spacing:0.5px;

}
.ll-back-title2{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding-top:1px;
}
.ll-back-title2 strong{
  font-weight:700;
  font-size:13px;
  letter-spacing:0.3px;
  text-transform:uppercase;

}
.ll-back-sub{
  margin:4px 0 0;
  font-size:12px;
  font-weight:300;
  opacity:0.85;
  line-height:1.15;
}

.ll-back-sub2{
  margin:4px 0 0;
  font-size:10px;
  font-weight:200;
  opacity:0.85;
  line-height:1.0;
}
.ll-card-close{
  display:inline-block;
  padding:8px 10px;
  border-radius:999px;
  border:1.5px solid rgba(60,60,60,0.35);
  background:rgba(255,255,255,0.65);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.7px;
  cursor:pointer;
  white-space:nowrap;
}
.ll-card-close:hover{ background:rgba(223,191,174,0.35); }

.ll-empty{
  font-size:12px;
  font-weight:300;
  opacity:0.85;
  padding:10px 2px 2px;
  margin:0;
}

/* ===== Services subtiles ===== */
.ll-subtiles{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}
details.ll-subtile{
  background:#fff;
  border:2px solid rgba(60,60,60,0.35);
  border-radius:14px;
  overflow:hidden;
}
details.ll-subtile[open]{ border-color: rgba(60,60,60,0.45); }

.ll-subtile summary{
  list-style:none;
  cursor:pointer;
  padding:12px 12px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  user-select:none;
}
.ll-subtile summary::-webkit-details-marker{ display:none; }

.ll-subtile-title{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding-top:1px;
}
.ll-subtile-title strong{
  font-weight:700;
  font-size:13px;
  letter-spacing:0.3px;
  text-transform:uppercase;
}
.ll-subtile-title span{
  font-size:12px;
  font-weight:300;
  opacity:0.85;
  line-height:1.2;
}

.ll-mini-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:999px;
  border:1.5px solid rgba(60,60,60,0.35);
  background:rgba(255,255,255,0.65);
  cursor:pointer;
  font-weight:700;
  font-size:18px;
  line-height:1;
  padding:0;
  flex:0 0 34px;
}
.ll-mini-toggle:hover{ background:rgba(223,191,174,0.35); }

.ll-subtile-content{
  padding:0 12px 12px;
  border-top:1px solid rgba(60,60,60,0.18);
}
/* no longer used (we now toggle the <details> element itself) */
/* .ll-subtile-content.minimized{ display:none; } */

.ll-price-table{
  width:100%;
  border-collapse:collapse;
  margin-top:10px;
  font-size:12px;
}
.ll-price-table th,
.ll-price-table td{
  padding:8px 8px;
  border-bottom:1px solid rgba(60,60,60,0.18);
  text-align:left;
  vertical-align:top;
}
.ll-price-table th{
  font-weight:600;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.6px;
  opacity:0.9;
}

.ll-note{
  margin-top:10px;
  padding:10px 10px;
  background:rgba(216,168,158,0.10);
  border-left:3px solid rgba(216,168,158,0.65);
  border-radius:10px;
  font-size:12px;
  font-weight:300;
  line-height:1.3;
}

/* Hide pricing panels until a choice is made */
.ll-choice-panels{ display:none; }

/* When either option is selected, show the panels wrapper */
#puppyWalkTrained:checked ~ .ll-choice-panels,
#puppyWalkUntrained:checked ~ .ll-choice-panels{
  display:block;
}

/* Optional: make the buttons feel more "button-like" */
.ll-choice-btn{
  text-align:center;                 /* button look */
}
.ll-choice-btn strong{
  text-transform:none;               /* more sentence-like */
  font-size:13px;
  letter-spacing:0.1px;
}

/* ===== Contact Us (PILLS + ICON SIZING) ===== */
.ll-contact-panel{
  width:100%;
  max-width:560px;
  margin:0 auto;
}

.ll-contact-actions{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
  margin:0 auto;
  margin-bottom: 14px;

}

/* the pill boxes */
.ll-contact-chip{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:140px;
  padding:14px 16px 12px;
  border-radius:999px;
  background:rgba(255,255,255,0.78);
  border:1.5px solid rgba(60,60,60,0.32);
  box-shadow: 0 8px 18px rgba(60,60,60,0.06);
  color:var(--ink);
  text-decoration:none;
  transition:transform .10s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.ll-contact-chip:hover{
  transform:translateY(-1px);
  background:rgba(216,168,158,0.14);
  border-color:rgba(60,60,60,0.42);
  box-shadow: 0 10px 22px rgba(60,60,60,0.08);
}

/* icon sizing = single source of truth */
.ll-contact-chip-ico{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  margin-bottom:8px;
  flex:0 0 28px;
}
.ll-contact-chip-ico svg{
  width:28px;
  height:28px;
  display:block;
  stroke:currentColor;
  fill:none;
}

.ll-contact-chip-label{
  font-family:"Poppins",sans-serif;
  font-weight:600;
  font-size:12px;
  letter-spacing:.9px;
  text-transform:uppercase;
  line-height:1.05;
}

.ll-contact-divider{
  height:16px;
  Background:transparent;
  margin:10
  max-width:560px;
}

.ll-contact-socials{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

.ll-contact-soc{
  width:44px;
  height:44px;
  border-radius:14px;
  border:1.5px solid rgba(60,60,60,0.32);
  background:rgba(255,255,255,0.78);
  display:grid;
  place-items:center;
  color:var(--ink);
  text-decoration:none;
  box-shadow: 0 8px 18px rgba(60,60,60,0.06);
  transition:transform .10s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.ll-contact-soc:hover{
  transform:translateY(-1px);
  background:rgba(216,168,158,0.14);
  border-color:rgba(60,60,60,0.42);
  box-shadow: 0 10px 22px rgba(60,60,60,0.08);
}
.ll-contact-soc svg{
  width:20px;
  height:20px;
  display:block;
  stroke:currentColor;
  fill:none;
}

/* ===== Bottom buttons ===== */
.ll-post-buttons{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  padding-top:8px;
  max-width:520px;
  margin:0 auto;
}
.ll-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:14px 14px;
  border-radius:999px;
  font-size:14px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  border:2px solid rgba(60,60,60,0.2);
  transition: transform .10s ease, filter .18s ease;
}
.ll-cta:hover{ text-decoration:none; transform: translateY(-1px); }

.ll-cta-1{ background: var(--btn); color:#fff; }
.ll-cta-2{ background: var(--cta2); color:#3c3c3c; }
.ll-cta-3{ background: var(--cta3); color:#3c3c3c; }
.ll-cta-1:hover,.ll-cta-2:hover,.ll-cta-3:hover{ filter:brightness(0.97); }

@media (min-width: 760px){
  .ll-post-buttons{ grid-template-columns:repeat(3,1fr); }
}

/* ===== Footer ===== */
.ll-footer{
  padding:16px 16px 18px;
  border-top:1px solid var(--line);
  background:rgba(254,238,233,0.75);
}
.ll-footer-inner{
  max-width:980px;
  margin:0 auto;
  text-align:center;
}
.ll-footer-title{
  margin:0;
  font-family:"DM Serif Display",serif;
  font-weight:700;
  font-size:18px;
  letter-spacing:0.4px;
  line-height:1.05;
}
.ll-footer-sub{
  margin:3px 0 0;
  font-weight:300;
  font-size:13px;
  opacity:0.9;
  line-height:1.15;
}

@media (prefers-reduced-motion: reduce){
  .ll-card-inner,.ll-card-front,.ll-cta{ transition:none; }
}

/* =========================
   CONTACT US — DAINTIER PILLS
   ========================= */

.ll-contact-panel a.ll-contact-chip{
  min-width:120px;                 /* smaller pill */
  padding:10px 14px 9px;           /* tighter vertical padding */
  border-radius:999px;

  background:rgba(255,255,255,0.82);
  border:1px solid rgba(60,60,60,0.28);   /* lighter border */
  box-shadow:0 6px 14px rgba(60,60,60,0.05);

  transition:
    transform .12s ease,
    background-color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;
}

.ll-contact-panel a.ll-contact-chip:hover{
  background:rgba(216,168,158,0.12);
  border-color:rgba(60,60,60,0.38);
  box-shadow:0 8px 18px rgba(60,60,60,0.07);
  transform:translateY(-1px);
}

/* Smaller icon */
.ll-contact-panel .ll-contact-chip-ico{
  width:20px;
  height:20px;
  margin-bottom:6px;
}

.ll-contact-panel .ll-contact-chip-ico svg{
  width:20px;
  height:20px;
  stroke-width:1.75;               /* softer stroke */
}

/* Lighter, daintier label */
.ll-contact-panel .ll-contact-chip-label{
  font-size:11px;
  font-weight:500;
  letter-spacing:0.8px;
  line-height:1.05;
}

/* =========================
   CONTACT US — ICON + TEXT INLINE
   ========================= */

.ll-contact-panel a.ll-contact-chip{
  min-width:unset;                 /* let content define width */
  padding:8px 14px;                /* slimmer pill */
  gap:8px;                         /* space between icon + text */

  flex-direction:row;              /* ← key change */
  align-items:center;
  justify-content:center;

  border-radius:999px;
  background:rgba(255,255,255,0.82);
  border:1px solid rgba(60,60,60,0.28);
  box-shadow:0 6px 14px rgba(60,60,60,0.05);

  transition:
    transform .12s ease,
    background-color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;
}

.ll-contact-panel a.ll-contact-chip:hover{
  background:rgba(216,168,158,0.12);
  border-color:rgba(60,60,60,0.38);
  box-shadow:0 8px 18px rgba(60,60,60,0.07);
  transform:translateY(-1px);
}

/* Icon — smaller + inline */
.ll-contact-panel .ll-contact-chip-ico{
  width:18px;
  height:18px;
  margin:0;                        /* remove vertical spacing */
  flex:0 0 18px;
}

.ll-contact-panel .ll-contact-chip-ico svg{
  width:18px;
  height:18px;
  stroke-width:1.75;
}

/* Label — daintier */
.ll-contact-panel .ll-contact-chip-label{
  font-size:11px;
  font-weight:500;
  letter-spacing:0.8px;
  line-height:1;
}

/* =========================
   CONTACT US — DETAILS LINE
   ========================= */

.ll-contact-details{
  margin-top:10px;
  margin-bottom:6px;

  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;

  font-size:14px;
  font-weight:300;
  line-height:1.1;

  color:rgba(60,60,60,0.75);
}

.ll-contact-detail{
  color:inherit;
  text-decoration:none;
  white-space:nowrap;
}

.ll-contact-detail:hover{
  text-decoration:underline;
}

.ll-contact-sep{
  opacity:0.45;
}


/* ===== Fix Contact details overflow on mobile ===== */
.ll-contact-details{
  flex-wrap: wrap;
  max-width: 100%;
}

.ll-contact-detail{
  white-space: normal;           /* override nowrap */
  overflow-wrap: anywhere;       /* allow email to wrap */
  word-break: break-word;
  max-width: 100%;
}

/* If this line is inside a flex context, allow shrinking */
.ll-contact-panel{
  min-width: 0;
}
@media (max-width: 480px){
  .ll-contact-details{
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }
  .ll-contact-sep{ display:none; }
}