/* Surver header on top of the Blocksy header builder — design "Header — menu-states" (Surver 2.0).
   Desktop: start column (logo + menu) = white pill; a top item opens its sub-menu as a panel inside the pill.
   Mobile: Blocksy off-canvas drawer with the same menu. */
/* Colours + fonts come from Blocksy (Customizer → Colors / Typography / Header).
   Only design values Blocksy has no setting for are defined here. */
#header,#offcanvas{
	--svh-brand:var(--theme-palette-color-1);--svh-brand-hover:var(--theme-palette-color-2);
	--svh-muted:var(--theme-palette-color-3);--svh-ink:var(--theme-palette-color-4);--svh-line:var(--theme-palette-color-5);
	--svh-sunken:var(--theme-palette-color-6);--svh-raised:var(--theme-palette-color-8);
	--svh-brand-soft:color-mix(in srgb,var(--svh-brand) 10%,#fff);--svh-subtle:#7a7a7a;
	--svh-on-brand:#fff;--svh-new-soft:#fff0e8;--svh-new-ink:#a8380c;
	--svh-r-sm:8px;--svh-r-md:16px;
	--svh-shadow:0 14px 36px -14px rgba(20,20,20,.22);--svh-shadow-brand:0 10px 24px -10px rgba(43,51,203,.55);
	--svh-display:ct_font_clash__display,"Helvetica Neue",Arial,sans-serif;
	--svh-ease:cubic-bezier(.2,.8,.2,1);
}

/* ---------- header shell ---------- */
#header.ct-header{position:relative;z-index:100}
#header [data-row]{background:transparent!important;border:0!important;box-shadow:none!important}
/* width: Blocksy container (max 1400px, 20px gutter via style.css) */
#header [data-device="desktop"] [data-row="middle"] > .ct-container{padding-top:8px;align-items:flex-start}
#header .header-menu-2 .ct-menu-link{gap:6px}

/* ---------- the pill ---------- */
#header [data-device="desktop"] [data-row="middle"] [data-column="start"]{position:relative;z-index:2}
#header [data-device="desktop"] [data-row="middle"] [data-column="start"] > [data-items]{
	position:relative;display:flex;align-items:center;gap:20px;height:58px;padding:0 10px 0 26px;margin:0;
	background:var(--svh-raised);border:1px solid var(--svh-line);border-radius:30px;box-sizing:border-box;
	width:max-content;max-width:100%;interpolate-size:allow-keywords;
	transition:width .32s var(--svh-ease),border-radius .2s,box-shadow .25s ease}
#header [data-device="desktop"] [data-row="middle"] [data-column="start"] > [data-items] > *{margin:0!important}
#header.svh-open [data-device="desktop"] [data-row="middle"] [data-column="start"] > [data-items]{
	width:min(1040px,calc(min(1400px, 100vw - 40px) - 290px));border-radius:30px 30px 0 0;border-bottom-color:transparent;box-shadow:var(--svh-shadow)}

/* top level links (font + colours: Customizer → Header → Menu) */
#header .header-menu-1{position:static}
#header .header-menu-1 > .menu{gap:0;align-items:center;height:auto}
#header .header-menu-1 > .menu > li{position:static;height:auto;margin:0}
#header .header-menu-1 > .menu > li > .ct-menu-link{
	display:inline-flex;align-items:center;gap:4px;height:34px;border-radius:50px;white-space:nowrap;transition:background .15s}
#header .header-menu-1 > .menu > li > .ct-menu-link:hover{background:var(--svh-sunken)}
#header .header-menu-1 > .menu > li > .ct-menu-link:focus-visible{outline:2px solid var(--svh-brand);outline-offset:2px}
#header .header-menu-1 > .menu > li.svh-active > .ct-menu-link{background:var(--svh-brand-soft);color:var(--svh-brand)}
#header .header-menu-1 .ct-toggle-dropdown-desktop{margin:0;--toggle-dropdown-size:12px;--toggle-button-size:12px;width:12px;height:12px;transition:transform .18s}
#header .header-menu-1 > .menu > li.svh-active .ct-toggle-dropdown-desktop{transform:rotate(180deg)}
#header .header-menu-1 > .menu > li > .ct-menu-link::before,#header .header-menu-1 > .menu > li > .ct-menu-link::after{display:none}

