/*
Theme Name: Carlton Electric
Theme URI: https://carltonelectricllc.com/
Author: XAD
Author URI: https://xad.agency/
Description: A bold, minimal one-page theme for Carlton Electric LLC — an owner-operated electrical contractor in Southwest Florida. Every section is an Elementor widget as well as a theme template, so the page a visitor sees and the page the client opens in the builder are the same page.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.7
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: carlton-electric
Tags: one-column, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks
*/

/* ═══════════════════════════════════════════════════════════════════
   CARLTON ELECTRIC

   The design is bold and minimal, which here means three decisions:

   · ONE accent, used rarely. The amber from the stripped conductor in
     the logo appears on the eyebrow rule, the primary hero button and
     nothing else. A second accent would halve the force of the first.
   · SQUARE. The corner radius ships at 4px. Softness reads as friendly;
     this brand reads as competent.
   · TYPE DOES THE WORK. Headlines are heavy and tight, copy is quiet,
     and there are no decorative boxes, shadows or gradients between
     them. What looks like layout is almost always just a hairline.

   Every colour, every size and every corner below comes from a custom
   property that inc/palette.php prints into <head>. Nothing here
   hardcodes a brand value, so the client's choices in the panel really
   do repaint the site.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Defaults, in case the inline tokens never arrive ─────────────── */

:root {
	--navy: #252D63;
	--navy-hover: #1F2653;
	--navy-soft: #D3D5E0;
	--navy-wash: #EDEEF3;
	--on-navy: #FFFFFF;
	--navy-btn: #252D63;
	--navy-btn-hover: #202755;
	--on-navy-btn: #FFFFFF;
	--deep: #141A3D;
	--deep-hover: #262B4C;
	--on-deep: #FFFFFF;
	--volt: #F6B21B;
	--volt-hover: #D89C17;
	--volt-soft: #FDF0D4;
	--volt-wash: #FEF8EA;
	--on-volt: #11141F;
	--cyan: #1AB5F1;
	--cyan-soft: #DDF3FD;
	--on-cyan: #11141F;
	--volt-on-dark: #F6B21B;
	--cyan-on-dark: #1AB5F1;
	--ink: #161A24;
	--ink-soft: #4A4F5C;
	--paper: #FFFFFF;
	--mist: #F2F4F8;
	--mist-deep: #E7E9ED;
	--muted: #596073;
	--line: #DFE3EC;
	--line-strong: #AEB1B8;
	--danger: #B4271C;
	--danger-soft: #F7DDDB;

	--font-head: "Archivo", system-ui, -apple-system, sans-serif;
	--font-body: "Inter", system-ui, -apple-system, sans-serif;
	--base: 16px;

	--radius: 4px;
	--radius-sm: 2px;
	--radius-lg: 8px;
	--pill: 999px;
	--wrap: 1200px;
	--section-y: clamp(60px, 7vw, 104px);
	--logo-h: 64px;
	--logo-foot-h: 86px;
	--header-h: 94px;

	--gutter: clamp(16px, 4vw, 32px);
	--ease: cubic-bezier(.22, .61, .36, 1);
}

/* ── Reset ────────────────────────────────────────────────────────── */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* The sticky header would otherwise cover whatever an anchor lands on. */
	scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--base);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

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

a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy-hover); }

button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
	font-family: var(--font-head);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.022em;
	color: var(--navy);
	margin: 0 0 .5em;
	text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
	outline: 3px solid var(--volt);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

::selection { background: var(--navy); color: var(--on-navy); }

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

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--navy);
	color: var(--on-navy);
	padding: 12px 20px;
	font-weight: 700;
}
.skip-link:focus { left: 8px; top: 8px; color: var(--on-navy); }

/* ── Layout ───────────────────────────────────────────────────────── */

.ce-wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.ce-wrap--read { max-width: 760px; }

.ce-main { display: block; }

/*
 * Rhythm is PADDING, never margin.
 *
 * Elementor puts each section in its own flex container, and flex rows do
 * not collapse margins — a design spaced with margins draws every gap
 * twice the moment it is opened in the builder. Padding is immune to that,
 * so the theme's page and the builder's page measure identically.
 */
