/*
Theme Name: Signal — Toukir Ahmed
Theme URI: https://toukirahmed.com
Author: Toukir Ahmed
Author URI: https://toukirahmed.com
Description: Personal services theme for a cold email infrastructure specialist. Instrument-panel aesthetic, hand-coded, no page builder and no design plugins required.
Version: 5.1
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: signal
Tags: business, portfolio, one-column, custom-menu, custom-logo, featured-images, translation-ready
*/

/* ==========================================================================
   1. Tokens
   --------------------------------------------------------------------------
   Palette reads like a spec sheet: cool paper, ink with a blue cast, the
   amber carried over from the old brand but deepened, and a pass-green that
   only ever appears on a genuine passing state.
   ========================================================================== */

:root {
	--sg-paper:      #eef1f4;
	--sg-card:       #ffffff;
	--sg-ink:        #151a21;
	--sg-ink-deep:   #0e1219;
	--sg-body:       #4d5865;
	--sg-muted:      #7a8694;
	--sg-rule:       #d9dfe6;
	--sg-rule-soft:  #e7ebef;

	--sg-signal:     #e8850c;
	--sg-signal-lo:  rgba(232, 133, 12, .1);
	--sg-pass:       #1f9d6b;
	--sg-pass-lo:    rgba(31, 157, 107, .1);

	--sg-display: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
	--sg-body-face: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
	--sg-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	--sg-wrap: 1240px;
	--sg-gut: 26px;
	--sg-radius: 3px;
	--sg-header: 76px;

	--sg-lift: 0 1px 2px rgba(15, 22, 33, .04), 0 12px 32px rgba(15, 22, 33, .06);
	--sg-lift-lg: 0 2px 4px rgba(15, 22, 33, .05), 0 28px 64px rgba(15, 22, 33, .1);
}

/* ==========================================================================
   2. Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--sg-paper);
	color: var(--sg-body);
	font-family: var(--sg-body-face);
	font-size: 17px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--sg-ink); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--sg-signal); }

h1, h2, h3, h4 {
	font-family: var(--sg-display);
	color: var(--sg-ink);
	font-weight: 600;
	letter-spacing: -.025em;
	line-height: 1.08;
	margin: 0 0 .5em;
}

h1 { font-size: clamp(38px, 5.6vw, 72px); letter-spacing: -.035em; line-height: 1; }
h2 { font-size: clamp(28px, 3.8vw, 46px); }
h3 { font-size: clamp(19px, 2vw, 23px); letter-spacing: -.015em; }
h4 { font-size: 16px; letter-spacing: -.01em; }

p { margin: 0 0 1.15em; }
ul, ol { margin: 0 0 1.15em; padding-left: 1.15em; }

strong { color: var(--sg-ink); font-weight: 600; }

blockquote {
	margin: 1.8em 0;
	padding-left: 22px;
	border-left: 2px solid var(--sg-signal);
	color: var(--sg-ink);
	font-size: 19px;
}

:focus-visible { outline: 2px solid var(--sg-signal); outline-offset: 3px; }

::selection { background: var(--sg-signal); color: #fff; }

.sg-wrap {
	width: 100%;
	max-width: var(--sg-wrap);
	margin: 0 auto;
	padding: 0 var(--sg-gut);
}

.sg-wrap--narrow { max-width: 780px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--sg-ink); color: #fff; padding: 12px 20px;
	font-family: var(--sg-mono); font-size: 13px;
}
.skip-link:focus { left: 12px; top: 12px; color: #fff; }

/* ==========================================================================
   3. Utility type — mono carries anything that is data
   ========================================================================== */

.sg-label {
	font-family: var(--sg-mono);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sg-muted);
	display: inline-flex;
	align-items: center;
	gap: 9px;
}
.sg-label::before {
	content: "";
	width: 16px; height: 1px;
	background: var(--sg-signal);
	flex: 0 0 auto;
}
.sg-label--plain::before { display: none; }

.sg-lede {
	font-size: clamp(17px, 1.7vw, 20px);
	line-height: 1.6;
	color: var(--sg-body);
	max-width: 54ch;
}

