/* Ozvior — deferred stylesheet. Everything below the first screen. */

/* ------------------------------------------------------------- sections */

/* Space separates sections; a rule is only drawn where the eye genuinely
   needs help. Removing most of them is the single biggest change here. */
.section{padding-block:var(--pad-section)}
.section--ruled{border-top:1px solid var(--line)}
.section--flush{border-top:0}
.section--sunk{background:var(--paper-sunk);border-top:0}
.section--ink{background:var(--ink);color:var(--on-ink);border-top:0}
.section--ink h1,.section--ink h2,.section--ink h3{color:var(--on-ink)}

/* The reference's 12-column grid. It collapses to one column below 64rem,
   which is the mobile default rather than an afterthought. */
.grid12{display:grid;gap:clamp(1.75rem,3.5vw,2.5rem)}
@media (min-width:64rem){
  .grid12{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:1.5rem}
  .g-left{grid-column:span 5}
  .g-right{grid-column:7 / span 6}
}

/* ------------------------------------------------------------------ figure */

/* The abstract marks are decoration that carries an argument, so they sit
   quietly: no border, no caption, hidden from assistive technology, and gone
   entirely on small screens where they would only cost bandwidth. */
.figure{display:none}
@media (min-width:64rem){
  .figure{display:block;align-self:center}
  .figure img{width:100%;max-width:26rem;margin-inline:auto;opacity:.92}
}

.spread-figure{display:grid;gap:clamp(2rem,5vw,4rem)}
@media (min-width:64rem){
  .spread-figure{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center}
}

.stack{display:flex;flex-direction:column;gap:clamp(1.25rem,2.5vw,1.625rem)}
.stack--lg{gap:clamp(2rem,4.4vw,4rem)}

/* --------------------------------------------------------------- prose */

.body-lg{font-size:var(--t-body-lg);line-height:1.68;color:var(--ink-soft)}
.body-lg a,.body a{text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-size:100% 1px;background-repeat:no-repeat;background-position:0 1.15em;transition:background-size .25s ease}
.body-lg a:hover,.body a:hover{background-size:0% 1px}
.body{font-size:var(--t-body);line-height:1.6;color:var(--ink-soft)}
.body-em{font-size:var(--t-body-lg);line-height:1.6;font-style:italic;color:var(--ink)}
.mono{font-family:var(--mono);font-size:var(--t-mono);color:var(--ink-body);line-height:1.6}
.section--ink .body-lg,.section--ink .body{color:var(--on-ink-soft)}
.section--ink .mono{color:var(--on-ink-mute)}

.h2{font-size:var(--t-h2);font-weight:400;letter-spacing:-.024em}
.h2-sm{font-size:var(--t-h2-sm)}
.measure{max-width:38rem}

/* The page head reads as one composition rather than a stack: on a wide
   screen the title takes the left columns and the lede sits beside it, so the
   right half is not left empty. Below 64rem it collapses to the usual stack. */
.page-head{padding-block:clamp(3rem,6vw,5.5rem) clamp(2rem,4vw,3.25rem);display:grid;gap:clamp(1.25rem,2.4vw,1.75rem)}
.page-head__title{font-size:clamp(2.25rem,1.3rem + 4.4vw,4.75rem);font-weight:400;line-height:1.03;letter-spacing:-.028em;max-width:22ch}

@media (min-width:64rem){
  .page-head{
    grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    column-gap:clamp(2.5rem,5vw,4.5rem);
    align-items:start;
  }
  .page-head .kicker{grid-column:1 / -1}
  .page-head__title{grid-column:1;margin-bottom:0}
  /* Top-aligned, then nudged so the two blocks agree optically rather than
     by box. A 76px serif carries far more space between its line-box top and
     the top of its capitals than a 20px one, so aligning the boxes leaves the
     paragraph visibly high. The offset is measured, not guessed: see the
     comment on --lede-optical-top. */
  /* Measured, not guessed: with the title at 76px/1.03 and the lede at
     22px/1.68, the gap between each block's box top and the top of its
     capitals differs by 1.02px - the lede's generous leading already supplies
     almost all of the compensation. */
  .page-head .lede{grid-column:2;padding-top:1px}
}

/* ----------------------------------------------------- talent categories */

