/**
 * Service page — Bysmart.
 *
 * Direction: technical clarity. These pages sell accounting software to business owners who
 * arrive from a search and have to read a lot of Arabic before they trust anyone. So the
 * typography carries the page and the decoration stays out of its way: one deep-ink hero, a
 * measured text column, hairline structure, and the brand blue used as an edge rather than a
 * wash.
 *
 * Everything is scoped under .bysmart-service and prefixed `svc-`, because the parent theme
 * loads Bootstrap globally and the header and footer are Elementor templates.
 *
 * The page is RTL Arabic: every inset, padding and border below uses logical properties, so
 * the layout mirrors itself without a single `[dir="rtl"]` override.
 */

.bysmart-service {
	--svc-ink: #0a1b2e;
	--svc-ink-2: #16304d;
	--svc-body: #46586b;
	--svc-muted: #6b7f93;

	--svc-brand: #12adea;
	--svc-brand-deep: #0a86b8;
	--svc-wash: #eaf7fd;

	--svc-accent: #91d43a;
	--svc-accent-deep: #74b428;

	--svc-surface: #fff;
	--svc-surface-alt: #f4f8fb;
	--svc-edge: #dde7ef;

	--svc-shell: 1280px;
	--svc-shell-narrow: clamp(320px, 62vw, 928px);
	--svc-gutter: clamp(16px, 4vw, 48px);
	--svc-rhythm: clamp(48px, 4.5vw, 76px);
	--svc-radius: 14px;

	/* Arabic needs more leading than Latin at the same size, and a slightly larger body size
	   before it stops being tiring to read. */
	--svc-font: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
	--svc-leading: 1.95;

	/* A fluid type scale: each step grows with the viewport, from its minimum around 390px to its
	   maximum around 1440px, so desktop is not served text sized for a phone.

	   **In px, and nothing in this file is in rem.** The theme sets the root font size to 10px —
	   and to 12px below its mobile breakpoint. So `1rem` here was 10px on a desktop and 12px on a
	   phone: every size came out at 62.5% of what it should have been, and the scale ran
	   *backwards*, giving the phone the larger base. That is the whole of "tiny on desktop".
	   px cannot be moved out from under the page this way.

	   The steps are deliberately close together. Correcting the rem bug by simply restoring the
	   intended sizes overshot — 19px body under a 56px title is shouting on a page carrying a
	   thousand words of Arabic. This range keeps the hierarchy readable without any one thing
	   demanding attention. */
	--svc-step-s: clamp(13px, 12.63px + 0.10vw, 14px);   /* 13 → 14 */
	--svc-step-0: clamp(16px, 15.63px + 0.10vw, 17px);   /* 16 → 17  body */
	--svc-step-1: clamp(17px, 16.44px + 0.14vw, 18.5px); /* 17 → 18.5 */
	--svc-step-2: clamp(17px, 15.89px + 0.29vw, 20px);   /* 17 → 20  card titles */
	--svc-step-3: clamp(20px, 16.66px + 0.86vw, 29px);   /* 20 → 29  section headings */
	--svc-step-4: clamp(26px, 20.80px + 1.33vw, 40px);   /* 26 → 40  the page title */

	font-family: var(--svc-font);
	color: var(--svc-body);
	background: var(--svc-surface);
	line-height: var(--svc-leading);
	font-size: var(--svc-step-0);
}

.bysmart-service *,
.bysmart-service *::before,
.bysmart-service *::after {
	box-sizing: border-box;
}

.svc-shell {
	width: 100%;
	max-width: var(--svc-shell);
	margin-inline: auto;
	padding-inline: var(--svc-gutter);
}

.svc-shell--narrow {
	max-width: var(--svc-shell-narrow);
}

.svc-section {
	padding-block: var(--svc-rhythm);
}

/* Alternating ground keeps a long page from reading as one scroll. */
.svc-features,
.svc-contact {
	background: var(--svc-surface-alt);
}

/* ------------------------------------------------------------------ typography */

