/* christianolson.org shared theme. Fleet-door lettering on warm charcoal: Anton caps, Archivo body,
   tan for every control, sign yellow only as a signal (the swap word, the caution tape, tiny marks).
   Every page links this file; a page keeps in its own <style> only what no other page uses. */

@font-face{font-family:"Anton";src:url("/uploads/companies/99254117-60a6-486c-a38c-e4d5038b6ab1/fonts/anton-400-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("/uploads/companies/99254117-60a6-486c-a38c-e4d5038b6ab1/fonts/archivo-wdth-var-latin.woff2") format("woff2");font-weight:400 800;font-stretch:75% 100%;font-style:normal;font-display:swap}

:root{
  --ground:#24272C; --deep:#1A1C20; --panel:#2E3238; --panel-hi:#363B42;
  --tan:#C9B48A; --tan-hi:#D9C7A1; --tan-lo:#B39C6F;
  --sand:#E8DCC4; --paper:#F4EFE4;
  --sign:#FFD21F;
  --text:#F2EEE6; --muted:#A3A8B0;
  --ink:#1F2328; --muted-ink:#545961;
  --ok:#3FAE6A; --ok-ink:#1E7A45; --bad:#E5484D; --bad-ink:#B0242B;
  --line-dark:rgba(242,238,230,.14); --line-light:rgba(31,35,40,.16);
  --f-display:"Anton","Arial Narrow",sans-serif;
  --f-body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1408px; --gut:clamp(20px,4.3vw,66px);
  --head-h:76px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --t:180ms;
  --r:4px;
}
@media (min-width:900px){:root{--head-h:clamp(80px,6.12vw,94px)}}

*,*::before,*::after{box-sizing:border-box}
figure{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 16px);scrollbar-color:var(--tan-lo) var(--deep)}
body{margin:0;background:var(--ground);color:var(--text);font-family:var(--f-body);font-size:1.0625rem;line-height:1.58;font-feature-settings:"tnum" 0;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
@media (min-width:900px){body{font-size:1.125rem}}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
p{margin:0 0 1em}
h1,h2,h3,h4{margin:0;font-weight:400}
ul,ol{margin:0;padding:0}
button{font:inherit;color:inherit;cursor:pointer}
::selection{background:var(--sign);color:var(--ink)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--deep)}
::-webkit-scrollbar-thumb{background:var(--tan-lo);border:3px solid var(--deep);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--tan)}
:focus-visible{outline:3px solid var(--sign);outline-offset:3px;border-radius:2px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--tan);color:var(--ink);padding:10px 16px;font-weight:700;border-radius:var(--r);transition:top var(--t) var(--ease-out)}
.skip:focus{top:12px}

.wrap{width:100%;max-width:calc(var(--wrap) + 2 * var(--gut));margin:0 auto;padding:0 var(--gut)}
.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- surfaces: sections step so the page is never one wall ---------- */
.sec{position:relative;padding:clamp(72px,9vw,128px) 0}
.on-ground{background:var(--ground);color:var(--text)}
.on-deep{background:var(--deep);color:var(--text)}
.on-sand{background:var(--sand);color:var(--ink)}
.on-paper{background:var(--paper);color:var(--ink)}
.on-sand ::selection,.on-paper ::selection{background:var(--ink);color:var(--sign)}

/* ---------- type ---------- */
.display{font-family:var(--f-display);text-transform:uppercase;line-height:.98;letter-spacing:.005em}
.h2{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(2.4rem,1.2rem + 4.2vw,4.9rem);line-height:.98;letter-spacing:.005em;text-wrap:balance}
.h2 .h2-sub{display:block;margin-top:.55em;font-family:var(--f-body);text-transform:none;font-weight:600;font-size:clamp(1.05rem,.95rem + .5vw,1.35rem);line-height:1.35;letter-spacing:0;color:var(--muted)}
.on-sand .h2 .h2-sub,.on-paper .h2 .h2-sub{color:var(--muted-ink)}
.h3{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(1.7rem,1.1rem + 1.9vw,2.6rem);line-height:1;letter-spacing:.01em}
.lede{font-size:clamp(1.1rem,1rem + .45vw,1.3rem);line-height:1.5;max-width:60ch}
.muted{color:var(--muted)}
.on-sand .muted,.on-paper .muted{color:var(--muted-ink)}
.measure{max-width:66ch}
.sec-head{margin-bottom:clamp(40px,5vw,72px)}
.sec-head.center{text-align:center;margin-left:auto;margin-right:auto;max-width:980px}
.sec-head .lede{margin-top:20px}
.sec-head.center .lede{margin-left:auto;margin-right:auto}
.mark{background:var(--sign);color:var(--ink);padding:0 .14em;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* ---------- buttons, links, tags ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 26px;border:0;border-radius:var(--r);background:var(--tan);color:var(--ink);font-family:var(--f-body);font-weight:700;font-stretch:84%;font-size:1.06rem;letter-spacing:.01em;word-spacing:.08em;text-transform:uppercase;text-decoration:none;line-height:1.1;box-shadow:0 1px 0 rgba(0,0,0,.25);transition:background-color var(--t) var(--ease-out),transform var(--t) var(--ease-out),box-shadow var(--t) var(--ease-out)}
.btn:hover{background:var(--tan-hi);transform:translateY(-2px);box-shadow:0 10px 22px -10px rgba(0,0,0,.55)}
.btn:active{transform:translateY(0);background:var(--tan-lo);box-shadow:0 1px 0 rgba(0,0,0,.25)}
.btn-lg{min-height:64px;padding:18px 40px;font-size:clamp(1.05rem,.95rem + .45vw,1.35rem)}
.btn-ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px var(--tan)}
.btn-ghost:hover{background:rgba(201,180,138,.14)}
.on-sand .btn-ghost,.on-paper .btn-ghost{box-shadow:inset 0 0 0 2px var(--ink)}
.on-sand .btn-ghost:hover,.on-paper .btn-ghost:hover{background:rgba(31,35,40,.07)}
.btn .i{width:20px;height:20px;transition:transform var(--t) var(--ease-out)}
.btn:hover .i-arrow{transform:translateX(4px)}

