/* About page (page-templates/about.php). Shared pieces live in base.css. */

/* Section heads (from the design) */
.sh { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 24px; padding-top: 24px; border-top: 1px solid var(--steel); }
.sh .tk { position: absolute; top: -6px; width: 1px; height: 11px; background: var(--steel); }
.sh .tk.l { left: 0; }
.sh .tk.r { right: 0; }
.h2 { margin: 0; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.05; font-weight: 700; letter-spacing: -.015em; }
.tag { position: absolute; left: 16px; top: auto; bottom: 16px; margin: 0; padding: 6px 10px; background: var(--ink); color: #fff; font: 500 12px/16px var(--mono); letter-spacing: .08em; text-transform: uppercase; }

.ab-sec--concrete { background: var(--concrete); }
.ab-sec--white { background: #fff; }
.ab-sec--ink { background: var(--ink); color: #fff; }
.ab-pad { padding-top: 112px; padding-bottom: 112px; }

/* Hero */
.ab-hero { position: relative; background: var(--ink); color: #fff; overflow: hidden; }
.ab-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.ab-hero__shade { position: absolute; inset: 0; background: linear-gradient(to right, rgba(11,42,55,.95) 0%, rgba(11,42,55,.7) 55%, rgba(11,42,55,.45) 100%); }
.ab-hero__in { position: relative; padding-top: 200px; padding-bottom: 88px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 40px; }
.ab-hero__text { flex: 1 1 520px; min-width: 0; max-width: 820px; }
.ab-hero__title { margin: 24px 0 0; font-size: clamp(44px, 6vw, 88px); line-height: 1.02; font-weight: 700; letter-spacing: -.035em; }
.ab-hero__p { margin: 24px 0 0; max-width: 600px; font-size: 19px; line-height: 30px; color: var(--mist); }
.kpis { margin: 0; display: grid; grid-template-columns: repeat(3, auto); gap: 8px 40px; }
.kpis dt { color: var(--mist); }
.kpis dd { margin: 0; font-size: 44px; font-weight: 700; color: var(--teal); white-space: nowrap; }

/* Who we are */
.ab-who { margin-top: 56px; display: flex; flex-wrap: wrap; gap: 48px; align-items: stretch; }
.ab-who__text { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.about-p { margin: 0; font-size: 17px; line-height: 28px; color: var(--slate); }
.about-p.lead { font-size: 19px; line-height: 30px; color: var(--ink); }
.ab-cta { margin-top: 12px; align-self: flex-start; }
.about-fig { margin: 0; flex: 1.2 1 520px; min-width: 0; position: sticky; top: 112px; aspect-ratio: 16 / 9; align-self: flex-start; background: var(--petrol); overflow: hidden; }
.ab-fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* What we do */
.ab-tiles { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.ab-tile { background: var(--concrete); border-top: 2px solid var(--teal); padding: 32px 28px 36px; display: flex; flex-direction: column; gap: 20px; }
.ind-ill { height: 168px; margin: -12px -6px 0; }
.ab-tile__t { margin: 0; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.15; font-weight: 700; }
.ab-tile__p { margin: 8px 0 0; font-size: 15px; line-height: 23px; color: var(--slate); }

/* Animated drawings */
.ill { display: block; width: 100%; height: 100%; overflow: visible; }
.ill * { transform-box: fill-box; }
.i-pen { transform: translate(140px, 102px); }
@media (prefers-reduced-motion: no-preference) {
	.i-draw { stroke-dasharray: 100; animation: i-draw 5s linear infinite; }
	.i-d2 { animation-name: i-draw2; }
	.i-pen { animation: i-pen 5s linear infinite; }
	.i-arm1 { transform-box: view-box; transform-origin: 60px 104px; animation: i-arm1 2.6s ease-in-out infinite alternate; }
	.i-arm2 { transform-box: view-box; transform-origin: 82px 58px; animation: i-arm2 2.6s ease-in-out infinite alternate; }
	.i-bag2 { animation: i-bag2 4s linear infinite; }
	.i-ship { transform-origin: 50% 100%; animation: i-ship 4s ease-in-out infinite; }
	.i-wave2 { animation: i-wave2 2.4s linear infinite; }
}
@keyframes i-draw { 0% { stroke-dashoffset: 100; opacity: 1; } 55%, 88% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes i-draw2 { 0%, 55% { stroke-dashoffset: 100; opacity: 1; } 70%, 88% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes i-pen { 0% { transform: translate(56px, 102px); } 11% { transform: translate(56px, 44px); } 20% { transform: translate(100px, 44px); } 24% { transform: translate(100px, 64px); } 31% { transform: translate(140px, 64px); } 38% { transform: translate(140px, 102px); } 55% { transform: translate(56px, 102px); } 70% { transform: translate(87px, 80px); } 88%, 100% { transform: translate(87px, 80px); } }
@keyframes i-arm1 { from { transform: rotate(-9deg); } to { transform: rotate(7deg); } }
@keyframes i-arm2 { from { transform: rotate(16deg); } to { transform: rotate(-10deg); } }
@keyframes i-bag2 { 0% { transform: translateX(-2px); opacity: 0; } 10%, 80% { opacity: 1; } 100% { transform: translateX(42px); opacity: 0; } }
@keyframes i-ship { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(2px) rotate(1.5deg); } }
@keyframes i-wave2 { to { transform: translateX(-40px); } }

/* Benefits */
.ab-ben { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.ab-ben__head { flex: 1 1 380px; min-width: 0; }
.ben { flex: 1 1 520px; min-width: 0; list-style: none; margin: 0; padding: 0; }
.ben li { display: flex; align-items: flex-start; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line-light); font-size: 18px; line-height: 28px; font-weight: 600; color: var(--ink); }
.ben li:last-child { border-bottom: 1px solid var(--line-light); }
.ben li i { flex: 0 0 auto; width: 10px; height: 10px; margin-top: 9px; background: var(--teal); }

/* What we believe */
.ab-quote { margin: 28px 0 0; max-width: 1080px; font-size: clamp(32px, 4vw, 56px); line-height: 1.08; font-weight: 700; letter-spacing: -.02em; }
.ab-ctry { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; }
.ab-ctry .lbl { color: var(--mist); }
.ctry { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; }
.ctry__f { display: block; flex: 0 0 auto; border: 1px solid rgba(138,154,163,.5); }

/* Scroll reveal on section heads */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.sh { animation: rv linear both; animation-timeline: view(); animation-range: entry 0% entry 38%; }
	}
}

/* Phone */
@media (max-width: 900px) {
	.sh { grid-template-columns: 1fr; gap: 10px; }
	.ab-hero__in { padding-top: 128px; padding-bottom: 56px; }
	.kpis { gap: 6px 24px; }
	.kpis dd { font-size: 32px; }
	.ab-pad { padding-top: 64px; padding-bottom: 64px; }
	.ab-cta { height: auto; min-height: 54px; padding-top: 14px; padding-bottom: 14px; justify-content: center; text-align: center; width: 100%; }
	.ben li { font-size: 16px; line-height: 24px; padding: 14px 0; }
	.ben li i { margin-top: 7px; }
	.about-p { font-size: 16px; line-height: 26px; }
	.about-p.lead { font-size: 17px; line-height: 27px; }
	.about-fig { min-height: 0; position: relative; top: auto; }
}