/* Team Hiploch holding page. Cream page, dark blue band, Archivo. Colors locked October 11. */
@font-face{font-family:"Archivo";font-weight:400;font-style:normal;font-display:swap;src:url("fonts/archivo-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-weight:600;font-style:normal;font-display:swap;src:url("fonts/archivo-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-weight:700;font-style:normal;font-display:swap;src:url("fonts/archivo-latin-700-normal.woff2") format("woff2")}
:root{
  --blue:#040E2E;
  --cream:#F7F4EC;
  --green:#64B445;
  --muted:#3E4856;
  --rule:#C9C6BD;
  --field:#FFFDF8;
  --font:"Archivo","Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(16px,5vw,64px);
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--blue);font-family:var(--font);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
.wrap{max-width:72rem;margin:0 auto;padding-inline:var(--gutter)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.hero :focus-visible{outline-color:var(--green)}
.skip{position:absolute;left:-999px;top:0;background:var(--blue);color:var(--cream);padding:.5rem 1rem;z-index:10}
.skip:focus{left:var(--gutter)}

/* Dark blue opening band */
.hero{background:var(--blue);color:var(--cream)}
.hero .wrap{padding-block:clamp(2.5rem,7vw,5.5rem) clamp(3rem,8vw,6.5rem)}
.mark{display:block;width:clamp(200px,32vw,280px);margin-bottom:clamp(3rem,9vw,6rem)}
h1{margin:0;font-size:clamp(2.1rem,5.6vw,4rem);line-height:1.06;font-weight:700;letter-spacing:-.02em;max-width:19ch}
h1 .green{display:block;color:var(--green)}
.sub{margin:1.75rem 0 0;font-size:clamp(1.1rem,2.2vw,1.35rem);max-width:42ch}
.proof{margin:1.75rem 0 0;font-size:.95rem;opacity:.85;max-width:60ch}

/* Open for work */
.open{padding-block:clamp(3rem,7vw,5rem) 2.5rem;max-width:44rem}
h2{margin:0 0 .75rem;font-size:clamp(1.5rem,3vw,2rem);line-height:1.2;font-weight:700;letter-spacing:-.01em}
.open p{margin:0;color:var(--muted);font-size:1.15rem}
.open p + p{margin-top:1rem}
.open .next{color:var(--blue);font-weight:600}

.grid{max-width:44rem;padding-bottom:clamp(3.5rem,8vw,6rem)}

.label{margin:0;font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

form{border-top:2px solid var(--blue);padding-top:1.25rem}
fieldset{border:0;margin:0 0 1.25rem;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
legend{font-weight:600;font-size:.95rem;margin-bottom:.6rem;padding:0}
.choice{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;cursor:pointer}
.choice input{width:1.15rem;height:1.15rem;accent-color:var(--blue);margin:0}
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.25rem}
.field label{font-weight:600;font-size:.95rem}
.opt{font-weight:400;color:var(--muted)}
input[type=text],input[type=email],input[type=date],textarea{font:inherit;color:var(--blue);background:var(--field);border:1px solid #6F6D67;border-radius:0;padding:.75rem .85rem;width:100%;min-height:44px}
textarea{min-height:9rem;resize:vertical}
input:focus-visible,textarea:focus-visible{outline:3px solid var(--blue);outline-offset:1px}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.btn{font:inherit;font-weight:600;background:var(--blue);color:var(--cream);border:2px solid var(--blue);padding:.95rem 1.6rem;cursor:pointer;min-height:44px}
.btn:hover{background:var(--cream);color:var(--blue)}
.note{margin:1rem 0 0;font-size:.9rem;color:var(--muted)}

.foot{background:var(--blue);color:var(--cream)}
.foot .wrap{padding-block:1.75rem}
.foot small{font-size:.85rem;opacity:.85}

/* Thanks and error pages */
.msg{padding-block:clamp(3rem,8vw,6rem)}
.msg p{color:var(--muted);font-size:1.15rem;max-width:44ch}
.msg a{color:var(--blue);font-weight:600}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.slim .wrap{padding-block:2rem}.slim .mark{margin-bottom:0}