/* =========================================================================
   NOSHA MANAGEMENT INCORPORATED — SITE STYLESHEET
   Design direction: "Project Controls" — blueprint navy + drafting paper +
   oxidised brass. The S-curve (plan vs. actual) is the recurring signature,
   and project data is framed like an engineering drawing title block.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;700;800&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* ---- palette -------------------------------------------------------- */
  --navy:        #0E1B26;
  --navy-2:      #16293A;
  --navy-3:      #1D3348;
  --paper:       #F0EEE3;
  --paper-2:     #E8E4D4;
  --paper-line:  #D3CCB3;
  --steel:       #55636D;
  --steel-dark:  #35424C;
  --brass:       #B8873A;
  --brass-light: #D3A65C;
  --brass-deep:  #8C6526;
  --warm-white:  #EDEAE0;
  --ok:          #4B7A5B;

  /* ---- type ------------------------------------------------------------ */
  --f-display: 'Big Shoulders Display', sans-serif;
  --f-body:    'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* ---- layout ----------------------------------------------------------*/
  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 3px;
  --dur: 0.5s;
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---- reset ------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--steel-dark);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--f-display); font-weight:700; letter-spacing:.01em; color:var(--navy); }
p{ margin:0; }
button{ font-family:inherit; }

:focus-visible{ outline:3px solid var(--brass); outline-offset:3px; }

.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--brass); color:var(--navy); padding:12px 18px;
  font-family:var(--f-mono); font-size:.85rem; z-index:999;
}
.skip-link:focus{ left:12px; top:12px; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

/* blueprint grid background, used on dark sections */
.grid-bg{
  background-image:
    linear-gradient(rgba(216,225,230,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216,225,230,.06) 1px, transparent 1px);
  background-size:42px 42px;
}
.grid-bg-paper{
  background-image:
    linear-gradient(var(--paper-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-line) 1px, transparent 1px);
  background-size:42px 42px;
  background-color:var(--paper);
}

/* corner tick marks, evokes a drawing sheet frame */
.ticked{ position:relative; }
.ticked::before,.ticked::after{
  content:""; position:absolute; width:18px; height:18px; pointer-events:none;
  border-color:var(--brass);
}
.ticked::before{ top:0; left:0; border-top:2px solid var(--brass); border-left:2px solid var(--brass); }
.ticked::after{ bottom:0; right:0; border-bottom:2px solid var(--brass); border-right:2px solid var(--brass); }

/* =============================== BUTTONS =============================== */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:.85rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:14px 26px; border-radius:var(--radius); border:1.5px solid transparent; cursor:pointer;
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn-primary{ background:var(--brass); color:var(--navy); }
.btn-primary:hover{ background:var(--brass-light); transform:translateY(-2px); }
.btn-ghost-dark{ border-color:rgba(237,234,224,.4); color:var(--warm-white); }
.btn-ghost-dark:hover{ border-color:var(--brass); color:var(--brass-light); transform:translateY(-2px); }
.btn-ghost-light{ border-color:var(--steel); color:var(--navy); }
.btn-ghost-light:hover{ border-color:var(--brass-deep); color:var(--brass-deep); transform:translateY(-2px); }
.btn-arrow{ transition:transform var(--dur) var(--ease); }
.btn:hover .btn-arrow{ transform:translateX(4px); }

/* ================================ HEADER ================================ */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(14,27,38,.94); backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(216,225,230,.12);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; height:84px; }

.wordmark{ display:flex; flex-direction:column; line-height:1; gap:4px; }
.wordmark .mark-main{ font-family:var(--f-display); font-weight:800; font-size:1.55rem; letter-spacing:.02em; color:var(--warm-white); display:flex; align-items:center; gap:10px; }
.wordmark .mark-main svg{ flex:none; }
.wordmark .mark-icon{ flex:none; height:40px; width:auto; }
.wordmark .mark-sub{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.28em; text-transform:uppercase; color:var(--brass-light); padding-left:50px; }

/* real logo lockups */
.footer-mark{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.footer-mark img{ height:46px; width:auto; }
.footer-mark .fm-text{ display:flex; flex-direction:column; line-height:1.15; }
.footer-mark .fm-text b{ font-family:var(--f-display); font-size:1.15rem; letter-spacing:.02em; color:var(--warm-white); text-transform:uppercase; }
.footer-mark .fm-text span{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brass-light); }
.footer-tagline{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--brass-light); margin:0 0 18px; padding-left:58px; }

