/* EDIT GUIDE: 1. Colours and fonts below. 2. Section styles are labelled.
   3. Mobile layouts are at the bottom. All sizes respond to screen width. */
:root {
  --beige:#f5f1e9;
  --cream:#fcfaf6;
  --sage:#dce2d5;
  --sage-dark:#53604a;
  --brown:#796451;
  --ink:#39382f;
  --muted:#716e63;
  --line:#d9d4c9;
  --body:Arial,Helvetica,sans-serif;
  --heading:Georgia,'Times New Roman',serif;
  --width:1200px
}


* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:30px
}

body {
  margin:0;
  background:var(--beige);
  color:var(--ink);
  font-family:var(--body);
  font-size:15px;
  line-height:1.75
}

a {
  color:inherit;
  text-decoration:none
}

button {
  font:inherit;
  color:inherit;
  cursor:pointer
}

img {
  display:block;
  width:100%;
  object-fit:cover
}

button,a,summary {
  -webkit-tap-highlight-color:transparent
}

a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid var(--sage-dark);
  outline-offset:6px
}

h1,h2,h3,p,figure {
  margin:0
}

h1,h2,h3 {
  font-family:var(--heading);
  font-weight:400;
  line-height:1.15
}

h2 {
  font-size:clamp(36px,4vw,57px);
  letter-spacing:-1.5px
}

h2 em,h1 em {
  font-weight:400
}

p {
  color:var(--muted)
}

.section {
  max-width:var(--width);
  margin:auto;
  padding:95px 40px
}

.eyebrow {
  text-transform:uppercase;
  letter-spacing:2.5px;
  font-size:10px;
  font-weight:600;
  margin-bottom:25px
}

.skip-link {
  position:absolute;
  top:-100px;
  background:white;
  padding:12px;
  z-index:10
}

.skip-link:focus {
  top:0
}


/* HEADER / LOGO: Change header height, logo size and tagline here. */
.MainLogo {
  width: 30%;
  height: auto;
}

.brand-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:30px 5%;
  min-height:139px
}

.brand {
  font-family:var(--heading);
  font-size:42px;
  line-height:1;
  letter-spacing:-2px;
  text-align:center
}

.brand em {
  color:var(--brown);
  font-size:36px
}

.brand span {
  display:block;
  font-family:var(--body);
  font-size:9px;
  letter-spacing:5px;
  margin-top:15px
}

.header-note,.header-contact {
  font-size:11px;
  letter-spacing:.5px;
  width:240px
}

.header-contact {
  text-align:right
}

.header-contact span {
  margin-left:12px
}

.logo-image {
  max-width:240px;
  max-height:90px;
  object-fit:contain
}

.navigation {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:center;
  gap:48px;
  padding:15px 20px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:1.5px
}

.navigation a:hover {
  color:var(--brown)
}


/* CAROUSEL: Change height here. Photo positions can be adjusted with object-position. */
.hero {
  position:relative;
  height:650px;
  min-height:540px;
  color:white;
  background:var(--sage-dark);
  isolation:isolate
}

.slides,.slide,.slide img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%
}

.slide {
  opacity:0;
  transition:opacity 1s
}

.slide.is-active {
  opacity:1
}

.hero:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(17,30,25,.53),rgba(17,30,25,.06)),linear-gradient(0deg,rgba(17,30,25,.4),transparent 45%);
  z-index:1;
  pointer-events:none
}

.hero-copy {
  position:relative;
  z-index:2;
  padding:125px 8% 100px
}

.hero-copy p {
  color:#fff
}

.hero-copy h1 {
  font-size:clamp(45px,5.4vw,78px);
  letter-spacing:-2px;
  margin-bottom:25px
}

.hero-copy>.eyebrow {
  font-size:10px
}

.hero-copy>p:not(.eyebrow) {
  font-size:14px;
  line-height:1.8
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:35px;
  padding:16px 25px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:1.4px;
  margin-top:30px;
  border:1px solid transparent;
  transition:background .2s
}

.button.light {
  background:var(--beige);
  color:var(--ink)
}

.button.light:hover {
  background:var(--sage)
}

.button.dark {
  background:var(--sage-dark);
  color:white
}