/* This rule has now broken two things the same way, and both times the cause was its
   specificity: an element+class selector like `.bysmart-service h2` outranks a plain
   `.svc-heading--centred`, so anything set here wins over the rule that is supposed to be
   describing that one heading.

     `color` painted the hero's H1 dark navy on a dark navy hero. Present in the markup,
     invisible on screen. It is gone: colour belongs to each heading's own context.

     `margin: 0` beat `margin-inline: auto`, so every "centred" heading sat hard against the
     start edge with its text centred inside a box that was never centred. Measured at
     148px of gap on one side and 0 on the other. It is `margin-block` now: the vertical
     default still needs resetting, and the inline axis is left alone so a heading can be
     centred by the rule that says so.

   Set only what every heading needs, and set it on the narrowest axis that works. */
.bysmart-service h1,
.bysmart-service h2,
.bysmart-service h3,
.bysmart-service h4 {
	font-weight: 700;
	line-height: 1.4;
	margin-block: 0;
	letter-spacing: 0;
}

.svc-heading {
	color: var(--svc-ink);
	font-size: var(--svc-step-3);
	/* Stated rather than inherited from the blanket rule, which no longer touches the
	   inline axis so that --centred can take it. */
	margin: 0 0 20px;
	position: relative;
	padding-block-end: 13.6px;
}

/* A short rule under every section heading — the page's one repeated structural mark.
   `inset-inline-start` puts it on the right in Arabic without a direction override. */
.svc-heading::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	width: 56px;
	height: 3px;
	border-radius: 3px;
	background: var(--svc-brand);
}

.svc-heading--centred {
	text-align: center;
	margin-inline: auto;
	max-width: 640px;
}

.svc-heading--centred::after {
	inset-inline-start: 50%;
	transform: translateX(50%);
}

.svc-prose {
	color: var(--svc-body);
}

/* The migrated copy carries its own sub-headings — each service page lists its features as a
   run of h3s inside the body. Unstyled they inherit the browser's default size and come out
   larger than the section heading above them, which inverts the hierarchy. */
.svc-prose h2,
.svc-prose h3,
.svc-prose h4 {
	color: var(--svc-ink);
	font-size: var(--svc-step-2);
	margin-block: 1.75em 0.5em;
}

.svc-prose h2 { font-size: var(--svc-step-3); }
.svc-prose h4 { font-size: var(--svc-step-1); }

.svc-prose > :first-child { margin-block-start: 0; }
.svc-prose > :last-child { margin-block-end: 0; }

.svc-prose p,
.svc-prose ul,
.svc-prose ol {
	margin-block: 0 1.1em;
}

.svc-prose ul,
.svc-prose ol {
	padding-inline-start: 1.4em;
}

.svc-prose li {
	margin-block-end: 0.5em;
}

.svc-prose strong {
	color: var(--svc-ink-2);
	font-weight: 600;
}

.svc-prose a {
	color: var(--svc-brand-deep);
	text-underline-offset: 3px;
}

.svc-lede {
	max-width: 680px;
	margin-inline: auto;
	margin-block-end: clamp(32px, 3vw, 52px);
	text-align: center;
	color: var(--svc-muted);
	font-size: var(--svc-step-1);
}

/* Several of these intros end with a bulleted list of the features named below. Centred bullets
   read as a mistake, so the list becomes a centred row of chips instead — still an aside, but
   one that scans. */
.svc-lede ul {
	list-style: none;
	padding: 0;
	margin-block: 20px 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	font-size: var(--svc-step-s);
}

.svc-lede li {
	margin: 0;
	padding: 5px 14px;
	border: 1px solid var(--svc-edge);
	border-radius: 999px;
	background: var(--svc-surface);
	color: var(--svc-ink-2);
}

.svc-lede strong {
	color: var(--svc-ink-2);
}

/* ------------------------------------------------------------------------ hero */

.svc-hero {
	position: relative;
	overflow: hidden;
	background: var(--svc-ink);
	color: #cfe0ee;
	padding-block: clamp(44px, 4.5vw, 76px);
	isolation: isolate;
}

/* Atmosphere without an image: one off-centre brand glow over a fine grid. */
.svc-hero__glow {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(832px 480px at 82% -18%, rgba(18, 173, 234, 0.28), transparent 62%),
		radial-gradient(608px 416px at 8% 108%, rgba(145, 212, 58, 0.12), transparent 60%),
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 64px),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 64px);
}