.brand-plaque{ background:#FBFAF6; padding:20px 26px; border-radius:10px; box-shadow:0 24px 50px rgba(0,0,0,.4); flex:none; }
.brand-plaque img{ width:168px; }
@media (max-width:880px){ .brand-plaque{ padding:14px 18px; } .brand-plaque img{ width:118px; } }

.page-hero-split{ display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.page-hero-split .phs-text{ max-width:640px; }

.image-card{ background:#FBFAF6; padding:22px; border-radius:10px; box-shadow:0 24px 50px rgba(0,0,0,.35); }
.image-card img{ width:100%; display:block; }

.nav-list{ display:flex; align-items:center; gap:2px; }
.nav-list a{
  position:relative; display:block; padding:10px 16px;
  font-family:var(--f-mono); font-size:.8rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--warm-white); opacity:.78;
  transition:opacity var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-list a::after{
  content:""; position:absolute; left:16px; right:16px; bottom:4px; height:2px; background:var(--brass);
  transform:scaleX(0); transform-origin:left; transition:transform var(--dur) var(--ease);
}
.nav-list a:hover{ opacity:1; }
.nav-list a:hover::after{ transform:scaleX(1); }
.nav-list a[aria-current="page"]{ opacity:1; color:var(--brass-light); }
.nav-list a[aria-current="page"]::after{ transform:scaleX(1); }

.nav-cta{ margin-left:14px; }

.nav-toggle{
  display:none; background:none; border:1.5px solid rgba(237,234,224,.35); border-radius:var(--radius);
  width:44px; height:40px; position:relative; cursor:pointer;
}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:""; position:absolute; left:11px; right:11px; height:2px; background:var(--warm-white); transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle span{ top:19px; }
.nav-toggle span::before{ top:-7px; }
.nav-toggle span::after{ top:7px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ transform:translateY(-7px) rotate(-45deg); }

@media (max-width: 880px){
  .nav-toggle{ display:block; }
  .nav-list{
    position:fixed; inset:84px 0 0 0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--navy); padding:10px var(--gutter) 30px;
    transform:translateY(-8px); opacity:0; pointer-events:none; visibility:hidden;
    transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
    overflow-y:auto;
  }
  .site-header.nav-open .nav-list{ opacity:1; transform:translateY(0); pointer-events:auto; visibility:visible; }
  .nav-list a{ padding:16px 4px; border-bottom:1px solid rgba(216,225,230,.1); font-size:.95rem; }
  .nav-cta{ margin:16px 4px 0; }
  .nav-cta .btn{ width:100%; justify-content:center; }
}

/* ================================= HERO ================================= */
.hero{ position:relative; background:var(--navy); color:var(--warm-white); overflow:hidden; }
.hero-inner-single{ position:relative; z-index:2; padding:110px 0 84px; max-width:800px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--brass-light); margin-bottom:22px;
}
.eyebrow::before{ content:""; width:26px; height:1.5px; background:var(--brass-light); }
.hero h1{
  color:var(--warm-white); font-size:clamp(2.4rem, 4.6vw, 4.1rem); line-height:1.02; letter-spacing:.005em;
  text-transform:uppercase;
}
.hero h1 em{ font-style:normal; color:var(--brass-light); }
.hero .lede{ margin-top:24px; max-width:56ch; font-size:1.12rem; color:rgba(237,234,224,.82); }
.hero-ctas{ margin-top:38px; display:flex; flex-wrap:wrap; gap:14px; }

@media (max-width: 880px){
  .hero-inner-single{ padding-top:64px; }
}

/* ============================== STATS BAR ================================*/
.stats-bar{ background:var(--paper-2); border-bottom:1px solid var(--paper-line); border-top:1px solid var(--paper-line); }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.stat{ padding:34px var(--gutter); border-left:1px solid var(--paper-line); text-align:left; }
.stat:first-child{ border-left:none; padding-left:0; }
.stat .num{ font-family:var(--f-mono); font-weight:600; font-size:clamp(1.5rem,2.6vw,2.15rem); color:var(--navy); }
.stat .lbl{ margin-top:6px; font-size:.82rem; color:var(--steel); letter-spacing:.02em; }
@media (max-width: 880px){
  .stats-grid{ grid-template-columns:1fr 1fr; }
  .stat{ border-left:none; border-top:1px solid var(--paper-line); padding:24px var(--gutter); }
  .stat:nth-child(odd){ padding-left:var(--gutter); }
  .wrap .stats-grid .stat:first-child{ border-top:none; }
}

/* ================================ SECTIONS =============================== */
section{ padding:88px 0; }
.section-light{ background:var(--paper); }
.section-panel{ background:var(--paper-2); border-top:1px solid var(--paper-line); border-bottom:1px solid var(--paper-line); }
.section-dark{ background:var(--navy); color:var(--warm-white); }
.section-head{ max-width:70ch; margin-bottom:52px; }
.section-head h2{ font-size:clamp(1.8rem,3.4vw,2.7rem); text-transform:uppercase; line-height:1.06; }
.section-dark .section-head h2{ color:var(--warm-white); }
.section-head .lede{ margin-top:16px; font-size:1.05rem; color:var(--steel); max-width:62ch; }
.section-dark .section-head .lede{ color:rgba(237,234,224,.78); }
.section-head.center{ margin-inline:auto; text-align:center; }

.curve-divider{ display:block; width:100%; height:46px; opacity:.5; }
.curve-divider path{ fill:none; stroke:var(--brass-deep); stroke-width:2; }
.section-dark .curve-divider path{ stroke:var(--brass-light); }

/* =============================== PILLARS/CARDS ============================ */
.pillars{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--paper-line); border:1px solid var(--paper-line); }
.pillar{ background:var(--paper); padding:32px 26px; position:relative; }
.pillar::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--brass); transform:scaleX(0); transform-origin:left; transition:transform var(--dur) var(--ease); }
.pillar:hover::before{ transform:scaleX(1); }
.pillar .num{ font-family:var(--f-mono); color:var(--brass-deep); font-size:.78rem; letter-spacing:.08em; }
.pillar h3{ margin-top:14px; font-size:1.28rem; text-transform:uppercase; }
.pillar p{ margin-top:12px; font-size:.94rem; color:var(--steel); }
.pillar a.pillar-link{ margin-top:16px; display:inline-flex; gap:8px; align-items:center; font-family:var(--f-mono); font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; color:var(--brass-deep); }
@media (max-width: 980px){ .pillars{ grid-template-columns:1fr 1fr; } }
@media (max-width: 560px){ .pillars{ grid-template-columns:1fr; } }

