@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Symbols+2&display=swap');

/* Symbol square style */


@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Text:wght@300;400;500&display=swap');
:root{--bg:#efeee9;--ink:#111;--muted:#6b6b6b;--card:#0b0b0b;--container:1120px}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Red Hat Text',sans-serif;line-height:1.6;font-weight:300}
img{max-width:100%;display:block;height:auto}a{color:inherit;text-decoration:none}
.container{max-width:var(--container);margin:0 auto;padding:0 24px}
header{position:relative;padding:28px 0;background:var(--bg)}
.brand{font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);font-size:22px}
.nav{display:flex;gap:24px;align-items:center}
.nav a{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#7a7a7a;padding:6px 0;position:relative;font-weight:500}
.nav a.active{color:var(--ink)}.nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:0px;height:2px;background:var(--ink)}
.header-row{display:flex;justify-content:space-between;align-items:center;gap:20px}
.hero{background:var(--bg)}
.hero-grid{display:grid;grid-template-columns:1fr;gap:28px;align-items:stretch}
.hero-media{position:relative;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-copy{color:#e6e6e6 !important;}
.hero-copy{color:#e6e6e6 !important;}
.hero-copy{color:#e6e6e6 !important;}
.pillars{padding:56px 0 80px}
.pillars-grid{display:grid;grid-template-columns:1fr;gap:36px}
.pillar h3{font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin:12px 0 8px;font-weight:500}
.pillar p{color:var(--muted);margin:0;font-weight:300}
.icon{width:26px;height:26px;color:var(--ink)}
footer{padding:48px 0 64px;color:#a0a0a0;font-size:12px;font-weight:400}
@media (min-width:960px){header{padding:36px 0}.brand{font-size:26px}.nav a{font-size:12px}
.hero-grid{grid-template-columns:repeat(3,1fr);gap:36px}.hero-media{grid-column:span 2;min-height:420px}
.hero-copy{color:#e6e6e6 !important;}
.pillars-grid{grid-template-columns:repeat(3,1fr);gap:48px}}
@media (min-width:1280px){.hero-media{min-height:480px}}
.main-center{min-height:60vh;display:flex;align-items:center;justify-content:center;padding:40px 24px}
.auth-card{background:#ffffffaa;border:1px solid #ddd;padding:24px;border-radius:14px;backdrop-filter:saturate(1.2) blur(2px)}
label{display:block;margin-bottom:6px;font-weight:400}
input[type=password]{width:100%;padding:12px;border-radius:10px;border:1px solid #cfcfcf;font-size:16px;font-family:'Red Hat Text',sans-serif}
button{margin-top:12px;border:1px solid #111;padding:10px 14px;border-radius:12px;background:#111;color:#fff;font-weight:500;cursor:pointer}
.small{color:#777;font-size:12px;margin-top:8px}.hidden{display:none !important}

/* Symbol square style */

/* Ensures U+25A0 renders from Noto Sans Symbols 2 */
.symbol-square, .symbol-square * {
  font-family: 'Noto Sans Symbols 2', 'Noto Sans Symbols', 'Segoe UI Symbol', 'Apple Color Emoji', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
  color: #fff;
  font-weight: 400;
  line-height: 1;
  display: inline-block;
 font-size:14px; margin-bottom:0;}

body .symbol-square {
  font-family: 'Noto Sans Symbols 2', sans-serif !important;
  color: #fff !important;
 font-size:14px; margin-bottom:0;}


@media (max-width: 960px){
  .hero-copy, .pillars-grid{
    padding-left:64px !important;
    padding-right:64px !important;
  }
}



/* Refactor: remove rounded corners from password elements & form controls */
input[type="password"],
button,
input,
select,
textarea {
  border-radius: 0 !important;
}



/* Refactor: stack brand above nav under 960px and center both */
@media (max-width: 960px){
  .header-row{
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 12px;
  }
  .brand{
    text-align: center;
  }
  .nav{
    justify-content: center;
  }
}



/* Refactor: unify footer styles */




/* Ensure footer sticks with spacing from viewport bottom */
html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}

/* Layout: ensure footer sits above bottom with ~64px gap */
html, body { height: 100%; }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Footer styling + bottom gap */
footer { margin-top: auto; }
footer.container{
  text-align: center;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 400;
  color: #a0a0a0;
  margin-bottom: 64px;
}



/* ===== Case Studies Authenticated Layout ===== */
.page-title{
  margin: 0 0 16px 0;
  font-size: 24px;
  letter-spacing: .02em;
  font-weight: 400;
  color: #7a7a7a;
}

.studies{ padding: 64px 24px 120px; }

.study{
  background: #ffffff;
  padding: 24px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  align-items: center;
  margin-bottom: 36px;
}

.study-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.study-copy h3{
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 4px 0 8px;
  font-weight: 600;
}

.study-copy p{
  color: var(--ink);
  margin: 0 0 12px 0;
  font-weight: 300;
}

.btn{
  display: inline-block;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 10px 14px;
  border: 1px solid #c6c6c6;
}

@media (min-width: 960px){
  .studies{ padding: 80px 24px 140px; }
  .study{
    grid-template-columns: 2fr 1fr;
    gap: 36px;
    padding: 36px 40px;
  }
  .study-media{ min-height: 360px; }
}


@media (max-width: 959px){
  .study{
    grid-template-columns: 1fr !important;
  }
  .study-copy{
    order: 2;
  }
  .study-media{
    order: 1;
  }
}