.ce-sec {
	position: relative;
	padding-block: var(--section-y);
}
.ce-sec--paper { background: var(--paper); }
.ce-sec--mist  { background: var(--mist); }
.ce-sec--navy  { background: var(--deep); color: rgba(255, 255, 255, .82); }
.ce-sec--navy h1, .ce-sec--navy h2, .ce-sec--navy h3 { color: #fff; }

/*
 * :not(.ce-btn) earns its keep. `.ce-sec--navy a` is one point more specific
 * than `.ce-btn--volt`, so without it the amber button inside the hero takes
 * the band's white link colour — white on amber, 1.86:1, the brightest and
 * least readable thing on the page. Measured, not guessed.
 */
.ce-sec--navy a:not(.ce-btn) { color: #fff; }

/* ── Type blocks ──────────────────────────────────────────────────── */

.ce-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-head);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--navy);
	margin-bottom: 14px;
}
.ce-eyebrow i {
	display: block;
	width: 26px;
	height: 3px;
	background: var(--volt);
	flex: none;
}
.ce-eyebrow--light { color: #fff; }

/*
 * A section head over the navy band draws a plain eyebrow — the helper does
 * not know what it is sitting on — so the band says it here instead. Without
 * this the eyebrow is brand navy on deep navy and all but invisible.
 */
.ce-sec--navy .ce-eyebrow { color: #fff; }

.ce-head { max-width: 760px; margin-bottom: clamp(28px, 3.4vw, 46px); }
.ce-head--center { margin-inline: auto; text-align: center; }
.ce-head--center .ce-eyebrow { justify-content: center; }

.ce-head__title {
	font-size: clamp(30px, 4vw, 46px);
	margin-bottom: 0;
}
.ce-head__lead {
	margin-top: 16px;
	font-size: clamp(16px, 1.2vw, 17.5px);
	color: var(--muted);
	max-width: 62ch;
}
.ce-head--center .ce-head__lead { margin-inline: auto; }
.ce-sec--navy .ce-head__lead { color: rgba(255, 255, 255, .78); }

/* ── Buttons ──────────────────────────────────────────────────────── */

.ce-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 50px;
	padding: 13px 24px;
	border: 2px solid transparent;
	border-radius: var(--radius);
	font-family: var(--font-head);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .005em;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.ce-btn:hover { transform: translateY(-1px); }
.ce-btn:active { transform: translateY(0); }

.ce-btn--solid { background: var(--navy-btn); color: var(--on-navy-btn); }
.ce-btn--solid:hover { background: var(--navy-btn-hover); color: var(--on-navy-btn); }

.ce-btn--volt { background: var(--volt); color: var(--on-volt); }
.ce-btn--volt:hover { background: var(--volt-hover); color: var(--on-volt); }

.ce-btn--white { background: #fff; color: var(--navy); }
.ce-btn--white:hover { background: #fff; color: var(--navy-hover); border-color: var(--volt); }

.ce-btn--ghost {
	background: transparent;
	color: var(--navy);
	border-color: var(--line-strong);
}
.ce-btn--ghost:hover { border-color: var(--navy); color: var(--navy); background: var(--navy-wash); }
.ce-sec--navy .ce-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .45); }
.ce-sec--navy .ce-btn--ghost:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; }

.ce-btn--link {
	background: none;
	padding: 6px 0;
	min-height: 0;
	color: var(--navy);
	text-decoration: underline;
}

.ce-btn--lg { min-height: 56px; font-size: 16px; padding-inline: 30px; }
.ce-btn--block { width: 100%; }

.ce-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

/* ── Small shared pieces ──────────────────────────────────────────── */

.ce-ticks { display: grid; gap: 12px; margin: 26px 0 0; }
.ce-ticks li {
	display: grid;
	grid-template-columns: 22px 1fr;
	gap: 12px;
	align-items: start;
	font-size: 15.5px;
}
.ce-ticks li svg { color: var(--volt); margin-top: 3px; }
.ce-sec--navy .ce-ticks li svg { color: var(--volt-on-dark); }

.ce-licence {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 22px 0 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--muted);
}
.ce-licence svg { color: var(--navy); flex: none; }
.ce-licence--hero { color: rgba(255, 255, 255, .8); }
.ce-licence--hero svg { color: var(--volt-on-dark); }
.ce-licence--foot { color: rgba(255, 255, 255, .62); margin-top: 18px; }
.ce-licence--foot svg { color: var(--volt-on-dark); }
.ce-licence--drawer { margin-top: 16px; }
.ce-licence--panel { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }

