:root { --brand:#f0b429; --ink:#2b2b2b; --muted:#9aa1a9; --radius:12px; }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial; color:var(--ink); background:#fafbfc; }

.cc-navbar{ background:var(--brand); 
    padding:12px 0; 
    box-shadow: 0 1px 0 rgba(0,0,0,.05); 
}
.cc-brand{color:#fafbfc}
.cc-card{  background:#fff; margin:48px auto; padding:28px 28px 32px;
  max-width:520px; border-radius:25px;
  box-shadow: 0 6px 20px #0000000f;
}
.cc-actions { display:flex;
    justify-content:center; 
    align-items:center; 
    margin-top:8px; 
}
.button, button, input[type='button'], input[type='reset'], input[type='submit'] {
appearance:none; border:0; border-radius:10px;
  background:#f0b429;
  padding:10px 100px; font-weight:700; cursor:pointer;
  margin-top:10px;
}
fieldset {
  border: 1px solid black;   
  border-radius: 12px;         
  padding: 20px;               
  margin-bottom: 16px;         
}
h4{
display:flex;
justify-content:flex-end; 
align-items:flex-end;
font-size: small;
margin-bottom: 8px;
}
.error-message {
  font-size: 0.875rem;   /* ~14px */
  line-height: 1.25;
  color: #dc3545;        /* Bootstrap danger */
  margin-top: .25rem;
  position: static;      /* ensure it doesn't get weird positioning */
  width: auto;           /* prevent huge width */
}

/* If your container gets an 'error' class, keep container font normal */
.input.error, .form-group.error {
  font-size: 1rem;
}
/* Flash messages (Cake default: <div class="message error|success|info">) */
.message {
  font-size: 0.95rem;
  line-height: 1.4;
  padding: .75rem 1rem;
  margin: 0 0 1rem;
  border-radius: .375rem;
  max-width: 700px;  /* stop the super-narrow wrapping */
  width: auto;
}
.message p { margin: 0; }

/* Color variants */
.message.error {
  background: #fdecea;            /* light red */
  color: #842029;
  border: 1px solid #f5c2c7;
}
.message.success {
  background: #ecfdf5;            /* light green */
  color: #0f5132;
  border: 1px solid #badbcc;
}

.message.info {
  background: #eef6ff;            /* light blue */
  color: #084298;
  border: 1px solid #b6d4fe;
}

/* If your theme has a generic `.error` rule that sets a fixed width,
   neutralize it only for flash messages: */
.message.error { width: auto !important; }

/* Full-bleed hero */
.hero {
  min-height: 100vh;              /* Make it fill the whole screen height */
  width: 100%;
}

/* Background image layer */
.hero .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;               /* Fill without distortion */
  object-position: center;         /* Center the subject */
  z-index: 0;
}

/* Readability overlay (left-to-right gradient) */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.35) 45%,
    rgba(0, 0, 0, 0.05) 100%
  );
  z-index: 1;
}

/* Ensure text is above the overlay */
.hero .container {
  z-index: 2;
  position: relative;
}

.hero { min-height: 80vh; }              /* give it height so centering works */
.hero .hero-bg{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;                      /* fill without distortion */
  filter: brightness(0.8);                /* optional: keep text readable */
}
.hero-wrap{
  width: 100%;
  height: 80vh;             /* container height you control */
  /* or: height: 520px; */
  overflow: hidden;         /* trims overflow when using cover */
}

.hero-img{
  width: 100%;              /* span full width */
  height: 100%;             /* match container height */
  object-fit: cover;        /* fill area without distortion */
  /* use object-fit: contain to show the whole image with letterboxing */
}