/* ============================================================
   Cool Koala V5, Tide: between Shore (V2) and Studio (V4).
   Page: white and mist #f4f6f6 · water band: shallows #e9f0ef · ink #111
   Lake #106a74 for buttons and links · jade #02b39d only as a thin line · deep #0f3a40 for the footer and contact
   No glows, no halos, no rings. Shape comes from photos, type and space.
   Type: Onest, one family.
   ============================================================ */
@font-face{font-family:'Onest';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/onest-var.woff2') format('woff2')}
:root{--mist:#f4f6f6;--shallow:#e9f0ef;--ink:#111;--lake:#106a74;--lake-d:#0c5860;--jade:#02b39d;--deep:#0f3a40;--line:#e6eaea;--ease:cubic-bezier(.22,1,.36,1)}
html,body{background:#fff!important}
body{font-family:'Onest','Hanken Grotesk','CKH Fallback',sans-serif!important}
h1,h2,h3,h4,.heroh1{font-family:'Onest','CKB Fallback',sans-serif!important;font-weight:650!important;letter-spacing:-.04em!important}
h1,.heroh1{font-weight:700!important;letter-spacing:-.05em!important}
::selection{background:#e9f0ef;color:#111}
:focus-visible{outline:2px solid #106a74;outline-offset:3px}

/* header: plain, scrolls away with the page */
.cknav,.pb-nav{position:relative!important;background:transparent!important;z-index:50}
.cknav .navlinks a,.pb-nav .navlinks a{font-weight:500}
.menu-btn{border-radius:50%!important}
/* links sit beside the logo, clear of the photos */
/* logo left, links in the middle, button right (as on the live site) */
@media(min-width:901px){
div.cknav>div.wrap,div.pb-nav>div.wrap{display:grid!important;grid-template-columns:1fr auto 1fr;align-items:center}
.cknav .navlinks,.pb-nav .navlinks{justify-content:center!important}
.cknav>.wrap>*:last-child,.pb-nav>.wrap>*:last-child{justify-self:end}
}

/* sticky service cards need the page itself to scroll: clip sideways overflow instead of hiding it */
html,body{overflow-x:clip!important;overflow-y:visible!important}

/* buttons: lake pills; secondary links stay text */
.btnlime,.btnink,.btnpaper,.mm-cta,form button[type=submit],a[style*="background:#106a74"],button[style*="background:#106a74"]{border-radius:999px!important;transition:background .2s ease,transform .3s var(--ease)}
.btnlime:hover,.btnink:hover,.btnpaper:hover,a[style*="background:#106a74"]:hover{background:#0c5860!important}
.btnink{background:#106a74!important;color:#fff!important}
.btnink:hover{background:#0c5860!important}
.wf-btn{border-radius:999px!important}
section[style*="background:#0f3a40"] .btnlime,footer .btnlime{background:#fff!important;color:#111!important}
section[style*="background:#0f3a40"] a:not([class]),footer a:not([class]){color:#eef6f5}
section[style*="background:#0f3a40"] .lblq{color:#a8c6c6!important}

/* labels: small coloured words, no boxes */
.eyebrow,.lbl{text-transform:none!important;letter-spacing:0!important;font-size:14px!important;font-weight:600!important;color:#106a74!important;border:0!important;background:none!important;padding:0!important}
section[style*="background:#0f3a40"] .eyebrow{color:#a8c6c6!important}

/* no shouting: small labels set in sentence case, a touch larger */
[style*="text-transform:uppercase"]{text-transform:none!important;letter-spacing:0!important}
[style*="text-transform:uppercase"][style*="font-size:11px"],[style*="text-transform:uppercase"][style*="font-size:12px"]{font-size:13px!important}
[style*="text-transform:uppercase"][style*="font-size:9px"]{font-size:11px!important}
[style*="text-transform:uppercase"][style*="font-weight:800"]{font-weight:650!important}

/* logos: one quiet colour on white */
[data-logo-wall] img,.logos img,[data-logo-wall]>div,#logowall>div{filter:brightness(0);opacity:.5;transition:opacity .2s ease}
[data-logo-wall] img:hover,.logos img:hover,[data-logo-wall]>div:hover{opacity:.85!important}
section[style*="background:#0f3a40"] [data-logo-wall] img,section[style*="background:#0f3a40"] [data-logo-wall]>div{filter:none;opacity:.85}

main section img:not([data-logo-wall] img):not(.logos img):not([width="18"]),main figure,main .ph,main video{border-radius:20px}
main figure img{border-radius:inherit}
.hstars,a[href*="google.com/search"] span:first-child{color:#f2b01e!important}
a[style*="background:#8fe6d3"],a[style*="background:#02b39d"]{border-radius:999px!important}
/* on the deep sections the main button is plain white, never mint */
a[style*="background:#8fe6d3"]{background:#fff!important;color:#111!important;transition:background .2s ease}
a[style*="background:#8fe6d3"]:hover{background:#e9f0ef!important}
.k6badge{border-radius:14px!important}

/* the page wrapper is white, so the header has nothing behind it */
body>div[style*="background:#f4f6f6"]:not(.cknav):not(.pb-nav){background:#fff!important}
/* outline buttons are pills too; round arrow buttons; little tick and number markers are circles */
main a[style*="background:transparent"][style*="px solid"],a[style*="border:1px solid"][style*="padding:16px 30px"],main a[style*="align-self:flex-start"][style*="border:1.5px solid"],main button[style*="padding:9px 16px"]{border-radius:999px!important}
main button[style*="width:48px;height:48px"],main button[style*="width:46px;height:46px"],main button[style*="width:36px;height:36px"]{border-radius:50%!important}
main span[style*="flex-shrink:0;width:"][style*="justify-content:center"]{border-radius:50%}

/* booth pages: the same pills, round ticks and soft option tiles */
.pb-btn{border-radius:999px!important}
.pb-btn-ghost{border-width:1.5px!important}
.pb-ticks li::before{border-radius:50%}
.pb-checks span::before,.pb-also span::before{border-radius:6px}
.pb-opts span,.pb-checks span,.pb-also span{border-radius:14px}
.pb .pb-close::before{background:linear-gradient(90deg,rgba(15,58,64,.92) 0%,rgba(15,58,64,.8) 30%,rgba(15,58,64,.45) 54%,rgba(15,58,64,.1) 74%,rgba(15,58,64,0) 88%)!important}
@media (max-width:700px){.pb .pb-close::before{background:linear-gradient(0deg,#0f3a40 38%,rgba(15,58,64,.55) 70%,rgba(15,58,64,.15) 100%)!important}}
.pb .pb-close h2{color:#fff}
.pb .pb-close .pb-btn{background:#fff!important;border-color:#fff!important;color:#111!important}
.pb .pb-close .pb-btn-ghost{background:transparent!important;border-color:rgba(255,255,255,.6)!important;color:#fff!important}
.pb .pb-close .pb-btn-ghost:hover{background:rgba(255,255,255,.12)!important}
.pb-quote-card footer{background:none!important;color:#111!important;font-weight:650}
.pb-quote-card footer span{color:#55615f!important;font-weight:500}

/* small things on photos: pills and round play buttons */
.vbadge,.ba-tag,.ls-tag,.bw-chip,.vs-tag,.k6tag,.w4tag,.pb-badge,.chip{border-radius:999px!important}
.vbadge,.vs-tag,.k6tag,.w4tag{background:rgba(255,255,255,.92)!important;color:#111!important}
.vplay{border-radius:50%!important;background:rgba(17,17,17,.5)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);width:46px!important;height:46px!important}

/* inner pages: one corner language. Boxes round like the photos */
main [style*="border:1px solid #dfe5e4"]:not(input):not(select):not(textarea):not(button),main .note,main .sframe,main .icard,main .fr,main .hband,main .ba,main .wtile,main .w4feat,main .vs-card{border-radius:20px}
main div[style*="background:#f4f6f6"],main div[style*="background:#e9f0ef"],main div[style*="background:#eef2f2"]{border-radius:24px}
main div[style*="background:#0f3a40"]:not(#mobileMenu){border-radius:28px}
/* a box that holds a photo clips it: no outline, no second set of corners */
main [style*="border:1px solid #dfe5e4"]:not(input):not(select):not(textarea):not(button):has(> img,> picture,> video,> div > img,> div > picture,> div > video),main .sframe,main .fr,main .hband,main .ba{overflow:hidden;border-color:transparent!important}
main [style*="border:1px solid #dfe5e4"]:not(input):not(select):not(textarea):not(button) img:not([style*="border-radius"]),main .note img:not([style*="border-radius"]),main .sframe img:not([style*="border-radius"]),main .icard img:not([style*="border-radius"]),main .fr img:not([style*="border-radius"]),main .hband img:not([style*="border-radius"]),main .ba img:not([style*="border-radius"]),main .wtile img:not([style*="border-radius"]),main .w4feat img:not([style*="border-radius"]),main .vs-card img:not([style*="border-radius"]){border-radius:0!important}
/* on white, cards are a soft grey fill instead of an outline; on grey, plain white */
section[style*="background:#ffffff"] [style*="background:#f4f6f6"][style*="border:1px solid #dfe5e4"]{border-color:transparent!important}
section[style*="background:#ffffff"] :where([style*="background:#ffffff"][style*="border:1px solid #dfe5e4"]:not(input,select,textarea,button)),section[style*="background:#ffffff"] .icard,section[style*="background:#ffffff"] .vs-card,section[style*="background:#ffffff"] .note,section[style*="background:#ffffff"] .wtile{background:#f4f6f6!important;border-color:transparent!important}
section[style*="background:#f4f6f6"] :where([style*="border:1px solid #dfe5e4"]:not(input,select,textarea,button)),section[style*="background:#f4f6f6"] .note,section[style*="background:#f4f6f6"] .sframe,section[style*="background:#f4f6f6"] .icard,section[style*="background:#f4f6f6"] .fr,section[style*="background:#f4f6f6"] .hband,section[style*="background:#f4f6f6"] .ba,section[style*="background:#f4f6f6"] .wtile,section[style*="background:#f4f6f6"] .w4feat,section[style*="background:#f4f6f6"] .vs-card{border-color:transparent!important}

/* inner pages: photos settle into place as they arrive (position only, never hidden) */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    main section:not(.hero) img:not([data-logo-wall] img):not(.logos img):not(.herotile img){animation:v5settle linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
    @keyframes v5settle{from{scale:1.06}to{scale:1}}
  }
}
/* page width: a little wider than the 1240 of the live site */
.wrap:not([style*="max-width"]){max-width:1360px}
/* booth closing bands: the photo behind runs edge to edge, so no corners */
main .pb-close>img.pb-close-bg{border-radius:0!important}
/* booths: room between the price builder and the "need headshots instead?" card */
main .pb-xsell{padding-top:clamp(64px,7vw,112px)!important}

/* mobile menu: a bare, bolder three-line icon (no outline shape) that morphs into the close X; 48px tap area kept */
.menu-btn,.mm-close{width:48px!important;height:48px!important;border:0!important;border-radius:0!important;background:transparent!important;margin-right:-11px;position:relative;font-size:0!important;padding:0!important}
.menu-btn{color:#111111!important}
.mm-close{color:#eef6f5!important}
@media(max-width:900px){.mm-close{margin-right:-19px!important}}
.ckb{position:absolute;inset:0;display:block}
.ckb i{position:absolute;left:50%;top:50%;width:22px;height:2.4px;margin:-1.2px 0 0 -11px;border-radius:2px;background:currentColor;transition:transform .34s cubic-bezier(.4,0,.2,1),opacity .2s ease}
.ckb i:nth-child(1){transform:translateY(-6.5px)}
.ckb i:nth-child(3){transform:translateY(6.5px)}
.is-x .ckb i:nth-child(1){transform:rotate(45deg)}
.is-x .ckb i:nth-child(2){opacity:0;transform:scaleX(.2)}
.is-x .ckb i:nth-child(3){transform:rotate(-45deg)}
@media (prefers-reduced-motion:reduce){.ckb i{transition:none}}