/*
 Theme Name:   Surface Ink
 Theme URI:    https://generatepress.com
 Description:  Default Surface Ink
 Author:       Mike Bianchi
 Author URI:   https://oakmountainmarketing.com
 Template:     generatepress
 Version:      0.1
*/


body { background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06)),
    linear-gradient(135deg, #f8f5ef 0%, #efe8db 100%);
}

#content {
    background: transparent !important;
}

.content-area, .site-main {
    background: transparent !important;
}

#masthead {
    background: transparent  !important;
}

.main-title, .site-description {
    margin-right: auto;
    margin-left: auto;
}

.separate-containers .inside-article  {
    background: transparent  !important;
}

.entry-title {
    display: none;
}

.main-navigation .main-nav ul li[class*="current-menu-"] > a:hover {
    color: #F54927;
    text-decoration: underline !important;
}

/* Buttons */

.btn-sub a {
    display: inline-flex;
    text-align: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 32px;
    border: 2px solid rgba(6, 76, 108, .3);
    background: linear-gradient(135deg, rgba(6, 76, 108, .22), rgba(253, 176, 43, .22));
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 1px;
    font-size: 18px;
    color: #333333;
    margin-right: 1.1em;
    margin-left: 1.1em;
}

.btn-sub a:hover {
    color: #F54927 ;
    border:2px solid rgba(253, 176, 43, .35) ;
 }

/* Butterfly video  */

.gb-element-14a2b011 video {
    width: 100%;
    height: 650px !important;            /* your target height */
    aspect-ratio: auto !important;        /* overrides the inline 544/960 */
    object-fit: cover !important;          /* fills the width, crops top/bottom */
    display: block !important;
    margin: 0;
}

.gb-element-14a2b011 .wp-block-video {
    margin: 0;
    border-radius: 24px;
}

/* Turtles banner  */
.gb-element-2ab98d9b {
    background-color: none !important;
}

.shadow-outline-black {
  color: white;
  text-shadow:
    -1px -1px 0 #004091,
     1px -1px 0 #004091,
    -1px  1px 0 #004091,
     1px  1px 0 #004091; /* Simulates a 1px solid border around the text */
}

/* Panel with 4 images  */

.gb-element-9e8e1174 p {
    line-height:1.2 !important;
    margin-top: 6px;
    margin-bottom: 6px;
}



/* =====================================================================
   Surface Ink — design system
   Ported from the custom "surface-ink" theme's visual language so the
   look is consistent across the homepage and every inner page, without
   swapping themes (which would have dropped the schema, meta tags,
   call bar, favicons and service-page templates built on top of
   GeneratePress).

   Delete everything below this line to revert to the theme defaults.
   ===================================================================== */

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;          /* variable font, one file covers all */
	font-display: swap;
	src: url("fonts/inter-var-latin.woff2") format("woff2");
}

:root {
	--si-text: #171c21;
	--si-text-2: #4c5863;
	--si-muted: #6c7782;
	--si-soft: #8c96a0;
	--si-line: rgba(23, 28, 33, .10);
	--si-line-soft: rgba(23, 28, 33, .06);
	--si-shadow: 0 18px 45px rgba(21, 27, 33, .06);
	--si-radius: 24px;
	/* the logo INK samples at #f9009a, but white text on it is 3.8:1 —
	   the CTA base is one step deeper, which clears 4.5:1 at 5.04:1 */
	--si-magenta: #f9009a;
	--si-magenta-deep: #d6007f;
	--si-magenta-press: #b8006d;
	/* the cyan ink drop in the logo */
	--si-cyan: #06eefc;
	--si-cyan-press: #00cfe0;
}

/* ---- base ---------------------------------------------------------- */