.button.dark:hover {
  background:var(--ink)
}

.hero-bottom {
  position:absolute;
  bottom:28px;
  left:5%;
  right:5%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:2;
  font-size:10px;
  letter-spacing:1px
}

.carousel-controls {
  display:flex;
  gap:16px;
  align-items:center
}

.carousel-controls>button {
  border:1px solid #ffffff80;
  border-radius:50%;
  background:transparent;
  color:white;
  width:36px;
  height:36px;
  line-height:1
}

.dots {
  display:flex;
  gap:8px
}

.dot {
  border:0;
  background:transparent;
  padding:12px 3px
}

.dot:after {
  content:'';
  display:block;
  background:#ffffff65;
  width:6px;
  height:6px;
  border-radius:50%
}

.dot.active:after {
  background:white
}

.hero button:focus-visible {
  outline-color:white
}


/* INTRODUCTION */
.intro {
  text-align:center;
  padding-top:90px;
  padding-bottom:65px
}

.intro>p:not(.eyebrow) {
  max-width:580px;
  margin:27px auto;
  font-size:14px
}

.tiny-rule {
  display:block;
  width:1px;
  height:45px;
  background:var(--brown);
  margin:30px auto 0
}


/* PORTFOLIO */
.portfolio {
  padding-top:35px
}

.section-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  margin-bottom:38px
}

.section-heading .eyebrow {
  margin-bottom:14px
}

.small-note {
  font-size:11px;
  color:var(--muted)
}

.portfolio-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px
}

.work {
  border:0;
  padding:0;
  background:none;
  text-align:left
}

.work.offset {
  padding-top:58px
}

.image-wrap {
  display:block;
  position:relative;
  overflow:hidden
}

.image-wrap img {
  height:400px;
  transition:transform .5s
}

.work:hover img {
  transform:scale(1.035)
}

.image-arrow {
  position:absolute;
  bottom:16px;
  right:16px;
  background:var(--beige);
  width:35px;
  height:35px;
  border-radius:50%;
  text-align:center;
  line-height:35px
}

.work-title {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family:var(--heading);
  font-size:26px;
  margin-top:18px
}

.work-title small {
  font:10px var(--body);
  color:var(--brown)
}

.work-caption {
  font-size:11px;
  color:var(--muted)
}


/* ABOUT */
.about {
  display:grid;
  grid-template-columns:1fr 1fr;
  background:var(--sage);
  max-width:1440px;
  margin:auto
}

.about-image img {
  height:100%;
  min-height:550px;
  max-height:680px
}

.about-copy {
  padding:75px clamp(30px,6vw,95px)
}

.about-copy h2 {
  font-size:clamp(36px,3.7vw,52px);
  margin-bottom:25px
}

.about-copy>p:not(.eyebrow) {
  margin-bottom:18px;
  font-size:13px
}

.about-copy .template-note {
  font-size:10px!important
}

.text-link {
  display:inline-block;
  border-bottom:1px solid var(--brown);
  padding:10px 0;
  font-size:11px
}

.text-link span {
  margin-left:30px
}


/* EXPERIENCE / FAQ */
.experience {
  text-align:center
}

.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:45px;
  text-align:left;
  margin-top:55px
}

.steps article {
  border-top:1px solid var(--line);
  padding-top:22px
}

.step-number {
  font-size:10px;
  letter-spacing:1.6px;
  color:var(--brown)
}

.steps h3 {
  font-size:25px;
  margin:20px 0 16px
}

.steps p {
  font-size:13px
}

.faq {
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:60px;
  padding-top:65px
}

.questions details {
  border-bottom:1px solid var(--line);
  padding:18px 0
}

.questions summary {
  cursor:pointer;
  font-size:13px
}

.questions p {
  font-size:12px;
  padding:15px 0 5px;
  max-width:470px
}


/* CONTACT / FOOTER */
.contact {
  background:#e6dfd2;
  text-align:center;
  padding:80px 25px
}

.contact>p:not(.eyebrow) {
  font-size:13px;
  max-width:500px;
  margin:22px auto 0
}

.contact .contact-email {
  font-size:10px!important
}

footer {
  background:var(--cream);
  padding:60px 6% 22px
}

