/* ==========================================================
   Coba brand pass. Loaded last on every page, after that page's
   own styles, so it overrides without editing the page sources.
     1. type ratios
     2. the four blues, replacing the sand and moss accents
     3. Hanken Grotesk
     4. quiet fields, lighter display weight, depth in the object
   Nothing structural. No section moved, no markup changed.
   ========================================================== */

/* ---------- 1. TYPE RATIOS ----------------------------------
   Sizes are left alone. Each one is fitted to its own line, and
   the hero sets three non-breaking lines, so resizing it overflows.
   What is fixed is the part that was never deliberate: line heights
   that let descenders hit the caps below, and two headlines of the
   same size tracked differently from each other.                 */
:root{ --t-tight:-.035em; }

.colossal, .colossal.rv, .release .colossal, .stop .colossal, .mbig,
#table .it .serif-name{
  line-height:.95!important;
  letter-spacing:var(--t-tight)!important;
}
.huge, .seq-step .huge, .mA .huge, .mB .huge, #join .huge, .s2 .huge,
.pline, .pwrap:has(.psequence) .pline{
  line-height:.97!important;
  letter-spacing:-.032em!important;
}
.mid, .tcap-n, .menu-list .t, .talk h2{
  line-height:1.04!important; letter-spacing:-.026em!important;
}

/* a plain reading voice. The pages had none, only italic serif. */
.note, .why-p, .copy, .seq-sub, .mline, .bur-fact, .v, .ch span{
  font-style:normal!important; font-weight:400!important;
  font-size:clamp(16px,4.2vw,18px)!important;
  line-height:1.55!important;
  letter-spacing:0!important;
  color:#3E4147!important;
}
.m-black .note, .m-graphite .note, .m-black .copy{ color:rgba(243,241,236,.76)!important }

/* the serif stays, italic, but only as the aside */
.ann, .q, .tcap-s, .bcap-s, .heroAsk, .talk-done, .kd{
  font-family:'Newsreader',Georgia,serif!important;
  font-style:italic!important; font-weight:400!important;
  font-size:clamp(17px,4.5vw,20px)!important;
  line-height:1.42!important;
}

/* one label treatment instead of four */
.micro, .label, .mlabel, .ni-t, .foot-legal, .shot-n, .tobj span{
  font-size:11.5px!important; letter-spacing:.15em!important;
  line-height:1.7!important;
}

/* ---------- 2. THE FOUR BLUES ------------------------------
   Every accent across the three pages was sand, brown or moss
   (#8E5C24, #C79A55, #7FA292, #5B7A6C, #2F4A40), and the variable
   named --blue was #8C8F93, a gray. None of the brand palette
   appeared anywhere.                                          */