body {
	background:
		radial-gradient(circle at top right, rgba(255, 255, 255, .7), transparent 20%),
		linear-gradient(180deg, #f7f4ed 0%, #f5f1e8 100%);
	color: var(--si-text);
	font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

body,
button,
input,
select,
textarea,
.main-navigation a,
.entry-content,
.site-branding {
	font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* ---- headings ------------------------------------------------------
   The defining trait of this design is very tight tracking on large
   type. It only works at size, so the mobile sizes loosen slightly. */

h1, h2, h3, h4, h5,
.entry-title {
	color: var(--si-text) !important;
	font-family: "Inter", system-ui, -apple-system, sans-serif !important;
	font-weight: 700 !important;
	letter-spacing: -.05em !important;
}

h1,
.entry-title {
	font-size: clamp(2rem, 4vw, 3.7rem) !important;
	line-height: .98 !important;
}

h2 {
	font-size: clamp(1.7rem, 3vw, 2.6rem) !important;
	line-height: 1.04 !important;
}

h3 {
	font-size: clamp(1.25rem, 2vw, 1.6rem) !important;
	font-weight: 600 !important;
	line-height: 1.18 !important;
	letter-spacing: -.03em !important;
}

h4 {
	font-size: 1.15rem !important;
	font-weight: 600 !important;
	letter-spacing: -.02em !important;
}

h5 {
	color: var(--si-muted) !important;
	font-size: 1.05rem !important;
	font-weight: 400 !important;
	line-height: 1.6 !important;
	letter-spacing: -.01em !important;
}

/* ---- body copy ----------------------------------------------------- */

p,
li {
	color: var(--si-text-2);
	line-height: 1.76 !important;
}

.entry-content p {
	max-width: 68ch;
}

/* Leading has to scale inversely with size. 1.76 suits the long-form
   service pages, but the homepage's lead paragraph is 22px and its
   blurbs are short — at 1.76 the hero alone ran 232px tall and pushed
   the "Start a Project" button below the fold. */
.home .entry-content p,
.home .entry-content li {
	line-height: 1.5 !important;
}

/* ---- eyebrows ------------------------------------------------------
   Small, widely tracked, uppercase, in the soft grey-blue rather than
   an accent colour — restrained is the point of this design. */

.si-eyebrow {
	display: inline-block !important;
	margin: 0 0 8px !important;
	color: var(--si-soft) !important;
	font-family: "Inter", sans-serif !important;
	font-size: .74rem !important;
	font-weight: 700 !important;
	letter-spacing: .18em !important;
	line-height: 1.4 !important;
	text-transform: uppercase !important;
}

/* ---- buttons ------------------------------------------------------- */

/* logo cyan — the second ink drop (#06eefc). Too light for white
   text, so the label is the dark ink: ~11:1 contrast. The call bar
   keeps magenta; the CMYK pair reads as deliberate brand play. */
.btn-sub a,
.gform_wrapper .gform_button {
	border: 1px solid var(--si-cyan) !important;
	border-radius: 999px !important;
	background: var(--si-cyan) !important;
	box-shadow: 0 10px 24px rgba(6, 238, 252, .28) !important;
	color: var(--si-text) !important;
	font-family: "Inter", sans-serif !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	letter-spacing: -.01em !important;
	transition: background .28s ease, transform .28s ease;
}

.btn-sub a:hover,
.btn-sub a:focus,
.gform_wrapper .gform_button:hover,
.gform_wrapper .gform_button:focus {
	border-color: var(--si-cyan-press) !important;
	background: var(--si-cyan-press) !important;
	color: var(--si-text) !important;
	transform: translateY(-1px);
}

.btn-sub a {
	padding: 13px 26px !important;
}

.gform_wrapper .gform_button {
	padding: 14px 34px !important;
}

/* ---- surfaces ------------------------------------------------------ */

.entry-content img,
.entry-content video,
.wp-block-image img,
.wp-block-video video {
	border-radius: var(--si-radius);
}

/* ---- page titles ---------------------------------------------------
   The theme hid .entry-title site-wide, which is right for the one-page
   homepage but leaves inner pages with no visible H1. The homepage
   title is removed from the markup entirely in functions.php. */

.entry-title {
	display: block;
}

.home .entry-title {
	display: none;
}

/* ---- inner page layout --------------------------------------------- */

.si-service-page .entry-content,
.si-service-page .si-related,
.si-service-page .entry-header {
	max-width: 40em;
}

.si-service-page .entry-title::after {
	display: block;
	width: 54px;
	height: 3px;
	margin-top: 22px;
	background: var(--si-text);
	content: "";
	opacity: .18;
}

.si-service-page .entry-content h2 {
	margin-top: 48px;
	margin-bottom: 14px;
}

.si-service-page .entry-content h3 {
	margin-top: 30px;
	margin-bottom: 8px;
	color: var(--si-text) !important;
}

/* ---- related services footer --------------------------------------- */

.si-related {
	margin-top: 48px;
	padding-top: 26px;
	border-top: 1px solid var(--si-line-soft);
}

.si-related h2 {
	margin-top: 0;
	font-size: .74rem !important;
	font-weight: 700 !important;
	letter-spacing: .18em !important;
	text-transform: uppercase;
	color: var(--si-soft) !important;
}

.si-related ul {
	margin: 12px 0 0;
	padding-left: 18px;
}

.si-related li {
	margin-bottom: 7px;
}

.si-related a {
	border-bottom: 1px solid var(--si-line);
	color: var(--si-text);
}

.si-related a:hover {
	border-color: var(--si-text);
}

/* ---- fixed call bar -------------------------------------------------
   A header pill was tried three times and wrapped to a second row each
   time, because GeneratePress nests the menu two flex levels deep with
   min-width:auto at both. Inter's wider metrics made it worse. The bar
   is simpler, more visible, one tap, and has never broken — so it now
   runs at every width and the pill is gone. */

/* the bar is the stage, the pill is the action — a full-width dark
   strip that was itself the link read as chrome, not as a button */
.si-callbar {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	background: var(--si-text);
	box-shadow: 0 -2px 12px rgba(0, 0, 0, .18);
}

.si-callbar__btn {
	display: inline-flex;
	gap: 9px;
	align-items: center;
	padding: 10px 30px;
	border-radius: 999px;
	background: var(--si-magenta-deep);
	box-shadow: 0 6px 18px rgba(214, 0, 127, .35);
	color: #fff !important;
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: -.01em;
	text-decoration: none !important;
	transition: background .28s ease, transform .28s ease;
}

.si-callbar__btn:hover,
.si-callbar__btn:focus {
	background: var(--si-magenta-press);
	color: #fff !important;
	transform: translateY(-1px);
}

body {
	padding-bottom: 62px;
}

/* ---- quote form ----------------------------------------------------
   Field text stays at 16px: anything smaller makes iOS Safari zoom the
   page when a field is tapped. */

.gform_wrapper .gform-field-label,
.gform_wrapper .gfield_label,
.gform_wrapper legend.gfield_label {
	margin-bottom: 6px !important;
	color: var(--si-text) !important;
	font-family: "Inter", sans-serif !important;
	font-size: .9rem !important;
	font-weight: 600 !important;
	letter-spacing: -.01em !important;
}

.gform_wrapper .gform-field-label--type-sub {
	color: var(--si-muted) !important;
	font-size: .8rem !important;
	font-weight: 400 !important;
}

.gform_wrapper .gfield_required {
	color: #b4403a;
}

.gform_wrapper .gfield_description {
	color: var(--si-muted);
	font-size: .82rem;
	line-height: 1.5;
}

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper select,
.gform_wrapper textarea {
	padding: 12px 14px !important;
	border: 1px solid var(--si-line) !important;
	border-radius: 12px !important;
	/* background-COLOR, not the shorthand: the shorthand resets
	   background-image, which on selects is the theme's dropdown
	   chevron — the arrow vanished and the field read as a text box */
	background-color: #fff !important;
	color: var(--si-text) !important;
	font-family: "Inter", sans-serif !important;
	font-size: 16px !important;
	transition: border-color .28s ease, box-shadow .28s ease;
}

.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
	border-color: var(--si-text) !important;
	box-shadow: 0 0 0 3px rgba(23, 28, 33, .08) !important;
	outline: none !important;
}

.gform_wrapper textarea {
	min-height: 150px;
	line-height: 1.6 !important;
}

.gform_wrapper .gform_footer {
	margin-top: 24px;
}

@media (max-width: 768px) {

	.gform_wrapper .gform_button {
		width: 100%;
	}
}

/* ---- mobile fixes --------------------------------------------------
   Retained from the earlier pass: the header overflowed the viewport,
   and GenerateBlocks containers carry a hardcoded min-width:480px. */

@media (max-width: 768px) {

	.site-branding-container {
		flex-direction: column;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		row-gap: 6px;
	}

	.site-logo {
		max-width: 170px;
	}

	.site-logo img,
	.header-image {
		width: 100%;
		height: auto;
	}

	.main-title,
	.site-description {
		text-align: center;
	}

	[class*="gb-element-"],
	[class*="gb-container-"] {
		min-width: 0 !important;
		max-width: 100% !important;
	}

	.gb-element-9e8e1174 {
		width: 100% !important;
		grid-template-columns: 1fr !important;
	}

	/* tight tracking needs to relax at small sizes */
	h1,
	h2,
	.entry-title {
		letter-spacing: -.03em !important;
	}
}

/* ---- homepage hero sizing -------------------------------------------
   The full clamp(2rem,4vw,3.7rem) resolves to 51px at 1280px wide,
   which leaves the "Start a Project" button 3px above the fold — close
   enough that real browser chrome pushes it under. The hero gets a
   slightly smaller scale so the primary CTA stays visible on a laptop.
   Inner pages keep the full scale; they have no fold-critical button. */

.home .entry-content h1 {
	margin-bottom: 14px !important;
	font-size: clamp(2rem, 3.4vw, 3.2rem) !important;
}

/* ---- image figures on service pages --------------------------------- */

.si-figure {
	margin: 30px 0 34px;
}

/* Several of these source files are only 458-627px wide. Stretching
   them to the 720px column would visibly soften them, so images cap at
   their natural size and centre instead of upscaling. */
.si-figure img {
	width: auto;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	border-radius: var(--si-radius);
	box-shadow: var(--si-shadow);
}

.si-figure {
	text-align: center;
}

.si-figure figcaption,
.wp-element-caption {
	margin-top: 12px;
	color: var(--si-muted);
	font-size: .88rem;
	line-height: 1.55;
	text-align: left;
}

/* ---- wall-printing section video ------------------------------------
   Matched to the hero video's 650px treatment so the two read as a pair
   rather than one being twice the height of the other. */

.si-video {
	margin: 0;
}

.si-video video {
	width: 100%;
	height: 650px;
	border-radius: var(--si-radius);
	object-fit: cover;
	display: block;
}

@media (max-width: 768px) {

	.si-video video {
		height: 420px;
	}
}

/* =====================================================================
   Visual break — full-bleed turtles mural
   ---------------------------------------------------------------------
   Runs the full width of the viewport, uncropped, at its natural aspect
   ratio, with the copy overlaid at the bottom left over the floor. The
   earlier attempt cropped it to a band and dropped white type across the
   turtles; the wide shot has wall, rail and reflective floor beneath the
   artwork, which is where the text belongs.
   ===================================================================== */

.home .gb-element-8db2a656 {
	position: relative;
	display: block !important;
	width: 100vw;
	max-width: none !important;
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
	overflow: hidden;
}

/* column one holds the image — full width, natural height, no crop */
.home .gb-element-8db2a656 > div:first-child {
	position: static;
	width: auto !important;
	max-width: none !important;
}

.home .gb-element-8db2a656 > div:first-child figure {
	margin: 0;
}

.home .gb-element-8db2a656 > div:first-child img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
}

/* wash across the lower portion so white type stays legible */
.home .gb-element-8db2a656::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	height: 55%;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 100%);
	content: "";
	pointer-events: none;
}