.ce-badge {
	display: inline-grid;
	place-items: center;
	width: 40px; height: 40px;
	border-radius: var(--radius);
	flex: none;
}
.ce-badge--navy { background: var(--navy); color: var(--on-navy); }
.ce-badge--volt { background: var(--volt); color: var(--on-volt); }
.ce-badge--cyan { background: var(--cyan); color: var(--on-cyan); }
.ce-badge--white { background: #fff; color: var(--navy); }
.ce-badge--outline { border: 2px solid var(--line); color: var(--navy); }

.ce-round {
	display: inline-grid;
	place-items: center;
	width: 46px; height: 46px;
	border: 2px solid var(--line);
	border-radius: var(--radius);
	background: var(--paper);
	color: var(--navy);
	cursor: pointer;
	transition: border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.ce-round:hover { border-color: var(--navy); background: var(--navy); color: var(--on-navy); }
.ce-round[disabled] { opacity: .35; cursor: default; }
.ce-round[disabled]:hover { background: var(--paper); color: var(--navy); border-color: var(--line); }

/* ═══════════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════════ */

.ce-headwrap {
	position: relative;
	z-index: 60;
	background: var(--paper);
	border-bottom: 1px solid var(--line);
}
.ce-headwrap.is-sticky { position: sticky; top: 0; }

/*
 * Over a hero the header floats on the photograph. It keeps its own height
 * either way, so nothing below it moves when it changes state — the whole
 * transition is colour, which is what makes it feel smooth rather than
 * jumpy.
 */
body.ce-transparent-header .ce-headwrap {
	position: absolute;
	inset: 0 0 auto;
	background: transparent;
	border-bottom-color: transparent;
}
body.ce-transparent-header .ce-headwrap.is-sticky { position: fixed; }
body.ce-transparent-header .ce-headwrap.is-stuck {
	position: fixed;
	background: var(--paper);
	border-bottom-color: var(--line);
	box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 10px 30px -22px rgba(20, 26, 61, .5);
	animation: ce-drop .26s var(--ease);
}
@keyframes ce-drop { from { transform: translateY(-100%); } to { transform: translateY(0); } }

.ce-headwrap.is-sticky:not(.is-stuck) { transition: background .22s var(--ease), border-color .22s var(--ease); }

.ce-header__in {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2.6vw, 38px);
	min-height: var(--header-h);
}

.ce-brand { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.ce-brand__logo { height: var(--logo-h); width: auto; }
.ce-brand__text {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 20px;
	letter-spacing: -.01em;
	color: var(--navy);
}
.ce-brand--foot .ce-brand__logo { height: var(--logo-foot-h); }

.ce-nav { margin-inline-start: auto; }
.ce-nav ul { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 28px); }
.ce-nav a {
	display: inline-block;
	padding: 10px 0;
	font-family: var(--font-head);
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: .005em;
	color: var(--ink);
	text-decoration: none;
	position: relative;
}
.ce-nav a::after {
	content: "";
	position: absolute;
	left: 0; right: 100%; bottom: 4px;
	height: 2px;
	background: var(--volt);
	transition: right .24s var(--ease);
}
.ce-nav a:hover::after,
.ce-nav .current-menu-item > a::after,
.ce-nav .current_page_item > a::after { right: 0; }
.ce-nav a:hover { color: var(--navy); }

/* A second level, for a client who adds one. */
.ce-nav li { position: relative; }
.ce-nav .sub-menu {
	position: absolute;
	top: 100%; left: -16px;
	display: block;
	min-width: 230px;
	padding: 8px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: 0 24px 48px -28px rgba(20, 26, 61, .55);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
	z-index: 5;
}
.ce-nav li:hover > .sub-menu,
.ce-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.ce-nav .sub-menu a {
	display: block;
	padding: 9px 12px;
	border-radius: var(--radius-sm);
	/*
	 * Pinned, not inherited. The transparent-header rule below turns the
	 * TOP-LEVEL links white; a descendant selector would turn these white
	 * too, on their own white panel, and the menu would read as an empty
	 * box.
	 */
	color: var(--ink);
}
.ce-nav .sub-menu a::after { content: none; }
.ce-nav .sub-menu a:hover { background: var(--navy-wash); color: var(--navy); }

body.ce-transparent-header .ce-headwrap:not(.is-stuck) .ce-nav > ul > li > a { color: #fff; }
body.ce-transparent-header .ce-headwrap:not(.is-stuck) .ce-nav > ul > li > a:hover { color: #fff; }
body.ce-transparent-header .ce-headwrap:not(.is-stuck) .ce-brand__text { color: #fff; }
body.ce-transparent-header .ce-headwrap:not(.is-stuck) .ce-brand__logo { filter: brightness(0) invert(1); }

.ce-header__act { display: flex; align-items: center; gap: 12px; flex: none; }

.ce-headphone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 4px;
	font-family: var(--font-head);
	font-size: 15px;
	font-weight: 700;
	color: var(--navy);
	text-decoration: none;
	white-space: nowrap;
}
.ce-headphone svg { color: var(--volt); }
.ce-headphone:hover { color: var(--navy-hover); }
body.ce-transparent-header .ce-headwrap:not(.is-stuck) .ce-headphone { color: #fff; }
body.ce-transparent-header .ce-headwrap:not(.is-stuck) .ce-headphone svg { color: var(--volt-on-dark); }

.ce-burger {
	display: none;
	place-items: center;
	width: 46px; height: 46px;
	border: 2px solid var(--line);
	border-radius: var(--radius);
	background: transparent;
	color: var(--navy);
	cursor: pointer;
}
body.ce-transparent-header .ce-headwrap:not(.is-stuck) .ce-burger { color: #fff; border-color: rgba(255, 255, 255, .4); }

/* ── Drawer ───────────────────────────────────────────────────────── */

.ce-scrim {
	position: fixed;
	inset: 0;
	background: rgba(20, 26, 61, .55);
	backdrop-filter: blur(2px);
	z-index: 90;
	opacity: 0;
	transition: opacity .24s var(--ease);
}
.ce-scrim.is-open { opacity: 1; }

.ce-drawer {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(400px, 90vw);
	z-index: 100;
	background: var(--paper);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform .3s var(--ease);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.ce-drawer.is-open { transform: translateX(0); }

.ce-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px var(--gutter);
	border-bottom: 1px solid var(--line);
}
.ce-drawer__close {
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	border: 2px solid var(--line);
	border-radius: var(--radius);
	background: none;
	color: var(--navy);
	cursor: pointer;
}
.ce-drawer__close:hover { border-color: var(--navy); }

.ce-drawer__nav { padding: 10px var(--gutter); flex: 1 1 auto; }
.ce-drawer__nav ul { display: block; }
.ce-drawer__nav li { border-bottom: 1px solid var(--line); }
.ce-drawer__nav li:last-child { border-bottom: 0; }
.ce-drawer__nav a {
	display: block;
	padding: 15px 0;
	min-height: 48px;
	font-family: var(--font-head);
	font-size: 17px;
	font-weight: 700;
	color: var(--navy);
	text-decoration: none;
}
.ce-drawer__nav .sub-menu {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	box-shadow: none;
	border: 0;
	padding: 0 0 10px 14px;
	min-width: 0;
	background: none;
}
.ce-drawer__nav .sub-menu a { font-size: 15px; font-weight: 500; padding: 11px 0; min-height: 44px; }

.ce-drawer__foot {
	padding: 22px var(--gutter) 32px;
	border-top: 1px solid var(--line);
	display: grid;
	gap: 10px;
	background: var(--mist);
}
.ce-drawer__foot > a {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	font-weight: 600;
	font-size: 15px;
	color: var(--ink);
	text-decoration: none;
	word-break: break-word;
}
.ce-drawer__foot > a svg { color: var(--navy); flex: none; }
.ce-drawer__foot .ce-btn { margin-top: 6px; }

/* ── The bar along the bottom of a phone ──────────────────────────── */

.ce-stickybar {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 70;
	display: none;
	background: var(--paper);
	border-top: 1px solid var(--line);
	padding-bottom: env(safe-area-inset-bottom);
	box-shadow: 0 -8px 26px -22px rgba(20, 26, 61, .6);
}
.ce-stickybar__in { display: grid; grid-template-columns: repeat(3, 1fr); }
.ce-stickybar a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 60px;
	padding: 8px 4px;
	font-family: var(--font-head);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--navy);
	text-decoration: none;
	border-left: 1px solid var(--line);
}
.ce-stickybar a:first-child { border-left: 0; }
.ce-stickybar a.is-primary { background: var(--navy); color: var(--on-navy); }

/* ═══════════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════════ */

.ce-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: min(760px, 92vh);
	padding-block: calc(var(--header-h) + clamp(56px, 9vw, 120px)) 0;
	background: var(--deep);
	color: #fff;
	overflow: hidden;
}
.ce-hero--short { min-height: 0; padding-block: calc(var(--header-h) + clamp(44px, 6vw, 76px)) 0; }

.ce-hero__bg {
	position: absolute;
	inset: 0;
	background: var(--deep) center / cover no-repeat;
	/*
	 * The photograph is a real job, not a stock shot: busy, close and
	 * high-contrast. The scrim is heavy on purpose — the picture is the
	 * texture behind the words, not the subject of the band.
	 */
	opacity: .34;
	filter: saturate(.72);
}
.ce-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 26, 61, .86) 0%, rgba(20, 26, 61, .62) 42%, rgba(20, 26, 61, .92) 100%);
	pointer-events: none;
}

