/* ========== Base + Tokens ========== */
@font-face {font-family: "helvetica-neue-bold";src: url("../fonts/helvetica-neue-bold.otf") format("opentype");font-weight: normal;font-style: normal;}

@font-face {font-family: "helvetica-neue-roman";src: url("../fonts/helvetica-neue-roman.otf") format("opentype");font-weight: normal;font-style: normal;}

* { margin: 0; padding: 0; }
:root{
  --brand-dark: #f24206;
  --brand-red:  #c52128;
  --ink: #000000;
  --ink-weak:#110f10;
  --bg: #f8f9fa;
  --gray-1:#e9e9e9;
  --gray-2:#d5d5d5;
}

html, body { height: 100%; }
body{
  font-family: 'helvetica-neue-roman', sans-serif;
  background-color: var(--bg);
}

small { font-size: 70%; }

/* ========== Utilities ========== */
.h-30vh { height: 30vh; }
.h-26vh { height: calc(26vh - 12px); }
.mb-24  { margin-bottom: 24px; }
.mt-12  { margin-top: 12px; }

.flex     { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.center   { justify-content: center; align-items: center; }
.between  { justify-content: space-between; }
.items-start { align-items: flex-start; }

.px-7p { padding-left: 7%; padding-right: 7%; }
.py-7p { padding-top: 7%; padding-bottom: 7%; }
.p-20  { padding: 20px; }
.p-10  { padding: 10px; }

.bg-cover-center{
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* ========== Section ========== */
section.home-sec-hero{
  padding: 40px;
  min-height: calc(100vh - 100px);
  display: flex;
  align-items: flex-end;
}

/* ========== Box: base ========== */
.box{
  position: relative;
  display: inline-flex;
  width: 100%;
}
.box--panel{ 
  padding: 7% 8%;
  flex-direction: column;
}
.box--media{ /* shared for image/video containers */
  overflow: hidden;
  align-items: center;
  justify-content: center;
}
.box--headline h1{
  font-size: clamp(22px, 2.6vw, 34px);
  position: relative;
  z-index: 1;
  margin-bottom: 20px;
}
.box h2{
  font-size: clamp(20px, 2.2vw, 30px);
  position: relative;
  z-index: 1;
  margin-bottom: 0;
}
.box p{
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  margin: 0;
}

/* background-image boxes get a safe base color while loading */
.box.bg-img-safe{ background-color: #ddd; }

/* Anchor wrapping fix */
.box a,
.for-enquiries a{
  overflow-wrap: anywhere;
  text-decoration: none;
  border-bottom: 1px solid;
  display: inline-flex;
  flex-wrap: wrap;
}

/* ========== Left Column Blocks ========== */
/* left_01 */
.box.left_01{
  height: 30vh;
  background-color: var(--brand-dark);
/*	background-color: #002c8e;*/
  margin-bottom: 24px;
  justify-content: center;
  align-items: center;
}
.box.left_01 img{ max-width: 60%; }

/* left_02 (image with caption strip) */
.box.left_02{
  height: 28vh;
  background: url(../img/big-img-02.png) center/cover no-repeat;
  overflow: hidden;
}
.box.left_02 p{
  padding: 4% 12%;
  color: #fff;
  background: var(--brand-dark);
  position: absolute;
  bottom: 0;
}

.inner-row{height: 100%;}
/* left_03 (anniversary/pattern) */
.box.left_03{
  height: 100%;

  background: url("../img/loving-12-years.png") center/cover no-repeat;
	    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
  overflow: hidden;
}

.box.left_03 img{
  width: 150px;
  position: relative; z-index: 1;
}
.box.left_03 h2{
  color: #ffdb9c;
  font-size: 6vw;
  font-weight: 800;
  line-height: 1;
  margin: 0;
  position: relative;
  z-index: 1;
}
.box.left_03 h2 span.plus{ transform: translateY(-10px); display: inline-block;}

.box.left_03 h3{color: #fff;text-transform: uppercase;font-size: 2vw;}

.box.left_03 p{
  color: #fff;
  max-width: 180px;
	font-size: clamp(1rem, 2vw, 24px);
  position: relative; z-index: 1;
}

.box.right_01{
  color: #fff;
  height: 30vh;
  background-color: #000;
  padding-block: 7%;
  padding-inline: 4%;
  margin-bottom: 24px;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
	overflow: hidden;
}

.box.right_01 img{position: absolute; height: 100%; right: 0; top: 0; transform: scale(1.1);}

.box.right_01 h1{  font-family: 'helvetica-neue-bold', sans-serif; font-size:  clamp(1.75rem, 4vw, 54px); line-height: 1; margin-bottom: 1rem;}
.box.right_01 p{ max-width: 80%;  font-family: 'helvetica-neue-roman', sans-serif; font-size: clamp(1rem, 2vw, 24px);}

 span.orange-highlights{color: #f24206;}

.box.right_02{
	height: 100%;
	background: url("../img/creatively-charged.webp") center/cover no-repeat;
	flex-direction: column;
    justify-content: space-between;
    padding-inline: 7%;
    padding-block: 12%;
}
.box.right_02 h2{ color: #000;   font-family: 'helvetica-neue-bold', sans-serif; font-size: clamp(1.25rem, 3vw, 36px);}
.box.right_02 p{ color: #000;  font-family: 'helvetica-neue-roman', sans-serif; font-size: clamp(0.875rem, 1.5vw, 18px);}

/* right_03 (ZTM card) */
.box.right_03{
  height: calc(26vh - 12px);
  background: var(--gray-1);
  border: 1px solid var(--gray-2);
  padding: 7% 8%;
  margin-top: 12px;
  flex-direction: column; align-items: flex-start; justify-content: space-between;
}
.box.right_03 img{ width: 140px; }
.box.right_03 h2{ margin-bottom: 15px; }

/* right_04 (product list container) */
.box.right_04{

  height: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
}
.box.right_04 p{ margin: 10px 5px 20px 5px; color: var(--ink); }

/* right_05 (big image) */
.box.right_05{
  height: calc(26vh - 12px);
  background: url(../img/big-img-02.webp) center/cover no-repeat;
  margin-top: 12px;
}

/* right_06 (typed lines) */
.box.right_06{
  text-align: left;
  color: #fff;
/*  background: #f36f37;*/
	background-image: url("../img/integrated-marketing-solutions-bg.webp");
	background-repeat: no-repeat;
	background-size: cover;
  height: calc(26vh - 12px);
  padding: 7% 8%;
  margin-bottom: 12px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
	 font-family: 'helvetica-neue-bold', sans-serif;
}
.box.right_06 p{ color: #f24206; font-size: clamp(1.125rem, 2.5vw, 30px); line-height: 1.2;}
.box.right_06 h2{ color: #000; font-size: clamp(1.5rem, 3.5vw, 50px);}
.box.right_06 h2 sup{ font-size: clamp(1.5rem, 3.5vw, 40px);}

/* ========== Product list (shared) ========== */
.product-list{
  margin: 0; padding: 0; list-style: none;
  height: 100%;
  display: flex; flex-direction: column; justify-content: space-evenly;
}
.product-list li{
  color: #fff;
/*  font-size: clamp(1rem, 2vw, 24px);*/
  font-size: clamp(1.125rem, 2.5vw, 30px);
  height: 16.66%;
  padding: 10px 20px;
  gap: 30px;
  display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: center;
}
.product-list li img{ max-width: 90px; }
.product-list li:nth-child(1){ background-color: #aa2607; }
.product-list li:nth-child(2){ background-color: #f24206; }
.product-list li:nth-child(3){ background-color: #000; }
.product-list li:nth-child(4){ background-color: #ffdb9c; color:#000; }
.product-list li:nth-child(5){ background-color: #eae8e8; color:#000; }
.product-list li:nth-child(6){ background-color: #e02f00;  }

/* ========== Enquiries footer ========== */
.for-enquiries{
  font-size: 16px;
  width: 100%;
  padding: 20px;
  text-align: center;
  position: static; /* simpler + no overlap */
}
.for-enquiries span{ color: var(--ink); }
.for-enquiries a{ /*color: var(--brand-red);*/ color: #000; border: none;}



@media(max-width:1440px){
		section.home-sec-hero{padding-bottom: 1rem;}
	.box.left_01 img { max-width: 40%;}
	
	.box.right_01 p br{display: none;}
	.box.right_01 p { max-width: 75%; }
	.box.right_01 h1,.box.right_06 h2 {font-size: clamp(1.35rem, 3vw, 42px);}
	.box.right_01 p,.product-list li {font-size: clamp(0.875rem, 1.75vw, 21px);}
	.box.right_02 {padding-inline: 8%;}
	.box.right_02 h2 { font-size: clamp(1rem, 2vw, 24px);}
	.box.right_06 p {font-size: clamp(1rem, 2vw, 24px);}
}

@media(max-width:1366px){

	.box.right_01 h1, .box.right_06 h2 { font-size: clamp(1.25rem, 3vw, 36px); }
	.box.right_01 p,.product-list li,.box.left_03 p {font-size: clamp(0.875rem, 1.5vw, 18px);}
	.box.right_01 p br{display: none;}
}

@media(max-width:1280px){
	.box.right_01{background-position: right;}
	.box.right_02 p br{display: none;}
}


@media(max-width:1024px){
	.box.right_01{justify-content: center;}
}

@media(max-width:840px){
/*	.box.right_06,.box.right_02 {margin-top:1.5rem;}*/
	.box.right_06{margin-top:1.5rem; padding-inline: 3%;}
	.inner-row{padding-bottom: 1.5rem;}
	section.home-sec-hero { padding: 20px;}
	.box.right_01 p{font-size: clamp(1.125rem, 2.5vw, 30px);  max-width: 65%;}
		.box.right_01 h1,.box.right_02 h2, .box.right_06 h2{font-size: clamp(2rem, 4.5vw, 64px);}
	.product-list li span{font-size: clamp(1.125rem, 2.5vw, 30px);}
	.box.right_06 p {font-size: clamp(1.25rem, 3vw, 36px);}
	.box.right_02 p{font-size: clamp(1.125rem, 2.5vw, 30px); max-width: 65%;}
	.box.right_02 h2{transform: translateY(-66px);}
	.for-enquiries{font-size: clamp(1.125rem, 2.5vw, 30px); padding: 0 1rem 1rem;}
}
@media(max-width:991px){


	.product-list li{padding-block:20px;}
	.box.right_02 { padding-inline: 3%;}
	.box.right_02 h2 { margin-bottom: 0.8rem;}
	.box.right_06 h2{margin-bottom: 0.5rem;}
	
	.box.left_03 h2{font-size: 10vw;}
	.box.left_03 p{font-size: clamp(1.125rem, 2.5vw, 30px);}
	.box.left_03 h3 { font-size: 4vw;}
}

@media (max-width: 768px){
	.pad-x{padding-inline:0px;}
	.row{margin-inline:0px;}
	
  section.home-sec-hero{padding: 24px 0;text-align: center;}
  section.home-sec-hero .container-fluid{padding:0px}
  .box{/* padding: 30px !important; *//*margin: 0 0 20px 0;*/}
  .box.left_01,.box.left_02,.box.right_01,.box.right_02,.box.right_03{
    min-height: 200px;
    height: auto;
    text-align: left;
  }
	
	.box.left_03{
		height: 100%;
	}
	
  .box.left_01, .box.left_02, .box.left_03, .box.right_02, .box.right_03, .box.right_04, .box.right_06 {
    width: calc(100% - 46px);
    margin-left: auto;
    margin-right: auto;
  }

  .box.left_01{min-height: auto;padding: 30px;}
  .box.left_01 img{ max-width: 55%; }

  .box.right_03 h2{ margin-bottom: 12px; }
	
  .box.right_04{height:auto;padding:0px;background: #fff;}
	.box.right_06 h2{font-size:50px;font-weight: 300;}

  .product-list{/*margin: 10px 0px;*/gap: 15px;display: flex;flex-wrap: wrap;flex-direction: row;}
  .product-list li{width: 47%;height: auto;padding: 20px 20px;gap: 10px;display: flex;flex-direction: column;}
  .product-list li img{width: auto;max-height: 70px;max-width: none;}

  .box.left_03 img{ width: 110px; }

  /* caption padding tweak */
  .box.left_02 p{ padding: 4% 12% 7% 12%; }

/*  .box.left_04{padding: 0px; border:1px solid #000; }*/
.box.right_05{margin-bottom:0px;}

	.box.right_01 h1{margin-bottom:30px;}
}

@media(max-width:480px){

	.box.left_01 img { max-width: 70%;}
	.box.right_01 img {  right: -10%;}
	.box.right_01 {padding-inline:5%; margin-bottom:1rem;}
	.box.right_02 { padding-inline: 5%; }
	.box.right_02 p{ max-width: 90%;}
	.box.left_03{height: 500px; margin-top: 1rem;}
	.box.left_03 h2 { font-size: 25vw; }
	.box.left_03 h3 { font-size: 10vw;}
	
	.box.right_02 h2 { transform: translateY(-30px); }
/*	.box.right_01 h1{font-size: clamp(1.5rem, 3.5vw, 48px);}*/
	.box.right_01 p{ max-width: 60%; font-size: 1rem;}
	.box.right_06 {  padding-inline: 5%;}
}


@media(max-width:390px){
		.box.right_01 img {  right: -10%;}
	.box.right_01 h1,    .box.right_02 h2{ font-size: 1.5rem;}
	.box.right_06 h2{font-size: 40px;}
	.box.right_06 p{font-size: 1rem;}
	 .box.left_01 img { max-width: 90%; }
}

@media(max-width:360px){
	.box.right_01 img {  right: -12%;}
}

@media (max-width:320px){
    .box.right_01 img {  right: -9%; height: 75%; top: unset;  bottom: 0%;}
	.box.right_06{height: auto;}
	.box.right_05 {height: calc(45vh - 12px); }
	.box.right_02 h2{}
	
}