/* Viking Construction Group: vikingshell.com. One stylesheet for every page. */
@font-face { font-family: 'Oswald'; src: url('/fonts/oswald-latin.woff2') format('woff2'); font-weight: 200 700; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/fonts/barlow-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/fonts/barlow-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/fonts/barlow-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
  --black: #0a0a0b;
  --char: #121213;
  --char-2: #19191a;
  --char-3: #232324;
  --line: #2c2a28;
  --bronze: #d4883f;
  --bronze-hi: #eaa766;
  --bronze-lo: #9a5a28;
  --white: #f5f2ee;
  --grey: #bdb4a9;
  --grey-2: #8f877e;
  --danger: #ff8f7a;
  --ok: #9fd39a;
  --head: 'Oswald', 'Arial Narrow', Arial, sans-serif;
  --body: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --gutter: clamp(20px, 5vw, 72px);
  --max: 1320px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; background: var(--black); color: var(--white); font: 400 1.0625rem/1.65 var(--body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1; margin: 0; }
p { margin: 0 0 1em; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.bronze { color: var(--bronze); }

:focus-visible { outline: 2px solid var(--bronze-hi); outline-offset: 3px; border-radius: 1px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--bronze); color: #120c08; padding: 10px 16px; font: 600 0.85rem var(--head); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; transition: top 0.2s; }
.skip:focus { top: 12px; }

/* ---------- header ---------- */
.site-head { position: sticky; top: 0; z-index: 50; background: rgba(10, 10, 11, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.site-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, rgba(212,136,63,0) 0%, rgba(212,136,63,0.55) 30%, rgba(212,136,63,0.55) 70%, rgba(212,136,63,0) 100%); }
.head-row { display: flex; align-items: center; gap: 28px; height: 84px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.site-nav { margin-left: auto; }
.site-nav ul { list-style: none; display: flex; gap: clamp(14px, 2.2vw, 34px); margin: 0; padding: 0; }
.site-nav a { display: block; font: 500 0.8rem/1 var(--head); letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; color: var(--white); padding: 10px 0; position: relative; }
.site-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--bronze); transform: scaleX(0); transform-origin: left; transition: transform 0.35s ease; }
.site-nav a:hover::after, .site-nav a[aria-current='page']::after { transform: scaleX(1); }
.site-nav a[aria-current='page'] { color: var(--bronze-hi); }
.menu-btn { display: none; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; font: 600 0.84rem/1 var(--head); letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; padding: 17px 28px; border: 1.5px solid var(--bronze); color: var(--white); background: transparent; cursor: pointer; transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s; white-space: nowrap; }
.btn:hover { background: var(--bronze); color: #120c08; }
.btn-solid { background: var(--bronze); color: #120c08; }
.btn-solid:hover { background: var(--bronze-hi); border-color: var(--bronze-hi); }
.btn .arrow { display: inline-block; width: 18px; height: 1.5px; background: currentColor; position: relative; transition: transform 0.25s; }
.btn .arrow::after { content: ''; position: absolute; right: 0; top: -4px; width: 8px; height: 8px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); transform-origin: center; }
.btn:hover .arrow { transform: translateX(4px); }
.btn-head { padding: 13px 20px; font-size: 0.76rem; }

/* ---------- type pieces ---------- */
.kicker { display: flex; align-items: center; gap: 14px; font: 500 0.82rem/1 var(--head); letter-spacing: 0.32em; text-transform: uppercase; color: var(--bronze); margin: 0 0 22px; }
.kicker::before { content: ''; width: 36px; height: 1px; background: var(--bronze); }
.display { font-size: clamp(2.7rem, 6.4vw, 5.6rem); line-height: 0.96; letter-spacing: 0.005em; }
.display .bronze { color: var(--bronze); display: block; }
.tagline { font: 500 clamp(0.95rem, 1.5vw, 1.2rem)/1.2 var(--head); letter-spacing: 0.34em; text-transform: uppercase; color: var(--white); margin: 26px 0 0; }
.lead { font-size: clamp(1.05rem, 1.35vw, 1.2rem); color: var(--grey); max-width: 34em; }
.h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); letter-spacing: 0.04em; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--black); isolation: isolate; }
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; transform-origin: 70% 60%; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, rgba(10,10,11,0.96) 0%, rgba(10,10,11,0.86) 30%, rgba(10,10,11,0.35) 58%, rgba(10,10,11,0) 78%),
  linear-gradient(0deg, rgba(10,10,11,1) 0%, rgba(10,10,11,0) 26%); }
.hero-inner { min-height: min(86vh, 820px); display: flex; flex-direction: column; justify-content: center; padding-top: 72px; padding-bottom: 96px; }
.hero-copy { max-width: 640px; }
.hero-copy .lead { margin: 28px 0 38px; }
.hero-sub { min-height: min(64vh, 620px); }
.hero-sub .hero-copy { max-width: 700px; }
@media (prefers-reduced-motion: no-preference) {
  .js .hero-media img { animation: heroZoom 26s cubic-bezier(0.2, 0.6, 0.3, 1) both; }
  @keyframes heroZoom { from { transform: scale(1.12); } to { transform: scale(1); } }
}

/* ---------- sections ---------- */
.section { padding: clamp(64px, 9vw, 120px) 0; position: relative; }
.section-tight { padding: clamp(40px, 6vw, 72px) 0; }

/* home: sector tiles */
.sectors { margin-top: -64px; position: relative; z-index: 2; padding-bottom: clamp(64px, 9vw, 120px); }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; list-style: none; margin: 0; padding: 0; }
.tile { position: relative; background: var(--char); border: 1px solid var(--line); display: flex; flex-direction: column; transition: border-color 0.3s, transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.tile:hover, .tile:focus-within { border-color: var(--bronze); transform: translateY(-4px); }
.tile-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--char-2); }
.tile-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
.tile:hover .tile-img img { transform: scale(1.06); }
.tile-body { padding: 22px 22px 26px; border-top: 2px solid var(--bronze); flex: 1; }
.tile h3 { font-size: 1.32rem; letter-spacing: 0.06em; line-height: 1.1; display: flex; justify-content: space-between; gap: 12px; }
.tile h3 a { text-decoration: none; }
.tile h3 a::before { content: ''; position: absolute; inset: 0; }
.tile .chev { flex: none; width: 10px; height: 10px; margin-top: 7px; border-top: 2px solid var(--bronze); border-right: 2px solid var(--bronze); transform: rotate(45deg); transition: transform 0.3s; }
.tile:hover .chev { transform: translateX(4px) rotate(45deg); }
.tile p { color: var(--grey); font-size: 0.98rem; margin: 12px 0 0; }