:root{
  --blue:#085CF0!important;
  --c-navy:#050A34; --c-deep:#092576; --c-bright:#085CF0; --c-frost:#AFE9FD;
}
.pbg-light{ background:linear-gradient(180deg,#E3EAF6 0%,var(--paper) 70%)!important }
.mbg-cool{ background:linear-gradient(180deg,rgba(230,237,247,0) 0%,rgba(230,237,247,0) 50%,#E9F1F8 100%)!important }
.mA2, .mline, .why-p+.why-p, .ll-h .l2{ color:var(--c-deep)!important }
.menu-list a.here .t::after, .talk-topics button::after{ background:var(--c-frost)!important }
.menu-list a:hover .t, .menu-list a:focus-visible .t, .menu-sec a:hover{ color:var(--c-frost)!important }
.talk-err, .talk label span.talk-err{ color:var(--c-bright)!important }
.talk .bad input, .talk .bad textarea{ border-bottom-color:var(--c-bright)!important }
.mglint{
  background:radial-gradient(closest-side,rgba(226,245,255,.92),
    rgba(8,92,240,.38) 45%,rgba(8,92,240,0) 100%)!important;
}
.m-silver{
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,rgba(5,10,52,.03) 1px 2px,rgba(0,0,0,0) 2px 4px),
    linear-gradient(168deg,#CCD6E4 0%,#B6C3D6 34%,#9EADC4 68%,#B2C0D2 100%)!important;
}
.arrow{ transition:gap .4s cubic-bezier(.22,.61,.36,1),color .3s ease }
.m-black .arrow:hover, .m-graphite .arrow:hover{ color:var(--c-frost)!important }
/* the thin measuring lines are the one place the bright blue lands */
.measure .ln, .measure .ln::before, .measure .ln::after, .cutline{
  background:#085CF0!important; opacity:.5
}
/* the loop diagram on In the Lab was moss green */
.loop-svg .ring-on{ stroke:#085CF0!important }
.loop-svg .dot{ fill:#085CF0!important }
.loop-svg .ln.on circle{ fill:#085CF0!important; stroke:#085CF0!important }
.loop-svg .ln.on text{ fill:#092576!important }

/* ---------- 3. HANKEN GROTESK ------------------------------- */
.colossal, .huge, .mid, .pline, .mbig, .menu-list .t, .talk h2, .tcap-n,
.arrow, .micro, .label, .mlabel, .note, .why-p, .copy, .seq-sub, .mline,
.foot-nav a, .menu-sec a, .kl, .shot-n, .tobj span, .foot-legal,
.v, .k, .ch b, .ch span, body, .send, .talk-topics button, .contact-send,
.stmt, .big, .ch-n, .bcap-n, .close-s, .pk-n, .st-t, .ro-t, .lc-t,
.ff-shot, .inst-n, .dg-do, .boardCopy:not(.em), .step p, .role p,
.her-p2, .spineFoot, .node span, .f2-copy{
  font-family:'Hanken Grotesk','Archivo','Helvetica Neue',Arial,sans-serif!important;
}
.boardCopy:not(.em), .step p, .role p, .her-p2, .spineFoot, .node span, .f2-copy{
  font-weight:400!important; letter-spacing:0!important;
}
.heroAsk, .boardCopy.em, .close-d, .tell-s, .fam-line, .turnPunct{
  font-family:'Newsreader',Georgia,serif!important;
  font-style:italic!important; font-weight:400!important;
}

/* ---------- 4. QUIET FIELD, LIGHTER TYPE, DEPTH IN THE OBJECT
   The field is almost flat and very light. The object is lit,
   grounded by a contact shadow, and carries the depth on its own.
   No gradient sweep behind the type.                           */
#why, .seq, #capability, #table, .tbl, .release, .lh{
  background-image:none!important;
  background-color:#F2F2F0!important;
}
.mbg-warm{
  background-image:none!important;
  background:linear-gradient(180deg,#F2F2F0 0%,#EDF1F8 46%,#E6EDF7 100%)!important;
}
#table{ background:#F2F2F0!important }
.tbl{ background:#F2F2F0!important }
.end2{
  background:radial-gradient(70% 40% at 60% 62%,rgba(8,92,240,.07) 0%,rgba(8,92,240,0) 70%),
    #F2F2F0!important;
}
/* the hero keeps a light source. Everything else stays flat. */
.pbg-dark{
  background-image:none!important;
  background:
    radial-gradient(62% 36% at 70% 100%, rgba(175,233,253,.24) 0%, rgba(175,233,253,0) 70%),
    linear-gradient(180deg,#0A0C12 0%,#070A1E 58%,#050A34 100%)!important;
}
.m-black, .foot{ background-image:none!important; background:#07080C!important }

/* heavy type at large size reads loud. Lighter at the same size
   reads precise, which is the register the references are in.  */
.colossal, .mbig, #table .it .serif-name,
.huge, .pline, .seq-step .huge, .mA .huge, .mB .huge, #join .huge, .s2 .huge,
.stmt, .big, .ch-n, .bcap-n, .close-s, .pk-n, .st-t, .ro-t, .lc-t,
.ff-shot, .inst-n, .dg-do{
  font-weight:650!important;
  font-variation-settings:'wght' 650!important;
  letter-spacing:-.032em!important;
}
.mid, .menu-list .t, .tcap-n{ font-weight:500!important; letter-spacing:-.03em!important }
.arrow{ font-weight:600!important }
.micro, .label, .mlabel, .foot-legal, .tobj span{ font-weight:500!important; opacity:.45 }

/* nothing floats. A tight contact shadow plus a wide soft one. */
.masm{
  filter:
    drop-shadow(0 3px 2px rgba(20,22,28,.16))
    drop-shadow(0 18px 20px rgba(20,22,28,.14))
    drop-shadow(0 52px 60px rgba(20,22,28,.12))!important;
}
.pasm, .psequence{
  filter:
    drop-shadow(0 4px 3px rgba(0,0,0,.42))
    drop-shadow(0 30px 44px rgba(0,0,0,.44))!important;
}
.tobj, .shot, .bobj{
  background-image:none!important;
  background:linear-gradient(161deg,#FCFCFB 0%,#EDEEEC 40%,#D9DBD9 74%,#E6E7E5 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 0 1px rgba(20,22,28,.07),
    0 3px 2px -1px rgba(20,22,28,.14),
    0 22px 26px -14px rgba(20,22,28,.20),
    0 60px 70px -40px rgba(20,22,28,.22)!important;
}

/* ---------- 5. THE ONES THAT SLIPPED THROUGH -----------------
   In the Lab and Development Board set some of their largest type
   with compound selectors (`#why-us .stmt`, `.hit .stmt`, `.turn
   .stmt`) that outrank a flat class even against !important, so
   the same list has to be matched to win on source order. In the
   Lab also had serif display headlines, which were the old
   pairing rather than the aside voice.                          */
.stmt,.stmt.sm,.stmt.big,.hit .stmt,.act .stmt.sm,.close-q .stmt.big,
#why-us .stmt,.turn .stmt,
.ll-h,.ll-h .l2,.her-h,.talk h2,
.talk-lede,.menu .close,.talk-x,.contact-x,.talk-err,.talk label span.talk-err,
.pivotLine,.pivotEnd,.pl,.ln,.lnmask,.hd-desk,.hd-mob,.rise .ln,.rise .lnmask,
.rise.hd-desk,.rise.hd-mob,.fine,.fineprint{
  font-family:'Hanken Grotesk','Archivo','Helvetica Neue',Arial,sans-serif!important;
  font-style:normal!important;
}
.ll-h,.her-h,.talk h2,.pivotLine,.pivotEnd,.pl,.ln,.lnmask,
.hd-desk,.hd-mob,.rise.hd-desk,.rise.hd-mob{
  font-weight:650!important;font-variation-settings:'wght' 650!important;
  letter-spacing:-.032em!important;
}
.ll-h .l2{ font-weight:400!important;color:#092576!important }
.talk-lede{ font-weight:400!important }

/* ---------- 6. DEVELOPMENT BOARD ----------------------------
   The surgeon's own list is the heart of that page, so it is set
   as a headline and allowed to wrap. The role list had each phrase
   split across two lines and stepped further right on every item,
   which pushed the third one off a phone screen.               */
#the-list .stmt{ font-size:clamp(25px,6.6vw,46px)!important; line-height:1.14!important;
  letter-spacing:-.03em!important; max-width:20ch }
#the-list .ln, #the-list .lnmask{ white-space:normal!important }
#the-list{ padding-top:clamp(56px,10vh,110px)!important; padding-bottom:clamp(56px,10vh,110px)!important }
.role h3 .rl, .rl{ white-space:normal!important; display:block }
#the-role .role:nth-of-type(2), #the-role .role:nth-of-type(3){ padding-left:0!important }
.role h3{ max-width:18ch }

/* spacing left alone. Section padding interacts with the sticky
   scroll positions, and changing it moves objects out of frame. */