/* Shared stylesheet for every page on this site.
   Same origin, so it costs one cached request and no third-party connection.

   It is shared on purpose. The two offer pages, /teams and /ops, are separate
   arms of a pre-registered experiment: if their presentation drifts apart, a
   difference in response cannot be attributed to the audience rather than to
   the design. Four hand-maintained inline copies is how that drift happens.
   One file cannot drift from itself. */

:root{
  /* Warm paper rather than cold white, and a navy that reads as considered
     rather than as the default bootstrap blue. The amber is used sparingly:
     section markers and the price rule only. Two accents is a scheme; three
     is a mess. */
  --ink:#1a1d21;
  --muted:#5c636d;
  --rule:#e4dfd6;
  --bg:#faf8f4;
  --panel:#fff;
  --accent:#14476b;
  --accent-deep:#0e3450;
  --accent-soft:#eaf1f7;
  --warm:#b4531d;
  --warm-soft:#fbf2ea;

  /* System fonts for everything a visitor actually reads. A serif for headings
     and a sans for body is what makes a page read as designed rather than as a
     default, and it costs no download at all.

     The one exception is the cobuild wordmark, which loads a self-hosted 2KB
     subset. Same origin, so it is still no third-party request; see the
     wordmark section below and fonts/README.md. */
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}

