/* =========================================================
   SouthStruct Building — stylesheet
   Cinematic architectural design system.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap');

:root{
  /* ---- color ---- */
  --bg:            #111316;
  --bg-raised:     #181b1f;
  --bg-card:       #1d2126;
  --bg-inverse:    #f4f2ee;
  --line:          rgba(255,255,255,0.14);
  --line-soft:     rgba(255,255,255,0.07);
  --line-strong:   rgba(255,255,255,0.28);
  --text:          #ffffff;
  --text-secondary:#d1d3d6;
  --text-muted:    #92979d;
  --accent:        #4f94d4;
  --accent-dim:    #6d8faf;
  --accent-wash:   rgba(79,148,212,0.12);
  --on-accent:     #0c1116;

  /* ---- type scale ---- */
  --font: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --fs-hero: clamp(3.2rem, 8vw, 7.5rem);
  --fs-h1: clamp(2.4rem, 5vw, 4.2rem);
  --fs-h2: clamp(1.9rem, 3.4vw, 2.8rem);
  --fs-h3: clamp(1.3rem, 2vw, 1.6rem);
  --fs-body: 1rem;
  --fs-small: 0.85rem;

  /* ---- layout ---- */
  --edge: clamp(1.25rem, 5vw, 4.5rem);
  --maxw: 1440px;
  --header-h: 92px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-fast: .22s;
  --dur: .5s;
  --dur-slow: .9s;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@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;
  }
}

body{
  margin:0;
  background: var(--bg);
  color: var(--text-secondary);
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }

::selection{ background: var(--accent); color: var(--on-accent); }

/* Visible focus states everywhere */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link{
  position:absolute; left:1rem; top:-60px;
  background:var(--accent); color:var(--on-accent);
  padding:.7rem 1.2rem; z-index:999; font-weight:600;
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus{ top:1rem; }

.wrap{ max-width: var(--maxw); margin:0 auto; padding-left: var(--edge); padding-right: var(--edge); }

.eyebrow{
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-dim);
  font-weight: 600;
}

h1, .h1{ font-size: var(--fs-h1); font-weight: 700; line-height: 1.04; letter-spacing: -0.01em; color: var(--text); }
h2, .h2{ font-size: var(--fs-h2); font-weight: 600; line-height: 1.1; letter-spacing: -0.005em; color: var(--text); }
h3, .h3{ font-size: var(--fs-h3); font-weight: 600; color: var(--text); }
p.lead{ font-size: 1.15rem; color: var(--text-secondary); max-width: 46ch; }

.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding: .95rem 1.9rem;
  font-size: .82rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
  border:1px solid var(--line-strong);
  background:transparent; color:var(--text);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.btn:hover{ background:var(--text); color:var(--bg); border-color:var(--text); transform: translateY(-2px); }
