:root {
  --orange:#f87908;
  --orange2:#ff9825;
  --black:#080809;
  --ink:#171717;
  --paper:#f4f4f2;
  --white:#fff;
  --muted:#5b5b5b;
  --line:#ddd;
  --max:1320px;
  --wide:1480px;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
}

body {
  margin:0;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.6;
  font-size:17px;
}

a {
  color:inherit;
  text-decoration:none;
}

img {
  display:block;
  max-width:100%;
}

.container {
  width:min(var(--max),calc(100% - 72px));
  margin:auto;
}

.wide-container {
  width:min(var(--wide),calc(100% - 72px));
  max-width:none;
}

.site-header {
  height:86px;
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(6,6,7,.98);
  border-bottom:1px solid #242424;
  backdrop-filter:blur(10px);
}

.nav-wrap {
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}

.brand {
  width:250px;
}

.brand img {
  max-height:64px;
  object-fit:contain;
}

.nav {
  display:flex;
  gap:34px;
  align-items:center;
  color:#fff;
  font-weight:700;
  font-size:.94rem;
  text-transform:uppercase;
}

.nav>a:not(.btn) {
  position:relative;
}

.nav>a:not(.btn):after {
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:-9px;
  height:2px;
  background:var(--orange);
  transition:.2s;
}

.nav>a:not(.btn):hover:after {
  right:0;
}

.menu-toggle {
  display:none;
  background:none;
  border:0;
  color:#fff;
  font-size:1.9rem;
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--orange),var(--orange2));
  color:#fff;
  padding:16px 25px;
  border-radius:4px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.025em;
  box-shadow:0 10px 26px rgba(248,121,8,.24);
  transition:.2s;
}

.btn:hover {
  transform:translateY(-2px);
}

.btn-small {
  padding:11px 18px;
}

.btn-ghost {
  background:rgba(0,0,0,.32);
  border:2px solid rgba(255,255,255,.82);
  box-shadow:none;
}

.hero {
  position:relative;
  color:#fff;
  background:#0a0a0b;
  overflow:hidden;
}

.hero-bg {
  position:absolute;
  inset:0 0 122px;
  background:linear-gradient(90deg,rgba(4,4,5,.96) 0%,rgba(4,4,5,.88) 38%,rgba(4,4,5,.35) 67%,rgba(4,4,5,.12) 100%),linear-gradient(0deg,rgba(0,0,0,.42),transparent 48%),url('hero-background.jpg') center center/cover no-repeat;
}

.hero-inner {
  position:relative;
  z-index:2;
  min-height:650px;
  padding:100px 0 82px;
  display:flex;
  align-items:center;
}

.hero-copy {
  max-width:820px;
  padding-right:20px;
}

.eyebrow {
  text-transform:uppercase;
  letter-spacing:.17em;
  font-size:.83rem;
  font-weight:800;
  color:var(--orange);
  margin:0 0 14px;
}

.hero-eyebrow {
  color:#ff9a24;
  text-shadow:0 2px 12px rgba(0,0,0,.7);
}

.eyebrow.dark {
  color:#151515;
}

h1,h2,h3 {
  font-family:"Barlow Condensed",Impact,sans-serif;
  text-transform:uppercase;
  line-height:.97;
  margin:0;
}

h1 {
  font-size:clamp(4.6rem,7.2vw,7.25rem);
  letter-spacing:-.022em;
  text-shadow:0 3px 16px rgba(0,0,0,.45);
}

h1 span {
  color:var(--orange);
}

h2 {
  font-size:clamp(3.15rem,4.7vw,5rem);
  letter-spacing:-.015em;
}

h3 {
  font-size:1.6rem;
}

.hero-lead {
  font-size:1.22rem;
  line-height:1.65;
  color:#f0f0f0;
  max-width:760px;
  margin:28px 0 34px;
  text-shadow:0 2px 12px rgba(0,0,0,.7);
}

.hero-actions {
  display:flex;
  gap:15px;
  flex-wrap:wrap;
}

.credential-bar {
  position:relative;
  z-index:3;
  background:linear-gradient(90deg,#080809,#151515);
  border-top:1px solid #2b2b2b;
}

.credentials {
  min-height:122px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  align-items:center;
}

.credentials>div {
  display:flex;
  align-items:center;
  gap:18px;
  padding:21px 38px;
  border-right:1px solid #343434;
}

.credentials>div:first-child {
  padding-left:0;
}

.credentials>div:last-child {
  border-right:0;
}

.cred-icon {
  width:58px;
  height:58px;
  border:2px solid var(--orange);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--orange);
  font-size:1.55rem;
  font-weight:900;
  flex:0 0 auto;
}

.credentials b,.credentials small {
  display:block;
}

.credentials b {
  font-family:"Barlow Condensed";
  font-size:1.55rem;
  text-transform:uppercase;
  line-height:1;
}