.talent-grid{display:grid;gap:clamp(2rem,3.5vw,2.5rem)}
@media (min-width:40rem){.talent-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:64rem){.talent-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.talent-col{display:flex;flex-direction:column;gap:clamp(.9rem,1.5vw,1.375rem);border-top:1px solid var(--on-ink-line);padding-top:clamp(1.25rem,2vw,1.75rem)}
.talent-col__name{font-size:var(--t-h3);font-weight:400;letter-spacing:-.018em;line-height:1.15}
.talent-col__list{font-family:var(--mono);font-size:var(--t-mono);line-height:1.8;color:var(--on-ink-soft)}

/* ---------------------------------------------------------- what we do */

.offers{display:flex;flex-direction:column}
.offer{padding-block:clamp(2.25rem,4vw,3.25rem);border-top:1px solid var(--line-soft);display:grid;gap:clamp(.75rem,2vw,1.5rem)}
.offer:last-child{border-bottom:1px solid var(--line-soft)}
.offer__index{font-family:var(--mono);font-size:var(--t-mono);color:var(--accent)}
.offer__label{font-family:var(--mono);font-size:var(--t-mono-sm);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}
.offer__title{font-size:var(--t-h4);line-height:1.2;font-weight:500;margin-top:.625rem}
.offer__body{font-size:var(--t-body);line-height:1.6;color:var(--ink-soft)}

@media (min-width:64rem){
  .offer{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:1.5rem;row-gap:0}
  .offer__index{grid-column:span 2;padding-top:.625rem}
  .offer__head{grid-column:span 4}
  .offer__body{grid-column:8 / span 5}
}

/* ------------------------------------------------------------- closing */

/* The closing CTA sits on the same 12-column grid as every other split
   section, so the heading and the actions land on the same lines the rest of
   the page already uses. The generous bottom padding is what separates it
   from the footer: both are dark, so the gap has to do the work a colour
   change would otherwise do. */
.closing{
  background:var(--ink);
  color:var(--on-ink);
  padding-top:clamp(4.5rem,9vw,8rem);
  padding-bottom:clamp(5rem,10vw,9rem);
}
.closing__title{font-size:clamp(2.125rem,1.2rem + 4vw,4.5rem);font-weight:500;line-height:1.05;letter-spacing:-.022em;color:var(--on-ink)}
.closing__sub{font-family:var(--mono);font-size:clamp(.9375rem,.9rem + .2vw,1.0625rem);line-height:1.7;color:var(--on-ink-mute);max-width:38ch}

.closing__actions{display:flex;flex-wrap:wrap;gap:1rem}
@media (max-width:26rem){.closing__actions .btn{width:100%}}
@media (min-width:64rem){
  /* Actions align to the right edge of their column and to the top of the
     heading. The nudge is measured, not guessed - see the comment in the
     page-head rules for the same treatment. */
  .closing__actions{justify-content:flex-end;align-content:flex-start;padding-top:.65rem}
}

/* -------------------------------------------------------------- footer */

/* Quieter than the CTA above it: lighter type, more muted colour, and a rule
   that marks the boundary without drawing attention to itself. */
.colophon{
  background:var(--ink);
  color:var(--on-ink-mute);
  border-top:1px solid var(--on-ink-line);
  padding-block:clamp(2.5rem,4.5vw,3.5rem) clamp(1.5rem,2.5vw,2rem);
  font-family:var(--mono);
  font-size:var(--t-mono-sm);
}

.colophon__top{display:grid;gap:clamp(1.75rem,3.5vw,2.5rem)}
@media (min-width:48rem){
  .colophon__top{grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:clamp(2rem,5vw,5rem)}
}

.colophon__brand{display:flex;flex-direction:column;gap:.9rem}
.colophon .wordmark{font-size:1.125rem;color:var(--on-ink)}
.colophon__thesis{font-family:var(--serif);font-size:var(--t-body);line-height:1.45;color:var(--on-ink-soft);max-width:26ch;margin:0}

/* ------------------------------------------------ contact disclosure */

.contact{justify-self:start}
@media (min-width:48rem){.contact{justify-self:end;text-align:right}}

.contact__toggle{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  cursor:pointer;
  font-family:var(--mono);
  font-size:var(--t-mono-sm);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--on-ink-mute);
  padding-block:.35rem;
  list-style:none;
  transition:color .18s ease;
}
.contact__toggle::-webkit-details-marker{display:none}

/* On touch the label needs a 44px target, which small type does not give on
   its own. The height is padding around the same text, so nothing about the
   label's weight changes - it just becomes comfortable to tap. */
@media (pointer:coarse), (max-width:48rem){
  .contact__toggle{min-height:44px;padding-block:.7rem}
}
.contact__toggle:hover{color:var(--on-ink)}
.contact__toggle:focus-visible{outline:2px solid var(--on-ink-border);outline-offset:4px}

/* A hairline plus that becomes a minus. Two rules rather than a glyph, so it
   stays optically centred at any size. */
.contact__toggle::after{
  content:"";
  position:relative;
  width:9px;
  height:9px;
  flex:none;
  background:
    linear-gradient(currentColor,currentColor) center/9px 1px no-repeat,
    linear-gradient(currentColor,currentColor) center/1px 9px no-repeat;
  transition:transform .2s ease;
}
.contact[open] .contact__toggle::after{
  background:linear-gradient(currentColor,currentColor) center/9px 1px no-repeat;
  transform:rotate(180deg);
}