/* about: founder */
.founder { display: grid; grid-template-columns: minmax(260px, 0.9fr) 1.5fr minmax(220px, 0.8fr); gap: clamp(28px, 4vw, 56px); align-items: stretch; }
.portrait { position: relative; border: 1px solid var(--line); overflow: hidden; background: var(--char-2); }
.portrait::after { content: ''; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--bronze); }
.founder h2 { font-size: clamp(2.2rem, 4vw, 3.4rem); margin-bottom: 26px; }
.founder-copy { align-self: center; }
.founder-copy p { color: var(--grey); font-size: 1.1rem; max-width: 32em; }
.creed { border: 1px solid var(--line); background: linear-gradient(160deg, var(--char-2), var(--black)); padding: 32px 28px; display: flex; flex-direction: column; justify-content: center; position: relative; }
.creed::before { content: ''; position: absolute; left: 0; top: 28px; bottom: 28px; width: 2px; background: var(--bronze); }
.creed p.creed-words { font: 700 clamp(1.5rem, 2.2vw, 1.9rem)/1.12 var(--head); text-transform: uppercase; letter-spacing: 0.06em; color: var(--bronze); margin: 0 0 18px; }
.creed p.creed-words span { display: block; }
.creed p:last-child { color: var(--grey); font-size: 0.96rem; margin: 0; }
.values { display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.values li { padding: 36px 32px; display: flex; align-items: center; gap: 22px; font: 600 clamp(1.05rem, 1.6vw, 1.35rem)/1.15 var(--head); letter-spacing: 0.14em; text-transform: uppercase; }
.values li + li { border-left: 1px solid var(--line); }

/* services: package strip */
.package-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 48px; }
.package-head p { color: var(--grey); margin: 0; font-size: 1.08rem; }
.steps { display: grid; grid-template-columns: 1fr 1fr 1.45fr 1fr; gap: 0; list-style: none; margin: 0; padding: 0; }
.step { position: relative; padding-right: 34px; }
.step:last-child { padding-right: 0; }
.step:not(:last-child)::after { content: ''; position: absolute; right: 11px; top: calc(clamp(150px, 15.5vw, 236px) / 2 - 6px); width: 11px; height: 11px; border-top: 2px solid var(--bronze); border-right: 2px solid var(--bronze); transform: rotate(45deg); }
.step figure { margin: 0; }
.step .img { height: clamp(150px, 15.5vw, 236px); overflow: hidden; border: 1px solid var(--line); background: var(--char-2); }
.step.key .img { border-color: rgba(212,136,63,0.6); }
.step figcaption { display: flex; gap: 12px; align-items: baseline; padding-top: 18px; border-top: 2px solid transparent; font: 600 1.05rem/1.15 var(--head); letter-spacing: 0.12em; text-transform: uppercase; }
.step figcaption .n { font-weight: 500; font-size: 0.8rem; color: var(--bronze); letter-spacing: 0.2em; }
.step.key figcaption { color: var(--bronze-hi); }
.scope-note { margin: 44px 0 0; padding-top: 22px; border-top: 1px solid var(--line); color: var(--grey-2); font-size: 0.95rem; text-align: center; }

/* projects */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 40px; padding: 0; list-style: none; }
.filter { font: 500 0.8rem/1 var(--head); letter-spacing: 0.16em; text-transform: uppercase; padding: 14px 20px; background: transparent; color: var(--white); border: 1px solid var(--line); cursor: pointer; transition: border-color 0.2s, background 0.2s, color 0.2s; }
.filter:hover { border-color: var(--bronze); }
.filter[aria-pressed='true'] { background: var(--bronze); border-color: var(--bronze); color: #120c08; }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.project { background: var(--char); border: 1px solid var(--line); }
.project .cap { display: flex; justify-content: space-between; padding: 16px 18px; font: 600 0.95rem var(--head); letter-spacing: 0.12em; text-transform: uppercase; border-top: 2px solid var(--bronze); }

/* team */
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; list-style: none; margin: 0; padding: 0; }
.member { background: var(--char); border: 1px solid var(--line); display: flex; flex-direction: column; }
.member .face { aspect-ratio: 4 / 5; overflow: hidden; position: relative; background: var(--char-2); }
.member .face.role::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,11,0) 30%, rgba(10,10,11,0.9) 100%); }
.member .face .role-mark { position: absolute; left: 22px; bottom: 20px; z-index: 1; font: 700 3.6rem/1 var(--head); color: transparent; -webkit-text-stroke: 1.5px var(--bronze); letter-spacing: 0.04em; }
.member .body { padding: 22px 22px 26px; border-top: 2px solid var(--bronze); flex: 1; }
.member h2 { font-size: 1.3rem; letter-spacing: 0.08em; color: var(--bronze); }
.member .title { font: 500 0.92rem/1.3 var(--body); color: var(--bronze-hi); font-style: italic; margin: 6px 0 0; }
.member p.desc { color: var(--grey); font-size: 0.97rem; margin: 14px 0 0; }