.ce-hero__in { position: relative; z-index: 2; padding-bottom: clamp(48px, 7vw, 92px); }

.ce-hero__title {
	font-size: clamp(38px, 6.4vw, 78px);
	line-height: .98;
	letter-spacing: -.03em;
	color: #fff;
	max-width: 16ch;
	margin-bottom: 0;
}
.ce-hero__title em {
	display: block;
	font-style: normal;
	width: fit-content;
	padding-bottom: 10px;
	border-bottom: 5px solid var(--volt);
}
.ce-hero--short .ce-hero__title { font-size: clamp(32px, 4.6vw, 56px); }

.ce-hero__lead {
	margin-top: 24px;
	max-width: 56ch;
	font-size: clamp(16px, 1.3vw, 18.5px);
	color: rgba(255, 255, 255, .84);
}

.ce-hero__facts {
	position: relative;
	z-index: 2;
	border-top: 1px solid rgba(255, 255, 255, .18);
	background: rgba(10, 14, 36, .42);
}
.ce-hero__factrow {
	display: flex;
	flex-wrap: wrap;
	gap: 10px clamp(20px, 3.4vw, 54px);
	padding-block: 18px;
}
.ce-fact {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-head);
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .9);
}
.ce-fact svg { color: var(--volt-on-dark); }

/* ── Badge strip ──────────────────────────────────────────────────── */

.ce-badges { padding-block: clamp(26px, 3vw, 40px); }
.ce-badges__row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(16px, 2.4vw, 36px);
}
.ce-badgecard {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-inline-start: clamp(16px, 2.4vw, 36px);
	border-left: 1px solid rgba(255, 255, 255, .16);
}
.ce-badgecard:first-child { border-left: 0; padding-inline-start: 0; }
.ce-sec--paper .ce-badgecard, .ce-sec--mist .ce-badgecard { border-left-color: var(--line); }

.ce-badgecard__mark {
	display: grid;
	place-items: center;
	width: 46px; height: 46px;
	flex: none;
	border-radius: var(--radius);
	background: var(--volt);
	color: var(--on-volt);
}
.ce-badgecard__text { display: grid; line-height: 1.25; }
.ce-badgecard__text b {
	font-family: var(--font-head);
	font-size: 15.5px;
	font-weight: 800;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #fff;
}
.ce-badgecard__text i {
	font-style: normal;
	font-size: 13.5px;
	color: rgba(255, 255, 255, .72);
	letter-spacing: .02em;
}
.ce-sec--paper .ce-badgecard__text b, .ce-sec--mist .ce-badgecard__text b { color: var(--navy); }
.ce-sec--paper .ce-badgecard__text i, .ce-sec--mist .ce-badgecard__text i { color: var(--muted); }

/* ═══════════════════════════════════════════════════════════════════
   ABOUT
   ═══════════════════════════════════════════════════════════════════ */

.ce-about__grid {
	display: grid;
	grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
	gap: clamp(28px, 5vw, 76px);
	align-items: center;
}

.ce-about__art { position: relative; }
.ce-about__shot { display: block; }
.ce-about__shot img {
	width: 100%;
	aspect-ratio: 4 / 4.4;
	object-fit: cover;
	border-radius: var(--radius);
}
.ce-about__inset {
	position: absolute;
	right: -18px;
	bottom: -26px;
	width: 46%;
	max-width: 230px;
	border: 6px solid var(--paper);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: 0 26px 50px -34px rgba(20, 26, 61, .8);
}
.ce-about__inset img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.ce-about__body .ce-head { margin-bottom: 20px; }
.ce-about__p { color: var(--muted); }

.ce-sign {
	margin-top: 26px;
	padding-top: 20px;
	border-top: 1px solid var(--line);
	display: grid;
	gap: 2px;
}
.ce-sign b {
	font-family: var(--font-head);
	font-size: 17px;
	font-weight: 800;
	color: var(--navy);
}
.ce-sign span { font-size: 13.5px; color: var(--muted); }

.ce-about__body .ce-btn { margin-top: 26px; }

/* ═══════════════════════════════════════════════════════════════════
   SERVICES
   ═══════════════════════════════════════════════════════════════════ */

.ce-services__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}

/*
 * One hairline grid rather than eight separate cards. It is the cheapest
 * way to make eight items read as one system, and it is what keeps the
 * section minimal when the content is not.
 */
