/* ==========================================================================
   Mobile text fixes
   --------------------------------------------------------------------------
   Loaded last, after style.css, so these win without editing the vendor
   template. Everything here is scoped inside a max-width media query — the
   desktop layout is untouched.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. The ".text-outline" year counter ("20")

   style.css sets this at 90px, then steps it 80px (<=1200) -> 100px (<=991)
   -> 80px (<=768) -> 100px (<=480). The ladder is not monotonic, so a phone
   ends up with the LARGEST size of any breakpoint. At 375px wide the glyphs
   ran into the "Years" heading above them.

   Replaced with a single fluid value that only ever shrinks.
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {

	.text-outline {
		font-size: clamp(56px, 17vw, 76px);
		line-height: 1;
		display: block;
	}

	.arc-about-year-info .wt-title {
		font-size: clamp(20px, 6vw, 26px);
		line-height: 1.2;
	}

	/* The block is absolutely positioned over the photo. Give it a little more
	   breathing room from the right edge and stop it stretching the row. */
	.arc-about-year-info {
		right: 15px;
		max-width: calc(100% - 30px);
	}
}

/* style.css bumps .text-outline back up to 100px at <=480px. Neutralise that
   so the fluid value above stays in effect all the way down. */
@media only screen and (max-width: 480px) {

	.text-outline {
		font-size: clamp(56px, 17vw, 76px);
		line-height: 1;
	}
}


/* --------------------------------------------------------------------------
   2. The big outlined number watermark on the service cards

   ".data-title-large .wt-tilte-large:after" is 360px with z-index 2 and has no
   responsive override at all, so on a 345px-wide card the digits were both
   larger than the card and painted ON TOP of the body copy and "Read More".

   Scale it to the card and drop it behind the text.
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {

	.data-title-large .wt-tilte-large:after {
		font-size: clamp(90px, 34vw, 150px);
		line-height: 1;
		bottom: -28px;
		right: -8px;
		z-index: 0;
	}

	/* Lift the real content above the watermark. The wrapper is position:
	   relative already, so a stacking context exists to sit in. */
	.data-title-large .icon-content,
	.data-title-large .icon-xl {
		position: relative;
		z-index: 1;
	}
}


/* --------------------------------------------------------------------------
   3. Text columns squeezed into a ~160px ribbon

   Three blocks stack their own padding on top of the grid gutter, and none of
   them back off on a phone. On a 320px screen the About copy was reading in a
   171px column and the Specialties cards in 161px - four or five words a line,
   which is what made the home page ~19,000px tall on mobile.

   The target below is a 15px gutter plus at most 20px of component padding.
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {

	/* 15px gutter + 15px margin + 30px padding = 60px each side. */
	.arc-home-left-content {
		padding: 30px 20px;
		margin: 30px 0;
	}

	/* 15px gutter + 20px card padding + 30px panel padding = 65px each side. */
	.wt-team-arc2 {
		padding: 0;
	}

	.wt-team-arc2 .wt-info.p-a30 {
		padding: 25px 20px;
	}

	/* The journal lead card carries a 30px desktop offset that is never reset,
	   so it sat 30px right of every other block while its right edge stayed
	   flush - 88px of inset on the left against 15px on the right. The
	   background pattern it offsets for hangs off-canvas here anyway. */
	.latest-blog-3-pattern {
		margin-top: 0;
		margin-left: 0;
	}

	.latest-blog-3-pattern:after {
		display: none;
	}

	.latest-blog-3 .post-content-outer {
		border-left-width: 4px;
		padding-left: 12px;
	}

	/* Our Philosophy carousel. The card reserves 70px on its right for the
	   photo, which is pulled back over it with margin-right:-100px - a desktop
	   overlap that on a phone just leaves the copy 70px short of the edge with
	   the photo sitting 31px further right than the text above it. Stack them
	   flush instead. The 155px of top padding held a 100px watermark that is
	   far too large here. */
	.projects-two-info {
		padding: 95px 20px 25px;
		margin-right: 0;
	}

	.projects-two-info .wt-media {
		margin-right: 0;
	}

	.projects-two-info .wt-tilte:after {
		font-size: 64px;
		line-height: 70px;
		bottom: 34px;
	}

	/* With the columns this narrow, 1.8 leading reads as a list, not a
	   paragraph. */
	.about-lede,
	.latest-blog-3 p,
	.blog-post p {
		line-height: 1.6;
	}
}


/* --------------------------------------------------------------------------
   The About image column runs straight into the section below it

   Once the columns stack, style.css gives the image grid margin:30px -10px
   -20px. That -20px bottom exactly cancels the last photo's own m-b20, so the
   full-bleed dark "Our Philosophy" band starts on the same pixel the photo
   ends on - measured gap 0. It reads as though the band has clipped the image.

   Scoped to 991px to match the rule it is undoing, not 767px.
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 991px) {

	.arc-home-about-right {
		margin-bottom: 20px;
	}
}


/* --------------------------------------------------------------------------
   4. The hero

   Was a page of !important overrides fighting Slider Revolution's inline
   sizing. The slider is gone; the hero is plain CSS in theme.css and carries
   its own phone breakpoint, so there is nothing to patch here any more.
   Section number kept so the cross-references elsewhere still line up.
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {

	/* A 50px vertical social rail parked over the right sixth of the slide,
	   overlapping the headline. Its labels only appear on :hover, so on a
	   touch screen it is unreachable decoration. The same five links sit in
	   the footer. */
	.slider-social-right {
		display: none;
	}
}


/* --------------------------------------------------------------------------
   5. Hover-only controls on a touch screen

   The Specialties cards park their social bar at left:-100% and slide it in on
   :hover. A phone never fires :hover, so the bar just sits ~186px off the left
   edge of the viewport - clipped from view but still in the tab order.
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 767px), (hover: none) {

	.wt-team-arc2 .team-social-center {
		display: none;
	}
}


/* --------------------------------------------------------------------------
   6. Section headings and footer links
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {

	/* style.css drops every .section-head heading to a flat 22px under 480px
	   while the feature headings keep the fluid scale from theme.css, so one
	   section shouted at 32px and the rest whispered at 22px. */
	.section-head h1,
	.section-head h2,
	.section-head h3 {
		font-size: clamp(24px, 7vw, 30px);
		line-height: 1.2;
	}

	.section-head {
		margin-bottom: 30px;
	}

	/* theme.css already asks for 44px tap targets on .widget_services a, but
	   ".site-footer .widget_services ul li a" in style.css is more specific
	   and forces display:table-cell, which ignores it. Links were 20px tall. */
	.site-footer .widget_services ul li a {
		display: inline-flex;
		align-items: center;
		width: auto;
		min-height: 44px;
	}
}