/* ============================================================
   1FORG — 1 Forge Digital design system
   Design tokens, layout, components.
   ============================================================ */

:root {
  /* Achromatic system (design tokens) */
  --black: #010101;
  --white: #f1f1f1;
  --veil: #0a0a0a;
  --ring: #01010140;
  --ring-strong: #01010159;
  --ring-hover: #010101d9;
  --on-dark-ring: #f1f1f173;

  /* --- 1forg brand accent (the acid green from the mark) --- */
  --brand: #C9FF42;
  --brand-dim: #C9FF4226;

  --font-mono: "Fragment Mono", "Roboto Mono", monospace;
  --text-xs: .65rem;
  --text-sm: .68rem;
  --text-base: .7rem;
  --text-md: 1rem;
  --text-h1: 1.7em;
  --radius-panel: .1875em;
  --radius-pill: 9999px;
  --inset: .75rem;
  --dur-exit: .52s;
  --dur-enter: .95s;
  --dur-menu-open: .92s;
  --dur-menu-close: .82s;
  --ease-exit: cubic-bezier(.55,0,.55,.2);
  --ease-enter: cubic-bezier(.16,1,.3,1);
  --ease-menu-open: cubic-bezier(.215,.61,.355,1);
}

* { box-sizing: border-box; }
html { font-size: clamp(16px, 0.8333vw, 24px); background-color: var(--veil); }

body {
  margin: 0; min-height: 100vh; background-color: var(--veil);
  color: var(--white); font-family: var(--font-mono);
  font-size: var(--text-base); line-height: 1; letter-spacing: -.02em;
  text-transform: uppercase; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--white); color: var(--black); }
button { font-family: inherit; }
.u-hide { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

.skip-link {
  position: fixed; top: .55rem; left: .55rem; z-index: 100000; padding: .55rem .85rem;
  background: var(--white); color: var(--black); border: 1px solid var(--black);
  font: 400 12px/1 var(--font-mono); text-transform: uppercase; transform: translateY(-200%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); outline: 2px solid var(--black); outline-offset: 2px; }

/* ============================================================
   PAGE TRANSITION OVERLAY
   ============================================================ */
.load_grid { display: none; position: fixed; inset: 0; z-index: 850; pointer-events: none; }
.load_grid.is-on { display: block; }
.load_grid .pt-cover { position: absolute; inset: 0; opacity: 0; background: var(--veil); }
.load_grid .pt-veil { position: absolute; inset: 0; opacity: 0; background: rgba(10,10,10,.35); will-change: opacity, backdrop-filter; }

/* ============================================================
   TOP FIXED CHROME
   ============================================================ */
.fixed_top { position: fixed; top: 0; left: 0; right: 0; z-index: 998; }
.top_tagline { position: fixed; top: var(--inset); left: 50%; transform: translateX(-50%); z-index: 998; font-size: var(--text-base); opacity: .9; }
.top_cap { position: fixed; top: var(--inset); right: var(--inset); z-index: 998; display: flex; gap: 1rem; align-items: center; font-size: var(--text-xs); }
.live_time { font-variant-numeric: tabular-nums; }

/* ============================================================
   FIXED MENU (white panel, morphs to side panel)
   ============================================================ */
.fixed_menu {
  position: fixed; top: var(--inset); left: var(--inset); z-index: 999;
  width: 35%; max-width: 34rem; max-height: calc(100dvh - 2 * var(--inset));
  min-height: 20.5rem;
  background: var(--white); color: var(--black); border-radius: var(--radius-panel);
  padding: var(--inset); display: flex; flex-direction: column; gap: 1.1rem;
  overflow: auto; overscroll-behavior: contain;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  transition: transform .45s var(--ease-menu-open), opacity .35s ease, visibility .35s ease, width .4s var(--ease-menu-open), bottom .4s var(--ease-menu-open);
}
.fixed_menu.is-menu-panel-expanded { bottom: var(--inset); }
/* hide the whole menu so the site is fully visible; reopen pill takes its place */
body.menu-hidden .fixed_menu { transform: translateX(calc(-100% - var(--inset) - .5rem)); opacity: 0; visibility: hidden; pointer-events: none; }
.menu-reopen {
  position: fixed; top: var(--inset); left: var(--inset); z-index: 998;
  display: none; align-items: center; gap: .6em;
  padding: .55em .9em; border: 1px solid var(--on-dark-ring); border-radius: var(--radius-pill);
  background: rgba(10,10,10,.55); color: var(--white); font: 400 var(--text-base) var(--font-mono);
  text-transform: uppercase; letter-spacing: .01em; cursor: pointer; user-select: none;
  backdrop-filter: blur(6px); transition: background .3s ease, border-color .3s ease;
}
.menu-reopen:hover { border-color: var(--brand); background: rgba(10,10,10,.75); }
body.menu-hidden .menu-reopen { display: inline-flex; }
.top_side { display: flex; flex-direction: column; gap: 1.1rem; }
.flex_title { display: flex; flex-direction: column; }
.txt { font-size: var(--text-base); letter-spacing: .01em; }
[data-scrambling] { opacity: .35; }

.flex_row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; }
.expand_btn {
  cursor: pointer; user-select: none; border: 0; background: transparent;
  font: 400 var(--text-base) var(--font-mono); text-transform: uppercase;
  letter-spacing: .01em; padding: .3em .6em; border: 1px solid var(--ring-strong);
  border-radius: var(--radius-pill); color: var(--black); transition: opacity .35s ease;
}
.menu_links { display: flex; flex-direction: column; }
.h_link { display: flex; align-items: center; gap: .5em; padding: .45em 0; border-top: 1px solid var(--ring); transition: transform .25s ease; }
.h_link:last-child { border-bottom: 1px solid var(--ring); }
.h_link:hover { transform: translate(.8em); }
.h_link .mark { width: .95em; height: .95em; flex: 0 0 auto; opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .2s; }
.h_link:hover .mark { opacity: 1; transform: none; }