/* sector chips */
.chip-row{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.04em; text-transform:uppercase;
  padding:10px 16px; border:1px solid var(--paper-line); border-radius:100px; color:var(--steel-dark); background:var(--paper);
}
.section-dark .chip{ border-color:rgba(237,234,224,.25); color:var(--warm-white); background:transparent; }

/* callout / safety strip */
.callout{
  background:var(--navy-2); border-left:3px solid var(--brass); padding:38px var(--gutter);
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
}
.callout p{ font-family:var(--f-display); font-size:clamp(1.3rem,2.4vw,1.8rem); color:var(--warm-white); line-height:1.25; max-width:60ch; text-transform:uppercase; }
.callout .tag{ font-family:var(--f-mono); font-size:.75rem; letter-spacing:.15em; text-transform:uppercase; color:var(--brass-light); white-space:nowrap; }

/* featured project preview row (home) */
.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
@media (max-width: 980px){ .feature-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 640px){ .feature-grid{ grid-template-columns:1fr; } }

/* project carousel (home page) — built on native horizontal scroll so the
   full project list is always visible/reachable even with no JavaScript;
   buttons + autoplay are enhancements layered on top. */
.carousel-track{
  display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x proximity; scroll-behavior:smooth;
  padding-bottom:16px; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:var(--brass) var(--paper-line);
}
.carousel-track::-webkit-scrollbar{ height:8px; }
.carousel-track::-webkit-scrollbar-track{ background:var(--paper-line); border-radius:4px; }
.carousel-track::-webkit-scrollbar-thumb{ background:var(--brass); border-radius:4px; }
.carousel-card{ flex:0 0 82vw; scroll-snap-align:start; }
@media (min-width:560px){ .carousel-card{ flex-basis:340px; } }
@media (min-width:1000px){ .carousel-card{ flex-basis:372px; } }

