main, #main {
    padding-top: var(--header-height);
}
#header { background: #282217; }

/* ------------------------------------------------------------
   Website Design Page - Light Hero
------------------------------------------------------------ */

.mwd-hero {
  padding-top:0;
  background-color:#f3eee6;
  color:#242424;
  min-height: 0;
}

/* This replaces the dark overlay with a soft readable light fade */
.mwd-hero-overlay {
  background:
    linear-gradient(
      105deg,
      rgba(245,242,235,.9) 20%,
      rgba(245,242,235,.58) 44%,
      rgba(245,242,235,0) 70%
    );
  background:
    linear-gradient( 90deg, rgba(245,242,235,.7) 20%, rgba(245,242,235,.45) 40%, rgba(245,242,235,0) 65% ),
    linear-gradient( 105deg, rgba(245,242,235,.7) 20%, rgba(245,242,235,.45) 40%, rgba(245,242,235,0) 65% );
}

/* Content */
.mwd-hero-content {
  width:46%;
  max-width:620px;
}
.mwd-hero-content .eyebrow {
  color: var(--mwd-gold);
}
.mwd-hero-content h1 {
  color:#181818;
  font-size:clamp(2.2rem, 4vw, 57px);
  letter-spacing:-.05em;
}

@media only screen and (min-width:801px) and (max-width:1100px) {
    .mwd-hero-content { width:55%; max-width: 500px; }
    .mwd-hero-content p:not(.eyebrow) { width:85%; }
}

@media only screen and (max-width:800px) {
    .mwd-hero-overlay {
        background:
            linear-gradient( 90deg, rgba(245,242,235,.7) 20%, rgba(245,242,235,.45) 40%, rgba(245,242,235,0) 65% ),
            linear-gradient( 145deg, rgba(245,242,235,.7) 20%, rgba(245,242,235,.45) 40%, rgba(245,242,235,0) 65% );
        
    }
    .mwd-hero-content { width:90%; max-width:600px; padding-bottom: 8%; }
    .mwd-hero-content p:not(.eyebrow) { width:52%; }
}
@media only screen and (max-width:600px) {
    .mwd-hero-content { width:95%; max-width: 450px; padding-bottom: 1%; }
    .mwd-hero-content p:not(.eyebrow) { width:52%; }
}
@media only screen and (max-width:550px) {
    .mwd-hero-content p:not(.eyebrow) { width:50%; }
}
@media only screen and (max-width:500px) {
    .mwd-hero {
        background-image:var(--hero-img-mobile-xs, var(--hero-img-mobile-xs));
        background-size: 100% auto;
        background-position: center bottom;
    }
    .mwd-hero-overlay {
        background:
            linear-gradient( 175deg, rgba(243,236,227,1) 25%, rgba(245,242,235,.8) 35%, rgba(245,242,235,.5) 50%, rgba(245,242,235,0) 70% )
    }
    .mwd-hero-content { width:100%; max-width:none; padding-bottom: 58%; }
    .mwd-hero-content p:not(.eyebrow) { width:90%; }
}
@media only screen and (max-width:420px) {
    .mwd-hero-content { padding-bottom: 60%; }
    .mwd-hero-content p:not(.eyebrow) { width:95%; }
}


/* ------------------------------------------------------------
   Editorial service sections
------------------------------------------------------------ */

.editorial-grid {
  display:grid;
  grid-template-columns:minmax(260px, .8fr) minmax(0, 1.2fr);
  grid-template-columns:minmax(260px, .72fr) minmax(0, 1.28fr);
  gap:clamp(3rem, 7vw, 8rem);
  align-items:center;
}

.editorial-left {
  max-width:560px;
}

.editorial-left h2 {
  /* font-size:clamp(2.1rem, calc(1rem + 2.5vw), 3.65rem); */
  /* font-size:clamp(2rem, calc(1rem + 2.3vw), 3.5rem); */
  font-size: clamp(1.8rem, calc(0.9rem + 2vw), 2.7rem);
  line-height:1.3;
  letter-spacing:-.04em;
  max-width: 400px;
}

