@import url('https://fonts.googleapis.com/css2?family=Manufacturing+Consent&family=Outfit:wght@100..900&display=swap');


/* CSS RESET */
/* Padding and borders should not change an element's declared size. */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Browser margin/padding defaults vary wildly across elements and vendors.
   Start from zero - handle spacing intentionally via the design system. */
* {
  margin: 0;
  padding: 0;
}

/* Prevents flex/grid children from overflowing their container.
   The default min-width: auto on flex and grid children causes overflow bugs
   that are notoriously confusing to debug. */
* {
  min-width: 0;
}

/* Hidden means hidden: !important is warranted here. */
[hidden] {
  display: none !important;
}

/* Allows CSS transitions to/from intrinsic keyword sizes (auto, min-content, etc.).
   Only meaningful for users who haven't requested reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

/* Prevent adjustments of font size after orientation changes in iOS. */
html {
  -webkit-text-size-adjust: 100%; /* Safari, iOS Safari */
  text-size-adjust: 100%;         /* Chrome, Edge, Firefox Android */
}

/* Ensures the page occupies at least the full viewport.
   svh uses the viewport height with mobile browser UI expanded,
   so it stays stable instead of resizing (and triggering relayout)
   as the address bar shows and hides.
   It overrides the vh fallback in browsers that support it. */
body {
  min-height: 100vh;
}

/* Reserves space for the scrollbar, when the scrollbar is not showing.
   Prevents flicker when changes on the page cause the scrollbar to toggle. */
html {
  scrollbar-gutter: stable;
}

/* Scroll events captured by the scrolling area you're pointing at, by default. */
html {
  overscroll-behavior: contain;
}

/* Antialiased rendering looks better on high-DPI (retina) screens.
   On lower-DPI displays, subpixel antialiasing (the default) can be
   sharper, so this is slightly lossy on older monitors.
   Enable kerning and ligatures at small font-sizes by default. */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: always;
  text-rendering: optimizeLegibility;
}

/* A unitless line-height avoids inheritance math issues.
   The smaller default line-height for h-elements avoids excessive
   line-height when your design system (likely) applies larger fonts.
   WCAG recommends at least 1.5 for body copy. */
body {
  line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 {
  line-height: 1.1;
}

/* Prevents long URLs or unbreakable strings from blowing out their container. */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* Smarter line-breaking:
   'pretty' avoids widows (lone words on the last line of a paragraph).
   'balance' distributes heading text more evenly across lines. 
   Harmless in browsers that don't support them. */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/* Headings carry semantic meaning, not visual weight.
   h1–h6 sizing and boldness should come from your design system. */
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

/* Inline embedded content has a gap at the bottom caused by baseline alignment.
   Block display removes it; max-width prevents overflow.
   height: auto preserves aspect ratio when max-width constrains the width. */
img, picture, video, canvas, svg, embed, iframe, object, audio {
  display: block;
  max-width: 100%;
}

/* Exemption for SVG icons (Heroicons/Lucide/Phosphor, etc.) with explicit sizes:
   these should not be constrained. */
svg[width][height] {
  max-width: revert;
}

/* Strips visual chrome from buttons so they can be styled from scratch. */
button {
  background: none;
  border: none;
}

/* Form elements use OS-level fonts and ignore font inheritance by default. */
input, button, textarea, select {
  font: inherit;
}

/* Strips OS-level native styling from interactive elements.
   Leaves border and background intact, providing accessibility by default.
   Visual styling should be handled by the design system. */
input, button, textarea, select {
  -webkit-appearance: none;
  appearance: none;
}

/* Anything interactive should signal clickability.
   'button' attribute targets [type="button"], [type="submit"], etc. */
button,
[role="button"],
label,
summary,
select {
  cursor: pointer;
}

/* Inherit color by default so links don't always appear in browser-default blue.
   Text-decoration is intentionally left as underlined for accessibility. */
a {
  color: inherit;
}

/* Removes bullets/numbers.
   list markers should be an explicit choice, not a default. */
ul, ol {
  list-style: none;
}

/* Tables default to separated borders with spacing between cells.
   For any custom table design, you'll want to collapse the borders. */
table {
  border-collapse: collapse;
}

/* Browsers apply bold to <th> elements.
   Boldness in tables should be controlled by your design system. */
th {
  font-weight: inherit;
}

/* Fieldsets have a surprise border and padding that most UIs don't want. */
fieldset {
  border: none;
  padding: 0;
}

/* More of a normalization, but these are inconsistently styled in some browsers. */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub { bottom: -0.25em; }
sup { top: -0.5em; }

/* Ensures monospace elements render at the same size as surrounding text. */
pre, code, kbd, samp {
  font-family: monospace;
  font-size: inherit;
}

/* Browser-generated quotation marks are rarely wanted in a design system. */
blockquote,
q {
  quotes: none;
}
blockquote::before,
blockquote::after,
q::before,
q::after {
  content: none;
}

/* Creates an explicit stacking context on the app root.
   Prevents z-index bleed from portals, modals, or tooltips
   from leaking out unexpectedly. */
#root {
  isolation: isolate;
}