.tlink{color:inherit;text-decoration:underline;text-decoration-color:var(--tan);text-decoration-thickness:2px;text-underline-offset:.22em;transition:color var(--t) var(--ease-out),text-decoration-color var(--t) var(--ease-out)}
.tlink:hover{color:var(--tan-hi);text-decoration-color:var(--sign)}
.on-sand .tlink:hover,.on-paper .tlink:hover{color:var(--ink);text-decoration-color:var(--ink)}

.tags{display:flex;flex-wrap:wrap;gap:12px;list-style:none}
.tag{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:8px 18px;border:2px solid var(--tan);border-radius:var(--r);font-weight:700;font-stretch:100%;font-size:.88rem;line-height:1.15;letter-spacing:.01em;word-spacing:.08em;text-transform:uppercase;text-align:center;color:var(--text);transition:background-color var(--t) var(--ease-out),color var(--t) var(--ease-out)}
.tag:hover{background:var(--tan);color:var(--ink)}

/* ---------- the caution tape: one thin band, a second lower is the most ---------- */
.tape{height:12px;background:repeating-linear-gradient(-50deg,var(--sign) 0 11px,var(--deep) 11px 22px);border-block:2px solid var(--deep)}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:50;background:var(--ground);transition:box-shadow var(--t) var(--ease-out),background-color var(--t) var(--ease-out)}
.site-head.scrolled{background:var(--deep);box-shadow:0 8px 24px -14px rgba(0,0,0,.7)}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--head-h)}
.wordmark{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(1.6rem,2.6vw,2.5rem);line-height:1;letter-spacing:.022em;-webkit-text-stroke:.012em currentColor;color:var(--text);text-decoration:none;white-space:nowrap;transition:color var(--t) var(--ease-out)}
.wordmark:hover{color:var(--tan-hi)}
.nav{display:none;margin-left:auto;margin-right:clamp(8px,10vw - 60px,94px)}
.nav ul{display:flex;gap:clamp(20px,5vw - 15px,62px);list-style:none}
.nav a{position:relative;display:inline-block;padding:10px 0;font-weight:600;font-size:clamp(1rem,1.172vw,1.14rem);letter-spacing:-.01em;white-space:nowrap;text-decoration:none;color:var(--text);transition:color var(--t) var(--ease-out)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:var(--sign);transform:scaleX(0);transform-origin:left;transition:transform 220ms var(--ease-out)}
.nav a:hover{color:#fff}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}
.head-cta{display:none;min-height:clamp(44px,3.26vw,50px);padding:12px clamp(20px,1.7vw,26px);text-transform:none;letter-spacing:0;font-stretch:100%;font-weight:700;font-size:clamp(.95rem,1.104vw,1.06rem)}
.menu-btn{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;margin-right:-8px;border:0;border-radius:var(--r);background:transparent;color:var(--text);transition:background-color var(--t) var(--ease-out)}
.menu-btn:hover{background:var(--panel)}
.menu-btn .i{width:28px;height:28px}
.menu-btn .i-close{display:none}
.menu-open .menu-btn .i-menu{display:none}
.menu-open .menu-btn .i-close{display:block}
.drawer{position:fixed;inset:var(--head-h) 0 auto 0;z-index:49;background:var(--deep);border-top:1px solid var(--line-dark);padding:12px var(--gut) 28px;transform:translateY(-12px);opacity:0;visibility:hidden;transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out),visibility 0s linear 200ms}
.menu-open .drawer{opacity:1;transform:none;visibility:visible;transition-delay:0s}
.drawer ul{list-style:none}
.drawer li a{display:block;padding:14px 0;border-bottom:1px solid var(--line-dark);font-family:var(--f-display);text-transform:uppercase;font-size:1.6rem;text-decoration:none;transition:color var(--t) var(--ease-out),padding-left var(--t) var(--ease-out)}
.drawer li a:hover{color:var(--tan-hi);padding-left:6px}
.drawer .btn{width:100%;margin-top:22px}
@media (min-width:1080px){
  .nav{display:block}.head-cta{display:inline-flex}
  .menu-btn,.drawer{display:none}
}

