/* hiretheon.com site styles. Every color, size and space comes from tokens.css
   (generated from strategy/brand/DESIGN.md). Do not add hex values here.

   SWITCHES (set on <body> in index.html):
     no-calculator  hides the calculator band (BI-070 pending). Remove the class to show it.
     no-workline    hides the work-line placeholder (BI-055 pending). Remove the class to show it.
*/
@font-face{font-family:"Newsreader";font-style:normal;font-weight:200 800;font-display:swap;src:url("/fonts/newsreader-latin-opsz-normal.woff2") format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("/fonts/instrument-sans-latin-wght-normal.woff2") format("woff2")}

*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--paper);color-scheme:light;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font:400 var(--type-body-md-font-size)/1.6 var(--sans);-webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums tabular-nums;min-width:0;min-height:100vh;display:flex;flex-direction:column}
main{flex:1 0 auto}
img{max-width:100%}

/* Keyboard focus: a 2px ink outline on every interactive element. */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.skip{position:absolute;left:var(--space-md);top:-100px;background:var(--paper);color:var(--ink);border:1px solid var(--ink);padding:12px 16px;font:500 15px/1.2 var(--sans);z-index:10}
.skip:focus{top:var(--space-md)}

header.site{display:flex;justify-content:space-between;align-items:center;min-height:88px;padding:0 var(--space-margin);border-bottom:1px solid var(--rule);gap:var(--space-lg)}
header.site .brand{display:block;line-height:0}
header.site .brand img{height:20px;width:auto;display:block}
header.site .r{display:flex;align-items:center;gap:40px}
header.site nav{display:flex;gap:40px;font:500 15px/1 var(--sans)}
header.site nav a{color:var(--stone);text-decoration:none;padding-bottom:6px;border-bottom:1px solid transparent}
header.site nav a:hover{color:var(--ink)}
header.site nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}

.label{font:400 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--stone)}
.label.green{color:var(--green)}
/* "draft copy" review tags from the templates stay in the markup and are hidden in the site build. */
.draft{display:none}

h1,h2,h3{font-family:var(--serif);font-weight:300;font-optical-sizing:auto;text-wrap:balance}
p{text-wrap:pretty}
a{color:inherit}
.btn{display:inline-block;white-space:nowrap;background:var(--green);color:var(--paper);font:500 15px/1.2 var(--sans);padding:16px 24px;text-decoration:none;border:0;cursor:pointer;border-radius:0}
.btn:hover{background:var(--ink)}
.btn2{display:inline-block;color:var(--ink);font:500 15px/1.2 var(--sans);padding:15px 23px;border:1px solid var(--ink);text-decoration:none;background:transparent}
.btn2:hover{background:var(--panel)}

footer.site{border-top:1px solid var(--rule);margin:var(--space-xxl) var(--space-margin) 0;padding:32px 0 48px;display:flex;justify-content:space-between;align-items:center;font:400 14px/1.4 var(--sans);color:var(--stone);gap:var(--space-md) var(--space-lg);flex-wrap:wrap}
footer.site .l{display:flex;align-items:center;gap:16px}
footer.site .l img{height:24px;width:auto;display:block}
footer.site .r{display:flex;align-items:center;gap:var(--space-lg);flex-wrap:wrap}
footer.site a{color:var(--stone);text-decoration:underline;text-underline-offset:3px}
footer.site a:hover{color:var(--ink)}

/* Homepage */
.hero{display:grid;grid-template-columns:1.15fr 1fr;column-gap:var(--space-gutter);padding:104px var(--space-margin) var(--space-xxl);align-items:start}
.hero .sym{height:40px;width:auto;display:block;margin-bottom:40px}
.hero h1{font-size:68px;line-height:1.04;letter-spacing:-.01em;margin-bottom:32px}
.hero .label{color:var(--green);font-size:13px}
.fee{background:var(--panel);border:1px solid var(--rule);border-top:1px solid var(--ink);padding:32px 40px 40px;margin-top:80px}
.fee .label{display:block;margin-bottom:24px}
.fee h2{font-size:var(--type-headline-lg-font-size);line-height:1.1;margin-bottom:20px}
.fee p{font-size:20px;line-height:1.5}
.cols{margin:0 var(--space-margin) 0;border-top:1px solid var(--ink);display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--space-gutter);padding-top:32px}
.cols.two{grid-template-columns:repeat(2,1fr)}
.cols h2,.cols h3{font-size:var(--type-headline-md-font-size);line-height:1.2;font-weight:400;margin-bottom:16px}
.cols p{font-size:18px;line-height:1.55}
.cols .label{display:block;margin-bottom:16px}
.ph{border:1px dashed var(--stone);padding:var(--space-lg)}
.ph .label{display:block;margin-bottom:12px}
.ph.work{margin:0 var(--space-margin) var(--space-xxl)}
.band{background:var(--panel);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:72px var(--space-margin);display:grid;grid-template-columns:1fr 1fr;column-gap:var(--space-gutter);margin-top:var(--space-xxl);align-items:start}
.band h2{font-size:var(--type-headline-lg-font-size);line-height:1.1;margin-bottom:20px}
.band p{font-size:18px;line-height:1.55}
.close{display:flex;justify-content:space-between;align-items:center;gap:var(--space-gutter);margin:var(--space-xxl) var(--space-margin) 0;border-top:1px solid var(--ink);padding-top:40px}
.close h2{font-size:var(--type-headline-lg-font-size);line-height:1.1}