.ce-svc {
	background: var(--paper);
	padding: clamp(22px, 2.4vw, 30px);
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: background .18s var(--ease);
}
.ce-svc:hover { background: var(--navy-wash); }

.ce-svc__mark {
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	border-radius: var(--radius);
	background: var(--navy);
	color: var(--on-navy);
}
.ce-svc--volt .ce-svc__mark { background: var(--volt); color: var(--on-volt); }
.ce-svc--cyan .ce-svc__mark { background: var(--cyan); color: var(--on-cyan); }

.ce-svc__title {
	font-size: 18px;
	letter-spacing: -.012em;
	margin: 0;
}
.ce-svc__list { display: grid; gap: 6px; }
.ce-svc__list li {
	position: relative;
	padding-inline-start: 15px;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--muted);
}
.ce-svc__list li::before {
	content: "";
	position: absolute;
	left: 0; top: .62em;
	width: 6px; height: 2px;
	background: var(--volt);
}

.ce-services__note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 26px 0 0;
	font-size: 15px;
	color: var(--muted);
}
.ce-services__note svg { color: var(--navy); }
.ce-services__note a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	font-family: var(--font-head);
	font-weight: 700;
	color: var(--navy);
	text-decoration: none;
	border-bottom: 2px solid var(--volt);
}

/* ═══════════════════════════════════════════════════════════════════
   WHY CHOOSE US
   ═══════════════════════════════════════════════════════════════════ */

.ce-why__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1px;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--radius);
	overflow: hidden;
}
.ce-sec--paper .ce-why__grid, .ce-sec--mist .ce-why__grid { background: var(--line); border-color: var(--line); }

/*
 * Five reasons in a four-across grid leave one card alone on a row beside
 * three empty cells, and an empty cell in a hairline grid is a hole. When
 * there are exactly five, the row becomes six tracks: three cards of two,
 * then two cards of three. Any other number falls back to auto-fit above.
 */
@media (min-width: 1024px) {
	.ce-why__grid:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.ce-why__grid:has(> :nth-child(5):last-child) > * { grid-column: span 2; }
	.ce-why__grid:has(> :nth-child(5):last-child) > :nth-child(4),
	.ce-why__grid:has(> :nth-child(5):last-child) > :nth-child(5) { grid-column: span 3; }
}

.ce-reason {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 16px;
	padding: clamp(24px, 2.6vw, 34px);
	background: var(--deep);
}
.ce-sec--paper .ce-reason { background: var(--paper); }
.ce-sec--mist .ce-reason { background: var(--mist); }

.ce-reason__n {
	font-family: var(--font-head);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .04em;
	color: var(--volt-on-dark);
	padding-top: 3px;
}
.ce-sec--paper .ce-reason__n, .ce-sec--mist .ce-reason__n { color: var(--volt-hover); }

.ce-reason h3 {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 18px;
	margin-bottom: 7px;
}
.ce-reason h3 svg { color: var(--volt-on-dark); flex: none; }
.ce-sec--paper .ce-reason h3 svg, .ce-sec--mist .ce-reason h3 svg { color: var(--navy); }
.ce-reason p { font-size: 15px; margin: 0; color: rgba(255, 255, 255, .76); }
.ce-sec--paper .ce-reason p, .ce-sec--mist .ce-reason p { color: var(--muted); }

/* ═══════════════════════════════════════════════════════════════════
   GALLERY
   ═══════════════════════════════════════════════════════════════════ */

.ce-gallery__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(12px, 1.6vw, 22px);
}
.ce-gallery__grid--1 { grid-template-columns: minmax(0, 1fr); }
.ce-gallery__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ce-gallery__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.ce-shotcard { margin: 0; position: relative; }
.ce-shotcard img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: var(--radius);
	background: var(--mist-deep);
}
.ce-shotcard figcaption {
	display: grid;
	gap: 2px;
	padding-top: 14px;
}
.ce-shotcard b {
	font-family: var(--font-head);
	font-size: 15.5px;
	font-weight: 800;
	color: var(--navy);
}
.ce-shotcard span { font-size: 13.5px; line-height: 1.45; color: var(--muted); }

/* ═══════════════════════════════════════════════════════════════════
   REVIEWS
   ═══════════════════════════════════════════════════════════════════ */

.ce-carousel { position: relative; }

.ce-carousel__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	gap: clamp(16px, 2.4vw, 32px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding-bottom: 4px;
}
.ce-carousel__track::-webkit-scrollbar { display: none; }

.ce-review {
	scroll-snap-align: center;
	margin: 0;
	padding: clamp(28px, 3.6vw, 48px);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--paper);
	text-align: center;
	display: grid;
	justify-items: center;
	gap: 16px;
}
.ce-sec--mist .ce-review { background: var(--paper); }

.ce-review__quote { color: var(--volt); line-height: 0; }

.ce-stars { display: inline-flex; gap: 3px; color: var(--volt); }
.ce-stars svg { fill: currentColor; stroke-width: 1; }

.ce-review blockquote {
	margin: 0;
	max-width: 62ch;
	font-family: var(--font-head);
	font-size: clamp(18px, 1.9vw, 24px);
	font-weight: 600;
	line-height: 1.42;
	letter-spacing: -.012em;
	color: var(--navy);
	text-wrap: pretty;
}
.ce-review figcaption { display: grid; gap: 2px; }
.ce-review figcaption b {
	font-family: var(--font-head);
	font-size: 15px;
	font-weight: 800;
	color: var(--ink);
}
.ce-review figcaption span { font-size: 13px; color: var(--muted); }

.ce-carousel__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 26px;
}
.ce-dots { display: flex; gap: 2px; }

