/* =========================================================
   TRIMWORKS OF MICHIGAN — INTERIOR RENOVATIONS
   Page: /interior-renovations/
   ========================================================= */

.tw-interior-page {
  --int-navy: var(--trim-navy, #061728);
  --int-navy-2: var(--trim-navy-2, #0b2238);
  --int-red: var(--trim-red, #e30620);
  --int-red-dark: var(--trim-red-dark, #b90419);
  --int-white: #ffffff;
  --int-off-white: var(--trim-off-white, #f2f5f7);
  --int-gray-100: var(--trim-gray-100, #e8edf1);
  --int-gray-300: var(--trim-gray-300, #c9cfd4);
  --int-gray-600: var(--trim-gray-600, #69737c);
  --int-charcoal: var(--trim-charcoal, #20262b);
  --int-heading: var(--trim-heading, "Oswald", Arial, sans-serif);
  --int-body: var(--trim-body, "Helvetica Neue", Helvetica, Arial, sans-serif);
  color: var(--int-charcoal);
  font-family: var(--int-body);
  overflow: hidden;
}

.tw-interior-page *, .tw-interior-page *::before, .tw-interior-page *::after { box-sizing: border-box; }
.tw-int-container { width: min(calc(100% - 96px), 1240px); margin-inline: auto; }
.tw-int-kicker { margin: 0 0 16px; color: var(--int-red); font: 600 .8rem/1 var(--int-heading); letter-spacing: .14em; text-transform: uppercase; }
.tw-interior-page h1, .tw-interior-page h2, .tw-interior-page h3, .tw-interior-page strong { font-family: var(--int-heading); }
.tw-interior-page h1, .tw-interior-page h2, .tw-interior-page h3 { text-transform: uppercase; }
.tw-interior-page p { line-height: 1.67; }
.tw-interior-page h2 { margin: 0; color: var(--int-navy); font-size: clamp(2.65rem, 4.75vw, 4.8rem); font-weight: 600; line-height: .97; letter-spacing: -.025em; }
.tw-int-inline-link, .tw-int-text-link { color: inherit; font: 600 .82rem/1.2 var(--int-heading); letter-spacing: .035em; text-decoration: none; text-transform: uppercase; }
.tw-int-inline-link { display: inline-block; margin-top: 10px; color: var(--int-navy); }

.tw-int-hero { display:grid; grid-template-columns:1fr 1fr; min-height:650px; background:var(--int-navy); color:#fff; }
.tw-int-hero__content { display:flex; align-items:center; }
.tw-int-hero__content .tw-int-container { width:min(calc(100% - 96px),620px); margin-left:max(48px,calc((100vw - 1240px)/2)); margin-right:48px; }
.tw-int-hero__copy { padding:170px 0 90px; }
.tw-int-hero h1 { margin:0; color:#fff; font-size:clamp(3.5rem,5.6vw,6.3rem); font-weight:600; line-height:.92; letter-spacing:-.04em; }
.tw-int-hero__lead { max-width:670px; margin:26px 0 30px; color:rgba(255,255,255,.76); font-size:clamp(1.03rem,1.3vw,1.16rem); }
.tw-int-hero__actions { display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.tw-int-text-link { color:#fff; }
.tw-int-hero__image { min-height:650px; background-color:#53616e; background-position:center; background-size:cover; background-repeat:no-repeat; }

.tw-int-definition { padding: clamp(85px, 9vw, 135px) 0; background: #fff; }
.tw-int-definition__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(60px, 9vw, 130px); align-items: start; }
.tw-int-definition__body { padding-top: 6px; }
.tw-int-definition__body p { color: var(--int-gray-600); }
.tw-int-definition__body .tw-int-lead { margin-top: 0; color: var(--int-charcoal); font-size: clamp(1.15rem, 1.55vw, 1.34rem); }

.tw-int-scope { padding: clamp(85px, 9vw, 130px) 0; background: var(--int-off-white); }
.tw-int-scope__intro { display: grid; grid-template-columns: 1fr .65fr; gap: 70px; align-items: end; margin-bottom: 54px; }
.tw-int-scope__intro > p { margin: 0 0 5px; color: var(--int-gray-600); }
.tw-int-scope__rows { border-top: 1px solid var(--int-gray-300); }
.tw-int-scope-row { display: grid; grid-template-columns: 80px .8fr 1.2fr; gap: 34px; padding: 34px 0; border-bottom: 1px solid var(--int-gray-300); transition: padding-left .2s ease; }
.tw-int-scope-row:hover { padding-left: 10px; }
.tw-int-scope-row__number { padding-top: 4px; color: var(--int-red); font: 600 .82rem/1 var(--int-heading); }
.tw-int-scope-row h3 { margin: 0; color: var(--int-navy); font-size: clamp(1.5rem, 2vw, 2rem); font-weight: 600; line-height: 1.05; }
.tw-int-scope-row__copy p { max-width: 630px; margin: 0; color: var(--int-gray-600); }
.tw-int-scope-row__copy a { display: inline-block; margin-top: 12px; color: var(--int-navy); font: 600 .78rem/1 var(--int-heading); letter-spacing: .03em; text-decoration: none; text-transform: uppercase; }

.tw-int-commercial { background: var(--int-navy); color: #fff; }
.tw-int-commercial__grid { width: 100%; max-width: none; display: grid; grid-template-columns: minmax(0, 48%) minmax(0, 52%); }
.tw-int-commercial__image { min-height: 760px; background-position: center; background-size: cover; background-repeat: no-repeat; }
.tw-int-commercial__content { max-width: 720px; padding: clamp(80px, 8vw, 120px) clamp(48px, 7vw, 105px); }
.tw-int-commercial h2 { color: #fff; }
.tw-int-commercial__content > p:not(.tw-int-kicker):not(.tw-int-note) { margin: 25px 0 32px; color: rgba(255,255,255,.72); }
.tw-int-commercial__points { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 34px 0; background: rgba(255,255,255,.14); }
.tw-int-commercial__points > div { padding: 24px; background: var(--int-navy); }
.tw-int-commercial__points strong { display: block; margin-bottom: 8px; color: #fff; font-size: 1.03rem; font-weight: 600; text-transform: uppercase; }
.tw-int-commercial__points span { display: block; color: rgba(255,255,255,.64); font-size: .9rem; line-height: 1.5; }
.tw-int-note { margin: 32px 0 0; padding: 20px 22px; color: rgba(255,255,255,.72); background: rgba(255,255,255,.055); border-left: 3px solid var(--int-red); font-size: .89rem; }
.tw-int-note a { color: #fff; text-underline-offset: 3px; }

.tw-int-property-types { padding: clamp(85px, 9vw, 125px) 0; background: #fff; }
.tw-int-property-types__header { max-width: 870px; margin-bottom: 48px; }
.tw-int-property-types__grid { display: grid; grid-template-columns: 1.15fr 1fr .9fr; gap: 18px; }
.tw-int-property-types article { min-height: 330px; display: flex; flex-direction: column; justify-content: flex-end; padding: 32px; background: var(--int-off-white); border-top: 5px solid var(--int-navy); }
.tw-int-property-types article:first-child { background: var(--int-navy); border-color: var(--int-red); }
.tw-int-property-types article:first-child h3, .tw-int-property-types article:first-child p { color: #fff; }
.tw-int-property-types article > span { margin-bottom: auto; color: var(--int-red); font: 600 .77rem/1 var(--int-heading); letter-spacing: .12em; text-transform: uppercase; }
.tw-int-property-types h3 { margin: 0 0 12px; color: var(--int-navy); font-size: clamp(1.55rem, 2.1vw, 2.15rem); line-height: 1.03; }
.tw-int-property-types p { margin: 0; color: var(--int-gray-600); }

.tw-int-value { padding: clamp(85px, 9vw, 125px) 0; background: #e9edf0; }
.tw-int-value__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(60px, 9vw, 130px); align-items: start; }
.tw-int-value__copy p { margin-top: 0; color: var(--int-gray-600); }
.tw-int-value__copy p:first-child { color: var(--int-charcoal); font-size: 1.1rem; }

.tw-int-service-area { padding: clamp(80px, 8vw, 115px) 0; background: #fff; }
.tw-int-service-area__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 75px; align-items: start; }
.tw-int-service-area__copy > p { margin-top: 0; color: var(--int-gray-600); }
.tw-int-city-links { display: flex; flex-wrap: wrap; gap: 9px; margin: 24px 0 20px; }
.tw-int-city-links a { padding: 10px 13px; color: var(--int-navy); background: var(--int-off-white); border: 1px solid var(--int-gray-100); font: 600 .75rem/1 var(--int-heading); text-decoration: none; text-transform: uppercase; }

.tw-int-faq { padding: clamp(85px, 9vw, 125px) 0; background: var(--int-off-white); }
.tw-int-faq__header { max-width: 780px; margin-bottom: 42px; }
.tw-int-faq__list { max-width: 980px; }
.tw-int-faq details { border-top: 1px solid var(--int-gray-300); }
.tw-int-faq details:last-child { border-bottom: 1px solid var(--int-gray-300); }
.tw-int-faq summary { position: relative; padding: 24px 46px 24px 0; color: var(--int-navy); font: 600 1.08rem/1.25 var(--int-heading); text-transform: uppercase; cursor: pointer; list-style: none; }
.tw-int-faq summary::-webkit-details-marker { display: none; }
.tw-int-faq summary::after { content: "+"; position: absolute; right: 3px; top: 20px; color: var(--int-red); font: 400 1.6rem/1 var(--int-heading); }
.tw-int-faq details[open] summary::after { content: "–"; }
.tw-int-faq details > div { max-width: 820px; padding: 0 0 25px; }
.tw-int-faq details p { margin: 0; color: var(--int-gray-600); }

.tw-int-cta { padding: 90px 0; background: var(--int-navy); color: #fff; }
.tw-int-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 55px; }
.tw-int-cta h2 { color: #fff; }
.tw-int-cta p:not(.tw-int-kicker) { margin: 17px 0 0; color: rgba(255,255,255,.66); }

@media (max-width: 1050px) {
  .tw-int-container { width: min(calc(100% - 64px), 1240px); }
  .tw-int-hero { grid-template-columns: 1fr; }
  .tw-int-hero__content .tw-int-container { width:min(calc(100% - 64px),1240px); margin-inline:auto; }
  .tw-int-hero__image { min-height:440px; }
  .tw-int-definition__grid, .tw-int-scope__intro, .tw-int-value__grid, .tw-int-service-area__inner { grid-template-columns: 1fr; gap: 36px; }
  .tw-int-commercial__grid { grid-template-columns: 1fr; }
  .tw-int-commercial__image { min-height: 480px; }
  .tw-int-commercial__content { max-width: none; width: min(calc(100% - 64px),1240px); margin-inline: auto; padding: 80px 0; }
  .tw-int-property-types__grid { grid-template-columns: 1fr 1fr; }
  .tw-int-property-types article:first-child { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .tw-int-container { width: min(calc(100% - 36px), 1240px); }
  .tw-int-hero__content .tw-int-container { width:min(calc(100% - 36px),1240px); }
  .tw-int-hero__copy { padding:150px 0 66px; }
  .tw-int-hero h1 { font-size:clamp(3.1rem,14vw,4.7rem); }
  .tw-int-hero__image { min-height:330px; }
  .tw-int-definition, .tw-int-scope, .tw-int-property-types, .tw-int-value, .tw-int-service-area, .tw-int-faq { padding: 70px 0; }
  .tw-int-scope-row { grid-template-columns: 45px 1fr; gap: 14px 18px; padding: 28px 0; }
  .tw-int-scope-row__copy { grid-column: 2; }
  .tw-int-commercial__image { min-height: 330px; }
  .tw-int-commercial__content { width: min(calc(100% - 36px),1240px); padding: 70px 0; }
  .tw-int-commercial__points, .tw-int-property-types__grid { grid-template-columns: 1fr; }
  .tw-int-property-types article:first-child { grid-column: auto; }
  .tw-int-property-types article { min-height: 270px; }
  .tw-int-cta { padding: 72px 0; }
  .tw-int-cta__inner { align-items: flex-start; flex-direction: column; }
}