/* ==========================================================
   Animal Insights Consultancy Ltd — Newsletter
   Brand: Orange #F26522 | Green #4CAF3D | Deep Green #1B6B3A
          Navy #12395F | Sunshine #FFC györ| Print-friendly
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&family=Nunito:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap');

:root{
  --orange:#F26522;
  --orange-lt:#FF8A4C;
  --green:#4CAF3D;
  --green-dk:#1B6B3A;
  --navy:#12395F;
  --navy-lt:#1E5A8A;
  --sun:#FFC93C;
  --pink:#FF5E7D;
  --teal:#00A4A6;
  --cream:#FFF9F0;
  --ink:#22303C;
  --paper:#ffffff;
}

*{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  padding:0;
  background:
    radial-gradient(circle at 10% 5%, rgba(255,201,60,.28), transparent 45%),
    radial-gradient(circle at 92% 12%, rgba(0,164,166,.22), transparent 42%),
    radial-gradient(circle at 50% 100%, rgba(76,175,61,.18), transparent 55%),
    var(--cream);
  font-family:'Nunito',"Segoe UI",Helvetica,Arial,sans-serif;
  color:var(--ink);
  font-size:16.5px;
  line-height:1.6;
}

.sheet{
  max-width:940px;
  margin:0 auto;
  background:var(--paper);
  box-shadow:0 18px 60px rgba(18,57,95,.18);
}

/* ---------- Confetti bar ---------- */
.confetti{
  height:14px;
  background:repeating-linear-gradient(90deg,
    var(--orange) 0 34px, var(--sun) 34px 68px, var(--green) 68px 102px,
    var(--teal) 102px 136px, var(--pink) 136px 170px, var(--navy) 170px 204px);
}

/* ---------- Masthead ---------- */
.masthead{
  position:relative;
  padding:30px 44px 26px;
  background:
    radial-gradient(circle at 88% 30%, rgba(255,201,60,.35), transparent 55%),
    linear-gradient(135deg,#ffffff 0%,#FFF4E6 60%,#EAF7E6 100%);
  border-bottom:6px solid var(--navy);
  overflow:hidden;
}
.masthead .motif{
  position:absolute;
  right:-40px; top:-30px;
  width:290px;
  opacity:.16;
  transform:rotate(-8deg);
}
.brandrow{
  display:flex;
  align-items:center;
  gap:22px;
  flex-wrap:wrap;
  position:relative;
  z-index:2;
}
.logo-badge{
  background:#fff;
  border-radius:18px;
  padding:10px 16px;
  border:3px solid var(--sun);
  box-shadow:4px 4px 0 var(--orange);
}
.logo-badge img{display:block;height:74px;width:auto;}

.kicker{
  display:inline-block;
  background:var(--navy);
  color:#fff;
  font-family:'Baloo 2',cursive;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:12.5px;
  padding:5px 15px;
  border-radius:999px;
}
.masthead h1{
  font-family:'Baloo 2',cursive;
  font-size:47px;
  line-height:1.02;
  margin:14px 0 6px;
  color:var(--navy);
  letter-spacing:-.5px;
  position:relative;
  z-index:2;
}
.masthead h1 .pop{color:var(--orange);}
.masthead h1 .pop2{color:var(--green-dk);}
.dek{
  font-size:17.5px;
  max-width:660px;
  margin:0;
  color:#33475B;
  position:relative;
  z-index:2;
}
.issueline{
  margin-top:16px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  position:relative;
  z-index:2;
}
.chip{
  font-family:'Baloo 2',cursive;
  font-size:13px;
  font-weight:700;
  padding:5px 14px;
  border-radius:999px;
  color:#fff;
  white-space:nowrap;
}
.chip.o{background:var(--orange);}
.chip.g{background:var(--green-dk);}
.chip.t{background:var(--teal);}
.chip.p{background:var(--pink);}

/* ---------- Layout ---------- */
.wrap{padding:34px 44px 10px;}
section{margin-bottom:34px;}

.eyebrow{
  font-family:'Baloo 2',cursive;
  font-size:13px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--orange);
  margin:0 0 4px;
  font-weight:800;
}
h2{
  font-family:'Baloo 2',cursive;
  font-size:33px;
  line-height:1.12;
  color:var(--navy);
  margin:0 0 12px;
}
h3{
  font-family:'Baloo 2',cursive;
  font-size:21px;
  color:var(--green-dk);
  margin:0 0 8px;
}
p{margin:0 0 13px;}

