/* Ridgeline Builders, concept site by Curtis Builds Sites
   Color: about 90% neutral base, 7% text, 3% accent (buttons, links, small marks only)
   Type: one family, Schibsted Grotesk. Reading text 16 to 18px, headings larger.
   Spacing: everything on an 8px grid (--s1 = 8px ... --s16 = 128px). */

:root {
  /* neutral base */
  --bg: #F4F5F6;
  --surface: #FFFFFF;
  --sand: #E9EBEE;
  --line: #D7DBE0;
  --night: #16191D;
  --night-line: #2C3138;
  --ok: #3F8A55;
  /* text */
  --text: #16191D;
  --text-2: #4E555D;
  --text-inv: #F4F5F6;
  --text-inv-2: #AEB5BD;
  /* accent, used sparingly */
  --accent: #A8461A;
  --accent-hover: #8E3A15;
  --accent-on-dark: #E8A06A;

  --font: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px;
  --s8: 64px; --s10: 80px; --s12: 96px; --s16: 128px;
  --radius: 8px;
  --wrap: 1200px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 1.0625rem/1.6 var(--font); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
h1, h2, h3 { font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.hero :focus-visible, .cta :focus-visible, .footer :focus-visible, .demo-bar :focus-visible { outline-color: var(--accent-on-dark); }

.wrap { width: min(var(--wrap), 100% - 2 * var(--s3)); margin-inline: auto; }
.section { padding-block: var(--s12); }
.section--sand { background: var(--sand); }
.section--white { background: var(--surface); }

/* type scale */
.h1 { font-size: clamp(40px, 6vw, 72px); line-height: 1.05; }
.h2 { font-size: clamp(32px, 4vw, 48px); line-height: 1.1; }
.h3 { font-size: 24px; line-height: 1.25; letter-spacing: -.01em; }
.lead { font-size: 1.125rem; line-height: 1.6; color: var(--text-2); max-width: 36em; }
.small { font-size: 1rem; line-height: 1.5; color: var(--text-2); }
.kicker { font-size: 16px; font-weight: 600; color: var(--text-2); }

.text-link { color: var(--accent); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* buttons: one shape, two styles */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s1); min-height: 48px; padding: var(--s1) var(--s3); border: 1px solid transparent; border-radius: var(--radius); font: 600 16px/1 var(--font); text-decoration: none; cursor: pointer; transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn--primary { background-color: var(--accent); color: #fff; }
.btn--secondary { border-color: var(--text); color: var(--text); background-color: transparent; }
.btn--light { border-color: rgba(244, 245, 246, .7); color: var(--text-inv); background-color: transparent; }
.btn:active { transform: translateY(1px); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* demo notice */
.demo-bar { background: var(--night); color: var(--text-inv-2); text-align: center; font-size: 16px; line-height: 1.5; padding: var(--s1) var(--s2); }
.demo-bar a { color: var(--text-inv); }

/* header */
.header { position: sticky; top: 0; z-index: 40; background: rgba(244, 245, 246, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 72px; }
.logo { display: inline-flex; align-items: center; gap: var(--s1); font-weight: 800; font-size: 20px; letter-spacing: -.02em; text-decoration: none; }
.logo svg { width: 32px; height: 32px; }
.logo__base { stroke: var(--accent); }
.footer .logo__base { stroke: var(--accent-on-dark); }
.links { display: flex; align-items: center; gap: var(--s4); }
.links a { position: relative; padding-block: var(--s1); font-size: 16px; font-weight: 500; color: var(--text-2); text-decoration: none; }
.links a[aria-current="page"] { color: var(--text); }
.links a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); }
.nav__cta { display: inline-flex; }
.burger { display: none; width: 48px; height: 48px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); cursor: pointer; place-items: center; }
.burger svg { width: 24px; height: 24px; }

/* hero */
.hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: min(80vh, 720px); color: var(--text-inv); background: var(--night); overflow: hidden; }
.hero__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(17, 19, 22, .82) 0%, rgba(17, 19, 22, .55) 45%, rgba(17, 19, 22, 0) 75%), linear-gradient(0deg, rgba(17, 19, 22, .55) 0%, rgba(17, 19, 22, 0) 50%); }
.hero__body { padding-block: var(--s16) var(--s10); max-width: 640px; }
.hero__body .kicker { color: var(--text-inv); }
.hero h1 { margin-top: var(--s2); }
.hero p.lead { margin-top: var(--s3); color: var(--text-inv); }
.hero .btn-row { margin-top: var(--s4); }