.editorial-right {
  max-width:700px;
}

.editorial-two-copy {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem, 5vw, 5rem);
}

.editorial-two-copy article {
  padding-left:clamp(1.6rem, 3vw, 3rem);
  border-left:1px solid rgba(177,126,28,.28);
}

.editorial-two-copy h3 {
  color:#171717;
  font-size:1.55rem;
  font-weight:400;
  line-height:1.25;
  margin:0 0 .75em;
}

.editorial-two-copy p {
  color:#444;
  font-size:1rem;
  line-height:1.76 !important;
  margin:0;
}

.mwd-list { margin-top: 3em; }

.mwd-list li { margin: 2rem 0; }

/* List 

.editorial-list {
  border-left:1px solid rgba(0,0,0,.10);
  padding-left:clamp(2rem, 4vw, 4rem);
}*/

.editorial-list article {
  display:grid;
  grid-template-columns:clamp(22px, 3vw, 54px) 1fr;
  gap:1.5rem;
  padding:1.65rem 0;
  margin:0;
  border-top:1px solid rgba(90,70,30,.1);
}

.editorial-list article:first-child {
  border-top-width:0;
}

.editorial-list article span {
  display:block;
  color:var(--mwd-gold-dark);
  font-family:"Montserrat", Helvetica, Arial, sans-serif;
  font-size:1.35rem;
  font-weight:300;
  line-height:1.1;
}

.editorial-list article h3 {
  color:#171717;
  font-size:1.35rem;
  font-weight:400;
  line-height:1.25;
  margin:0 0 .35em;
}

.editorial-list article p {
  max-width: 720px;
  color: #5b5b5b;
  font-size: 0.95rem;
  font-style: italic;
  line-height: 1.7 !important;
  margin: 0;
}

/* Editorial - Tablet / Mobile Layout */

@media only screen and (max-width:900px) {

    .editorial-grid {
        grid-template-columns:1fr;
        gap:0;
        align-items:start;
    }

    .editorial-left {
        max-width:none !important;
    }

    .editorial-left h2 {
        max-width:none !important;
    }

    .editorial-right {
        max-width:none !important;
    }
    .editorial-right p:first-child {
        margin-top:0;
    }

    .mwd-list { margin: 2rem 0; }
    .mwd-list li { margin: 1.2rem 0; }

    .editorial-list { margin-top: 1rem; }
    .editorial-list article:first-child {
        border-top-width: 1px;
    }
    .editorial-list article h3,
    .editorial-list article span {
        font-size:clamp(1.15rem, 2.2vw, 1.35rem);
    }
    
    .editorial-two-copy {
        grid-template-columns: 1fr;
        margin-top: 2rem;
    }
}

/* ------------------------------------------------------------
   Website types
------------------------------------------------------------ */

.website-types .editorial-grid {
  align-items:center;
}

.link-list {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 3rem;
  list-style: none;
}
.link-list li { padding: 0; margin: 0;}
.link-list span,
.link-list a {
  display:block;
  padding:1.15em 2.2em 1.15em 0;
  border-bottom:1px solid rgba(0,0,0,.12);
  color:#222;
  font-size:1.03rem;
  font-weight:500;
  text-decoration:none;
}
.link-list span::before,
.link-list a::before {
  content:"→";
  display:inline-block;
  width:2.2em;
  color:var(--mwd-gold-dark);
  font-weight:700;
}

.link-list  a:hover {
  color:var(--mwd-gold-dark);
}


/* ------------------------------------------------------------
   Services Card Grid
------------------------------------------------------------ */

.service-cards {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(1.2rem, 2vw, 1.8rem);
}

