/* CustomWorks Studio website (customworks.studio) - first draft, Nov 1, 2026.
   Built on the CentricWise site's stylesheet (centricwise.com/assets/site.css), with the CustomWorks colors.
   Plain static pages: nothing is loaded from other servers (fonts and images are on our own server).
   Layout: a white header, a full-width photo hero with the slogan on a dark blue band (owner's mockup,
   cc_notes/customworks marketing site/home-mockup.jpg), then sections that alternate white and pale blue. */

/* Roboto Condensed (SIL Open Font License, fonts/OFL_roboto_condensed.txt) */
@font-face {
	font-family: 'Roboto Condensed';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(fonts/roboto-condensed-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Roboto Condensed';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(fonts/roboto-condensed-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The brand colors - close to CentricWise's (owner, Nov 1, 2026); navy is the logo's blue */
:root {
	color-scheme: light;
	--blue: #316cc0;        /* title bars, links */
	--blue-light: #378fe1;  /* light buttons */
	--navy: #003ba2;        /* the logo's blue: headings, dark buttons */
	--midnight: #000047;    /* the slogan band (70% see-through) and the dark band */
	--ink: #16243d;         /* text */
	--ink-soft: #4a5873;    /* secondary text */
	--pale: #eef3fa;        /* alternate section background */
	--line: #d5deeb;        /* borders */
	--white: #ffffff;
	--font-head: 'Roboto Condensed', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
	--font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--wrap: 1160px;
}

* { box-sizing: border-box; }
/* scroll-padding-top: room for the sticky header when a link jumps to a section (as on the CentricWise site) */
html { scroll-behavior: smooth; scroll-padding-top: 86px; }
@media (max-width: 859px) {
	html { scroll-padding-top: 130px; }
	html.js { scroll-padding-top: 72px; }
}
@media (max-width: 599px) {
	html { scroll-padding-top: 165px; }
	html.js { scroll-padding-top: 72px; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}
body {
	margin: 0;
	background: var(--white);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: var(--blue); }
a:focus-visible, .button:focus-visible { outline: 3px solid var(--blue-light); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 400; line-height: 1.15; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(34px, 5vw, 54px); color: var(--navy); }
h2 { font-size: clamp(28px, 3.4vw, 40px); color: var(--navy); }
h3 { font-size: 23px; }
p { margin: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: 20px; }

.button {
	display: inline-block;
	font-family: var(--font-head);
	font-size: 19px;
	letter-spacing: 0.02em;
	text-decoration: none;
	padding: 11px 26px;
	border: 0;
	border-radius: 4px;
	background: var(--blue-light);
	color: var(--white);
	cursor: pointer;
	transition: background 0.15s;
}
.button:hover { background: var(--blue); }
.button.dark { background: var(--navy); }
.button.dark:hover { background: var(--blue); }
.button.outline { background: transparent; color: var(--navy); border: 2px solid var(--navy); padding: 9px 22px; }
.button.outline:hover { background: var(--navy); color: var(--white); }
.eyebrow { font-family: var(--font-head); font-size: 16px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }

/* HEADER */
.site_header {
	position: sticky;
	top: env(safe-area-inset-top, 0px);
	z-index: 10;
	background: var(--white);
	border-bottom: 1px solid var(--line);
}
.site_header .wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 24px;
	padding-block: 14px;
}
.site_header .logo img { height: 42px; width: auto; }
.site_nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; }
.site_nav a { font-family: var(--font-head); font-size: 18px; color: var(--ink); text-decoration: none; }
.site_nav a:hover { color: var(--blue); }
.site_nav a[aria-current="page"] { color: var(--blue); }
.site_nav .button { color: var(--white); font-size: 17px; padding: 7px 18px; }

/* COMPACT MENU on tablets and phones (the same as the CentricWise site; assets/site.js) */
.menu_button { display: none; }
@media (max-width: 859px) {
	html.js .site_header .wrap { flex-wrap: wrap; padding-block: 10px; column-gap: 12px; }
	html.js .site_header .logo img { height: 34px; }
	html.js .menu_button {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		font-family: var(--font-head);
		font-size: 18px;
		color: var(--navy);
		background: var(--white);
		border: 2px solid var(--navy);
		border-radius: 4px;
		padding: 5px 12px;
		cursor: pointer;
	}
	html.js .menu_button:focus-visible { outline: 3px solid var(--blue-light); outline-offset: 2px; }
	html.js .menu_icon, html.js .menu_icon::before, html.js .menu_icon::after {
		display: block;
		width: 18px;
		height: 2px;
		background: var(--navy);
		transition: transform 0.2s, background 0.2s;
	}
	html.js .menu_icon { position: relative; }
	html.js .menu_icon::before, html.js .menu_icon::after { content: ""; position: absolute; left: 0; }
	html.js .menu_icon::before { top: -6px; }
	html.js .menu_icon::after { top: 6px; }
	html.js .menu_open .menu_icon { background: transparent; }
	html.js .menu_open .menu_icon::before { transform: translateY(6px) rotate(45deg); }
	html.js .menu_open .menu_icon::after { transform: translateY(-6px) rotate(-45deg); }
	html.js .site_nav { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; }
	html.js .menu_open .site_nav { display: flex; }
	html.js .site_nav a { padding: 11px 2px; border-top: 1px solid var(--line); font-size: 19px; }
	html.js .site_nav .button { margin-block: 10px 6px; padding: 10px 18px; text-align: center; border-top: 0; }
}
@media (max-width: 359px) {
	html.js .site_header .logo img { height: 28px; }
}
@media (max-width: 859px) and (prefers-reduced-motion: reduce) {
	html.js .menu_icon, html.js .menu_icon::before, html.js .menu_icon::after { transition: none; }
}

/* HOME HERO: the full-width picture, with the slogan on a dark blue band (#000047 at 70%) across its lower
   left - the laptop and hands on the right stay clear. On phones the picture is cropped to its right side
   (the laptop) and the band runs the full width. */
.hero { position: relative; background: var(--midnight); overflow: hidden; }
.hero img {
	width: 100%;
	height: clamp(240px, 29.5vw, 566px);
	object-fit: cover;
	object-position: 70% center;
}
.hero_band {
	position: absolute;
	left: 0;
	bottom: 7%;
	width: 57%;
	background: rgba(0, 0, 71, 0.7);
	color: var(--white);
	padding: clamp(12px, 1.8vw, 26px) 24px clamp(12px, 1.8vw, 26px) max(20px, calc((100vw - var(--wrap)) / 2 + 20px));
}
.hero_band h1 { color: var(--white); font-size: clamp(30px, 3.6vw, 54px); }
@media (max-width: 700px) {
	.hero_band { width: 100%; bottom: 0; padding-left: 20px; }
}

/* SECTIONS */
.section { padding-block: clamp(56px, 8vw, 96px); }
.section.pale { background: var(--pale); }
.section_head { max-width: 720px; display: grid; gap: 14px; margin-bottom: 44px; }
.section_head p { color: var(--ink-soft); font-size: 18px; }

/* Text beside a picture (home intro, sub-page intros, the Ready-Built sections) */
.side_by_side { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 32px 56px; align-items: center; }
.side_by_side .text { display: grid; gap: 18px; }
.side_by_side .lead { font-size: 20px; color: var(--navy); }
.side_by_side img { width: 100%; height: auto; border-radius: 6px; }
.side_by_side.picture_first { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.side_by_side.picture_first figure { order: -1; }
.side_by_side figure { margin: 0; }
@media (max-width: 860px) {
	.side_by_side, .side_by_side.picture_first { grid-template-columns: 1fr; }
	.side_by_side.picture_first figure { order: 0; }
}

/* Cards with a blue title bar (as the CentricWise app cards) */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.cards.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) {
	.cards.three { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
	.cards, .cards.three { grid-template-columns: 1fr; }
}
.card { background: var(--white); border: 1px solid var(--line); display: flex; flex-direction: column; }
.card img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.card h3 { background: var(--blue); color: var(--white); padding: 9px 18px; font-size: 22px; }
.card_body { padding: 18px 18px 22px; display: grid; gap: 12px; align-content: start; font-size: 16px; flex: 1; }
.card_body .more { margin-top: auto; font-family: var(--font-head); font-size: 18px; }
/* Home cards: the picture and the blue title bar are links too (owner, Nov 1, 2026) - the bar turns navy and the
   picture brightens a little under the mouse. The picture's link is hidden from screen readers and the Tab key,
   so they meet each card's link only once, on its title. */
.card_picture { display: block; overflow: hidden; }
.card_picture img { transition: transform 0.3s, opacity 0.2s; }
.card_picture:hover img { transform: scale(1.03); opacity: 0.92; }
.card h3 a { display: block; color: inherit; text-decoration: none; margin: -9px -18px; padding: 9px 18px; transition: background 0.15s; }
.card h3 a::after { content: " \203A"; }
.card h3 a:hover, .card h3 a:focus-visible { background: var(--navy); }
@media (prefers-reduced-motion: reduce) {
	.card_picture img { transition: none; }
	.card_picture:hover img { transform: none; }
}

/* Less space above and below a section (the Custom Solutions intro, the Ready-Built sections - owner, Nov 1) */
.section.compact { padding-block: clamp(36px, 5vw, 60px); }
/* A wider, shorter crop of a picture (the Custom Solutions intro - owner's mockup custom_solutions_white_space.jpg) */
.side_by_side img.wide_crop { aspect-ratio: 2 / 1; object-fit: cover; }

/* CUSTOM SOLUTIONS: the five areas, numbered */
.areas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; counter-reset: area; }
@media (max-width: 780px) {
	.areas { grid-template-columns: 1fr; }
}
.area { background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--blue); padding: 22px 22px 24px; display: grid; gap: 14px; align-content: start; }
.area h3 { color: var(--navy); }
.area h3::before { counter-increment: area; content: counter(area) ". "; color: var(--blue); }
.area ul { margin: 0; padding-left: 20px; display: grid; gap: 12px; font-size: 16px; }
.area strong { color: var(--ink); }