/* column two holds the copy — pinned bottom left over the floor */
.home .gb-element-8db2a656 > div:last-child {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	width: auto !important;
	max-width: none !important;
	padding: 0 0 44px;
}

.home .gb-element-8db2a656 > div:last-child > * {
	width: min(calc(100% - 96px), 1180px);
	margin-right: auto;
	margin-left: auto;
	text-align: left;
}

.home .gb-element-8db2a656 h2 {
	max-width: 20ch;
	color: #fff !important;
	text-shadow: 0 2px 30px rgba(0, 0, 0, .45);
}

.home .gb-element-8db2a656 h5 {
	max-width: 46ch;
	margin-top: 12px;
	color: rgba(255, 255, 255, .9) !important;
	text-shadow: 0 2px 24px rgba(0, 0, 0, .45);
}

@media (max-width: 768px) {

	.home .gb-element-8db2a656 > div:last-child {
		padding-bottom: 22px;
	}

	.home .gb-element-8db2a656 > div:last-child > * {
		width: calc(100% - 40px);
	}

	.home .gb-element-8db2a656::after {
		height: 70%;
	}
}

/* ---- primary navigation -------------------------------------------
   WordPress flags any menu item whose URL resolves to the current page
   with .current-menu-item, and GeneratePress colours that blue. Since
   "Work" and "FAQs" are homepage anchors, they were highlighted on the
   homepage while the three real page links were not — a mix of blue and
   black in the same menu. One colour for all of them; hover is the only
   state change. */