/* page header (inner pages) */
.page-head { padding-block: var(--s10) var(--s8); border-bottom: 1px solid var(--line); }
.page-head .h1 { margin-top: var(--s2); max-width: 14em; }
.page-head .lead { margin-top: var(--s3); }


/* section heads */
.head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s6); }
.head .lead { margin-top: var(--s2); }


/* projects */
.projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.projects--home .project:first-child { grid-column: span 2; grid-row: span 2; }
.project { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.project__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand); }
.projects--home .project:first-child .project__img { aspect-ratio: auto; flex: 1; }
.project__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.project__body { padding: var(--s3); }
.project__body .small { margin-top: var(--s1); }
@media (hover: hover) and (pointer: fine) { .project:hover .project__img img { transform: scale(1.03); } }

/* process */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); counter-reset: step; }
.steps li { position: relative; padding-top: var(--s3); border-top: 1px solid var(--line); }
.steps li::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--text); transform-origin: left; }
.steps li::before { counter-increment: step; content: "0" counter(step); display: block; font-size: 16px; font-weight: 700; color: var(--accent); }
.steps h3 { margin-top: var(--s2); }
.steps p { margin-top: var(--s1); color: var(--text-2); font-size: 16px; }

/* reviews */
.reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.review { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.review p { font-size: 17px; }
.review footer { margin-top: auto; font-size: 16px; color: var(--text-2); }
.review footer b { display: block; color: var(--text); font-weight: 600; }
.stars { display: flex; gap: 4px; color: var(--text); }
.stars svg { width: 16px; height: 16px; }
.note { margin-top: var(--s3); font-size: 16px; color: var(--text-2); }

/* call to action band */
.cta { background: var(--night); color: var(--text-inv); }
.cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); padding-block: var(--s10); }
.cta .lead { margin-top: var(--s2); color: var(--text-inv-2); }
.cta .btn--primary { background-color: var(--accent); }

/* services page detail */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s8); align-items: center; padding-block: var(--s10); border-bottom: 1px solid var(--line); }
.detail:last-child { border-bottom: 0; }
.detail:nth-child(even) .detail__img { order: 2; }
.detail__img { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--sand); }
.detail__img img { width: 100%; height: 100%; object-fit: cover; }
.detail .lead { margin-top: var(--s2); }
.checks { display: grid; gap: var(--s1); margin-top: var(--s3); }
.checks li { display: flex; align-items: flex-start; gap: var(--s1); font-size: 16px; }
.checks svg { width: 16px; height: 16px; flex: none; margin-top: 4px; color: var(--accent); }
.detail .btn { margin-top: var(--s4); }