.footer-grid {
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:45px;
  max-width:1200px;
  margin:auto
}

.footer-brand {
  display:inline-block;
  font-size:34px
}

.footer-brand em {
  font-size:30px
}

.footer-grid h3 {
  font:600 10px var(--body);
  text-transform:uppercase;
  letter-spacing:1.5px;
  margin:4px 0 23px
}

.footer-grid>div>a:not(.brand) {
  display:block;
  font-size:12px;
  margin-bottom:7px
}

.footer-grid p {
  font-size:11px;
  line-height:1.9;
  margin-top:20px
}

.footer-policy {
  background:none;
  padding:0;
  border:0;
  text-decoration:underline;
  font-size:11px;
  margin-top:15px
}

.footer-bottom {
  max-width:1200px;
  margin:45px auto 0;
  border-top:1px solid var(--line);
  padding-top:22px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:var(--muted);
  font-size:9px
}


/* POP-UP GALLERY / PRIVACY */
dialog {
  border:0;
  background:var(--cream);
  color:var(--ink);
  padding:35px;
  max-width:min(90vw,1000px);
  max-height:90vh
}

dialog::backdrop {
  background:#1a211de0
}

.dialog-close {
  position:absolute;
  right:9px;
  top:5px;
  border:0;
  background:var(--cream);
  font-size:25px;
  width:32px;
  height:32px
}

#gallery-image {
  max-height:72vh;
  width:auto;
  max-width:100%;
  margin:auto;
  object-fit:contain
}

#gallery-caption {
  font-size:12px;
  margin-top:14px
}

#privacy-dialog {
  max-width:620px
}

#privacy-dialog h2 {
  font-size:30px;
  margin:10px 0 25px
}

#privacy-dialog p {
  font-size:13px;
  margin:15px 0
}


/* RESPONSIVE: Tablet and phone layouts. */
@media(max-width:900px) {
  .header-note,.header-contact {
  width:180px;
  font-size:9px
}

.navigation {
  gap:26px
}

.hero {
  height:600px
}

.image-wrap img {
  height:320px
}

.section {
  padding-left:28px;
  padding-right:28px
}

.about-copy {
  padding:45px 30px
}

.about-image img {
  min-height:500px
}

.footer-grid {
  gap:25px
}

.small-note {
  display:none
}


}


@media(max-width:600px) {
  .brand-header {
  min-height:115px;
  justify-content:center;
  padding:24px
}

.brand {
  font-size:38px
}

.header-note,.header-contact {
  display:none
}

.navigation {
  gap:10px 21px;
  flex-wrap:wrap;
  padding:14px;
  font-size:9px;
  letter-spacing:.6px
}

.hero {
  height:570px;
  min-height:0
}

.hero-copy {
  padding:115px 25px 90px
}

.hero-copy h1 {
  font-size:47px
}

.hero-copy .eyebrow {
  font-size:8px;
  letter-spacing:2px
}

.hero-caption {
  display:none
}

.hero-bottom {
  left:25px;
  right:25px
}

.section {
  padding:65px 24px
}

.intro h2 {
  font-size:35px
}

.portfolio {
  padding-top:5px
}

.portfolio-grid {
  grid-template-columns:1fr;
  gap:35px
}

.work.offset {
  padding-top:0
}

.image-wrap img {
  height:420px
}

.section-heading {
  margin-bottom:28px
}

.about {
  grid-template-columns:1fr
}

.about-image img {
  height:380px;
  min-height:0;
  object-position:center 40%
}

.about-copy {
  padding:45px 25px
}

.steps {
  grid-template-columns:1fr;
  gap:30px;
  margin-top:35px
}

.faq {
  grid-template-columns:1fr;
  gap:25px
}

.contact h2 {
  font-size:41px
}

.footer-grid {
  grid-template-columns:1fr 1fr;
  gap:35px 20px
}

.footer-grid>div:first-child {
  grid-column:1/-1
}

.footer-bottom {
  flex-direction:column;
  gap:9px
}

.footer-brand {
  font-size:34px
}

.contact {
  padding:65px 24px
}


}


/* Respect visitors who prefer reduced motion. */
@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}

*,*:before,*:after {
  transition:none!important
}


}