.contact__panel{
  display:flex;
  flex-direction:column;
  gap:.55rem;
  padding-top:.9rem;
  /* details toggles display, so a transition would never run - an animation
     on appearance does. */
  animation:contactIn .2s ease both;
}
@media (prefers-reduced-motion: reduce){.contact__panel{animation:none}}
@keyframes contactIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}

.contact__email{
  font-family:var(--mono);
  font-size:var(--t-mono-sm);
  color:var(--on-ink);
  text-decoration:none;
  border-bottom:1px solid var(--on-ink-line);
  padding-bottom:1px;
  align-self:flex-start;
}
@media (min-width:48rem){.contact__email{align-self:flex-end}}
.contact__email:hover{color:var(--on-ink);border-bottom-color:var(--on-ink)}

/* <address> is the right element; its italic default is not. */
.contact__address{
  font-style:normal;
  font-family:var(--mono);
  font-size:var(--t-mono-sm);
  line-height:1.85;
  color:var(--on-ink-mute);
  margin:0;
}

.colophon__bottom{
  margin-top:clamp(2rem,4vw,3rem);
  padding-top:1.1rem;
  border-top:1px solid var(--on-ink-line-soft);
  display:flex;
  flex-wrap:wrap;
  gap:.75rem 2rem;
  justify-content:space-between;
  color:var(--on-ink-mute);
}

/* ------------------------------------------------------- inner pages */

/* Numbered editorial list: The Ozvior Standard. */
.dimensions{list-style:none;margin:0;padding:0;counter-reset:dim}
.dimensions > li{counter-increment:dim;padding-block:clamp(2.25rem,3.6vw,3rem);border-top:1px solid var(--line-soft);display:grid;gap:clamp(.75rem,1.5vw,1rem)}
.dimensions > li:last-child{border-bottom:1px solid var(--line-soft)}
.dimensions > li::before{content:counter(dim,decimal-leading-zero);font-family:var(--mono);font-size:var(--t-mono);color:var(--accent)}
.dimension__term{font-size:var(--t-h4);line-height:1.2;font-weight:500}
.dimension__question{font-family:var(--mono);font-size:var(--t-mono);color:var(--ink-mute);margin-top:.4rem}
.dimension__body{font-size:var(--t-body);line-height:1.6;color:var(--ink-soft)}
@media (min-width:64rem){
  .dimensions > li{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:1.5rem;row-gap:0}
  .dimensions > li::before{grid-column:span 2;padding-top:.5rem}
  .dimension__head{grid-column:span 4}
  .dimension__body{grid-column:8 / span 5}
}

/* Process steps. */
.steps{list-style:none;margin:0;padding:0}
.steps > li{padding-block:clamp(2.25rem,3.6vw,3rem);border-top:1px solid var(--line-soft);display:grid;gap:clamp(.75rem,1.5vw,1rem)}
.steps > li:last-child{border-bottom:1px solid var(--line-soft)}
.step__index{font-family:var(--mono);font-size:var(--t-mono);color:var(--accent)}
.step__title{font-size:var(--t-h4);line-height:1.2;font-weight:500}
.step__lede{font-family:var(--mono);font-size:var(--t-mono-sm);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);margin-top:.4rem}
.step__body{font-size:var(--t-body);line-height:1.6;color:var(--ink-soft)}
@media (min-width:64rem){
  .steps > li{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:1.5rem;row-gap:0}
  .step__index{grid-column:span 2;padding-top:.5rem}
  .step__head{grid-column:span 4}
  .step__body{grid-column:8 / span 5}
}

/* Fit / anti-fit. */
.fit{display:grid;gap:clamp(2rem,4vw,3.5rem)}
@media (min-width:48rem){.fit{grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem)}}
.fit__title{font-family:var(--mono);font-size:var(--t-mono-sm);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);padding-bottom:1rem;border-bottom:1px solid var(--line)}
.fit__list{list-style:none;margin:1.25rem 0 0;padding:0}
.fit__list li{position:relative;padding-left:1.75rem;padding-block:.6rem;color:var(--ink-soft);line-height:1.55;font-size:var(--t-body)}
.fit__list li::before{content:"";position:absolute;left:0;top:1.2rem;width:.75rem;height:1px;background:var(--ink-mute)}