.in_progress { margin-top: .2em; }
.in_progress .label, .commissions .label { border-top: 1px solid var(--ring); padding-top: .55rem; display: flex; align-items: center; gap: .5em; }
.counts_number { background: var(--black); color: var(--white); border-radius: var(--radius-panel); padding: .4em .7em; font-size: var(--text-xs); display: inline-flex; line-height: 1; }
.in_progress .list { display: flex; flex-direction: column; gap: .25em; margin-top: .5em; opacity: .8; }
.commissions { margin-top: .4em; }
.commissions a { text-decoration: underline; }
.brand-mark { width: 1.1em; height: 1.1em; display: inline-flex; vertical-align: middle; }
.brand-mark svg { width: 100%; height: 100%; display: block; }

/* ============================================================
   HERO  (3-col synchronized list over crossfading video)
   ============================================================ */
.hero { z-index: 3; background-color: var(--black); width: 100%; min-height: 100vh; min-height: 100dvh; position: relative; overflow: clip; }
.wrapper_hero { z-index: 25; flex-flow: column; width: 100%; min-height: 100vh; min-height: 100dvh; padding: var(--inset); display: flex; position: relative; }
.features_hero { justify-content: center; align-items: flex-start; margin-top: auto; margin-bottom: 6em; display: flex; position: relative; flex-flow: column; }
.tag { display: flex; justify-content: flex-end; width: 100%; margin-bottom: .75rem; }
.tag_recent { background-color: var(--white); color: var(--black); border-radius: var(--radius-panel); margin-left: auto; padding: .4375em; font-size: 1em; }
.flex_features { width: 55%; margin-left: auto; padding-left: var(--inset); display: flex; }
.cms_features { width: 100%; }
.list_projects { grid-row-gap: .75em; flex-flow: column; display: flex; flex-shrink: 0; min-height: auto; }

.cms_line { opacity: .6; color: var(--white); cursor: pointer; padding-left: 0; transition: all .5s; position: relative; display: flex; align-items: baseline; flex-shrink: 0; }
.cms_line .name { flex: 0 0 46%; transition: all .5s; position: relative; }
.cms_line .industry { flex: 0 0 38%; opacity: .6; transition: opacity .5s; }
.cms_line .year { flex: 1 1 auto; }
.cms_line.is-active { opacity: 1; }
.cms_line.is-active .name { color: var(--black); background: var(--brand); padding: .45em .6em .5em .4em; border-radius: var(--radius-pill); }
.cms_line.is-active .industry { opacity: 1; }