.credentials small {
  font-size:.82rem;
  color:#b9b9b9;
  margin-top:7px;
}

.services,.work {
  padding:112px 0;
}

.section-title.centered {
  text-align:center;
  max-width:930px;
  margin:0 auto 58px;
}

.section-title.centered>p:last-child {
  color:var(--muted);
  max-width:850px;
  margin:20px auto 0;
  font-size:1.06rem;
}

.service-grid {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}

.service-card {
  position:relative;
  background:#fff;
  border:1px solid #dcdcdc;
  padding:34px 18px 30px;
  min-height:310px;
  text-align:center;
  box-shadow:0 11px 26px rgba(0,0,0,.045);
  transition:.22s;
  border-radius:3px;
}

.service-card:before {
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:74px;
  height:4px;
  background:var(--orange);
  transform:translateX(-50%);
}

.service-card:hover {
  transform:translateY(-5px);
  box-shadow:0 18px 38px rgba(0,0,0,.09);
}

.service-icon {
  width:78px;
  height:78px;
  background:#101011;
  color:var(--orange);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:2rem;
  margin:4px auto 23px;
  border:4px solid #f2f2f2;
  box-shadow:0 0 0 1px #d4d4d4;
}

.service-card h3 {
  font-size:1.5rem;
  margin-bottom:12px;
}

.service-card p {
  color:var(--muted);
  font-size:.88rem;
  line-height:1.55;
  margin:0;
}

.about {
  background:linear-gradient(125deg,#0b0b0c,#1b1b1b);
  color:#fff;
  padding:72px 0;
}

.about-grid {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:62px;
  align-items:center;
}

.portrait-wrap {
  position: relative;
  display: block;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  align-self: center;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 1px solid #303030;
  overflow: hidden;
}

.portrait-wrap img {
  display: block;
  width: 100%;
  height: auto !important;
  max-height: none !important;
  margin: 0;
  object-fit: contain;
  object-position: center;
  background: transparent;
}

.about-copy {
  padding:24px 0;
}

.about-copy>p:not(.eyebrow) {
  color:#d1d1d1;
  max-width:720px;
  font-size:1.05rem;
}

.about-highlights {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:#353535;
  margin-top:36px;
  border:1px solid #353535;
}

.about-highlights div {
  background:#141414;
  padding:22px 22px;
}

.about-highlights strong,.about-highlights span {
  display:block;
}

.about-highlights strong {
  font-family:"Barlow Condensed";
  font-size:2rem;
  text-transform:uppercase;
}

.about-highlights span {
  font-size:.8rem;
  color:#b1b1b1;
  text-transform:uppercase;
}

.work {
  background:#fff;
}

.work-heading {
  margin-bottom:48px!important;
}

.work-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

.work-card {
  margin:0;
  background:#fff;
  border:1px solid #dedede;
  box-shadow:0 10px 24px rgba(0,0,0,.05);
  overflow:hidden;
}

.work-image {
  height:320px;
  background:#eee;
  overflow:hidden;
}

.work-card img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.35s;
  filter:saturate(.92);
}

.work-card:hover img {
  transform:scale(1.03);
}

.work-card figcaption {
  padding:18px 19px 20px;
  background:#fff;
  color:#171717;
}

.work-card figcaption span,.work-card figcaption small {
  display:block;
}

.work-card figcaption span {
  font-family:"Barlow Condensed";
  font-size:1.55rem;
  text-transform:uppercase;
  font-weight:700;
  line-height:1.05;
}

.work-card figcaption small {
  font-size:.86rem;
  color:#666;
  margin-top:6px;
  line-height:1.35;
}

.why {
  background:var(--paper);
  padding:100px 0;
}

.why-grid {
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:88px;
  align-items:center;
}

.why-copy p:last-child {
  font-size:1.05rem;
  color:#555;
  max-width:610px;
  margin-top:22px;
}