.svc-hero__title {
	color: #fff;
	font-size: var(--svc-step-4);
	line-height: 1.35;
	max-width: 680px;
	margin-block-end: 20px;
}

.svc-hero__intro {
	max-width: 580px;
	font-size: var(--svc-step-1);
	color: #b6cbdd;
	margin-block-end: 32px;
}

.svc-hero__intro p:last-child { margin-block-end: 0; }

/* Breadcrumb comes from Rank Math, so style by context rather than by its own classes. */
.svc-crumbs {
	font-size: var(--svc-step-s);
	color: #7d99b3;
	margin-block-end: 28px;
}

.svc-crumbs a {
	color: #9fb9d1;
	text-decoration: none;
}

.svc-crumbs a:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------- button */

.svc-btn {
	display: inline-block;
	padding: clamp(13.6px, 1vw, 16.8px) clamp(32px, 2.6vw, 44px);
	border-radius: 999px;
	background: var(--svc-accent);
	color: #10230a;
	font-weight: 600;
	font-size: var(--svc-step-0);
	text-decoration: none;
	border: 0;
	transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.svc-btn:hover,
.svc-btn:focus-visible {
	background: var(--svc-accent-deep);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -12px rgba(116, 180, 40, 0.9);
}

/* The parent theme styles `a:active`, which is one pseudo-class more specific than `.svc-btn`
   and so won the moment the button was pressed: the label turned pale blue between the black it
   sits at and the white it hovers to. Stated here rather than fought with !important. */
.svc-btn:active,
.svc-btn:visited {
	color: #fff;
}

.svc-btn--lead {
	/* Barely larger than the body button. It used to be a step up in both type and padding,
	   which on a hero that already carries a 40px title read as shouting. */
	padding: clamp(14px, 1vw, 17px) clamp(34px, 2.6vw, 46px);
	font-size: var(--svc-step-0);
}

/* Centred in the hero, under copy that is not. The button is the one thing on that band asking
   to be pressed, and sitting it at the end of a right-aligned stack left it looking dropped. */
.svc-hero .svc-btn--lead {
	display: block;
	width: fit-content;
	margin-inline: auto;
}

/* Only when there is no intro between them. With one, the intro's own bottom margin sets the
   gap; without, the button was left against the underside of the title. */
.svc-hero__title + .svc-btn--lead {
	margin-block-start: 16px;
}

.bysmart-service a:focus-visible,
.bysmart-service summary:focus-visible {
	outline: 3px solid var(--svc-brand);
	outline-offset: 3px;
}

/* ----------------------------------------------------------- split text + media */

.svc-split {
	display: grid;
	/* The text leads. The first version gave the image the wider column, which on a section
	   carrying a thousand words of Arabic put a single illustration next to a cramped column
	   of copy. */
	/* A fixed column, not a share of the row. As fractions the media took whatever width the
	   row had and the picture inside it whatever height its own proportions gave: a tall image
	   towered over the copy beside it, a short one sat lost in the same slot. A width the page
	   decides keeps every section the same shape, and clamped rather than a flat 360px so a
	   narrow tablet does not leave the text in a gutter. */
	grid-template-columns: clamp(230px, 30%, 360px) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 64px);
	/* Top-aligned, not centred: these bodies run to a thousand words, and centring left the
	   image floating alone in the middle of a very tall column. Sticky keeps it in view while
	   that column scrolls past. */
	align-items: start;
}

.svc-split__media {
	position: sticky;
	top: clamp(64px, 8vh, 112px);
}

.svc-split--text-only {
	grid-template-columns: minmax(0, 1fr);
}

.svc-split--text-only .svc-split__text {
	max-width: 600px; /* ~75 Arabic characters per line. Set in px because `ch` is the width of
	                       "0" — far wider than an Arabic glyph, so 62ch measured out at 88. */
}

.svc-split__media {
	margin: 0;
	border-radius: var(--svc-radius);
	overflow: hidden;
	background: var(--svc-wash);
}

/* The box is the page's, the picture fills it. `cover` crops the overflowing side rather than
   squashing the picture into a shape it was not, which is what `height: auto` left to whatever
   the editor happened to upload: a portrait photograph made a column twice the height of the
   text, a wide screenshot made a letterbox.
   4/3 rather than the video's 16/9: these are mostly screenshots and product photographs, and
   beside a column that runs to a thousand words a taller box carries its weight. A video keeps
   16/9 because that is what a video is, and it already had this treatment. */