.carousel-controls{ display:flex; align-items:center; gap:14px; margin-top:8px; }
.carousel-btn{
  flex:none; width:46px; height:46px; border-radius:50%; border:1.5px solid var(--paper-line);
  background:var(--paper); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.carousel-btn:hover{ border-color:var(--brass-deep); background:var(--paper-2); }
.carousel-btn svg{ width:18px; height:18px; }
.carousel-btn svg path{ stroke:var(--steel-dark); }
.carousel-play{ position:relative; }
.carousel-play .icon-pause,.carousel-play .icon-play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.carousel-play .icon-play{ display:none; }
.carousel-play.is-paused .icon-pause{ display:none; }
.carousel-play.is-paused .icon-play{ display:flex; }
.carousel-counter{ font-family:var(--f-mono); font-size:.8rem; letter-spacing:.05em; color:var(--steel); }
.carousel-spacer{ flex:1; }

/* ============================= PHOTO PLACEHOLDER =========================== */
.photo-slot{
  position:relative; aspect-ratio:4/3; overflow:hidden; border:1px solid var(--paper-line);
  background:
    repeating-linear-gradient(135deg, rgba(184,135,58,.10) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, var(--navy-3), var(--navy));
}
.photo-slot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.photo-slot .slot-icon{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:.55; }
.photo-slot .slot-icon svg{ width:38%; height:38%; stroke:var(--brass-light); }
.photo-slot .slot-tag{
  position:absolute; left:0; bottom:0; right:0; padding:8px 12px;
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.05em; color:var(--warm-white);
  background:linear-gradient(0deg, rgba(0,0,0,.55), transparent);
}
.photo-slot.compact{ aspect-ratio:16/10; }

/* ================================ TITLE BLOCK (projects) =================== */
.project-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }
@media (max-width: 880px){ .project-grid{ grid-template-columns:1fr; } }

.title-block{ background:var(--paper); border:1px solid var(--paper-line); }
.tb-strip{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 18px; background:var(--navy); color:var(--warm-white);
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
}
.tb-strip .tb-no{ color:var(--brass-light); }
.tb-status{ padding:3px 10px; border-radius:100px; border:1px solid rgba(237,234,224,.35); }
.tb-status.is-current{ background:var(--brass); color:var(--navy); border-color:var(--brass); }
.tb-body{ padding:26px; }
.tb-body h3{ font-size:1.5rem; text-transform:uppercase; line-height:1.15; }
.tb-meta{ display:flex; flex-wrap:wrap; gap:6px 22px; margin-top:14px; font-family:var(--f-mono); font-size:.76rem; color:var(--steel); }
.tb-meta b{ color:var(--navy); font-weight:600; }
.tb-value{ margin-top:18px; padding-top:18px; border-top:1px solid var(--paper-line); display:flex; align-items:baseline; gap:10px; }
.tb-value .amount{ font-family:var(--f-mono); font-weight:600; font-size:1.7rem; color:var(--brass-deep); }
.tb-value .amount-lbl{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--steel); }
.tb-desc{ margin-top:16px; font-size:.95rem; color:var(--steel-dark); }

.current-spotlight{ display:grid; grid-template-columns:.9fr 1.1fr; gap:0; border:1px solid rgba(237,234,224,.18); }
.current-spotlight .tb-body{ padding:36px; }
.current-spotlight .tb-body h3{ color:var(--warm-white); }
.current-spotlight .tb-meta{ color:rgba(237,234,224,.72); }
.current-spotlight .tb-meta b{ color:var(--warm-white); }
.current-spotlight .tb-desc{ color:rgba(237,234,224,.85); }
@media (max-width:880px){ .current-spotlight{ grid-template-columns:1fr; } }

