/* ==========================================
   Firouze Design System
   Brand v1.0
========================================== */

/* ===== Brand Section ===== */

.fz-brand{
    position:relative;
}

/* ===== Brand Grid ===== */

.fz-brand-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:var(--space-xl);
}

/* ===== Brand Item ===== */

.fz-brand-item{
    display:flex;
    justify-content:center;
    align-items:center;
}

/* ===== Brand Logo ===== */

.fz-brand-item img{
    display:block;
    max-width:100%;
    height:auto;
}

/* Reserved for future brand styles */

/* BRAND CASE STUDY */
.fz-brand-case{position:relative;background:transparent;color:var(--color-text);font-family:var(--font-fa);overflow:hidden}.fz-brand-case__fixed-bg{position:fixed;z-index:-1;inset:0;background-color:var(--color-background);background-position:center;background-size:cover;background-repeat:no-repeat}.fz-brand-case__container{width:min(calc(100% - (var(--space-xl) * 2)),1080px);margin:auto;padding:var(--space-4xl) 0}.fz-brand-case__intro-banner{position:relative;min-height:clamp(330px,42vw,600px);display:grid;place-items:center;margin:0 auto;background-color:var(--color-secondary);background-position:center;background-size:cover;background-repeat:no-repeat}.fz-brand-case__intro-banner:before{position:absolute;inset:0;background:color-mix(in srgb,var(--color-secondary) 35%,transparent);content:""}.fz-brand-case__intro-banner h1{position:relative;z-index:1;margin:0;padding:var(--space-lg);color:var(--color-white);font-size:clamp(var(--fs-h3),4vw,var(--fs-h1));line-height:1.5;text-align:center}.fz-brand-case__products,.fz-brand-case__wide,.fz-brand-case__full,.fz-brand-case__story,.fz-brand-case__showcase,.fz-brand-case__closing,.fz-brand-case__portfolio{margin-bottom:var(--space-4xl)}.fz-brand-case__products h2{margin:0 0 var(--space-xl);color:var(--color-primary);font-size:var(--fs-h3);line-height:1.6}.fz-brand-case__products-track{display:flex;gap:var(--space-sm);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.fz-brand-case__products-track::-webkit-scrollbar,.fz-brand-case__showcase-track::-webkit-scrollbar{display:none}.fz-brand-case__products-track figure{flex:0 0 calc((100% - (var(--space-sm) * 4)) / 5);aspect-ratio:1/1;margin:0;overflow:hidden;scroll-snap-align:start}.fz-brand-case figure img{display:block;width:100%;height:100%;object-fit:cover}.fz-brand-case__wide{position:relative;height:clamp(150px,18vw,230px);display:grid;place-items:center;background-color:var(--color-secondary);background-position:center;background-size:cover;background-repeat:no-repeat}.fz-brand-case__wide>img{width:min(35%,290px);height:auto;max-height:72%;object-fit:contain}.fz-brand-case__full{width:100vw;height:min(100svh,920px);margin-inline:calc((100vw - min(100vw,1080px)) / -2);overflow:hidden}.fz-brand-case__full img{width:100%;height:100%;object-fit:cover}.fz-brand-case__story{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.75fr);gap:var(--space-3xl);align-items:center}.fz-brand-case__story-copy h2,.fz-brand-case__closing h2{margin:0 0 var(--space-md);color:var(--color-primary);font-size:var(--fs-h3);line-height:1.65}.fz-brand-case__story-copy p,.fz-brand-case__closing p{margin:0;color:var(--color-text);font-size:var(--fs-body);line-height:2.2;text-align:justify;text-align-last:right}.fz-brand-case__story-copy a{display:inline-flex;align-items:center;justify-content:center;min-height:36px;margin-top:var(--space-lg);padding:0 var(--space-md);border:1px solid var(--color-orange);border-radius:var(--radius-sm);color:var(--color-orange);font-size:var(--fs-small);font-weight:700;text-decoration:none;transition:background-color var(--transition),color var(--transition)}.fz-brand-case__story-copy a:hover{background:var(--color-orange);color:var(--color-white)}.fz-brand-case__story figure{aspect-ratio:4/3;margin:0;overflow:hidden}.fz-brand-case__showcase-track{display:flex;gap:var(--space-md);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.fz-brand-case__showcase-track figure{flex:0 0 calc((100% - var(--space-md)) / 2);aspect-ratio:16/10;margin:0;overflow:hidden;scroll-snap-align:start}.fz-brand-case__closing{min-height:300px;display:grid;align-items:center;padding:var(--space-3xl);background-color:color-mix(in srgb,var(--color-primary) 10%,var(--color-background));background-position:center;background-size:cover;background-repeat:no-repeat}.fz-brand-case__closing>div{max-width:720px}.fz-brand-case__portfolio-list{display:grid;gap:var(--space-md)}.fz-brand-case__portfolio-list figure{width:100%;margin:0;overflow:hidden}.fz-brand-case__portfolio-list img{height:auto;max-height:none;object-fit:contain}.fz-brand-case+.fz-footer{margin-top:0}@media(max-width:700px){.fz-brand-case__container{width:min(calc(100% - (var(--space-md) * 2)),1080px);padding-block:var(--space-3xl)}.fz-brand-case__intro-banner{min-height:360px}.fz-brand-case__products,.fz-brand-case__wide,.fz-brand-case__full,.fz-brand-case__story,.fz-brand-case__showcase,.fz-brand-case__closing,.fz-brand-case__portfolio{margin-bottom:var(--space-3xl)}.fz-brand-case__products-track figure{flex-basis:44vw}.fz-brand-case__wide{height:140px}.fz-brand-case__full{height:72svh;margin-inline:calc((100vw - min(100vw,100% + (var(--space-md) * 2))) / -2)}.fz-brand-case__story{grid-template-columns:1fr;gap:var(--space-xl)}.fz-brand-case__story figure{order:-1}.fz-brand-case__showcase-track figure{flex-basis:80vw}.fz-brand-case__closing{min-height:260px;padding:var(--space-xl)}}
/* Brand case v3 overrides */.fz-brand-case__hero{width:100%;margin:0 0 var(--space-4xl)}.fz-brand-case__hero img{display:block;width:100%;height:auto;max-height:900px;object-fit:cover}.fz-brand-case__intro2{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.8fr);gap:var(--space-3xl);align-items:center;min-height:420px;margin-bottom:var(--space-4xl);padding:var(--space-3xl);background-color:var(--color-secondary);background-size:cover;background-position:center}.fz-brand-case__intro2 h1{margin:0 0 var(--space-md);font-size:var(--fs-h2);line-height:1.6}.fz-brand-case__intro2 p{margin:0;font-size:var(--fs-body);line-height:2.2;text-align:justify;text-align-last:right}.fz-brand-case__intro2 figure{aspect-ratio:16/9;margin:0;overflow:hidden}.fz-brand-case__dots{display:flex;justify-content:center;gap:8px;margin-top:var(--space-lg)}.fz-brand-case__dots i{width:8px;height:8px;border-radius:50%;background:var(--color-gray-light)}.fz-brand-case__dots i.is-active{background:var(--color-gray-dark)}.fz-brand-case__identity{width:100%;aspect-ratio:16/9}.fz-brand-case__wide-full{width:100%;aspect-ratio:2/1;margin:0 0 var(--space-4xl);overflow:hidden}.fz-brand-case__story>div h2,.fz-brand-case__closing h2{color:inherit}.fz-brand-case__story>div a{border-color:currentColor;color:inherit}.fz-brand-case__showcase{margin-bottom:var(--space-4xl)}.fz-brand-case__portfolio{position:relative;z-index:1;padding:var(--space-4xl) max(var(--space-md),calc((100% - 1080px)/2));margin:0;background:var(--color-white)}.fz-brand-case__portfolio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md)}.fz-brand-case__portfolio-grid figure{aspect-ratio:1/1;margin:0;overflow:hidden}@media(max-width:700px){.fz-brand-case__hero{margin-bottom:var(--space-3xl)}.fz-brand-case__intro2{grid-template-columns:1fr;gap:var(--space-xl);min-height:0;padding:var(--space-xl);margin-bottom:var(--space-3xl)}.fz-brand-case__intro2 figure{order:-1}.fz-brand-case__intro2 h1{font-size:var(--fs-h4)}.fz-brand-case__wide-full{aspect-ratio:16/10;margin-bottom:var(--space-3xl)}.fz-brand-case__portfolio{padding-block:var(--space-3xl)}.fz-brand-case__portfolio-grid{gap:var(--space-sm)}}
/* Brand case refinements */
.fz-brand-case__intro2{background-color:transparent!important}.fz-brand-case__intro2>div{color:var(--color-white)}.fz-brand-case__intro2>div[style]{color:inherit!important}.fz-brand-case__intro2>div[style] h1,.fz-brand-case__intro2>div[style] p{color:inherit!important}.fz-brand-case__wide>img{width:min(42%,348px)}.fz-brand-case__wide-full{width:100vw;margin-inline:calc(50% - 50vw);margin-bottom:var(--space-4xl)}.fz-brand-case__wide-full img{display:block;width:100%;height:auto;max-height:none;object-fit:cover}.fz-brand-case__story>div[style] h2,.fz-brand-case__story>div[style] p,.fz-brand-case__closing>div[style] h2,.fz-brand-case__closing>div[style] p{color:inherit!important}.fz-brand-case__story{background-color:transparent}.fz-brand-case__closing{position:relative;z-index:1;min-height:0;aspect-ratio:2/1;padding:var(--space-3xl);background-color:var(--color-white);background-size:100% auto;background-position:center;background-repeat:no-repeat}.fz-brand-case__closing + .fz-brand-case__portfolio{background:var(--color-white)}@media(max-width:700px){.fz-brand-case__wide-full{margin-inline:calc(50% - 50vw)}.fz-brand-case__closing{aspect-ratio:auto;min-height:260px;background-size:cover}}
/* Brand case — background and colour reliability */
.fz-brand-case__intro2 {
  min-height: 0;
  background-color: transparent !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
.fz-brand-case__intro2 > div[style],
.fz-brand-case__story > div[style],
.fz-brand-case__closing > div[style] {
  color: inherit;
}
.fz-brand-case__showcase-track figure {
  overflow: hidden;
  border-radius: var(--radius-sm);
}
.fz-brand-case__showcase-track figure img {
  border-radius: inherit;
}
.fz-brand-case__closing {
  min-height: clamp(320px, 38vw, 540px);
  aspect-ratio: auto;
  margin: 0;
  background-color: var(--color-white);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.fz-brand-case__closing + .fz-brand-case__portfolio {
  margin-top: 0;
  padding-top: var(--space-4xl);
  background: var(--color-white);
}
@media (max-width: 700px) {
  .fz-brand-case__intro2 { background-size: 100% 100%; }
  .fz-brand-case__closing {
    min-height: 280px;
    background-size: cover;
  }
}

/* Brand case — independent story colours and final background transition */
.fz-brand-case__story h2[style],
.fz-brand-case__story p[style] {
  color: inherit;
}
.fz-brand-case__closing {
  overflow: hidden;
  background-color: transparent !important;
}
.fz-brand-case__closing::after {
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 58%;
  background: linear-gradient(to bottom, transparent 0%, var(--color-white) 76%);
  content: "";
  pointer-events: none;
}
.fz-brand-case__closing > div {
  position: relative;
  z-index: 1;
}

/* Brand case — preserve PNG transparency and link button states */
.fz-brand-case__closing::after {
  display: none;
}
.fz-brand-case__closing {
  background-color: transparent !important;
}
.fz-brand-case__story > div > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  margin-top: var(--space-lg);
  padding-inline: var(--space-lg);
  border: 1px solid var(--fz-brand-button-color, var(--color-orange));
  border-radius: var(--radius-sm);
  background-color: var(--fz-brand-button-color, var(--color-orange));
  color: var(--color-white);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1;
  text-decoration: none !important;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.fz-brand-case__story > div > a:hover,
.fz-brand-case__story > div > a:focus-visible {
  border-color: var(--fz-brand-button-color, var(--color-orange)) !important;
  background-color: transparent !important;
  color: var(--fz-brand-button-color, var(--color-orange)) !important;
  text-decoration: none !important;
  transform: translateY(-2px);
}
.fz-brand-case__story > div > a::after {
  content: none !important;
}

/* Brand case — compact rhythm and full-width visual sections */
.fz-brand-case__hero{margin-bottom:var(--space-2xl)}
.fz-brand-case__container>section,.fz-brand-case__container>figure,.fz-brand-case__closing,.fz-brand-case__portfolio{margin-bottom:var(--space-2xl)}
.fz-brand-case__intro2,.fz-brand-case__wide,.fz-brand-case__identity{width:100vw;margin-inline:calc(50% - 50vw);border-radius:0}
.fz-brand-case__intro2{padding-inline:max(var(--space-xl),calc((100vw - 1080px)/2))}
.fz-brand-case__wide,.fz-brand-case__identity{margin-bottom:var(--space-2xl)}
.fz-brand-case__identity{display:block}
.fz-brand-case__identity img{display:block;width:100%;height:auto;border-radius:0}
.fz-brand-case__closing{width:100%;margin-bottom:0}
.fz-brand-case__closing>div{width:min(calc(100% - (var(--space-xl)*2)),1080px);margin-inline:auto}
@media(max-width:700px){.fz-brand-case__hero,.fz-brand-case__container>section,.fz-brand-case__container>figure,.fz-brand-case__portfolio{margin-bottom:var(--space-xl)}.fz-brand-case__intro2{padding-inline:var(--space-md)}.fz-brand-case__closing>div{width:min(calc(100% - (var(--space-md)*2)),1080px)}}

/* Brand case — final width refinements */
.fz-brand-case__identity{
  width:90%;
  margin-inline:auto;
}
.fz-brand-case__closing{
  padding-inline:0;
}
.fz-brand-case__closing>div{
  width:min(calc(100% - (var(--space-xl)*2)),1080px);
  max-width:1080px;
}
.fz-brand-case__closing + .fz-brand-case__portfolio,
.fz-brand-case__portfolio{
  margin-top:0!important;
  margin-bottom:0!important;
  border:0;
  box-shadow:none;
  background:var(--color-white);
}
.fz-brand-case__products>h2{
  display:none;
}
@media(max-width:700px){
  .fz-brand-case__identity{width:90%}
  .fz-brand-case__closing>div{width:min(calc(100% - (var(--space-md)*2)),1080px)}
}

/* Brand case — visual spacing adjustment */
.fz-brand-case__identity{
  width:96%;
}
.fz-brand-case__portfolio{
  padding-block:calc(var(--space-4xl) + var(--space-lg));
}
@media(max-width:700px){
  .fz-brand-case__identity{width:94%}
  .fz-brand-case__portfolio{padding-block:var(--space-3xl)}
}

/* Brand case — viewport based identity and gallery spacing */
.fz-brand-case__identity{
  width:calc(100vw - (var(--space-xl)*2))!important;
  margin-inline:calc(50% - 50vw + var(--space-xl))!important;
}
.fz-brand-case__portfolio{
  margin:0!important;
  padding-top:calc(var(--space-4xl) + var(--space-xl))!important;
  padding-bottom:calc(var(--space-4xl) + var(--space-xl))!important;
}
@media(max-width:700px){
  .fz-brand-case__identity{
    width:calc(100vw - (var(--space-md)*2))!important;
    margin-inline:calc(50% - 50vw + var(--space-md))!important;
  }
  .fz-brand-case__portfolio{
    padding-top:var(--space-3xl)!important;
    padding-bottom:var(--space-3xl)!important;
  }
}

/* Brand case — keep identity artwork inside its frame */
.fz-brand-case__identity{
  aspect-ratio:auto!important;
  overflow:hidden;
  box-sizing:border-box;
}
.fz-brand-case__identity img{
  display:block;
  width:100%!important;
  max-width:100%;
  height:auto!important;
  object-fit:contain!important;
  transform:none!important;
}

/* Brand case — spacious final portfolio section */
.fz-brand-case__portfolio{
  padding-top:calc(var(--space-4xl) + var(--space-2xl))!important;
  padding-bottom:calc(var(--space-4xl) + var(--space-2xl))!important;
}
@media(max-width:700px){
  .fz-brand-case__portfolio{
    padding-top:var(--space-4xl)!important;
    padding-bottom:var(--space-4xl)!important;
  }
}

/* Brand case — spacing for the product carousel */
.fz-brand-case__products{
  margin-block:0!important;
  padding-top:calc(var(--space-4xl) + var(--space-xl))!important;
  padding-bottom:calc(var(--space-4xl) + var(--space-xl))!important;
}
@media(max-width:700px){
  .fz-brand-case__products{
    padding-top:var(--space-3xl)!important;
    padding-bottom:var(--space-3xl)!important;
  }
}

/* Brand case — responsive hero, identity carousel and final gallery */
.fz-brand-case__hero picture{display:block;width:100%}
.fz-brand-case__showcase-track{
  display:flex;
  gap:var(--space-md);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.fz-brand-case__showcase-track::-webkit-scrollbar{display:none}
.fz-brand-case__showcase-track figure{
  flex:0 0 calc((100% - var(--space-md))/2);
  margin:0;
  scroll-snap-align:start;
}
@media(max-width:700px){
  .fz-brand-case__hero img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain}
  .fz-brand-case__intro2 figure{aspect-ratio:auto!important;overflow:visible}
  .fz-brand-case__intro2 figure img{display:block;width:100%;height:auto!important;object-fit:contain!important}
  .fz-brand-case__showcase-track{gap:var(--space-md)}
  .fz-brand-case__showcase-track figure{flex-basis:100%}
  .fz-brand-case__portfolio-grid{grid-template-columns:1fr!important}
}

/* Brand case — showcase carousel controls */
.fz-brand-case__showcase-controls{display:flex;justify-content:center;gap:var(--space-sm);margin-top:var(--space-lg)}
.fz-brand-case__showcase-controls button{width:34px;height:34px;padding:0;border:1px solid var(--color-border);border-radius:50%;background:var(--color-white);color:var(--color-secondary);font-size:var(--fs-body);cursor:pointer;transition:var(--transition)}
.fz-brand-case__showcase-controls button:hover{border-color:var(--color-orange);background:var(--color-orange);color:var(--color-white)}
@media(max-width:700px){.fz-brand-case__showcase-controls{margin-top:var(--space-md)}}

/* Brand case — mobile intro background and reliable showcase navigation */
.fz-brand-case__intro2{
  background-image:var(--fz-brand-intro-bg,none)!important;
}
.fz-brand-case__showcase-track,
.fz-brand-case__showcase-controls{
  direction:ltr;
}
@media(max-width:700px){
  .fz-brand-case__intro2{
    background-image:var(--fz-brand-intro-bg-mobile,var(--fz-brand-intro-bg,none))!important;
    background-repeat:no-repeat!important;
    background-position:center center!important;
    background-size:100% 100%!important;
  }
  .fz-brand-case__intro2 figure{
    min-height:0!important;
    height:auto!important;
    aspect-ratio:auto!important;
    overflow:visible!important;
  }
  .fz-brand-case__intro2 figure img{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    object-fit:contain!important;
    object-position:center!important;
  }
}
/* =========================================
   ENGLISH BRAND CASE STUDIES
========================================= */

.fz-brand-case--en {
	direction: ltr;
	font-family: var(--font-en);
	text-align: left;
}

.fz-brand-case--en .fz-brand-case__intro2 > div,
.fz-brand-case--en .fz-brand-case__story > div,
.fz-brand-case--en .fz-brand-case__closing > div,
.fz-brand-case--en h1,
.fz-brand-case--en h2,
.fz-brand-case--en h3 {
	direction: ltr;
	text-align: left;
}

.fz-brand-case--en .fz-brand-case__intro2 p,
.fz-brand-case--en .fz-brand-case__story p,
.fz-brand-case--en .fz-brand-case__closing p {
	direction: ltr;
	text-align: justify !important;
	text-align-last: left !important;
	hyphens: auto;
}

/* Text buttons follow their label width in both languages. */

.fz-brand-case .fz-brand-case__story a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 0;
	max-width: 100%;
}