/* 	BODY */

body, html {
  height: 100%;
}


body {
	background: #FEF8EC;
	color: #36413E;
	font-size: 100%;
	line-height: 1.25;
	font-family: "Outfit", Arial, sans-serif;
	margin: o;
	padding: 0;
}

a {
	color: #36413E;
	text-decoration: none;
	outline: none;
}

a:hover, a:focus {
	color: #373e18;
}

img{
  width: 100%;
}

h1{
  font-family: "Manufacturing Consent", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 120px;
  line-height: 6rem;
  color: #EE0606;
}

/* NAVIGATION*/

.dbs-nav-tag{
  width: 280px;
padding: 8px 16px;
background-color: #EE0606;
position: fixed;
top: 40px;
left: 50%;
 transform: translate(-50%, -50%);
align-items: center;
display: flex;
align-items: center;
border-radius: 24px;
z-index: 1;

}

.dbs-nav-tag button{
	width: 24px;
	height: 24px;
	background: none ;
	border: 0;
	background-size: cover;
	background-image: url('../img/sparkle.svg');
	margin-right: 8px;

}

#trigger-overlay{
	cursor: pointer;
}

.dbs-nav-icon {
	
	min-width: 24px;
	height: 24px;
	margin: 0 6px;
	
	
}

.dbs-nav-icon a{
	line-height: 1rem;
	font-weight: 700;
	color: #fff;
}

.dbs-nav-icon.email{
  width: 24px;
	height: 24px;
 background-image: url(../img/email.svg);
 background-size:cover ;
}


.dbs-nav-icon.linkedin{
  width: 24px;
	height: 24px;
 background-image: url(../img/linkedin-white.svg);
 background-size:cover ;
}

.home-instructions {
	position: fixed;
	width: 44px;
	margin:  15% 24px;
}

.home-instructions p{
	text-align: center;
	margin-bottom: 12px;
}

.home-instructions p span{
	margin-top: -24px;
}

/* OVERLAY */

.about-overlay {
  height: 100%;
  width: 100%;
  display:none ;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #EE0606;
  color: #FEF8EC;
  transition: .5s ease;
}

.dbs-about{
	width: 87%;
	max-width: 960px;
	margin: 120px auto;
}

.dbs-about h2 span{
	text-align: center;
	font-size: 20px;
	display: block;
	border: 1px #FEF8EC solid;
	border-radius: 24px;
	width: 300px;
	margin: 24px auto;
	padding:8px;
}

.dbs-contact-icon{
	margin:0;
	padding: 0;
}
.dbs-contact-icon li {
	display: inline-block;
	list-style: none;
}

.about-overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
  color: #FEF8EC;
}


/* HOME */


.slide {
  margin-top: 140px;
  width: 35%;
  min-height: 300px;
}


.slide h2 {
  font-size: 16px;
  margin-top: -2px;
  text-align: center;
  opacity: 0;
  transition: .5s ease;
  font-weight: 600;
  

}

.slide h2 span{
  display: block;
  font-weight: 400;
  margin-top: 4px;
}

.slide:hover h2{
opacity: 1;

}


.filterButtons{
  margin-top: 24px;

}

.filterButtons{
  position: absolute;
  margin: 40px auto;
  left: 39%;

}

.filterButtons button {
  border: 1px solid rgba(54, 65, 62, 0.2);
  background: none;
  padding: 10px;
  text-transform: uppercase;
  font-family: "Outfit", Arial, sans-serif;
  color: rgba(54, 65, 62, 0.2);
  cursor: pointer;
}