/* contact */
.contact-grid { display: grid; grid-template-columns: 1fr minmax(380px, 520px); gap: clamp(36px, 6vw, 96px); align-items: start; }
.contact-intro { padding-top: 24px; }
.contact-intro .lead { margin: 26px 0 40px; }
.contact-line { display: flex; align-items: center; gap: 18px; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); max-width: 420px; }
.contact-line .label { font: 500 0.78rem/1 var(--head); letter-spacing: 0.24em; color: var(--bronze); text-transform: uppercase; width: 64px; }
.contact-line a { font-size: 1.15rem; text-decoration: none; border-bottom: 1px solid rgba(212,136,63,0.5); }
.contact-line a:hover { color: var(--bronze-hi); }
.bid-card { background: rgba(14, 14, 15, 0.94); border: 1px solid var(--line); border-top: 3px solid var(--bronze); padding: clamp(26px, 3.6vw, 40px); box-shadow: 0 30px 80px rgba(0,0,0,0.55); }
.bid-card h2 { font-size: 1.7rem; letter-spacing: 0.1em; color: var(--bronze); }
.bid-card .sub { color: var(--grey); margin: 10px 0 26px; }
.field { margin-bottom: 18px; }
.field label, .upload-label { display: block; font: 500 0.86rem/1.2 var(--body); color: var(--white); margin-bottom: 8px; }
.field .req { color: var(--bronze); }
.field .opt { color: var(--grey-2); }
.field input { width: 100%; font: 400 1rem var(--body); color: #111; background: #f4f1ec; border: 2px solid #f4f1ec; padding: 12px 14px; border-radius: 0; transition: border-color 0.2s, box-shadow 0.2s; }
.field input:focus { outline: none; border-color: var(--bronze); box-shadow: 0 0 0 3px rgba(212,136,63,0.35); }
.field input[aria-invalid='true'] { border-color: var(--danger); }
.field .err { color: var(--danger); font-size: 0.88rem; margin: 6px 0 0; min-height: 0; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.drop { position: relative; border: 1.5px dashed rgba(212,136,63,0.65); padding: 26px 20px; text-align: center; transition: border-color 0.2s, background 0.2s; margin-bottom: 8px; }
.drop input[type='file'] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.drop:focus-within { outline: 2px solid var(--bronze-hi); outline-offset: 3px; }
.drop .t { font: 600 0.95rem/1.2 var(--head); letter-spacing: 0.14em; text-transform: uppercase; display: block; }
.drop .s { color: var(--grey); font-size: 0.9rem; display: block; margin-top: 6px; }
.drop .browse { color: var(--bronze-hi); text-decoration: underline; }
.files { list-style: none; margin: 10px 0 0; padding: 0; }
.files li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.files li .nm { flex: 1; overflow-wrap: anywhere; }
.files li .sz { color: var(--grey-2); font-size: 0.85rem; }
.files li .bad { color: var(--danger); font-size: 0.85rem; }
.files button { background: none; border: 1px solid var(--line); color: var(--grey); font: 500 0.72rem var(--head); letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 9px; cursor: pointer; }
.files button:hover { border-color: var(--bronze); color: var(--white); }
.submit { width: 100%; margin-top: 22px; }
.submit[disabled] { opacity: 0.6; cursor: progress; }
.status { margin-top: 16px; padding: 16px 18px; border: 1px solid var(--line); font-size: 0.95rem; }
.status[hidden] { display: none; }
.status.error { border-color: var(--danger); color: #ffd9d1; background: rgba(255, 143, 122, 0.07); }
.status.success { border-color: var(--bronze); background: rgba(212, 136, 63, 0.08); }
.status h3 { font-size: 1.15rem; letter-spacing: 0.1em; color: var(--bronze-hi); margin: 0 0 8px; }
.status p { margin: 0; color: var(--grey); }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--line); background: var(--black); padding: 48px 0 40px; position: relative; }
.site-foot::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, rgba(212,136,63,0), rgba(212,136,63,0.5), rgba(212,136,63,0)); }
.foot-row { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.foot-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 0; padding: 0; }
.foot-nav a { font: 500 0.76rem/1 var(--head); letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; color: var(--grey); padding: 8px 0; display: block; }
.foot-nav a:hover { color: var(--bronze-hi); }
.copy { margin: 30px 0 0; padding-top: 22px; border-top: 1px solid var(--line); color: var(--grey-2); font-size: 0.85rem; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .team { grid-template-columns: repeat(2, 1fr); }
  .founder { grid-template-columns: minmax(220px, 0.9fr) 1.4fr; }
  .creed { grid-column: 1 / -1; }
  .steps { grid-template-columns: 1fr 1fr; row-gap: 34px; }
  .step:nth-child(2)::after { display: none; }
  .step:nth-child(2) { padding-right: 0; }
  .step .img { height: auto; aspect-ratio: 4 / 3; }
  .step:not(:last-child)::after { top: 34%; }
}
@media (max-width: 1000px) {
  .head-row { height: 72px; gap: 14px; }
  .menu-btn { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; background: none; border: 1px solid var(--line); color: var(--white); font: 500 0.76rem/1 var(--head); letter-spacing: 0.18em; text-transform: uppercase; padding: 12px 14px; cursor: pointer; }
  .menu-btn .bars { width: 16px; height: 10px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; position: relative; }
  .menu-btn .bars::after { content: ''; position: absolute; left: 0; right: 0; top: 3.5px; border-top: 1.5px solid currentColor; }
  .site-nav { position: absolute; top: 100%; left: 0; right: 0; background: rgba(10,10,11,0.98); border-bottom: 1px solid var(--line); display: none; margin: 0; }
  .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; padding: 8px var(--gutter) 20px; }
  .site-nav a { padding: 16px 0; font-size: 0.92rem; border-bottom: 1px solid var(--line); }
  .site-nav a::after { bottom: -1px; }
  .contact-grid { grid-template-columns: 1fr; }
  .package-head { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 760px) {
  body { font-size: 1rem; }
  .btn-head { padding: 11px 13px; font-size: 0.68rem; letter-spacing: 0.14em; }
  .btn-head .arrow { display: none; }
  .menu-btn { padding: 11px 11px; }
  .menu-btn .lbl { display: none; }
  /* heroes stack: picture first so the hard hat and the framing stay in view, then the words */
  .hero { display: flex; flex-direction: column; }
  .hero-media { position: relative; inset: auto; aspect-ratio: 4 / 3; order: -1; }
  .hero-media img { object-position: var(--focus, 70% 50%); }
  .hero::before { inset: auto 0 auto 0; top: 0; height: calc(100vw * 0.75); background: linear-gradient(0deg, rgba(10,10,11,1) 0%, rgba(10,10,11,0) 40%); }
  .hero-inner, .hero-sub { min-height: 0; padding-top: 0; padding-bottom: 56px; margin-top: -44px; }
  .display { font-size: clamp(2.5rem, 12vw, 3.4rem); }
  .tagline { letter-spacing: 0.24em; font-size: 0.95rem; }
  .sectors { margin-top: 0; }
  .tiles, .team, .gallery { grid-template-columns: 1fr; }
  .tile { flex-direction: row; }
  .tile .tile-img { width: 40%; aspect-ratio: auto; flex: none; }
  .tile-body { border-top: 0; border-left: 2px solid var(--bronze); padding: 18px; }
  .tile h3 { font-size: 1.1rem; }
  .tile p { font-size: 0.92rem; }
  .founder { grid-template-columns: 1fr; }
  .portrait { max-width: 420px; }
  .values { grid-template-columns: 1fr; }
  .values li + li { border-left: 0; border-top: 1px solid var(--line); }
  .values li { padding: 24px 4px; }
  .steps { grid-template-columns: 1fr; }
  .step { padding-right: 0; padding-bottom: 40px; }
  .step:not(:last-child)::after { display: block; right: auto; left: 50%; top: auto; bottom: 12px; transform: rotate(135deg); }
  .step:nth-child(2)::after { display: block; }
  .member { flex-direction: row; }
  .member .face { width: 38%; flex: none; aspect-ratio: auto; min-height: 190px; }
  .member .face .role-mark { font-size: 2.6rem; left: 14px; bottom: 12px; }
  .member .body { border-top: 0; border-left: 2px solid var(--bronze); padding: 18px; }
  .member h2 { font-size: 1.1rem; }
  .contact-grid { gap: 40px; }
  .bid-card { padding: 24px 20px; }
  .filters { gap: 8px; }
  .filter { padding: 12px 14px; font-size: 0.74rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- per-page picture focus (used when heroes stack on phones) ---------- */
.focus-hat-home { --focus: 80% 72%; }
.focus-hat-about { --focus: 72% 80%; }
.focus-services { --focus: 62% 50%; }
.focus-projects { --focus: 70% 45%; }
.focus-team { --focus: 60% 40%; }
.focus-contact { --focus: 50% 50%; }
#limits { color: var(--grey-2); font-size: 0.86rem; margin: 6px 0 0; }
.contact-hero::before { background: linear-gradient(90deg, rgba(10,10,11,0.96) 0%, rgba(10,10,11,0.82) 42%, rgba(10,10,11,0.5) 100%), linear-gradient(0deg, rgba(10,10,11,1) 0%, rgba(10,10,11,0) 30%); }
@media (max-width: 760px) {
  .contact-hero .contact-body { padding-top: 0; margin-top: -44px; }
  .contact-hero::before { background: linear-gradient(0deg, rgba(10,10,11,1) 0%, rgba(10,10,11,0) 40%); }
}

/* ---------- this build: wordmark, placeholders, interim photo notes ---------- */
.wordmark { display: flex; flex-direction: column; margin-left: 10px; line-height: 1; }
.wm-1 { font: 700 1.55rem/1 var(--head); letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); }
.wm-2 { font: 500 0.56rem/1 var(--head); letter-spacing: 0.24em; text-transform: uppercase; color: var(--bronze); margin-top: 4px; }
.site-foot .logo-v { width: 38px; height: 33px; }

/* a clearly marked slot where the brief asks for a picture Viking has yet to supply */
.ph { width: 100%; height: 100%; min-height: 120px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; border: 1.5px dashed rgba(212,136,63,0.55); color: var(--grey); font: 500 0.82rem/1.4 var(--body);
  background: repeating-linear-gradient(135deg, var(--char-2) 0 14px, var(--char) 14px 28px); }
.ph span { max-width: 26em; background: rgba(10,10,11,0.82); padding: 8px 10px; }
.tile-img .ph, .step .img .ph { min-height: 0; }
.portrait .ph { aspect-ratio: 4 / 5; }
.member .face .ph { position: absolute; inset: 0; }

.photo-note { position: absolute; right: 12px; bottom: 12px; margin: 0; max-width: 30em; padding: 6px 10px; background: rgba(10,10,11,0.85); border: 1px dashed rgba(212,136,63,0.55); color: var(--grey); font-size: 0.78rem; line-height: 1.35; z-index: 3; }
.hero-media .photo-note { z-index: 3; }
.hero-media img { filter: brightness(0.82) contrast(1.08) saturate(0.9); }

/* home and about: the branded hard hat sits at the right of the hero */
.hero-inner { position: relative; }
.hat-slot { position: absolute; right: var(--gutter); bottom: 120px; width: min(30vw, 360px); height: auto; aspect-ratio: 1 / 1; background: repeating-linear-gradient(135deg, rgba(25,25,26,0.92) 0 14px, rgba(18,18,19,0.92) 14px 28px); }

.tagline-case { text-transform: none; letter-spacing: 0.06em; }
.founder-copy h2 .bronze { display: block; }
.contact-lines { list-style: none; margin: 0; padding: 0; }
.contact-line + .contact-line { border-top: 0; }
.contact-line .tbs { color: var(--grey); font-size: 0.95rem; }
.contact-body { padding-top: clamp(56px, 8vw, 110px); padding-bottom: clamp(56px, 8vw, 110px); }
.gallery { list-style: none; margin: 0; padding: 0; }
.gallery-note { color: var(--grey); margin: 0 0 24px; max-width: 52em; }
.project .ph { aspect-ratio: 4 / 3; height: auto; }
.project .cap { margin: 0; }
.project[hidden] { display: none; }
.member .face.role { display: flex; }
.member .face.role::after { background: linear-gradient(180deg, rgba(10,10,11,0) 30%, rgba(10,10,11,0.6) 100%); }
.privacy { color: var(--grey-2); font-size: 0.85rem; margin: 16px 0 0; }
.copy p { margin: 0 0 6px; }
.copy a { color: var(--grey); }
.steps { counter-reset: none; }
.step.key .img { border-width: 2px; }
@media (min-width: 1181px) { .step.key .img { height: clamp(190px, 19vw, 290px); margin-top: calc((clamp(150px, 15.5vw, 236px) - clamp(190px, 19vw, 290px)) / 2); } }

@media (max-width: 1000px) {
  .hat-slot { position: static; width: 100%; max-width: 360px; margin-top: 36px; }
}
@media (max-width: 760px) {
  .wm-1 { font-size: 1.2rem; }
  .wm-2 { font-size: 0.48rem; letter-spacing: 0.2em; }
  .photo-note { left: 8px; right: 8px; bottom: 52px; font-size: 0.72rem; }
  .hero-sub .hero-inner, .hero-inner { margin-top: 0; padding-top: 8px; }
  .contact-hero .contact-body { margin-top: 0; padding-top: 8px; }
  .hat-slot { max-width: none; aspect-ratio: 4 / 3; }
  .head-row { gap: 10px; }
}
.hero-media picture, .tile-img picture { display: block; width: 100%; height: 100%; }
@media (min-width: 761px) { .photo-note { top: 14px; bottom: auto; } }
.portrait picture, .member .face picture { display: block; width: 100%; height: 100%; }
.portrait img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.member .face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }

/* ---------- matching the approved mockup ---------- */
.display .nl { display: block; }
.ico { width: 34px; height: 34px; flex: none; fill: none; stroke: var(--bronze); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.values li { justify-content: center; }
.contact-line .label { width: auto; display: inline-flex; }
.contact-line .label .ico { width: 30px; height: 30px; }
.package-head { grid-template-columns: 1fr; gap: 18px; max-width: 900px; margin-bottom: 40px; }
.creed { justify-content: flex-start; padding-top: 0; padding-left: 0; padding-right: 0; }
.creed::before { top: auto; bottom: 28px; height: calc(100% - 210px); }
.creed .creed-img { min-height: 0; height: 170px; margin-bottom: 26px; border-width: 1px; }
.creed p { padding: 0 28px; }
.ph b { color: var(--bronze-hi); font-weight: 600; }
.photo-note b { color: var(--bronze-hi); font-weight: 600; }
/* hard hat: shown no larger than the mockup crop's own pixels */
figure.hat-slot { margin: 0; position: absolute; right: var(--gutter); bottom: 120px; width: auto; aspect-ratio: auto; background: none; border: 1px solid rgba(212,136,63,0.6); }
figure.hat-slot picture { display: block; }
figure.hat-slot figcaption { position: absolute; left: 0; right: 0; top: 100%; margin-top: 6px; font-size: 0.72rem; line-height: 1.3; color: var(--grey); }
@media (max-width: 1000px) { figure.hat-slot { position: relative; right: auto; bottom: auto; display: inline-block; margin-top: 36px; margin-bottom: 30px; } }
/* hero proportions closer to the mockup: compact sub-page heroes, wide two-line headlines */
.hero-sub { min-height: 0; }
.hero-sub .hero-inner { min-height: min(56vh, 540px); padding-bottom: 64px; }
.hero-sub .hero-copy { max-width: 900px; }
.hero-sub + .section { padding-top: clamp(40px, 5vw, 64px); }
@media (max-width: 760px) {
  .hero::before { display: none; }
  .hero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,11,1) 0%, rgba(10,10,11,0) 45%); pointer-events: none; }
  .hero-sub .hero-inner { min-height: 0; padding-bottom: 36px; }
}
.hero-sub .display { font-size: clamp(2.5rem, 5.2vw, 4.6rem); }
.hero-media { overflow: hidden; }
.wordmark, .wm-2 { white-space: nowrap; }
.hero-about .hero-copy { max-width: 660px; }
.hero-about .display { font-size: clamp(2.7rem, 6.4vw, 5.6rem); }
@media (max-width: 760px) { .hero-about .display { font-size: clamp(2.5rem, 12vw, 3.4rem); } }
.logo-v { width: 46px; height: 40px; flex: none; }
.site-foot .logo-v { width: 38px; height: 33px; }
@media (max-width: 760px) { .logo-v { width: 36px; height: 31px; } }