/* contact page */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s8); align-items: start; }
.info { display: grid; gap: var(--s3); }
.info__item { display: grid; grid-template-columns: var(--s5) minmax(0, 1fr); gap: var(--s2); }
.info__item svg { width: 24px; height: 24px; color: var(--accent); margin-top: 2px; }
.info__item b { display: block; font-weight: 600; }
.info__item a { font-size: 18px; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.info__box { display: grid; gap: var(--s3); padding: var(--s3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.hours { padding: var(--s3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.hours__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s2); }
.status { display: inline-flex; align-items: center; gap: var(--s1); font-size: 16px; font-weight: 600; color: var(--text-2); }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.status.is-closed::before { background: var(--text-2); }
.hours li { display: flex; justify-content: space-between; gap: var(--s2); padding: var(--s1) 0; border-top: 1px solid var(--line); font-size: 16px; color: var(--text-2); }
.hours li.is-today { color: var(--text); font-weight: 600; }

.form { display: grid; gap: var(--s3); padding: var(--s5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.field { display: grid; gap: var(--s1); }
.field label { font-size: 16px; font-weight: 600; }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: var(--s1) var(--s2); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--text); font: 400 16px/1.5 var(--font); }
.field textarea { min-height: 128px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--text); }
.form .btn { justify-self: start; }
.form__done { font-size: 16px; color: var(--text-2); }

/* footer */

.footer { border-top: 1px solid var(--night-line); background: var(--night); color: var(--text-inv-2); padding-block: var(--s8) var(--s4); font-size: 16px; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s5); padding-bottom: var(--s5); border-bottom: 1px solid var(--night-line); }
.footer .logo { color: var(--text-inv); }
.footer p { margin-top: var(--s2); max-width: 28em; }
.footer h3 { font-size: 1.0625rem; color: var(--text-inv); letter-spacing: 0; }
.footer ul { display: grid; gap: var(--s1); margin-top: var(--s2); }
.footer a { color: var(--text-inv-2); text-decoration: none; }
.footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2); padding-top: var(--s3); }
.footer__base a { color: var(--text-inv); text-decoration: underline; text-underline-offset: 4px; }

/* scroll reveal: once, fade up */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
}