/* arrow marker tracking active line */
.arrow_specific {
  width: .75em; height: 1.55em; position: fixed; z-index: 30;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 44'%3E%3Cpath d='M2 2 L16 22 L2 42' fill='none' stroke='%23010101' stroke-width='2'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  transition: left .3s var(--ease-enter), top .3s var(--ease-enter); pointer-events: none;
}

/* ============================================================
   BACKGROUND VIDEO LAYER
   ============================================================ */
.background_cases { z-index: 10; width: 100%; height: 100%; position: absolute; inset: 0; overflow: hidden; }
.overlay_slightly { z-index: 15; background-color: #00000038; width: 100%; height: 100%; position: absolute; inset: 0; }
.esc__surface { position: absolute; inset: 0; transition: filter .35s ease; }
.cms_background { z-index: 3; width: 100%; height: 100%; position: absolute; inset: 0; }
.cms_flex { width: 100%; height: 100%; position: absolute; inset: 0; }
.cms_item { width: 100%; height: 100%; position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s var(--ease-enter); will-change: opacity; }
.cms_item.is-active { opacity: 1; }
.cms_item video { object-fit: cover; width: 100%; height: 100%; padding: 0; position: absolute; inset: 0; display: block; }

/* Ken Burns — slow cinematic zoom/pan on the active still (video feel) */
.cms_item .kenburns {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  transform: scale(1.08); will-change: transform, filter;
}
.cms_item .kenburns.is-running { animation: kenburns 14s var(--ease-enter) infinite alternate; }
@keyframes kenburns {
  0%   { transform: scale(1.08) translate(0,0); }
  100% { transform: scale(1.18) translate(-1.5%, -1.5%); }
}

/* mouse parallax layer moves as one (adds depth) */
.background_cases { overflow: hidden; will-change: transform; }

/* ESC FX filters on the media surface */
.esc-fx[data-fx="1"] .esc__surface { filter: blur(3px) contrast(1.35); }
.esc-fx[data-fx="2"] .esc__surface { filter: grayscale(1) contrast(1.25); }
.esc-fx[data-fx="3"] .esc__surface { filter: invert(.92) hue-rotate(90deg); }
.esc-fx[data-fx="4"] .esc__surface { filter: contrast(2.2) brightness(1.4) saturate(1.4); }
.esc-fx[data-fx="5"] .esc__surface { filter: blur(.5px) sepia(.7) hue-rotate(-40deg) contrast(1.1); }

/* ============================================================
   EXPANDED PANEL
   ============================================================ */
.menu_expanded {
  position: fixed; top: var(--inset); right: var(--inset); z-index: 997;
  width: 62.6%; height: 97%; display: none; background: var(--black); color: var(--white);
  border-radius: var(--radius-panel); overflow: hidden; border: 1px solid var(--on-dark-ring);
}
.exp_menu_inside { height: 100%; display: flex; flex-direction: column; margin: 0; }
.menu-expanded-open .menu_expanded { display: flex; }
.exp_top { display: flex; justify-content: space-between; align-items: center; padding: var(--inset); border-bottom: 1px solid var(--on-dark-ring); }
.exp_main { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 1px; background: var(--on-dark-ring); }
.exp_pane { background: var(--black); padding: var(--inset); display: flex; flex-direction: column; }
.exp_pane > .exp_head { opacity: .5; margin-bottom: .7em; }
.exp_pane ul { list-style: none; margin: 0; padding: 0; }
.exp_pane li { padding: .4em 0; border-top: 1px solid var(--on-dark-ring); }
.exp_pane a:hover { color: var(--brand); }
.exp_bottom { display: flex; justify-content: space-between; padding: var(--inset); border-top: 1px solid var(--on-dark-ring); font-size: var(--text-xs); opacity: .6; }

/* full nav list inside the EXPAND panel */
.panel_nav { display: none; flex-direction: column; padding: 1.2rem var(--inset) 0; }
.panel_nav .pn_link {
  display: flex; align-items: center; gap: .5em; padding: .75em 0;
  font-size: 1.15rem; letter-spacing: .01em; border-top: 1px solid var(--ring);
  transition: background .2s, padding-left .2s; color: var(--black);
}
.panel_nav .pn_link:last-child { border-bottom: 1px solid var(--ring); }
.panel_nav .pn_link:hover { background: var(--black); color: var(--white); padding-left: .6em; }
.panel_nav .pn_link .pn_arrow { font-size: 1rem; }
.panel_nav .pn_link.is-current { font-weight: 700; }
.panel_nav .pn_link.is-current .pn_arrow { transform: translateX(2px); }

/* ============================================================
   BOTTOM FIXED CHROME
   ============================================================ */
.bottom_fixed {
  position: fixed; left: var(--inset); right: var(--inset); bottom: var(--inset); z-index: 998;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  color: var(--white); font-size: var(--text-xs);
}
.bottom_left { opacity: .9; }
.bottom_socials { display: flex; gap: .9em; position: absolute; left: 50%; transform: translateX(-50%); }
.bottom_socials a { text-decoration: underline; transition: opacity .2s; }
.bottom_socials a:hover { opacity: .6; }
.bottom_right { display: flex; align-items: center; gap: .9em; }
.clickhold {
  cursor: pointer; border: 1px solid var(--on-dark-ring); padding: .5em .9em; border-radius: var(--radius-pill);
  background: transparent; color: var(--white); font: 400 var(--text-xs) var(--font-mono);
  text-transform: uppercase; letter-spacing: .02em; transition: background .25s, color .25s, border-color .25s;
}
.clickhold:hover { border-color: var(--white); }
.clickhold.on { background: var(--white); color: var(--black); border-color: var(--white); }
.more_btn { display: inline-flex; align-items: center; justify-content: center; width: 2.2em; height: 2.2em; border: 1px solid var(--on-dark-ring); border-radius: 50%; cursor: pointer; }
.more_btn .dot { width: .28em; height: .28em; border-radius: 50%; background: var(--white); display: inline-block; }

/* ============================================================
   CONTENT PAGES (services, agents, blog, about)
   ============================================================ */
.subpage { position: relative; z-index: 20; min-height: 100vh; min-height: 100dvh; padding: 0; }
.subpage .subpage-inner { position: relative; z-index: 20; padding: calc(var(--inset) + 9.5rem) var(--inset) 12rem calc(35% + 2rem); max-width: 1400px; }
.subpage .subpage-inner > * { max-width: 60rem; }
.subpage h1, .subpage .lead { max-width: 60rem; }
.subpage .h1 { font-size: var(--text-h1); line-height: 1.2; letter-spacing: -.01em; margin: 1.5rem 0 .5rem; }
.subpage .lead { max-width: 46ch; line-height: 1.5; font-size: var(--text-sm); opacity: .8; text-transform: none; overflow-wrap: anywhere; }
.section_label { opacity: .5; font-size: var(--text-xs); margin: 3rem 0 1rem; }

/* animated image background for subpages */
.subpage-bg { z-index: 1; position: absolute; inset: 0; overflow: hidden; width: 100%; height: 100%; }
.subpage-bg .kb-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.08); animation: kenburns 14s var(--ease-enter) infinite alternate; filter: brightness(.62) contrast(1.05); }
.subpage-bg .overlay_slightly { z-index: 2; }

