/*   
Theme Name: Reuben Rink
Author: Reuben Rink
Author URI: https://www.reubenrink.com/
Version: 1.0
*/

/*Reset*/
a,hr{padding:0}a,input[type=checkbox]{vertical-align:baseline}article,aside,figure,footer,header,hgroup,hr,img.aligncenter,nav,section{display:block}abbr,address,article,aside,audio,b,blockquote,body,caption,cite,code,dd,del,dfn,div,dl,dt,em,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{border:0;outline:0;font-size:100%;vertical-align:baseline;background:0 0;margin:0;padding:0}td,td img{vertical-align:top}embed,img,object{max-width:100%;height:auto;}html{overflow-y:scroll}ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:none}a{font-size:100%;background:0 0;margin:0}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help}.alignleft,img.alignleft{float:left;margin:15px 15px 15px 0}alignright,img.alignright{float:right;margin:15px 0 15px 15px}.aligncenter,img.aligncenter{margin:15px auto}table{border-collapse:collapse;border-spacing:0;font:100%}th{vertical-align:bottom}td{font-weight:400}hr{height:1px;border:0;border-top:1px solid #ccc;margin:1em 0}input,select{vertical-align:middle}pre{white-space:pre-line;word-wrap:break-word}input,select,textarea{font:99% sans-serif}a:active,a:hover{outline:0}small{font-size:85%}strong,th{font-weight:700}sub,sup{font-size:75%;line-height:0;position:relative}sup{top:-.5em}sub{bottom:-.25em}code,kbd,pre,samp{font-family:monospace,sans-serif}.clickable,button,input[type=button],input[type=submit],label{cursor:pointer}button,input,select,textarea{margin:0}button{width:auto;overflow:visible}.ie7 img{-ms-interpolation-mode:bicubic}.ie6 html{filter:expression(document.execCommand("BackgroundImageCache",false,true))}.clearfix:after,.clearfix:before{content:"\0020";display:block;height:0;overflow:hidden}.clearfix:after{clear:both}.clearfix{zoom:1}.ie6 input,input[type=radio]{vertical-align:text-bottom}

/* Fonts */

@font-face {
    font-family: 'Sentinel';
    src: url('_/fonts/sentinel-bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Sentinel';
    src: url('_/fonts/sentinel-mediumitalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Sentinel';
    src: url('_/fonts/sentinel-semibolditalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
}

/* Styles */

body{}
body, select, input, textarea{ font-family: "Open Sans", Helvetica, Arial, sans-serif;}

p:empty{ display: none;}
.projects .projects-intro p{ margin-bottom: 0;}

a{ color: #222;}
a:hover, a:focus{ color: #555;}
.button, button{ -webkit-appearance: none; display: inline-block; background-color: #F36235; color: #fff; text-decoration: none; font-size: 18px; line-height: 18px; font-weight: 400; padding: 20px 40px;}
.button:hover, button:hover, .button:focus, button:focus{ background-color: #f79a7d; color: #fff;}
.screen-reader{ position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;}

h1, h2, h3, h4, h5, h6{ line-height: normal; font-family: "Sentinel", Georgia, Times, "Times New Roman";}

.page-wrap{}
.wrapper, .container{ width: 90%; max-width: 1200px; margin: 0 auto;}
.container{ display: flex;}
.wrapper:after{ content: ""; display: table; clear: both;}

nav ul{ list-style: none; position: relative; float:left; margin:0; padding:0;}
nav ul a{ display: block; line-height: 32px; text-decoration: none;}
nav ul li{ position: relative; float: left; margin: 0; padding: 0;}
nav ul li.current-menu-item a, .nav ul li:hover > a{}
nav ul ul{ display: none; position: absolute; top: 100%; left: 0; padding: 0; text-align: left;}
nav ul ul li{ float: none; width: 200px;}
nav ul ul a{ line-height: 120%;}
nav ul ul ul{ top: 0; left: 100%;}
nav ul li:hover > ul{ display: block;}

.header{ position: fixed; top: 0; left: 0; z-index: 99; width: 100%; padding: 25px 0; background-color: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, .5);}
.header .container{ justify-content: space-between;}
.header .logo{ max-width: 280px;}
.header .header-right{ margin-top: 3px;}
.header .nav{ font-size: 16px; line-height: 16px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; display: flex; justify-content: flex-end;}
.header .nav li{ margin-left: 30px;}
.header .nav a{ color: #32657a; padding-top: 25px;}
.header .nav a:hover, .header .nav li.current_page_item a, .header .nav li.current-menu-item a{ background-image: url(images/star.png); background-position: top center; background-size: 25px; background-repeat: no-repeat; color: #444;}
.header .nav li.current_page_item li a{ background: none;}
.header .social{ display: flex; justify-content: flex-end; margin-bottom: 15px;}
.header .social li{ margin-left: 15px;}
.header .social li a{ background-color: #32657a; color: #fff; display: flex; width: 30px; height: 30px; border-radius: 1000px; justify-content: center; align-items: center; font-size: 16px; line-height: 16px; text-decoration: none;}
.header .social li a:hover{ background-color: #444;}

.content{ font-size: 18px; line-height: 24px; font-weight: 300;}
.content p{ margin-top: 15px;}
.content ul{ list-style: disc; margin: 15px 0 0 30px;}
.content ol{ margin: 15px 0 0 30px;}
.meta{}

.sidebar{}

.navigation{ padding: 0; text-align: center;}
.navigation li a, .navigation li a:hover, .navigation li.active a, .navigation li.disabled{ color: #fff; text-decoration: none;}
.navigation li{ display: inline;}
.navigation li a, .navigation li a:hover, .navigation li.active a, .navigation li.disabled{ background-color: #666; cursor: pointer;}
.navigation li a:hover, .navigation li.active a{ background-color: #333;}

.search-form{}
.search-input{}
.search-submit{}

.footer{ background-image: url(images/bluetexture.png); background-position: center center; text-align: center; padding: 80px 0 100px; color: #fff; font-size: 14px; position: relative;}
.footer .logo{ max-width: 380px; margin-bottom: 30px;}
.footer .social{ display: flex; margin-bottom: 15px; justify-content: center; margin-bottom: 80px;}
.footer .social li{ margin: 0 12px;}
.footer .social li a{ background-color: #e7b220; color: #32657a; display: flex; width: 45px; height: 45px; border-radius: 1000px; justify-content: center; align-items: center; font-size: 16px; line-height: 16px; text-decoration: none;}
.footer .social li a:hover{ background-color: #000; color: #fff;}
.footer .top{ position: absolute; top: 0; right: 30px; background-color: #e7b220; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; font-size: 24px;}
.footer .top:before{ content: "\f106"; font-family: "Font Awesome", FontAwesome, "Font Awesome 6 Free"}
.footer .top:hover{ background-color: #000;}

.video-wrapper{ position: relative; padding-bottom: 56.25%; height: 0;}
.video-wrapper iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.hero{ background-color: #ccc;}
.hero .hero-content{ background-image: url(images/bluetexture.png); padding: 80px 0 30px;}
.hero h1{ font-size: 36px; text-transform: uppercase; text-shadow: 4px 4px 0 #000; color: #fff;}
.hero .hero-visual{ background-size: cover; background-position: center top;}
.hero .hero-visual:after{ content: ""; padding-bottom: 20%; display: block;}


/* Homepage */

.home h2{ font-size: 30px; text-transform: lowercase; font-style: italic; color: #32657a; font-weight: 400;}
.home h2 span{ font-style: normal; text-transform: uppercase; font-weight: 700;}

.content{ margin-top: 155px;}
.home .slider .single-slide:after{ content: ""; padding-bottom: 40%; display: block;}
.home .slider .slide-image{ background-size: cover; background-position: center center; display: flex; align-items: center; color: #fff;}
.home .slider .slide-image .container{ justify-content: flex-end; text-align: right;}
.home .slider .slide-headline{ text-shadow: 3px 3px 0 #000; font-family: "Sentinel", Georgia, Times, "Times New Roman"; font-weight: 700; font-size: 48px;}
.home .slider .slide-subheadline{ font-size: 21px; margin-top: 25px; font-weight: 600; text-shadow: 0px 0px 15px rgba(0,0,0,0.5);}

.home .intro{ padding: 50px 0 65px; text-align: center; font-size: 21px; line-height: 40px; font-weight: 300; background-image: url(images/intro-gray-bg.jpg); background-position: center center;}
.home .intro h1{ font-size: 48px; font-weight: 700; font-style: italic; margin-bottom: 30px; text-shadow: 3px 3px 0 #fff;}
.home .intro .wrapper{ max-width: 1000px;}
.home .intro .columns{ display: flex; justify-content: space-between; text-align: left; font-size: 18px; line-height: 36px; margin-top: 20px;}
.home .intro .columns .column{ width: 48%;}

.home .work{ padding: 100px 0; text-align: center; font-weight: 300;}
.home .work .work-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; margin: 30px 0;}
.home .work .work-grid .single-work{ background-color: #ccc; display: flex; align-items: center; justify-content: center; padding: 0 5%; position: relative;}
.home .work .work-grid .single-work:after{ content: ""; padding-bottom: 80%; display: block;}
.home .work .work-grid .single-work h3{ font-family: "Open Sans", Helvetica, Arial, sans-serif; text-transform: uppercase; color: #fff; text-shadow: 0px 0px 10px rgba(0,0,0,0.65); font-size: 20px; line-height: 24px; padding: 0 5%;}
.home .work .work-grid .single-work a{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
.home .work .button, .home .about .button{ background-color: #F36235; color: #fff; text-decoration: none; font-size: 18px; line-height: 18px; font-weight: 400; padding: 20px 40px; display: inline-flex; align-items: center;}
.home .work .button:hover, .home .about .button:hover{ background-color: #f79a7d;}
.home .work .button:after, .home .about .button:after{ content: "\203A"; margin-left: 10px; font-size: 24px; font-weight: 300;}

.home .team{ text-align: center; padding: 150px 0; background-image: url(images/cloth_texture_blk.jpg); background-position: center center; position: relative;}
.home .team:after{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(243, 98, 53, .8);}
.home .team .wrapper{ position: relative; z-index: 2; color: #fff; max-width: 960px; font-weight: 300; font-size: 16px; line-height: 30px;}
.home .team h2{ color: #fff; text-shadow: 4px 4px 0 #000;}
.home .team .button{ color: #fff; text-decoration: none; font-size: 18px; line-height: 18px; font-weight: 400; padding: 20px 40px; display: inline-flex; align-items: center; border: 1px solid #fff; margin-top: 30px;}
.home .team .button:hover{ background-color: #fff; color: #F36235;}
.home .team .button:after{ content: "\203A"; margin-left: 10px; font-size: 24px; font-weight: 300;}

.home .about .about-container{ color: #fff; text-align: center; padding: 150px 0 250px; background-image: url(images/graytexture.png);}
.home .about .about-container h2{ text-align: left; color: #fff; text-shadow: 4px 4px 0 #000;}
.home .about .about-container .about-intro em{ font-family: "Sentinel", Georgia, Times, "Times New Roman"; font-weight: 700; font-style: italic; font-size: 20px;}
.home .about .about-container .about-intro h3{ font-size: 110px; line-height: 110px; text-transform: uppercase; color: #e7b220; margin: 15px 0;}
.home .about .about-container .about-intro h4{ font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 300; text-transform: uppercase; font-size: 26px;}
.home .about .about-container .about-intro h4:before{ content: "{ "; color: #e7b220;}
.home .about .about-container .about-intro h4:after{ content: " }"; color: #e7b220;}
.home .about .about-container .single-callout{ display: flex; justify-content: space-between; flex-direction: row-reverse; margin: 45px auto 0; max-width: 1100px;}
.home .about .about-container .single-callout .callout-content, .home .about .about-container .single-callout .callout-visual{ width: 46%;}
.home .about .about-container .single-callout .callout-content{ text-align: left; font-size: 24px; font-weight: 300; line-height: 48px;}
.home .about .about-container .single-callout .callout-content p:nth-of-type(1){ margin-top: 0;}
.home .about .sign{ display: block; margin: -170px auto 60px;}
.home .about .about-secondary .wrapper{ max-width: 1100px;}
.home .about .about-secondary .columns{ display: flex; justify-content: space-between; margin-bottom: 80px;}
.home .about .about-secondary .columns .column{ width: 46%; font-size: 18px; line-height: 38px; font-weight: 300;}
.home .about .about-secondary .cta{ text-align: center; max-width: 1100px; margin: 0 auto 80px;}
.home .about .about-secondary .cta p{ font-family: "Sentinel", Georgia, Times, "Times New Roman"; font-weight: 400; font-style: italic; font-size: 28px; line-height: 42px; color: #5B5E5A;}
.home .about .about-secondary .button{ margin-top: 30px;}
.home .about .about-office{ background-size: cover; background-position: center center;}
.home .about .about-office:after{ content: ""; display: block; padding-bottom: 30%;}

.home .contact{ background-image: url(images/orangetexture.jpg); padding: 80px 0 0; color: #fff;}
.home .contact .container{ justify-content: space-between; max-width: 1100px; font-size: 18px; line-height: 31px; font-weight: 300;}
.home .contact .column{ width: 48%;}
.home .contact .column:nth-of-type(2) a{ color: #fff; text-decoration: none;}
.home .contact h2{ color: #fff; text-shadow: 4px 4px 0 #000;}
.home .contact .tel:before{ content: "\f095"; font-family: "Font Awesome", FontAwesome, "Font Awesome 6 Free"; color: #32657a; margin-right: 8px;}
.home .contact .email:before{ content: "\f0e0"; font-family: "Font Awesome", FontAwesome, "Font Awesome 6 Free"; color: #32657a; margin-right: 8px;}
.home .contact .address{ text-transform: uppercase; line-height: 26px;}
.home .contact .contact-map{ background-size: cover; background-position: center center; position: relative;}
.home .contact .contact-map a{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block;}
.home .contact .contact-map:after{ content: ""; padding-bottom: 25%; display: block; margin-top: 80px;}

/* Homepage CTA Bar */
.home .cta-container{ background-color: #F36235; background-image: url(images/orangetexture.jpg); margin-top: 0; padding: 80px 0; color: #fff; text-align: center;}
.home .cta-container h2{ font-size: 30px; text-shadow: 4px 4px 0 #000; color: #fff; text-transform: none; font-style: normal; font-weight: 700;}
.home .cta-container p{ color: #fff; max-width: 800px; margin: 15px auto 0;}
.home .cta-container .button{ border: 1px solid #fff; background-color: transparent; margin-top: 30px;}
.home .cta-container .button:hover{ background-color: #fff; color: #F36235;}


/* Services */

.services-container, .services-list{ margin-top: 60px;}
.services-container h2{ font-size: 30px;}
.services-list{ margin-bottom: 100px;}
.services-container .single-service{ display: flex; justify-content: space-between; align-items: flex-start; padding: 60px 0; border-bottom: 2px dotted #CDCED0; position: relative; text-decoration: none; color: inherit;}
.services-container .single-service:nth-last-of-type(1){ border-bottom: none;}
.services-container .single-service h3{ width: 500px; font-size: 30px; line-height: 30px;}
.services-container .single-service h4{ font-size: 21px;}
.services-container .single-service .service-intro{ width: calc(100% - 620px);}
.services-container .single-service .service-link{ width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; margin: 0 20px 0 40px; font-size: 30px; pointer-events: none; color: #F36235;}
.services-container .single-service:hover .service-link{ margin: 0 0 0 60px;}


/* How We Work */

.how-we-work h2{ text-align: center; font-style: italic; font-size: 30px; margin-bottom: 30px; color: #32657a;}
.how-we-work .cta-container h2{ color: #fff; font-style: normal; text-shadow: 4px 4px 0 #000;}
.how-we-work .cta-container{ background-color: #F36235; background-image: url(images/orangetexture.jpg); margin-top: 80px; padding: 80px 0; color: #fff; text-align: center;}
.how-we-work .cta-container p{ color: #fff; max-width: 800px; margin: 15px auto 0;}
.how-we-work .cta-container .button{ border: 1px solid #fff; background-color: transparent; color: #fff; margin-top: 30px;}
.how-we-work .cta-container .button:hover{ background-color: #fff; color: #F36235;}
.how-we-work .approach-container{ padding: 80px 0;}
.how-we-work .outside-perspective-container{ padding: 80px 0 40px; background-color: #f5f5f5;}
.how-we-work .hww-subpages-container{ padding: 40px 0 80px; counter-reset: card-counter;}
.how-we-work .hww-subpages-container h2{ text-align: center; margin-bottom: 40px;}

.subpages-grid{ display: flex; gap: 50px; justify-content: center; position: relative;}

.subpage-card{ flex: 1; padding: 40px 30px; color: #fff; display: flex; flex-direction: column; counter-increment: card-counter; position: relative;}
.subpage-card::before{ content: "0" counter(card-counter); display: block; font-size: 13px; font-weight: 700; letter-spacing: .1em; color: rgba(255,255,255,0.7); margin-bottom: 10px;}
.subpage-card:not(:last-child)::after{ content: "❯❯"; position: absolute; right: -42px; top: 50%; transform: translateY(-50%); font-size: 32px; color: #32657a; z-index: 10;}
.subpage-card h3{ color: #fff; font-size: 22px; margin-bottom: 15px;}
.subpage-card p{ color: #fff; flex-grow: 1; margin-bottom: 25px;}
.subpage-card .button{ border: 1px solid #fff; background-color: transparent; color: #fff; align-self: flex-start;}
.subpage-card-1{ background-color: #32657a;}
.subpage-card-1 .button:hover{ background-color: #fff; color: #32657a;}
.subpage-card-2{ background-color: #F36235;}
.subpage-card-2 .button:hover{ background-color: #fff; color: #F36235;}
.subpage-card-3{ background-color: #E8A020;}
.subpage-card-3 .button:hover{ background-color: #fff; color: #E8A020;}


/* Core Brand Engagements */

.core-brand-engagements h2{ text-align: center; font-style: italic; font-size: 30px; margin-bottom: 30px; color: #32657a;}
.core-brand-engagements .cbe-intro-container{ padding: 60px 0;}
.core-brand-engagements .cbe-intro-container p{ margin-top: 15px;}
.core-brand-engagements .engagement-container{ padding: 80px 0 40px;}
.core-brand-engagements .engagement-1{ background-color: #FDE8DF; border-top: 2px dotted #CDCED0; border-bottom: 2px dotted #CDCED0;}
.core-brand-engagements .engagement-2{ background-color: #E8F2F4;}
.core-brand-engagements .engagement-descriptor{ text-align: center; color: #555; font-style: normal; font-size: 18px; margin-bottom: 30px;}
.core-brand-engagements .engagement-container p{ margin-top: 15px;}
.core-brand-engagements .engagement-candidates h3,
.core-brand-engagements .engagement-deliverables h3,
.core-brand-engagements .engagement-outcomes h3{ font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #555; font-style: normal; text-align: left; margin: 30px 0 12px;}
.core-brand-engagements .engagement-candidates ul,
.core-brand-engagements .engagement-outcomes ul{ list-style: disc; margin-left: 20px;}
.core-brand-engagements .engagement-candidates ul li,
.core-brand-engagements .engagement-outcomes ul li{ margin-top: 8px;}
.core-brand-engagements .engagement-deliverables{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: stretch;}
.core-brand-engagements .engagement-deliverables h3{ grid-column: 1 / -1;}
.core-brand-engagements .engagement-deliverables h4{ font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #32657a; font-style: normal; margin: 20px 0 8px; grid-column: 1 / -1;}
.core-brand-engagements .deliverable-item{ display: flex; flex-direction: column; height: 100%; box-sizing: border-box; background-color: #fff; border: 1px solid #CDCED0; border-left: 3px solid #32657a; padding: 12px 15px;}
.core-brand-engagements .engagement-2 .deliverable-item{ border-left-color: #F36235;}
.core-brand-engagements .deliverable-item strong{ display: block; font-size: 14px; margin-bottom: 4px;}
.core-brand-engagements .deliverable-item span{ font-size: 13px; color: #555; line-height: 1.5;}
.core-brand-engagements .engagement-outcomes{ margin-top: 30px;}
.core-brand-engagements .cta-container{ background-color: #F36235; background-image: url(images/orangetexture.jpg); padding: 80px 0; margin-top: 0; color: #fff; text-align: center;}
.core-brand-engagements .cta-container h2{ color: #fff; font-style: normal; text-shadow: 4px 4px 0 #000;}
.core-brand-engagements .cta-container p{ color: #fff; max-width: 800px; margin: 15px auto 0;}
.core-brand-engagements .cta-container .button{ border: 1px solid #fff; background-color: transparent; color: #fff; margin-top: 30px;}
.core-brand-engagements .cta-container .button:hover{ background-color: #fff; color: #F36235;}


/* Enhancements */

.enhancements h2{ text-align: center; font-style: italic; font-size: 30px; margin-bottom: 30px; color: #32657a;}
.enhancements .enhancements-intro-container{ padding: 60px 0;}
.enhancements .enhancements-intro-container p{ margin-top: 15px;}
.enhancements .enhancements-grid-container{ padding: 60px 0; background-color: #f5f5f5;}
.enhancements .enhancements-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px;}
.enhancements .enhancement-card{ background-color: #fff; border: 1px solid #CDCED0; border-top: 3px solid #32657a; padding: 30px; display: flex; flex-direction: column;}
.enhancements .enhancement-card h3{ font-size: 24px; color: #32657a; font-style: italic; margin-bottom: 12px;}
.enhancements .enhancement-descriptor{ font-size: 16px; line-height: 26px; margin-bottom: 20px; flex-grow: 1;}
.enhancements .enhancement-deliverables h4{ font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #555; margin: 20px 0 10px;}
.enhancements .enhancement-deliverables ul{ list-style: disc; margin-left: 18px;}
.enhancements .enhancement-deliverables ul li{ font-size: 14px; line-height: 24px; margin-top: 5px;}
.enhancements .cta-container{ background-color: #F36235; background-image: url(images/orangetexture.jpg); padding: 80px 0; margin-top: 0; color: #fff; text-align: center;}
.enhancements .cta-container h2{ color: #fff; font-style: normal; text-shadow: 4px 4px 0 #000;}
.enhancements .cta-container p{ color: #fff; max-width: 800px; margin: 15px auto 0;}
.enhancements .cta-container .button{ border: 1px solid #fff; background-color: transparent; color: #fff; margin-top: 30px;}
.enhancements .cta-container .button:hover{ background-color: #fff; color: #F36235;}


/* Activation */

.activation h2{ text-align: center; font-style: italic; font-size: 30px; margin-bottom: 30px; color: #32657a;}
.activation .activation-intro-container{ padding: 60px 0;}
.activation .activation-intro-container p{ margin-top: 15px;}
.activation .activation-services-container{ padding: 60px 0; background-color: #f5f5f5;}
.activation .activation-services-container h2{ margin-bottom: 30px;}
.activation .services-cards{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 30px; align-items: stretch;}
.activation .service-card{ padding: 30px; color: inherit; text-decoration: none; display: flex; flex-direction: column; box-sizing: border-box; background-color: #fff; border: 1px solid #CDCED0; border-top: 3px solid #F36235;}
.activation .service-card h3{ color: #32657a; font-size: 22px; margin-bottom: 20px; flex-grow: 1; font-style: italic;}
.activation .service-link-label{ color: #F36235; font-size: 15px; font-weight: 700;}
.activation .service-card:hover{ border-top-color: #32657a;}
.activation .cta-container{ background-color: #F36235; background-image: url(images/orangetexture.jpg); padding: 80px 0; margin-top: 0; color: #fff; text-align: center;}
.activation .cta-container h2{ color: #fff; font-style: normal; text-shadow: 4px 4px 0 #000;}
.activation .cta-container p{ color: #fff; max-width: 800px; margin: 15px auto 0;}
.activation .cta-container .button{ border: 1px solid #fff; background-color: transparent; color: #fff; margin-top: 30px;}
.activation .cta-container .button:hover{ background-color: #fff; color: #F36235;}


/* How We Work Step Navigation */

.hww-step-nav{ background-color: #f5f5f5; border-top: 2px dotted #CDCED0; border-bottom: 2px dotted #CDCED0; padding: 12px 0;}
.hww-step-nav-top{ border-top: none;}
.hww-step-nav-bottom{ border-bottom: none;}
.hww-step-nav .wrapper{ display: flex; justify-content: center;}
.step-nav-list{ display: flex; align-items: center; list-style: none; margin: 0; gap: 0;}
.step-nav-item{ display: flex; align-items: center; padding: 0 30px; border-right: 1px solid #CDCED0;}
.step-nav-item:last-child{ border-right: none;}
.step-nav-item a{ display: flex; align-items: center; gap: 8px; text-decoration: none;}
.step-nav-item a:hover .step-num,
.step-nav-item a:hover .step-label{ color: #32657a;}
.step-num{ font-size: 11px; font-weight: 700; letter-spacing: .1em; color: #999; font-family: "Open Sans", Helvetica, Arial, sans-serif;}
.step-label{ font-size: 13px; font-weight: 600; font-family: "Open Sans", Helvetica, Arial, sans-serif; color: #999;}
.step-nav-current{ gap: 8px;}
.step-nav-current .step-num{ color: #32657a;}
.step-nav-current .step-label{ color: #32657a;}


/* Single Service */

.services .service-overview{ margin: 60px 0 100px;}


/* About */

.about .about-container{ padding: 60px 0 30px;}
.about .team-container .wrapper, .about .careers-container .wrapper, .about .cgb-container .wrapper{ border-top: 2px dotted #CDCED0; padding-top: 40px; margin-top: 40px;}
.about .about-container h2, .about .team-container h2, .about .careers-container h2, .about .cgb-container h2{ text-align: center; font-style: italic; font-size: 30px; margin-bottom: 30px; color: #32657a;}
.about .team-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 30px;}
.about .team-grid .team-headshot{ background-size: cover; background-position: center center; margin-bottom: 15px;}
.about .team-grid .team-headshot:after{ content: ""; padding-bottom: 56.25%; display: block;}
.about .team-grid a{ text-decoration: none;}
.about .team-grid h3{ font-size: 28px; line-height: 28px; text-transform: uppercase; color: #F36235;}
.about .team-grid h3 span{ display: block; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 16px; color: #000;}
.about .team-grid h4{ font-family: "Open Sans", Helvetica, Arial, sans-serif; font-style: italic; font-size: 15px; font-weight: normal; margin-top: 10px;}
.about .careers-container, .about .cgb-container, .about .cta-container{ text-align: center;}
.about .careers-container .button, .about .cgb-container .button, .about .cta-container .button{ margin-top: 30px;}
.about .careers-container p, .about .cgb-container p, .about .cta-container p{ max-width: 800px; margin: 15px auto 0;}
.about .cta-container{ background-color: #F36235; background-image: url(images/orangetexture.jpg); margin-top: 80px; padding: 80px 0; color: #fff;}
.about .cta-container .button{ border: 1px solid #fff;}
.about .cta-container h2{ font-size: 30px; text-shadow: 4px 4px 0 #000;}


/* Single Staff */

.single-staff .staff-bio{ margin: 60px 0 100px; font-size: 18px; line-height: 28px;}
.single-staff .staff-bio .container{ justify-content: space-between;}
.single-staff .staff-bio .column{ width: 46%;}
.single-staff .staff-bio h2{ color: #F36235; font-size: 48px; text-transform: uppercase;}
.single-staff .staff-bio h3{ color: #777; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: normal; font-style: italic; font-size: 18px; margin-bottom: 30px;}
.single-staff .staff-links{ margin-top: 60px; display: flex;}
.single-staff .staff-links .single-link{ width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; margin: 0 20px 0 0;}
.single-staff .team-collage{ display: flex; flex-wrap: wrap; gap: 10px;}
.single-staff .collage-item{ background-size: cover; background-position: center; overflow: hidden;}
.single-staff .collage-feature{ width: 100%; aspect-ratio: 4 / 3;}
.single-staff .collage-square{ width: calc(50% - 5px); aspect-ratio: 1 / 1;}


/* Archive Project */

.projects .projects-intro{ padding: 60px 0;}
.projects .projects-intro h2{ text-align: center; font-style: italic; font-size: 30px; margin-bottom: 30px; color: #32657a;}
.project-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; margin: 30px 0;}
.project-grid .single-project{ background-color: #ccc; display: flex; align-items: center; justify-content: center; padding: 0 5%; position: relative; background-size: cover; background-position: center center;}
.project-grid .single-project:after{ content: ""; padding-bottom: 50%; display: block;}
.project-grid .single-project h3{ font-family: "Open Sans", Helvetica, Arial, sans-serif; text-transform: uppercase; color: #fff; text-shadow: 0px 0px 10px rgba(0,0,0,0.65); font-size: 20px; line-height: 24px; text-align: center; padding: 0 5%;}
.project-grid .single-project a{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
.project-grid .single-project a{ color: #fff; text-decoration: none;}
.projects .projects-container h2, .projects .clients-container h2{ text-align: center; font-style: italic; font-size: 30px; margin-bottom: 30px; color: #b44b14;}
.projects .clients-container{ text-align: center; margin-bottom: 100px;}
.projects .clients-container .wrapper{ border-top: 2px dotted #CDCED0; padding-top: 60px; margin-top: 40px;}
.clients{display:grid;gap:2rem; margin: 30px 0 100px;}
.client-logos{position:relative;overflow:hidden;width:100%;padding:10px 0;}
.logo-track{display:flex;align-items:center;flex-wrap:nowrap;gap:4rem;will-change:transform;}
.single-logo{flex:0 0 auto;display:flex;align-items:center;justify-content:center;min-width:120px;height:80px;}
.single-logo img{max-height:60px;max-width:160px;width:auto;height:auto;display:block;object-fit:contain;vertical-align:middle;filter:grayscale(100%);opacity:.8;}
.filters{ text-align: center;}
.filters .facetwp-type-radio{ display: flex; justify-content: center; color: #32657a; font-size: 14px; line-height: 14px; text-transform: uppercase; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 700;}
.filters .facetwp-radio{ background: none !important; margin: 0 10px; padding: 0;}
.filters .facetwp-counter{ display: none;}
.projects .facetwp-type-pager{ text-align: center;}
.projects .facetwp-type-pager button{ border: none;}


/* Single Project */

.single-project .project-image{ margin: 45px 0;}
.single-project .columns{ margin-bottom: 100px;}
.single-project .columns .column{ box-sizing: border-box;}
.single-project .columns .column:nth-of-type(1){ width: 63.667%; padding-right: 3%; border-right: 2px dotted #CDCED0; font-size: 18px; line-height: 28px;}
.single-project .columns .column:nth-of-type(2){ width: 30.333%; padding-left: 3%;}
.single-project .project-headline{ color: #b44b14; font-style: italic; font-size: 30px;}
.single-project .columns .column:nth-of-type(2) h3{ color: #32657a; font-size: 18px; text-transform: uppercase; font-family: "Open Sans", Helvetica, Arial, sans-serif;}
.single-project .columns .column:nth-of-type(2) ul{ margin: 15px 0 0; list-style: none; text-transform: uppercase; font-size: 14px; line-height: 30px;}


/* Contact */

.contact .contact-container{ margin: 60px 0 100px;}
.contact .contact-container h2{ color: #32657a; font-style: italic; font-size: 30px; margin-bottom: 20px;}
.contact .contact-container .container{ justify-content: space-between;}
.contact .contact-container .column{ width: 46%; box-sizing: border-box;}
.contact .contact-container .column:nth-of-type(2){ margin-top: 45px;}
.contact .gform_body input, .contact .gform_body textarea{ padding: 15px !important; border: none; background: none; border: 1px solid #CDCED0;}
.contact .gform_body select{ background-color: #fff; border: 1px solid #CDCED0; padding: 15px !important; width: 100%; -webkit-appearance: none; appearance: none; color: #757575;}
.contact .gform_footer .button{ border: none;}
.contact .contact-container .column:nth-of-type(2) a{ text-decoration: none;}
.contact .tel:before{ content: "\f095"; font-family: "Font Awesome", FontAwesome, "Font Awesome 6 Free"; color: #32657a; margin-right: 8px;}
.contact .email:before{ content: "\f0e0"; font-family: "Font Awesome", FontAwesome, "Font Awesome 6 Free"; color: #32657a; margin-right: 8px;}
.contact .address{ text-transform: uppercase; line-height: 26px;}


/* Blog */

.blog .blog-container .wrapper{ max-width: 960px;}
.blog .post-intro{ display: flex; justify-content: space-between; align-items: center; margin: 45px 0 30px;}
.blog .post-intro img{ width: 25%; max-height: 180px; object-fit: cover;}
.blog .post-intro .post-headlines{ width: 70%;}
.blog .post-intro .post-headlines h2{ font-size: 28px; line-height: 32px;}
.blog .post-intro .post-headlines h2 a{ color: #b44b14; text-decoration: none; font-style: italic;}
.meta{ display: flex; font-size: 14px; font-style: italic; font-weight: 400; margin-top: 10px;}
.meta p{ margin: 0;}
.meta ul{ list-style: none; margin: 0;}
.meta .time:after, .meta .post-author:before{ content: "/"; margin: 0 10px;}
.blog .post-intro .post-author{ color: #32657a;}
.blog article{ padding-bottom: 30px; margin-bottom: 30px; border-top: 2px dotted #CDCED0; font-size: 16px; line-height: 26px;}
.blog article:nth-of-type(1){ border-top: none;}
.blog article .button{ margin-top: 30px;}
.blog .facetwp-pager{ margin: 45px 0 100px;}
.blog .filters{ margin-top: 45px;}

.single-post article{ margin: 60px 0 100px; font-size: 18px; line-height: 32px;}
.single-post article .meta{ margin-bottom: 30px;}
.single-post article .wrapper{ max-width: 960px;}
.single-post article h1{ font-size: 28px; line-height: 32px; color: #b44b14; font-style: italic; font-weight: normal;}


/* Careers */

.careers h2{ text-align: center; font-style: italic; font-size: 30px; margin-bottom: 30px; color: #32657a;}
.careers .careers-intro-container{ padding: 60px 0; text-align: center;}
.careers .careers-intro-container p{ margin-top: 15px; max-width: 900px; margin-left: auto; margin-right: auto;}
.careers .careers-form-container{ padding: 60px 0 100px;}
.careers .careers-form-container .wrapper{ max-width: 900px;}
.careers .gform_body input, .careers .gform_body textarea{ padding: 15px !important; border: none; background: none; border: 1px solid #CDCED0;}
.careers .gform_body select{ background-color: #fff; border: 1px solid #CDCED0; padding: 15px !important; width: 100%; -webkit-appearance: none; appearance: none; color: #999;}
.careers .gform_footer .button{ border: none;}
.careers .cta-container{ background-color: #F36235; background-image: url(images/orangetexture.jpg); padding: 80px 0; margin-top: 0; color: #fff; text-align: center;}
.careers .cta-container h2{ color: #fff; font-style: normal; text-shadow: 4px 4px 0 #000;}
.careers .cta-container p{ color: #fff; max-width: 800px; margin: 15px auto 0;}
.careers .cta-container .button{ border: 1px solid #fff; background-color: transparent; color: #fff; margin-top: 30px;}
.careers .cta-container .button:hover{ background-color: #fff; color: #F36235;}


/* Media queries */

@media (max-width: 900px) {
	
    /* Global overflow fix */
    html, body{ overflow-x: hidden;}
    .wrapper, .container{ width: 95%; max-width: 100%; box-sizing: border-box;}
    img{ max-width: 100%; height: auto;}
	.header .logo{ max-width: 220px;}
	.content{ margin-top: 130px;}

    /* Homepage Our Story */
    .home .about .about-container .about-intro h3{ font-size: 45px; line-height: 50px;}
    .home .about .about-container .about-intro h4{ font-size: 18px;}
    .home .about .about-container{ padding: 60px 0 150px;}
    .home .about .sign{ margin: -100px auto 40px;}
    .home .about .about-container .single-callout{ flex-direction: column-reverse;}
    .home .about .about-container .single-callout .callout-content,
    .home .about .about-container .single-callout .callout-visual{ width: 100%;}
    .home .about .about-container .single-callout .callout-content{ font-size: 18px; line-height: 32px;}
    .home .about .about-secondary .columns{ flex-direction: column;}
    .home .about .about-secondary .columns .column{ width: 100%;}
    .home .contact .container{ flex-direction: column;}
    .home .contact .column{ width: 100%;}

    /* How We Work cards */
    .subpages-grid{ flex-direction: column; gap: 20px; width: 100%;}
    .subpage-card{ width: 100%; box-sizing: border-box;}
    .subpage-card:not(:last-child)::after{ display: none;}

    /* About team grid */
    .about .team-grid{ grid-template-columns: repeat(2, 1fr) !important;}

    /* Core Brand Engagements deliverables */
    .core-brand-engagements .engagement-deliverables{ grid-template-columns: 1fr;}

    /* Enhancements grid */
    .enhancements .enhancements-grid{ grid-template-columns: 1fr;}
    .enhancements .enhancement-card{ width: 100%; box-sizing: border-box;}

    /* Activation services */
    .activation .services-cards{ grid-template-columns: repeat(2, 1fr);}

    /* Contact */
    .contact .contact-container .container{ flex-direction: column;}
    .contact .contact-container .column{ width: 100% !important; box-sizing: border-box; padding: 0;}
    .contact .contact-container .column:nth-of-type(2){ margin-top: 30px;}

    /* Project grid */
    .project-grid{ grid-template-columns: repeat(2, 1fr);}
    .filters .facetwp-type-radio{ flex-wrap: wrap; gap: 10px; justify-content: center; padding: 0 10px;}
    .filters .facetwp-radio{ margin: 5px !important;}
    .projects .projects-intro .wrapper{ width: 100%; box-sizing: border-box; padding: 0 20px;}
    .projects .projects-intro p{ max-width: 100%; word-break: normal; overflow-wrap: break-word; -webkit-hyphens: none; hyphens: none;}

    /* Single staff */
    .single-staff .staff-bio .container{ flex-direction: column;}
    .single-staff .staff-bio .column{ width: 100%;}
    .single-staff .collage-square{ width: 100%;}

    /* Blog/Insights */
    .blog .post-intro{ flex-direction: column;}
    .blog .post-intro img{ width: 100%;}
    .blog .post-intro .post-headlines{ width: 100%;}
    .facetwp-facet-post_categories{ display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0 10px;}
    .facetwp-radio{ margin: 0 !important; white-space: nowrap;}

    /* Single project */
    .single-project .columns{ flex-direction: column;}
    .single-project .columns .column:nth-of-type(1){ width: 100%; padding-right: 0; border-right: none; border-bottom: 2px dotted #CDCED0; padding-bottom: 30px;}
    .single-project .columns .column:nth-of-type(2){ width: 100%; padding-left: 0; margin-top: 30px;}

    /* Services */
    .services-container .single-service{ flex-direction: column;}
    .services-container .single-service h3{ width: 100%;}
    .services-container .single-service .service-intro{ width: 100%;}

    /* Step nav */
    .step-nav-list{ justify-content: space-between; width: 100%;}
    .step-nav-item{ display: none; padding: 0 15px;}
    .step-nav-current{ display: none !important;}
    .hww-step-nav .step-nav-item{ border-right: none;}

    /* Page 1 - show item 2 only, centered */
    .core-brand-engagements .step-nav-item:nth-child(2){ display: flex; margin: 0 auto;}
    .core-brand-engagements .step-nav-item:nth-child(2) .step-label::after{ content: " ❯❯";}

    /* Shorten step nav labels on mobile */
    .enhancements .step-nav-item:nth-child(1) .step-label{ font-size: 0; line-height: 0;}
    .enhancements .step-nav-item:nth-child(1) .step-label::after{ content: "Engagements"; font-size: 13px; font-weight: 600; line-height: normal;}

    /* Page 2 - show items 1 and 3 */
    .enhancements .step-nav-list{ justify-content: space-between;}
    .enhancements .step-nav-item:nth-child(1){ display: flex;}
    .enhancements .step-nav-item:nth-child(3){ display: flex;}
    .enhancements .step-nav-item:nth-child(1) .step-num::before{ content: "❮❮ ";}
    .enhancements .step-nav-item:nth-child(3) .step-label::after{ content: " ❯❯";}

    /* Page 3 - show item 2 only, centered */
    .activation .step-nav-item:nth-child(2){ display: flex; margin: 0 auto;}
    .activation .step-nav-item:nth-child(2) .step-num::before{ content: "❮❮ ";}
}

@media (max-width: 500px) {
    .activation .services-cards{ grid-template-columns: 1fr;}
    .about .team-grid{ grid-template-columns: 1fr !important;}
    .project-grid{ grid-template-columns: 1fr;}
}