:root {
  --ink: #090909;
  --paper: #f0ede6;
  --orange: #ff5a00;
  --muted: #a9a9a4;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: Arial, Helvetica, sans-serif;
}
a { color: inherit; text-decoration: none; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 12px 16px;
  background: var(--paper);
  color: var(--ink);
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 4px;
}

.site-header {
  position: absolute;
  z-index: 10;
  inset: 0 0 auto;
  height: 92px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 4vw;
  border-bottom: 1px solid rgba(255,255,255,.2);
}
.wordmark { display: flex; align-items: center; gap: 14px; font-weight: 800; letter-spacing: .08em; font-size: .88rem; }
.mark { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--orange); color: var(--orange); font-size: .7rem; }
nav { display: flex; gap: 34px; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; }
nav a:hover { color: var(--orange); }
.header-cta { justify-self: end; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; }
.header-cta span, .button span { color: var(--orange); margin-left: 10px; }

.hero {
  position: relative;
  min-height: 900px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 56% 44%;
  padding: 165px 4vw 80px;
  border-bottom: 1px solid #333;
}
.hero-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 90px 90px;
  mask-image: linear-gradient(to right, black, transparent 76%);
}
.hero-copy { position: relative; z-index: 2; }
.eyebrow, .section-kicker { font-size: .72rem; text-transform: uppercase; letter-spacing: .2em; font-weight: 700; }
.eyebrow { display: flex; align-items: center; gap: 12px; color: #c9c9c5; margin-bottom: 48px; }
.eyebrow span { width: 28px; height: 2px; background: var(--orange); }
h1 { margin: 0; font-size: clamp(5rem, 8.4vw, 9.2rem); line-height: .83; letter-spacing: -.07em; text-transform: uppercase; }
h1 em, .contact h2 em { color: var(--orange); font-style: normal; }
.hero-intro { max-width: 600px; margin: 54px 0 34px 19%; color: #c4c4bf; font-size: 1.06rem; line-height: 1.7; }
.hero-actions { margin-left: 19%; display: flex; align-items: center; gap: 36px; }
.button { display: inline-flex; justify-content: space-between; align-items: center; padding: 20px 24px; min-width: 228px; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; font-weight: 800; }
.button-primary { background: var(--orange); color: #101010; }
.button-primary span { color: #101010; }
.text-link { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; border-bottom: 1px solid #666; padding-bottom: 7px; }
.text-link span { color: var(--orange); margin-left: 10px; }

.hero-visual { position: relative; align-self: stretch; min-height: 650px; }
.portrait { position: absolute; inset: 30px 10% 0 6%; background: linear-gradient(145deg, #272727, #0d0d0d); overflow: hidden; border: 1px solid #3b3b3b; }
.portrait:before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 26px, rgba(255,255,255,.025) 27px 28px); }
.portrait-glow { position: absolute; width: 330px; height: 330px; border-radius: 50%; background: var(--orange); filter: blur(110px); opacity: .38; right: -90px; top: -20px; }
.head { position: absolute; width: 155px; height: 190px; border-radius: 48% 48% 44% 44%; background: linear-gradient(135deg, #d9b394, #7d5543); left: 50%; top: 14%; transform: translateX(-50%); box-shadow: inset -24px -10px 30px rgba(0,0,0,.25); }
.head:after { content: ""; position: absolute; width: 120px; height: 45px; left: 18px; top: -10px; background: #b8b6af; border-radius: 60% 60% 20% 20%; transform: rotate(-4deg); }
.body-shape { position: absolute; width: 420px; height: 480px; border-radius: 48% 48% 0 0; left: 50%; bottom: -180px; transform: translateX(-50%); background: linear-gradient(100deg, #080e16 0 46%, #f1eee6 47% 53%, #0c1420 54%); box-shadow: 0 -20px 80px rgba(0,0,0,.5); }
.portrait-label { position: absolute; left: 24px; bottom: 24px; display: flex; flex-direction: column; font-size: .65rem; letter-spacing: .2em; }
.portrait-label strong { font-size: 1.2rem; color: var(--orange); margin-top: 4px; }
.visual-note { position: absolute; right: 0; top: 55%; margin: 0; padding: 16px 0 16px 28px; border-left: 2px solid var(--orange); font-size: .7rem; letter-spacing: .08em; line-height: 1.6; color: #bbb; }
.signal { position: absolute; border: 1px solid rgba(255,90,0,.42); border-radius: 50%; z-index: 2; }
.signal-one { width: 110px; height: 110px; left: -8px; top: 8px; }
.signal-two { width: 42px; height: 42px; left: 25px; top: 42px; background: var(--orange); }
.signal-three { width: 180px; height: 180px; right: -100px; bottom: 40px; }
.hero-index { position: absolute; bottom: 34px; right: 4vw; color: #777; font: .68rem monospace; letter-spacing: .12em; }

.manifesto { background: var(--paper); color: var(--ink); padding: 150px 7vw; display: grid; grid-template-columns: 28% 72%; }
.section-kicker { color: var(--orange); margin: 8px 0; }
.manifesto h2, .services h2, .contact h2 { margin: 0; font-size: clamp(3.2rem, 6vw, 7.2rem); line-height: .95; letter-spacing: -.06em; text-transform: uppercase; }
.manifesto h2 span { color: #a39f97; }
.manifesto div > p { max-width: 700px; margin: 58px 0 0 24%; font-size: 1.15rem; line-height: 1.75; color: #4c4a46; }

.services { padding: 140px 7vw; display: grid; grid-template-columns: 42% 58%; }
.section-kicker.light { color: #a8a8a3; }
.services h2 { font-size: clamp(3rem, 5vw, 5.6rem); margin-top: 36px; }
.service { display: grid; grid-template-columns: 55px 1fr 1fr 30px; gap: 22px; align-items: start; padding: 34px 0; border-top: 1px solid #404040; }
.service:last-child { border-bottom: 1px solid #404040; }
.service > span:first-child { color: var(--orange); font: .7rem monospace; }
.service h3 { margin: 0; text-transform: uppercase; font-size: 1.15rem; letter-spacing: -.02em; }
.service p { margin: 0; color: #aaa; line-height: 1.65; font-size: .92rem; }
.service-arrow { color: var(--orange); justify-self: end; }

.principles { background: var(--orange); color: #101010; padding: 120px 7vw; }
.principles .section-kicker { color: #101010; }
.principle-grid { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 75px; border-top: 1px solid rgba(0,0,0,.35); }
.principle-grid > div { padding: 38px 42px 10px 0; border-right: 1px solid rgba(0,0,0,.35); }
.principle-grid > div + div { padding-left: 42px; }
.principle-grid > div:last-child { border: 0; }
.principle-grid strong { font: .72rem monospace; }
.principle-grid h3 { font-size: 1.55rem; text-transform: uppercase; margin: 55px 0 16px; }
.principle-grid p { max-width: 320px; line-height: 1.6; }

.contact { padding: 145px 7vw; display: grid; grid-template-columns: 60% 40%; align-items: end; }
.contact h2 { margin-top: 36px; }
.contact-card { border-left: 1px solid #444; padding-left: 55px; }
.contact-card p { color: #aaa; font-size: 1.05rem; line-height: 1.7; margin: 0 0 36px; }
.button-light { background: var(--paper); color: var(--ink); width: 100%; text-transform: none; letter-spacing: 0; font-size: .8rem; }
footer { min-height: 120px; padding: 30px 4vw; border-top: 1px solid #333; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: #8d8d88; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; }
footer p:last-child { justify-self: end; }

.footer-links { display: flex; gap: 24px; }
.footer-links a:hover { color: var(--orange); }

.home-blog {
  background: var(--paper);
  color: var(--ink);
  padding: 130px 7vw 145px;
}
.home-blog-heading {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  align-items: end;
  margin-bottom: 60px;
}
.home-blog h2 {
  margin: 30px 0 0;
  font-size: clamp(3.2rem, 6vw, 7rem);
  line-height: .9;
  letter-spacing: -.06em;
  text-transform: uppercase;
}
.dark-link { border-color: #8b877f; }
.home-blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; background: #aaa59c; }
.home-blog-card { background: var(--paper); }
.home-blog-card > a { display: block; height: 100%; }
.home-blog-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: filter .2s ease;
}
.home-blog-card a:hover img { filter: grayscale(0) contrast(1); }
.home-blog-card div { padding: 30px; }
.home-blog-card p {
  margin: 0 0 28px;
  color: #6d6962;
  font: .68rem monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.home-blog-card h3 { margin: 0 0 36px; font-size: 1.35rem; line-height: 1.25; text-transform: uppercase; }
.home-blog-card span { color: var(--orange); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }

.contact-form { display: grid; gap: 22px; margin: 0 0 24px; }
.contact-form label { display: grid; gap: 9px; color: #c1c1bc; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; }
.contact-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form input, .contact-form textarea {
  width: 100%;
  border: 1px solid #494949;
  border-radius: 0;
  background: #121212;
  color: var(--paper);
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  padding: 14px 15px;
}
.contact-form textarea { resize: vertical; min-height: 125px; }
.contact-form .button { border: 0; cursor: pointer; }
.contact-form .form-status { min-height: 1.4em; margin: -8px 0 0; color: #bbb; font-size: .76rem; line-height: 1.5; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-email { display: inline-flex; gap: 10px; color: #aaa; font-size: .82rem; border-bottom: 1px solid #555; padding-bottom: 5px; }
.contact-email span { color: var(--orange); }

.inner-page { min-height: 100vh; }
.blog-hero {
  min-height: 710px;
  padding: 180px 7vw 100px;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 90px 90px;
}
.blog-hero .eyebrow { margin-bottom: 44px; }
.blog-hero h1 { font-size: clamp(4.2rem, 8vw, 8.6rem); }
.blog-hero h1 em { color: var(--orange); font-style: normal; }
.blog-hero > p:last-child { max-width: 640px; margin: 52px 0 0 36%; color: #bbb; font-size: 1.05rem; line-height: 1.7; }
.blog-list { background: var(--paper); color: var(--ink); padding: 80px 7vw 130px; }
.blog-card {
  display: grid;
  grid-template-columns: minmax(260px, 38%) 1fr;
  gap: 6vw;
  padding: 54px 0;
  border-top: 1px solid #aaa59c;
}
.blog-card:last-child { border-bottom: 1px solid #aaa59c; }
.blog-card-image { display: block; overflow: hidden; background: #d4d0c8; }
.blog-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 300px;
  max-height: 440px;
  object-fit: cover;
  filter: grayscale(1);
  transition: transform .25s ease, filter .25s ease;
}
.blog-card:hover .blog-card-image img { transform: scale(1.015); filter: grayscale(0); }
.blog-card-copy { padding: 10px 0; }
.blog-card-copy > p:first-child { margin: 0 0 28px; color: var(--orange); font: .7rem monospace; text-transform: uppercase; letter-spacing: .08em; }
.blog-card-copy h2 { margin: 0; max-width: 800px; font-size: clamp(2rem, 3.5vw, 4.2rem); line-height: 1; letter-spacing: -.045em; text-transform: uppercase; }
.blog-card-copy h2 a:hover { color: var(--orange); }
.blog-card-copy h2 + p { max-width: 670px; margin: 35px 0; color: #55514b; font-size: 1rem; line-height: 1.7; }
.article-link { display: inline-flex; gap: 12px; border-bottom: 1px solid #8f8a82; padding-bottom: 7px; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.article-link span { color: var(--orange); }

.article-header { padding: 175px 7vw 95px; }
.article-back { display: inline-block; margin-bottom: 48px; color: #aaa; font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; }
.article-back:hover { color: var(--orange); }
.article-header .eyebrow { margin-bottom: 34px; }
.article-header h1 { max-width: 1250px; font-size: clamp(3.3rem, 7vw, 7.8rem); line-height: .91; }
.article-header > p:last-child { max-width: 760px; margin: 52px 0 0 28%; color: #bbb; font-size: 1.08rem; line-height: 1.75; }
.article-image { margin: 0; height: min(68vw, 720px); overflow: hidden; background: #151515; border-block: 1px solid #333; }
.article-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.article-layout { display: grid; grid-template-columns: 24% minmax(0, 760px); gap: 7vw; justify-content: center; background: var(--paper); color: var(--ink); padding: 110px 7vw 130px; }
.article-layout aside { padding-top: 10px; border-top: 2px solid var(--orange); }
.article-layout aside p { margin: 16px 0 8px; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.article-layout aside span { color: #77736d; font-size: .78rem; line-height: 1.6; }
.article-content { font-family: Georgia, "Times New Roman", serif; font-size: 1.1rem; line-height: 1.82; overflow-wrap: anywhere; }
.article-content p { margin: 0 0 1.45em; }
.article-content h2 { margin: 2.2em 0 .75em; font-family: Arial, Helvetica, sans-serif; font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1.05; letter-spacing: -.035em; text-transform: uppercase; }
.article-content h3 { margin: 2em 0 .7em; font-family: Arial, Helvetica, sans-serif; font-size: 1.35rem; line-height: 1.2; }
.article-content ul, .article-content ol { margin: 0 0 1.6em; padding-left: 1.4em; }
.article-content li { margin-bottom: .65em; }
.article-content a { color: #a73b00; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.article-content hr { border: 0; border-top: 1px solid #b8b3aa; margin: 3em 0; }
.article-content img { max-width: 100%; height: auto; }
.article-content table { width: 100%; border-collapse: collapse; margin: 2em 0; font-family: Arial, Helvetica, sans-serif; font-size: .9rem; }
.article-content th, .article-content td { border: 1px solid #aaa59c; padding: 12px; text-align: left; vertical-align: top; }
.article-cta { padding: 120px 7vw; }
.article-cta h2 { margin: 30px 0 50px; font-size: clamp(3.2rem, 6vw, 7rem); line-height: .94; letter-spacing: -.06em; text-transform: uppercase; }
.article-cta h2 em { color: var(--orange); font-style: normal; }

@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto; height: 76px; }
  nav { display: flex; gap: 18px; }
  nav a:not(.nav-blog) { display: none; }
  .header-cta { font-size: 0; }
  .header-cta span { font-size: 1rem; }
  .hero { display: block; min-height: auto; padding-top: 130px; }
  h1 { font-size: clamp(4rem, 17vw, 7rem); }
  .hero-intro, .hero-actions { margin-left: 0; }
  .hero-visual { margin-top: 65px; min-height: 600px; }
  .portrait { inset-inline: 8%; }
  .manifesto, .services, .contact { grid-template-columns: 1fr; gap: 65px; padding: 95px 7vw; }
  .manifesto div > p { margin-left: 0; }
  .service { grid-template-columns: 38px 1fr 26px; }
  .service p { grid-column: 2 / 4; }
  .principle-grid { grid-template-columns: 1fr; }
  .principle-grid > div, .principle-grid > div + div { padding: 30px 0; border-right: 0; border-bottom: 1px solid rgba(0,0,0,.35); }
  .principle-grid h3 { margin-top: 28px; }
  .contact-card { padding: 0; border: 0; }
  footer { grid-template-columns: 1fr; gap: 18px; }
  footer p:last-child { justify-self: start; }
  .home-blog { padding: 90px 7vw 100px; }
  .home-blog-grid { grid-template-columns: 1fr; }
  .home-blog-heading { align-items: flex-start; flex-direction: column; }
  .blog-hero { min-height: auto; padding: 135px 7vw 85px; }
  .blog-hero > p:last-child, .article-header > p:last-child { margin-left: 0; }
  .blog-card { grid-template-columns: 1fr; gap: 32px; }
  .blog-card-image img { min-height: 260px; }
  .article-layout { grid-template-columns: 1fr; gap: 55px; padding-block: 80px 100px; }
  .article-layout aside { max-width: 260px; }
  .article-header { padding: 135px 7vw 80px; }
  .article-image { height: 60vw; min-height: 320px; }
}

@media (max-width: 520px) {
  .wordmark > span:last-child { font-size: .68rem; }
  .hero { padding-inline: 5vw; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .hero-visual { min-height: 480px; }
  .portrait { inset-inline: 0; }
  .visual-note { display: none; }
  .services { padding-inline: 6vw; }
  .contact .button { min-width: 0; font-size: .66rem; }
  .contact-field-row { grid-template-columns: 1fr; }
  .home-blog-card div { padding: 25px 20px 30px; }
  .blog-hero h1 { font-size: clamp(3.2rem, 15vw, 5rem); }
  .blog-list { padding-inline: 5vw; }
  .blog-card { padding-block: 38px; }
  .blog-card-image img { min-height: 220px; max-height: 300px; }
  .article-header, .article-layout, .article-cta { padding-inline: 5vw; }
  .article-header h1 { font-size: clamp(2.7rem, 13vw, 4.5rem); }
  .article-content { font-size: 1rem; }
  .article-image { min-height: 260px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}


/* Static cPanel package: original Smart Overhauls hero portrait */
.hero-main-image {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
}
.portrait:before {
  display: none;
}
.portrait-label {
  z-index: 2;
}
.not-found { min-height: 760px; padding: 190px 7vw 100px; }
.not-found h1 { max-width: 1000px; margin-bottom: 42px; }
.not-found > p:not(.section-kicker) { color: #aaa; margin-bottom: 35px; }
.redirect-page { min-height: 100vh; display: grid; place-items: center; padding: 40px; }
.redirect-page a { color: var(--orange); text-decoration: underline; }