/* service rows */
.svc_row { display: grid; grid-template-columns: 4em 1fr 1.4fr auto; gap: 1rem; align-items: baseline; padding: 1.1em 0; border-top: 1px solid var(--on-dark-ring); transition: background .3s, color .3s; }
.svc_row:last-child { border-bottom: 1px solid var(--on-dark-ring); }
.svc_row .num { opacity: .5; }
.svc_row .svc_name { font-size: var(--text-md); }
.svc_row .svc_desc { opacity: .7; line-height: 1.4; text-transform: none; }
.svc_row .svc_link { text-decoration: underline; }
.svc_row:hover { background: var(--brand); color: var(--black); }
.svc_row:hover .num, .svc_row:hover .svc_desc { opacity: .8; }

/* industries */
.ind_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--on-dark-ring); border: 1px solid var(--on-dark-ring); }
.ind_cell { background: var(--veil); padding: 1em; transition: background .3s, color .3s; }
.ind_cell:hover { background: var(--brand); color: var(--black); }

/* agent cards */
.agent_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--on-dark-ring); border: 1px solid var(--on-dark-ring); }
.agent_card { background: var(--veil); padding: 1.1em; display: flex; flex-direction: column; gap: .6em; transition: background .3s, color .3s; }
.agent_card:hover { background: var(--brand); color: var(--black); }
.agent_card .a_layer { opacity: .5; font-size: var(--text-xs); }
.agent_card .a_title { font-size: var(--text-md); }
.agent_card .a_io { font-size: var(--text-xs); opacity: .75; text-transform: none; line-height: 1.4; }
.layer_head { display: flex; justify-content: space-between; align-items: baseline; padding: .5em 0; font-size: var(--text-xs); opacity: .7; border-top: 1px solid var(--on-dark-ring); margin-top: 2.5rem; }