/* tablet */
@media (max-width: 960px) {
  .links, .nav__cta { display: none; }
  .burger { display: grid; }
  .header.is-open .links { display: flex; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: var(--s1) var(--s3) var(--s3); background: var(--bg); border-bottom: 1px solid var(--line); }
  .header.is-open .links a { padding-block: var(--s2); font-size: 18px; border-bottom: 1px solid var(--line); }
  .header.is-open .links a[aria-current="page"]::after { display: none; }
  .header.is-open .links a[aria-current="page"] { color: var(--accent); }
  .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .projects--home .project:first-child { grid-column: span 2; grid-row: auto; }
  .projects--home .project:first-child .project__img { aspect-ratio: 16 / 9; flex: none; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reviews { grid-template-columns: minmax(0, 1fr); }
  .detail { grid-template-columns: minmax(0, 1fr); gap: var(--s4); padding-block: var(--s8); }
  .detail:nth-child(even) .detail__img { order: 0; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid > div:first-child { grid-column: 1 / -1; }
}

/* phone */
@media (max-width: 640px) {
  .section { padding-block: var(--s8); }
  .hero { min-height: 640px; }
  .hero::before { background: linear-gradient(0deg, rgba(17, 19, 22, .9) 0%, rgba(17, 19, 22, .6) 55%, rgba(17, 19, 22, .2) 100%); }
  .hero__body { padding-block: var(--s16) var(--s6); }
  .hero .btn-row .btn, .cta .btn { width: 100%; }
  .page-head { padding-block: var(--s8) var(--s6); }
  .head { margin-bottom: var(--s4); }
  .projects { grid-template-columns: minmax(0, 1fr); }
  .projects--home .project:first-child { grid-column: auto; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .cta__inner { padding-block: var(--s8); }
  .form { padding: var(--s3); }
  .form .row { grid-template-columns: minmax(0, 1fr); }
  .form .btn { justify-self: stretch; }
  .footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
}

/* How we work: a line draws across the four steps in order, and each step appears as the line reaches it */
.steps li:nth-child(2) { --i: 1; } .steps li:nth-child(3) { --i: 2; } .steps li:nth-child(4) { --i: 3; }
@media (prefers-reduced-motion: no-preference) {
  .js .steps[data-reveal] { opacity: 1; transform: none; }
  .js .steps[data-reveal]:not(.is-in) li::after { transform: scaleX(0); }
  .js .steps[data-reveal]:not(.is-in) li > *, .js .steps[data-reveal]:not(.is-in) li::before { opacity: 0; transform: translateY(8px); }
  .steps li::after { transition: transform .6s cubic-bezier(.65, 0, .35, 1) calc(var(--i, 0) * .45s); }
  .steps li::before { transition: opacity .4s var(--ease) calc(var(--i, 0) * .45s + .3s), transform .4s var(--ease) calc(var(--i, 0) * .45s + .3s); }
  .steps li > * { transition: opacity .6s var(--ease) calc(var(--i, 0) * .45s + .4s), transform .6s var(--ease) calc(var(--i, 0) * .45s + .4s); }
  .steps li > p { transition-delay: calc(var(--i, 0) * .45s + .5s); }
}
.steps li::before { display: inline-block; }

/* Reviews: a slow feed that loops (the second set is a hidden copy), keeps moving on hover, pauses on keyboard focus */
.rev-feed { overflow: hidden; margin-inline: calc(var(--s3) * -1); padding-inline: var(--s3); -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--s6), #000 calc(100% - var(--s6)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--s6), #000 calc(100% - var(--s6)), transparent); }
.rev-track { display: flex; gap: var(--s3); width: max-content; padding-block: var(--s1); }
.rev-track .review { flex: none; width: 360px; }
@media (prefers-reduced-motion: no-preference) {
  .rev-track { animation: rev-feed 60s linear infinite; }
  .rev-feed:focus-within .rev-track { animation-play-state: paused; } /* keyboard focus still pauses it so the text can be read */
}
@keyframes rev-feed { to { transform: translateX(calc(-50% - var(--s3) / 2)); } }
@media (prefers-reduced-motion: reduce) {
  .rev-feed { overflow-x: auto; scroll-snap-type: x mandatory; }
  .rev-track .review { scroll-snap-align: start; }
  .rev-track .review[aria-hidden="true"] { display: none; }
}
@media (max-width: 640px) { .rev-track .review { width: 296px; } }

/* Page changes: the header holds still while the page underneath crossfades and settles */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .demo-bar { view-transition-name: demo-bar; }
  .header { view-transition-name: site-header; }
  ::view-transition-group(root) { animation-duration: .55s; }
  ::view-transition-old(root) { animation: rl-page-out .28s cubic-bezier(.4, 0, 1, 1) both; }
  ::view-transition-new(root) { animation: rl-page-in .5s cubic-bezier(.2, .7, .2, 1) .12s both; }
  ::view-transition-group(site-header), ::view-transition-group(demo-bar) { animation: none; }
}
@keyframes rl-page-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes rl-page-in { from { opacity: 0; transform: translateY(16px); } }

/* Button hover: a fill wipes in from the left and the arrow nudges forward. No glow, no lift. */
/* Hover fill wipes in from the left as a background layer (no pseudo-element, so contrast tools read the real resting background) */
.btn { --fill: transparent; background-image: linear-gradient(var(--fill), var(--fill)); background-repeat: no-repeat; background-size: 0% 100%; background-position: right; transition: background-size .45s cubic-bezier(.65, 0, .35, 1), color .3s var(--ease), border-color .2s var(--ease); }
.btn--primary { --fill: var(--accent-hover); }
.btn--secondary { --fill: var(--text); }
.btn--light { --fill: var(--text-inv); }
.btn svg { transition: transform .45s cubic-bezier(.65, 0, .35, 1); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background-size: 100% 100%; background-position: left; }
  .btn:hover svg { transform: translateX(4px); }
}
.btn:disabled { background-image: none; }
@media (prefers-reduced-motion: reduce) { .btn, .btn svg { transition: none; } }

/* Hero entrance, once on load: the photo settles from slightly close and dim,
   the headline rises line by line from behind a mask, then the copy and buttons follow */
.hero h1 .ln { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.hero h1 .ln > span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .hero__img { animation: rl-hero-img 1.8s cubic-bezier(.2, .7, .2, 1) both; }
  .hero::before { animation: rl-fade 1.2s ease-out both; }
  .hero h1 .ln > span { animation: rl-line .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: .35s; }
  .hero h1 .ln + .ln > span { animation-delay: .47s; }
  .hero__body > .kicker { animation: rl-up .7s cubic-bezier(.2, .7, .2, 1) .25s both; }
  .hero__body > .lead { animation: rl-up .8s cubic-bezier(.2, .7, .2, 1) .7s both; }
  .hero__body > .btn-row { animation: rl-up .8s cubic-bezier(.2, .7, .2, 1) .85s both; }
}
@keyframes rl-hero-img { from { transform: scale(1.06); filter: brightness(.55); } }
@keyframes rl-fade { from { opacity: 0; } }
@keyframes rl-line { from { transform: translateY(105%); } }
@keyframes rl-up { from { opacity: 0; transform: translateY(16px); } }

/* What we build: editorial two-column list, each row a link to its service */
.svcs__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s10); align-items: start; }
.svcs__intro { display: grid; gap: var(--s2); justify-items: start; }
.svcs__intro .lead { margin-top: var(--s1); }
.svcs__intro .text-link { margin-top: var(--s2); }
.svcs__list { border-top: 1px solid var(--line); }
.svcs__list li { border-bottom: 1px solid var(--line); }
.svc { display: grid; grid-template-columns: var(--s6) minmax(0, 1fr) var(--s4); gap: var(--s3); align-items: start; padding: var(--s5) var(--s2); text-decoration: none; color: var(--text); transition: background-color .3s var(--ease); }
.svc__num { padding-top: 4px; font-size: 16px; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.svc__text { display: grid; gap: var(--s1); }
.svc__title { font-size: 24px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.svc__desc { font-size: 17px; line-height: 1.6; color: var(--text-2); max-width: 34em; }
.svc__arrow { width: 24px; height: 24px; margin-top: 4px; color: var(--text-2); transition: transform .35s var(--ease), color .3s var(--ease); }
.svc:focus-visible { outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) {
  .svc:hover { background-color: var(--sand); }
  .svc:hover .svc__arrow { transform: translate(4px, -4px); color: var(--accent); }
}
/* keep the two columns (and the pinned heading) down to tablet width; stack only on phones */
@media (max-width: 960px) { .svcs__grid { gap: var(--s5); } }
@media (max-width: 720px) {
  .svcs__grid { grid-template-columns: minmax(0, 1fr); }
  .svcs__intro { position: static; }
}
@media (max-width: 640px) {
  .svc { grid-template-columns: var(--s4) minmax(0, 1fr) var(--s3); gap: var(--s2); padding: var(--s3) 0; }
  .svc__title { font-size: 20px; }
  .svc__desc { font-size: 16px; }
  .svc__arrow { width: 20px; height: 20px; }
}
.detail { scroll-margin-top: 72px; } /* lands below the sticky header when linked from the home page */

/* Hover only where a mouse can hover, so a tap on a phone never leaves a stuck state */
@media (hover: hover) and (pointer: fine) {
  .text-link:hover { color: var(--accent-hover); }
  .btn--secondary:hover { color: var(--text-inv); }
  .btn--light:hover { color: var(--text); }
  .links a:hover { color: var(--text); }
  .info__item a:hover { color: var(--accent); }
  .footer a:hover { color: var(--text-inv); }
}

/* Skip link: first stop for keyboard users, hidden until focused */
.skip-link { position: absolute; left: var(--s2); top: calc(-1 * var(--s8)); z-index: 100; padding: var(--s1) var(--s2); border-radius: var(--radius); background: var(--text); color: var(--text-inv); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: var(--s2); }

/* Reviews feed pause control */
.rev-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.rev-toggle { display: inline-flex; align-items: center; gap: var(--s1); min-height: 40px; padding: var(--s1) var(--s2); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); font: 600 1rem/1 var(--font); cursor: pointer; }
.rev-toggle svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .rev-toggle:hover { border-color: var(--text); } }
.rev-feed.is-paused .rev-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .rev-toggle { display: none; } }

