:root{
  --bg: #f6f7f9;
  --card: rgba(255,255,255,0.6);
  --glass-border: rgba(30,30,30,0.06);
  --accent: #b19662;      
  --accent-contrast: #181818;
  --muted: #6b6b6b;
  --radius: 14px;
  --max-width: 1000px;
  --gap: 18px;
  --shadow: 0 6px 20px rgba(12,12,12,0.08);
  --fw-regular: 400;
  --fw-strong: 700;
}

* { box-sizing: border-box; }
html,body { height:100%; }

body {
  margin:0;
  font-family: "Josefin Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: var(--bg);
  color: #111;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  padding: 32px 18px;
  overflow-y: auto !important;         
}
body::before {
    --size: 45px;
    --line: color-mix(in hsl, canvasText, transparent 80%);
    content: '';
    height: 100vh;
    width: 100vw;
    position: fixed;
    background: 
      linear-gradient(90deg, var(--line) 1px, transparent 1px var(--size))
      calc(var(--size) * 0.36) 50% / var(--size) var(--size),
      linear-gradient(var(--line) 1px, transparent 1px var(--size))
      0% calc(var(--size) * 0.32) / var(--size) var(--size);
    -webkit-mask: linear-gradient(-20deg, transparent 50%, white);
    mask: linear-gradient(-20deg, transparent 10%, white);
    top: 0;
    pointer-events: none;
    z-index: -1;
}


.page{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 100vh;                     
}

.card {
  width:100%;
  max-width:var(--max-width);
  background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(250,250,250,0.85) 100%);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--glass-border);
  padding: 28px;
  display:flex;                           
  flex-direction:column;
  justify-content:center;                 
  align-items:center;                     
  position: relative;    

}


.card > * {
  width: 100%;
  max-width: 900px;                       
}
.cohort-banner {
  position: absolute;
  top: 0;                    
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;

  display: flex;
  align-items: center;
  justify-content: center;

  height: 48px;
  width: 300px;

  background: #000;
  padding: 0 18px;

    clip-path: polygon(0 0, 100% 0, 93% 100%, 7% 100%); 


  border-bottom: 2px solid #000; 
}

.cohort-banner img {
  height: 22px;
  opacity: .95;
}


.cohort-banner::before{
  content:"";
  position:absolute;
  inset:0;
  background:#000; 
  
  clip-path: polygon(0 0, 100% 0, 93% 100%, 7% 100%); 
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}

.cohort-banner img{
  position: relative;     
  z-index: 1;
  height: 36px;
  width: auto;
  object-fit: contain;
  opacity: .95;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.2));
}

@media (max-width: 599px){
  .cohort-banner{
    width: clamp(220px, 70%, 360px);
    height: 48px;
    margin: -4px auto 22px;
  }
  .cohort-banner::before{
    clip-path: polygon(0 0, 100% 0, 91% 100%, 9% 100%); 
  }
  .cohort-banner img{ height: 20px; }
}

@media (min-width: 1200px){
  .cohort-banner{
    width: clamp(200px, 22%, 560px);
    height: 30px;
  }
  .cohort-banner img{ height: 20px; }
}


.panel-header h1{
  font-family: "Unbounded", "Josefin Sans", sans-serif;
  font-size: 1.9rem;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}

.lead{
  margin:0 0 18px;
  color: var(--muted);
  max-width: 70ch;
}

.benefits{
  list-style: none;
  padding: 0;
  margin: 8px 0 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  color: #333;
}

.benefits li{
  background: rgba(177,150,98,0.06);
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.95rem;
  line-height: 1.35;
}

.cohort-form { margin-top: 18px; }
.form-title {
  margin: 6px 0 12px;
  font-size: 1.1rem;
  font-weight: var(--fw-strong);
}

.form-grid {
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}



@media (min-width: 720px){
  .form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .field.field-full { grid-column: 1 / -1; }
}

.field label{
  display:block;
  font-weight:600;
  margin-bottom:8px;
  font-size: 0.9rem;
  color: #222;
}
.field input,
.field textarea,
.field select {
  display:block;
  width:100%;
  font-size: 0.95rem;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #e6e6e6;
  background: #fff;
  outline: none;
  transition: box-shadow .15s, border-color .12s;
  box-shadow: none;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--accent);
  box-shadow: 0 4px 18px rgba(177,150,98,0.08);
}

.field textarea {
  resize: vertical;
  min-height: 96px;
}

.form-actions{
  margin-top: 18px;
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
  align-items:center;
}

.btn{
  padding: 12px 18px;
  border-radius: 10px;
  border: none;
  cursor:pointer;
  font-weight:700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  box-shadow: none;
}