/* ---------- the panel ---------- */
#header .header-menu-1 > .menu > li > .sub-menu{
	display:none!important;position:absolute!important;top:calc(100% - 1px)!important;left:-1px!important;right:-1px!important;
	width:auto!important;min-width:0!important;margin:0!important;padding:22px!important;
	opacity:1!important;visibility:visible!important;transform:none!important;pointer-events:auto!important;
	background:var(--svh-raised)!important;border:1px solid var(--svh-line)!important;border-top-color:var(--svh-line)!important;
	border-radius:0 0 30px 30px!important;box-shadow:var(--svh-shadow)!important;box-sizing:border-box;
	grid-template-columns:repeat(3,minmax(0,1fr));gap:0;clip-path:inset(0 -40px -60px -40px);
	animation:svh-in .28s var(--svh-ease)}
#header .header-menu-1 > .menu > li.svh-active > .sub-menu{display:grid!important}
#header .header-menu-1 > .menu > li > .sub-menu::before,#header .header-menu-1 > .menu > li > .sub-menu::after{display:none!important}
@keyframes svh-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* columns */
#header .svh-col{position:static!important;display:block;width:auto!important;min-width:0;margin:0!important;padding:0 22px!important;border-left:1px solid var(--svh-line);background:none!important}
#header .svh-col:first-child{padding-left:0!important;border-left:0}
#header .svh-col:nth-last-child(1),#header .svh-col:has(+ .svh-col--foot){padding-right:0!important}
#header .svh-col > .sub-menu{
	position:static!important;display:flex!important;flex-direction:column;gap:4px;width:auto!important;min-width:0!important;
	margin:0!important;padding:0!important;opacity:1!important;visibility:visible!important;transform:none!important;
	background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important}
#header .svh-col > .sub-menu::before{display:none!important}
#header .svh-col > .sub-menu > li{margin:0!important;padding:0!important;width:auto}
#header .svh-col--case > .sub-menu,#header .svh-col--reviews > .sub-menu,#header .svh-col--foot > .sub-menu{display:none!important}
#header .svh-col .ct-toggle-dropdown-desktop,#header .svh-col .ct-toggle-dropdown-desktop-ghost{display:none!important}

.svh-title{display:block;font-weight:600;font-size:12px;line-height:1;letter-spacing:.08em;text-transform:uppercase;color:var(--svh-muted);margin:2px 0 14px}

/* primary items (icon + title + description) */
#header .svh-col--primary .ct-menu-link{display:flex;gap:14px;align-items:center;padding:10px!important;margin:0 -10px;border-radius:var(--svh-r-md);color:var(--svh-ink);font:inherit;line-height:1.3;height:auto;white-space:normal}
#header .svh-col--primary .ct-menu-link:hover,#header .svh-col--primary .current-menu-item > .ct-menu-link{background:var(--svh-sunken);color:var(--svh-ink)}
.svh-ico{flex:0 0 40px;height:40px;border-radius:var(--svh-r-sm);background:var(--svh-ink);color:#fff;display:grid;place-items:center}
.svh-txt b{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font:600 17px/1.25 var(--svh-display);color:var(--svh-ink)}
.svh-txt > span{display:block;font-weight:400;font-size:13.5px;line-height:1.35;color:var(--svh-muted);margin-top:3px}

/* text link columns (font + colours: Customizer → Header → Menu → Dropdown) */
#header .svh-col--links > .sub-menu{gap:2px}
#header .svh-col--links .ct-menu-link{display:flex;padding:7px 0!important;height:auto;background:none!important}

/* footer bar */
#header .svh-col--foot{grid-column:1/-1;padding:0!important;border:0}
.svh-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:20px;padding:14px 18px;border-radius:var(--svh-r-md);background:var(--svh-sunken);font-weight:400;font-size:14px;line-height:1.45;color:var(--svh-muted)}
.svh-foot b{color:var(--svh-ink);font-weight:600}
.svh-more{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14px;line-height:1;color:var(--svh-brand);white-space:nowrap;text-decoration:none}
a.svh-more:hover{color:var(--svh-brand-hover)}
.svh-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center}