/* Cards. */
.cards{display:grid;gap:clamp(1.5rem,2.5vw,2rem)}
@media (min-width:48rem){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card{padding:clamp(1.5rem,2.5vw,2rem);border:1px solid var(--line)}
.section--sunk .card{background:var(--paper)}
.card__term{font-size:var(--t-h4);line-height:1.2;font-weight:500}
.card__question{font-family:var(--mono);font-size:var(--t-mono-sm);color:var(--accent);margin-top:.5rem}
.card__body{margin-top:.9rem;color:var(--ink-soft);font-size:var(--t-body);line-height:1.6}

/* A pulled statement, set large. */
.pull{font-size:var(--t-h2-sm);line-height:1.15;letter-spacing:-.015em;max-width:24ch;font-weight:500}

/* On a dark section the rules and text have to flip. */
.section--ink .bar-list li{color:var(--on-ink-soft);border-top-color:var(--on-ink-line)}
.section--ink .bar-list li:last-child{border-bottom-color:var(--on-ink-line)}

.bar-list{list-style:none;margin:0;padding:0}
.bar-list li{padding-block:clamp(.9rem,1.6vw,1.25rem);border-top:1px solid var(--line-soft);color:var(--ink-soft);line-height:1.6;font-size:var(--t-body);max-width:52ch}
.bar-list li:last-child{border-bottom:1px solid var(--line-soft)}

.expect{list-style:none;margin:0;padding:0}
.expect li{position:relative;padding-left:1.75rem;padding-block:.6rem;color:var(--ink-soft);font-family:var(--mono);font-size:var(--t-mono);line-height:1.6}
.expect li::before{content:"";position:absolute;left:0;top:1.3rem;width:.75rem;height:1px;background:var(--accent)}

/* ----------------------------------------------------------------- form */

.form{margin-top:clamp(2rem,4vw,2.75rem)}
.field-grid{display:grid;gap:clamp(1.25rem,2.2vw,1.625rem)}
@media (min-width:48rem){.field-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.field--wide{grid-column:1/-1}

.field label{display:block;font-family:var(--mono);font-size:var(--t-mono);font-weight:500;color:var(--ink);margin-bottom:.55rem}
.field .req{color:var(--accent)}
.field__help{display:block;font-family:var(--mono);font-size:var(--t-mono-sm);color:var(--ink-mute);margin-top:.45rem;line-height:1.5}
.field__error{display:block;font-family:var(--mono);font-size:var(--t-mono-sm);color:#9B2C1C;margin-top:.45rem;font-weight:500}

.field input,.field select,.field textarea{
  width:100%;
  font-family:var(--serif);
  font-size:var(--t-body);
  color:var(--ink);
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:0;
  padding:.85rem 1rem;
  line-height:1.5;
  min-height:3.25rem;
  transition:border-color .18s ease;
}
.section--sunk .field input,.section--sunk .field select,.section--sunk .field textarea{background:var(--paper)}
.field textarea{resize:vertical;min-height:7.5rem}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 1.15rem) 1.45rem,calc(100% - .85rem) 1.45rem;background-size:.3rem .3rem,.3rem .3rem;background-repeat:no-repeat;padding-right:2.5rem}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field--invalid input,.field--invalid select,.field--invalid textarea{border-color:#9B2C1C}

.honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formnote{margin-top:1.5rem;font-family:var(--mono);font-size:var(--t-mono-sm);color:var(--ink-mute);max-width:46ch;line-height:1.6}
.formalert{margin-bottom:2rem;padding:1rem 1.25rem;border-left:2px solid #9B2C1C;background:rgba(155,44,28,.07);color:var(--ink);font-size:var(--t-body)}
.form__submit{margin-top:clamp(2rem,3.5vw,2.5rem);display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem}
@media (max-width:26rem){.form__submit .btn{width:100%}}

/* ------------------------------------------------ mobile navigation */

.mobilenav{display:none;border-top:1px solid var(--line);background:var(--paper)}
.mobilenav[data-open="true"]{display:block}
@media (min-width:64rem){.mobilenav{display:none !important}}
.mobilenav ul{list-style:none;margin:0;padding:1rem 0 1.25rem}
/* Scoped to the list: an unscoped `.mobilenav a` also matched the CTA button
   and, being more specific than .btn--fill, repainted its label in ink. */
.mobilenav ul a{display:block;padding:.9rem 0;font-size:var(--t-h4);color:var(--ink);border-bottom:1px solid var(--line)}
.mobilenav ul a:hover{color:var(--accent)}
.mobilenav .btn{margin:1.25rem 0 1.75rem;width:100%}

/* ---------------------------------------------------------- reveal */

@media (prefers-reduced-motion: no-preference){
  .js .reveal{opacity:0;transform:translateY(10px);transition:opacity .6s cubic-bezier(.2,.6,.2,1),transform .6s cubic-bezier(.2,.6,.2,1)}
  .js .reveal.is-in{opacity:1;transform:none}
}

@media print{
  .masthead,.mobilenav,.navtoggle,.closing__actions{display:none !important}
  body{background:#fff;color:#000}
  .section--ink,.closing{background:#fff;color:#000}
}