/* ================================ SERVICES ================================= */
.service-block{ display:grid; grid-template-columns:.85fr 1.15fr; gap:44px; padding:44px 0; border-top:1px solid var(--paper-line); }
.service-block:first-of-type{ border-top:none; }
.service-head{ display:flex; gap:18px; align-items:flex-start; }
.service-icon{ flex:none; width:52px; height:52px; border:1.5px solid var(--brass-deep); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.service-icon svg{ width:24px; height:24px; stroke:var(--brass-deep); }
.service-head h3{ font-size:1.5rem; text-transform:uppercase; line-height:1.15; }
.service-head .service-index{ font-family:var(--f-mono); font-size:.72rem; color:var(--steel); letter-spacing:.08em; margin-top:6px; display:block; }
.service-list{ display:grid; gap:11px; }
.service-list li{ position:relative; padding-left:22px; font-size:.96rem; color:var(--steel-dark); }
.service-list li::before{ content:""; position:absolute; left:0; top:.55em; width:9px; height:1.5px; background:var(--brass-deep); }
@media (max-width: 780px){ .service-block{ grid-template-columns:1fr; gap:20px; } }

/* ================================ BIO / TEAM ================================ */
.bio{ display:grid; grid-template-columns:220px 1fr; gap:44px; padding:48px 0; border-top:1px solid var(--paper-line); }
.bio:first-of-type{ border-top:none; }
.avatar{
  width:220px; height:220px; border:1px solid var(--paper-line); background:var(--navy);
  display:flex; align-items:center; justify-content:center; position:relative;
}
.avatar .initials{ font-family:var(--f-display); font-size:3.2rem; color:var(--brass-light); }
.avatar .avatar-tag{ position:absolute; bottom:0; left:0; right:0; padding:7px; text-align:center; font-family:var(--f-mono); font-size:.62rem; letter-spacing:.06em; color:var(--warm-white); background:rgba(0,0,0,.35); text-transform:uppercase; }
.bio h3{ font-size:1.7rem; text-transform:uppercase; }
.bio .role{ margin-top:6px; font-family:var(--f-mono); font-size:.82rem; color:var(--brass-deep); letter-spacing:.02em; }
.bio p{ margin-top:16px; color:var(--steel-dark); font-size:.97rem; max-width:72ch; }
.bio p + p{ margin-top:14px; }
@media (max-width: 780px){ .bio{ grid-template-columns:1fr; } .avatar{ width:140px; height:140px; } .avatar .initials{ font-size:2.1rem; } }

.cred-grid{ display:grid; grid-template-columns:1fr 1fr; gap:44px; }
@media (max-width: 780px){ .cred-grid{ grid-template-columns:1fr; } }
.cred-list li{ display:flex; gap:14px; padding:14px 0; border-top:1px solid var(--paper-line); font-size:.92rem; }
.cred-list li:first-child{ border-top:none; }
.cred-year{ flex:none; font-family:var(--f-mono); font-size:.78rem; color:var(--brass-deep); width:52px; }

.tools-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--paper-line); border:1px solid var(--paper-line); }
.tools-col{ background:var(--paper); padding:26px; }
.tools-col h4{ font-family:var(--f-mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--brass-deep); margin-bottom:14px; }
.tools-col li{ padding:7px 0; font-size:.94rem; border-top:1px dashed var(--paper-line); }
.tools-col li:first-child{ border-top:none; }
@media (max-width: 780px){ .tools-grid{ grid-template-columns:1fr; } }

/* ================================ RESPONSIBILITY LIST ============================ */
.resp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--paper-line); border:1px solid var(--paper-line); margin-top:10px; }
.resp-item{ background:var(--paper); padding:28px 24px; }
.resp-item .r-index{ font-family:var(--f-mono); color:var(--brass-deep); font-size:.75rem; letter-spacing:.06em; }
.resp-item h4{ margin-top:10px; font-size:1.05rem; text-transform:uppercase; }
.resp-item p{ margin-top:10px; font-size:.9rem; color:var(--steel); }
@media (max-width: 980px){ .resp-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 600px){ .resp-grid{ grid-template-columns:1fr; } }

/* ================================ CONTACT ================================ */
.contact-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:56px; }
@media (max-width: 900px){ .contact-grid{ grid-template-columns:1fr; } }
.info-line{ display:flex; gap:16px; padding:18px 0; border-top:1px solid rgba(237,234,224,.15); }
.info-line:first-child{ border-top:none; }
.info-line .i-label{ flex:none; width:110px; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--brass-light); }
.info-line .i-value{ color:var(--warm-white); font-size:.98rem; }
.info-line .i-value.placeholder{ color:rgba(237,234,224,.5); font-style:italic; }