figure.svc-split__media {
	aspect-ratio: 4 / 3;
}

.svc-split__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The media sits first in the source (it belongs to the section it illustrates); on flipped
   sections the columns swap so a run of blocks alternates instead of marching down one side.
   The TRACKS have to swap as well, not just the order of the items in them. `order` moves an
   item to the second column but leaves the second column the width it was, so on every flipped
   section the picture was taking the wide track and the copy the narrow one: measured at 708px
   of image beside 600px of text, which is the squeeze that was being reported.
   A section with no media has one track and must keep it, so it is excluded by name rather
   than left to lose a specificity argument. */
.svc-block--flip .svc-split:not(.svc-split--text-only) {
	grid-template-columns: minmax(0, 1fr) clamp(230px, 30%, 360px);
}

.svc-block--flip .svc-split__media { order: 2; }
.svc-block--flip .svc-split__text { order: 1; }

/* --------------------------------------------------------------- feature cards */

.svc-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* 340 rather than 280: with the type scale grown for desktop, a narrower card puts four or
	   five words on a line and the copy turns into a column of fragments. */
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	gap: clamp(16px, 1.6vw, 28px);
}

.svc-card {
	position: relative;
	background: var(--svc-surface);
	border: 1px solid var(--svc-edge);
	border-radius: var(--svc-radius);
	padding: clamp(22px, 1.8vw, 28px) clamp(20px, 1.6vw, 26px);
	overflow: hidden;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* The accent edge: a hairline on the leading side that fills in on hover. In Arabic that is
   the right-hand edge, which is where the eye enters the card. */
.svc-card::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 3px;
	background: var(--svc-brand);
	transform: scaleY(0.18);
	transform-origin: top;
	transition: transform 0.25s ease;
}

.svc-card:hover {
	border-color: #c3d8e7;
	box-shadow: 0 18px 38px -26px rgba(10, 27, 46, 0.5);
	transform: translateY(-3px);
}

.svc-card:hover::before {
	transform: scaleY(1);
}

.svc-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(50px, 3.2vw, 58px);
	height: clamp(50px, 3.2vw, 58px);
	border-radius: 50%;
	background: var(--svc-wash);
	margin-block-end: 17.6px;
}

.svc-card__icon img {
	width: clamp(28px, 1.9vw, 34px);
	height: clamp(28px, 1.9vw, 34px);
	object-fit: contain;
}

.svc-card__title {
	font-size: var(--svc-step-2);
	margin-block-end: 9.6px;
}

.svc-card__body {
	font-size: var(--svc-step-0);
}

/* ------------------------------------------------------------------------- faq */

.svc-accordion {
	display: grid;
	gap: 12px;
}