.req { font-weight: 400; color: var(--text-2); }

/* Nav icons: small line icons beside each page name */
.links a { display: inline-flex; align-items: center; gap: var(--s1); }
.links__icon { width: 18px; height: 18px; flex: none; }
.links a[aria-current="page"] .links__icon { color: var(--accent); }

/* 1 Home projects: the two side cards stretch to match the large card, so no gap opens above them */
.projects--home { grid-auto-rows: 1fr; }
.projects--home .project__img { aspect-ratio: auto; flex: 1; min-height: 192px; }
@media (max-width: 960px) { .projects--home { grid-auto-rows: auto; } .projects--home .project__img { flex: none; aspect-ratio: 4 / 3; min-height: 0; } .projects--home .project:first-child .project__img { aspect-ratio: 16 / 9; } }

/* 6 tap-to-call beside the menu button, phones and tablets only */
.nav__call { display: none; width: 48px; height: 48px; place-items: center; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--accent); }
.nav__call svg { width: 22px; height: 22px; }
@media (max-width: 960px) {
  .nav__call { display: grid; margin-left: auto; }
  .nav { gap: var(--s1); }
  .logo { margin-right: auto; }
}

/* 5 trust line */
.trust { display: grid; gap: var(--s1); margin-top: var(--s3); }
.trust li { display: flex; align-items: center; gap: var(--s1); color: var(--text-inv-2); }
.trust li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-on-dark); flex: none; }