.form-field{ margin-bottom:20px; }
.form-field label{ display:block; font-family:var(--f-mono); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--steel); margin-bottom:8px; }
.form-field input, .form-field textarea, .form-field select{
  width:100%; padding:13px 14px; border:1px solid var(--paper-line); background:var(--paper); color:var(--navy);
  font-family:var(--f-body); font-size:.98rem; border-radius:var(--radius);
  transition:border-color var(--dur) var(--ease);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{ border-color:var(--brass-deep); }
.form-field input[type="file"]{ padding:11px 14px; background:var(--paper-2); cursor:pointer; }
.form-field input[type="file"]::file-selector-button{
  font-family:var(--f-mono); font-size:.75rem; letter-spacing:.05em; text-transform:uppercase;
  padding:8px 14px; margin-right:14px; border:1.5px solid var(--steel); border-radius:var(--radius);
  background:var(--paper); color:var(--navy); cursor:pointer; transition:border-color var(--dur) var(--ease);
}
.form-field input[type="file"]::file-selector-button:hover{ border-color:var(--brass-deep); }
.form-hint{ margin-top:6px; font-size:.8rem; color:var(--steel); }
.apply-note{ border:1px solid var(--paper-line); background:var(--paper-2); padding:18px 22px; border-radius:var(--radius); font-size:.9rem; color:var(--steel-dark); margin-top:22px; }
.apply-note a{ color:var(--brass-deep); text-decoration:underline; text-underline-offset:3px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }
.form-note{ margin-top:6px; font-size:.8rem; color:var(--steel); }
.hidden-field{ position:absolute; left:-9999px; }

/* ================================ CTA BANNER ================================ */
.cta-banner{ background:var(--brass); }
.cta-banner .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding-block:56px; }
.cta-banner h2{ color:var(--navy); font-size:clamp(1.6rem,3vw,2.3rem); text-transform:uppercase; max-width:22ch; }
.cta-banner .btn-primary{ background:var(--navy); color:var(--warm-white); }
.cta-banner .btn-primary:hover{ background:var(--navy-3); }

/* ================================ FOOTER ================================ */
.site-footer{ background:var(--navy); color:rgba(237,234,224,.75); padding-top:64px; }
.footer-grid{ display:grid; grid-template-columns:1.3fr .8fr .8fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid rgba(237,234,224,.12); }
.footer-grid h5{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--brass-light); margin-bottom:16px; }
.footer-grid p{ font-size:.9rem; max-width:34ch; }
.footer-grid li{ padding:6px 0; }
.footer-grid a:hover{ color:var(--brass-light); }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:22px 0 30px; font-family:var(--f-mono); font-size:.74rem; color:rgba(237,234,224,.5); }
@media (max-width: 880px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns:1fr; } }

/* ================================ INNER PAGE HERO (non-home) ================ */
.page-hero{ background:var(--navy); color:var(--warm-white); padding:70px 0 54px; position:relative; overflow:hidden; }
.page-hero h1{ color:var(--warm-white); font-size:clamp(2.1rem,4.2vw,3.4rem); text-transform:uppercase; }
.page-hero .lede{ margin-top:18px; max-width:62ch; color:rgba(237,234,224,.8); font-size:1.05rem; }
.crumb{ font-family:var(--f-mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--brass-light); margin-bottom:18px; display:block; }

/* Content is always visible by default — no scroll-triggered hide/reveal,
   so the page never depends on IntersectionObserver firing correctly. */
.reveal{ opacity:1; }

/* ================================ MISC TEXT BLOCKS ================================ */
.prose{ max-width:74ch; font-size:1.02rem; color:var(--steel-dark); }
.prose + .prose{ margin-top:18px; }
.prose-list{ margin-top:18px; display:grid; gap:10px; max-width:74ch; }
.prose-list li{ position:relative; padding-left:24px; color:var(--steel-dark); }
.prose-list li::before{ content:""; position:absolute; left:0; top:.6em; width:10px; height:1.5px; background:var(--brass-deep); }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:56px; }
@media (max-width: 880px){ .two-col{ grid-template-columns:1fr; gap:32px; } }