.svc-qa {
	background: var(--svc-surface);
	border: 1px solid var(--svc-edge);
	border-radius: var(--svc-radius);
	padding: 0 20px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.svc-qa[open] {
	border-color: #bfdcec;
	box-shadow: 0 16px 34px -28px rgba(10, 27, 46, 0.65);
}

.svc-qa__q {
	display: flex;
	align-items: center;
	gap: 13.6px;
	padding-block: 18.4px;
	font-weight: 600;
	color: var(--svc-ink);
	cursor: pointer;
	list-style: none;
	font-size: var(--svc-step-1);
}

/* Safari still paints its own triangle without this. */
.svc-qa__q::-webkit-details-marker { display: none; }

/* A chevron drawn in CSS, so the accordion costs no icon font and no JS. */
.svc-qa__q::before {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-inline-end: 2px solid var(--svc-brand);
	border-block-end: 2px solid var(--svc-brand);
	transform: rotate(45deg);
	transition: transform 0.22s ease;
	margin-block-start: -4px;
}

.svc-qa[open] .svc-qa__q::before {
	transform: rotate(-135deg);
	margin-block-start: 4px;
}

.svc-qa__a {
	padding-block: 0 20px;
	/* Line the answer up with the question's text, past the chevron. */
	padding-inline-start: calc(9px + 13.6px);
}

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

.svc-contact .wpforms-container {
	margin: 0;
}

/* ------------------------------------------------------------------ responsive */

@media (max-width: 860px) {
	/* The flipped selector is listed too: it is more specific than `.svc-split`, so without it
	   a flipped section would keep its two tracks here while every other one stacked. */
	.svc-split,
	.svc-block--flip .svc-split:not(.svc-split--text-only) {
		grid-template-columns: minmax(0, 1fr);
	}

	/* On one column the image always leads, flipped or not — alternation means nothing here. */
	.svc-block--flip .svc-split__media { order: 0; }
	.svc-block--flip .svc-split__text { order: 0; }

	/* Sticky only makes sense beside a scrolling column. Stacked, it would pin the image over
	   the text it belongs to. */
	.svc-split__media { position: static; }

	.svc-hero__title {
		max-width: none;
	}
}

@media (max-width: 520px) {
	/* Size and padding are on the fluid scale now and are already at their minimum here, so this
	   block only carries what the scale cannot express: slightly tighter leading, and a button
	   that fills the width instead of sitting as a small pill. */
	.bysmart-service {
		--svc-leading: 1.9;
	}

	.svc-btn,
	.svc-btn--lead {
		display: block;
		text-align: center;
		padding-inline: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bysmart-service *,
	.bysmart-service *::before {
		transition-duration: 0.01ms !important;
	}

	.svc-btn:hover,
	.svc-card:hover {
		transform: none;
	}
}

/* ------------------------------------------------- extra illustrations */

/* A second image below a section's prose. Rare — a handful of the original pages carry one —
   so it lays out as a simple row that collapses to one column rather than a full gallery. */
.svc-extras {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin-block-start: 24px;
}

/* Inside a card the same images are supporting detail, not the subject. At full column width
   they came out taller than the text they illustrate and the card read as an image with a
   caption. A short row of thumbnails, sized by height so tall and wide artwork agree. */
.svc-card .svc-extras {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-block-start: 20px;
}

.svc-card .svc-extras__item {
	background: none;
	border: 1px solid var(--svc-edge);
	padding: 6px;
	border-radius: 10px;
}

.svc-card .svc-extras__item img {
	height: clamp(48px, 6vw, 68px);
	width: auto;
	max-width: 120px;
	object-fit: contain;
}

.svc-extras__item {
	margin: 0;
	border-radius: var(--svc-radius);
	overflow: hidden;
	background: var(--svc-wash);
}

.svc-extras__item img {
	display: block;
	width: 100%;
	height: auto;
}

/* ------------------------------------------------------- editor notices */

/* Shown only to someone who can edit the page — a visitor never sees it. Marks a shortcode that
   asked for a section the page does not have, so a mistyped index is visible in the editor
   instead of quietly rendering nothing. */
.svc-notice {
	max-width: var(--svc-shell);
	margin: 16px auto;
	padding: 12px 16px;
	border: 1px dashed #d8a200;
	border-radius: 8px;
	background: #fff8e5;
	color: #6b5200;
	font-size: var(--svc-step-s);
	text-align: center;
}

/* ------------------------------------------------------- two columns of copy */

/* The "duo" section: two blocks of copy with no media between them. Equal
   columns, because neither is subordinate to the other. */
.svc-duo__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	gap: clamp(24px, 3.5vw, 56px);
	align-items: start;
}

/* ------------------------------------------------------------------- video */

/* A cover image with a play button, not an iframe. An embed costs a
   third-party script and a layout shift before anyone has decided to watch;
   the real player is swapped in on click by assets/js/service-video.js. */
.svc-video {
	position: relative;
	border-radius: var(--svc-radius);
	overflow: hidden;
	background: var(--svc-ink);
	aspect-ratio: 16 / 9;
	cursor: pointer;
}

.svc-video img,
.svc-video iframe {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

.svc-video__play {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(50%, -50%);
	width: 68px;
	height: 68px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	cursor: pointer;
	transition: transform 0.2s ease, background 0.2s ease;
}

/* The triangle is drawn with borders, so the play button costs no icon font
   and no second request. */
.svc-video__play::before {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 11px 0 11px 18px;
	border-color: transparent transparent transparent var(--svc-ink);
}

/* The glyph points right in both directions: a play button is a transport
   control, not text, so it does not mirror in RTL. */
.svc-video__play:hover,
.svc-video__play:focus-visible {
	background: #fff;
	transform: translate(50%, -50%) scale(1.06);
}

.svc-video.is-playing .svc-video__play {
	display: none;
}

/* --------------------------------------------- the hero's featured image */

/* The page's Featured Image, behind the title. Most service pages have none
   yet, so this is additive: without one the hero keeps the plain ink and glow
   it was designed around, which has to look deliberate on its own. */
.svc-hero--image {
	background-image: var(--svc-hero-image);
	background-size: cover;
	background-position: center;
}

/* A gradient, not a flat wash. A uniform overlay has to be dark enough for the
   worst part of any photograph, so it muddies every image to protect one. This
   one is heaviest where the text sits and lifts off the far side. */
.svc-hero--image .svc-hero__glow {
	background:
		linear-gradient(to left, rgba(10, 27, 46, 0.94) 0%, rgba(10, 27, 46, 0.82) 45%, rgba(10, 27, 46, 0.55) 100%),
		radial-gradient(52rem 30rem at 82% -18%, rgba(18, 173, 234, 0.22), transparent 62%);
}

/* ------------------------------------------------------- the contact form */

/* The submit button takes the accent green. The footer directly below it is the
   brand blue, and a blue button on top of a blue band stops reading as a button.
   !important because WPForms writes its own colours into an inline <style> block
   from the form builder's settings, and an inline rule beats a stylesheet at any
   specificity. The alternative is setting the colour inside every form in the
   builder, where the next person will not find it. */
.svc-contact .wpforms-submit,
.svc-contact button[type="submit"],
.svc-contact input[type="submit"] {
	background-color: var(--svc-accent) !important;
	border-color: var(--svc-accent) !important;
	color: #10230a !important;
	font-weight: 600;
	border-radius: 999px;
	padding-inline: clamp(32px, 2.6vw, 44px);
	transition: background-color 0.18s ease, transform 0.18s ease;
}

.svc-contact .wpforms-submit:hover,
.svc-contact button[type="submit"]:hover,
.svc-contact input[type="submit"]:hover {
	background-color: var(--svc-accent-deep) !important;
	border-color: var(--svc-accent-deep) !important;
	color: #fff !important;
	transform: translateY(-2px);
}

/* =========================================================== من نحن
   The About page.

   Same system as the service pages: same tokens, same type scale, same hairline
   vocabulary. A second aesthetic on one page reads as a page somebody else
   built.

   What it does differently is composition. There are NO photographs here, and
   that is a decision rather than a gap: the library holds 1,168 images and not
   one is of this company. So the page is built from type, space and one repeated
   device, a hairline rule with a brand-blue mark, and every section is an
   editorial row rather than a card with an image slot.
   =========================================================== */

/* The small line that names what follows. Carries the brand colour, and nothing
   else on the page does, so it reads as a system rather than decoration. */
.abt-eyebrow {
	margin: 0 0 12px;
	font-size: var(--svc-step-s);
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--svc-brand);
}

.abt-eyebrow--centred {
	text-align: center;
}

/* ------------------------------------------------------------- the opening */

.abt-intro {
	padding-block: clamp(56px, 7vw, 120px);
}

/* The partnership, as a bordered pill with a lit dot. It is the single most
   important fact on the page and a claim Odoo awards, so it is stated like a
   credential rather than set as another line of text. */
.abt-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 clamp(20px, 2vw, 28px);
	padding: 8px 18px;
	border: 1px solid rgba(18, 173, 234, 0.45);
	border-radius: 999px;
	background: rgba(18, 173, 234, 0.08);
	color: #9fd8f3;
	font-size: var(--svc-step-s);
	font-weight: 600;
}

