/* VitaVibe. Rebuilt 2026-09-09 after a design review: the first pass read as a
   catalogue of bags with no decision support, so this version is built around
   choosing and booking, not browsing.

   Two rules the images follow: nothing is ever cropped (their IV bags are tall and
   the tops were being cut off), and every photo sits on a neutral tile that matches
   its own background so mixed photography still looks like one set. */

:root{
  /* their lime, plus a dark green that is actually readable on white */
  --lime:#97e44f; --lime-bright:#aef06b; --lime-ink:#3d6b16; --lime-wash:#f2fbe8;
  --ink:#0f1a0d; --ink-2:#26331f; --body:#4a5643; --muted:#77836f;
  --line:#e4e9df; --bg:#ffffff; --cream:#f8faf5; --dark:#101a0c;
  --radius:16px; --radius-sm:10px; --wrap:1200px;
  --shadow:0 1px 2px rgba(15,26,13,.04), 0 18px 40px -22px rgba(15,26,13,.28);
  --shadow-lg:0 2px 4px rgba(15,26,13,.05), 0 34px 70px -30px rgba(15,26,13,.35);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{margin:0;background:var(--bg);color:var(--body);font-family:var(--sans);font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);line-height:1.15;margin:0;font-weight:600;letter-spacing:-.015em}
p{margin:0 0 1em}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 22px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:#fff;padding:10px 16px;z-index:200;border-radius:8px}
:focus-visible{outline:3px solid var(--lime-ink);outline-offset:3px;border-radius:6px}

/* ---------- announcement ---------- */
.announce{background:var(--dark);color:#e7f3dc;font-size:13.5px;text-align:center;padding:9px 18px}
.announce b{color:var(--lime)}
.announce a{text-decoration:underline;text-underline-offset:3px}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.5) blur(12px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px}
.logo{font-weight:800;letter-spacing:.15em;font-size:1.1rem;line-height:1.05;color:var(--ink);font-family:var(--sans)}
.logo span{color:var(--lime-ink)}
.logo em{display:block;font-style:normal;font-weight:500;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-top:4px}
nav.main{display:flex;align-items:center;gap:28px}
nav.main a:not(.btn){font-size:.94rem;font-weight:500;color:var(--ink-2);padding:8px 0;border-bottom:2px solid transparent}
nav.main a:not(.btn):hover{border-bottom-color:var(--lime)}
.burger{display:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:999px;
  padding:14px 26px;font:600 .95rem/1 var(--sans);cursor:pointer;transition:.18s;white-space:nowrap}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:var(--lime-ink)}
.btn-lime{background:var(--lime);color:var(--ink)}
.btn-lime:hover{background:var(--lime-bright)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-onmark{background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.34)}
.btn-onmark:hover{background:rgba(255,255,255,.2)}
.btn-sm{padding:10px 18px;font-size:.86rem}
.btn-block{width:100%}