.main-navigation .main-nav ul li a,
.main-navigation .main-nav ul li[class*="current-"] > a,
.main-navigation .main-nav ul li[class*="current_"] > a {
	color: var(--si-text) !important;
	font-weight: 500;
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li a:focus,
.main-navigation .main-nav ul li[class*="current-"] > a:hover,
.main-navigation .main-nav ul li[class*="current-"] > a:focus {
	color: var(--si-muted) !important;
	text-decoration: none !important;
}

/* ---- inline videos on service pages --------------------------------- */

.si-inline-video video {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--si-radius);
	box-shadow: var(--si-shadow);
}

/* ---- work grid on the wall printing page ---------------------------
   The four stills were spread over 2,500px of scroll, and the two
   portrait shots rendered 960px tall each — taller than a laptop
   viewport. Grouped into a 2x2 grid with a capped height so the whole
   range is visible in roughly one screen. */

.si-gallery {
	display: block;
	margin: 30px 0 38px;
}

/* the core group block wraps its children in an inner container, so the
   grid has to go there — applied to .si-gallery itself it just squeezes
   that single wrapper into one column */
.si-gallery .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.si-gallery .si-figure {
	margin: 0;
	text-align: left;
}

.si-gallery .si-figure img {
	width: 100%;
	height: 260px;
	margin: 0;
	border-radius: 14px;
	object-fit: cover;
}

.si-gallery figcaption,
.si-gallery .wp-element-caption {
	margin-top: 8px;
	font-size: .8rem;
	line-height: 1.45;
}

@media (max-width: 600px) {

	.si-gallery .wp-block-group__inner-container {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.si-gallery .si-figure img {
		height: 220px;
	}
}

/* ---- gallery page: editorial layout ---------------------------------
   A uniform grid made every image equally important. This gives the
   page a rhythm instead: full-bleed features, paired shots, and a small
   strip for the low-resolution files that cannot carry a large format.
   ===================================================================== */

.si-work-page .entry-content,
.si-work-page .entry-header,
.si-work-page .si-related {
	max-width: 1180px;
}

/* --- full-bleed feature --- */

.si-service-page .si-feature {
	width: 100vw;
	max-width: none;
	margin: 46px 0 46px calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* WordPress caps group inner containers at the theme's content width,
   which was holding the full-bleed features back to 1220px */
.si-service-page .si-feature .wp-block-group__inner-container,
.si-work-page .si-pair .wp-block-group__inner-container {
	width: 100%;
	max-width: none;
	padding: 0;      /* GeneratePress adds 18px here, which was insetting
	                    the full-bleed features by 36px */
}

.si-service-page .si-feature figure {
	margin: 0;
}

/* natural aspect ratio — never cropped. A fixed height with
   object-fit:cover was cutting the top and bottom off the murals. */
.si-service-page .si-feature img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
}

/* a portrait image at full bleed would be ~1700px tall, so tall shots
   get a contained, centred treatment instead */
.si-service-page .si-portrait {
	width: min(calc(100vw - 68px), 900px);
	max-width: none;
	margin: 46px auto;
}

.si-service-page .si-portrait .wp-block-group__inner-container {
	width: 100%;
	max-width: none;
	padding: 0;
}

.si-service-page .si-portrait figure {
	margin: 0;
}

.si-service-page .si-portrait img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
}

.si-service-page .si-portrait figcaption {
	margin-top: 12px;
	color: var(--si-muted);
	font-size: .88rem;
	text-align: left;
}

