/* Crestline Roofing & Exteriors: slate + safety orange, Bespoke Stencil + Satoshi (Fontshare, ITF FFL).
   Page changes use the browser's own cross-document View Transitions (bottom of this file): no framework, plain multi-page site. */
:root {
  --bg: #eceeef; --panel: #f7f8f8; --ink: #172028; --slate: #24313b; --muted: #56626b; --line: #d2d7da;
  --orange: #ff5a1f; --orange-ink: #1b1108;
  --display: 'Bespoke Stencil', 'Arial Narrow', sans-serif; --sans: 'Satoshi', system-ui, sans-serif;
  --ease: cubic-bezier(.76, 0, .24, 1); --out: cubic-bezier(.23, 1, .32, 1);
  --r: 4px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--sans); }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
.wrap { width: min(1240px, 100% - 48px); margin: 0 auto; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -.005em; line-height: .95; text-transform: uppercase; }
.eyebrow { font: 700 12px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--orange); }
.lead { font-size: clamp(17px, 1.5vw, 20px); max-width: 54ch; }

/* header: named for the view transition, so it stays put while the page underneath changes */
.top { position: sticky; top: 0; z-index: 50; background: var(--ink); color: #fff; view-transition-name: header; }
.top .wrap { display: flex; align-items: center; gap: 28px; height: 72px; }
.logo { display: flex; align-items: center; gap: 12px; font: 800 22px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.logo i { width: 30px; height: 20px; background: var(--orange); clip-path: polygon(0 100%, 50% 0, 100% 100%, 76% 100%, 50% 42%, 24% 100%); }
.logo small { display: block; margin-top: 4px; font: 500 10px/1 var(--sans); letter-spacing: .2em; color: #9fb0bb; }
.menu { display: flex; gap: 2px; margin-left: auto; }
.menu a { padding: 8px 14px; border-radius: var(--r); font-size: 15px; font-weight: 500; color: #c3ced5; white-space: nowrap; transition: color .2s, background-color .2s; }
.menu a:hover { color: #fff; }
.menu a[aria-current] { color: #fff; background: rgba(255, 255, 255, .07); box-shadow: inset 0 -2px 0 var(--orange); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 22px; border-radius: var(--r); font: 700 15px/1 var(--sans); letter-spacing: .02em; white-space: nowrap; cursor: pointer; border: 0; transition: transform .16s ease-out, background-color .2s, box-shadow .2s; }
.btn:active { transform: scale(.97); }
.btn .ph { font-size: 18px; }
.btn-orange { background: var(--orange); color: var(--orange-ink); }
.btn-orange:hover { background: #ff7440; }
.btn-ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px #fff; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--slate); }
.top .call { height: 44px; padding: 0 16px; font-size: 14px; }

/* home hero */
.hero { position: relative; display: flex; align-items: flex-end; min-height: clamp(560px, 88vh, 860px); overflow: hidden; color: #fff; background: var(--slate); }
.hero .poster, .hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 20, 25, .86), rgba(14, 20, 25, .45) 58%, rgba(14, 20, 25, .08)), linear-gradient(0deg, rgba(14, 20, 25, .7), transparent 55%); }
.hero .wrap { position: relative; z-index: 1; padding-bottom: 52px; }
.hero h1 { font-size: clamp(50px, 8.4vw, 124px); max-width: 11ch; margin: 18px 0 22px; }
.hero .lead { color: #d3dbe0; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.facts { display: flex; flex-wrap: wrap; gap: 10px 34px; margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .18); font-size: 15px; color: #c9d3d9; }
.facts span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; background: var(--orange); transform: rotate(45deg); vertical-align: 1px; }

/* sections */
.section { padding: clamp(72px, 9vw, 128px) 0; }
.head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px 40px; margin-bottom: 44px; }
.head h2 { font-size: clamp(42px, 5.6vw, 80px); }
.head p { max-width: 44ch; color: var(--muted); }

/* service rows (home) */
.rows { border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 90px 1fr 1.3fr 40px; align-items: center; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.row .n { font: 800 28px/1 var(--display); color: var(--orange); }
.row h3 { font-size: clamp(26px, 2.6vw, 38px); }
.row p { color: var(--muted); }
.row .arr { font-size: 26px; justify-self: end; transition: transform .3s var(--out); }
.row:hover .arr { transform: translateX(6px); }

/* project cards */
.work { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; }
.work .pcard:nth-child(even) { margin-top: 88px; }
.pcard { display: block; }
.shot { display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--r); background: var(--slate); }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--out); }
.pcard:hover .shot img, a.shot:hover img, .next:hover .shot img { transform: scale(1.04); }
.pcard .meta { display: flex; justify-content: space-between; gap: 16px; margin-top: 18px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.pcard h3 { margin-top: 10px; font-size: clamp(28px, 2.6vw, 38px); }
.pcard .kind { margin-top: 6px; color: var(--muted); }

/* storm band */
.storm { position: relative; overflow: hidden; color: #fff; background: #0e1419; }
.storm > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.storm .wrap { position: relative; }
.storm .head p { color: #c4ced4; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; counter-reset: s; }
.step { padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .22); }
.step::before { counter-increment: s; content: "0" counter(s); display: block; margin-bottom: 18px; font: 800 46px/1 var(--display); color: var(--orange); }
.step h3 { margin-bottom: 10px; font-size: 26px; }
.step p { font-size: 15px; color: #c4ced4; }

/* call-to-action band + footer */
.band { background: var(--orange); color: var(--orange-ink); }
.band .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; padding: 56px 0; }
.band h2 { max-width: 18ch; font-size: clamp(34px, 4.4vw, 60px); }
.foot { background: var(--ink); color: #9fb0bb; font-size: 14px; }
.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding: 34px 0; }

/* inner page heading */
.phero { padding: clamp(60px, 8vw, 112px) 0 clamp(40px, 5vw, 64px); }
.phero h1 { margin: 16px 0 22px; font-size: clamp(58px, 10vw, 150px); }
.phero .lead { color: var(--muted); }

/* projects page */
.plist { display: grid; gap: clamp(64px, 8vw, 112px); }
.pitem { display: grid; grid-template-columns: 1.45fr 1fr; align-items: center; gap: clamp(24px, 4vw, 64px); }
.pitem:nth-child(even) .shot { order: 2; }
.pitem .shot { aspect-ratio: 16 / 10; }
.pitem h2 { margin: 12px 0 16px; font-size: clamp(36px, 4vw, 58px); }
.pitem p { color: var(--muted); }
.pitem dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 22px; margin: 22px 0 28px; font-size: 15px; }
.pitem dt { color: var(--muted); }
.pitem dd { font-weight: 500; }

/* project page */
.phead { padding-top: clamp(36px, 5vw, 64px); }
.phead .intro { display: grid; grid-template-columns: 1.5fr 1fr; align-items: end; gap: 24px 48px; margin-bottom: 36px; }
.back { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); transition: color .2s; }
.back:hover { color: var(--ink); }
.ptitle { margin-top: 20px; font-size: clamp(46px, 6.4vw, 96px); }
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.specs div { padding: 12px 0; border-top: 1px solid var(--line); }
.specs span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.specs b { font-weight: 500; font-size: 16px; }
.phead .shot { aspect-ratio: 21 / 9; }
.story { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 6vw, 96px); }
.story p + p { margin-top: 1em; }
.story .big { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.35; font-weight: 500; }
.story > div > p:not(.big):not(.eyebrow) { color: var(--muted); }
.did { list-style: none; margin-top: 12px; }
.did li { position: relative; padding: 14px 0 14px 30px; border-bottom: 1px solid var(--line); }
.did li::before { content: ""; position: absolute; left: 0; top: 21px; width: 13px; height: 11px; background: var(--orange); clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pair img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.next { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: clamp(24px, 4vw, 56px); padding-top: 40px; border-top: 1px solid var(--line); }
.next .shot { aspect-ratio: 16 / 9; }
.next h2 { margin: 12px 0 22px; font-size: clamp(36px, 4.4vw, 62px); }

/* services page */
.svc { display: grid; grid-template-columns: 1fr 1.3fr 190px; align-items: start; gap: 32px; padding: 36px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 90px; }
.svcs { border-top: 1px solid var(--line); }
.svc h2 { font-size: clamp(30px, 3.2vw, 46px); }
.svc p { color: var(--muted); }
.svc ul { margin-top: 12px; padding-left: 18px; }
.svc li { padding: 2px 0; }
.svc .price { text-align: right; font: 800 28px/1 var(--display); color: var(--ink); white-space: nowrap; }
.svc .price small { display: block; margin-top: 8px; font: 500 13px/1.4 var(--sans); color: var(--muted); white-space: normal; }
.banner img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; border-radius: var(--r); }
.qa details { padding: 20px 0; border-bottom: 1px solid var(--line); }
.qa details:first-child { border-top: 1px solid var(--line); }
.qa summary { display: flex; justify-content: space-between; gap: 16px; font-size: 19px; font-weight: 700; cursor: pointer; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; font-size: 26px; line-height: 1; color: var(--orange); }
.qa details[open] summary::after { content: "\2013"; }
.qa details p { max-width: 70ch; margin-top: 10px; color: var(--muted); }

/* contact */
.contact .grid { display: grid; grid-template-columns: 1fr 1.3fr; align-items: start; gap: clamp(32px, 6vw, 88px); }
.info .phone { display: block; margin: 10px 0 32px; font: 800 clamp(34px, 4vw, 52px)/1 var(--display); }
.hours { list-style: none; margin-top: 10px; }
.hours li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.areas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.areas span { padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); font-size: 14px; }
form { padding: clamp(22px, 3vw, 40px); border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.fields { display: grid; gap: 16px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field > span:first-child { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; }
.field input, .field select, .field textarea { width: 100%; height: 50px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: var(--r); background: #fff; font-size: 16px; transition: border-color .2s; }
.field textarea { height: 116px; padding: 12px 14px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.field.bad input { border-color: #c4361b; }
.err { display: block; min-height: 18px; margin-top: 4px; font-size: 13px; color: #c4361b; }
.sent-note { display: none; }
form.sent .fields { display: none; }
form.sent .sent-note { display: block; }
.sent-note h3 { margin-bottom: 12px; font-size: 44px; }
.sent-note p { color: var(--muted); }

/* reveal on scroll, done by the browser (scroll-driven animation), no script */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rv { animation: rv linear both; animation-timeline: view(); animation-range: entry 0% entry 75%; }
    @keyframes rv { from { opacity: 0; transform: translateY(44px); } }
  }
}

/* ---------- page transitions (View Transitions API, cross-document) ----------
   1. every same-site navigation: the new page wipes up from the bottom behind an orange bar, the old one sinks and darkens
   2. the header is named, so it never moves
   3. project photos: assets/vt.js names the photo you clicked and its twin on the next page "shot", and the browser morphs one into the other
   Browsers without support (Firefox today) just load the next page normally. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.vt-bar { position: fixed; left: 0; right: 0; top: 100%; height: 8px; background: var(--orange); pointer-events: none; view-transition-name: vt-bar; }
::view-transition-group(*) { animation-duration: .8s; animation-timing-function: var(--ease); }
::view-transition-old(root) { animation: vt-sink .8s var(--ease) both; }
::view-transition-new(root) { animation: vt-wipe .8s var(--ease) both; }
@keyframes vt-sink { to { transform: translateY(-6vh) scale(.985); filter: brightness(.45); } }
@keyframes vt-wipe { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
::view-transition-group(vt-bar) { animation: none; }
::view-transition-old(vt-bar) { display: none; }
::view-transition-new(vt-bar) { animation: vt-bar .8s var(--ease) both; }
@keyframes vt-bar { to { transform: translateY(calc(-100vh - 8px)); } }
::view-transition-old(shot), ::view-transition-new(shot) { height: 100%; object-fit: cover; }
::view-transition-new(shot):only-child { animation: vt-in .35s .45s ease-out both; }
::view-transition-old(shot):only-child { animation: vt-out .25s ease-out both; }
@keyframes vt-in { from { opacity: 0; } }
@keyframes vt-out { to { opacity: 0; } }

/* phones */
@media (max-width: 900px) {
  .top .wrap { flex-wrap: wrap; height: auto; gap: 10px 16px; padding-top: 12px; }
  .top .call { margin-left: auto; }
  .menu { order: 3; width: calc(100% + 16px); margin: 0 -8px; padding-bottom: 8px; overflow-x: auto; scrollbar-width: none; }
  .row { grid-template-columns: 44px 1fr 28px; gap: 6px 14px; padding: 22px 0; }
  .row .n { font-size: 22px; }
  .row p { grid-column: 2; grid-row: 2; font-size: 15px; }
  .row .arr { grid-column: 3; grid-row: 1; font-size: 22px; }
  .work { grid-template-columns: 1fr; gap: 48px; }
  .work .pcard:nth-child(even) { margin-top: 0; }
  .steps { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .pitem { grid-template-columns: 1fr; }
  .pitem:nth-child(even) .shot { order: 0; }
  .phead .intro, .story, .next, .contact .grid, .svc { grid-template-columns: 1fr; }
  .phead .shot { aspect-ratio: 4 / 3; }
  .svc { gap: 14px; }
  .svc .price { text-align: left; }
  .pair { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .wrap { width: calc(100% - 32px); }
  .logo { font-size: 19px; }
  .top .call span { display: none; }
  .top .call { width: 44px; padding: 0; }
  .steps { grid-template-columns: 1fr; }
  .two { grid-template-columns: 1fr; }
  .hero .actions .btn { flex: 1 1 100%; }
  .band .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .shot img, .row .arr { transition: none; }
}