.btn--accent{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.btn--accent:hover{ background:#71acdf; border-color:#71acdf; color:var(--on-accent); }
.btn--ghost-light{ border-color: rgba(17,19,22,.35); color:#111316; }
.btn--ghost-light:hover{ background:#111316; color:#fff; border-color:#111316; }

/* magnetic button wrapper (restrained) */
.magnetic{ display:inline-block; transition: transform .28s var(--ease); will-change: transform; }

/* ============ HEADER ============ */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 200;
  height: var(--header-h);
  display:flex; align-items:center;
  transition: background var(--dur) var(--ease), height var(--dur) var(--ease), border-color var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header .wrap{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.2rem; flex-wrap:nowrap; padding-left: clamp(1.25rem, 3vw, 2.5rem); padding-right: clamp(1.25rem, 3vw, 2.5rem); }
.brand{ flex-shrink:0; }
.header-cta{ flex-shrink:0; }

.site-header.is-scrolled{
  height: 74px;
  background: rgba(17,19,22,.82);
  backdrop-filter: blur(14px) saturate(140%);
  border-color: var(--line-soft);
}

.brand{ display:flex; align-items:center; gap:.7rem; }
.brand img{ height: 34px; width:auto; }
.brand-mark{
  background:#fff; padding:.4rem .8rem; display:inline-flex; align-items:center;
  line-height:0;
}
.brand-mark img{ height: 22px; }

.main-nav{ display:flex; align-items:center; gap:1.4rem; position:relative; flex-shrink:0; }
.main-nav ul{ display:flex; flex-wrap:nowrap; gap:1.1rem; position:relative; }
.main-nav a{
  font-size:.72rem; letter-spacing:.07em; text-transform:uppercase; font-weight:600;
  color: var(--text-secondary);
  padding: .4rem 0; position:relative;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
.main-nav a:hover, .main-nav a[aria-current="page"]{ color:var(--text); }
.nav-underline{
  position:absolute; bottom:-2px; height:2px; background:var(--accent);
  left:0; width:0; transition: left var(--dur-fast) var(--ease), width var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
  opacity:0;
}
.main-nav ul:hover .nav-underline{ opacity:1; }

.header-cta{ display:flex; align-items:center; gap:.8rem; }
.header-cta .btn{ padding:.7rem 1.15rem; }
.btn-icon{
  width:44px; height:44px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-strong); color:var(--text); background:transparent;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn-icon svg{ width:18px; height:18px; }
.btn-icon:hover{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); transform: translateY(-2px); }
@media (max-width: 1400px){ .btn-icon{ display:none; } }
.menu-toggle{
  display:none; background:none; border:1px solid var(--line-strong); color:var(--text);
  width:46px; height:46px; align-items:center; justify-content:center;
  flex-direction:column; gap:5px;
}
.menu-toggle span{ display:block; width:20px; height:1.5px; background:currentColor; transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
.menu-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu{
  position:fixed; top:0; right:0; bottom:0; left:0; z-index:190;
  background: var(--bg);
  display:flex; flex-direction:column; justify-content:center;
  padding: 6rem var(--edge) 3rem;
  transform: translateY(-100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform var(--dur-slow) var(--ease), visibility 0s linear var(--dur-slow);
}
.mobile-menu.is-open{
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform var(--dur-slow) var(--ease), visibility 0s linear 0s;
}
.mobile-menu ul{ display:flex; flex-direction:column; gap:1.1rem; }
.mobile-menu a{ font-size: clamp(1.8rem,7vw,2.6rem); font-weight:600; color:var(--text); letter-spacing:-.01em; }
.mobile-menu .mm-meta{ margin-top:3rem; color:var(--text-muted); font-size:.9rem; display:flex; flex-direction:column; gap:.5rem; }
.mobile-menu .mm-meta a{ color: var(--accent-dim); font-size: inherit; font-weight:400; }

@media (max-width: 1400px){
  .main-nav{ display:none; }
  .header-cta .btn--outline{ display:none; }
  .menu-toggle{ display:flex; }
}

/* ============ HERO ============ */
.hero{
  position:relative; min-height: 100svh; display:flex; align-items:flex-end;
  overflow:hidden; color:#fff;
}
.hero-media{ position:absolute; top:0; right:0; bottom:0; left:0; z-index:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; transform: scale(1.08); }
.hero-media::after{
  content:""; position:absolute; top:0; right:0; bottom:0; left:0;
  background: linear-gradient(180deg, rgba(10,12,14,.55) 0%, rgba(10,12,14,.35) 38%, rgba(10,12,14,.85) 100%);
}
.hero-media::before{
  content:""; position:absolute; top:0; right:0; bottom:0; left:0; z-index:1;
  background: linear-gradient(90deg, rgba(10,12,14,.7) 0%, rgba(10,12,14,.15) 55%);
}
.hero-frame{
  position:absolute; z-index:2; border:1px solid rgba(255,255,255,.28);
  right: 6%; top: 20%; width: 30%; height: 55%;
  opacity:0;
}
.hero-inner{ position:relative; z-index:3; width:100%; padding: 0 0 5.5rem; }
.hero-inner .wrap{ display:flex; flex-direction:column; gap: 1.6rem; max-width: 760px; }
.hero-eyebrow{ opacity:0; transform: translateY(14px); }
.hero-line{ font-size: var(--fs-hero); font-weight:700; line-height:.98; letter-spacing:-.02em; }
.hero-line span{ display:block; opacity:0; transform: translateY(28px); }
.hero-line .is-light{ font-weight:300; color: var(--text-secondary); }
.hero-accent{ height:2px; width:0; background:var(--accent); }
.hero-copy{ opacity:0; transform: translateY(14px); max-width: 42ch; color: var(--text-secondary); font-size:1.05rem; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:1rem; opacity:0; transform: translateY(14px); }

.hero-scroll{
  position:absolute; bottom: 1.8rem; left:50%; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  color: rgba(255,255,255,.7); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
}
.hero-scroll .chev{ animation: chevbounce 2.2s ease-in-out infinite; }
@keyframes chevbounce{ 0%,100%{ transform:translateY(0); opacity:.6;} 50%{ transform:translateY(6px); opacity:1;} }
@media (prefers-reduced-motion: reduce){ .hero-scroll .chev{ animation:none; } }

/* hero load sequence, applied via .is-ready on <body> */
body.is-ready .hero-media img{ transform: scale(1); transition: transform 3.4s var(--ease); }
body.is-ready .hero-eyebrow{ transition: opacity .8s var(--ease) .15s, transform .8s var(--ease) .15s; opacity:1; transform:none; }
body.is-ready .hero-line span{ transition: opacity .9s var(--ease), transform .9s var(--ease); opacity:1; transform:none; }
body.is-ready .hero-line span:nth-child(1){ transition-delay: .32s; }
body.is-ready .hero-line span:nth-child(2){ transition-delay: .48s; }
body.is-ready .hero-accent{ transition: width 1s var(--ease) .75s; width: 120px; }
body.is-ready .hero-copy{ transition: opacity .8s var(--ease) .9s, transform .8s var(--ease) .9s; opacity:1; transform:none; }
body.is-ready .hero-ctas{ transition: opacity .8s var(--ease) 1.05s, transform .8s var(--ease) 1.05s; opacity:1; transform:none; }
body.is-ready .hero-frame{ transition: opacity 1s var(--ease) 1.2s; opacity:1; }

/* ============ SCROLL REVEAL ============ */
.reveal{ opacity:0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-stagger > *{ opacity:0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-stagger.is-visible > *{ opacity:1; transform:none; }
.reveal-stagger.is-visible > *:nth-child(1){ transition-delay:.04s; }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay:.11s; }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay:.18s; }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay:.25s; }
.reveal-stagger.is-visible > *:nth-child(5){ transition-delay:.32s; }
.reveal-stagger.is-visible > *:nth-child(6){ transition-delay:.39s; }

/* ============ SECTION SCAFFOLDING ============ */
section{ padding: clamp(4rem, 9vw, 8rem) 0; }
.section--tight{ padding: clamp(2.5rem,5vw,4rem) 0; }
.section--alt{ background: var(--bg-raised); }
.section--card{ background: var(--bg-card); }
.section--light{ background: var(--bg-inverse); color:#3a3d40; }
.section--light h1, .section--light h2, .section--light h3{ color:#12161a; }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom: 3rem; flex-wrap:wrap; }
.divider{ height:1px; background:var(--line-soft); border:0; margin: 0; }

.page-hero{
  padding: calc(var(--header-h) + 3.2rem) 0 3.5rem;
  border-bottom:1px solid var(--line-soft);
}
.page-hero .eyebrow{ margin-bottom:1rem; display:block; }
.breadcrumbs{ display:flex; gap:.5rem; align-items:center; font-size:.78rem; color:var(--text-muted); margin-bottom:1.6rem; }
.breadcrumbs a{ color:var(--text-muted); transition:color var(--dur-fast); }
.breadcrumbs a:hover{ color:var(--text); }

/* two column editorial */
.editorial{ display:grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem,6vw,5rem); align-items:start; }
.editorial .col-label{ position:sticky; top: calc(var(--header-h) + 1.5rem); }
@media (max-width: 900px){ .editorial{ grid-template-columns:1fr; } .editorial .col-label{ position:static; } }

.editorial-media{ position:relative; overflow:hidden; }
.editorial-media img{ width:100%; height:100%; object-fit:cover; transition: transform 1.2s var(--ease); }
.editorial-media:hover img{ transform: scale(1.035); }

/* ============ NUMBERED SPEC LIST (why choose us / services) ============ */
.spec-list{ border-top:1px solid var(--line-soft); }
.spec-row{
  display:grid; grid-template-columns: 70px 1fr 1.4fr; gap:2rem; align-items:start;
  padding: 2rem 0; border-bottom:1px solid var(--line-soft);
}
.spec-row .num{ font-size:1rem; color:var(--accent-dim); font-weight:600; }
.spec-row h3{ font-size:1.3rem; }
.spec-row p{ color:var(--text-muted); max-width:52ch; }
@media (max-width: 760px){ .spec-row{ grid-template-columns: 40px 1fr; } .spec-row p{ grid-column: 2/-1; } }

/* ============ SERVICE ROWS (what we build) ============ */
.service-row{
  display:grid; grid-template-columns: 90px 1fr auto; align-items:center; gap:2rem;
  padding: 2.1rem 0; border-bottom:1px solid var(--line-soft);
  position:relative; overflow:hidden;
}
.service-row .num{ color:var(--text-muted); font-size:.95rem; }
.service-row h3{ font-size: clamp(1.3rem,2.6vw,2rem); transition: transform var(--dur) var(--ease), color var(--dur-fast); }
.service-row .desc{ display:block; color:var(--text-muted); font-size:.92rem; margin-top:.4rem; max-width:60ch; }
.service-row .arrow{ font-size:1.4rem; color:var(--accent); opacity:0; transform: translateX(-8px); transition: all var(--dur-fast) var(--ease); }
.service-row:hover{ background: var(--accent-wash); }
.service-row:hover h3{ transform: translateX(10px); color:var(--text); }
.service-row:hover .arrow{ opacity:1; transform:none; }
.service-row-inner{ padding-left: clamp(0px, 2vw, 24px); }

/* ============ PROJECT GRID (asymmetric) ============ */
.project-grid{ display:flex; flex-direction:column; gap: clamp(2.5rem,6vw,5rem); }
.project-card{ position:relative; display:block; overflow:hidden; }
.project-card .frame{ position:relative; overflow:hidden; background:var(--bg-raised); }
.project-card img{ width:100%; height:100%; object-fit:cover; transition: transform 1s var(--ease), filter 1s var(--ease); }
.project-card .frame::after{
  content:""; position:absolute; top:0; right:0; bottom:0; left:0;
  background: linear-gradient(180deg, rgba(10,12,14,0) 45%, rgba(10,12,14,.85) 100%);
  opacity:.55; transition: opacity var(--dur) var(--ease);
}
.project-card:hover img{ transform: scale(1.045); }
.project-card:hover .frame::after{ opacity:.78; }
.project-card .meta{
  position:absolute; left:0; right:0; bottom:0; padding: 1.6rem 1.8rem;
  display:flex; justify-content:space-between; align-items:flex-end; gap:1rem;
  z-index:2; color:#fff;
}
.project-card .p-num{ font-size:.75rem; color:var(--accent-dim); letter-spacing:.12em; }
.project-card .p-name{ font-size: clamp(1.2rem,2.6vw,1.9rem); font-weight:600; }
.project-card .p-tags{ font-size:.78rem; color:var(--text-secondary); letter-spacing:.04em; margin-top:.25rem; }
.project-card .p-arrow{
  font-size:1.6rem; width:2.6rem; height:2.6rem; border:1px solid rgba(255,255,255,.4);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.project-card:hover .p-arrow{ transform: translate(4px,-4px); background:#fff; color:#111; }

.pg-a .frame{ aspect-ratio: 16/9; }
.pg-b{ align-self:flex-end; width:70%; }
.pg-b .frame{ aspect-ratio: 4/5; }
.pg-c{ width:58%; }
.pg-c .frame{ aspect-ratio: 4/5; }
@media (max-width: 760px){ .pg-b, .pg-c{ width:100%; } }

.full-bleed{ position:relative; width:100vw; margin-left:calc(50% - 50vw); }
.full-bleed .frame{ aspect-ratio: 21/9; }
.full-bleed .meta{ padding: 2rem clamp(1.25rem,5vw,4.5rem); }

/* ============ STATS ============ */
.stat-strip{ display:grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap:2.5rem; }
.stat-item .num{ font-size: clamp(2.4rem,5vw,4rem); font-weight:700; color:#fff; letter-spacing:-.02em; }
.stat-item .label{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); margin-top:.4rem; }

/* ============ GALLERY (masonry) ============ */
.masonry{ columns: 3 260px; column-gap: 1.1rem; }
.masonry figure{ break-inside: avoid; margin: 0 0 1.1rem; position:relative; overflow:hidden; cursor: zoom-in; background:var(--bg-raised); }
.masonry img{ width:100%; display:block; transition: transform .8s var(--ease); }
.masonry figure:hover img{ transform: scale(1.05); }
.masonry figure::after{ content:""; position:absolute; top:0; right:0; bottom:0; left:0; background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.55)); opacity:0; transition:opacity var(--dur-fast); }
.masonry figure:hover::after{ opacity:1; }
.masonry figcaption{
  position:absolute; left:0; right:0; bottom:0; padding: .9rem 1rem;
  color:#fff; font-size:.8rem; opacity:0; transform: translateY(8px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.masonry figure:hover figcaption, .masonry figure:focus-within figcaption{ opacity:1; transform:none; }
.masonry button{ all:unset; display:block; width:100%; }
.masonry video{ width:100%; display:block; }

.gallery-filters{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2.2rem; }
.gallery-filters button{
  padding:.55rem 1.1rem; border:1px solid var(--line); background:transparent; color:var(--text-muted);
  font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; transition: all var(--dur-fast) var(--ease);
}
.gallery-filters button[aria-pressed="true"], .gallery-filters button:hover{ color:#fff; border-color:var(--accent); background: var(--accent-wash); }
.masonry figure{ transition: opacity .4s var(--ease), transform .4s var(--ease); }
.masonry figure.is-hidden{ display:none; }

/* Lightbox */
.lightbox{
  position:fixed; top:0; right:0; bottom:0; left:0; z-index:400; background: rgba(6,7,8,.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition: opacity var(--dur) var(--ease);
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox-content{ max-width:90vw; max-height:82vh; position:relative; }
.lightbox-content img, .lightbox-content video{ max-width:90vw; max-height:82vh; width:auto; height:auto; margin:0 auto; }
.lightbox-cap{ text-align:center; color:var(--text-secondary); margin-top:1rem; font-size:.85rem; }
.lightbox-close, .lightbox-nav{
  position:absolute; background:transparent; border:1px solid var(--line-strong); color:#fff;
  width:48px; height:48px; display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  transition: background var(--dur-fast) var(--ease);
}
.lightbox-close:hover, .lightbox-nav:hover{ background: rgba(255,255,255,.1); }
.lightbox-close{ top: 1.5rem; right: 1.5rem; }
.lightbox-nav--prev{ left: 1.5rem; top:50%; transform:translateY(-50%); }
.lightbox-nav--next{ right: 1.5rem; top:50%; transform:translateY(-50%); }
@media (max-width:700px){ .lightbox-nav{ width:40px; height:40px; } .lightbox-nav--prev{ left:.6rem; } .lightbox-nav--next{ right:.6rem; } }

/* ============ TESTIMONIAL / RATING STRIP ============ */
.rating-strip{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.rating-stars{ color: var(--accent); letter-spacing:.15em; font-size:1.1rem; }
.rating-strip .rating-num{ color:#fff; font-weight:700; }

/* ============ CARDS (careers / values) ============ */
.value-card{ border-top:1px solid var(--line); padding-top:1.6rem; }
.value-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: 2.4rem; }

.job-row{ display:flex; justify-content:space-between; align-items:center; gap:1.5rem; padding:1.7rem 0; border-bottom:1px solid var(--line-soft); flex-wrap:wrap; }
.job-row .tag{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--accent-dim); border:1px solid var(--line); padding:.3rem .7rem; }

/* ============ FORM ============ */
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 2rem; }
.field{ display:flex; flex-direction:column; gap:.5rem; }
.field.full{ grid-column: 1/-1; }
.field label{ font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); }
.field input, .field select, .field textarea{
  background:transparent; border:none; border-bottom:1px solid var(--line);
  color:#fff; font-family:inherit; font-size:1rem; padding:.7rem .1rem;
  transition: border-color var(--dur-fast) var(--ease);
}
.field textarea{ resize: vertical; min-height:110px; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--accent); outline:none; }
.field.has-error input, .field.has-error textarea, .field.has-error select{ border-color:#d97757; }
.field-error{ font-size:.78rem; color:#e08a63; min-height:1.1em; }
.field select option{ background: var(--bg-raised); color:#fff; }
@media (max-width:700px){ .form-grid{ grid-template-columns:1fr; } }

.form-status{ margin-top:1.6rem; padding:1rem 1.2rem; border:1px solid var(--line); display:none; }
.form-status.is-visible{ display:block; }
.form-status.success{ border-color:#4f94d4; color:#cfe3f4; }

.stepper{ display:flex; align-items:center; gap:.5rem; }
.stepper button{ width:38px; height:38px; border:1px solid var(--line); background:transparent; color:#fff; font-size:1.1rem; }
.stepper button:hover{ border-color:var(--accent); }
.stepper output{ min-width:2.2ch; text-align:center; color:#fff; font-weight:600; }

/* ============ INFO / CONTACT BLOCKS ============ */
.info-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:2.4rem; }
.info-block dt{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); margin-bottom:.5rem; }
.info-block dd{ margin:0; color:#fff; font-size:1.05rem; }
.copy-btn{ background:none; border:none; color:var(--accent-dim); font-size:.8rem; margin-left:.6rem; text-decoration:underline; padding:0; }
.hours-status{ display:inline-flex; align-items:center; gap:.5rem; font-size:.85rem; color:var(--text-muted); }
.hours-dot{ width:8px; height:8px; border-radius:50%; background:#7a7f85; }
.hours-dot.is-open{ background:#5fbf7a; }

.map-frame{ border:1px solid var(--line); filter: grayscale(1) invert(.92) contrast(.9); height: 360px; width:100%; }

/* ============ FOOTER ============ */
.site-footer{ border-top:1px solid var(--line-soft); padding: 4rem 0 2rem; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr .9fr .9fr .9fr .8fr; gap:2.5rem; margin-bottom:2.5rem; }
.footer-grid h4{ font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); margin-bottom:1.1rem; }
.footer-grid ul{ display:flex; flex-direction:column; gap:.65rem; }
.footer-grid a{ color: var(--text-secondary); transition: color var(--dur-fast); }
.footer-grid a:hover{ color:#fff; }
.footer-social{ flex-direction:row !important; gap:.9rem !important; }
.footer-social li{ display:flex; }
.footer-social a{
  width:38px; height:38px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.footer-social a:hover{ border-color:var(--accent); color:var(--accent); transform: translateY(-2px); }
.footer-social svg{ width:17px; height:17px; fill:currentColor; }
.footer-address{
  padding-top: 1.6rem; margin-top: .5rem;
  border-top:1px solid var(--line-soft);
  font-size:.85rem; color:var(--text-muted);
}
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding-top:1.6rem; font-size:.78rem; color:var(--text-muted); }
@media (max-width:1080px){ .footer-grid{ grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width:820px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }

.back-to-top{
  position:fixed; right: 1.6rem; bottom: 1.6rem; z-index:150;
  width:48px; height:48px; border:1px solid var(--line-strong); background: rgba(17,19,22,.85); backdrop-filter: blur(6px);
  color:#fff; display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform: translateY(10px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:none; }

/* progress bar styled like a baking-timer-esque thin architectural line */
.scroll-progress{ position:fixed; top:0; left:0; height:2px; background:var(--accent); width:0%; z-index:300; }

/* toast */
.toast-region{ position:fixed; bottom:1.6rem; left:1.6rem; z-index:400; display:flex; flex-direction:column; gap:.7rem; }
.toast{
  background: var(--bg-card); border:1px solid var(--line); color:#fff; padding:.9rem 1.2rem;
  font-size:.85rem; max-width: 320px; opacity:0; transform: translateY(10px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.toast.is-visible{ opacity:1; transform:none; }

/* skeleton loader (paper-placeholder) */
.skeleton{ background: linear-gradient(100deg, var(--bg-raised) 30%, var(--bg-card) 50%, var(--bg-raised) 70%); background-size:200% 100%; animation: sk 1.6s ease-in-out infinite; }
@keyframes sk{ from{ background-position: 150% 0;} to{ background-position: -50% 0;} }
@media (prefers-reduced-motion: reduce){ .skeleton{ animation:none; } }

/* utility */
.mt-1{ margin-top:1rem;} .mt-2{ margin-top:2rem;} .mt-3{ margin-top:3rem;}
.text-muted{ color:var(--text-muted); }
.center{ text-align:center; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (max-width: 900px){
  .editorial-media{ order:-1; }
  section{ padding: 3.2rem 0; }
  .footer-grid{ grid-template-columns: 1fr; gap:2rem; }
}