.service-card {
  min-height:150px;
  padding:clamp(1.55rem, 2vw, 2rem);

  display:flex;
  align-items:flex-end;

  background:
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(255,255,255,.88));

  border:1px solid rgba(0,0,0,.07);
  border-radius:24px 4px 4px 4px;

  box-shadow:0 18px 42px rgba(0,0,0,.075);

  overflow:hidden;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.service-card::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:4px;
  background:linear-gradient(90deg, #b88220, #e4b84c, #c9972f);
  opacity:.9;
}

.service-card__no {
  position:absolute;
  top:1.05rem;
  right:1.25rem;

  color:var(--mwd-gold);
  font-family:"Montserrat", Helvetica, Arial, sans-serif;
  font-size:clamp(2rem, 3vw, 3rem);
  line-height:1;
  font-weight:300;
  letter-spacing:-.04em;
  opacity:.28;

  pointer-events:none;
}

.service-card h3 {
  max-width:82%;
  color:#171717;
  font-size:clamp(1.02rem, 1.15vw, 1.18rem);
  font-weight:650;
  line-height:1.35;
  margin:0;
  z-index:1;
}
.service-card--03 h3,
.service-card--06 h3 {
  max-width:92%;
}

.service-card:hover {
  transform:translateY(-5px);
  border-color:rgba(201,151,47,.28);
  box-shadow:0 26px 56px rgba(0,0,0,.12);
}

.service-card:hover .service-card__no {
  opacity:.42;
}


/* ------------------------------------------------------------
   Device Display Section
------------------------------------------------------------ */
.project-showcase {
  background: linear-gradient(180deg, #DAD7C9 0%, #efeee9 65%, #EAE8E0 100%);
}
.project-showcase .section-heading {
  max-width: 900px;
}
.project-showcase .section-heading p {
  max-width:none;
}


/* ------------------------------------------------------------
   Website Types - Responsive
------------------------------------------------------------ */

@media only screen and (max-width:1200px) {

  .service-cards {
    grid-template-columns:repeat(2, 1fr);
  }

}

@media only screen and (max-width:900px) {

  .service-cards {
    margin-top: 2rem;
  }
}
@media only screen and (max-width:650px) {

  .service-cards {
    grid-template-columns:1fr;
    gap:1.1rem;
  }

  .service-card {
    min-height:120px;
    padding:1.55rem;
  }

}


/* ------------------------------------------------------------
   Responsive Foundations
   Uses existing .service-cards / .service-card styles
------------------------------------------------------------ */

.responsive-foundations .section-heading {
    max-width:820px;
}

/* Let service cards hold more content */
.responsive-foundations .service-card {
  min-height:200px;
  align-items:flex-start;
  padding:3rem clamp(2rem, 2.6vw, 2.4rem);
}

/* Content wrapper inside card */
.responsive-foundations .service-card__content {
  position:relative;
  z-index:1;
  max-width:88%;
}

.responsive-foundations .service-card h3 {
  max-width:none;
  margin:0;
  color:#171717;
  font-size:clamp(1.2rem, 1.5vw, 1.5rem);
  font-weight:650;
  line-height:1.3;
}

.responsive-foundations .service-card .accent-line {
  width:42px;
  height:1px;
  margin:1rem 0 .9rem;
}

.responsive-foundations .service-card p {
  margin:0;
  color:#555;
  font-size:1.1rem;
  line-height:1.75 !important;
}

/* Optional: soften hover slightly for text cards */
.responsive-foundations .service-card:hover {
  transform:translateY(-4px);
}


/* ------------------------------------------------------------
   Responsive Foundations - Responsive
------------------------------------------------------------ */

@media only screen and (max-width:1200px) {

  .responsive-foundations .service-card {
    min-height:230px;
  }

}

@media only screen and (max-width:650px) {

  .responsive-foundations .service-card {
    min-height:auto;
    padding:1.65rem;
  }

  .responsive-foundations .service-card__content {
    max-width:92%;
  }

}