.abt-badge__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--svc-brand);
	box-shadow: 0 0 0 4px rgba(18, 173, 234, 0.22);
}

.abt-intro__title {
	color: #fff;
	font-size: clamp(34px, 1.4vw + 30px, 64px);
	line-height: 1.25;
	margin: 0 0 clamp(18px, 2vw, 26px);
}

/* Wider than a service hero's intro: this paragraph IS the page's content, not
   a lead into it, so it gets a reading measure rather than a teaser's. */
.abt-lead {
	max-width: 760px;
	font-size: var(--svc-step-1);
	line-height: 1.95;
	color: #c3d8e9;
}

/* What the company does, in the first screen. An About page that makes a visitor
   scroll to find out what is being sold has buried its own point. */
.abt-pillars {
	list-style: none;
	margin: clamp(28px, 3vw, 44px) 0 0;
	padding: clamp(24px, 2.4vw, 32px) 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
}

.abt-pillars__item {
	position: relative;
	padding-inline-start: 16px;
	font-size: var(--svc-step-s);
	color: #9fb6ca;
}

.abt-pillars__item::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.62em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--svc-brand);
}

/* ----------------------------------------------------- vision and mission */

/* Rows, not cards. These are the longest sentences on the page, and a card
   forces both into a box whose height is set by the longer one, which left the
   other half empty. A row gives the label its own column and lets the statement
   run at a readable measure. */