/* The one dark band (a call to talk to us) */
.dark_band { background: var(--midnight); color: var(--white); }
.dark_band .wrap { display: grid; grid-template-columns: 1fr auto; gap: 24px 48px; align-items: center; }
.dark_band h2 { color: var(--white); }
.dark_band p { margin-top: 12px; max-width: 660px; font-size: 18px; color: #d4dcf0; }
.dark_band .button { background: var(--white); color: var(--navy); }
.dark_band .button:hover { background: var(--pale); }
@media (max-width: 760px) {
	.dark_band .wrap { grid-template-columns: 1fr; }
}

/* CONTACT FORM */
.contact_layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 32px 56px; align-items: start; }
@media (max-width: 860px) {
	.contact_layout { grid-template-columns: 1fr; }
}
.contact_form { display: grid; gap: 18px; background: var(--white); border: 1px solid var(--line); padding: clamp(18px, 3vw, 32px); }
.form_row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) {
	.form_row { grid-template-columns: 1fr; }
}
.field { display: grid; gap: 6px; }
.field label, .field .label { font-weight: 600; font-size: 15px; }
.field .optional { font-weight: 400; color: var(--ink-soft); }
.field input, .field select, .field textarea {
	font: inherit;
	font-size: 16px;
	color: var(--ink);
	background: var(--white);
	border: 1px solid #aab7cc;
	border-radius: 4px;
	padding: 10px 12px;
	width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--blue-light); outline-offset: 0; border-color: var(--blue-light); }