.si-service-page .si-feature figcaption {
	width: min(calc(100% - 68px), 1180px);
	margin: 14px auto 0;
	color: var(--si-muted);
	font-size: .88rem;
	text-align: left;
}

/* --- paired shots, side by side --- */

.si-work-page .si-pair {
	width: min(calc(100vw - 68px), 1480px);
	max-width: none;
	margin: 40px 0 40px calc(50% - min(calc(50vw - 34px), 740px));
}

.si-work-page .si-pair .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.si-work-page .si-pair figure {
	margin: 0;
}

.si-work-page .si-pair img {
	width: 100%;
	height: 480px;
	border-radius: 16px;
	object-fit: cover;
}

.si-work-page .si-pair-tall img {
	height: 620px;
}

.si-work-page .si-pair figcaption {
	margin-top: 10px;
	color: var(--si-muted);
	font-size: .85rem;
	text-align: left;
}

/* --- small strip for the low-resolution files --- */

.si-work-page .si-strip .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 14px;
}

.si-work-page .si-strip figure {
	margin: 0;
}

.si-work-page .si-strip img {
	width: 100%;
	height: 150px;
	border-radius: 10px;
	object-fit: cover;
}

.si-work-page .si-strip figcaption {
	margin-top: 7px;
	color: var(--si-soft);
	font-size: .74rem;
	text-align: left;
}

@media (max-width: 900px) {

	.si-work-page .si-pair .wp-block-group__inner-container {
		grid-template-columns: 1fr;
	}

	.si-work-page .si-pair img,
	.si-work-page .si-pair-tall img {
		height: 380px;
	}

	.si-work-page .si-strip .wp-block-group__inner-container {
		grid-template-columns: repeat(2, 1fr);
	}

	.si-work-page .si-strip img {
		height: 170px;
	}
}

/* the wall printing grid sat inside the 40em reading column, giving
   350px tiles. Let it use the full content width instead. */
.si-service-page:not(.si-work-page) .si-gallery {
	width: min(calc(100vw - 68px), 1180px);
	max-width: none;
}

.si-service-page:not(.si-work-page) .si-gallery .si-figure img {
	height: 380px;
}

/* ---- primary navigation -------------------------------------------
   WordPress flags any menu item whose URL resolves to the current page
   with .current-menu-item, and GeneratePress colours that blue. Since
   "Work" and "FAQs" are homepage anchors, they were highlighted on the
   homepage while the three real page links were not — a mix of blue and
   black in the same menu. One colour for all of them; hover is the only
   state change. */

.main-navigation .main-nav ul li a,
.main-navigation .main-nav ul li[class*="current-"] > a,
.main-navigation .main-nav ul li[class*="current_"] > a {
	color: var(--si-text) !important;
	font-weight: 500;
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li a:focus,
.main-navigation .main-nav ul li[class*="current-"] > a:hover,
.main-navigation .main-nav ul li[class*="current-"] > a:focus {
	color: var(--si-muted) !important;
	text-decoration: none !important;
}

/* ---- inline videos on service pages --------------------------------- */

.si-inline-video video {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--si-radius);
	box-shadow: var(--si-shadow);
}

/* ---- work grid on the wall printing page ---------------------------
   The four stills were spread over 2,500px of scroll, and the two
   portrait shots rendered 960px tall each — taller than a laptop
   viewport. Grouped into a 2x2 grid with a capped height so the whole
   range is visible in roughly one screen. */

.si-gallery {
	display: block;
	margin: 30px 0 38px;
}

/* the core group block wraps its children in an inner container, so the
   grid has to go there — applied to .si-gallery itself it just squeezes
   that single wrapper into one column */
.si-gallery .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.si-gallery .si-figure {
	margin: 0;
	text-align: left;
}

.si-gallery .si-figure img {
	width: 100%;
	height: 260px;
	margin: 0;
	border-radius: 14px;
	object-fit: cover;
}

.si-gallery figcaption,
.si-gallery .wp-element-caption {
	margin-top: 8px;
	font-size: .8rem;
	line-height: 1.45;
}