/* ---------- photos: the frame shows only once its photo is decoded ---------- */
.ph{position:relative;overflow:hidden;background:var(--panel);border-radius:var(--r)}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--ease-out)}
.ph:hover img{transform:scale(1.03)}
html.js-rv .ph{opacity:0;transform:translateY(14px);transition:opacity 520ms var(--ease-out),transform 700ms var(--ease-out)}
html.js-rv .ph.ready{opacity:1;transform:none}

/* ---------- reveal kinds (hidden only under html.js-rv, which the script sets) ---------- */
html.js-rv [data-rv="rise"]{opacity:0;transform:translateY(22px);transition:opacity 600ms var(--ease-out),transform 800ms var(--ease-out);transition-delay:calc(var(--i,0) * 90ms)}
html.js-rv [data-rv="rise"].in{opacity:1;transform:none}
html.js-rv [data-rv="rule"]{--draw:0}
html.js-rv [data-rv="rule"].in{--draw:1}

/* ---------- FAQ: every answer open, two columns on wide screens ---------- */
.faq-grid{display:grid;gap:0 clamp(32px,5vw,80px);grid-template-columns:1fr}
@media (min-width:900px){.faq-grid{grid-template-columns:1fr 1fr}}
.faq-item{padding:28px 0;border-top:2px solid var(--line-light)}
.on-ground .faq-item,.on-deep .faq-item{border-top-color:var(--line-dark)}
.faq-item h3{font-family:var(--f-body);font-weight:800;font-size:clamp(1.1rem,1rem + .35vw,1.3rem);line-height:1.3;margin-bottom:12px;text-transform:none}
.faq-pill{display:inline-block;margin-bottom:10px;padding:4px 10px;background:var(--ink);color:var(--paper);font-weight:800;font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;border-radius:3px}
.on-ground .faq-pill,.on-deep .faq-pill{background:var(--tan);color:var(--ink)}
.faq-item p{margin:0;max-width:62ch}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line-dark);background:var(--deep);color:var(--text);padding:clamp(56px,7vw,96px) 0 40px;content-visibility:auto;contain-intrinsic-size:auto 640px}
.foot-grid{display:grid;gap:40px;grid-template-columns:1fr}
@media (min-width:900px){.foot-grid{grid-template-columns:1.3fr 1fr 1fr 1.3fr}}
.foot-grid h2{font-family:var(--f-body);font-weight:800;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.foot-grid ul{list-style:none;display:grid;gap:6px}
.foot-grid a{text-decoration:none;transition:color var(--t) var(--ease-out)}
.foot-grid a:hover{color:var(--tan-hi);text-decoration:underline;text-decoration-color:var(--sign)}
.foot-grid .wordmark{display:inline-block;margin-bottom:14px}
.foot-map{width:100%;height:180px;border:0;border-radius:var(--r);filter:grayscale(.35) contrast(1.05)}.foot-base{margin-top:48px;padding-top:24px;border-top:1px solid var(--line-dark);display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;font-size:.92rem;color:var(--muted)}
.foot-base a{color:var(--muted);transition:color var(--t) var(--ease-out)}
.foot-base a:hover{color:var(--text)}

/* ---------- phone call bar: book or text, never "call me" ---------- */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:48;display:flex;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--deep);border-top:1px solid var(--line-dark)}
.callbar .btn{flex:1;min-height:50px;padding:10px 12px;font-size:.92rem}
.callbar .btn-ghost{flex:0 0 auto;padding:10px 18px;color:var(--text)}
body.has-callbar{padding-bottom:76px}
@media (min-width:1080px){.callbar{display:none}body.has-callbar{padding-bottom:0}}

/* ---------- legal pages ---------- */
.legal{max-width:76ch}
.legal h1{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(2.4rem,1.6rem + 3vw,4rem);line-height:1;margin-bottom:24px}
.legal h2{font-family:var(--f-body);font-weight:800;font-size:1.3rem;margin:40px 0 12px}
.legal a{text-decoration-color:var(--ink)}