/*
 * The dot is 9px; the thing a finger has to hit is 34px. The button is the
 * big one and the dot is drawn inside it, rather than making the dot itself
 * large enough — which would have been a row of buttons instead of a row of
 * dots.
 */
.ce-dots button {
	display: grid;
	place-items: center;
	width: 34px; height: 34px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.ce-dots button::before {
	content: "";
	display: block;
	width: 9px; height: 9px;
	border-radius: var(--pill);
	background: var(--line-strong);
	transition: background .18s var(--ease), width .18s var(--ease);
}
.ce-dots button.is-on::before { background: var(--navy); width: 24px; }

/* ═══════════════════════════════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════════════════════════════ */

.ce-faq__grid {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
	gap: clamp(28px, 5vw, 70px);
	align-items: start;
}
.ce-faq__side { position: sticky; top: calc(var(--header-h) + 24px); }
.ce-faq__side .ce-head { margin-bottom: 24px; }

.ce-faq__ask {
	padding: 22px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--paper);
}
.ce-faq__ask p { font-size: 15px; color: var(--muted); margin-bottom: 14px; }

.ce-faq__list { display: grid; }

.ce-q { border-top: 1px solid var(--line); }
.ce-q:last-child { border-bottom: 1px solid var(--line); }

.ce-q summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 20px 0;
	min-height: 48px;
	cursor: pointer;
	list-style: none;
	font-family: var(--font-head);
	font-size: clamp(16px, 1.3vw, 18.5px);
	font-weight: 700;
	letter-spacing: -.008em;
	color: var(--navy);
}
.ce-q summary::-webkit-details-marker { display: none; }
.ce-q summary:hover { color: var(--navy-hover); }

.ce-q__mark {
	display: grid;
	place-items: center;
	width: 32px; height: 32px;
	flex: none;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--navy);
	transition: transform .22s var(--ease), background .22s var(--ease), color .22s var(--ease);
}
.ce-q[open] .ce-q__mark { transform: rotate(45deg); background: var(--navy); color: var(--on-navy); border-color: var(--navy); }

.ce-q__a { padding: 0 48px 22px 0; }
.ce-q__a p { color: var(--muted); font-size: 15.5px; margin: 0; }

/* ═══════════════════════════════════════════════════════════════════
   THE BAND BEFORE THE FOOTER
   ═══════════════════════════════════════════════════════════════════ */

.ce-cta { overflow: hidden; }
.ce-cta__bg {
	position: absolute;
	inset: 0;
	background: center / cover no-repeat;
	opacity: .2;
}
.ce-cta--photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 26, 61, .85), rgba(20, 26, 61, .95));
}
.ce-cta__in { position: relative; z-index: 2; max-width: 820px; }
.ce-cta__title { font-size: clamp(30px, 4.4vw, 52px); color: #fff; margin-bottom: 0; }
.ce-cta__lead { margin-top: 18px; font-size: clamp(16px, 1.25vw, 18px); color: rgba(255, 255, 255, .82); }

/* ═══════════════════════════════════════════════════════════════════
   CONTACT
   ═══════════════════════════════════════════════════════════════════ */

.ce-contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}

.ce-panel {
	padding: clamp(24px, 2.8vw, 34px);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--mist);
	position: sticky;
	top: calc(var(--header-h) + 24px);
}
.ce-panel__title { font-size: 21px; margin-bottom: 8px; }
.ce-panel__lead { font-size: 14.5px; color: var(--muted); margin-bottom: 22px; }

.ce-reach { display: grid; gap: 18px; }
.ce-reach li { display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: start; }
.ce-reach__mark {
	display: grid;
	place-items: center;
	width: 42px; height: 42px;
	border-radius: var(--radius);
	background: var(--navy);
	color: var(--on-navy);
}
.ce-reach__body { display: grid; gap: 2px; min-width: 0; }
.ce-reach__body b {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
}
.ce-reach__body a, .ce-reach__body span { font-size: 15px; color: var(--ink); word-break: break-word; }
.ce-reach__body a { text-decoration: none; }
.ce-reach__body a:hover { text-decoration: underline; }
.ce-reach__big {
	font-family: var(--font-head);
	font-size: 21px !important;
	font-weight: 800;
	letter-spacing: -.015em;
	color: var(--navy) !important;
	line-height: 1.2;
}
.ce-reach__sub {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	font-size: 13.5px !important;
	color: var(--muted) !important;
}
.ce-reach__sub svg { color: var(--navy); }

.ce-ticks--panel { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); gap: 10px; }
.ce-ticks--panel li { font-size: 14px; }

/* ── The form ─────────────────────────────────────────────────────── */

.ce-form { margin-top: 4px; }
.ce-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}
.ce-field { display: grid; gap: 7px; grid-column: 1 / -1; }
.ce-field--half { grid-column: span 1; }

.ce-label {
	font-family: var(--font-head);
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--navy);
}
.ce-req { color: var(--danger); }
.ce-opt { font-weight: 500; color: var(--muted); letter-spacing: 0; }
.ce-hint { font-size: 13px; color: var(--muted); margin: -2px 0 2px; }

.ce-input {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 14px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	background: var(--paper);
	transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.ce-input:focus-within { border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-wash); }
.ce-input > svg { color: var(--muted); flex: none; }
.ce-input--area { align-items: start; padding-block: 12px; }

.ce-input input,
.ce-input select,
.ce-input textarea {
	flex: 1 1 auto;
	width: 100%;
	min-height: 50px;
	border: 0;
	background: none;
	font: inherit;
	font-size: 15px;
	color: var(--ink);
	padding: 0;
	outline: none;
}
.ce-input textarea { min-height: 120px; padding-block: 2px; resize: vertical; line-height: 1.6; }
.ce-input select { appearance: none; cursor: pointer; }