/* Switches */
body.no-calculator .band{display:none}
body.no-workline .ph.work{display:none}

/* About */
.about-h{padding:136px var(--space-margin) 88px}
.about-h .sym{height:40px;width:auto;display:block;margin-bottom:48px}
.about-h h1{font-size:88px;line-height:1.02;letter-spacing:-.015em;max-width:1180px}

/* Booking */
.book{padding:96px var(--space-margin) 0}
.card{max-width:620px;border:1px solid var(--rule);background:var(--panel);padding:40px}
.card h1{font-size:40px;line-height:1.15;margin-bottom:28px}
.f{margin-bottom:20px}
.f label{display:block;font:500 14px/1.3 var(--sans);margin-bottom:6px}
.f input,.f select{display:block;width:100%;height:44px;border:1px solid var(--stone);background:var(--paper);color:var(--ink);font:400 16px/1.2 var(--sans);padding:0 12px;border-radius:0;appearance:none;-webkit-appearance:none}
.f select{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 20px) 19px,calc(100% - 15px) 19px;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
.f p{font:400 13px/1.4 var(--sans);color:var(--stone);margin-top:6px}
.note{border-top:1px solid var(--ink);padding-top:16px;margin:28px 0 20px;font:500 16px/1.4 var(--sans);color:var(--ink)}
.note[hidden]{display:none}
.btn[disabled]{background:var(--rule);color:var(--stone);cursor:not-allowed}
.btn[disabled]:hover{background:var(--rule)}

/* Placeholder pages */
.plain{padding:120px var(--space-margin) 0;max-width:calc(760px + 2 * var(--space-margin))}
.plain .label{display:block;margin-bottom:24px}
.plain h1{font-size:var(--type-headline-lg-font-size);line-height:1.1;margin-bottom:24px}
.plain p{font-size:20px;line-height:1.5}

@media (max-width:960px){
 header.site,.hero,.about-h,.book,.plain{padding-left:40px;padding-right:40px}
 .cols,.close,.ph.work,footer.site{margin-left:40px;margin-right:40px}
 .band{padding-left:40px;padding-right:40px}
 .hero{grid-template-columns:1fr;padding-top:72px}
 .hero h1{font-size:56px}
 .fee{margin-top:24px}
 .about-h h1{font-size:64px}
 .cols{column-gap:32px}
}
@media (max-width:760px){
 header.site{flex-wrap:wrap;padding:16px 20px;min-height:72px;gap:16px}
 header.site .brand img{height:16px}
 header.site .r{width:100%;justify-content:space-between;gap:16px;flex-wrap:wrap}
 header.site nav{gap:24px}
 header.site .btn2{padding:12px 16px;font-size:14px}
 .hero{padding:48px 20px 48px}
 .hero .sym{height:32px;margin-bottom:32px}
 .hero h1{font-size:40px}
 .fee{padding:24px 20px 28px}.fee h2{font-size:32px}.fee p{font-size:18px}
 .cols,.cols.two{margin:0 20px;grid-template-columns:1fr;row-gap:32px}
 .cols h2,.cols h3{font-size:26px}
 .ph.work{margin:0 20px 56px}
 .band{grid-template-columns:1fr;padding:48px 20px;row-gap:24px;margin-top:56px}.band h2{font-size:32px}
 .close{flex-direction:column;align-items:flex-start;margin:56px 20px 0;gap:24px}.close h2{font-size:32px}
 .about-h{padding:64px 20px 56px}.about-h h1{font-size:40px}.about-h .sym{height:32px;margin-bottom:32px}
 .book{padding:40px 20px 0}.card{padding:24px 20px}.card h1{font-size:32px}
 .plain{padding:56px 20px 0}.plain h1{font-size:32px}.plain p{font-size:18px}
 footer.site{margin:56px 20px 0;padding:24px 0 32px}
}

/* Booking: bot check and status line */
#turnstile-box{min-height:65px}

/* Legal pages (privacy, terms), rendered from the published markdown in legal/ */
.legal{padding:96px var(--space-margin) 0;max-width:calc(760px + 2 * var(--space-margin))}
.legal h1{font-size:var(--type-headline-lg-font-size);line-height:1.1;margin-bottom:24px}
.legal h2{font-size:var(--type-headline-md-font-size);line-height:1.25;font-weight:400;margin:48px 0 16px}
.legal p{font-size:18px;line-height:1.6;margin-bottom:16px}
.legal ul{margin:0 0 16px;padding-left:24px}
.legal li{font-size:18px;line-height:1.6;margin-bottom:8px}
.legal a{text-underline-offset:3px}
@media (max-width:960px){.legal{padding-left:40px;padding-right:40px}}
@media (max-width:760px){.legal{padding:48px 20px 0}.legal h1{font-size:32px}.legal h2{font-size:24px;margin-top:40px}.legal p,.legal li{font-size:17px}}