/* feature card */
#header .svh-col--feature,#header .svh-col--domain{border-left:0}
#header .svh-col--feature + .svh-col,#header .svh-col--domain + .svh-col{border-left:0}
.svh-feat{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:236px;height:100%;padding:22px;box-sizing:border-box;border-radius:var(--svh-r-md);background:var(--svh-sunken);color:var(--svh-ink);text-decoration:none}
.svh-feat:hover{color:var(--svh-ink)}
.svh-feat b{font:600 21px/1.2 var(--svh-display);margin-top:4px}
.svh-feat .t{font-weight:400;font-size:14px;line-height:1.5;color:var(--svh-muted);max-width:30ch}
.svh-feat .svh-more{margin-top:auto}
.svh-feat.has-img{min-height:220px}
.svh-feat.has-img b{font-size:18px}

/* domain search */
#header .svh-col--domain{display:flex;flex-direction:column;align-items:flex-start;padding:18px 22px!important;border-radius:var(--svh-r-md);background:var(--svh-sunken)!important}
.svh-ds{display:flex;align-items:center;gap:8px;width:100%;height:52px;margin:0 0 12px;padding:0 6px 0 14px;box-sizing:border-box;border:1.5px solid var(--svh-ink);border-radius:50px;background:var(--svh-raised)}
.svh-ds > span{display:flex;color:var(--svh-muted)}
.svh-ds input[name="query"]{flex:1;min-width:0;height:auto;margin:0;padding:0;border:0!important;outline:none;box-shadow:none!important;background:transparent;font-weight:400;font-size:15px;line-height:1.4;color:var(--svh-ink)}
#header .svh-col--domain .svh-badge{background:var(--svh-raised)}