.gallery-empty-state { grid-column: 1 / -1; list-style: none; border: 1px solid var(--line); padding: 40px 24px; color: var(--grey); text-align: center; }
.gallery-empty-state p { margin: 0; }
.project picture, .project img { display: block; width: 100%; }
.project img { aspect-ratio: 449 / 223; object-fit: cover; height: auto; }
br.d { display: none; }
@media (min-width: 1001px) { br.d { display: inline; } }

/* ---------- base styles for pieces added with the mockup layout (all widths; desktop refines) ---------- */
.arw { width: 22px; height: 16px; flex: none; fill: none; stroke: var(--bronze); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tile h3 .arw { margin-top: 4px; }
.f-kick { display: block; font: 400 0.95rem/1.2 var(--head); letter-spacing: 0.22em; color: var(--bronze); }
.f-name { display: block; color: var(--bronze); margin-top: 4px; }
.tagline-case { margin: 16px 0 0; font-size: 1.1rem; }
.kick-rule { display: block; width: 120px; height: 3px; background: linear-gradient(90deg, var(--bronze), rgba(212,136,63,0.25)); margin-bottom: 18px; }
.package, .about-founder, .gallery-sec, .team-sec { padding: 56px 0; }
.package-title { font: 400 1.5rem/1.15 var(--head); letter-spacing: 0.2em; color: var(--bronze); }
.package-intro { margin: 14px 0 32px; color: var(--white); }
.about-founder .values { margin-top: 40px; }
.creed .creed-img { height: 170px; }
.creed-text { padding: 20px 28px 4px; }
.drop .lim { display: block; font-size: 0.82rem; color: var(--grey-2); margin-top: 6px; }
.drop-text { display: block; }
.project .cap { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hero-projects .hero-media picture { display: block; height: 100%; }
@media (min-width: 1001px) {
  .hero-projects .hero-media { left: auto; width: 62%; }
  .hero-projects .hero-media img { object-position: 30% 50%; }
}


/* tablet: keep hero copy on a dark ground */
@media (min-width: 761px) and (max-width: 1000px) {
  .hero::before { background: linear-gradient(90deg, rgba(10,10,11,0.96) 0%, rgba(10,10,11,0.9) 55%, rgba(10,10,11,0.55) 80%, rgba(10,10,11,0.25) 100%), linear-gradient(0deg, rgba(10,10,11,1) 0%, rgba(10,10,11,0) 26%); }
  .hero-copy { max-width: 560px; }
}



/* ---------- rendered and mockup images (tools/render/, tools/mockup_crops.py) ---------- */
.step .img picture, .creed-img picture { display: block; width: 100%; height: 100%; }
.step .img img, .creed-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.project { position: relative; }
.project .ill-tag { position: absolute; left: 10px; top: 10px; z-index: 1; padding: 3px 8px; background: rgba(10,10,11,0.78); border: 1px solid rgba(212,136,63,0.5); color: #d9cfc4; font: 500 0.72rem/1.3 var(--body); letter-spacing: 0.06em; }
@media (max-width: 760px) {
  /* the mockup's hero pictures carry their subject on the right; on a phone show that side */
  .hero-media img[src*="/mockup/"] { object-position: 100% 50%; }
  /* Home and About: the hero picture already shows the hard hat on a phone, so the panel would repeat it */
  .hero-home .hat-slot, .hero-about .hat-slot { display: none; }
}

.status.pending { border-color: var(--line); background: rgba(255,255,255,0.03); }

/* ===== desktop layer (tools/desktop_css.py) ===== */
@media (min-width: 1001px) {
:root { --u: calc(min(100vw, 1440px) / 1440); }
.wrap { max-width: 1440px; padding: 0; }

/* ---------- header ---------- */
.site-head { position: relative; background: #0a0a0b; border-bottom: calc(3 * var(--u)) solid #4a3220; backdrop-filter: none; }
.site-head::after { display: none; }
.head-row { height: calc(122 * var(--u)); gap: 0; }
.brand { margin-left: calc(44.5 * var(--u)); margin-top: calc(8 * var(--u)); }
.logo-v { width: calc(123 * var(--u)); height: calc(89 * var(--u)); }
.wordmark { margin-left: calc(11 * var(--u)); margin-top: calc(-8 * var(--u)); }
.wm-1 { font-size: calc(42.5 * var(--u)); letter-spacing: calc(6 * var(--u)); line-height: 1; margin-top: calc(2 * var(--u)); transform: scaleX(1.44); transform-origin: 0 0; display: block; }
.wm-2 { font-size: calc(18.5 * var(--u)); letter-spacing: calc(2.5 * var(--u)); margin: calc(4 * var(--u)) 0 0 calc(7 * var(--u)); font-weight: 500; }
.site-nav { margin-left: auto; margin-right: calc(66 * var(--u)); }
.site-nav ul { gap: calc(40.6 * var(--u)); }
.site-nav a { font-size: calc(20 * var(--u)); letter-spacing: calc(1.2 * var(--u)); font-weight: 500; padding: calc(19 * var(--u)) 0 calc(7 * var(--u)); }
.site-nav a::after { bottom: 0; height: calc(3 * var(--u)); }
.btn-head { width: calc(197 * var(--u)); height: calc(62 * var(--u)); padding: 0; border-width: calc(3 * var(--u)); font-size: calc(21 * var(--u)); letter-spacing: calc(1.6 * var(--u)); margin-right: calc(38 * var(--u)); }
.btn-head .arrow { display: none; }

/* ---------- shared hero ---------- */
.hero { display: block; }
.hero::before { background: linear-gradient(90deg, rgba(10,10,11,0.97) 0%, rgba(10,10,11,0.9) 30%, rgba(10,10,11,0.45) 52%, rgba(10,10,11,0) 70%); }
.hero-media { position: absolute; inset: 0; }
.hero-inner { min-height: 0; display: block; padding: 0; margin: 0; position: relative; }
.hero-copy { margin-left: calc(68 * var(--u)); max-width: none; }
.display { margin-left: calc(-3 * var(--u)); }
.display { font-weight: 700; letter-spacing: calc(2 * var(--u)); line-height: 1; }
.display .nl { display: block; }
.kicker { font-weight: 500; margin: 0; }
.kicker::before { display: none; }
.lead { color: var(--white); max-width: none; margin: 0; }
.btn-solid { border: 0; }
.hero-copy .btn { padding: 0; justify-content: center; font-weight: 600; }
.hero-copy .btn .arrow { width: calc(22 * var(--u)); }

/* ---------- home ---------- */
.hero-home { height: calc(800 * var(--u)); }
.hero-home .hero-copy { padding-top: calc(112 * var(--u)); }
.hero-home .display { font-size: calc(102 * var(--u)); line-height: calc(99 * var(--u)); letter-spacing: calc(3.05 * var(--u)); }
.hero-home .display .nl { letter-spacing: calc(4.9 * var(--u)); margin-top: calc(8 * var(--u)); }
.hero-home .tagline { font: 600 calc(40 * var(--u))/1 var(--head); letter-spacing: calc(8.1 * var(--u)); margin: calc(24 * var(--u)) 0 0; }
.hero-home .lead { font-size: calc(32 * var(--u)); line-height: calc(40 * var(--u)); letter-spacing: calc(0.6 * var(--u)); width: calc(700 * var(--u)); margin-top: calc(42 * var(--u)); }
.hero-home .btn { width: calc(385 * var(--u)); height: calc(76 * var(--u)); font-size: calc(26 * var(--u)); letter-spacing: calc(2.2 * var(--u)); margin-top: calc(2 * var(--u)); }
.hero-home .hat-slot { position: absolute; left: calc(900 * var(--u)); top: calc(418 * var(--u)); width: calc(530 * var(--u)); height: calc(365 * var(--u)); right: auto; bottom: auto; border: 0; margin: 0; }
.hat-slot picture, .hat-slot img { width: 100%; height: 100%; object-fit: cover; }
.sectors { margin: 0; padding: calc(18.5 * var(--u)) 0 0; }
.tiles { grid-template-columns: calc(316 * var(--u)) calc(320 * var(--u)) calc(333 * var(--u)) calc(339 * var(--u)); column-gap: calc(24 * var(--u)); margin-left: calc(26 * var(--u)); }
.tile { background: #0e0e0f; border: 1px solid #1d1d1f; transform: none !important; }
.tile-img { aspect-ratio: auto; height: calc(280 * var(--u)); }
.tile-body { border-top: 0; padding: calc(22.5 * var(--u)) calc(12 * var(--u)) calc(40 * var(--u)) calc(20 * var(--u)); }
.tile h3 { font-size: calc(33 * var(--u)); line-height: calc(40 * var(--u)); letter-spacing: calc(0.6 * var(--u)); font-weight: 600; height: calc(80 * var(--u)); padding-right: calc(10 * var(--u)); }
.tile p { font-size: calc(22.6 * var(--u)); line-height: calc(33 * var(--u)); letter-spacing: 0; margin-top: calc(12 * var(--u)); color: #c9c4bd; }
.arw { width: calc(28 * var(--u)); height: calc(24 * var(--u)); flex: none; fill: none; stroke: var(--bronze); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; margin-top: calc(7 * var(--u)); }

/* ---------- about ---------- */
.hero-about { height: calc(716 * var(--u)); }
.hero-about .hero-copy { padding-top: calc(59 * var(--u)); max-width: none; }
.kick-rule { display: block; margin: 0; width: calc(182 * var(--u)); height: calc(4 * var(--u)); background: linear-gradient(90deg, var(--bronze), rgba(212,136,63,0.25)); }
.hero-about .display { font-size: calc(95 * var(--u)); line-height: calc(101 * var(--u)); letter-spacing: calc(1.6 * var(--u)); margin-top: calc(10 * var(--u)); }
.display .bronze:not(.nl) { display: inline; }
.hero-about .a1 { letter-spacing: calc(-1.4 * var(--u)); } .hero-about .a3 .bronze { letter-spacing: calc(-1.3 * var(--u)); } .hero-about .a4 { letter-spacing: calc(2.9 * var(--u)); }
.hero-about .lead { font-size: calc(32 * var(--u)); line-height: calc(40 * var(--u)); letter-spacing: calc(0.6 * var(--u)); width: calc(760 * var(--u)); margin-top: calc(24 * var(--u)); }
.hero-about .hat-slot { position: absolute; left: calc(810 * var(--u)); top: calc(238 * var(--u)); width: calc(630 * var(--u)); height: calc(440 * var(--u)); right: auto; bottom: auto; border: 0; margin: 0; }
.about-founder { padding: calc(37 * var(--u)) 0 0; }
.founder { display: grid; grid-template-columns: calc(325 * var(--u)) calc(705 * var(--u)) calc(302 * var(--u)); column-gap: 0; margin-left: calc(52 * var(--u)); width: auto; align-items: start; }
.portrait { border: 0; height: calc(477 * var(--u)); }
.portrait::after { display: none; }
.portrait picture, .portrait img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.founder-copy { margin-left: calc(51 * var(--u)); padding-top: calc(20 * var(--u)); align-self: start; }
.founder h2 { margin: 0; }
.f-kick { display: block; font: 400 calc(34 * var(--u))/1 var(--head); letter-spacing: calc(5 * var(--u)); color: var(--bronze); }
.f-name { display: block; font: 700 calc(59 * var(--u))/1 var(--head); letter-spacing: calc(0.4 * var(--u)); color: var(--bronze); margin-top: calc(12 * var(--u)); }
.founder-copy p { font-size: calc(27 * var(--u)); line-height: calc(37.8 * var(--u)); letter-spacing: calc(0.25 * var(--u)); color: #cfc9c2; max-width: calc(640 * var(--u)); margin-top: calc(30 * var(--u)); }
.creed { background: none; border: 0; padding: 0; margin-left: 0; margin-top: calc(15 * var(--u)); display: block; position: relative; height: calc(482 * var(--u)); }
.creed::before { left: calc(6 * var(--u)); top: calc(185 * var(--u)); bottom: 0; width: calc(3 * var(--u)); height: auto; }
.creed .creed-img { height: calc(185 * var(--u)); margin: 0; }
.creed-text { padding: 0 0 0 calc(61 * var(--u)); }
.creed p { padding: 0; }
.creed p.creed-words { font-size: calc(36 * var(--u)); line-height: calc(40 * var(--u)); letter-spacing: calc(-0.4 * var(--u)); margin: 0; }
.creed p:last-child { font-size: calc(23 * var(--u)); line-height: calc(27.2 * var(--u)); color: #cfc9c2; margin-top: calc(2 * var(--u)); }
.about-founder .values { margin: calc(4 * var(--u)) calc(55 * var(--u)) 0 calc(52 * var(--u)); border-bottom: 0; border-top: calc(2 * var(--u)) solid #6b4524; padding-top: calc(23 * var(--u)); }
.values li { padding: 0; justify-content: flex-start; gap: 0; font: 600 calc(29 * var(--u))/calc(40 * var(--u)) var(--head); letter-spacing: calc(2.4 * var(--u)); }
.values li + li { border-left: 0; }
.values li:nth-child(1) { padding-left: calc(2 * var(--u)); }
.values li:nth-child(2) { padding-left: calc(41 * var(--u)); border-left: calc(3 * var(--u)) solid #6b4524; }
.values li:nth-child(3) { padding-left: calc(77 * var(--u)); border-left: calc(3 * var(--u)) solid #6b4524; }
.values .ico { width: calc(100 * var(--u)); height: calc(100 * var(--u)); stroke-width: 1.5; margin-right: calc(38 * var(--u)); }
.values li:nth-child(3) .ico { width: calc(117 * var(--u)); height: calc(116 * var(--u)); margin-right: calc(32 * var(--u)); margin-top: calc(-2 * var(--u)); }

/* ---------- services ---------- */
.hero-services { height: calc(753 * var(--u)); }
.hero-services .hero-copy { padding-top: calc(70 * var(--u)); }
.hero-services .kicker { font-size: calc(32 * var(--u)); letter-spacing: calc(7 * var(--u)); }
.hero-services .display { font-size: calc(99 * var(--u)); line-height: calc(103 * var(--u)); letter-spacing: calc(3.1 * var(--u)); margin-top: calc(10 * var(--u)); }
.hero-services .display .nl { letter-spacing: calc(0.7 * var(--u)); }
.tagline-case { font: 400 calc(37.9 * var(--u))/1 var(--body); color: var(--white); margin: calc(29 * var(--u)) 0 0; letter-spacing: 0; }
.hero-services .lead { font-size: calc(31.5 * var(--u)); line-height: calc(40 * var(--u)); letter-spacing: calc(0.8 * var(--u)); width: calc(1000 * var(--u)); margin-top: calc(14 * var(--u)); }
.hero-services .btn { width: calc(396 * var(--u)); height: calc(77 * var(--u)); font-size: calc(26 * var(--u)); letter-spacing: calc(2.2 * var(--u)); margin-top: calc(-7 * var(--u)); }
.package { padding: calc(58 * var(--u)) 0 0; }
.package-title { font: 400 calc(45 * var(--u))/1 var(--head); letter-spacing: calc(10.6 * var(--u)); color: var(--bronze); margin-left: calc(69 * var(--u)); }
.package-intro { font-size: calc(33.5 * var(--u)); line-height: calc(44 * var(--u)); letter-spacing: calc(0.8 * var(--u)); color: var(--white); margin: calc(19 * var(--u)) 0 0 calc(68 * var(--u)); width: calc(1300 * var(--u)); }
.steps { display: block; position: relative; height: calc(290 * var(--u)); margin-top: calc(31 * var(--u)); }
.step { position: absolute; top: 0; width: calc(280 * var(--u)); padding: 0; }
.step:nth-child(1) { left: calc(66 * var(--u)); } .step:nth-child(2) { left: calc(418 * var(--u)); } .step:nth-child(3) { left: calc(749 * var(--u)); } .step:nth-child(4) { left: calc(1100 * var(--u)); }
.step:not(:last-child)::after { display: block; content: ''; right: auto; top: calc(91 * var(--u)); width: calc(36 * var(--u)); height: calc(31 * var(--u)); border: 0; transform: none;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M1 8h20M14 1.5L21 8l-7 6.5' fill='none' stroke='%23d4883f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.step:nth-child(1)::after { left: calc(309 * var(--u)); } .step:nth-child(2)::after { left: calc(288 * var(--u)); } .step:nth-child(3)::after { left: calc(287 * var(--u)); }
.step .img { height: calc(201 * var(--u)); border: 1px solid #2c2a28; }
.step figcaption { display: block; padding: 0 0 0 0; margin-top: calc(9 * var(--u)); font: 500 calc(30 * var(--u))/calc(40 * var(--u)) var(--head); letter-spacing: calc(3 * var(--u)); color: var(--white); border: 0; }
.scope-note { border: 0; padding: 0; margin: calc(22 * var(--u)) 0 0; font-size: calc(25 * var(--u)); letter-spacing: calc(0.42 * var(--u)); color: #c9c4bd; text-align: left; padding-left: calc(208 * var(--u)); }

/* ---------- projects ---------- */
.hero-projects { height: calc(543 * var(--u)); overflow: visible; }
.hero-projects .hero-copy { padding-top: calc(37 * var(--u)); }
.hero-projects .kicker { letter-spacing: calc(4.1 * var(--u)) !important; }
.hero-projects .kicker, .hero-team .kicker, .contact-hero .kicker { font-size: calc(28 * var(--u)); letter-spacing: calc(5.2 * var(--u)); }
.hero-projects .display { font-size: calc(95 * var(--u)); line-height: calc(100 * var(--u)); letter-spacing: calc(-0.4 * var(--u)); margin-top: calc(4 * var(--u)); }
.hero-projects .display .nl { letter-spacing: calc(1.8 * var(--u)); }
.hero-projects .lead { font-size: calc(30 * var(--u)); line-height: calc(39 * var(--u)); width: calc(690 * var(--u)); margin-top: calc(23 * var(--u)); }
.filters { position: absolute; left: calc(64 * var(--u)); top: calc(455 * var(--u)); margin: 0; gap: calc(20 * var(--u)); flex-wrap: nowrap; }
.filter { height: calc(70 * var(--u)); padding: 0; font: 500 calc(24 * var(--u))/1 var(--head); letter-spacing: calc(1 * var(--u)); border: calc(2 * var(--u)) solid #3a3a3c; background: rgba(10,10,11,0.75); }
.filters li:nth-child(1) .filter { width: calc(162 * var(--u)); }
.filters li:nth-child(2) .filter { width: calc(303 * var(--u)); }
.filters li:nth-child(3) .filter, .filters li:nth-child(4) .filter, .filters li:nth-child(5) .filter { width: calc(258 * var(--u)); }
.filter[aria-pressed='true'] { color: #120c08; }
.gallery-sec { padding: calc(10 * var(--u)) 0 calc(60 * var(--u)); }
.gallery { grid-template-columns: calc(449 * var(--u)) calc(441 * var(--u)) calc(453 * var(--u)); column-gap: calc(23 * var(--u)); row-gap: calc(17 * var(--u)); margin-left: calc(26 * var(--u)); }
.project { background: #0e0e0f; border: 1px solid #1d1d1f; }
.project .ph { aspect-ratio: auto; height: calc(223 * var(--u)); }
.project .cap { display: flex; align-items: flex-start; justify-content: space-between; height: calc(61 * var(--u)); padding: calc(15 * var(--u)) calc(16 * var(--u)) 0 calc(21 * var(--u)); border-top: 0; font: 500 calc(26 * var(--u))/1 var(--head); letter-spacing: calc(1.5 * var(--u)); }

/* ---------- our team ---------- */
.hero-team { height: calc(433 * var(--u)); }
.hero-team .hero-copy { padding-top: calc(39 * var(--u)); }
.hero-team .display { font-size: calc(91 * var(--u)); line-height: calc(94 * var(--u)); letter-spacing: calc(1.7 * var(--u)); margin-top: calc(7 * var(--u)); }
.hero-team .display .nl { letter-spacing: calc(1.7 * var(--u)); }
.hero-team .lead { font-size: calc(30 * var(--u)); line-height: calc(40 * var(--u)); width: calc(900 * var(--u)); margin-top: calc(19 * var(--u)); }
.team-sec { padding: 0 0 calc(60 * var(--u)); }
.team { grid-template-columns: calc(333 * var(--u)) repeat(4, calc(239 * var(--u))); column-gap: calc(20 * var(--u)); margin-left: calc(33 * var(--u)); }

.founder-card h2 { font-size: calc(31 * var(--u)) !important; letter-spacing: calc(2.8 * var(--u)) !important; }
.founder-card .title { font-size: calc(28 * var(--u)) !important; margin-top: calc(8 * var(--u)) !important; }
.team .founder-card p.desc { font-size: calc(25 * var(--u)); line-height: calc(36 * var(--u)); font-weight: 500; letter-spacing: calc(0.2 * var(--u)); color: #e2ddd6; margin-top: calc(20 * var(--u)); }
.member { background: none; border: 0; }
.member .face { aspect-ratio: auto; height: calc(348 * var(--u)); }
.member .face picture, .member .face img { width: 100%; height: 100%; object-fit: cover; }
.member .body { padding: calc(18 * var(--u)) 0 0 calc(11 * var(--u)); border-top: 0; }
.member h2 { font-size: calc(31 * var(--u)); letter-spacing: calc(1.6 * var(--u)); }
.member .title { font: italic 500 calc(27 * var(--u))/1 var(--body); margin-top: calc(12 * var(--u)); color: var(--bronze); }
.member p.desc { font-size: calc(22 * var(--u)); line-height: calc(32 * var(--u)); color: #d7d2cc; margin-top: calc(18 * var(--u)); }
.member h2 { font-size: calc(28 * var(--u)) !important; }

/* ---------- contact ---------- */
.contact-hero { padding: 0; }
.contact-hero::before { background: linear-gradient(90deg, rgba(10,10,11,0.97) 0%, rgba(10,10,11,0.93) 38%, rgba(10,10,11,0.45) 60%, rgba(10,10,11,0.2) 100%), linear-gradient(0deg, rgba(10,10,11,1) 0%, rgba(10,10,11,1) 72%, rgba(10,10,11,0) 90%); }
.contact-body { padding: 0 0 calc(60 * var(--u)); }
.contact-grid { display: grid; grid-template-columns: calc(695 * var(--u)) calc(703 * var(--u)); gap: 0; }
.contact-intro { padding: calc(60 * var(--u)) 0 0 calc(70 * var(--u)); }
.contact-hero .display { font-size: calc(102 * var(--u)); line-height: calc(106 * var(--u)); letter-spacing: calc(1.9 * var(--u)); margin-top: calc(8 * var(--u)); }
.contact-hero .display .nl { letter-spacing: calc(0.5 * var(--u)); }
.contact-intro .lead { font-size: calc(30 * var(--u)); line-height: calc(40 * var(--u)); letter-spacing: calc(0.67 * var(--u)); width: calc(680 * var(--u)); margin: calc(28 * var(--u)) 0 0; }
.contact-lines { position: absolute; left: 0; top: calc(444 * var(--u)); width: calc(695 * var(--u)); margin: 0; }
.contact-intro { position: relative; height: calc(1180 * var(--u)); }
.contact-line { border: 0 !important; padding: 0; max-width: none; align-items: flex-start; gap: 0; position: absolute; left: 0; }
.contact-line:nth-child(1) { top: calc(122 * var(--u)); } .contact-line:nth-child(2) { top: calc(234 * var(--u)); } .contact-line:nth-child(3) { top: calc(339 * var(--u)); }
.contact-line .label { width: calc(180 * var(--u)); position: relative; height: calc(10 * var(--u)); }
.contact-line .ico { position: absolute; top: 0; }
.contact-line:nth-child(1) .ico { left: calc(54.5 * var(--u)); width: calc(82.5 * var(--u)); height: calc(81 * var(--u)); }
.contact-line:nth-child(2) .ico { left: calc(58.6 * var(--u)); width: calc(68.6 * var(--u)); height: calc(75 * var(--u)); }
.contact-line:nth-child(3) .ico { left: calc(42.5 * var(--u)); width: calc(103 * var(--u)); height: calc(107 * var(--u)); }
.contact-line .ico { stroke-width: 2; }
.contact-line a, .contact-line .tbs { font-size: calc(35 * var(--u)); line-height: 1; border: 0; margin-top: calc(25 * var(--u)); }
.contact-line .tbs { font-size: calc(26 * var(--u)); }
.contact-rule { display: block; position: absolute; left: calc(67 * var(--u)); top: calc(968 * var(--u)); width: calc(578 * var(--u)); height: calc(3 * var(--u)); background: #b8702f; margin: 0; }
.bid-card { margin-top: calc(121 * var(--u)); width: calc(703 * var(--u)); padding: calc(36 * var(--u)) calc(39 * var(--u)) calc(40 * var(--u)) calc(42 * var(--u)); border: calc(2 * var(--u)) solid #4a4a4c; border-top: calc(2 * var(--u)) solid #4a4a4c; background: #0a0a0b; box-shadow: none; }
.bid-card h2 { font: 500 calc(38 * var(--u))/1 var(--head); letter-spacing: calc(2.3 * var(--u)); margin-left: calc(-3 * var(--u)); }
.bid-card .sub { font-size: calc(27 * var(--u)); margin: calc(13 * var(--u)) 0 0 calc(-3 * var(--u)); color: var(--white); }
.field { margin: 0; }
.field label { font-size: calc(26 * var(--u)); margin: calc(21.5 * var(--u)) 0 0; height: calc(30 * var(--u)); }
.field input { height: calc(55 * var(--u)); margin-top: calc(7 * var(--u)); border: 0; border-radius: calc(3 * var(--u)); }
.field:first-of-type label { margin-top: calc(25 * var(--u)); }
.drop { margin-top: calc(41 * var(--u)); height: calc(188 * var(--u)); padding: 0; border: calc(3 * var(--u)) dashed #8a8580; display: flex; align-items: center; gap: calc(37 * var(--u)); padding-left: calc(84 * var(--u)); text-align: left; }
.drop .ico { width: calc(102 * var(--u)); height: calc(83 * var(--u)); stroke-width: 1.8; flex: none; }
.drop .t { font: 600 calc(29 * var(--u))/1 var(--body); letter-spacing: 0; text-transform: none; }
.drop .s { font-size: calc(21 * var(--u)); line-height: calc(30 * var(--u)); margin-top: calc(10 * var(--u)); color: #cfc9c2; max-width: calc(400 * var(--u)); display: block; }
.drop .lim { display: block; font-size: calc(16 * var(--u)); line-height: calc(22 * var(--u)); margin-top: calc(8 * var(--u)); color: #a9a29a; }
.submit { height: calc(97 * var(--u)); margin-top: calc(21 * var(--u)); font-size: calc(30 * var(--u)); letter-spacing: calc(3.4 * var(--u)); }
}
/* ===== end desktop layer ===== */