/*
Theme Name: Case by Case Architecture
Author: Sandlapper Creative
Author URI: https://www.sandlappercreative.com
Version: 1.0
*/

*,*::before,*::after{box-sizing:border-box;}html{overflow-y:scroll;font-size:100%;}body{margin:0;padding:0;line-height:1.5;}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,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,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:transparent;margin:0;padding:0;}article,aside,figure,footer,header,main,nav,section{display:block;}ul{list-style:none;}ol{margin-left:1.5em;}blockquote,q{quotes:none;}blockquote::before,blockquote::after,q::before,q::after{content:none;}a{font-size:100%;background:transparent;margin:0;padding:0;vertical-align:baseline;}a:hover,a:active{outline:0;}del{text-decoration:line-through;}abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help;}img,video,svg{max-width:100%;height:auto;display:block;}td,td img{vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}th{vertical-align:bottom;font-weight:700;}td{font-weight:400;}hr{height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;}pre{white-space:pre-wrap;word-wrap:break-word;}code,kbd,pre,samp{font-family:monospace,sans-serif;}small{font-size:85%;}strong{font-weight:700;}sub,sup{font-size:75%;line-height:0;position:relative;}sup{top:-0.5em;}sub{bottom:-0.25em;}input,button,select,textarea{margin:0;font:inherit;-webkit-appearance:none;appearance:none;}input,select{vertical-align:middle;}button,input[type="button"],input[type="submit"]{cursor:pointer;width:auto;overflow:visible;}label{cursor:pointer;}textarea{overflow:auto;vertical-align:top;}.alignleft,img.alignleft{float:left;margin:15px 15px 15px 0;}.alignright,img.alignright{float:right;margin:15px 0 15px 15px;}.aligncenter,img.aligncenter{display:block;margin:15px auto;}

