/*
	==========================================================================
	Green Creative Agency, v0.1
	==========================================================================
	Imported Fonts
	termina | 400, 500 | normal;
	roboto-condensed | 400, 700 | normal, italic
	==========================================================================
*/

/* ==========================================================================
   Reset
   ========================================================================== */
	*, *::before, *::after { box-sizing: border-box; }
	html { min-width:320px; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
	body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; }
	ul, ol { list-style: none; }
	h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
	a { color: inherit; text-decoration: none; }
	img, picture, video, canvas, svg { display: block; max-width: 100%; }
	input, button, textarea, select { font: inherit; color: inherit; }
	button { background: none; border: none; padding: 0; cursor: pointer; }
	table { border-collapse: collapse; border-spacing: 0; }

/* ==========================================================================
   Base
   ========================================================================== */
	body { font-family: "roboto-condensed", sans-serif; font-weight: 400; font-style: normal; line-height: 1.4; color: #58595b; background-color: #ffffff; }
	.heading-lg, .section-title, .intro-statement { font-family: "termina", "roboto-condensed", sans-serif; }
	img.width-full { width:100%; height:auto; }
	.logo-mark img { display: block; }

/* ==========================================================================
   Layout — full-bleed sections, 1200px centered content column
   ========================================================================== */
	.section, .footer { width: 100%; }
	.section-texture { color: #ffffff; } 
	.container { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 30px; padding-right: 30px; }

/* ==========================================================================
   Grid
   ========================================================================== */
	.row { display: flex; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; }
	.col { padding-left: 15px; padding-right: 15px; }
	.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { flex: 0 0 100%; max-width: 100%; }
	.col-offset-1 { margin-left: 0; }

/* ==========================================================================
   Sections
   ========================================================================== */
	.section { position: relative; background-position: center center; background-size: cover; background-attachment: scroll; }
	.section .overlay { position: absolute; z-index: 10; top:0; bottom:0; left:0; right:0; width:100%; }
	.section .rule { position: absolute; z-index: 10; top:0; left:0; right:0; width:100%; height:10px; background-color: rgba(229, 50, 34, 0.75); }
	.section .container { padding-top: 50px; padding-bottom: 50px; }
	.section-title { text-align: center; font-size: 1.5rem; font-weight:400; text-transform: uppercase; letter-spacing: 0.05em; background-image: url('/assets/images/bg-wave-purpleorange.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
	.section-lead { max-width: 400px; margin: 0 auto 30px; text-align: center; }

	/* Split sections */
	.split { align-items: flex-start; }
	.split-body { margin-top: 30px; } 
	.heading-lg { font-size: 1.6rem; line-height: 1.1; }
	.panel { padding: 30px; border-radius: 6px; }
	.section-texture .panel { position: relative; border-bottom-right-radius:80px; }
	.section-texture .panel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image:url(/assets/images/bg-panel-purple.jpg); background-position:bottom left; background-size:cover; mix-blend-mode: multiply; z-index: 1; border-bottom-right-radius:80px; }
	.section-texture .panel p { position: relative; z-index: 2; color: white; font-size: 1.15em; }
	.panel > p + p { margin-top: 1em; }
	/* Plain panel (section with no background image): dark text on a light fill */
	.section:not(.section-texture) .panel { background-color: #f2f2f2; border-bottom-right-radius: 80px; }

	/* Logo */
	.section-logo { height:130px; background-position: bottom center; background-size:768px auto; background-attachment: scroll; }
	.section-logo .container { display:flex; justify-content: center; align-items: center; height:100%; }
	.logo-mark { width: 90px; margin:0 auto;  }

	/* Intro */
	.section-intro { text-align: center; background-position: top center; background-size:768px auto; background-attachment: scroll; }
	.intro-statement { max-width: 760px; margin: 0 auto; font-size: 1.75rem; line-height: 1.2; text-transform: uppercase; }

	/* Media */
	.media { display: block; }
	.media-16x9 { aspect-ratio: 16 / 9; }
	.media-avatar { max-width: 270px; margin: 0 auto; aspect-ratio: 1 / 1; border-radius: 50%; }

	/* Featured work + team grids */
	.grid { row-gap: 40px; padding-top:20px; }
	.work-item { cursor: default; }
	.work-caption { font-size:0.9em; margin-top: 12px; text-transform: uppercase; letter-spacing: 0.03em; }
	.work-caption strong { color: #ff5900; }
	.work-caption span { font-family: "termina", "roboto-condensed", sans-serif; font-weight:500; }
	.work-media { display:none; }
	.work-content { display:block; }
	.work-content img { width:100%; height:auto; }
	/* Responsive 16:9 wrapper for oEmbed (Vimeo/YouTube) iframes */
	.embed-responsive { position: relative; padding-top: 56.25%; }
	.embed-responsive iframe, .embed-responsive object, .embed-responsive embed, .embed-responsive video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
	.section-work .work-item:nth-child(n+4) { display: none; }
	.section-work .grid.is-expanded .work-item:nth-child(n+4) { display: block; }
	.work-more { margin-top: 40px; text-align: center; }
	.work-more.is-hidden { display: none; }
	.btn-show-more { display: inline-block; padding: 14px 36px; font-family: "termina", "roboto-condensed", sans-serif; font-weight: 500; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: #ffffff;  background-image: url('/assets/images/bg-wave-purpleorange.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; border-radius: 4px; cursor: pointer; }
	.team-member { text-align: center; }
	.team-name { font-family: "termina", "roboto-condensed", sans-serif; margin-top: 18px; font-size: 1rem; font-weight:500; text-transform: uppercase; }
	.team-role { margin-top: 4px; color: #ff5900; }
	.team-bio { margin-top: 10px; }

	/* Contact */
	.section-contact { text-align: center; }
	.contact-email { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
	.contact-email:hover,
	.contact-email:focus { color: #3A004C; }
	.social { display: flex; justify-content: center; gap: 20px; margin-top: 30px; }
	/* The SVG icon is used as a mask; background-color is what we actually see,
	   so the same asset recolors to white (default) and #3A004C (hover/focus). */
	.social-item a { display: block; width: 36px; height: 36px; background-color: #fff; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
	.social-item a:hover,
	.social-item a:focus { background-color: #3A004C; }

	/* Footer */
	.footer { padding-top: 60px; padding-bottom: 60px; text-align: center; }
	.logo-mark-sm { width: 90px; margin:0 auto; }

	/* Scroll reveal */
	.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.7s ease, transform 0.7s ease; }
	.reveal.is-revealed { opacity: 1; transform: translateY(0); }
	.reveal--delay-1 { transition-delay: 0.12s; }
	.reveal--delay-2 { transition-delay: 0.24s; }
	.reveal--delay-3 { transition-delay: 0.36s; }
	@media (prefers-reduced-motion: reduce) {
		.reveal { opacity: 1; transform: none; transition: none; }
	}

/* ==========================================================================
   Lightbox (work items)
   ========================================================================== */
	.lightbox { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 40px 30px; background-color: rgba(0, 0, 0, 0.75); }
	.lightbox.is-open { display: flex; }
	.lightbox-window { position: relative; width: 100%; max-width: 900px; padding: 20px; background-color: #ffffff; border-radius: 6px; }
	.lightbox-content { max-height: calc(100vh - 120px); overflow-y: auto; }
	.lightbox-content img { width:auto; height:100%; height:calc(100vh - 120px); margin:0 auto; }
	.lightbox-close { position: absolute; top: -15px; right: -15px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; background-color: #e53222; color: #ffffff; font-size: 26px; line-height: 1; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); }

/* ==========================================================================
   Responsive
   ========================================================================== */

	/* sm  */
	@media (min-width: 544px) {
		.team-member { flex: 0 0 50%; max-width: 50%; }
	}

	/* md  */
	@media (min-width: 768px) {
		.col-1  { flex: 0 0 8.333333%;  max-width: 8.333333%; }
		.col-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
		.col-3  { flex: 0 0 25%;        max-width: 25%; }
		.col-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
		.col-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
		.col-6  { flex: 0 0 50%;        max-width: 50%; }
		.col-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
		.col-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
		.col-9  { flex: 0 0 75%;        max-width: 75%; }
		.col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
		.col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
		.col-12 { flex: 0 0 100%;       max-width: 100%; }
		.col-offset-1 { margin-left: 8.333333%; }

		.heading-lg, .intro-statement { font-size: 2.35rem; }
		.section-title { font-size: 3.5rem; }

		.section .container { padding-top: 80px; padding-bottom: 80px; }
		.split { width:86%; margin:0 auto; }
		.split-body { margin-top: 0; }
		.section-texture .panel p { font-size: 1.25em; }

		.section-logo { height:320px; background-size:992px auto; }
		.logo-mark { width: 135px; }
		.section-intro { background-size:992px auto; }
		
		.work-item { flex: 0 0 50%; max-width: 50%; cursor: pointer; }
		.work-media { display:block; }
		.work-content { display:none; }
		.work-item:hover .work-caption span,
		.work-item:focus .work-caption span { color:#ff5900; }

		.section-work .work-item:nth-child(n+4) { display: block; }
		.work-more { display: none; }
		.team-member { flex: 0 0 50%; max-width: 50%; }

		.contact-email { font-size: 1.25rem; }

		.logo-mark-sm { width: 105px; }
	}

	/* lg */
	@media (min-width: 992px) {
		.section-logo { height:395px; background-size:1200px auto; }
		.logo-mark { width: 175px; }
		.section-intro { background-size:1200px auto; }
		.section-title { font-size: 4.5rem; }

		.work-item { flex: 0 0 33.333333%; max-width: 33.333333%; }
		.team-member { flex: 0 0 25%; max-width: 25%; }
		.contact-email { font-size: 1.5rem; }

		.logo-mark-sm { width: 115px; }
	}

	/* xl */
	@media (min-width: 1200px) {
		.section-logo { height:470px; background-size:1420px auto; }
		.logo-mark { width: 230px; }
		.section-intro { background-size:1420px auto; }
		.section-title { font-size: 5.75rem; }
		.intro-statement { font-size: 2.75rem; }
		.heading-lg { font-size: 2.65rem; }
		.contact-email { font-size: 1.75rem; }
		.logo-mark-sm { width: 126px; }

	}

	/* 2xl */
	@media (min-width: 1440px) {
		.section-logo { height:640px; background-size:2000px auto; }
		.section-intro { background-size:2000px auto; }

	}

	/* 3xl */
	@media (min-width: 2000px) {
		.section-logo { background-size:100% auto; }
		.section-intro { background-size:100% auto; }

	}


/* ==========================================================================
   Animations
   ========================================================================== */
	a,
	button,
	input,
	a svg,
	.work-item .work-caption span {
		-moz-transition-property:opacity, color, background-color, fill;
		-webkit-transition-property:opacity, color, background-color, fill;
		-ms-transition-property:opacity, color, background-color, fill;
		transition-property:opacity, color, background-color, fill;
		-moz-transition-duration:0.25s;
		-webkit-transition-duration:0.25s;
		-ms-transition-duration:0.25s;
		transition-duration:0.25s;
		-moz-transition-timing-function:ease-out;
		-webkit-transition-timing-function:ease-out;
		-ms-transition-timing-function:ease-out;
		transition-timing-function:ease-out;
	}

	a:hover,
	button:hover,
	input:hover,
	a:hover svg,
	.work-item:hover .work-caption span {
		-moz-transition-duration:0s;
		-webkit-transition-duration:0s;
		-ms-transition-duration:0s;
		transition-duration:0s;
	}