/* case + reviews */
.svh-case{display:flex;flex-direction:column;gap:12px;padding:10px;margin:-10px;border-radius:var(--svh-r-md);color:var(--svh-ink);text-decoration:none}
.svh-case:hover{background:var(--svh-sunken);color:var(--svh-ink)}
.svh-case-b b{display:block;font:600 17px/1.25 var(--svh-display)}
.svh-case-b span{display:block;margin-top:3px;font-size:13.5px;color:var(--svh-muted)}
.svh-photo{display:grid;place-items:center;width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;border-radius:var(--svh-r-sm);background:#e2e2e2;color:var(--svh-subtle);font-weight:600;font-size:11px;line-height:1;letter-spacing:.08em}
.svh-q{display:flex;flex-direction:column;gap:6px;padding:16px;border:1px solid var(--svh-line);border-radius:var(--svh-r-md)}
.svh-q .st{display:inline-flex;gap:1px;color:#f5b400}
.svh-q .p{margin:2px 0 4px;font-size:14px;line-height:1.5;color:var(--svh-ink)}
.svh-q b{font-weight:600;font-size:14px;color:var(--svh-ink)}
.svh-q > span:last-child{font-size:13px;color:var(--svh-muted)}
.svh-r{display:flex;justify-content:space-between;width:100%;font-weight:400;font-size:14px;line-height:1.4;padding:7px 0;border-top:1px solid var(--svh-line);color:var(--svh-muted);text-decoration:none}
.svh-r b{font-weight:600;font-size:14px;line-height:1;color:var(--svh-ink)}
a.svh-r:hover{color:var(--svh-brand)}

/* in-panel button + badges (header buttons themselves: Customizer → Header → Button) */
.svh-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:50px;border:1px solid transparent;font-weight:600;font-size:15px;line-height:1;cursor:pointer;white-space:nowrap}
.svh-btn--primary{background:var(--svh-brand);color:var(--svh-on-brand)}
.svh-btn--primary:hover{background:var(--svh-brand-hover);box-shadow:var(--svh-shadow-brand)}
.svh-btn--sm{height:36px;padding:0 14px;font-size:14px}
.svh-badge{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:50px;font-weight:600;font-size:12.5px;line-height:1;background:var(--svh-sunken);color:var(--svh-muted);white-space:nowrap}
.svh-badge--brand{position:relative;background:var(--svh-brand-soft);color:var(--svh-brand)}
.svh-badge--new{height:20px;font-size:11px;background:var(--svh-new-soft);color:var(--svh-new-ink)}

#header [data-device="desktop"] [data-row="middle"] [data-column="end"]{height:58px!important;min-height:0!important;align-self:flex-start;align-items:center}

/* squircle where supported */
@supports (corner-shape:superellipse(1.5)){
	#header .svh-col--primary .ct-menu-link,.svh-ico,.svh-foot,.svh-feat,#header .svh-col--domain,.svh-case,.svh-photo,.svh-q{corner-shape:superellipse(1.5)}
}

@media (max-width:1180px){
	#header [data-device="desktop"] [data-row="middle"] [data-column="start"] > [data-items]{gap:12px}
	#header [data-device="desktop"] [data-id="button"]{display:none}
	#header.svh-open [data-device="desktop"] [data-row="middle"] [data-column="start"] > [data-items]{width:min(1040px,calc(min(1400px, 100vw - 40px) - 140px))}
}

/* ---------- mobile: pill bar + Blocksy drawer (drawer colours/fonts: Customizer → Header → Offcanvas / Mobile Menu) ---------- */
#header [data-device="mobile"] [data-row="middle"] > .ct-container{position:relative;padding:12px 0 0;align-items:flex-start}
#header [data-device="mobile"] [data-row="middle"] > .ct-container::before{content:"";position:absolute;inset:12px 0 0;height:58px;background:var(--svh-raised);border:1px solid var(--svh-line);border-radius:28px;z-index:0}
#header [data-device="mobile"] [data-column]{position:relative;z-index:1;height:58px;align-items:center}
#header [data-device="mobile"] [data-column="start"]{padding-left:20px}
#header [data-device="mobile"] [data-column="end"]{padding-right:6px}
#header [data-device="mobile"] [data-column] > [data-items]{height:58px;align-items:center}
#header [data-device="mobile"] .site-branding{display:flex;align-items:center;margin:0}

#offcanvas .mobile-menu > ul > li > .ct-sub-menu-parent > .ct-menu-link,#offcanvas .mobile-menu > ul > li > .ct-menu-link{padding-block:14px}
#offcanvas .mobile-menu .svh-col > .ct-sub-menu-parent .ct-toggle-dropdown-mobile{display:none}
#offcanvas .mobile-menu .svh-col{border:0;padding:0}
#offcanvas .mobile-menu .svh-col > .sub-menu{display:block!important;height:auto!important;opacity:1!important;visibility:visible!important;padding:0 0 12px!important}
#offcanvas .mobile-menu .svh-col--case,#offcanvas .mobile-menu .svh-col--reviews{display:none}
#offcanvas .mobile-menu .svh-col--case > .sub-menu,#offcanvas .mobile-menu .svh-col--reviews > .sub-menu,#offcanvas .mobile-menu .svh-col--foot > .sub-menu{display:none!important}
#offcanvas .svh-title{margin:14px 0 8px}
#offcanvas .svh-col--primary .ct-menu-link{display:flex;gap:12px;align-items:center;padding:8px 0}
#offcanvas .svh-ico{flex-basis:36px;height:36px}
#offcanvas .svh-txt b{font-size:16px}
#offcanvas .svh-feat{min-height:0;margin:8px 0 12px;padding:18px}
#offcanvas .svh-feat .svh-photo{display:none}
#offcanvas .svh-col--domain{padding:12px 0}
#offcanvas .svh-foot{flex-direction:column;align-items:flex-start}

@media (prefers-reduced-motion:reduce){
	#header [data-column="start"] > [data-items],#header .header-menu-1 > .menu > li > .sub-menu{transition:none;animation:none}
}