.abt-row {
	display: grid;
	grid-template-columns: minmax(0, 0.32fr) minmax(0, 1fr);
	gap: clamp(20px, 4vw, 64px);
	padding-block: clamp(32px, 3.4vw, 52px);
	border-top: 1px solid var(--svc-edge);
	align-items: start;
}

.abt-row:last-child {
	border-bottom: 1px solid var(--svc-edge);
}

.abt-row__side {
	display: flex;
	align-items: baseline;
	gap: 14px;
}

.abt-row__n {
	font-size: var(--svc-step-1);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--svc-brand);
}

.abt-row__label {
	font-size: var(--svc-step-2);
	color: var(--svc-ink);
	margin: 0;
}

.abt-row__text {
	margin: 0;
	font-size: var(--svc-step-1);
	line-height: 1.95;
	color: var(--svc-body);
	max-width: 68ch;
}

/* ---------------------------------------------------------------- the goal */

/* The one full-bleed ink band, and the only place a sentence is given the whole
   width with nothing competing. */
.abt-goal {
	position: relative;
	overflow: hidden;
	background: var(--svc-ink);
	isolation: isolate;
	text-align: center;
}

.abt-goal__glow {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(44rem 26rem at 50% -30%, rgba(18, 173, 234, 0.26), transparent 64%),
		radial-gradient(30rem 20rem at 12% 120%, rgba(145, 212, 58, 0.1), transparent 60%);
}

.abt-goal__quote {
	margin: 0;
	border: 0;
	padding: 0;
	color: #fff;
	font-size: var(--svc-step-3);
	font-weight: 600;
	line-height: 1.75;
}

/* The parent theme decorates every blockquote with a quote mark from its icon
   font. The font is not loaded here, so it rendered as a missing-glyph box in
   the middle of the sentence. This quote is the company's own statement, not a
   citation, and needs no ornament. */
.abt-goal__quote::before,
.abt-goal__quote::after {
	content: none;
	display: none;
}

/* ------------------------------------------------------------ the services */

.abt-services {
	background: var(--svc-surface-alt);
}

.abt-head {
	max-width: 680px;
	margin-block-end: clamp(32px, 3.4vw, 52px);
}

.abt-head__title {
	font-size: var(--svc-step-3);
	color: var(--svc-ink);
	margin: 0 0 14px;
}

.abt-head__lead {
	margin: 0;
	font-size: var(--svc-step-1);
	line-height: 1.95;
	color: var(--svc-muted);
}

.abt-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* Five in one row where there is room. auto-fit at 300px gave three and then
	   two, and the short row sat against one edge with a hole beside it, which
	   reads as a grid with something missing rather than a sequence of five. */
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: clamp(12px, 1.2vw, 18px);
}

@media (max-width: 1180px) {
	.abt-steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.abt-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 460px) {
	.abt-steps {
		grid-template-columns: minmax(0, 1fr);
	}
}