.filterButtons button.active {
  background: #EE0606;
  border: none;
  color: #FDF0D5
}


/* PORTFOLIO */

.dbs-port-info{
	width: 100%;
	min-height: 963px;
	padding: 24px 12px;
}

.dbs-port-info .row{
  width: 97%;
  margin: 0 auto;
}

.dbs-port-info img{
padding: 24px;

}


.dbs-port-overview {
	width: 100%;
	padding: 12px;
}


.dbs-port-overview .row{
padding: 12px 0;

}

.dbs-port-overview p span{
	font-weight: bold;
	line-height: 0.8em;
}

.dbs-port-info h1 {
	margin: 30% 0 10%;
	font-size: 2rem;
	line-height: 0.8em;
	text-align: center;
}

.port-quote{
  font-size: 1.5em;
  margin: 24px auto;
  width: 97%;
  color: #fadb9e;
  font-weight: 600;
}

.port-quote span{
  display: block;
}

.next-project{
  width: 100%;
  height: 900px;
}

.dbs-port-banner{
	width: 100%;
	height: 100vh;
	background-attachment: fixed;
  	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
}


.dbs-port-banner.lays{
	background-image: url(../img/lays/lays-main-header.jpg);
}

.dbs-port-banner.lays-2{
	background-image: url(../img/lays/lays-versailes-10.webp);
}

.dbs-port-banner.iqos{
	background-image: url(../img/iqos/iqos-banner.jpg);
}

.dbs-port-banner.iqos-2{
	background-image: url(../img/iqos/iqos-banner-2.jpg);
}

.dbs-port-banner.tax-systems{
	background-image: url(../img/tax-systems/tax-systems-banner.jpg);
}

.dbs-port-banner.tax-systems-2{
	background-image: url(../img/tax-systems/tax-systems-header.jpg);
}

.dbs-port-banner.adidas{
	background-image: url(../img/adidas/adidas-header-2.jpg);
}

.dbs-port-banner.adidas-2{
	background-image: url(../img/adidas/adidas-banner.jpg);
}

.dbs-port-banner.cnbc{
	background-image: url(../img/cnbc/cnbc-bg.jpeg);
}

.dbs-port-banner.cnbc-2{
	background-image: url(../img/cnbc/cnbc-studio-2.jpg);
}

.dbs-port-banner.abel{
	background-image: url(../img/abel/abel-cole-banner.jpg);
}

.dbs-port-banner.abel-2{
	background-image: url(../img/abel/abel-cole-header.jpg);
}

.dbs-port-banner.three{
	background-image: url(../img/three/three-header.jpg);
}

.dbs-port-banner.three-2{
	background-image: url(../img/three/three-banner.jpg);
}

.dbs-port-banner.holiday-club{
	background-image: url(../img/holiday-club/holiday-club-main-header.jpg);
}

.dbs-port-banner.holiday-club-2{
	background-image: url(../img/holiday-club/holiday-club-header.jpg);
}

.dbs-port-banner.currys{
	background-image: url(../img/currys/curry-banner.jpg);
}

.dbs-port-banner.stella{
	background-image: url(../img/stella-artois/stella-artois-banner.jpg);
}

.dbs-port-banner.stella-2{
	background-image: url(../img/stella-artois/stella-artois-header.jpg);
}


.dbs-port-banner.avast{
	background-image: url(../img/avast/avast-banner.jpg);
}


/* MOBILE */


.dbs-mobile-thumb {
  margin: 12px 0;

}

.dbs-mobile-thumb h2 {
  font-size: 16px;
  margin-top: 24px;
  text-align: center;
}

.dbs-mobile-thumb h2 span{
  display: block;
  font-weight: 300;
}

@media only screen and (max-device-width: 1024px) {
  .dbs-port-banner{
    background-attachment: scroll;
  }
}

@media only screen and (min-device-width: 768px) {
  .dbs-port-info h1{
	font-size: 12vw;
    margin: 10% 0 5%;
  }

  .dbs-port-overview{
	width: 40%;
	margin: 0 auto;
	padding: 15% 0;
  }

  .port-quote{
  font-size: 3em;
  margin: 15% auto;
  width: 60%;
  font-weight: 600;
}

.port-quote span{
  font-size: 1.5rem;
  display: block;
}



}