/*
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;
}

/* The alignment class sits on the figure in block-editor content and on the
   image itself in older classic-editor content. Both shapes, one rule. */
.wp-block-image.alignright,
.wp-block-image .alignright {
	 margin-left:60px; 

}

/* Editor images dragged to a fixed size: let them fill the column on phones
   and tablets. The block editor writes the size as an inline style, so these
   need !important — an inline declaration beats any selector without it. */
@media (max-width: 1024px) {
	.is-resized {
		width: auto !important;
		max-width: 100% !important;
	}

	.is-resized img {
		width: 100% !important;
		height: auto !important;
		max-width: 100% !important;
	}
	.wp-block-image.alignright,
	.wp-block-image .alignright {
	 margin-left:0px; 

}
}

/* Section headings and feature copy. h2.obm-display reaches six headings, not
   only the team one — the homepage tensions and services bands, both Problems
   We Solve headings, the Value Gap heading on Resources, the enquiry card's
   headline and the figures section. */
.obm-team__heading, h2.obm-feature__title, h2.obm-display { font-size: 1.5em; width: 100%; }
.obm-feature__text { font-size: 1.1em; line-height: 1.6em; }
 .obm-team__intro, .obm-team__lead { min-width: 100%;}

/* The same type on a phone. 1.5em is a fixed size, so without this a heading
   set for a 1200px container keeps its desktop size on a 360px screen, where it
   runs to three or four lines above the copy it introduces.

   This block sits at the foot of the file, after the rules it steps down, and
   not in the @media (max-width: 640px) block higher up: the selectors are the
   same, so the later declaration wins wherever it is — a media query does not
   raise it. Put it in the earlier block and it silently does nothing. */
@media (max-width: 640px) {
	.obm-team__heading, h2.obm-feature__title, h2.obm-display { font-size: 1.3em; }
	.obm-feature__text { font-size: 1.02em; line-height: 1.55em; }
}