/*
 * The trailing chevron on a <select>. The icon set has one chevron and it
 * points right, which is correct everywhere else on the site — a dropdown is
 * the one place it has to point down.
 */
.ce-field--select .ce-input > svg:last-child {
	color: var(--navy);
	transform: rotate(90deg);
}
.ce-input ::placeholder { color: var(--muted); opacity: .85; }

.ce-count { font-size: 12px; color: var(--muted); justify-self: end; }

.ce-picks {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 10px;
}
.ce-pick {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px;
	min-height: 56px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	background: var(--paper);
	cursor: pointer;
	transition: border-color .16s var(--ease), background .16s var(--ease);
}
.ce-pick:hover { border-color: var(--navy); }
.ce-pick input {
	position: absolute;
	opacity: 0;
	width: 1px; height: 1px;
}
.ce-pick__box {
	display: grid;
	place-items: center;
	width: 20px; height: 20px;
	flex: none;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
	background: var(--paper);
	color: transparent;
	transition: background .14s var(--ease), border-color .14s var(--ease), color .14s var(--ease);
}
.ce-pick input:checked ~ .ce-pick__box { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.ce-pick:has(input:checked) { border-color: var(--navy); background: var(--navy-wash); }
.ce-pick input:focus-visible ~ .ce-pick__box { outline: 3px solid var(--volt); outline-offset: 2px; }
.ce-pick__media { display: none; }
.ce-pick__label { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ce-pick__label .ce-badge { width: 32px; height: 32px; }
.ce-pick__label b {
	font-family: var(--font-head);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--ink);
}

.ce-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ce-err { margin: 0; font-size: 12.5px; color: var(--danger); min-height: 0; }
.ce-err:empty { display: none; }
.ce-field.is-bad .ce-input { border-color: var(--danger); }

.ce-form__msg:empty { display: none; }
.ce-note {
	padding: 14px 16px;
	border-radius: var(--radius);
	font-size: 15px;
	margin: 0 0 18px;
	border-left: 4px solid;
}
.ce-note--ok { background: var(--navy-wash); border-left-color: var(--navy); color: var(--navy); }
.ce-note--bad { background: var(--danger-soft); border-left-color: var(--danger); color: var(--danger); }

.ce-form__foot { margin-top: 24px; display: grid; gap: 12px; }
.ce-form__privacy {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 12.5px;
	color: var(--muted);
}
.ce-form__privacy svg { color: var(--navy); flex: none; }

/* ═══════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════ */

.ce-footer {
	background: var(--deep);
	color: rgba(255, 255, 255, .74);
	padding-top: clamp(48px, 5.5vw, 78px);
	font-size: 14.5px;
}
.ce-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.3fr);
	gap: clamp(26px, 3.4vw, 50px);
	padding-bottom: clamp(36px, 4vw, 56px);
}
.ce-footer .ce-brand__logo { filter: brightness(0) invert(1); }
.ce-footer__about { margin-top: 18px; max-width: 42ch; line-height: 1.6; }

.ce-footer h3 {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 16px;
}
.ce-footer__col ul { display: grid; gap: 2px; }
.ce-footer__col a {
	display: inline-block;
	padding: 6px 0;
	min-height: 32px;
	color: rgba(255, 255, 255, .74);
	text-decoration: none;
}
.ce-footer__col a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--volt-on-dark); }

.ce-footer__contact { display: grid; gap: 16px; }
.ce-footer__contact li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; }
.ce-footer__contact svg { color: var(--volt-on-dark); margin-top: 3px; }
.ce-footer__contact span { display: grid; gap: 1px; min-width: 0; }
.ce-footer__contact b {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
}
.ce-footer__contact a { color: #fff; text-decoration: none; word-break: break-word; min-height: 0; padding: 0; }
.ce-footer__contact a:hover { text-decoration: underline; }

.ce-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	padding-block: 22px;
	border-top: 1px solid rgba(255, 255, 255, .14);
	font-size: 13px;
	color: rgba(255, 255, 255, .6);
}
.ce-footer__bottom ul { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.ce-footer__bottom a {
	display: inline-block;
	padding: 6px 0;
	min-height: 32px;
	color: rgba(255, 255, 255, .72);
	text-decoration: none;
}
.ce-footer__bottom a:hover { color: #fff; text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════
   PROSE, ARCHIVES AND THE ODD PAGE
   ═══════════════════════════════════════════════════════════════════ */

.ce-pagehead {
	padding-block: calc(var(--header-h) + 48px) 40px;
	background: var(--deep);
	color: #fff;
}
.ce-pagehead h1 { color: #fff; font-size: clamp(30px, 4.2vw, 48px); }
.ce-pagehead .ce-head__lead { color: rgba(255, 255, 255, .78); }
.ce-pagehead .ce-eyebrow { color: #fff; }

.ce-prose { font-size: 16.5px; line-height: 1.75; }
.ce-prose > * + * { margin-top: 1.1em; }
.ce-prose h2 { font-size: clamp(22px, 2.2vw, 30px); margin-top: 1.8em; }
.ce-prose h3 { font-size: clamp(18px, 1.6vw, 22px); margin-top: 1.6em; margin-bottom: .4em; }
.ce-prose ul, .ce-prose ol { padding-inline-start: 1.3em; }
.ce-prose ul { list-style: disc; }
.ce-prose ol { list-style: decimal; }
.ce-prose li { margin-bottom: .4em; }
.ce-prose a { color: var(--navy); }
.ce-prose img { border-radius: var(--radius); }
.ce-prose blockquote {
	margin: 1.4em 0;
	padding: 4px 0 4px 22px;
	border-left: 4px solid var(--volt);
	font-size: 18px;
	color: var(--navy);
}
.ce-prose table { width: 100%; border-collapse: collapse; }
.ce-prose th, .ce-prose td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }

.ce-text .ce-head { margin-bottom: 26px; }

.ce-grid { display: grid; gap: clamp(16px, 2vw, 26px); }
.ce-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.ce-card {
	display: block;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	background: var(--paper);
	transition: border-color .18s var(--ease);
}
.ce-card:hover { border-color: var(--navy); }
.ce-card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.ce-card__body { display: block; padding: 20px; }
.ce-card__title { font-size: 19px; margin-bottom: 8px; }
.ce-card__text { font-size: 14.5px; color: var(--muted); }
.ce-card__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 14px;
	font-family: var(--font-head);
	font-size: 14px;
	font-weight: 700;
	color: var(--navy);
}

.ce-listrows__list { display: grid; }
.ce-listrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 20px 0;
	min-height: 48px;
	border-bottom: 1px solid var(--line);
	text-decoration: none;
	color: inherit;
}
.ce-listrow:hover .ce-listrow__go { color: var(--navy); transform: translateX(3px); }
.ce-listrow__go { color: var(--muted); transition: transform .18s var(--ease), color .18s var(--ease); }

.pagination, .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 34px;
}
.page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 44px; min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	text-decoration: none;
	color: var(--navy);
	font-weight: 600;
}
.page-numbers.current, .page-numbers:hover { background: var(--navy); color: var(--on-navy); border-color: var(--navy); }