/* 4 FAQ */
.faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s10); align-items: start; }
.faq__intro { display: grid; gap: var(--s2); justify-items: start; }
.faq__list { margin: 0; border-top: 1px solid var(--line); }
.faq__item { padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.faq__item dd { margin: var(--s1) 0 0; color: var(--text-2); max-width: 38em; }
@media (max-width: 720px) {
  .faq { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .faq__intro { position: static; }
  .faq__item { padding: var(--s3) 0; }
}
.faq__item dt { font-weight: 700; letter-spacing: -.01em; }

/* 3 contact links are full-size tap targets */
.info__item a { display: inline-flex; align-items: center; min-height: 44px; }

/* 7 hero reply note */
.hero__note { margin-top: var(--s2); font-size: 1rem; color: var(--text-inv); }
@media (prefers-reduced-motion: no-preference) { .hero__body > .hero__note { animation: rl-up .8s cubic-bezier(.2, .7, .2, 1) 1s both; } }

/* 6 about the crew */
.about__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s8); align-items: center; }
.about__img { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--line); }
.about__img img { width: 100%; height: 100%; object-fit: cover; }
.about__text { display: grid; gap: var(--s2); justify-items: start; }
.about__text .checks { margin-top: var(--s1); }
.about__text .btn { margin-top: var(--s2); }
@media (max-width: 720px) { .about__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s4); } }

/* 5 project filters */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); margin-bottom: var(--s4); }
.filter { min-height: 40px; padding: var(--s1) var(--s2); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text-2); font: 600 1rem/1 var(--font); cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.filter[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--text-inv); }
@media (hover: hover) and (pointer: fine) { .filter[aria-pressed="false"]:hover { border-color: var(--text); color: var(--text); } }
.filters__count { margin-left: auto; font-size: 1rem; color: var(--text-2); }
.project[hidden] { display: none; }
@media (max-width: 640px) { .filters__count { width: 100%; margin-left: 0; } }
@media (max-width: 720px) { .contact-grid .info { order: 2; } } /* phones: the estimate form comes first, contact details and hours below it */

/* Page-head entrance: title rises out of a mask, then the rule draws across */
@media (prefers-reduced-motion: no-preference) {
  .page-head { position: relative; border-bottom-color: transparent; }
  .page-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--line); transform-origin: left; animation: rl-rule 1.1s cubic-bezier(.65, 0, .35, 1) .55s both; }
  .page-head .kicker { animation: rl-up .6s cubic-bezier(.2, .7, .2, 1) .1s both; }
  .page-head .h1 { animation: rl-mask 1s cubic-bezier(.2, .8, .2, 1) .2s both; }
  .page-head .lead { animation: rl-up .8s cubic-bezier(.2, .7, .2, 1) .5s both; }
  .page-head .lead ~ * { animation: rl-up .8s cubic-bezier(.2, .7, .2, 1) .62s both; }
}
@keyframes rl-mask { from { clip-path: inset(0 0 100% 0); transform: translateY(32px); } to { clip-path: inset(-20% -5% -20% -5%); } }
@keyframes rl-rule { from { transform: scaleX(0); } }