/*
Site overrides for OBM The Craft.

Loaded after style.css and after the Customizer's inline design tokens, so a
rule here wins over both at equal specificity without needing !important.
Nothing else in the theme reads this file: it is the place for hand-written,
site-specific adjustments that should survive a change to the theme's own
stylesheet.

Delete the file and the theme carries on without it.
*/

.obm-tensions__lead p {
	max-width:inherit;
	width: inherit;
	font-size:1.4em;
}

.obm-article  {
	max-width:inherit;
	width: inherit;
}

.obm-split__media img {
	max-width:5500px;
}

.obm-split__copy .obm-lead {
	font-size:1.2em;
}


.obm-clients__intro {
	margin-bottom:4ch;
	margin-top:2ch;
}

.obm-card__body {
margin: 0ch;
}

.obm-lead {
	max-width:inherit!important;
}

.obm-more {
    font-weight: 600;
		font-size:1.8ch;
}

.obm-contact-band__aside address {
	line-height:2.2ch;
		font-size:inherit;
}

.obm-contact-band__aside p  {
	line-height:2.2ch;
	font-size:2.2ch;
}

.obm-faq__answer {
max-width:100%;
}

.obm-case__panel {
	height:100%;
	display: flex;
align-items: center;
justify-content: center;
}

.obm-case__logo img {
    max-height: 130px;
	max-width:100%
}

.obm-case__logo {
    width: 60%;
}

.obm-case__logo img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100px;
    margin-inline: auto;
}


.obm-case__summary {
	font-size:2.2ch;
	line-height:2.7ch;
	font-weight:500;
}

.obm-client__name {
	text-align:center;
	font-size:3ch;
	font-weight:600;
}

li::marker {
content: "";
}

.obm-page-hero .obm-display {
    max-width: inherit;
}

.obm-masthead__tagline, .obm-brand-band__tagline {
		font-size: 1.25rem;
}
.obm-kicker {
	font-size: 1.25rem;
}

.obm-contact-band__email {
	font-size: 2.5rem;
border-bottom:none;
	letter-spacing:-0.04em!important;
	line-height:1em;
	margin-top:-0.23em;;
font-weight:500;
}

.obm-contact-band__aside,
.obm-brand-band__copy, .obm-masthead__tagline, .obm-masthead__strap {
	text-align:right;
}
.obm-brand-band__strap, .obm-masthead__strap {
	    max-width: 65ch;
	float:right;
	line-height:1.4em;
	font-size:1.2em;
}

.site-header__inner {
font-size:1em;
}

.obm-contact-band__email, .brushed-gold, .obm-wordmark--large, .current_page_item {
  display: inline-block;
  color: transparent;

  background-image:
    /* Irregular fine horizontal brush marks */
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(255, 244, 185, 0.18) 1.2%,
      transparent 2.1%,
      transparent 6.4%,
      rgba(107, 69, 15, 0.10) 7.1%,
      transparent 8.5%,
      transparent 13.8%,
      rgba(255, 239, 166, 0.14) 14.5%,
      transparent 16.1%,
      transparent 23.6%,
      rgba(117, 75, 16, 0.08) 24.3%,
      transparent 26.2%,
      transparent 34.8%,
      rgba(255, 246, 194, 0.16) 35.5%,
      transparent 37.3%,
      transparent 46.1%,
      rgba(113, 72, 15, 0.10) 47%,
      transparent 49.2%,
      transparent 57.7%,
      rgba(255, 239, 166, 0.13) 58.5%,
      transparent 60.4%,
      transparent 69.8%,
      rgba(106, 67, 13, 0.09) 70.7%,
      transparent 72.4%,
      transparent 81.2%,
      rgba(255, 244, 185, 0.15) 82%,
      transparent 84.1%,
      transparent 92.8%,
      rgba(109, 68, 13, 0.10) 93.6%,
      transparent 95.2%,
      transparent 100%
    ),

    /* Soft vertical variation through the metal */
    linear-gradient(
      180deg,
      rgba(255, 235, 157, 0.10) 0%,
      rgba(126, 78, 14, 0.06) 18%,
      rgba(255, 242, 181, 0.12) 43%,
      rgba(120, 74, 12, 0.08) 68%,
      rgba(255, 225, 132, 0.08) 100%
    ),

    /* Main colour profile sampled from the source */
    linear-gradient(
      90deg,
      #b28530 0%,
      #dcb251 9%,
      #f0cd70 15%,
      #fde28a 21%,
      #f4ce6d 31%,
      #e4b859 43%,
      #d2a44a 55%,
      #c4963e 67%,
      #b98a34 80%,
      #ad7d2b 91%,
      #a67527 100%
    );

  /* Map the texture once across the element */
  background-size: 100% 100%;
  background-position: left top;
  background-repeat: no-repeat;

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
	letter-spacing:-3px;
	font-weight:700;
}



/* 1. Sticky header currently eats anchor targets (#contact exists on every page). */
html { scroll-padding-top: 84px; }