@media (max-width: 600px) {

	.si-gallery .wp-block-group__inner-container {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.si-gallery .si-figure img {
		height: 220px;
	}
}

/* ---- gallery page ---------------------------------------------------
   The service pages cap content at a 40em reading measure, which is
   right for copy and wrong for a gallery — eleven images were being
   squeezed into a 720px column. The work page gets full container width
   and three columns; its paragraphs stay capped at 68ch by the base
   rule, so the copy is still readable. */

.si-work-page .entry-content,
.si-work-page .entry-header,
.si-work-page .si-related {
	max-width: 1180px;
}

/* break the gallery out of the page container entirely — at 1180px the
   tiles were only 368x320, which is small for the one page whose whole
   job is showing the work */
.si-work-page .si-gallery {
	width: 100vw;
	max-width: none;
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
	padding: 0 34px;
}

/* two columns, not three: on a 1280px screen three columns only gave
   377px tiles. Two gives ~595px — this is the page whose entire job is
   showing the work, so size beats compactness. Three columns only once
   the viewport is wide enough for them to still be large. */
.si-work-page .si-gallery .wp-block-group__inner-container {
	max-width: 1560px;
	margin: 0 auto;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.si-work-page .si-gallery .si-figure img {
	height: 460px;
}

@media (min-width: 1700px) {

	.si-work-page .si-gallery .wp-block-group__inner-container {
		grid-template-columns: repeat(3, 1fr);
	}

	.si-work-page .si-gallery .si-figure img {
		height: 420px;
	}
}

@media (max-width: 900px) {

	.si-work-page .si-gallery .wp-block-group__inner-container {
		grid-template-columns: repeat(2, 1fr);
	}

	.si-work-page .si-gallery .si-figure img {
		height: 260px;
	}
}

@media (max-width: 600px) {

	.si-work-page .si-gallery .wp-block-group__inner-container {
		grid-template-columns: 1fr;
	}

	.si-work-page .si-gallery .si-figure img {
		height: 240px;
	}
}

/* the wall printing grid sat inside the 40em reading column, giving
   350px tiles. Let it use the full content width instead. */
.si-service-page:not(.si-work-page) .si-gallery {
	width: min(calc(100vw - 68px), 1180px);
	max-width: none;
}

.si-service-page:not(.si-work-page) .si-gallery .si-figure img {
	height: 380px;
}

/* ---- hero column overflow ------------------------------------------
   The hero copy column carries max-height:680px with overflow:visible,
   set to match the video beside it. Its content is taller, so the
   "Start a Project" button spilled out below the container — at 1440px
   it landed exactly on the DIRECT TO SURFACE PRINTING kicker below.
   Let the column size to its content instead. */

.home .gb-element-1c3d7780 {
	max-height: none !important;
}

/* and a little breathing room so the two sections can never touch */
.home .gb-element-d03bb776 {
	margin-top: 46px !important;
}

/* ---- header logo ---------------------------------------------------
   The logo is core's custom_logo, so WordPress writes the attachment's
   own dimensions straight into the markup. The file is deliberately 2x
   so it stays sharp on a retina screen — pin the displayed width and
   let the height follow the artwork.

   Scoped above the 768px breakpoint so the mobile rule further up,
   which fits the logo to a 170px container, still wins on phones. */

@media (min-width: 769px) {

	.site-logo img,
	.header-image.is-logo-image {
		width: 200px;
		height: auto;
	}
}

/* ---- header title and tagline --------------------------------------
   Both are <p>, so they miss the heading rules above and inherit the
   body's 1.76 line-height instead. At 36px that puts "Surface Ink" in
   a 63px line box — the gap down to the tagline is all leading, not
   margin. Give them display line-heights and one deliberate gap. */

.main-title {
	line-height: 1.05 !important;
	/* GeneratePress's customizer sets +1px tracking inline, which runs
	   against the tight tracking every other large heading uses. 36px
	   sits in h2 territory, so match h1/h2 at -.05em.

	   The same inline block also pins font-family to Roboto. The Inter
	   rule up the file targets .site-branding, and an inherited value
	   loses to a rule set directly on the element however specific it
	   is — so both header lines were still rendering in Roboto while
	   every heading beside them was Inter. */
	font-family: "Inter", system-ui, -apple-system, sans-serif !important;
	letter-spacing: -.05em !important;
}

.site-description {
	font-family: "Inter", system-ui, -apple-system, sans-serif !important;
	font-weight: 700 !important;
	letter-spacing: -.02em !important;
	line-height: 1.25 !important;
	margin-top: 3px !important;
}

/* ---- editorial images on the narrower service pages ----------------
   /work/ runs a 1180px content column, so a 900px portrait centres
   inside it. The service pages keep a 720px reading measure that sits
   left-aligned in a 1184px box, so auto margins there resolve negative
   and push the image into the left gutter. Anchor it to the text
   column instead, and give it a little less width to match. */

.si-service-page:not(.si-work-page) .si-portrait {
	width: min(calc(100vw - 68px), 820px);
	margin: 44px 0;
}

/* the four stills used to sit in a 2x2 grid, cropped to 563x380 by a
   fixed height. Nothing on these pages uses that grid now. */

/* Both landscape stills here are 4:3. At full bleed that renders
   1512x1134 on a laptop — taller than the viewport, so you never see a
   whole mural at once and the page runs to nearly 9,000px. /work/ gets
   away with full bleed because its turtle is cropped to almost 2:1.

   Cap the height and let the width follow, so each image still breaks
   out of the 720px text column but fits on one screen. The figure
   shrinks to the image so the caption tracks its exact width. */

/* not full-bleed on these pages: a centred band put the landscapes on
   a different left edge (71px) from the text and the portraits (164px).
   Start every image on the text column's axis and let it run right. */
.si-service-page:not(.si-work-page) .si-feature {
	width: auto;
	max-width: none;
	margin: 44px 0;
}

.si-service-page:not(.si-work-page) .si-feature figure {
	margin: 0;
}

/* Desktop only. max-content lets the figure take the image's width so
   it can run wider than the column, and the centred flex parent splits
   the overflow evenly. (fit-content clamps to the container; the
   theme's max-width:100% would re-clamp, hence none; flex-shrink:0
   stops the flex container squeezing it back.)

   It must not reach phones: max-content also lets a CAPTION dictate
   width, and an unwrapped caption line measured 624px on a 375px
   screen — the page scrolled sideways and pinch-zoom drifted left. */
@media (min-width: 769px) {

	.si-service-page:not(.si-work-page) .si-feature figure {
		width: max-content;
		max-width: none;
		flex-shrink: 0;
	}
}

.si-service-page:not(.si-work-page) .si-feature img {
	width: auto;
	max-width: calc(100vw - 68px);
	max-height: 80vh;
}

.si-service-page:not(.si-work-page) .si-feature figcaption {
	width: 100%;
	margin: 14px 0 0;
}

/* ---- section capsules ----------------------------------------------
   The homepage contains its sections in white cards on the cream body
   gradient — 30px radius, no border, no shadow. That background is
   already site-wide, so the service pages had the backdrop and nothing
   sitting on it. Same treatment here, one capsule per H2 section.

   Width matches the portrait images so cards and images share a left
   and right edge; the wider landscape shots break past both. */

.si-service-page:not(.si-work-page) .si-card {
	width: 100%;
	max-width: none;
	margin: 22px 0;
	padding: 34px 44px;
	background: #fff;
	border-radius: 30px;
}

/* wide capsule, wide text: the base 68ch cap left a 640px strip of
   text inside an 1100px card — half the capsule sat empty and every
   paragraph ran tall. Inside cards the text fills the width instead;
   the cap stays for anything outside a capsule. */
.si-service-page:not(.si-work-page) .si-card p,
.si-service-page:not(.si-work-page) .si-card ul,
.si-service-page:not(.si-work-page) .si-card ol {
	max-width: none;
}

/* the core group block wraps its children, and GeneratePress puts 18px
   of padding on that wrapper — which would sit inside the card's own */
.si-service-page:not(.si-work-page) .si-card .wp-block-group__inner-container {
	width: 100%;
	max-width: none;
	padding: 0;
}

/* keep the padding even: no stray margin against the card's edges */
.si-service-page:not(.si-work-page) .si-card .wp-block-group__inner-container > *:first-child {
	margin-top: 0;
}

.si-service-page:not(.si-work-page) .si-card .wp-block-group__inner-container > *:last-child {
	margin-bottom: 0;
}

@media (max-width: 768px) {

	.si-service-page:not(.si-work-page) .si-card {
		padding: 24px 22px;
		border-radius: 22px;
	}
}

/* ---- centre the column on the text service pages -------------------
   Everything on these pages hung off a left-aligned 720px column while
   the viewport ran 1512px — cards, images and headings all crowded the
   left half and the right half sat empty. /work/ already fills its
   1180px container, so it is excluded.

   The column becomes the card width and centres; because the theme's
   .site container is itself centred, centring within it is centring on
   the viewport. Paragraphs keep their 68ch cap, so text does not
   stretch — the whole block just moves to the middle. */

.si-service-page:not(.si-work-page) .entry-content,
.si-service-page:not(.si-work-page) .entry-header,
.si-service-page:not(.si-work-page) .si-related {
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
}

/* the landscape features are wider than the 820px column, and auto
   margins cannot centre a child wider than its parent — flex can.
   It has to go on the group's inner container: that wrapper is what
   holds the figure, so flex on the group itself just centres the
   wrapper and the figure still hangs off its left edge. */
.si-service-page:not(.si-work-page) .si-feature .wp-block-group__inner-container {
	display: flex;
	justify-content: center;
}

.si-service-page:not(.si-work-page) .si-portrait {
	margin-left: auto;
	margin-right: auto;
}

/* the intro video sat on the column's left edge; centre it too */
.si-service-page:not(.si-work-page) .si-inline-video {
	margin-left: auto;
	margin-right: auto;
}


/* the intro video is media, not a capsule — hold it to the image scale
   so the wide cards remain the thing that spans the page */
.si-service-page:not(.si-work-page) .si-inline-video {
	width: min(calc(100vw - 68px), 860px);
	max-width: none;
}

/* ---- centred page titles -------------------------------------------
   With the capsules and images all on the centreline, a left-hung
   title was the one element still anchored to an edge. The ::after is
   the short underline bar — auto margins bring it along. */

.si-service-page:not(.si-work-page) .entry-header {
	text-align: center;
}

.si-service-page:not(.si-work-page) .entry-title::after {
	margin-left: auto;
	margin-right: auto;
}

/* ---- centred intro -------------------------------------------------
   The first paragraph after the title — the only text outside a
   capsule — joins the centred title above it. */

.si-service-page:not(.si-work-page) .entry-content > p:first-child {
	max-width: 62ch;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* ---- two-column list -----------------------------------------------
   Eight short venue lines in a 1,100px capsule left the right half
   empty and the card twice as tall as it needed to be. */

@media (min-width: 769px) {

	.si-card ul.si-cols {
		columns: 2;
		column-gap: 56px;
	}

	.si-card ul.si-cols li {
		break-inside: avoid;
	}
}

/* ---- quote form card -----------------------------------------------
   The form fields sat straight on the page gradient and read as loose
   inputs. The same white capsule the sections use makes it read as one
   form with a start and an end. */

.gform_wrapper {
	margin: 26px 0 !important;
	padding: 36px 42px !important;
	background: #fff;
	border-radius: 30px;
}

@media (max-width: 768px) {

	.gform_wrapper {
		padding: 24px 20px !important;
		border-radius: 22px;
	}
}

/* ---- back-to-top ---------------------------------------------------
   GeneratePress pins it 30px from the bottom, which is inside the
   62px call bar — it was showing through the bar's corner. Sit it
   just above instead. */

.generate-back-to-top {
	bottom: 86px !important;
}

/* ---- "The difference is in the finish." ----------------------------
   Marked up as an h5, so it inherited the muted 400-weight subtext
   style — but it is doing the same job as the h4 headers in the
   capsules beside it. Match them, centred. */

.home .gb-element-7d8db566 h5 {
	color: var(--si-text) !important;
	font-size: 1.15rem !important;
	font-weight: 700 !important;
	letter-spacing: -.02em !important;
	text-align: center !important;
}

/* ---- select geometry -----------------------------------------------
   The theme gives form controls a 38px line-height; stacked on this
   file's 12px vertical padding inside a 38px-tall box, a select's text
   baseline lands below the control's bottom edge — you could pick an
   option and never see it. Inputs survive because browsers vertically
   centre single-line input text; styled selects honour the arithmetic
   literally. Zero the vertical padding and let the browser centre. */

.gform_wrapper select {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	padding-right: 38px !important;  /* room for the chevron */
	/* not line-height:normal — desktop browsers centre a styled
	   select's text themselves, iOS Safari top-aligns it. An explicit
	   line-height equal to the inner height (38px minus the 1px
	   borders) centres it everywhere, deterministically. */
	height: 38px !important;
	line-height: 36px !important;
}

/* ---- mobile hero order ---------------------------------------------
   The hero grid stacks to one column under 768px in source order —
   headline first, butterfly video second. On a phone the video is the
   hook, so it leads. Desktop keeps the side-by-side layout. */

@media (max-width: 767px) {

	.home .gb-element-630f2841 {
		order: -1;
	}
}

/* ---- contact buttons -----------------------------------------------
   The closing "call or email" sentence is now two pills. */

.si-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 18px;
}

/* ---- footer contact ------------------------------------------------ */

.si-footer-contact {
	margin-bottom: 6px;
	font-size: .95rem;
}

.si-footer-contact a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(23, 28, 33, .25);
}

.si-footer-contact a:hover {
	border-bottom-color: var(--si-magenta-deep);
	color: var(--si-magenta-deep);
}

/* ---- mobile form fields --------------------------------------------
   Gravity Forms sizes "small" fields at a quarter of the row, which is
   201px on desktop and 54px on a phone — the project-type dropdown was
   all padding, with about 2px left for its text. Full width on mobile,
   like every field should be there. */

@media (max-width: 768px) {

	.gform_wrapper .gfield select,
	.gform_wrapper .gfield input[type="text"],
	.gform_wrapper .gfield input[type="email"],
	.gform_wrapper .gfield input[type="tel"],
	.gform_wrapper .gfield input[type="number"] {
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* ---- mobile hero gap -----------------------------------------------
   73px sat between the header and the butterfly: 30px article padding,
   16px main margin, and an empty leading paragraph in the page content
   contributing its bottom margin. Tighten on phones, where the video
   should arrive almost immediately. Desktop spacing unchanged. */

@media (max-width: 767px) {

	.home .site-main,
	.si-service-page .site-main {
		margin-top: 6px;
	}

	.home .inside-article,
	.si-service-page .inside-article {
		padding-top: 8px;
	}

	/* the stray empty paragraph before the hero grid */
	.home .entry-content > p.wp-block-paragraph:first-child {
		display: none;
	}
}

/* ---- full footer ---------------------------------------------------
   Same structure as the Acoustics Specialty footer — brand, services,
   service area, contact — translated into this site's type and colour
   system. GP's .inside-site-info is a flex row; stack it so the grid
   can take the full width. */

.site-info .inside-site-info {
	display: block !important;
	text-align: center;
}

.si-footer {
	width: 100%;
	padding: 46px 28px 8px;
	background: #fff;
	border-top: 1px solid var(--si-line-soft);
	text-align: left;
}

.si-footer-inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 28px;
	max-width: 1180px;
	margin: 0 auto;
}

.si-footer p,
.si-footer li {
	color: var(--si-muted);
	font-size: 14px;
	line-height: 1.65;
}

.si-footer p {
	margin: 0 0 10px;
	max-width: none;
}

.si-footer-name {
	color: var(--si-text) !important;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.02em;
}

.si-footer-heading {
	color: var(--si-magenta-deep) !important;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.si-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: none;
}

.si-footer li {
	margin: 0 0 7px;
}

.si-footer a {
	color: var(--si-muted);
	text-decoration: none;
}

.si-footer a:hover {
	color: var(--si-magenta-deep);
	text-decoration: underline;
}

.si-footer-cta {
	color: var(--si-magenta-deep) !important;
	font-weight: 700;
}

@media (max-width: 900px) {

	.si-footer-inner {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 560px) {

	.si-footer-inner {
		grid-template-columns: 1fr;
	}
}