/* blog cards */
.blog_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--on-dark-ring); border: 1px solid var(--on-dark-ring); }
.blog_card { background: var(--veil); padding: 1.1em; display: flex; flex-direction: column; gap: .6em; transition: background .3s, color .3s; }
.blog_card:hover { background: var(--brand); color: var(--black); }
.blog_card .b_date { opacity: .5; font-size: var(--text-xs); }
.blog_card .b_title { font-size: var(--text-sm); }
.blog_card .b_read { text-decoration: underline; font-size: var(--text-xs); }
.pagination { display: flex; justify-content: center; gap: .6em; margin-top: 2.5rem; }
.page_pill { padding: .4em .7em; border: 1px solid var(--on-dark-ring); border-radius: var(--radius-pill); cursor: pointer; }
.page_pill.is-on { background: var(--brand); color: var(--black); border-color: var(--brand); }

/* about */
.about_block { max-width: 100%; }
.about_block p { text-transform: none; line-height: 1.6; font-size: var(--text-sm); opacity: .85; word-break: break-word; overflow-wrap: anywhere; min-width: 0; }
.about_block, .about_block * { min-width: 0; }
.about_meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--on-dark-ring); border: 1px solid var(--on-dark-ring); margin-top: 3rem; }
.about_meta .cell { background: var(--veil); padding: 1.1em; }
.about_meta .cell .k { opacity: .5; font-size: var(--text-xs); margin-bottom: .6em; }

/* ============================================================
   WORK — selected work list
   Left: scrolling list (year | name). Right: sticky "Show"
   panel that crossfades to the active project. Arrow links them.
   ============================================================ */
main.work { position: relative; z-index: 20; }
main.work .work_inner { position: relative; z-index: 5; display: block; padding: 0 var(--inset); }
.work_split { display: flex; gap: 2vw; align-items: flex-start; }
@media (min-width: 992px) {
  .list_work { margin-top: 8em; }
}

/* left column */
.list_work { width: 40%; min-width: 20rem; margin-top: 12em; margin-left: calc(35% + var(--inset)); }
.list_work .wf_head { margin-bottom: 1rem; }
.projects { display: flex; flex-flow: column; }
.work_line {
  display: flex; width: 100%; color: var(--white); padding: .34em 0; font-size: var(--text-sm);
  transition: all .45s; align-items: baseline;
}
.work_line:hover { opacity: 1; }
.work_line.is-active { background-color: var(--white); color: var(--black); border-radius: var(--radius-panel); padding: .34em .4em; }
.name_ind { display: flex; width: 47%; }
.name_p_pr { width: 75%; margin-left: auto; }
.ind_insd { width: 49.5%; margin-left: auto; }
.name_ind, .ind_insd { font-size: var(--text-sm); }