/* ---------- Countdown hero ---------- */
.countdown{
  background:linear-gradient(120deg,var(--navy) 0%,var(--navy-lt) 55%,var(--teal) 100%);
  color:#fff;
  border-radius:22px;
  padding:26px 30px;
  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
  box-shadow:0 10px 0 rgba(18,57,95,.25);
}
.clock{
  background:var(--sun);
  color:var(--navy);
  border-radius:18px;
  padding:14px 22px;
  text-align:center;
  min-width:150px;
  box-shadow:4px 4px 0 rgba(0,0,0,.18);
}
.clock .big{
  display:block;
  font-family:'Baloo 2',cursive;
  font-size:52px;
  line-height:1;
  font-weight:800;
}
.clock .lbl{
  font-family:'Baloo 2',cursive;
  font-size:12.5px;
  text-transform:uppercase;
  letter-spacing:.1em;
}
.countdown .msg{flex:1;min-width:280px;}
.stamp{
  font-size:13px !important;
  color:var(--sun) !important;
  font-weight:700;
  margin-top:8px !important;
}
.countdown h2{color:#fff;margin-bottom:8px;font-size:29px;}
.countdown p{margin:0;color:#EAF4FF;font-size:16px;}

/* ---------- Video block ---------- */
.videoframe{
  border-radius:22px;
  overflow:hidden;
  border:5px solid var(--navy);
  box-shadow:8px 8px 0 var(--sun);
  background:var(--navy);
  line-height:0;
  margin-top:6px;
}
.videoframe video{display:block;width:100%;height:auto;}
.vidnote{
  margin-top:12px;
  font-size:14.5px;
  font-weight:700;
  color:var(--navy);
}
.vidnote a{color:var(--orange);}

/* Hide video when printing — replace with a prompt */
@media print{
  .videoblock{display:none !important;}
}

/* ---------- Alert / correction ---------- */
.alert{
  background:#FFF6DF;
  border:3px dashed var(--orange);
  border-radius:18px;
  padding:18px 22px;
  margin-top:18px;
}
.alert strong{color:var(--orange);}

/* ---------- Cards ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}
.grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.card{
  background:#fff;
  border:3px solid var(--navy);
  border-radius:18px;
  padding:20px 22px;
  box-shadow:6px 6px 0 var(--sun);
}
.card.g{box-shadow:6px 6px 0 var(--green);}
.card.o{box-shadow:6px 6px 0 var(--orange);}
.card.t{box-shadow:6px 6px 0 var(--teal);}
.card.p{box-shadow:6px 6px 0 var(--pink);}
.card h3{margin-top:0;}
.card .num{
  font-family:'Baloo 2',cursive;
  font-size:30px;
  color:var(--orange);
  line-height:1;
}

/* ---------- Bullet lists ---------- */
ul.ticks{list-style:none;padding:0;margin:0 0 8px;}
ul.ticks li{
  position:relative;
  padding-left:30px;
  margin-bottom:9px;
}
ul.ticks li:before{
  content:"";
  position:absolute;
  left:0; top:7px;
  width:15px;height:15px;
  border-radius:5px;
  background:var(--green);
}
ul.ticks.o li:before{background:var(--orange);}
ul.ticks.t li:before{background:var(--teal);}
ul.ticks.p li:before{background:var(--pink);}
ul.ticks.n li:before{background:var(--navy);}

/* ---------- Photos ---------- */
figure{margin:0;}
.photo{
  border-radius:18px;
  overflow:hidden;
  border:4px solid #fff;
  box-shadow:0 8px 22px rgba(18,57,95,.22);
}
.photo img{display:block;width:100%;height:auto;}
figcaption{
  font-size:13.5px;
  color:#5A6A78;
  font-style:italic;
  margin-top:7px;
}
.tilt-l{transform:rotate(-1.6deg);}
.tilt-r{transform:rotate(1.6deg);}

.split{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:26px;
  align-items:center;
}
.split.rev{grid-template-columns:.85fr 1.15fr;}

/* ---------- Banner strip ---------- */
.strip{
  background:linear-gradient(90deg,var(--orange),var(--sun));
  border-radius:18px;
  padding:20px 26px;
  color:var(--navy);
}
.strip h3{color:var(--navy);margin-bottom:6px;font-size:23px;}
.strip p{margin:0;font-weight:600;}

.strip-green{
  background:linear-gradient(90deg,var(--green-dk),var(--green));
  color:#fff;
}
.strip-green h3{color:#fff;}

/* ---------- Timeline ---------- */
.timeline{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-top:6px;
}
.step{
  background:#fff;
  border:3px solid var(--green-dk);
  border-radius:16px;
  padding:16px 15px;
  position:relative;
}
.step .dot{
  width:34px;height:34px;
  border-radius:50%;
  background:var(--green-dk);
  color:#fff;
  font-family:'Baloo 2',cursive;
  font-size:18px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:9px;
}
.step h4{
  font-family:'Baloo 2',cursive;
  margin:0 0 5px;
  font-size:17px;
  color:var(--navy);
}
.step p{font-size:14px;margin:0;color:#4A5A68;}

/* ---------- Certificate ---------- */
.cert{
  border:6px double var(--orange);
  border-radius:20px;
  padding:26px 30px;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,201,60,.25), transparent 50%),
    #FFFDF7;
  text-align:center;
}
.cert .seal{
  width:96px;height:96px;
  margin:0 auto 12px;
  border-radius:50%;
  background:conic-gradient(var(--orange),var(--sun),var(--green),var(--teal),var(--orange));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}
.cert .seal span{
  width:76px;height:76px;
  border-radius:50%;
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:'Baloo 2',cursive;
  font-size:12.5px;
  font-weight:800;
  color:var(--navy);
  text-align:center;
  line-height:1.15;
  padding:6px;
}
.cert h2{margin-bottom:6px;}

/* ---------- Quote ---------- */
.quote{
  background:var(--navy);
  color:#fff;
  border-radius:20px;
  padding:26px 30px;
  font-size:20px;
  font-family:'Baloo 2',cursive;
  line-height:1.35;
  position:relative;
}
.quote small{
  display:block;
  font-family:'Nunito',sans-serif;
  font-size:14px;
  font-weight:600;
  color:var(--sun);
  margin-top:10px;
}

/* ---------- CTA / footer ---------- */
.cta{
  background:linear-gradient(135deg,var(--green-dk),var(--teal));
  color:#fff;
  border-radius:22px;
  padding:30px 34px;
  text-align:center;
}
.cta h2{color:#fff;}
.cta p{color:#E8FBF0;max-width:620px;margin:0 auto 16px;}
.btn{
  display:inline-block;
  background:var(--sun);
  color:var(--navy);
  font-family:'Baloo 2',cursive;
  font-weight:800;
  font-size:17px;
  padding:12px 30px;
  border-radius:999px;
  text-decoration:none;
  box-shadow:0 5px 0 #C99A15;
  margin:5px;
}
.btn.alt{background:#fff;box-shadow:0 5px 0 #C9D6E0;}

/* ---------- Contact strip in CTA ---------- */
.contactstrip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:22px;
  text-align:left;
}
.cbox{
  background:rgba(255,255,255,.15);
  border:2px solid rgba(255,255,255,.55);
  border-radius:14px;
  padding:13px 15px;
}
.cbox .ico{font-size:19px;display:block;margin-bottom:3px;}
.cbox strong{
  display:block;
  font-family:'Baloo 2',cursive;
  font-size:14px;
  color:var(--sun);
  letter-spacing:.04em;
  text-transform:uppercase;
}
.cbox a{
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:14.5px;
  word-break:break-word;
}

/* ---------- Footer detail ---------- */
.fline{display:block;margin-bottom:5px;}
.vat{font-size:12.5px;color:#8FB2CE;line-height:1.45;display:block;}
.copyline{
  margin-top:20px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.18);
  font-size:12.5px;
  color:#8FB2CE;
}

footer{
  background:var(--navy);
  color:#C9DDF0;
  padding:26px 44px;
  font-size:14px;
  margin-top:20px;
}
footer strong{color:#fff;}
footer a{color:var(--sun);text-decoration:none;}
.footgrid{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:24px;
  align-items:start;
}

/* ---------- Responsive ---------- */
@media (max-width:760px){
  .wrap{padding:26px 22px 6px;}
  .masthead{padding:24px 22px;}
  .masthead h1{font-size:34px;}
  .grid,.grid-3,.split,.split.rev,.timeline,.footgrid,.contactstrip{grid-template-columns:1fr;}
  .tilt-l,.tilt-r{transform:none;}
  footer{padding:22px;}
}

/* ---------- Print ---------- */
@page{size:A4;margin:11mm;}
@media print{
  body{background:#fff;font-size:9.2pt;line-height:1.42;}
  .photo img{max-height:135px;object-fit:cover;object-position:center 28%;width:100%;}
  .photo.tall img{max-height:135px;object-position:center 18%;}
  .split,.split.rev{gap:14px;}
  .grid,.grid-3{gap:11px;}
  .card{padding:11px 13px;box-shadow:3px 3px 0 var(--sun);}
  .card.g{box-shadow:3px 3px 0 var(--green);}
  .card.o{box-shadow:3px 3px 0 var(--orange);}
  .card.t{box-shadow:3px 3px 0 var(--teal);}
  .card.p{box-shadow:3px 3px 0 var(--pink);}
  .countdown,.cta,.cert,.quote,.strip{padding:14px 18px;}
  .masthead{padding:16px 20px;}
  .logo-badge img{height:52px;}
  ul.ticks li{margin-bottom:4px;padding-left:20px;}
  ul.ticks li:before{width:10px;height:10px;top:5px;}
  p{margin:0 0 7px;}
  .step{padding:10px 11px;}
  .cert .seal{width:64px;height:64px;margin-bottom:7px;}
  .cert .seal span{width:50px;height:50px;font-size:7.5pt;}
  .dek{font-size:10pt;}
  .quote{font-size:12.5pt;}
  .contactstrip{gap:8px;margin-top:12px;}
  .cbox{padding:8px 10px;border-width:1.5px;}
  .cbox a{font-size:8.6pt;}
  .cbox .ico{font-size:13px;margin-bottom:1px;}
  .cbox strong{font-size:9pt;}
  footer{padding:14px 18px;font-size:8.6pt;}
  .fline{margin-bottom:3px;}
  .vat{font-size:7.8pt;}
  .copyline{margin-top:10px;padding-top:8px;font-size:7.8pt;}
  .sheet{box-shadow:none;max-width:none;}
  .wrap{padding:12px 6px 0;}
  section{margin-bottom:14px;}
  .card,.step,.cert,.countdown,.cta,.quote,.strip,.alert{page-break-inside:avoid;}
  .masthead h1{font-size:30pt;}
  h2{font-size:19pt;}
  h3{font-size:13pt;}
  .clock .big{font-size:34pt;}
  .photo{box-shadow:none;}
  .tilt-l,.tilt-r{transform:none;}
  .pagebreak{page-break-before:always;}
  a{text-decoration:none;color:var(--navy);}
}