/* Colonoscopy First shared shell: fonts, color tokens, header, menu, footer, buttons.
   Every rule here is scoped to its own classes, so this file is safe to load on any page,
   including pages that still use the older content styles. */
@font-face{font-family:Editorial;src:url('assets/fonts/editorial-regular.woff2') format('woff2');font-display:swap}
@font-face{font-family:Editorial;src:url('assets/fonts/editorial-italic.woff2') format('woff2');font-style:italic;font-display:swap}
@font-face{font-family:Sans;src:url('assets/fonts/sans-regular.woff2') format('woff2');font-display:swap}
@font-face{font-family:Sans;src:url('assets/fonts/sans-bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:"CF Header Serif";src:url('assets/fonts/cf-wordmark.woff') format('woff'),url('assets/fonts/source-serif-4-bold.ttf') format('truetype');font-weight:700;font-display:swap}

:root{
  --cf-ink:#102c44;          /* navy: text, rules, filled marks */
  --cf-green:#386557;        /* forest: emphasis and the second voice in headlines */
  --cf-paper:#f7f3eb;        /* ivory: page */
  --cf-stone:#ecebe1;        /* alternate band */
  --cf-mint:#acdace;         /* tint for benign shapes and labels on navy */
  --cf-line:#d4d9ce;         /* hairlines */
  --cf-muted:#45545a;        /* secondary text */
  --cf-outline:#628779;      /* empty squares, quiet borders */
  --cf-on-ink:#f7f3eb;
  --cf-on-ink-muted:#c5d3dc;
  --cf-field:#ffffff;
  --cf-field-line:#9eb2a6;
  --cf-chip-for:#dbe9e1;      --cf-chip-for-ink:#24493d;
  --cf-chip-about:#e3e6ea;    --cf-chip-about-ink:#102c44;
  --cf-chip-against:#f1e6d6;  --cf-chip-against-ink:#6b4a1c;
  --cf-serif:Editorial,Georgia,"Times New Roman",serif;
  --cf-sans:Sans,"Helvetica Neue",Arial,sans-serif;
  --cf-wordmark:"CF Header Serif",Georgia,serif;
  --cf-gutter:40px;
  --cf-wrap:1220px;
  --cf-header:88px;
}
html{scroll-padding-top:calc(var(--cf-header) + 16px)}

.site-header,.site-header *,.site-menu,.site-menu *,.site-footer,.site-footer *,.site-actionbar,.site-actionbar *,.cf-btn{box-sizing:border-box}
.shell-wrap{max-width:var(--cf-wrap);margin-inline:auto;padding-left:max(var(--cf-gutter),env(safe-area-inset-left,0px));padding-right:max(var(--cf-gutter),env(safe-area-inset-right,0px));box-sizing:content-box!important}

.cf-skip{position:absolute;left:16px;top:-80px;z-index:100;background:var(--cf-ink);color:var(--cf-on-ink);padding:12px 18px;border-radius:0 0 8px 8px;font:700 16px/1.3 var(--cf-sans);text-decoration:none}
.cf-skip:focus{top:0;color:var(--cf-on-ink)}

/* Buttons */
.cf-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:999px;border:1.5px solid var(--cf-ink);font-family:var(--cf-sans);font-weight:700;font-size:17px;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.cf-btn--solid{background:var(--cf-ink);color:var(--cf-on-ink)}
.cf-btn--solid:hover{background:var(--cf-green);border-color:var(--cf-green);color:var(--cf-on-ink)}
.cf-btn--line{background:transparent;color:var(--cf-ink)}
.cf-btn--line:hover{border-color:var(--cf-green);color:var(--cf-green)}
.cf-btn--small{min-height:44px;padding:0 20px;font-size:16.5px}
.cf-btn--light{background:var(--cf-on-ink);border-color:var(--cf-on-ink);color:var(--cf-ink)}
.cf-btn--light:hover{background:var(--cf-mint);border-color:var(--cf-mint);color:var(--cf-ink)}
.cf-btn--ghost{background:transparent;border-color:var(--cf-on-ink-muted);color:var(--cf-on-ink)}
.cf-btn--ghost:hover{border-color:var(--cf-mint);color:var(--cf-mint)}
.cf-btn-row{display:flex;flex-wrap:wrap;gap:12px}
.cf-btn:focus-visible,.site-header a:focus-visible,.site-menu a:focus-visible,.site-footer a:focus-visible,.site-menu-btn:focus-visible{outline:2px solid var(--cf-green);outline-offset:3px}
.site-footer a:focus-visible{outline-color:var(--cf-mint)}

/* Header */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:45;background:var(--cf-paper)}
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:rgba(247,243,235,.96);border-bottom:1px solid var(--cf-line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-family:var(--cf-sans);color:var(--cf-ink)}
.site-header .shell-wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:var(--cf-header)}
.site-brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--cf-ink);text-decoration:none;white-space:nowrap}
.site-brand:hover{color:var(--cf-ink)}
.site-brand img{display:block;width:auto;height:40px;max-width:none}
.site-nav{display:flex;align-items:center;gap:clamp(16px,2vw,26px)}
.site-nav a:not(.cf-btn){font-size:16.5px;line-height:1.3;color:var(--cf-ink);text-decoration:none;white-space:nowrap;padding:12px 0}
.site-nav a:not(.cf-btn):hover{text-decoration:underline;color:var(--cf-green)}
.site-nav a[aria-current=page]{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.35em}
.site-menu-btn{display:none;align-items:center;gap:10px;min-height:44px;padding:0 4px;background:none;border:0;font:400 16px/1 var(--cf-sans);color:var(--cf-ink);cursor:pointer}
.site-menu-btn svg{display:block}
.site-menu{position:fixed;inset:0;z-index:35;background:var(--cf-paper);color:var(--cf-ink);overflow-y:auto;padding-top:calc(var(--cf-header) + env(safe-area-inset-top,0px));padding-bottom:calc(32px + env(safe-area-inset-bottom,0px));font-family:var(--cf-sans)}
.site-menu[hidden]{display:none}
.site-menu ol,.site-menu ul{list-style:none;margin:0;padding:0}
.site-menu h2{font:700 14px/1.4 var(--cf-sans);letter-spacing:.02em;color:var(--cf-green);margin:28px 0 6px}
.site-menu li{margin:0}
.site-menu li a{display:flex;align-items:baseline;gap:14px;padding:13px 0;border-bottom:1px solid var(--cf-line);color:var(--cf-ink);text-decoration:none;font-family:var(--cf-serif);font-size:26px;line-height:1.15}
.site-menu li a .n{color:var(--cf-green);min-width:.7em}
.site-menu ul li a{font-family:var(--cf-sans);font-size:18px}
.site-menu .cf-btn{width:100%;margin-top:28px}
body.cf-menu-open{overflow:hidden}