/* right sticky Show panel */
.show_panel {
  position: sticky; top: 12em; margin-left: auto; width: 54%; height: 62vh; min-height: 26rem;
  background: #0a0a0a; border-radius: var(--radius-panel); overflow: hidden;
  border: 1px solid var(--on-dark-ring); box-shadow: 0 30px 90px rgba(0,0,0,.6);
}
.show_stack { position: absolute; inset: 0; }
.show_layer {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1s var(--ease-enter);
}
.show_layer.is-active { opacity: 1; }
.show_layer.is-kb { animation: kenburns 14s var(--ease-enter) infinite alternate; }
.show_caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; flex-direction: column; gap: .4em; padding: 5.5rem 1.4rem 1.2rem;
  background: linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.35) 45%, transparent 100%);
}
.show_caption .cap_num { font-size: var(--text-xs); opacity: .6; }
.show_caption .cap_title { font-size: var(--text-md); }
.show_caption .cap_desc { font-size: var(--text-sm); line-height: 1.4; opacity: .8; text-transform: none; max-width: 42ch; }
.show_caption .cap_tag { display: block; margin-top: .15em; font-size: var(--text-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-ring, #c9ff42); opacity: .92; }
.show_caption .cap_link { display: inline-flex; align-items: center; gap: .5em; margin-top: .9em; padding: .55em 1.1em; width: max-content; border: 1px solid rgba(255,255,255,.45); border-radius: 2px; font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; color: inherit; transition: background .3s ease, border-color .3s ease; }
.show_caption .cap_link:hover { border-color: var(--on-dark-ring, #c9ff42); background: rgba(255,255,255,.08); }

/* mobile stacked cards (hidden on desktop; shown < 768) */
.work_cards { display: none; }

/* arrow linking active row -> show panel */
.work_arrow {
  position: fixed; z-index: 40; width: .75em; height: 1.55em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 44'%3E%3Cpath d='M2 2 L16 22 L2 42' fill='none' stroke='%23f1f1f1' stroke-width='2'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  transition: top .45s var(--ease-enter), left .45s var(--ease-enter); pointer-events: none;
}
/* ============================================================
   CONTACT — booking form
   white .form_box (55%, right) over video + inverted-filter bg
   ============================================================ */
.contact_shell { position: relative; z-index: 20; overflow: hidden; }
.contact_flex { display: flex; justify-content: flex-end; }
.form_box {
  background-color: var(--white); color: var(--black); border-radius: var(--radius-panel);
  width: 58%; max-width: 52rem; padding: 1.8rem 1.8rem 1.8rem; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.heading_form { font-size: var(--text-md); letter-spacing: .01em; }
.form_main { width: 100%; }
.fields_list { grid-row-gap: 3.2em; flex-flow: column; margin-top: 3.4em; display: flex; }
.field_box { display: flex; }
.field_box .label {
  width: 50%; color: var(--black); border-top: 1px solid #01010159;
  margin-bottom: 0; padding-top: .55rem; font-weight: 400; font-size: var(--text-base);
}
.astr { color: #ff0c0c; margin-left: .3em; font-family: var(--font-mono); font-weight: 400; }
.field_box_r { width: 50%; margin-left: auto; }

/* phone row: country code dropdown + number input (matches input_field) */
.phone_row { display: flex; gap: .6rem; }
.phone_row .cc_select { flex: 0 0 46%; padding-right: 1.8em; }
.phone_row .phone_input { flex: 1 1 auto; min-width: 0; }

/* inputs (black-on-white, square) */
.input_field {
  background: transparent; border: 1px solid #01010159; color: var(--black);
  border-radius: var(--radius-panel); width: 100%; padding: 1.15em 1.2em;
  font: 400 var(--text-base) var(--font-mono); text-transform: uppercase; letter-spacing: 0;
}
.input_field::placeholder { color: #0101018c; text-transform: uppercase; }
.input_field:focus { outline: none; border-color: #010101d9; }
.input_field:hover { border-color: #010101a6; }
.area_field { width: 100%; min-height: 8.5em; resize: vertical; }
select.input_field {
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1 L7 8 L13 1' fill='none' stroke='%23010101' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1em center;
}
select.input_field option { background: var(--white); color: var(--black); }

/* submit row: caption left (41%), black submit right (50%) */
.submit_field { justify-content: flex-start; align-items: flex-start; display: flex; gap: 1rem; }
.caption_additional { grid-row-gap: .6em; flex-flow: column; width: 41%; font-size: var(--text-sm); line-height: 1.3; color: var(--black); display: flex; }
.checkbox_form { justify-content: flex-start; align-items: center; margin-bottom: 0; display: flex; gap: .5em; cursor: pointer; }
.checkbox_form input { accent-color: var(--black); width: 1em; height: 1em; }
.link_pp { text-decoration: underline; }
.recap_note { opacity: .55; }
.submit_button {
  background-color: var(--black); color: var(--white); text-transform: uppercase;
  border-radius: var(--radius-panel); width: 50%; min-height: 4.2em; margin-top: 0; margin-left: auto;
  transition: all .4s; cursor: pointer; border: 0; font: 400 var(--text-base) var(--font-mono); letter-spacing: .02em;
}
.submit_button:hover { opacity: .85; }
.submit_button[disabled] { opacity: .55; cursor: wait; }

/* messages */
.success_message, .error_message { grid-row-gap: .4em; flex-flow: column; margin-top: 2em; display: none; }
.success_message.is-show, .error_message.is-show { display: flex; }
.success_text { margin-bottom: .4em; line-height: 1.25; }
.success_text.heading { font-size: 1.2rem; }
.error_message { color: #e21313; font-size: var(--text-xs); }

/* contact background (video + inverted filter overlay) */
.background_contact { width: 100%; height: 100%; position: absolute; inset: 0; z-index: 0; }
.background_contact .visual_bg { width: 100%; height: 100%; overflow: hidden; }
.background_contact video { object-fit: cover; width: 100%; height: 100%; position: absolute; inset: 0; display: block; }
.background_contact .filter_overlay_journal {
  z-index: 4; position: absolute; inset: 0;
  -webkit-backdrop-filter: contrast(200%) brightness(200%) invert() blur(6px);
  backdrop-filter: contrast(200%) brightness(200%) invert() blur(6px);
  background-color: #000000a1;
}

/* ============================================================
   RESPONSIVE  (992 / 768 / 480)
   ============================================================ */
@media (max-width: 991px) {
  .fixed_menu { width: 50%; max-width: none; }
  .flex_features { width: 78%; }
  .cms_line .name { flex-basis: 52%; }
  .arrow_specific { display: none; }
  .top_tagline { left: 55%; }
  .exp_main { grid-template-columns: 1fr 1fr; }
  .agent_grid, .blog_grid, .ind_grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .fixed_menu { width: auto; left: .4rem; right: .4rem; top: .4rem; min-height: 0; padding: .4rem .4rem; display: grid; grid-template-columns: 1fr 1fr; gap: .7rem .8rem; z-index: 999999; }
  /* on mobile, EXPAND must NOT grow the header card — keep it short so the panel shows below */
  .fixed_menu.is-menu-panel-expanded { bottom: auto; }
  .top_side { grid-column: 1 / -1; gap: .7rem; }
  .top_side { gap: .7rem; }
  .menu_links { display: none; }
  .top_side .flex_row { justify-content: space-between; align-items: center; }
  /* mobile: single EXPAND button top-right */
  .expand_btn { display: inline-flex !important; }
  /* header row 2: contact count (left) | commissions email (right) — one row */
  .in_progress {
    display: flex !important; align-items: center; justify-content: flex-start;
    border-top: 1px solid var(--ring); padding-top: .55rem;
  }
  .in_progress .label { border: 0; padding: 0; display: flex; align-items: center; gap: .4em; }
  .in_progress .list { display: none; }
  .commissions { display: flex !important; align-items: center; justify-content: flex-end; gap: .5em; text-align: right; margin-top: 0; padding-top: .55rem; border-top: 1px solid var(--ring); }
  .commissions .label { border: 0; padding: 0; }
  /* hero list: show all 3 columns (name | industry | year) like reference */
  .features_hero { margin-bottom: 2.5em; padding-left: 0; }
  .flex_features { width: 100%; padding-left: 0; }
  .custom_scroll { display: none; }
  .cms_line { flex-shrink: 0; }
  .cms_line .name { flex: 0 0 48%; font-size: .78rem; line-height: 1.35; }
  .cms_line .industry { flex: 0 0 40%; font-size: .78rem; line-height: 1.35; }
  .cms_line .year { display: block; flex: 0 0 12%; font-size: .78rem; line-height: 1.35; }
  .list_projects { grid-row-gap: .55em; }
  .cms_line.is-active .name { padding: .5em .65em .55em .5em; }
  .flex_features { padding-bottom: 0.5rem; }
  .tag { padding-right: .4rem; }
  .tag_recent { margin-left: auto; font-size: .92em; }
  .top_tagline { left: 1.2rem; transform: none; }
  .top_cap { font-size: .6rem; }
  /* bottom: socials inline like reference */
  .bottom_socials { position: static; transform: none; display: flex !important; }
  .bottom_fixed { flex-wrap: wrap; row-gap: .6rem; justify-content: space-between; }
  .bottom_right { display: none; }
  .clickhold { display: none; }

  .subpage .subpage-inner { padding: calc(var(--inset) + 7.5rem) var(--inset) 12rem var(--inset); }
  .contact_shell { padding: 0; }
  .form_box { width: 100%; }
  .field_box { flex-flow: column; }
  /* mobile: hide desktop split, show stacked cards instead */
  .list_work, .show_panel, .work_arrow { display: none; }
  .work_cards { display: flex; flex-direction: column; padding: 11.5em var(--inset) 7em; }
  .work_card { display: block; margin-bottom: 2.5em; cursor: pointer; }
  .card_media {
    width: 100%; aspect-ratio: 16/9; background-size: cover; background-position: center;
    border-radius: var(--radius-panel); overflow: hidden; background-color: #111;
  }
  .card_row { display: flex; justify-content: space-between; align-items: baseline; padding-top: .8em; gap: 1rem; }
  .cr_name { display: flex; align-items: baseline; gap: .9em; }
  .card_year { font-size: var(--text-xs); opacity: .6; }
  .card_line { font-size: .95rem; }
  .cr_ind { font-size: .85rem; opacity: .85; text-align: right; }
  .work_card:hover .card_line { text-decoration: underline; }
  .field_box .label { width: 100%; }
  .field_box_r { width: 100%; margin-top: 1em; }
  .phone_row { flex-flow: row wrap; }
  .phone_row .cc_select { flex: 1 1 100%; margin-bottom: .6rem; }
  .phone_row .phone_input { flex: 1 1 100%; }
  .fields_list { grid-row-gap: 3em; margin-top: 4.25em; }
  .submit_field { flex-flow: column; }
  .caption_additional { width: 100%; }
  .submit_button { width: 100%; margin-top: 1.5em; margin-left: 0; }
  .svc_row { grid-template-columns: 3em 1fr; grid-template-rows: auto auto auto; }
  .svc_row .num { grid-row: 1; grid-column: 1; }
  .svc_row .svc_name { grid-row: 1; grid-column: 2; }
  .svc_row .svc_desc { grid-row: 2; grid-column: 2; }
  .svc_row .svc_link { grid-row: 3; grid-column: 2; }
  .agent_grid, .blog_grid { grid-template-columns: 1fr; }
  .ind_grid { grid-template-columns: 1fr 1fr; }
  .exp_main { display: none; }
  .panel_nav { display: flex; }
  /* expand panel slides in below the fixed header (header stays visible) */
  .menu_expanded { top: calc(var(--inset) + 7rem); right: 0; bottom: 0; left: 0; width: auto; height: auto; border-radius: var(--radius-panel) var(--radius-panel) 0 0; padding-top: .8rem; background: var(--white); color: var(--black); border: 0; }
  .menu_expanded .exp_top { border-bottom: 1px solid var(--ring); color: var(--black); }
  .menu_expanded .exp_top .expand_btn { border-color: var(--ring-strong); color: var(--black); }
  .menu_expanded .exp_bottom { border-top: 1px solid var(--ring); color: var(--black); background: var(--white); }
  .about_meta { grid-template-columns: 1fr; }
}
@media (max-width: 479px) {
  .wrapper_hero { padding-left: .4rem; padding-right: .4rem; }
  .bottom_fixed { font-size: .6rem; }
  .cms_line .name { font-size: .75rem; }
  .field_row, .field_row3 { grid-template-columns: 1fr; }
}

/* prevent horizontal overflow from the sync columns */
body { overflow-x: hidden; overflow-x: clip; }
.cms_line { max-width: 100%; }
.cms_line > * { min-width: 0; }
.svc_list, .agent_grid, .blog_grid, .ind_grid, .about_meta { max-width: 100%; overflow: hidden; }
.svc_row > *, .agent_card > *, .blog_card > *, .ind_cell, .cell { min-width: 0; }
.lead, .svc_desc, .a_io { overflow-wrap: anywhere; word-break: break-word; }