/* ═══════════════════════════════════════════════════════════════════
   ELEMENTOR
   ═══════════════════════════════════════════════════════════════════ */

/*
 * Each section is written into its own Elementor container so the client can
 * drop their own block between any two of ours. The wrapper carries no
 * spacing of its own — the section inside it already has its padding, and a
 * margin here would be drawn twice because flex rows do not collapse them.
 */
.ce-elsec { display: block; }
.ce-elsec > .ce-sec { margin: 0; }

/* Elementor's own container padding would inset a full-width band. */
.elementor .e-con > .e-con-inner > .elementor-widget-container > .ce-elsec,
.elementor .elementor-widget-container > .ce-elsec { margin: 0; }

/* The legacy section/column shape needs this said out loud. */
.elementor .elementor-widget-wrap > .elementor-element { width: 100%; }

/* The editor draws a placeholder for an empty widget; ours are never empty. */
.elementor-widget-ce_hero .elementor-widget-container { overflow: visible; }

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
	.ce-services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ce-headphone { display: none; }
}

@media (max-width: 980px) {
	.ce-nav { display: none; }
	.ce-burger { display: grid; }
	.ce-header__act { margin-inline-start: auto; }

	.ce-about__grid,
	.ce-faq__grid,
	.ce-contact__grid { grid-template-columns: minmax(0, 1fr); }

	.ce-faq__side, .ce-panel { position: static; }
	.ce-about__art { max-width: 520px; }
	.ce-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ce-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
	body.ce-has-stickybar { padding-bottom: 64px; }
	.ce-stickybar { display: block; }

	/*
	 * The header button comes out below 760px. Measured at 390px it pushed
	 * the row to 392px wide and the whole page scrolled sideways — and it is
	 * redundant there anyway: the same action is in the drawer and in the
	 * bar along the bottom.
	 */
	.ce-header__act .ce-btn { display: none; }

	.ce-hero { min-height: 0; padding-block: calc(var(--header-h) + 52px) 0; }
	.ce-hero__title { max-width: none; }
	.ce-hero__in { padding-bottom: 38px; }
	.ce-hero__factrow { gap: 10px 22px; }
	.ce-fact { font-size: 12px; }

	.ce-badges__row { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.ce-badgecard { border-left: 0; padding-inline-start: 0; }

	.ce-about__inset { right: 0; bottom: -18px; width: 40%; border-width: 4px; }

	.ce-services__grid { grid-template-columns: minmax(0, 1fr); }
	.ce-why__grid { grid-template-columns: minmax(0, 1fr); }

	.ce-q__a { padding-right: 0; }

	.ce-fields { grid-template-columns: minmax(0, 1fr); }
	.ce-field--half { grid-column: 1 / -1; }
	.ce-picks { grid-template-columns: minmax(0, 1fr); }

	.ce-footer__grid { grid-template-columns: minmax(0, 1fr); }
	.ce-footer__bottom { justify-content: flex-start; }
}

@media (max-width: 520px) {
	.ce-gallery__grid { grid-template-columns: minmax(0, 1fr); }
	.ce-btns .ce-btn { width: 100%; }
	.ce-shotcard img { aspect-ratio: 4 / 3; }
	.ce-about__shot img { aspect-ratio: 4 / 3.6; }
	/* Every tappable thing stays comfortably over the 44px guideline. */
	.ce-footer__col a,
	.ce-footer__bottom a,
	.ce-reach__body a { min-height: 40px; display: inline-flex; align-items: center; }
}

/* ── Preferences ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	.ce-carousel__track { scroll-behavior: auto; }
}

@media print {
	.ce-headwrap, .ce-drawer, .ce-scrim, .ce-stickybar, .ce-btns, .ce-carousel__nav { display: none !important; }
	.ce-hero, .ce-sec--navy, .ce-footer { background: #fff !important; color: #000 !important; }
	.ce-hero::after, .ce-hero__bg { display: none !important; }
	.ce-hero__title, .ce-cta__title { color: #000 !important; }
	body { font-size: 11pt; }
}