/*
Theme Name: Northline Construction
Version: 1.0.0
Text Domain: kit
*/

:root {
  --graphite: #1f2328;
  --graphite-2: #2b3036;
  --concrete: #d8c29a;
  --concrete-2: #efe3cd;
  --orange: #e4541f;
  --char: #23272b;
  --char-2: #5b6168;
  --line: #e1ddd6;
  --gut: 24px;
  --head: 84px;
  --display: 'Barlow Semi Condensed', 'Arial Narrow', Arial, sans-serif;
  --body: 'Commissioner', 'Helvetica Neue', Arial, sans-serif;
}
@media (max-width: 781px) { :root { --gut: 18px; --head: 68px; } }

html { scroll-behavior: smooth; }
body { font-family: var(--body); color: var(--char); background: #fff; font-size: 17px; line-height: 1.65; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; margin: 0; line-height: 1.02; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--gut); }
.kicker { font-family: var(--display); font-weight: 600; font-size: 19px; color: var(--orange); margin: 0 0 10px; }

/* Header */
.masthead { background: #fff; border-bottom: 1px solid var(--line); }
.masthead-in { height: var(--head); max-width: 1240px; margin: 0 auto; padding: 0 var(--gut); display: flex; align-items: center; gap: 24px; }
.brand { gap: 12px; }
.brand-mark { width: 14px; height: 34px; background: var(--orange); display: inline-block; clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%); }
.brand-name { font-family: var(--display); font-weight: 700; font-size: 24px; letter-spacing: .01em; text-transform: uppercase; color: var(--graphite); }
.site-nav { gap: 22px; }
.nav-list { gap: 22px; }
.nav-list a { font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--char); padding: 6px 0; border-bottom: 2px solid transparent; transition: border-color .2s; }
.nav-list a:hover, .current-menu-item > a { border-bottom-color: var(--orange); }
.nav-call { text-decoration: none; font-weight: 600; color: var(--graphite); white-space: nowrap; }
.nav-quote { text-decoration: none; background: var(--orange); color: #fff; font-family: var(--display); font-weight: 700; font-size: 18px; padding: 11px 20px; white-space: nowrap; transition: background .2s; }
.nav-quote:hover { background: #c7431a; }
.nav-toggle { display: none; }
@media (max-width: 1080px) {
  .brand-name { font-size: 20px; }
  .nav-toggle { display: grid; gap: 6px; place-content: center; margin-left: auto; width: 44px; height: 44px; background: none; border: 0; padding: 0; cursor: pointer; }
  .nav-toggle span { display: block; width: 26px; height: 2px; background: var(--graphite); transition: translate .25s, rotate .25s, opacity .2s; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { translate: 0 8px; rotate: 45deg; }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { translate: 0 -8px; rotate: -45deg; }
  .site-nav { background: #fff; border-top: 1px solid var(--line); padding: 8px var(--gut) 20px; box-shadow: 0 24px 40px -30px rgb(0 0 0 / .4); }
  .nav-list a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .nav-quote { text-align: center; margin-top: 8px; }
}

/* Hero: the loop, the words in a graphite band running off the left edge */
.hero { position: relative; height: min(86vh, 62vw); min-height: 520px; overflow: hidden; isolation: isolate; background: var(--graphite); }
.hero .hero-bg { position: absolute; inset: -10% 0 0; z-index: -2; }
.hero .hero-bg img, .hero .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.hero .hero-video { z-index: -1; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgb(20 18 16 / .78) 0%, rgb(20 18 16 / .45) 45%, rgb(20 18 16 / .05) 80%), linear-gradient(180deg, rgb(20 18 16 / 0) 55%, rgb(20 18 16 / .55) 100%); pointer-events: none; }
.hero .hero-band { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 0 var(--gut) 64px; color: #fff; }
.hero .hero-band > .wp-block-group__inner-container { max-width: 680px; }
.hero .hero-band > .wp-block-group__inner-container { display: contents; }
.hero .kicker { color: var(--orange); }
.hero h1 { font-size: clamp(40px, 5.6vw, 82px); margin-bottom: 18px; text-transform: none; letter-spacing: -.01em; line-height: .98; text-shadow: 0 2px 30px rgb(0 0 0 / .45); }
.hero .hero-lead { font-size: 19px; color: rgb(255 255 255 / .9); margin-bottom: 28px; max-width: 520px; text-shadow: 0 1px 14px rgb(0 0 0 / .5); }
.hero .wp-block-buttons { gap: 12px 16px; }
.hero .is-quiet .wp-block-button__link { color: #fff; border-color: rgb(255 255 255 / .6); }
.hero .fx-vpause { bottom: 18px; }
@media (max-width: 781px) {
  .hero { height: auto; min-height: 0; }
  .hero .hero-bg { display: none; }
  .hero .hero-video { position: relative; inset: auto; height: 118vw; display: block; }
  .hero::after { background: linear-gradient(180deg, rgb(20 18 16 / 0) 15%, rgb(20 18 16 / .55) 55%, rgb(20 18 16 / .9) 100%); }
  .hero .hero-band { position: relative; padding: 0 var(--gut) 30px; margin-top: -200px; }
  .hero h1 { font-size: clamp(30px, 8.6vw, 40px); margin-bottom: 10px; }
  .hero .hero-lead { font-size: 16px; margin-bottom: 18px; }
}

/* The order of a job */
.job { position: relative; max-width: 1180px; margin: 0 auto; padding: 96px var(--gut) 40px calc(var(--gut) + 56px); }
.job > .wp-block-group__inner-container { display: contents; }
.job::before { content: ""; position: absolute; left: calc(var(--gut) + 18px); top: 110px; bottom: 60px; width: 4px; background: var(--concrete); }
.job .job-fill { position: absolute; left: calc(var(--gut) + 18px); top: 110px; width: 4px; height: calc((100% - 170px) * var(--fill, 0)); background: var(--orange); transition: height .2s linear; }
.job-intro { max-width: 760px; margin: 0 0 56px; }
.job-intro h2 { font-size: clamp(36px, 4.4vw, 60px); text-transform: none; margin-bottom: 12px; }
.job-intro p { font-size: 19px; color: var(--char-2); margin: 0; }
.stage { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center; padding: 34px 0; position: relative; }
.stage > .wp-block-group__inner-container { display: contents; }
.stage::before { content: ""; position: absolute; left: -46px; top: 56px; width: 20px; height: 20px; background: #fff; border: 4px solid var(--concrete); border-radius: 50%; transition: border-color .4s, background .4s; }
.stage.in::before { border-color: var(--orange); background: var(--orange); }
.stage:nth-child(even) .stage-words { order: 2; }
.stage .num { font-family: var(--display); font-weight: 700; font-size: 72px; line-height: 1; color: var(--concrete); margin: 0 0 6px; transition: color .5s; }
.stage.in .num { color: var(--orange); }
.stage h3 { font-size: clamp(28px, 3vw, 42px); text-transform: none; margin-bottom: 12px; }
.stage p { color: var(--char-2); max-width: 520px; margin: 0; }
.stage .photo-slot, .stage .stage-photo .wp-block-image { box-shadow: 0 40px 70px -50px rgb(0 0 0 / .6); }
.stage .stage-photo .wp-block-image { margin: 0; overflow: hidden; }
.stage .stage-photo img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; transition: scale .9s cubic-bezier(.2,.7,.2,1); }
.stage:hover .stage-photo img { scale: 1.04; }
.js .stage .stage-words, .js .stage .stage-photo { opacity: 0; translate: -30px 0; transition: opacity .7s ease, translate .9s cubic-bezier(.2,.7,.2,1); }
.js .stage:nth-child(even) .stage-words, .js .stage:nth-child(even) .stage-photo { translate: 30px 0; }
.js .stage.in .stage-words, .js .stage.in .stage-photo { opacity: 1; translate: 0 0; }
@media (max-width: 781px) {
  .job { padding-left: calc(var(--gut) + 40px); }
  .job::before, .job .job-fill { left: calc(var(--gut) + 10px); }
  .stage { grid-template-columns: 1fr; gap: 20px; padding: 28px 0; }
  .stage::before { left: -38px; top: 10px; }
  .stage:nth-child(even) .stage-words { order: 0; }
  .stage .num { font-size: 52px; }
}

/* Bands */
.band { padding: 88px var(--gut); }
.band > .wp-block-group__inner-container { max-width: 1180px; margin: 0 auto; }
.band.is-concrete { background: var(--concrete-2) repeating-linear-gradient(180deg, transparent 0 46px, rgb(120 90 40 / .08) 46px 47px); }
.band.is-graphite { background: var(--graphite); color: #fff; }
.band h2 { font-size: clamp(32px, 3.6vw, 50px); text-transform: none; margin-bottom: 14px; }
.band p { max-width: 640px; color: inherit; }
.band.is-graphite p { color: rgb(255 255 255 / .82); }
.build-links { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 28px; }
.build-links a { font-family: var(--display); font-weight: 700; font-size: 26px; text-decoration: none; color: var(--graphite); border-bottom: 3px solid var(--orange); padding-bottom: 2px; transition: color .2s; }
.build-links a:hover { color: var(--orange); }
.reviews-slot { border: 1px dashed rgb(31 35 40 / .35); padding: 32px; max-width: 720px; margin: 24px 0 0; }
.reviews-slot > .wp-block-group__inner-container { display: contents; }
.reviews-slot p { margin: 0; }
.quote-band .wp-block-columns { align-items: start; gap: 56px; }
.quote-band .big-phone, .quote-band .phone-slot { display: inline-block; font-family: var(--display); font-weight: 700; font-size: clamp(26px, 3vw, 40px); color: var(--graphite); text-decoration: none; margin: 8px 0 12px; }
.quote-band .phone-slot { color: var(--char-2); }
@media (max-width: 781px) { .band { padding: 60px var(--gut); } }

/* Buttons */
.wp-block-button__link, .btn-solid { font-family: var(--display); font-weight: 700; font-size: 18px; background: var(--orange); color: #fff; border: 2px solid var(--orange); border-radius: 0; padding: 12px 24px; text-decoration: none; transition: background .2s, color .2s, border-color .2s; }
.wp-block-button__link:hover, .btn-solid:hover { background: #c7431a; border-color: #c7431a; }
.is-quiet .wp-block-button__link { background: none; color: var(--graphite); border-color: var(--graphite); text-decoration: none; padding: 12px 24px; }
.is-quiet .wp-block-button__link:hover { background: var(--graphite); color: #fff; }
.call-link { font-weight: 600; color: var(--graphite); text-decoration: none; }

/* Inner pages */
.page-head { position: relative; height: min(44vh, 32vw); min-height: 240px; overflow: hidden; background: var(--graphite); }
.page-head .wp-block-image { position: absolute; inset: 0; margin: 0; }
.page-head img { width: 100%; height: 118%; object-fit: cover; }
.page-head::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(31 35 40 / .85) 0%, rgb(31 35 40 / .3) 60%, rgb(31 35 40 / .1)); }
.page-head .head-words { position: absolute; inset: auto 0 36px 0; z-index: 1; color: #fff; max-width: 1180px; margin: 0 auto; padding: 0 var(--gut); }
.page-head .head-words > .wp-block-group__inner-container { display: contents; }
.page-head h1 { font-size: clamp(36px, 5vw, 66px); text-transform: none; }

.statement { padding: 64px var(--gut) 24px; max-width: 1180px; margin: 0 auto; }
.statement .lead { font-family: var(--display); font-weight: 600; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.3; max-width: 820px; color: var(--char); }
.statement p { max-width: 720px; color: var(--char-2); }

.rows { max-width: 1180px; margin: 0 auto; padding: 16px var(--gut) 80px; }
.rows > .wp-block-group__inner-container { display: contents; }
.row { display: grid; grid-template-columns: 1fr 2fr auto; gap: 32px; align-items: center; padding: 28px 0; border-top: 1px solid var(--line); }
.row > .wp-block-group__inner-container { display: contents; }
.row h3 { font-size: 30px; }
.row p { margin: 0; color: var(--char-2); }
@media (max-width: 781px) { .row { grid-template-columns: 1fr; gap: 10px; } }

.projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1180px; margin: 0 auto; padding: 24px var(--gut) 90px; }
.projects > .wp-block-group__inner-container { display: contents; }
.project > .wp-block-group__inner-container { display: contents; }
.project .wp-block-image { margin: 0; overflow: hidden; }
.project img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: scale .9s cubic-bezier(.2,.7,.2,1); }
.project:hover img { scale: 1.04; }
.project .cap { font-family: var(--display); font-weight: 600; font-size: 18px; margin: 10px 0 0; color: var(--char-2); }
@media (max-width: 781px) { .projects { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .projects { grid-template-columns: 1fr; } }

.photo-slot { display: grid; place-content: center; aspect-ratio: 3/2; background: var(--concrete-2) repeating-linear-gradient(180deg, transparent 0 46px, rgb(120 90 40 / .1) 46px 47px); border: 1px dashed rgb(120 90 40 / .45); color: var(--char-2); font-family: var(--display); font-weight: 600; font-size: 17px; text-align: center; padding: 20px; }

/* Forms */
.form-wrap { max-width: 1180px; margin: 0 auto; padding: 24px var(--gut) 100px; }
.form-wrap > .wp-block-group__inner-container { display: grid; grid-template-columns: 1fr 1.3fr; gap: 64px; }
@media (max-width: 781px) { .form-wrap > .wp-block-group__inner-container { grid-template-columns: 1fr; gap: 32px; } }
.kit-form form { gap: 20px; }
.kit-form label { font-weight: 600; font-size: 15px; color: var(--char); gap: 8px; }
.kit-form input, .kit-form select, .kit-form textarea { border: 2px solid var(--concrete); border-radius: 0; background: #fff; padding: 12px 14px; font-size: 17px; color: var(--char); }
.kit-form input:focus, .kit-form select:focus, .kit-form textarea:focus { outline: none; border-color: var(--orange); }
.kit-form input.touched:invalid { border-color: #b3261e; }
.kit-form .form-note { padding: 14px 18px; border: 2px solid var(--graphite); }
.kit-form .form-note.err { border-color: #b3261e; color: #b3261e; }

/* Chips, footer, phone bar */
.chip { display: inline-block; font-family: var(--display); font-weight: 600; font-size: 14px; color: var(--char-2); border: 1px solid var(--line); padding: 4px 10px; margin-right: 8px; background: #fff; }
.foot { background: var(--graphite) repeating-linear-gradient(45deg, transparent 0 14px, rgb(255 255 255 / .025) 14px 15px); color: #fff; padding: 72px var(--gut) 36px; }
.foot-in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
.foot-name { font-family: var(--display); font-weight: 700; font-size: 26px; text-transform: uppercase; margin: 0 0 12px; }
.foot-line { color: rgb(255 255 255 / .75); max-width: 380px; }
.foot-chips { margin: 0; }
.foot .chip { background: none; color: rgb(255 255 255 / .7); border-color: rgb(255 255 255 / .25); }
.foot-title { font-family: var(--display); font-weight: 600; font-size: 19px; color: var(--orange); margin: 0 0 12px; }
.foot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-list a { color: rgb(255 255 255 / .85); text-decoration: none; }
.foot-list a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.foot-contact { display: grid; gap: 6px; margin: 0; }
.foot-contact a { color: #fff; text-decoration: none; font-weight: 600; }
.foot-base { max-width: 1180px; margin: 44px auto 0; padding-top: 22px; border-top: 1px solid rgb(255 255 255 / .12); font-size: 14px; color: rgb(255 255 255 / .6); }
@media (max-width: 781px) { .foot-in { grid-template-columns: 1fr; } }

.phone-bar { display: none; }
@media (max-width: 781px) {
  body { padding-bottom: 62px; }
  .phone-bar { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; box-shadow: 0 -10px 30px -16px rgb(0 0 0 / .5); translate: 0 110%; transition: translate .35s ease; }
  .phone-bar.show { translate: 0 0; }
  .phone-bar a { text-align: center; padding: 17px 10px; font-family: var(--display); font-weight: 700; font-size: 18px; text-decoration: none; background: var(--graphite); color: #fff; }
  .phone-bar a.is-quote { background: var(--orange); }
}

/* Reveal */
.js .rise { opacity: 0; translate: 0 22px; transition: opacity .7s ease, translate .9s cubic-bezier(.2,.7,.2,1); }
.js .rise.in { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  .js .rise, .js .stage .stage-words, .js .stage .stage-photo { opacity: 1; translate: 0 0; }
  .job .job-fill { height: calc(100% - 170px) !important; }
  .stage .num { color: var(--orange); }
  .hero .hero-bg img, .hero .hero-video { transform: none !important; }
}