/* ---------- hero ---------- */
.hero{background:radial-gradient(120% 130% at 78% 12%, #1d3312 0%, #101a0c 58%, #0b120a 100%);color:#fff;padding:76px 0 84px;overflow:hidden}
.hero .grid{display:grid;grid-template-columns:1.08fr .92fr;gap:52px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--lime);border:1px solid rgba(151,228,79,.42);padding:7px 15px;border-radius:999px;margin-bottom:22px;font-weight:600}
.hero h1{color:#fff;font-size:clamp(2.2rem,5vw,3.6rem);margin-bottom:20px}
.hero h1 em{font-style:italic;color:var(--lime)}
.hero .lede{font-size:clamp(1.02rem,2vw,1.16rem);color:#cfdcc4;max-width:56ch;margin-bottom:28px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.hero .facts{display:flex;gap:26px;flex-wrap:wrap;font-size:.88rem;color:#b6c7aa;border-top:1px solid rgba(255,255,255,.13);padding-top:20px}
.hero .facts b{color:#fff;display:block;font-size:.98rem;font-weight:600}
/* the shot is never cropped: it sits INSIDE its tile */
.hero-shot{background:#000;border-radius:22px;padding:18px;box-shadow:var(--shadow-lg);display:flex;align-items:center;justify-content:center}
.hero-shot img{width:100%;height:auto;max-height:440px;object-fit:contain}

/* ---------- sections ---------- */
section{padding:78px 0}
section.tint{background:var(--cream)}
.head{max-width:60ch;margin-bottom:38px}
.head.center{margin-left:auto;margin-right:auto;text-align:center}
.kicker{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--lime-ink);font-weight:700;margin:0 0 12px}
.head h1,.head h2{font-size:clamp(1.7rem,3.6vw,2.4rem);margin-bottom:12px}
.head p{color:var(--body);margin:0;font-size:1.03rem}

/* ---------- goal chooser ---------- */
.goals{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.goal{background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);padding:22px 20px;transition:.18s;display:block}
.goal:hover{border-color:var(--lime);box-shadow:var(--shadow);transform:translateY(-2px)}
.goal .ico{font-size:1.5rem;line-height:1;margin-bottom:12px;display:block}
.goal h3{font-size:1.05rem;margin-bottom:5px}
.goal p{font-size:.87rem;color:var(--muted);margin:0}
.goal .n{font-size:.78rem;color:var(--lime-ink);font-weight:700;margin-top:10px;display:block}

/* ---------- treatment cards ---------- */
.grid-cards{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:.18s}
.card:hover{box-shadow:var(--shadow);border-color:#d3ddc9;transform:translateY(-3px)}
/* CONTAIN, never cover: these bags are tall and were losing their tops */
.card .shot{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--cream)}
.card .shot.dark{background:#000}
.card .shot img{width:100%;height:100%;object-fit:contain}
.card .body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.card h3{font-size:1.06rem;line-height:1.25}
.card .best{font-size:.88rem;color:var(--body);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .foot{margin-top:auto;padding-top:12px;display:flex;align-items:baseline;justify-content:space-between;gap:10px;border-top:1px solid var(--line)}
.price{font-family:var(--serif);font-weight:600;color:var(--ink);font-size:1.18rem}
.price.tbc{font-size:.92rem;color:var(--muted);font-family:var(--sans)}
.more{font-size:.85rem;color:var(--lime-ink);font-weight:600}
.tag{display:inline-block;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;background:var(--lime-wash);
  color:var(--lime-ink);padding:4px 10px;border-radius:999px;font-weight:700}

/* ---------- filters ---------- */
.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:26px}
.chip{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:9px 17px;font:600 .86rem var(--sans);color:var(--ink-2);cursor:pointer;transition:.15s}
.chip:hover{border-color:var(--lime)}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.searchbar{position:relative;margin-bottom:18px;max-width:420px}
.searchbar input{width:100%;padding:13px 16px 13px 44px;border:1.5px solid var(--line);border-radius:999px;font:inherit;font-size:.95rem}
.searchbar input:focus{outline:0;border-color:var(--lime-ink);box-shadow:0 0 0 4px var(--lime-wash)}
.searchbar svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--muted)}
.count{color:var(--muted);font-size:.88rem;margin-bottom:18px}

/* ---------- steps ---------- */
.steps{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));counter-reset:s}
.step{position:relative;padding:26px 22px;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.step:before{counter-increment:s;content:counter(s);display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;background:var(--lime);color:var(--ink);font:700 .95rem var(--sans);margin-bottom:14px}
.step h3{font-size:1.02rem;margin-bottom:7px}
.step p{font-size:.9rem;color:var(--body);margin:0}

/* ---------- detail ---------- */
.detail{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:48px;align-items:start}
.detail .shot{border-radius:var(--radius);padding:24px;background:var(--cream);display:flex;align-items:center;justify-content:center}
.detail .shot.dark{background:#000}
.detail .shot img{width:100%;height:auto;max-height:520px;object-fit:contain}
.detail h1{font-size:clamp(1.8rem,4vw,2.6rem);margin:10px 0 8px}
.facts-row{display:flex;gap:26px;flex-wrap:wrap;padding:18px 0;margin:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts-row div{font-size:.9rem;color:var(--muted)}
.facts-row b{display:block;color:var(--ink);font-size:1rem;font-weight:600}
.rich{color:var(--body)}
.rich p{margin-bottom:14px}
.rich ul{margin:0 0 16px 20px;padding:0}
.rich li{margin-bottom:7px}
.callout{background:var(--lime-wash);border-left:4px solid var(--lime);padding:16px 18px;border-radius:var(--radius-sm);margin:20px 0;font-size:.93rem}
.callout b{color:var(--ink)}

/* ---------- faq ---------- */
.faq{max-width:820px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line);padding:6px 0}
.faq summary{cursor:pointer;padding:18px 0;font-weight:600;color:var(--ink);font-size:1.02rem;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--lime-ink);font-size:1.5rem;font-weight:400;line-height:1}
.faq details[open] summary:after{content:"\2212"}
.faq p{padding:0 0 18px;margin:0;color:var(--body)}

/* ---------- forms ---------- */
form.vv{max-width:660px}
.field{margin-bottom:18px}
label{display:block;font-size:.87rem;font-weight:600;color:var(--ink-2);margin-bottom:7px}
input,select,textarea{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:var(--radius-sm);font:inherit;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--lime-ink);box-shadow:0 0 0 4px var(--lime-wash)}
textarea{min-height:110px;resize:vertical}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.check{display:flex;gap:11px;align-items:flex-start;font-size:.92rem;color:var(--body)}
.check input{width:auto;margin-top:4px}
.hp{position:absolute;left:-9999px}
.notice{background:var(--lime-wash);border-left:4px solid var(--lime);padding:15px 18px;border-radius:var(--radius-sm);margin:0 0 22px}
.err{background:#fdecec;border-left:4px solid #d64545;padding:15px 18px;border-radius:var(--radius-sm);margin:0 0 22px}

/* ---------- mobile booking bar ---------- */
.mobile-cta{display:none;position:fixed;bottom:0;left:0;right:0;z-index:70;background:rgba(255,255,255,.97);
  border-top:1px solid var(--line);padding:11px 14px;gap:10px;backdrop-filter:blur(10px)}
.mobile-cta .btn{flex:1}

/* ---------- footer ---------- */
footer.site{background:var(--dark);color:#b9c9ae;padding:64px 0 28px}
footer.site .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:38px}
footer.site a{display:block;color:#b9c9ae;font-size:.92rem;padding:4px 0}
footer.site a:hover{color:var(--lime)}
footer.site .h{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:#fff;margin:0 0 14px;font-weight:700}
footer.site .logo{color:#fff}
footer.site p{font-size:.92rem;margin:0 0 8px}
footer.site .legal{border-top:1px solid rgba(255,255,255,.1);margin-top:40px;padding-top:20px;display:flex;
  justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.82rem;color:var(--muted)}

@media (max-width:980px){
  .hero .grid{grid-template-columns:1fr;gap:34px}
  .detail{grid-template-columns:1fr;gap:28px}
  footer.site .cols{grid-template-columns:1fr 1fr;gap:28px}
}
@media (max-width:820px){
  section{padding:56px 0}
  .burger{display:flex;flex-direction:column;gap:5px;cursor:pointer;padding:10px;background:none;border:0}
  .burger span{width:24px;height:2px;background:var(--ink);border-radius:2px;display:block}
  nav.main{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;gap:0;padding:8px 22px 20px;display:none;box-shadow:var(--shadow)}
  nav.main.open{display:flex}
  nav.main a{padding:14px 0;border-bottom:1px solid var(--line)}
  nav.main a.btn{margin-top:14px;justify-content:center;border:0}
  .row{grid-template-columns:1fr}
  .mobile-cta{display:flex}
  body{padding-bottom:74px}
  footer.site .cols{grid-template-columns:1fr}
  /* the hero shot stays, just smaller: it is their best asset */
  .hero-shot img{max-height:280px}
}

/* nav.main a is more specific than .btn-primary, which was making the header
   button dark text on a dark pill. Buttons keep their own colour anywhere. */
nav.main a.btn-primary,
footer.site a.btn-primary,
.mobile-cta a.btn-primary{color:#fff}
nav.main a.btn-lime,
footer.site a.btn-lime,
.mobile-cta a.btn-lime{color:var(--ink)}
nav.main a.btn{border-bottom:0}
nav.main a.btn:hover{border-bottom:0}
/* the hero facts read better as a row of three that wraps cleanly */
.hero .facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media (max-width:820px){ .hero .facts{grid-template-columns:1fr 1fr} }


/* A treatment's condition: bloods first, referral needed, programme length.
   Deliberately quiet. It is information someone needs before booking, not a
   warning, so it should not look like an error. Added 2026-09-09. */
.booking-note{
  margin:14px 0 0;padding:10px 14px;border-radius:10px;
  background:var(--sky,#eef6fb);border-left:3px solid var(--teal,#2a9d8f);
  font-size:.95rem;color:var(--ink-2,#4a5560);
}
.card .note-badge{
  display:inline-block;margin-top:6px;padding:3px 9px;border-radius:999px;
  background:var(--sky,#eef6fb);color:var(--ink-2,#4a5560);
  font-size:.76rem;line-height:1.5;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}


/* Brand mark beside the wordmark. The only supplied asset is 50x50, so it is shown
   at 30px where it stays sharp and is never scaled up. Added 2026-09-09. */
.logo{display:inline-flex;align-items:center;gap:10px}
.logo-mark{width:34px;height:34px;flex:0 0 34px;display:block}
.logo-type{display:block}


/* One tile for every product shot. The images now carry this exact colour and their
   own breathing room, so the tile must match and the padding must be zero, or a
   cream frame appears around a sage image. Added 2026-09-09. */
:root{--shot-tile:#eef1e8}
.card .shot,
.card .shot.dark{background:var(--shot-tile);padding:0}
.detail .shot,
.detail .shot.dark{background:var(--shot-tile);padding:0}


/* Mobile tap targets. Measured at 390px, these were 16px, 36px and 36px high against
   a 44px minimum. The touch area grows, the text does not, so nothing shifts.
   Added 2026-09-09. */
@media (max-width: 900px){
  .announce a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
  .burger{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center}
  nav.main a:not(.btn){min-height:44px;display:flex;align-items:center}
  nav.main a.btn{min-height:44px}
  .logo{min-height:44px}
}


/* Hero product: a transparent cut-out sitting ON the gradient, not in a black box.
   The soft glow behind it stops it floating unanchored on the dark ground.
   --hero-fixed marks this block. Added 2026-09-09. */
.hero-shot{
  background:none;padding:0;box-shadow:none;border-radius:0;
  position:relative;isolation:isolate;
}
.hero-shot::before{
  content:"";position:absolute;inset:6% 10%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side, rgba(163,230,53,.20), rgba(163,230,53,0) 72%);
  filter:blur(14px);
}
.hero-shot img{
  width:100%;height:auto;max-height:520px;object-fit:contain;
  filter:drop-shadow(0 26px 38px rgba(0,0,0,.55));
}
@media (max-width:900px){ .hero-shot img{max-height:320px} }


/* Treatments page upgrade, 2026-09-09. */
.before-book{
  border:1px solid var(--line);border-left:4px solid var(--lime-ink);
  background:var(--cream);border-radius:12px;padding:16px 20px;margin:0 0 22px;
  font-size:.95rem;line-height:1.6;color:var(--ink-2);max-width:74ch;
}
.group-head{font-size:1.3rem;margin:38px 0 6px}
/* the condition is decision information, so it reads as a line, not a decorative pill */
.card-note{
  margin:2px 0 0;padding:8px 10px;border-radius:8px;
  background:var(--sky,#eef6fb);color:var(--ink-2);font-size:.82rem;line-height:1.45;
}
.card-note b{color:var(--ink)}
/* the filter bar follows you down a long catalogue */
@media (min-width:700px){
  .filters{position:sticky;top:76px;z-index:20;background:rgba(255,255,255,.94);
           backdrop-filter:saturate(1.4) blur(10px);padding:10px 0;margin:0 -4px;}
}


/* --orphan-fix 2026-09-10
   Columns are PINNED, not auto-filled, so the orphan arithmetic in
   vv_feature_classes() is deterministic at every width. Promoted cards span two
   columns and lay out horizontally, which fills the row AND stops 38 identical
   squares reading as a template. */
.grid-cards{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:dense}
/* dense: a span-2 card that will not fit the remaining columns wraps, and the
   next single-column card backfills the gap it left. Without this, two wide
   cards in a row leave a hole beside the first one. */
@media (max-width:1079px){ .grid-cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:719px) { .grid-cards{grid-template-columns:1fr} }

@media (min-width:1080px){ .card.f3{grid-column:span 2} }
@media (min-width:720px) and (max-width:1079px){ .card.f2{grid-column:span 2} }

/* a promoted card reads across, not down */
@media (min-width:720px){
  .card.f3, .card.f2{flex-direction:row}
  .card.f3 > .shot, .card.f2 > .shot{flex:0 0 46%;aspect-ratio:auto;align-self:stretch}
  .card.f3 > .body, .card.f2 > .body{justify-content:center;padding:26px 30px}
  .card.f3 h3, .card.f2 h3{font-size:1.35rem}
  .card.f3 .best, .card.f2 .best{font-size:1rem;max-width:46ch}
}
@media (min-width:1080px){ .card.f2:not(.f3){flex-direction:column} }

/* Wide cards were stretching to the height of the square cards beside them, leaving a
   dead gap between the copy and the price. Centre the body as one block and let the
   price sit directly under the text instead of being pushed to the bottom.
   Also: the sticky filter bar was covering the group headings on scroll. 2026-09-10 */
@media (min-width:720px){
  .card.f3 > .body, .card.f2 > .body{justify-content:center;gap:12px}
  .card.f3 .foot, .card.f2 .foot{margin-top:16px}
  .card.f3 > .shot, .card.f2 > .shot{flex:0 0 52%}
  .card.f3 .best, .card.f2 .best{-webkit-line-clamp:4}
}
.group-head{scroll-margin-top:150px}
.grid-cards{scroll-margin-top:150px}


/* --craft-2026 2026-09-10
   The 3px hover lift is a stock template signature - every generated site does it.
   Restraint reads as more expensive than movement. */
.card:hover{
  transform:none;
  border-color:#c9d6bd;
  box-shadow:0 10px 30px -18px rgba(16,26,12,.28);
}
.card{transition:border-color .18s ease, box-shadow .18s ease}
/* figures line up down a column of prices instead of wandering */
.price, .facts-row b{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}


/* Where to find us. Reference clinics all carry a visible location; ours had a real
   address sitting unused in the settings table. 2026-09-10 */
.vv-location .loc-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.vv-location .loc-addr{font-family:var(--serif);font-size:1.5rem;line-height:1.45;margin:14px 0 10px;color:var(--ink)}
.vv-location .loc-hours{color:var(--ink-2);margin-bottom:22px}
.vv-location .cta{display:flex;gap:12px;flex-wrap:wrap}
.vv-location .loc-note{border-left:3px solid var(--lime);padding-left:24px}
.vv-location .loc-note p{margin:0 0 14px;color:var(--ink-2);line-height:1.6}
.vv-location .loc-note p:last-child{margin-bottom:0}
.vv-location .loc-note b{color:var(--ink)}
@media (max-width:860px){
  .vv-location .loc-grid{grid-template-columns:1fr;gap:32px}
  .vv-location .loc-addr{font-size:1.28rem}
}


/* --real-lockup 2026-09-10  The client's actual brand lockup, not type we set ourselves. */
.logo{display:inline-flex;align-items:center;gap:0}
.logo img{width:auto;height:44px;display:block}
@media (max-width:600px){ .logo img{height:36px} }

/* Speciality-drip gates (2026-09-11). Deliberately calm rather than alarming: this is a
   requirement to plan around, not a warning. */
.gate{border-left:4px solid #c9a227;background:#fdf8e8;padding:14px 18px;border-radius:10px;margin:18px 0}
.gate b{display:block;margin-bottom:4px}
.gate p{margin:0;color:#5b5340}
.gate-referral{border-left-color:#b3261e;background:#fdf1f0}
.gate-referral p{color:#6b4340}
.gate-phone{border-left-color:#3d6b16;background:#f2f8e9}
.gate-phone p{color:#3f5230}