/* The text-message consent boxes: each checkbox with its full wording beside it (never ticked in advance) */
.consent { display: grid; gap: 14px; border-top: 1px solid var(--line); padding-top: 18px; }
.consent .consent_title { font-weight: 600; font-size: 15px; }
.consent label { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: 14px; line-height: 1.5; color: var(--ink-soft); cursor: pointer; }
.consent input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--navy); }
.consent strong { color: var(--ink); }
.form_note { font-size: 14px; color: var(--ink-soft); }
/* The trap field for spam robots: off screen, never seen or filled in by people */
.form_trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact_aside { display: grid; gap: 14px; }
.contact_aside h2 { font-size: 26px; }


/* PAGE TITLES on the sub-pages */
.page_head { background: var(--pale); border-bottom: 1px solid var(--line); }
.page_head .wrap { padding-block: clamp(36px, 5vw, 56px); display: grid; gap: 10px; }

/* FOOTER */
.site_footer { background: var(--ink); color: #c6cfdd; font-size: 15px; }
.site_footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 32px; padding-block: 30px; }
.site_footer a { color: var(--white); text-decoration: none; }
.site_footer a:hover { text-decoration: underline; }
.site_footer nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.footer_company { display: grid; gap: 2px; }

/* PRIVACY POLICY, TERMS: one readable column */
.legal { max-width: 740px; display: grid; gap: 14px; }
.legal h2 { font-size: 26px; margin-top: 22px; }
.legal h3 { font-size: 21px; color: var(--navy); margin-top: 8px; }
.legal .updated { color: var(--ink-soft); font-size: 15px; }
.legal ul { margin: 0; padding-left: 22px; display: grid; gap: 4px; }