body{
  margin:0;
  /* A warm wash behind the top of the page, so the masthead and headline sit
     on something rather than on flat paper. A gradient rather than an image:
     no file, no request, and it cannot pixelate. */
  background:
    radial-gradient(1200px 380px at 50% -170px, #f2ebe0 0%, rgba(242,235,224,0) 72%),
    var(--bg);
  background-repeat:no-repeat;
  background-attachment:fixed;
  color:var(--ink);
  font:17px/1.65 var(--sans);
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:43rem;margin:0 auto;padding:0 1.25rem 4rem}

/* ---- Masthead ---------------------------------------------------------- */

.mast{
  display:flex;align-items:baseline;gap:.6rem;
  max-width:43rem;margin:0 auto;
  padding:1.4rem 1.25rem 1.1rem;
  border-bottom:1px solid var(--rule);
  margin-bottom:2.5rem;
  font-size:.92rem;letter-spacing:.02em;
}
.mast .name{font-family:var(--serif);font-size:1.05rem;font-weight:600;color:var(--ink);text-decoration:none}
.mast .name:hover{color:var(--accent)}
.mast .tag{color:var(--muted)}

/* The mark is inline SVG rather than an <img>: no second request, nothing to
   host, and it stays sharp on any screen. Its colours live here rather than in
   the markup so the six copies of the masthead cannot drift apart. */
.mast .mark{flex:0 0 auto;align-self:center;margin-right:.15rem}
.mast .mark path{fill:none;stroke:var(--accent);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.mast .mark rect{fill:var(--warm)}

/* ---- Type -------------------------------------------------------------- */

h1{
  font-family:var(--serif);
  font-size:2.35rem;line-height:1.15;font-weight:600;
  margin:.25rem 0 .9rem;letter-spacing:-.012em;
  text-wrap:balance;
}

h2.sub{
  font-size:1.18rem;font-weight:400;color:var(--muted);
  margin:0 0 1.75rem;line-height:1.5;
}

/* Section headings carry a short amber rule. It costs nothing, and it is the
   difference between a wall of text and a page with visible structure. */
h3{
  font-family:var(--serif);
  font-size:1.4rem;font-weight:600;line-height:1.25;
  margin:3.25rem 0 .9rem;letter-spacing:-.008em;
  padding-top:1.15rem;position:relative;
}
h3::before{
  content:"";position:absolute;top:0;left:0;
  width:2.25rem;height:3px;border-radius:2px;background:var(--warm);
}

h2{font-family:var(--serif);font-size:1.5rem;font-weight:600;margin:2.5rem 0 .8rem;line-height:1.25}
h4{font-size:1.05rem;margin:1.75rem 0 .5rem}

p{margin:0 0 1.1rem}
ul{margin:0 0 1.1rem;padding-left:1.2rem}
li{margin-bottom:.7rem}
li::marker{color:var(--muted)}
strong{font-weight:600}
a{color:var(--accent);text-underline-offset:2px}
a:hover{color:var(--warm)}
.lede{font-size:1.08rem}

/* ---- Calls to action --------------------------------------------------- */

.cta{
  display:inline-block;background:var(--accent);color:#fff;text-decoration:none;
  border-radius:7px;padding:.85rem 1.6rem;font-weight:600;
  margin:.25rem 0 .5rem;
  box-shadow:0 1px 2px rgba(14,52,80,.22),0 3px 10px rgba(14,52,80,.14);
  transition:background-color .14s ease,transform .14s ease,box-shadow .14s ease;
}
.cta:hover{
  background:var(--accent-deep);color:#fff;
  transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(14,52,80,.24),0 6px 16px rgba(14,52,80,.18);
}
.cta:active{transform:translateY(0)}
.subcta{font-size:.95rem;color:var(--muted);margin:0 0 1rem}

/* ---- The cobuild wordmark ---------------------------------------------- */
/*
   Every rendered "CoBuild" on the site is this snippet, never plain text:

     <span class="cobuild"><span class="co">Co</span>Build</span>

   The two halves carry the two colours already in the logo mark: the deep blue
   of the brackets and the rust of the square sitting inside them. The mark says
   my structure around your thing; the word says the same thing in the same two
   colours, so the split is the argument rather than decoration. "Co" also takes
   the heavier weight, because "Co" is the whole proposition and "Build" is the
   ordinary part.

   TITLE CASE, ALWAYS, including where the word is used as an ordinary noun in a
   sentence. One casing everywhere beats a defensible split between the brand and
   the common noun, because a reader meeting both forms reads it as a mistake.
   The capital B also carries the compound into plain text — emails, invoices,
   contracts — where this markup cannot follow.

   Space Grotesk, self-hosted, subsetted to the letters of the word and nothing
   else — 2KB. Its squared-off bowls echo the rounded square in the mark, which
   is why it is this face and not a warmer one. See fonts/README.md; note the
   subset has no lowercase "b", so a lowercase "cobuild" inside this class would
   render that one letter in the fallback face.

   It stays ONE selectable word. Two nested spans render as contiguous text, so
   a screen reader says "CoBuild" and a copy-paste yields "CoBuild".
*/

@font-face{
  font-family:"Space Grotesk";
  src:url("/fonts/space-grotesk-cobuild.woff2") format("woff2");
  font-weight:300 700;
  font-style:normal;
  /* swap, not block: the wordmark is never the only thing on a page, and a
     2KB file that somehow stalls must not hold up the copy around it. */
  font-display:swap;
}

.cobuild{
  font-family:"Space Grotesk",var(--sans);
  font-weight:500;
  letter-spacing:-.018em;
  color:var(--warm);
  white-space:nowrap;
}
.cobuild .co{font-weight:700;color:var(--accent)}

/* Context overrides. Each of these beats a rule that would otherwise flatten
   the wordmark back to one colour, and they live after those rules on purpose. */

/* The masthead sets .name to --ink at (0,2,0), which would win against
   .cobuild at (0,1,0) and leave "build" grey whilst "co" stayed blue. */
.mast .name .cobuild{color:var(--warm)}
.mast .name .cobuild .co{color:var(--accent)}
.mast .name:hover .cobuild{color:var(--warm)}

/* On the solid blue call to action the ink colours are unreadable, so the same
   two-tone idea is expressed in white against the pale accent tint. */
.cta .cobuild{color:#fff}
.cta .cobuild .co{color:var(--accent-soft)}

/* ---- Blocks ------------------------------------------------------------ */

.callout{
  background:var(--accent-soft);border-left:4px solid var(--accent);
  padding:1.1rem 1.2rem;margin:1.6rem 0;border-radius:0 5px 5px 0;
}
.callout p:last-child{margin-bottom:0}

.price{
  font-size:1.05rem;background:var(--warm-soft);
  border:1px solid #ecdcc9;border-left:4px solid var(--warm);
  padding:1.15rem 1.25rem;margin:1.75rem 0;border-radius:0 6px 6px 0;
}
.price p:last-child{margin-bottom:0}
.price strong{color:#7d3a14}

/* A week-by-week section reads as a wall of bold-led paragraphs. Wrapping it
   in .steps turns the same markup into a timeline: one connector line, a dot
   per step, and the bold lead promoted to a heading. No copy changes. */
.steps{
  margin:1.6rem 0;padding-left:1.75rem;
  border-left:2px solid var(--rule);
}
.steps p{position:relative;margin-bottom:1.35rem}
.steps p:last-child{margin-bottom:0}
.steps p::before{
  content:"";position:absolute;
  left:calc(-1.75rem - 7px);top:.5em;
  width:11px;height:11px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 4px var(--bg);
}
.steps p strong{
  display:block;font-family:var(--serif);
  font-size:1.08rem;font-weight:600;color:var(--accent-deep);
  margin-bottom:.15rem;letter-spacing:-.005em;
}

/* The hardest thing for the copy to convey is that the days are deliberately
   spread out, and that the week between them is the mechanism rather than the
   packaging. Drawn from real elements rather than an image file: it scales, it
   prints, it needs no request, and the text stays selectable and translatable.
   The two arms differ only in how many weeks they show, which is the offer and
   not the design. */
.rhythm{margin:1.6rem 0 2.25rem;padding:0}
.rhythm .track{display:flex;gap:.3rem;align-items:stretch}
.rhythm .wk{flex:1 1 0;min-width:0}
.rhythm .bar{
  display:flex;height:2.75rem;overflow:hidden;
  border:1px solid var(--rule);border-radius:4px;background:var(--panel);
}
.rhythm .day{flex:0 0 26%;background:var(--accent)}
.rhythm .own{flex:1 1 auto;background:repeating-linear-gradient(135deg,#fff,#fff 5px,var(--accent-soft) 5px,var(--accent-soft) 10px)}
.rhythm .n{display:block;text-align:center;font-size:.82rem;color:var(--muted);margin-top:.4rem}
.rhythm .key{display:flex;flex-wrap:wrap;gap:.35rem 1.2rem;margin:.95rem 0 0;font-size:.88rem;color:var(--muted)}
.rhythm .key span{display:flex;align-items:center;gap:.45rem}
.rhythm .key i{width:.85rem;height:.85rem;flex:0 0 auto;border-radius:2px;border:1px solid var(--rule)}
.rhythm .key .k1{background:var(--accent);border-color:var(--accent)}
.rhythm .key .k2{background:repeating-linear-gradient(135deg,#fff,#fff 5px,var(--accent-soft) 5px,var(--accent-soft) 10px)}
.rhythm figcaption{font-size:.95rem;color:var(--muted);line-height:1.55;margin:.9rem 0 0}

hr{border:0;border-top:1px solid var(--rule);margin:3.25rem 0}

/* ---- Forms ------------------------------------------------------------- */

form{
  background:var(--panel);border:1px solid var(--rule);border-radius:9px;
  padding:1.6rem 1.35rem;margin-top:1rem;
  box-shadow:0 1px 2px rgba(26,29,33,.04),0 8px 24px rgba(26,29,33,.05);
}
fieldset{border:0;padding:0;margin:0 0 1.5rem}
legend{font-weight:600;padding:0;margin-bottom:.4rem;font-size:1.02rem}
.hint{color:var(--muted);font-size:.92rem;margin:.15rem 0 .7rem;line-height:1.5}

input[type=text],input[type=email],input[type=url],select,textarea{
  width:100%;padding:.65rem .75rem;border:1px solid #cbd2da;border-radius:6px;
  font:inherit;background:#fff;color:inherit;
  transition:border-color .12s ease,box-shadow .12s ease;
}
input:focus,select:focus,textarea:focus{
  outline:2px solid var(--accent);outline-offset:1px;
  border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}
textarea{min-height:4.5rem;resize:vertical}

.consent{display:flex;gap:.6rem;align-items:flex-start;margin:0 0 1.25rem;font-size:.97rem}
.consent input{margin-top:.35rem;flex:0 0 auto}

button{
  background:var(--accent);color:#fff;border:0;border-radius:7px;
  padding:.85rem 1.7rem;font:600 1.05rem/1 var(--sans);cursor:pointer;
  box-shadow:0 1px 2px rgba(14,52,80,.22),0 3px 10px rgba(14,52,80,.14);
  transition:background-color .14s ease,transform .14s ease;
}
button:hover{background:var(--accent-deep);transform:translateY(-1px)}
button:active{transform:translateY(0)}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- Tooltip ----------------------------------------------------------- */

/* No JavaScript, and reachable without a mouse: a bare title= attribute never
   appears on a touch device, so this fires on :focus as well as :hover and the
   span is focusable. */
.tip{position:relative;border-bottom:1px dotted var(--muted);cursor:help}
.tip:focus{outline:2px solid var(--accent);outline-offset:2px}
.tip::after{
  content:attr(data-tip);
  position:absolute;left:0;bottom:135%;width:max-content;max-width:17rem;
  background:var(--ink);color:#fff;font-size:.85rem;line-height:1.45;
  font-style:normal;font-weight:400;
  padding:.55rem .7rem;border-radius:6px;
  box-shadow:0 4px 14px rgba(26,29,33,.22);
  opacity:0;visibility:hidden;transition:opacity .12s ease;
  z-index:2;pointer-events:none;
}
.tip:hover::after,.tip:focus::after{opacity:1;visibility:visible}

/* ---- Small print ------------------------------------------------------- */

.under{font-size:.92rem;color:var(--muted);margin:.7rem 0 0;font-style:italic}

.privacy{
  font-size:.9rem;color:var(--muted);line-height:1.6;margin-top:2.5rem;
  border-top:1px solid var(--rule);padding-top:1.5rem;
  scroll-margin-top:1.5rem;transition:background-color .25s ease;
}
/* The privacy notice usually sits on screen already, only a few lines below
   the link that points at it, so following #privacy scrolls by almost nothing
   and reads as a dead link. Highlighting the addressed block makes the click
   do something visible without any JavaScript. */
.privacy:target{
  background:var(--accent-soft);
  border-left:4px solid var(--accent);
  border-top-color:var(--accent);
  padding-left:1rem;border-radius:0 5px 5px 0;
}

footer{
  font-size:.87rem;color:var(--muted);line-height:1.6;
  margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--rule);
}

/* ---- Narrow screens ---------------------------------------------------- */

@media (max-width:520px){
  body{font-size:16px}
  h1{font-size:1.75rem}
  h3{font-size:1.25rem;margin-top:2.75rem}
  .wrap{padding-bottom:3rem}
  .mast{margin-bottom:2rem}
  .tip::after{left:auto;right:0;max-width:13rem}
  form{padding:1.25rem 1rem}
}