.abt-step {
	position: relative;
	overflow: hidden;
	background: var(--svc-surface);
	border: 1px solid var(--svc-edge);
	border-radius: var(--svc-radius);
	padding: clamp(26px, 2.4vw, 36px) clamp(22px, 2vw, 30px);
	display: flex;
	align-items: flex-end;
	min-height: clamp(128px, 11vw, 168px);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* The numeral is drawn large and pale behind the title, not beside it: the
   sequence reads at a glance and the digits never compete with the words.
   Tabular figures so 01 and 05 occupy the same width. */
.abt-step__n {
	position: absolute;
	inset-block-start: clamp(10px, 1vw, 16px);
	inset-inline-start: clamp(16px, 1.6vw, 24px);
	font-size: clamp(44px, 4vw, 68px);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	color: var(--svc-wash);
	transition: color 0.2s ease;
	pointer-events: none;
}

.abt-step__t {
	position: relative;
	font-size: var(--svc-step-1);
	font-weight: 600;
	color: var(--svc-ink);
	line-height: 1.6;
}

.abt-step:hover {
	border-color: #bfdcec;
	box-shadow: 0 18px 38px -26px rgba(10, 27, 46, 0.5);
	transform: translateY(-3px);
}

.abt-step:hover .abt-step__n {
	color: #d7edf9;
}

/* -------------------------------------------------------------- the market */

/* A slim band, not a section. One approved sentence given a section's height
   reads as a page that ran out of things to say. */
.abt-market {
	padding-block: clamp(26px, 2.6vw, 40px);
	border-block: 1px solid var(--svc-edge);
	background: var(--svc-surface);
}

.abt-market__inner {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2vw, 28px);
	flex-wrap: wrap;
}

.abt-market__label {
	font-size: var(--svc-step-s);
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--svc-brand);
	flex: 0 0 auto;
}

.abt-market__rule {
	flex: 1 1 40px;
	height: 1px;
	background: var(--svc-edge);
	min-width: 32px;
}

.abt-market__text {
	font-size: var(--svc-step-2);
	font-weight: 600;
	color: var(--svc-ink-2);
	flex: 0 1 auto;
}

/* ------------------------------------------------------------- the closing */

/* On ink, so the page ends the way it opened and the call to action is the
   brightest thing on screen when a reader reaches it. */
.abt-contact {
	position: relative;
	overflow: hidden;
	background: var(--svc-ink);
	isolation: isolate;
}

.abt-contact__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(28px, 4vw, 64px);
	align-items: center;
}

.abt-contact__title {
	font-size: var(--svc-step-3);
	color: #fff;
	margin: 0 0 clamp(20px, 2vw, 28px);
}

.abt-contact__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.abt-contact__item {
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--svc-radius);
	background: rgba(255, 255, 255, 0.04);
	padding: 16px 22px;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.abt-contact__item:hover {
	border-color: rgba(18, 173, 234, 0.5);
	background: rgba(18, 173, 234, 0.07);
}

.abt-contact__label {
	font-size: var(--svc-step-s);
	color: #8fa8bd;
	flex: 0 0 auto;
}

.abt-contact__value {
	font-size: var(--svc-step-1);
	font-weight: 600;
	color: #fff;
	text-decoration: none;
}

.abt-contact__value:hover {
	color: var(--svc-brand);
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 720px) {
	/* The label stops being a column and sits above its statement. */
	.abt-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

	.abt-market__rule {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.abt-step:hover {
		transform: none;
	}
}

/* The parent theme decorates every blockquote with a quote mark from its icon
   font, drawn in a ::before. The font is not loaded on this page, so it rendered
   as a missing-glyph box in the middle of the sentence. The quote here is the
   company's own statement, not a citation, and needs no ornament. */
.abt-goal__quote::before,
.abt-goal__quote::after {
	content: none;
	display: none;
}

/* The icon row at the top of a feature card. The extras used to sit under the
   body, which gave a card a picture at each end and made it read as two. */
.svc-card__marks {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-block-end: 18px;
}

.svc-card__marks .svc-card__icon {
	margin-block-end: 0;
}

/* An extra is supporting detail beside the icon, not a second icon: smaller,
   and on the plain surface rather than in the brand wash. */
.svc-card__icon--extra {
	width: clamp(40px, 2.6vw, 48px);
	height: clamp(40px, 2.6vw, 48px);
	background: none;
	border: 1px solid var(--svc-edge);
	border-radius: 10px;
}

.svc-card__icon--extra img {
	width: clamp(26px, 1.7vw, 32px);
	height: clamp(26px, 1.7vw, 32px);
}