:root{ --rust: #a64b2a; --rust-dark: #893c20; --rust-light: #cf7d56; --cream: #f6f1e8; --ink: #2c2620; --body: #6b6560; --muted: #8a8073; --line: #e3ddd0;}

body{ font-family: 'Inter', sans-serif; color: var(--body); background-color: #fff; font-size: 21px; line-height: 36px;}
body, select, input, textarea{ font-family: 'Inter', sans-serif;}
.page-wrap{ overflow-x: clip;}

a{ color: var(--rust);}
a:hover, a:focus{ color: var(--rust-dark);}
.button, button{ display: inline-block; cursor: pointer;}
.screen-reader{ position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;}
:focus{ outline: 2px solid var(--rust); outline-offset: 2px;}
:focus:not(:focus-visible){ outline: none;}
:focus-visible{ outline: 2px solid var(--rust); outline-offset: 2px;}
a, img, .button, button{ transition: all .3s ease 0s;}

h1, h2, h3, h4, h5, h6{ line-height: 1.2; font-family: 'Lora', serif; font-weight: 400; color: var(--ink);}
h2{ font-size: 60px; line-height: 64px;}
p{ margin-top: 1em;}
p:first-child{ margin-top: 0;}

.wrapper, .container{ width: 100%; padding: 0 30px;}
.container{ display: flex;}
.wrapper:after{ content: ""; display: table; clear: both;}

/* Header */
.header{ padding: 22px 0; background: #fff; border-bottom: 1px solid var(--line);}
.header .container{ align-items: center; justify-content: space-between; gap: 30px;}
.header .logo-link{ flex-shrink: 0;}
.header .logo{ width: auto; max-height: 52px;}
.header .nav{ margin: 0 auto;}
.header-button{ flex-shrink: 0;}

/* Button */
.button{ padding: 14px 30px; background-color: var(--rust); color: #fff; text-decoration: none; border-radius: 2px; font-weight: 600; font-family: 'Inter', sans-serif; letter-spacing: .02em; font-size: .92rem; line-height: 1.2;}
.button:hover, .button:focus{ background-color: var(--rust-dark); color: #fff;}

/* Navigation */
nav ul{ list-style: none; position: relative; float: left; margin: 0; padding: 0;}
nav ul a{ display: block; text-decoration: none;}
nav ul li{ position: relative; float: left; margin: 0; padding: 0;}
.header .nav a{ padding: 10px 16px; color: var(--ink); font-size: 15px; font-weight: 600;}
.header .nav li.current-menu-item > a, .header .nav li:hover > a{ color: var(--rust);}
nav ul ul{ display: none; position: absolute; top: 100%; left: 0; padding: 0; background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.1); z-index: 50;}
nav ul ul li{ float: none; width: 220px;}
nav ul ul a{ padding: 12px 16px; border-bottom: 1px solid var(--line);}
nav ul ul ul{ top: 0; left: 100%;}
nav ul li:hover > ul{ display: block;}

.nav-toggle{ display: none; flex-direction: column; justify-content: space-between; width: 28px; height: 20px; background: none; border: none; padding: 0; cursor: pointer;}
.nav-toggle span{ display: block; width: 100%; height: 2px; background: currentColor; transition: transform .3s ease, opacity .3s ease;}
.nav-toggle.is-open span:nth-child(1){ transform: translateY(9px) rotate(45deg);}
.nav-toggle.is-open span:nth-child(2){ opacity: 0;}
.nav-toggle.is-open span:nth-child(3){ transform: translateY(-9px) rotate(-45deg);}

.mobile-overlay{ display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 998; opacity: 0; pointer-events: none; transition: opacity .3s ease;}
.mobile-overlay.is-visible{ opacity: 1; pointer-events: auto;}
.mobile-nav{ position: fixed; top: 0; right: -320px; width: 300px; max-width: 85vw; height: 100%; background: #fff; z-index: 999; padding: 20px; overflow-y: auto; transition: right .3s ease; box-shadow: -2px 0 10px rgba(0,0,0,.15);}
.mobile-nav.is-open{ right: 0;}
.mobile-nav-header{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;}
.mobile-nav-header .logo{ max-width: 180px; height: auto;}
.mobile-nav nav ul{ float: none;}
.mobile-nav nav ul li{ float: none;}
.mobile-nav nav ul ul{ position: static; display: block; width: auto; box-shadow: none;}
.mobile-nav nav ul a{ padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none;}
.mobile-nav nav ul a:hover, .mobile-nav nav ul a:focus, .mobile-nav nav ul li.current-menu-item > a{ color: var(--rust);}
.mobile-nav .search-form{ margin-top: 20px;}
.mobile-cta{ display: block; margin-top: 24px; text-align: center;}
.nav-close{ background: none; border: none; font-size: 1.5rem; line-height: 1; padding: 0; cursor: pointer; color: var(--ink);}
.nav-toggle:hover, .nav-toggle:focus{ background: none;}
.nav-close:hover, .nav-close:focus{ background: none; color: var(--rust);}
body.nav-open{ overflow: hidden;}

.content p:first-child{ margin-top: 0;}
.content ul{ list-style: disc; margin: 15px 0 0 30px;}
.content ol{ margin: 15px 0 0 30px;}
.content img{ max-width: 100%; height: auto;}

.navigation{ padding: 0; text-align: center;}
.navigation ul{ list-style: none; margin: 0; padding: 0;}
.navigation li{ display: inline-block;}
.navigation li a, .navigation li span{ display: inline-block; padding: 6px 12px; text-decoration: none; color: #fff; background-color: var(--rust); cursor: pointer;}
.navigation li a:hover, .navigation li span.current{ background-color: var(--rust-dark);}
.navigation li span.dots{ background: none; color: var(--muted);}

.load-more-wrap{ text-align: center; margin-top: 60px;}
.load-more-btn{ padding: 14px 36px; cursor: pointer;}
.load-more-btn:disabled{ opacity: 0.6; cursor: default;}

.search-results .wrapper, .error404 .wrapper{ padding: 60px 0;}
.search-results .page-title, .error404 .page-title{ margin-bottom: 30px;}
.search-results article{ margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--line);}
.search-results article:first-child{ border-top: 0; padding-top: 0; margin-top: 0;}
.search-results .entry{ margin-top: 10px;}
.search-form{ display: flex; gap: 8px; margin-top: 20px;}
.search-input{ flex: 1; padding: 10px 14px; border: 1px solid #ccc; border-radius: 3px; font-size: 1rem;}
.search-submit{ padding: 10px 20px; cursor: pointer;}

/* Footer */
.footer{ padding: 44px 0; text-align: center; background: #fff; color: #6b6560;}
.footer .container{ flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap;}
.footer p{ margin: 0; font-size: 14px;}
.footer .credit{ color: #6b6560; text-decoration: none;}
.footer .credit:hover, .footer .credit:focus{ color: var(--rust); text-decoration: underline;}

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

.error404 .content{ padding: 60px 0 100px; text-align: center;}


/* ===== Homepage Sections ===== */
.eyebrow{ text-transform: uppercase; letter-spacing: .2em; font-size: .875rem; font-weight: 700; color: var(--rust); margin-bottom: .9em;}
.content .slick-dots{ list-style: none; margin: 0; padding: 0;}

/* Hero */
.hero{ position: relative; min-height: max(86vh, 680px); display: flex; align-items: center; overflow: hidden; color: #fff; text-align: center; margin-bottom: 60px; background: rgba(46,46,42,1);}
.hero-slider{ position: absolute !important; inset: 0 !important; z-index: 1; margin-bottom: 0 !important;}
.hero-slider .slick-list, .hero-slider .slick-track, .hero-slider .slick-slide{ height: 100% !important;}
.hero-slider:not(.slick-initialized) .hero-slide{ display: none;}
.hero-slider:not(.slick-initialized) .hero-slide:first-child{ display: block;}
.hero-slide{ position: relative; min-height: max(86vh, 680px); background-size: cover; background-position: center;}
.hero-content{ position: relative; z-index: 2; width: 100%;}
.hero-content .wrapper{ background: rgba(0,0,0,.65); padding: 80px 60px; max-width: 900px; margin: 0 auto;}
.hero-content h1{ font-size: 72px; line-height: 72px; max-width: 14em; margin: 0 auto; font-weight: 400; font-style: italic; color: #ac6344;}
.hero-content h1 span{ display: block; font-style: normal; color: #fff;}
.hero-intro{ max-width: 34em; margin: 1.2em auto 0; font-size: 1.1rem; line-height: 28px; color: #fff;}
.hero-content .button{ margin-top: 48px;}
.hero .slick-dots{ position: absolute; bottom: 30px; left: 0; right: 0; z-index: 3;}
.hero .slick-dots li button:before{ color: #fff; opacity: .5; font-size: 14px;}
.hero .slick-dots li.slick-active button:before{ color: var(--rust); opacity: 1; font-size: 14px;}

/* About - 50/50 */
.about-container{ padding: 60px 0;}
.about-container .container{ gap: 70px; align-items: flex-start;}
.about-image{ flex: 0 0 calc((100% - 60px) / 3); position: sticky; top: 30px;}
.about-image img{ display: block; width: 100%; height: auto;}
.about-content{ flex: 1; padding: 0;}
.about-content h2{ margin: 0;}
.about-content h3{ font-family: 'Inter', sans-serif; font-size: 26px; line-height: 36px; font-weight: 400; color: #6b6560; margin-top: .5em;}
.about-content .content{ margin-top: 1.25em; color: var(--body);}
.about-content .content ul{ list-style: none; margin: 1.2em 0 0; padding-left: 1.5em;}
.about-content .content li{ position: relative; padding-left: 1.5em; margin-top: .5em; color: var(--body);}
.about-content .content li::before{ content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--rust);}

/* Process - tabs */
.process-container{ padding: 60px 0;}
.process-headline{ text-align: left; margin-bottom: 50px;}
.process-tabs{ display: flex; align-items: stretch; background: #fff; border: 1px solid var(--line);}
.process-tab-nav{ display: flex; flex-direction: column; flex: 0 0 34%; border-right: 1px solid var(--line);}
.process-tab{ display: flex; align-items: center; gap: 12px; flex: 1; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--line); padding: 22px 32px; cursor: pointer; color: var(--ink); font-family: 'Inter', sans-serif; font-size: 21px; line-height: 24px; font-weight: 500; transition: background .3s ease, color .3s ease;}
.process-tab:last-child{ border-bottom: none;}
.process-tab:hover, .process-tab:focus{ background: var(--cream);}
.process-tab.is-active{ background: var(--rust); color: #fff;}
.process-tab-number{ font-weight: 500;}
.process-panels{ flex: 1; padding: 80px 56px; background: #fff;}
.process-panel h3{ color: var(--ink); font-size: 42px; line-height: 1.15; font-weight: 400; margin-bottom: .5em;}
.process-panel .content{ color: var(--body); font-family: 'Inter', sans-serif; font-size: 16px; line-height: 24px;}
.process-panel .content p{ text-align: left !important;}

/* Work - project grid */
.work-container{ padding: 60px 0;}
.work-container > .wrapper > h2{ text-align: left; margin-bottom: 55px;}
.work-grid{ display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 30px; row-gap: 30px;}
.project{ position: relative;}
.project-visual{ position: relative; width: 100%; aspect-ratio: 16 / 9; background-size: cover; background-position: center; background-color: #e7e1d6; overflow: hidden; transition: transform .4s ease;}
.project:hover .project-visual{ transform: scale(1.015);}
.project-title{ margin-top: 20px; font-size: 26px;}
.project-location{ display: block; font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; color: var(--rust);}
.project-link{ position: absolute; inset: 0; z-index: 2; cursor: pointer;}
.project-extra{ display: none;}
.facetwp-facet-project_pager{ text-align: center; margin-top: 50px;}
.facetwp-load-more{ display: inline-block; cursor: pointer; padding: 14px 30px; background-color: var(--rust); color: #fff; border: none; border-radius: 2px; font-weight: 600; font-family: 'Inter', sans-serif; letter-spacing: .02em; font-size: .92rem; line-height: 1.2;}
.facetwp-load-more:hover, .facetwp-load-more:focus{ background-color: var(--rust-dark); color: #fff;}

/* Services - cards */
.services-container{ padding: 60px 0;}
.services-container > .wrapper > h2{ margin-bottom: 50px;}
.services-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; align-items: stretch;}
.service-card{ display: flex; flex-direction: column; background: #fff;}
.service-card-image{ width: 100%; aspect-ratio: 16 / 9; background-size: cover; background-position: center; background-color: #e7e1d6;}
.service-card-content{ flex: 1; padding: 36px 0; text-align: left;}
.service-card h3{ color: var(--ink); font-size: 36px; line-height: 36px; margin-bottom: .5em; text-align: left;}
.service-card .content{ color: var(--body); font-size: 16px; line-height: 24px; text-align: left;}
.service-card .content p{ text-align: left !important;}

/* Testimonials - slider */
.testimonials-container{ padding: 60px 0;}
.testimonials-slider{ width: 80%; margin: 0 auto; text-align: center;}
.testimonial blockquote{ font-family: 'Lora', serif; font-size: 21px; font-style: italic; line-height: 1.75em; margin: 0; color: var(--ink);}
.testimonial blockquote::before{ content: "\201C";}
.testimonial blockquote::after{ content: "\201D";}
.testimonial .testimonial-source{ display: block; margin-top: 26px; font-style: normal; font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; color: var(--rust);}
.testimonials-slider .slick-dots{ position: static; margin-top: 36px;}
.testimonials-slider .slick-dots li button:before{ color: var(--rust); opacity: .4; font-size: 14px;}
.testimonials-slider .slick-dots li.slick-active button:before{ color: var(--rust); opacity: 1; font-size: 14px;}
.testimonials-slider .slick-prev, .testimonials-slider .slick-next{ width: 32px; height: 32px;}
.testimonials-slider .slick-prev{ left: -45px;}
.testimonials-slider .slick-next{ right: -45px;}
.testimonials-slider .slick-prev:before, .testimonials-slider .slick-next:before{ color: var(--rust); font-size: 28px;}

/* FAQ - accordion */
.faq-container{ padding: 60px 0 0; margin-bottom: 280px;}
.faq-layout{ display: grid; grid-template-columns: 1fr 1.4fr; gap: 100px; align-items: start;}
.faq-intro h2{ margin: 0;}
.accordion-item{ border-bottom: 1px solid var(--line);}
.accordion-item:first-child{ border-top: 1px solid var(--line);}
.accordion-heading{ margin: 0;}
.accordion-trigger{ display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; text-align: left; background: none; border: none; padding: 24px 0; cursor: pointer; font-family: 'Inter', sans-serif; font-size: 21px; line-height: 24px; font-weight: 500; color: #2e2e2a;}
.accordion-trigger:hover, .accordion-trigger:focus{ background: none; color: var(--rust);}
.accordion-icon{ position: relative; flex: 0 0 16px; width: 16px; height: 16px;}
.accordion-icon::before, .accordion-icon::after{ content: ""; position: absolute; top: 50%; left: 0; width: 16px; height: 2px; margin-top: -1px; background: var(--rust); transition: transform .3s ease;}
.accordion-icon::after{ transform: rotate(90deg);}
.accordion-trigger[aria-expanded="true"] .accordion-icon::after{ transform: rotate(0);}
.accordion-panel{ padding: 0 0 24px; color: var(--body); font-size: 16px; line-height: 24px; text-align: left;}
.accordion-panel p{ text-align: left !important;}
.accordion-panel[hidden]{ display: none;}

/* CTA */
.cta-container{ position: relative; padding: 60px 0; margin: 0 30px; background: var(--rust); color: #fff;}
.cta-container::after{ content: ''; position: absolute; top: -223.5px; left: 60px; width: 200px; aspect-ratio: 3 / 4; background-image: url('images/dog.png'); background-size: contain; background-repeat: no-repeat; background-position: bottom center; pointer-events: none;}
.cta-layout{ gap: 70px; align-items: center;}
.cta-content{ flex: 0 0 40%;}
.cta-content .eyebrow{ color: rgba(255,255,255,.8);}
.cta-content h2{ color: #fff; margin: 0; font-size: 42px; line-height: 1.15;}
.cta-content .content{ margin-top: 1em; color: rgba(255,255,255,.9);}
.cta-contact{ margin-top: 1.5em; color: rgba(255,255,255,.9); font-size: 16px; line-height: 1.6;}
.cta-form{ flex: 1;}
.cta-form .gform_wrapper .gfield{ margin-top: 0;}
.cta-form .gform_wrapper .gfield_label{ color: #fff; font-weight: 500; font-size: .85rem; letter-spacing: .02em;}
.cta-form input[type="text"], .cta-form input[type="email"], .cta-form input[type="tel"], .cta-form select, .cta-form textarea{ width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.45); border-radius: 0; color: #fff; padding: 10px 0; font-size: 1rem;}
.cta-form textarea{ resize: vertical;}
.cta-form select option{ color: var(--ink);}
.cta-form input::placeholder, .cta-form textarea::placeholder{ color: rgba(255,255,255,.6);}
.cta-form input:focus, .cta-form select:focus, .cta-form textarea:focus{ outline: none; border-bottom-color: #fff;}
.cta-form .gform_footer{ margin-top: 30px;}
.cta-form .gform_button{ background: #fff; color: var(--rust); border: 0; border-radius: 2px; padding: 15px 40px; font-weight: 600; letter-spacing: .02em; cursor: pointer;}
.cta-form .gform_button:hover, .cta-form .gform_button:focus{ background: #fff; color: var(--rust-dark);}


@media (max-width: 900px) {
	.nav{ display: none;}
	.nav-toggle{ display: flex;}
	.mobile-overlay{ display: block;}
	.header-button{ display: none;}

	h2{ font-size: 46px; line-height: 50px;}
	.hero{ min-height: 75vh;}
	.hero-slide{ height: 75vh; min-height: 75vh;}
	.hero-content .wrapper{ max-width: calc(100% - 60px); padding: 50px 36px;}
	.hero-content h1{ font-size: 52px; line-height: 56px;}
	.about-container .container{ flex-direction: column; align-items: stretch;}
	.about-image{ flex-basis: auto; width: 100%; position: static;}
	.about-content{ padding: 0;}
	.process-tabs{ flex-direction: column;}
	.process-tab-nav{ flex: none; flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid rgba(255,255,255,.25);}
	.process-tab{ flex: 1 1 100%; width: 100%; border-bottom: none; border-right: 1px solid rgba(255,255,255,.25); font-size: 16px; padding: 16px 20px;}
	.process-panels{ padding: 36px 28px;}
	.process-panel h3{ font-size: 32px;}
	.work-grid{ grid-template-columns: 1fr 1fr; row-gap: 50px;}
	.services-grid{ grid-template-columns: 1fr;}
	.service-card-content{ text-align: center;}
	.service-card h3{ text-align: center;}
	.service-card .content{ text-align: center;}
	.service-card .content p{ text-align: center !important;}
	.faq-layout{ grid-template-columns: 1fr; gap: 30px;}
	.cta-layout{ flex-direction: column;}
	.testimonials-slider .slick-prev{ left: 0;}
	.testimonials-slider .slick-next{ right: 0;}
}

@media (max-width: 600px) {
	h2{ font-size: 38px; line-height: 42px;}
	.hero-content .wrapper{ max-width: calc(100% - 40px); padding: 40px 24px;}
	.hero-content h1{ font-size: 38px; line-height: 42px;}
	.work-grid{ grid-template-columns: 1fr;}
	.process-tab-nav{ flex-direction: column;}
	.process-tab{ border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.25) !important; font-size: 15px; padding: 14px 20px;}
	.process-tab:last-child{ border-bottom: none !important;}
	.process-panels{ padding: 24px 20px;}
	.services-grid{ gap: 16px;}
	.cta-container{ margin: 0 16px;}
}

@media print {
	.header, .footer, .nav, .search-form{ display: none;}
	body{ font-size: 12pt; color: #000;}
	a{ color: #000; text-decoration: underline;}
	a[href]::after{ content: " (" attr(href) ")";}
}