@media (max-width: 640px) {
	/* 2. Biggest win. 40px gaps were designed for side-by-side columns; once
	      everything is one column that is pure dead space, eight times over. */
	.obm-grid { gap: 22px; }
	.obm-client { gap: 10px; }
	.obm-contact-band__email {
		font-size:1.8em;
	}
	#contact, .obm-contact-band__aside, .obm-brand-band__inner div, .obm-legal__inner  {
		padding:10px;
		text-align:center;
	}

	 .obm-legal__inner nav {
        padding: 10px;
		 margin-right:16px;
		 width:100%;
        text-align: center;
    }

	.site-header__inner {
		gap:0;
	}

	    .site-nav ul {
        flex-direction: column;
        gap: 0;
        padding: 12px 0 0px;
    }

	.obm-more, .obm-display, .obm-container p, .obm-container, .obm-masthead__tagline {
		text-align:center;
	}

	/* 3. The eight client tiles are the longest run on the page. The 190px
	      floor and vertical centring exist to even up a 4-across row that no
	      longer exists at this width. */
	.obm-client .obm-card { min-height: 0; }
	.obm-card__body { padding: 12px 0; margin: 0; text-align: left; }

	/* 4. Reclaim horizontal room inside cards. */
	.obm-card { padding: 20px 18px; }
	.obm-play { padding: 24px 20px; }
	.obm-container { padding-left: 20px; padding-right: 20px; }

	/* 5. 340px is shallow next to a 650px desktop band; the photo barely reads. */
	.obm-hero-band { min-height: var(--obm-hero-h-mobile, 420px); }
	.obm-hero-band__inner { padding: 32px 0; }

	/* 6. Section rhythm, once everything is stacked. */
	:root { --obm-section-pad: 40px; }
	.obm-contact-band__inner { padding: 40px 0; gap: 22px; }

	/* 7. Stagger is wasted in a single column: the lower tiles finish
	      animating long before you scroll to them. */
	.obm-reveal--item { --obm-reveal-delay: 0ms !important; }

	/* 8. Uppercase at 0.14em tracking wraps badly in a 342px column. */
	.obm-kicker { letter-spacing: 0.1em; }
}

/* 9. Not mobile, but adjacent: the sidebar grid keeps a 200px first column
      all the way down to 641px, which is far too narrow for a section
      heading on a portrait tablet. */
@media (max-width: 900px) {
	.obm-grid--sidebar { grid-template-columns: 1fr; }
}


/* 1. Give tablets the menu button. The nav needs ~1045px to fit on one line;
      without this it wraps inside the sticky header and never gives the space
      back. This is the one that matters. */
@media (max-width: 1060px) {
	.site-nav__toggle { display: inline-block; }
	.site-nav__menu { display: none; width: 100%; }
	.site-nav__menu.is-open { display: block; }
	.site-header__inner { flex-wrap: wrap; }
	.site-nav { width: 100%; }
	.site-nav ul { flex-direction: column; gap: 0; padding: 8px 0 16px; }
	.site-nav li { border-top: 1px solid var(--obm-border); }
	.site-nav a { display: block; padding: 12px 4px; }
}

/* 2. Client tiles: four across only survives above 981px. At 1024 that is
      158px of text per card. */
@media (min-width: 981px) and (max-width: 1024px) {
	.obm-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 641px) and (max-width: 1024px) {
	/* 3. The sidebar grid keeps its narrow first column all the way down to
	      641px: a 28px heading in a 170px column at 768px, 37px in 234px at
	      1024px. It is the most cramped thing in the tablet range. */
	.obm-grid--sidebar { grid-template-columns: 1fr; gap: 24px; }

	/* 4. These three still sit side by side until 720px, out of step with the
	      splits and case studies, which stack at 820px. */
	.obm-masthead__inner { grid-template-columns: 1fr; gap: 28px; }
	.obm-contact-band__inner { grid-template-columns: 1fr; gap: 28px; }
	.obm-brand-band__inner { grid-template-columns: 1fr; gap: 24px; }

	/* 5. Spacing sized for a 1400px canvas. */
	.obm-grid { gap: 28px; }
	:root { --obm-section-pad: 56px; }

	/* 6. 650px tall on a 768px-wide portrait screen is a 1.18:1 crop, against
	      2.15:1 on desktop — a completely different shape of photograph. */
	.obm-hero-band {
		min-height: 520px;
		background-position: var(--obm-hero-pos-mobile, var(--obm-hero-pos, center center));
	}

	.site-header__inner {
		gap:0px;
	}

	    .site-nav ul {
				padding:0;
				padding-top:14px;
	}


	.obm-feature__title--kicker {
	    font-size: 1.5em;
	    letter-spacing: 0em;
}

 .obm-contact-band__inner div, .obm-brand-band__inner div {
	text-align:center;
	 padding:0 18px;
}

	.obm-legal__inner  {
		padding: 20px;
	}

}

.obm-page-hero__kicker, .obm-kicker {
	line-height:2.2ch;
		font-size: 2em;
	letter-spacing:0.05em;
}

.obm-muted {
	font-size:2.5ch;
}


.svgap-cover-small {
	margin-top:-80px;
	padding-left:50px;
	float:right;
	display:block;
	height:345px
}

/* Shown only on desktop and laptop screens. */
@media (max-width: 1023.98px), (pointer: coarse) {
	.obm-desktop-only,
.svgap-cover-small { display: none !important; }
}


footer  a {
    letter-spacing: 0em;
}

.obm-res-card__title {
    font-size: 1.7em;
    margin-bottom: 0.5em;
}

.obm-feature__title--kicker {
	    font-size: 1.5em;
	    letter-spacing: 0em;
}


.obm-masthead__tagline {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.obm-hero-band__inner {
    padding: 98px 0;
}

.wp-singular .obm-contact-band {
	margin-top:50px;
}