/* Footer */
.site-footer{background:var(--cf-ink);color:var(--cf-on-ink);padding-block:clamp(56px,7vw,88px) 36px;font-family:var(--cf-sans);font-size:17px;line-height:1.6}
.site-footer p{margin:0}
.site-footer a:not(.cf-btn){color:var(--cf-on-ink)}
.site-footer a:not(.cf-btn):hover{color:var(--cf-mint)}
.footer-top{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;padding-bottom:clamp(40px,5vw,64px);border-bottom:1px solid rgba(247,243,235,.22)}
.footer-top .footer-tagline{font-family:var(--cf-serif);font-weight:400;font-size:clamp(34px,4.4vw,60px);line-height:1.05;letter-spacing:-.012em;max-width:12em;color:var(--cf-on-ink)}
.footer-top .footer-tagline em{font-style:italic;color:var(--cf-mint)}
.footer-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 48px;padding-block:clamp(36px,5vw,56px)}
.footer-cols h2{font:700 14px/1.4 var(--cf-sans);letter-spacing:.02em;color:var(--cf-mint);margin:0 0 14px}
.footer-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:17px;line-height:1.4}
.footer-cols li{margin:0}
.footer-cols a{text-decoration:none}
.footer-cols a:hover{text-decoration:underline}
.footer-legal{font-size:15.5px;line-height:1.7;color:var(--cf-on-ink-muted);max-width:60em;display:grid;gap:10px}
.footer-legal a{color:var(--cf-on-ink-muted)!important}

/* Sticky action bar (phones) */
.site-actionbar{display:none}

@media (max-width:1100px){
  .site-nav{display:none}
  .site-menu-btn{display:inline-flex}
}
@media (max-width:900px){
  :root{--cf-gutter:20px;--cf-header:68px}
  .site-brand img{height:32px}
  .footer-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-actionbar{display:flex;position:sticky;bottom:0;z-index:30;gap:10px;padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:rgba(247,243,235,.97);border-top:1px solid var(--cf-line)}
  .site-actionbar .cf-btn{flex:1;min-height:48px;padding:0 12px;font-size:17px}
}
@media (max-width:520px){
  .footer-cols{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:420px){
  .site-header .shell-wrap{gap:12px}
  .site-brand img{height:29px}
}
@media (max-width:359px){
  .site-header .shell-wrap{gap:10px}
  .site-brand{gap:8px}
  .site-brand img{height:25px}
}
@media print{
  .site-header,.site-actionbar,.site-menu,.cf-skip{display:none!important}
}