.checklist {
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.checklist li {
  background:#fff;
  border:1px solid #d8d8d5;
  padding:19px 20px;
  font-weight:700;
  font-size:1rem;
  box-shadow:0 5px 16px rgba(0,0,0,.03);
}

.checklist li:before {
  content:"✓";
  color:var(--orange);
  font-weight:900;
  margin-right:10px;
}

.contact {
  background:linear-gradient(135deg,var(--orange),#ff9a24);
  padding:96px 0;
}

.contact-grid {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:82px;
  align-items:center;
}

.contact h2 {
  font-size:clamp(3.7rem,5vw,5.5rem);
}

.contact-copy>p:last-child {
  font-size:1.1rem;
  max-width:520px;
}

.contact-panel {
  background:#0b0b0c;
  color:#fff;
  padding:14px 34px;
  border-radius:4px;
  box-shadow:0 18px 40px rgba(0,0,0,.22);
}

.contact-panel a,.contact-panel div {
  display:grid;
  grid-template-columns:145px 1fr;
  gap:28px;
  align-items:center;
  padding:21px 0;
  border-bottom:1px solid #333;
}

.contact-panel>*:last-child {
  border-bottom:0;
}

.contact-panel span {
  color:#aaa;
  text-transform:uppercase;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.08em;
}

.contact-panel strong {
  text-align:left;
  font-size:1.03rem;
  overflow-wrap:anywhere;
}

footer {
  background:#09090a;
  color:#aaa;
  padding:52px 0 22px;
}

.footer-grid {
  display:grid;
  grid-template-columns:1.1fr 1fr 1fr;
  gap:58px;
  align-items:start;
}

.footer-brand img {
  width:240px;
  margin-bottom:14px;
}

.footer-brand p {
  max-width:350px;
}

.footer-brand p,.footer-meta p,.footer-contact a,.footer-contact span {
  margin:6px 0;
  font-size:.9rem;
  line-height:1.55;
}

.footer-contact,.footer-meta {
  display:flex;
  flex-direction:column;
}

.footer-contact strong,.footer-meta strong {
  font-family:"Barlow Condensed";
  color:#fff;
  text-transform:uppercase;
  font-size:1.3rem;
  margin-bottom:9px;
}

.footer-contact a {
  display:block;
  color:#d5d5d5;
  overflow-wrap:anywhere;
}

.footer-bottom {
  border-top:1px solid #272727;
  margin-top:35px;
  padding-top:20px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:.78rem;
  color:#777;
}

@media(max-width:1180px) {
  .service-grid {
    grid-template-columns:repeat(3,1fr);
  }

  .service-card {
    min-height:280px;
  }

  .work-grid {
    grid-template-columns:repeat(2,1fr);
  }

}

@media(max-width:920px) {
  .container,.wide-container {
    width:min(var(--max),calc(100% - 40px));
  }

  .nav {
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:86px;
    background:#0b0b0c;
    flex-direction:column;
    align-items:flex-start;
    padding:25px 20px;
    border-top:1px solid #252525;
  }

  .nav.open {
    display:flex;
  }

  .menu-toggle {
    display:block;
  }

  .hero-bg {
    background-position:68% center;
  }

  .credentials {
    grid-template-columns:1fr;
  }

  .credentials>div {
    border-right:0;
    border-bottom:1px solid #2c2c2c;
    padding-left:0;
  }

  .credentials>div:last-child {
    border-bottom:0;
  }

  .about-grid,.why-grid,.contact-grid {
    grid-template-columns:1fr;
  }

  .portrait-wrap {
    min-height:0;
  }

  .about-copy {
    padding:18px 0 0;
  }

  .why-grid,.contact-grid {
    gap:42px;
  }

  .footer-grid {
    grid-template-columns:1fr 1fr;
  }

  .footer-meta {
    grid-column:1/-1;
  }

  .footer-bottom {
    flex-direction:column;
  }

  .contact-panel a,.contact-panel div {
    grid-template-columns:120px 1fr;
  }

}

@media(max-width:680px) {
  body {
    font-size:16px;
  }

  .container,.wide-container {
    width:min(var(--max),calc(100% - 28px));
  }

  .brand {
    width:185px;
  }

  .site-header,.nav-wrap {
    height:72px;
  }

  .nav {
    top:72px;
  }

  .hero-inner {
    min-height:650px;
    padding:82px 0 62px;
    align-items:flex-end;
  }

  .hero-bg {
    inset:0 0 330px;
    background-position:72% center;
  }

  .hero-copy {
    padding-top:190px;
  }

  h1 {
    font-size:4.15rem;
  }

  .hero-lead {
    font-size:1.02rem;
  }

  .hero-actions .btn {
    width:100%;
  }

  .service-grid {
    grid-template-columns:1fr;
  }

  .services,.work {
    padding:78px 0;
  }

  .service-card {
    min-height:auto;
    padding:30px 26px;
  }

  .service-icon {
    width:72px;
    height:72px;
  }

  .about {
    padding:55px 0;
  }

  .portrait-wrap {
    padding:10px;
  }

  .about-highlights {
    grid-template-columns:1fr;
  }

  .work-grid {
    grid-template-columns:1fr;
  }

  .work-image {
    height:300px;
  }

  .checklist {
    grid-template-columns:1fr;
  }

  .contact {
    padding:74px 0;
  }

  .contact-panel {
    padding:10px 22px;
  }

  .contact-panel a,.contact-panel div {
    grid-template-columns:1fr;
    gap:4px;
    padding:18px 0;
  }

  .footer-grid {
    grid-template-columns:1fr;
    gap:30px;
  }

  .footer-meta {
    grid-column:auto;
  }

}