.btn.primary{
  background: linear-gradient(180deg, var(--accent) 0%, #9d7f4a 100%);
  color: #fff;
  box-shadow: 0 6px 18px rgba(177,150,98,0.16);
}

.btn.ghost{
  background: transparent;
  color: var(--accent-contrast);
  border: 1px solid #e6e6e6;
}

.small-note{
  margin-top: 12px;
  font-size: .85rem;
  color: var(--muted);
}

.link { color: var(--accent-contrast); text-decoration: underline; }

input[required]:invalid { box-shadow: 0 0 0 3px rgba(255,0,0,0.03) inset; }


@media (prefers-reduced-motion: reduce) {
  .site-wrap, .panel-wrap, .panel, .panel__zoom, .panel__nav, .panel__animation-list, .btn, .btn2 {
    transition: none !important;
    animation: none !important;
  }
}

@media (max-width: 599px) {
  body {
    letter-spacing: 0.08rem;
    overflow-x: hidden !important;
    font-size: 14px;
    width: 100vw;
    overflow-y: scroll;
  }
  body::before {
    --size: 28px;
    -webkit-mask-position: 0;
    mask-position: 0;
    background-size: var(--size) var(--size);
  }
  h1 { font-size: 7vmin; }

  .panel, .panel-wrap {
    position: relative;
    float: left;
    height: auto;
    margin: 0em auto;
    top: inherit !important;
    left: inherit !important;
    overflow: auto;
  }

  .panel__content {
    width: 92vw;
    padding: 4vw;
    top: inherit !important;
    transform: none;
    position: relative;
    left: inherit !important;
  }

  .panel h1 { width: 100%; font-size: 5vmin; }

  .panel.home_landing p,
  .panel__content p {
    font-size: 3vmin;
    line-height: 1.5;
    font-weight: 300;
    margin: 2.7em auto;
    width: 96%;
  }

  .panel__content .services-last{ padding: 2em 0 0; }
  .panel__content .services-last p{
    line-height: 1.2; margin-bottom: 18px; font-size: 12px; letter-spacing: 1px;
  }

  .home_landing .panel__content{ padding: 10vh 4vw; }

  .grid-3, .about.grid-4, .services {
    grid-template-columns: 1fr; gap: 12px; margin-top: 1.25rem; width: 90%; margin: auto;
  }

  .card { padding: 12px; }
  .services .card { padding: 10px 10px 13px; }
  .card h3 { font-size: 2.3vmin; }
  ul.list { display: none; }
  .kicker { line-height: 3; font-size: 2.6vmin; margin: -1px; }
  span.panel__zoom.js-zoom { opacity: 0; }

  .panel__animation-list {
    font-size: 4vmin;
    transform: translateX(-50%) translateY(-50%) translateY(12vmin);
  }

  .panel__nav { font-size: 0.7rem; letter-spacing: 0px; font-weight: 800; color: #8f1507; z-index: 10; display: none; }
  .nav_cohortea { display: block !important; }

  .btn, .btn2 { padding: 10px 18px; font-size: 10px; margin-top: 1rem; }

  .form-container { flex-direction: column; gap: 12px; padding: 0 12px; width: calc(100% - 24px); box-sizing: border-box; }
  h2 { font-size: 4vmin; width: 89%; margin: 1em auto; }
  .row { grid-template-columns: 1fr; padding: 6px; gap: 10px; width: 96%; }
  .col-6 { padding: 8px; }
  .shared label { width: 30%; font-size: 12px; }
  .shared input, .shared textarea { width: 70%; }
  .price { position: static; padding: 14px 10px; margin-top: 1rem; font-size: 12px; }
}

@media (min-width: 600px) and (max-width: 899px) {
  body { letter-spacing: 0.12rem; perspective: 1000px; }
  body::before { --size: 36px; }
  h1 { font-size: 6vmin; }
  .panel__content { width: 80vw; padding: 1rem; }
  .panel.home_landing p, .panel__content p { width: 80%; font-size: 15px; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .about.grid-4 { grid-template-columns: 1fr 1fr; }
  .services { grid-template-columns: 1fr 1fr; }
  .panel__nav--left, .panel__nav--right { height: 240px; font-size: 0.75rem; }
  .btn, .btn2 { padding: 12px 26px; font-size: 11px; }
  .form-container { flex-direction: column; max-width: 700px; gap: 14px; }
  .row { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) and (max-width: 1199px) {
  body::before { --size: 40px; }
  h1 { font-size: 5.2vmin; }
  .panel__content { width: 75vw; }
  .panel h1 { width: 75vw; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .services { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .about.grid-4 { grid-template-columns: 1fr 1fr; }
  .form-container { flex-direction: row; gap: 20px; }
  .row { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1200px) {
  body { padding: 32px 18px; }

  .page{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
  }

  .card{
    width: clamp(720px, 60vw, 1200px);  
    max-width: 1200px;
    height: auto;
    max-height: calc(100vh - 48px);      
    border-radius: var(--radius);
    padding: 40px;
    box-shadow: var(--shadow);
    background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(250,250,250,0.9));
  }

  .card > .panel-body,
  .card form,
  .card .cohort-form,
  .card .panel__content {
    overflow-y: auto;
    max-height: calc(100vh - 120px);
    padding-right: 8px;
  }

  .panel-header h1 { font-size: 2.1rem; }
  .lead { font-size: 0.98rem; }
}

.site-wrap.show-all,
.panel-wrap.animate--tilt.animate .panel,
.panel-wrap.animate--tilt2.animate .panel {
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

@media print {
  body::before { display: none; }
  .panel__nav, .panel__zoom, .panel__animation-list { display: none; }
  .panel, .panel__content { position: static; transform: none; width: 100%; }
}