.sg-mono { font-family: var(--sg-mono); font-size: .92em; }

/* ==========================================================================
   4. Buttons
   ========================================================================== */

.sg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--sg-display);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -.01em;
	padding: 14px 26px;
	border: 1px solid var(--sg-ink);
	border-radius: var(--sg-radius);
	background: var(--sg-ink);
	color: #fff;
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.sg-btn:hover {
	background: var(--sg-signal);
	border-color: var(--sg-signal);
	color: #fff;
	transform: translateY(-1px);
}
.sg-btn svg { width: 15px; height: 15px; fill: currentColor; }

.sg-btn--line {
	background: transparent;
	color: var(--sg-ink);
	border-color: var(--sg-rule);
}
.sg-btn--line:hover { background: transparent; color: var(--sg-signal); border-color: var(--sg-signal); }

.sg-btn--onDark { background: #fff; border-color: #fff; color: var(--sg-ink); }
.sg-btn--onDark:hover { background: var(--sg-signal); border-color: var(--sg-signal); color: #fff; }

.sg-btn--ghostDark { background: transparent; color: #fff; border-color: rgba(255,255,255,.28); }
.sg-btn--ghostDark:hover { background: transparent; border-color: #fff; color: #fff; }

.sg-btn--sm { padding: 10px 18px; font-size: 14px; }

/* ==========================================================================
   5. Header
   ========================================================================== */

.sg-header {
	position: sticky; top: 0; z-index: 100;
	background: rgba(238, 241, 244, .88);
	backdrop-filter: saturate(160%) blur(12px);
	-webkit-backdrop-filter: saturate(160%) blur(12px);
	border-bottom: 1px solid var(--sg-rule);
}
.sg-header__inner {
	min-height: var(--sg-header);
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

.sg-brand { display: flex; align-items: center; gap: 11px; }
.sg-brand img { max-height: 34px; width: auto; }
.sg-brand__mark {
	width: 9px; height: 9px; border-radius: 50%;
	background: var(--sg-pass);
	box-shadow: 0 0 0 3px var(--sg-pass-lo);
	flex: 0 0 auto;
}
.sg-brand__text {
	font-family: var(--sg-display);
	font-size: 18px; font-weight: 600; letter-spacing: -.02em;
	color: var(--sg-ink);
}

.sg-nav ul { list-style: none; display: flex; align-items: center; gap: 28px; margin: 0; padding: 0; }
.sg-nav a {
	font-family: var(--sg-body-face);
	font-size: 15px; font-weight: 450;
	color: var(--sg-body);
	padding: 5px 0;
	position: relative;
}
.sg-nav a::after {
	content: ""; position: absolute; left: 0; bottom: -1px;
	width: 0; height: 1px; background: var(--sg-signal);
	transition: width .24s cubic-bezier(.4,0,.2,1);
}
.sg-nav a:hover, .sg-nav .current-menu-item > a { color: var(--sg-ink); }
.sg-nav a:hover::after, .sg-nav .current-menu-item > a::after { width: 100%; }

.sg-nav li { position: relative; }
.sg-nav .sub-menu {
	display: none; position: absolute; top: calc(100% + 10px); left: 0;
	min-width: 210px; flex-direction: column; gap: 0;
	background: var(--sg-card); border: 1px solid var(--sg-rule);
	border-radius: var(--sg-radius); box-shadow: var(--sg-lift); padding: 6px 0;
}
.sg-nav li:hover > .sub-menu, .sg-nav li:focus-within > .sub-menu { display: flex; }
.sg-nav .sub-menu a { display: block; padding: 9px 16px; }
.sg-nav .sub-menu a::after { display: none; }
.sg-nav .sub-menu a:hover { background: var(--sg-paper); }

.sg-header__end { display: flex; align-items: center; gap: 12px; }

.sg-burger {
	display: none; width: 40px; height: 40px; padding: 0;
	border: 1px solid var(--sg-rule); border-radius: var(--sg-radius);
	background: var(--sg-card); cursor: pointer; position: relative;
}
.sg-burger span {
	position: absolute; left: 11px; width: 18px; height: 1.5px;
	background: var(--sg-ink); transition: transform .24s ease, opacity .18s ease;
}
.sg-burger span:nth-child(1) { top: 14px; }
.sg-burger span:nth-child(2) { top: 19px; }
.sg-burger span:nth-child(3) { top: 24px; }
.sg-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.sg-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.sg-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ==========================================================================
   6. Section frame
   ========================================================================== */

.sg-sec { padding: 104px 0; }
.sg-sec--tight { padding: 68px 0; }
.sg-sec--card { background: var(--sg-card); border-block: 1px solid var(--sg-rule); }
.sg-sec--dark { background: var(--sg-ink-deep); color: rgba(255,255,255,.7); }
.sg-sec--dark h2, .sg-sec--dark h3 { color: #fff; }
.sg-sec--dark .sg-label { color: rgba(255,255,255,.5); }

.sg-head { max-width: 660px; margin-bottom: 60px; }
.sg-head h2 { margin: 16px 0 14px; }
.sg-head p { margin: 0; }

/* ==========================================================================
   7. Hero — the signature moment
   ========================================================================== */

.sg-hero { padding: 84px 0 92px; position: relative; overflow: hidden; }
.sg-hero::before {
	content: "";
	position: absolute; inset: 0;
	background-image:
		linear-gradient(var(--sg-rule-soft) 1px, transparent 1px),
		linear-gradient(90deg, var(--sg-rule-soft) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(ellipse 80% 60% at 70% 30%, #000 10%, transparent 70%);
	-webkit-mask-image: radial-gradient(ellipse 80% 60% at 70% 30%, #000 10%, transparent 70%);
	pointer-events: none;
	z-index: 0;
}
.sg-hero > * { position: relative; z-index: 1; }

.sg-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: 64px;
	align-items: center;
}

.sg-hero h1 { margin: 20px 0 22px; }
.sg-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.sg-hero__meta {
	display: flex; flex-wrap: wrap; gap: 26px;
	margin-top: 42px; padding-top: 26px;
	border-top: 1px solid var(--sg-rule);
}
.sg-metric__val {
	font-family: var(--sg-display);
	font-size: 28px; font-weight: 600; letter-spacing: -.03em;
	color: var(--sg-ink); line-height: 1.1; display: block;
}
.sg-metric__key {
	font-family: var(--sg-mono);
	font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
	color: var(--sg-muted);
}

/* ---- The authentication panel ---- */

.sg-panel {
	background: var(--sg-card);
	border: 1px solid var(--sg-rule);
	border-radius: var(--sg-radius);
	box-shadow: var(--sg-lift-lg);
	overflow: hidden;
	font-family: var(--sg-mono);
	font-size: 13px;
}
.sg-panel__bar {
	display: flex; align-items: center; gap: 9px;
	padding: 12px 16px;
	background: var(--sg-paper);
	border-bottom: 1px solid var(--sg-rule);
}
.sg-panel__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sg-rule); }
.sg-panel__host {
	margin-left: 6px;
	font-size: 12px; color: var(--sg-muted); letter-spacing: .02em;
}
.sg-panel__body { padding: 6px 0; }

.sg-row {
	display: grid;
	grid-template-columns: 62px 1fr auto;
	align-items: center;
	gap: 14px;
	padding: 11px 16px;
	border-bottom: 1px solid var(--sg-rule-soft);
}
.sg-row:last-child { border-bottom: 0; }

.sg-row__key { color: var(--sg-ink); font-weight: 500; letter-spacing: .02em; }
.sg-row__val {
	color: var(--sg-muted);
	font-size: 12px;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sg-row__state {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
	color: var(--sg-pass);
	background: var(--sg-pass-lo);
	padding: 4px 9px;
	border-radius: 2px;
	white-space: nowrap;
}
.sg-row__state::before {
	content: ""; width: 5px; height: 5px; border-radius: 50%;
	background: currentColor;
}

/* Resolving state, before the check settles */
.sg-row.is-waiting .sg-row__state {
	color: var(--sg-muted);
	background: rgba(122, 134, 148, .1);
}
.sg-row.is-waiting .sg-row__val { opacity: .35; }

.sg-panel__foot {
	display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
	padding: 16px;
	border-top: 1px solid var(--sg-rule);
	background: var(--sg-paper);
}
.sg-panel__footKey { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--sg-muted); }
.sg-panel__footVal {
	font-family: var(--sg-display);
	font-size: 26px; font-weight: 600; letter-spacing: -.03em;
	color: var(--sg-ink);
}

/* ==========================================================================
   8. Logo strip
   ========================================================================== */

.sg-strip { padding: 34px 0; border-bottom: 1px solid var(--sg-rule); }
.sg-strip__inner { display: flex; align-items: center; gap: 44px; flex-wrap: wrap; }
.sg-strip__label { flex: 0 0 auto; }
.sg-strip__logos { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.sg-strip__logos img {
	max-height: 30px; width: auto;
	filter: grayscale(1) contrast(.4) brightness(.85);
	opacity: .6; transition: opacity .24s ease, filter .24s ease;
}
.sg-strip__logos a:hover img { filter: none; opacity: 1; }

/* ==========================================================================
   9. Services
   ========================================================================== */

.sg-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--sg-rule); border: 1px solid var(--sg-rule); }
.sg-service {
	background: var(--sg-card);
	padding: 40px 36px;
	transition: background .2s ease;
	position: relative;
}
.sg-service:hover { background: #fcfdfe; }
.sg-service__tag {
	font-family: var(--sg-mono);
	font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
	color: var(--sg-signal);
	display: block; margin-bottom: 18px;
}
.sg-service h3 { margin-bottom: 12px; }
.sg-service p { font-size: 16px; margin-bottom: 0; }
.sg-service__list { list-style: none; padding: 0; margin: 20px 0 0; }
.sg-service__list li {
	font-family: var(--sg-mono);
	font-size: 12.5px;
	color: var(--sg-body);
	padding: 7px 0 7px 20px;
	border-top: 1px solid var(--sg-rule-soft);
	position: relative;
}
.sg-service__list li::before {
	content: "+";
	position: absolute; left: 0; top: 7px;
	color: var(--sg-signal);
}

/* ==========================================================================
   10. Process — numbering is earned here, it is a real sequence
   ========================================================================== */

.sg-steps { display: grid; gap: 0; }
.sg-step {
	display: grid;
	grid-template-columns: 76px minmax(0, 300px) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
	padding: 34px 0;
	border-top: 1px solid var(--sg-rule);
}
.sg-step:last-child { border-bottom: 1px solid var(--sg-rule); }
.sg-step__n {
	font-family: var(--sg-mono);
	font-size: 12px; letter-spacing: .1em;
	color: var(--sg-signal);
	padding-top: 5px;
}
.sg-step h3 { margin: 0; }
.sg-step p { margin: 0; font-size: 16px; }

/* ==========================================================================
   11. About
   ========================================================================== */

.sg-about { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 66px; align-items: center; }
.sg-about__media { position: relative; }
.sg-about__media img {
	width: 100%;
	border-radius: var(--sg-radius);
	filter: grayscale(.15);
}
.sg-about__stamp {
	position: absolute; right: -14px; bottom: -14px;
	background: var(--sg-card);
	border: 1px solid var(--sg-rule);
	border-radius: var(--sg-radius);
	box-shadow: var(--sg-lift);
	padding: 14px 18px;
	font-family: var(--sg-mono);
	font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
	color: var(--sg-muted);
	display: flex; align-items: center; gap: 9px;
}
.sg-about__stamp b {
	font-family: var(--sg-display); font-size: 17px; letter-spacing: -.02em;
	color: var(--sg-ink); font-weight: 600;
}

/* ==========================================================================
   12. Testimonials
   ========================================================================== */

.sg-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.sg-quote {
	background: var(--sg-card);
	border: 1px solid var(--sg-rule);
	border-radius: var(--sg-radius);
	padding: 32px 28px;
	display: flex; flex-direction: column;
	margin: 0;
}
.sg-quote__text { flex: 1; font-size: 15.5px; color: var(--sg-body); }
.sg-quote__text p:last-child { margin-bottom: 0; }
.sg-quote__by {
	display: flex; align-items: center; gap: 12px;
	margin-top: 24px; padding-top: 20px;
	border-top: 1px solid var(--sg-rule-soft);
}
.sg-quote__pic { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: var(--sg-paper); flex: 0 0 auto; }
.sg-quote__name { font-family: var(--sg-display); font-weight: 600; font-size: 15px; color: var(--sg-ink); display: block; line-height: 1.3; }
.sg-quote__role { font-family: var(--sg-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--sg-muted); }

/* ==========================================================================
   13. FAQ
   ========================================================================== */

.sg-faq { border-top: 1px solid var(--sg-rule); }
.sg-faq__item { border-bottom: 1px solid var(--sg-rule); }
.sg-faq__q {
	width: 100%; text-align: left; cursor: pointer;
	background: none; border: 0; padding: 26px 44px 26px 0;
	font-family: var(--sg-display); font-size: 18px; font-weight: 600;
	letter-spacing: -.015em; color: var(--sg-ink);
	position: relative;
	display: block;
}
.sg-faq__q::after {
	content: ""; position: absolute; right: 6px; top: 50%;
	width: 11px; height: 11px;
	border-right: 1.5px solid var(--sg-signal);
	border-bottom: 1.5px solid var(--sg-signal);
	transform: translateY(-70%) rotate(45deg);
	transition: transform .26s cubic-bezier(.4,0,.2,1);
}
.sg-faq__item.is-open .sg-faq__q::after { transform: translateY(-30%) rotate(225deg); }
.sg-faq__a { display: none; padding: 0 60px 28px 0; }
.sg-faq__item.is-open .sg-faq__a { display: block; }
.sg-faq__a p:last-child { margin-bottom: 0; }

/* ==========================================================================
   14. Closing CTA
   ========================================================================== */

.sg-cta { padding: 96px 0; }
.sg-cta__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 60px; align-items: center; }
.sg-cta h2 { margin-bottom: 16px; }
.sg-cta p { margin-bottom: 0; }
.sg-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.sg-cta__note {
	font-family: var(--sg-mono); font-size: 12px; letter-spacing: .08em;
	color: rgba(255,255,255,.45); margin: 18px 0 0;
}

/* ==========================================================================
   15. Pages, posts, forms
   ========================================================================== */

.sg-pagehead { padding: 68px 0 42px; border-bottom: 1px solid var(--sg-rule); }
.sg-pagehead h1 { margin: 14px 0 0; }
.sg-pagehead p { margin: 14px 0 0; max-width: 60ch; }

.sg-body { padding: 66px 0 92px; }
.sg-body img { border-radius: var(--sg-radius); margin: 1.8em 0; }
.sg-body h2 { margin-top: 1.5em; }
.sg-body h3 { margin-top: 1.4em; }

.sg-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.sg-post {
	background: var(--sg-card); border: 1px solid var(--sg-rule);
	border-radius: var(--sg-radius); overflow: hidden;
	transition: transform .22s ease, box-shadow .22s ease;
}
.sg-post:hover { transform: translateY(-3px); box-shadow: var(--sg-lift); }
.sg-post__in { padding: 26px 24px; }
.sg-post__date { font-family: var(--sg-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--sg-muted); }
.sg-post h3 { margin: 10px 0 10px; font-size: 20px; }
.sg-post p { font-size: 15px; margin-bottom: 0; }

.sg-pager { display: flex; gap: 6px; margin-top: 48px; flex-wrap: wrap; font-family: var(--sg-mono); font-size: 13px; }
.sg-pager .page-numbers {
	padding: 9px 14px; border: 1px solid var(--sg-rule);
	border-radius: var(--sg-radius); background: var(--sg-card);
}
.sg-pager .current, .sg-pager .page-numbers:hover { background: var(--sg-ink); border-color: var(--sg-ink); color: #fff; }

.sg-form { display: grid; gap: 18px; }
.sg-form__row { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
.sg-field label {
	display: block;
	font-family: var(--sg-mono); font-size: 11px; letter-spacing: .12em;
	text-transform: uppercase; color: var(--sg-muted); margin-bottom: 8px;
}
.sg-field input, .sg-field textarea, .sg-field select {
	width: 100%;
	font-family: var(--sg-body-face); font-size: 16px; color: var(--sg-ink);
	padding: 13px 15px;
	background: var(--sg-card);
	border: 1px solid var(--sg-rule);
	border-radius: var(--sg-radius);
	transition: border-color .18s ease, box-shadow .18s ease;
}
.sg-field input:focus, .sg-field textarea:focus, .sg-field select:focus {
	outline: none;
	border-color: var(--sg-signal);
	box-shadow: 0 0 0 3px var(--sg-signal-lo);
}
.sg-field textarea { min-height: 150px; resize: vertical; }
.sg-hp { position: absolute; left: -9999px; }

.sg-notice {
	padding: 14px 17px; border-radius: var(--sg-radius);
	font-size: 15px; margin-bottom: 20px; border: 1px solid;
}
.sg-notice--ok { background: var(--sg-pass-lo); color: #14724e; border-color: rgba(31,157,107,.3); }
.sg-notice--err { background: rgba(200, 44, 44, .07); color: #9c2626; border-color: rgba(200,44,44,.25); }

/* ---- Contact details ---- */

.sg-contact { list-style: none; padding: 0; margin: 0; }
.sg-contact li { padding: 16px 0; border-bottom: 1px solid var(--sg-rule); display: flex; justify-content: space-between; gap: 18px; align-items: baseline; }
.sg-contact__k { font-family: var(--sg-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--sg-muted); flex: 0 0 auto; }
.sg-contact__v { font-family: var(--sg-mono); font-size: 14px; color: var(--sg-ink); text-align: right; word-break: break-word; }

/* ---- Booking ---- */

.sg-booking { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 44px; align-items: start; }
.sg-booking__side { position: sticky; top: calc(var(--sg-header) + 24px); }
.sg-booking__cal { background: var(--sg-card); border: 1px solid var(--sg-rule); border-radius: var(--sg-radius); overflow: hidden; min-height: 700px; }

/* ==========================================================================
   16. Footer
   ========================================================================== */

.sg-footer { background: var(--sg-ink-deep); color: rgba(255,255,255,.6); padding: 76px 0 0; }
.sg-footer a { color: rgba(255,255,255,.6); }
.sg-footer a:hover { color: var(--sg-signal); }
.sg-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 46px; }
.sg-footer h4 {
	font-family: var(--sg-mono); font-size: 11px; letter-spacing: .14em;
	text-transform: uppercase; color: rgba(255,255,255,.4); font-weight: 500;
	margin-bottom: 18px;
}
.sg-footer ul { list-style: none; padding: 0; margin: 0; }
.sg-footer li { margin-bottom: 10px; font-size: 15px; }
.sg-footer__brand .sg-brand__text { color: #fff; }
.sg-footer__blurb { font-size: 15px; margin: 16px 0 0; max-width: 34ch; }

.sg-social { display: flex; gap: 8px; margin-top: 22px; }
.sg-social a {
	width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid rgba(255,255,255,.14); border-radius: var(--sg-radius);
	color: rgba(255,255,255,.7);
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.sg-social a:hover { background: var(--sg-signal); border-color: var(--sg-signal); color: #fff; }
.sg-social svg { width: 15px; height: 15px; fill: currentColor; }

.sg-footer__end {
	margin-top: 58px; padding: 22px 0 30px;
	border-top: 1px solid rgba(255,255,255,.1);
	display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
	font-family: var(--sg-mono); font-size: 11.5px; letter-spacing: .06em;
	color: rgba(255,255,255,.4);
}
.sg-footer__end ul { display: flex; gap: 22px; }
.sg-footer__end li { margin: 0; }

/* ==========================================================================
   17. Reveal
   ========================================================================== */

.sg-rise { opacity: 0; transform: translateY(16px); transition: opacity .55s cubic-bezier(.4,0,.2,1), transform .55s cubic-bezier(.4,0,.2,1); }
.sg-rise.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   18. WordPress core
   ========================================================================== */

.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { margin-left: auto; margin-right: auto; }
.wp-caption-text, .wp-block-image figcaption { font-family: var(--sg-mono); font-size: 12px; color: var(--sg-muted); text-align: center; }
.sticky, .gallery-caption, .bypostauthor { display: block; }

/* ==========================================================================
   19. Responsive
   ========================================================================== */

@media (max-width: 1080px) {
	.sg-hero__grid { grid-template-columns: 1fr; gap: 48px; }
	.sg-about { grid-template-columns: 1fr; gap: 40px; }
	.sg-quotes { grid-template-columns: 1fr; }
	.sg-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sg-cta__grid { grid-template-columns: 1fr; gap: 32px; }
	.sg-footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
	.sg-step { grid-template-columns: 54px 1fr; gap: 20px; }
	.sg-step p { grid-column: 2; }
}

@media (max-width: 860px) {
	.sg-burger { display: block; }
	.sg-header__end .sg-btn { display: none; }
	.sg-nav {
		position: fixed; top: var(--sg-header); left: 0; width: 100%;
		max-height: calc(100vh - var(--sg-header)); overflow-y: auto;
		background: var(--sg-card); border-top: 1px solid var(--sg-rule);
		box-shadow: var(--sg-lift);
		opacity: 0; visibility: hidden; transform: translateY(-8px);
		transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
	}
	.sg-nav.is-open { opacity: 1; visibility: visible; transform: none; }
	.sg-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 26px 26px; }
	.sg-nav li { border-bottom: 1px solid var(--sg-rule-soft); }
	.sg-nav a { display: block; padding: 15px 0; font-size: 16px; }
	.sg-nav a::after { display: none; }
	.sg-nav .sub-menu { display: flex; position: static; border: 0; box-shadow: none; padding: 0 0 8px 14px; }

	.sg-sec { padding: 72px 0; }
	.sg-services { grid-template-columns: 1fr; }
	.sg-booking { grid-template-columns: 1fr; }
	.sg-booking__side { position: static; }
	.sg-form__row { grid-template-columns: 1fr; }
	.sg-posts { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
	:root { --sg-gut: 20px; }
	body { font-size: 16px; }
	.sg-hero { padding: 56px 0 68px; }
	.sg-hero__meta { gap: 20px 30px; }
	.sg-service { padding: 32px 24px; }
	.sg-row { grid-template-columns: 54px 1fr; gap: 10px; row-gap: 6px; }
	.sg-row__state { grid-column: 2; justify-self: start; }
	.sg-panel { font-size: 12px; }
	.sg-footer__grid { grid-template-columns: 1fr; gap: 32px; }
	.sg-footer__end { flex-direction: column; align-items: flex-start; }
	.sg-about__stamp { right: 10px; bottom: -12px; }
	.sg-contact li { flex-direction: column; gap: 4px; }
	.sg-contact__v { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
	.sg-rise { opacity: 1; transform: none; }
}

/* ==========================================================================
   20. Integrations grid
   ========================================================================== */

.sg-tools {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--sg-rule);
	border: 1px solid var(--sg-rule);
	border-radius: var(--sg-radius);
	overflow: hidden;
}
.sg-tool {
	background: var(--sg-card);
	padding: 26px 24px;
	display: flex;
	align-items: center;
	gap: 16px;
	transition: background .2s ease;
}
.sg-tool:hover { background: #fcfdfe; }

.sg-tool__glyph {
	flex: 0 0 auto;
	width: 42px; height: 42px;
	display: inline-flex;
	align-items: center; justify-content: center;
	border-radius: 8px;
	background: var(--sg-paper);
	border: 1px solid var(--sg-rule-soft);
	font-family: var(--sg-display);
	font-size: 17px; font-weight: 600;
	color: var(--sg-ink);
	letter-spacing: -.02em;
	overflow: hidden;
}
.sg-tool__glyph img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }

.sg-tool__text { display: flex; flex-direction: column; min-width: 0; }
.sg-tool__name {
	font-family: var(--sg-display);
	font-size: 16px; font-weight: 600;
	color: var(--sg-ink);
	letter-spacing: -.015em;
	line-height: 1.3;
}
.sg-tool__domain {
	font-family: var(--sg-mono);
	font-size: 12px;
	color: var(--sg-muted);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.sg-tools__note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 28px 0 0;
	font-family: var(--sg-mono);
	font-size: 11.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sg-muted);
	text-align: center;
}
.sg-tools__dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--sg-pass);
	box-shadow: 0 0 0 3px var(--sg-pass-lo);
	flex: 0 0 auto;
}

@media (max-width: 900px) {
	.sg-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.sg-tools { grid-template-columns: 1fr; }
	.sg-tool { padding: 20px; }
	.sg-tools__note { letter-spacing: .08em; line-height: 1.6; }
}

/* ==========================================================================
   21. Homepage booking
   ========================================================================== */

.sg-book { scroll-margin-top: calc(var(--sg-header) + 16px); }
.sg-book__grid {
	display: grid;
	grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}
.sg-book__intro h2 { margin: 16px 0 14px; }
.sg-book__subhead {
	font-size: 15px;
	margin: 30px 0 4px;
}
.sg-book__intro .sg-service__list { margin-top: 0; }
.sg-book__fallback {
	margin: 26px 0 0;
	font-size: 14px;
	color: var(--sg-muted);
}
.sg-book__fallback a {
	font-family: var(--sg-mono);
	font-size: 13px;
	color: var(--sg-ink);
	border-bottom: 1px solid var(--sg-rule);
}
.sg-book__fallback a:hover { color: var(--sg-signal); border-color: var(--sg-signal); }

.sg-book__cal {
	background: var(--sg-paper);
	border: 1px solid var(--sg-rule);
	border-radius: var(--sg-radius);
	overflow: hidden;
	min-height: 700px;
}

@media (max-width: 900px) {
	.sg-book__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ==========================================================================
   22. Emergency contact card
   ========================================================================== */

.sg-ice-lock {
	text-align: center;
	background: var(--sg-card);
	border: 1px solid var(--sg-rule);
	border-radius: var(--sg-radius);
	padding: 44px 32px;
	box-shadow: var(--sg-lift);
}
.sg-ice-lock__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 54px; height: 54px; border-radius: 50%;
	background: var(--sg-signal-lo); color: var(--sg-signal);
	margin-bottom: 18px;
}
.sg-ice-lock__icon svg { width: 24px; height: 24px; }
.sg-ice-form { margin-top: 22px; display: grid; gap: 14px; }
.sg-ice-form input { text-align: center; font-family: var(--sg-mono); letter-spacing: .04em; }
.sg-ice-hint { font-family: var(--sg-mono); font-size: 11.5px; letter-spacing: .06em; color: var(--sg-muted); margin: 22px 0 0; }

.sg-ice-head {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; flex-wrap: wrap;
	padding-bottom: 20px; margin-bottom: 4px;
	border-bottom: 2px solid var(--sg-signal);
}

.sg-ice-list { list-style: none; padding: 0; margin: 0; }
.sg-ice-item {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; flex-wrap: wrap;
	padding: 20px 0; border-bottom: 1px solid var(--sg-rule);
}
.sg-ice-item__who { display: flex; flex-direction: column; }
.sg-ice-item__name { font-family: var(--sg-display); font-size: 18px; font-weight: 600; color: var(--sg-ink); letter-spacing: -.02em; }
.sg-ice-item__rel { font-family: var(--sg-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--sg-muted); }
.sg-ice-item__note { font-size: 14px; margin-top: 4px; }
.sg-ice-item__actions { display: flex; align-items: center; gap: 14px; }
.sg-ice-num { font-family: var(--sg-mono); font-size: 15px; color: var(--sg-ink); white-space: nowrap; }
.sg-ice-call { padding: 10px 22px; font-size: 14px; }

.sg-ice-notes { list-style: none; padding: 0; margin: 0; }
.sg-ice-notes li { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--sg-rule); }
.sg-ice-notes__label { font-family: var(--sg-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--sg-muted); }
.sg-ice-notes__value { font-family: var(--sg-mono); font-size: 14px; color: var(--sg-ink); text-align: right; }

@media (max-width: 520px) {
	.sg-ice-item { flex-direction: column; align-items: flex-start; gap: 12px; }
	.sg-ice-item__actions { width: 100%; justify-content: space-between; }
}