/*
Theme Name: TheNibras
Theme URI: https://thenibras.com
Author: TheNibras
Description: The TheNibras site as a WordPress theme. Reproduces the Deep Harbour design exactly, with every section editable from the WordPress admin. English and Arabic ready, right-to-left included. Built to sit alongside the existing portal, staff, client and setup apps and the Node relay at /api, none of which this theme touches.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: Proprietary
Text Domain: thenibras
Tags: rtl-language-support, translation-ready, custom-colors, block-styles
*/

/* ==========================================================================
   The stylesheet below is the live site's CSS, carried over unchanged so the
   WordPress build is visually identical to what it replaces. Anything added
   for WordPress itself is at the bottom, under "WordPress additions".
   ========================================================================== */


/* ===== Deep Harbour palette ===== */
:root{
  --navy:#0C1F33; --navy2:#16344F; --blue:#2C6B99; --blueLt:#7FB3D5;
  --beige:#DCCFBC; --grey:#E6EAEF; --grey2:#C6CED8;
  --serif:'Times New Roman', Times, 'Liberation Serif', Tinos, serif;
}
[data-theme="light"]{
  --bg:#ffffff; --surface:var(--grey); --surface-2:var(--beige);
  --ink:#101820; --ink-soft:#43505E; --ink-faint:#5F6B78;
  --line:#E2E6EB; --line-strong:var(--grey2);
  --head:var(--navy); --accent:var(--blue); --accent-2:var(--blueLt);
  /* legacy aliases so widget CSS inherits the new palette */
  --amber:var(--blue); --amber-deep:var(--blue); --teal:var(--navy); --teal-deep:var(--navy);
  --terracotta:#B4472F; --green:#0A7D0A;
}
[data-theme="dark"]{
  --bg:#0A1826; --surface:#12293E; --surface-2:#1B2A33;
  --ink:#E6EDF4; --ink-soft:#9FB2C4; --ink-faint:#7E93A6;
  --line:#1A2C3C; --line-strong:#22384B;
  --head:#E6EDF4; --accent:#7FB3D5; --accent-2:#7FB3D5;
  --amber:#7FB3D5; --amber-deep:#7FB3D5; --teal:#7FB3D5; --teal-deep:#7FB3D5;
  --terracotta:#E08A72; --green:#5CC95C;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink-soft);font-family:var(--serif);
  font-size:17.5px;line-height:1.72;-webkit-font-smoothing:antialiased;
  transition:background .3s,color .3s}
body.lang-ar,body.lang-ar h1,body.lang-ar h2,body.lang-ar h3,body.lang-ar h4,body.lang-ar .brand{font-family:'Cairo',sans-serif}
h1,h2,h3,h4{font-family:var(--serif);color:var(--head);font-weight:700;letter-spacing:-.015em;line-height:1.14}
a{color:inherit;text-decoration:none}
i,em,cite,address,dfn,var{font-style:normal}
img{max-width:100%}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
section{padding:104px 0;position:relative}
.bg-alt{background:var(--surface)}
[data-theme="light"] #pricing{background:#FBFCFD}
[data-theme="light"] #work{background:#F4F6F8}
[data-theme="light"] #faq{background:#FBFCFD}
[data-theme="light"] #how{background:#fff}
section + section{border-top:1px solid var(--line)}
.hero + section,.bg-alt + section,section + .bg-alt,
#partners,.final-cta,.audit-bg,#partners + section{border-top:none}

.eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);display:flex;align-items:center;gap:12px}
.eyebrow::after{content:"";height:1px;width:44px;background:var(--accent);opacity:.45}
.eyebrow.teal{color:var(--head)}
.eyebrow.teal::after{background:var(--head)}
.section-head{max-width:680px;margin-bottom:60px}
.section-head h2{font-size:clamp(29px,3.3vw,43px);margin:18px 0 15px}
.section-head p{font-size:18px;color:var(--ink-soft);max-width:58ch}
.section-head.center{margin-inline:auto;text-align:center}
.section-head.center .eyebrow{justify-content:center}
.section-head.center .eyebrow::before{content:"";height:1px;width:44px;background:currentColor;opacity:.45}
.section-head.center p{margin-inline:auto}

.btn{display:inline-flex;align-items:center;justify-content:center;
  padding:13px 30px;min-height:50px;font-size:15.5px;line-height:1.25;font-weight:700;
  cursor:pointer;border:1px solid transparent;border-radius:0;transition:.22s;
  font-family:var(--serif);text-align:center}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--head)}
[data-theme="dark"] .btn-primary{color:#0A1826}
[data-theme="dark"] .btn-primary:hover{background:#fff}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-teal{background:var(--head);color:#fff}
[data-theme="dark"] .btn-teal{background:var(--accent);color:#0A1826}
.btn-onDark{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn-onDark:hover{background:#fff;color:var(--navy)}
.btn-sm{padding:10px 22px;min-height:42px;font-size:14.5px}
.btn-block{display:flex;width:100%}

/* ---- header ---- */
header{position:sticky;top:0;z-index:60;background:var(--grey);border-bottom:1px solid var(--line-strong)}
[data-theme="dark"] header{background:var(--surface);border-bottom-color:var(--line-strong)}
.nav{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:28px;padding:20px 32px}
.brand{font-family:var(--serif);font-size:24px;font-weight:700;color:var(--head);letter-spacing:-.01em}
.nav-links{display:flex;gap:26px;margin-inline-start:10px}
.nav-links a{font-size:16px;color:var(--ink-soft);position:relative;padding:3px 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;height:1.5px;width:0;background:var(--accent);transition:.25s}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:12px;margin-inline-start:auto}
.nav-login{font-size:15px;color:var(--ink-soft);border-bottom:1px solid transparent;padding-bottom:2px;white-space:nowrap}
.nav-login:hover{color:var(--ink);border-bottom-color:var(--accent)}
@media(max-width:520px){.nav-login{font-size:14px}
  /* The login link pushed the row past the viewport on a phone, so the
     group wraps rather than overflowing. */
  .nav-cta{flex-wrap:wrap;justify-content:flex-end;gap:10px}}
.lang-select{background:transparent;border:1px solid var(--line-strong);color:var(--ink);
  font-family:var(--serif);font-size:14.5px;padding:7px 9px;cursor:pointer}
.theme-toggle{font-family:var(--serif);font-size:14.5px;background:transparent;border:1px solid var(--line-strong);width:38px;height:38px;
  cursor:pointer;color:var(--ink);display:flex;align-items:center;justify-content:center;padding:0}
.theme-toggle svg{width:17px;height:17px}
.theme-toggle .sun{display:none}
[data-theme="dark"] .theme-toggle .sun{display:block}
[data-theme="dark"] .theme-toggle .moon{display:none}

/* The menu button. Same 38px square as the theme toggle beside it, so the two
   controls read as a pair rather than as one control and one afterthought.
   Hidden above 960px, which is exactly where the section links are visible in
   the bar and a menu would duplicate them. */
.nav-toggle{display:none;font-family:var(--serif);background:transparent;
  border:1px solid var(--line-strong);width:38px;height:38px;border-radius:8px;
  align-items:center;justify-content:center;color:var(--ink-soft);cursor:pointer}
.nav-toggle:hover{border-color:var(--accent);color:var(--ink)}
.nav-toggle svg{width:19px;height:19px}
/* The icon follows aria-expanded rather than a class of its own. One source of
   truth: the icon cannot end up showing a state the screen reader disagrees
   with. */
.nav-toggle .shut{display:none}
.nav-toggle[aria-expanded="true"] .bars{display:none}
.nav-toggle[aria-expanded="true"] .shut{display:block}

/* ---- hero ---- */
.hero{background:linear-gradient(148deg,var(--navy) 0%,var(--navy2) 52%,var(--blue) 100%);
  color:#fff;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-12%;top:-32%;width:660px;height:660px;border-radius:50%;
  background:radial-gradient(circle,rgba(127,179,213,.28),transparent 62%);pointer-events:none}
.hero .wrap{position:relative;padding:112px 32px 118px;max-width:1200px}
.hero .eyebrow{color:var(--blueLt)}
.hero .eyebrow::after{background:var(--blueLt)}
.hero h1{color:#fff;font-size:clamp(37px,4.8vw,62px);margin:22px 0 24px;
  letter-spacing:-.022em;line-height:1.06;max-width:31ch;hyphens:none;overflow-wrap:normal}
.hero h1 .accent{color:var(--blueLt);display:block}
.hero .sub{font-size:19px;color:#CFDCE8;max-width:54ch;margin-bottom:36px}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:44px}
.hero .trust{border-top:1px solid rgba(255,255,255,.22);padding-top:18px;font-size:13px;
  letter-spacing:.16em;text-transform:uppercase;color:#A8BED2;max-width:60ch}

/* ---- pillars (how) ---- */
.steps{display:grid;grid-template-columns:repeat(3,1fr)}
.step-card{padding:0 42px;border-inline-start:1px solid var(--line)}
.step-card:first-child{padding-inline-start:0;border-inline-start:none}
.step-card:last-child{padding-inline-end:0}
.step-num{font-family:var(--serif);font-size:13px;letter-spacing:.24em;color:var(--accent);font-weight:700}
.step-card h3{font-size:23px;margin:13px 0 11px}
.step-card p{font-size:16px}

/* ---- services ---- */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-strong)}
.service-card{padding:38px 40px 40px;border-inline-start:1px solid var(--line);position:relative;display:flex;flex-direction:column;align-items:flex-start}
.service-card:first-child{border-inline-start:none;padding-inline-start:0}
.service-card:last-child{padding-inline-end:0}
.service-card.featured::before{content:"";position:absolute;inset-inline:0;top:-1px;height:3px;background:var(--accent)}
.service-card.featured:first-child::before{inset-inline-start:0}
.service-tag{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:700}
.service-card h3{font-size:25px;margin:12px 0 4px}
.service-card .price{font-size:14.5px;color:var(--ink-faint);letter-spacing:.06em;text-transform:uppercase;margin-bottom:20px}
.service-card ul{list-style:none;margin-bottom:26px;width:100%}
.service-card>.btn{margin-top:auto}
.service-card li{font-size:15.5px;padding:10px 0;border-top:1px solid var(--line);color:var(--ink-soft)}

/* ---- pricing ---- */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-strong)}
.price-card{padding:38px 38px 40px;border-inline-start:1px solid var(--line);position:relative;display:flex;flex-direction:column}
.price-card:first-child{border-inline-start:none;padding-inline-start:0}
.price-card:last-child{padding-inline-end:0}
.price-card.featured::before{content:"";position:absolute;inset-inline:0;top:-1px;height:3px;background:var(--accent)}
.badge-pop{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:700;display:block;margin-bottom:8px}
.price-card h3{font-size:24px}
.price-num{font-family:var(--serif);font-size:46px;font-weight:700;color:var(--head);
  margin:14px 0 4px;line-height:1;display:flex;align-items:baseline;gap:5px;min-height:48px}
.price-num .unit{font-size:15px;color:var(--ink-faint);font-weight:400;letter-spacing:0}

/* A price that an offer has replaced. The element is an <s>, so its own
   line-through is switched off and the rule is drawn as a pseudo-element
   instead: a straight strike through a 46px serif numeral reads as a rendering
   fault, where an angled one reads as a deliberate mark. inset-inline rather
   than left/right, and a mirrored angle under [dir=rtl], so the line leans the
   same way as the script it crosses. */
.price-was{position:relative;display:inline-flex;align-items:center;text-decoration:none}
.price-was::after{content:"";position:absolute;inset-inline:-6%;top:50%;height:3px;
  background:#D64545;border-radius:2px;transform:translateY(-50%) rotate(-11deg);pointer-events:none}
[dir="rtl"] .price-was::after{transform:translateY(-50%) rotate(11deg)}

/* align-self keeps the tag the width of its own text inside the card's flex
   column, instead of stretching the full card width. The negative top margin
   pulls it up against the struck price it belongs to. */
.offer-tag{display:inline-block;align-self:flex-start;margin:-6px 0 16px;background:#D64545;color:#fff;
  font-size:13px;font-weight:700;line-height:1;letter-spacing:.03em;padding:7px 13px;border-radius:999px;white-space:nowrap}
.price-desc{font-size:16px;color:var(--ink-soft);margin-bottom:6px}
.price-for{font-size:14px;color:var(--ink-faint);margin-bottom:20px}
.price-card ul{list-style:none;margin-bottom:20px}
.price-card li{font-size:15px;padding:9px 0;border-top:1px solid var(--line);color:var(--ink-soft)}
.price-card>.btn:last-child{margin-top:auto}
.price-card>.price-caveat{margin-top:auto}
.price-card>.price-caveat+.btn{margin-top:0}
.price-caveat{font-size:13.5px;color:var(--ink-faint);margin-bottom:18px;padding-top:10px;border-top:1px solid var(--line)}

.addon-card{display:grid;grid-template-columns:1.6fr .4fr;gap:44px;align-items:center;
  margin-top:64px;padding:44px 0;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.addon-lead{margin-top:0;padding:0;border:0}
.addon-tag{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:700}
.addon-card h3{font-size:29px;margin:12px 0 12px}
.addon-card p{font-size:16.5px;margin-bottom:12px}
.addon-note{font-size:14.5px;color:var(--ink-faint)}
.addon-link{color:var(--accent);font-weight:700;font-size:15.5px;border-bottom:1px solid currentColor}
.addon-price-block{text-align:end}
.addon-price{font-family:var(--serif);font-size:42px;font-weight:700;color:var(--head);
  line-height:1;margin-bottom:18px;display:flex;align-items:baseline;gap:5px;justify-content:flex-end}
.addon-price .unit{font-size:15px;color:var(--ink-faint);font-weight:400}

.compare-wrap{margin-top:72px;overflow-x:auto}
.compare-wrap h3{font-size:26px;margin-bottom:24px}
.compare-table{width:100%;border-collapse:collapse;font-size:15.5px;min-width:720px}
.compare-table th,.compare-table td{text-align:start;padding:16px 20px;border-top:1px solid var(--line);vertical-align:top}
.compare-table thead th{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
  border-top:none;border-bottom:1px solid var(--line-strong);font-weight:700}
.compare-table tbody th{color:var(--ink);font-weight:700;width:170px}
.compare-table td{color:var(--ink-soft)}
.pricing-note{margin-top:34px;font-size:15px;color:var(--ink-faint);max-width:78ch}

/* ---- proof ---- */
.proof-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line-strong)}
.chat-card{padding:34px 40px;border-inline-start:1px solid var(--line)}
.chat-card:first-child{border-inline-start:none;padding-inline-start:0}
.chat-card:last-child{padding-inline-end:0}
.chat-card .label{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--ink-faint);margin-bottom:16px}
.chat-card.after .label{color:var(--accent)}
.chat-bubble{font-size:16.5px;color:var(--ink-soft)}
.chat-bubble .q{font-family:var(--serif);font-size:20px;color:var(--head);font-weight:700;margin-bottom:12px}
.chat-bubble mark{background:none;color:var(--accent);font-weight:700}
.illustrative-note{font-size:14px;color:var(--ink-faint);margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.case-card{margin-top:56px;padding-top:34px;border-top:1px solid var(--line-strong)}
.case-card h3{font-size:27px;margin:12px 0 12px}
.case-card p{font-size:16.5px;margin-bottom:16px;max-width:76ch}
.case-card a{color:var(--accent);font-weight:700;border-bottom:1px solid currentColor}

/* ---- work ---- */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-strong)}
.work-card{border-inline-start:1px solid var(--line);padding:0 34px 6px;display:flex;flex-direction:column}
.work-card:first-child{border-inline-start:none;padding-inline-start:0}
.work-card:last-child{padding-inline-end:0}
.browser-frame{display:flex;align-items:center;gap:6px;padding:12px 0;border-bottom:1px solid var(--line);margin-bottom:22px}
.browser-frame span{width:7px;height:7px;border-radius:50%;background:var(--line-strong);display:block}
.browser-frame .url{width:auto;height:auto;border-radius:0;background:none;font-size:13px;
  color:var(--ink-faint);margin-inline-start:10px;letter-spacing:.03em}
/* A work sample with no outbound link leaves this span empty, and an empty
   inline box has no height, so that card's frame was 15px shorter than its
   neighbours and every line beneath it, tag, title and description, sat high.
   The non-breaking space gives the empty span the same line box the text would
   have had, so the row lines up whether a card carries a domain or not. */
.browser-frame .url:empty::before{content:"\00a0"}
.work-tag{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:700}
.work-card h3{font-size:22px;margin:11px 0 10px}
.work-body{display:flex;flex-direction:column;flex:1}
.work-body p{font-size:15.5px;margin-bottom:22px}
.work-body a{color:var(--accent);font-weight:700;margin-top:auto;align-self:flex-start;
  border-bottom:1px solid transparent;padding-bottom:2px}
.work-body a:hover{border-bottom-color:currentColor}

/* ---- audit ---- */
.audit-bg{background:var(--surface-2)}
[data-theme="dark"] .audit-bg{background:#1B2A33}
.audit-bg .section-head h2,.audit-bg .eyebrow{color:var(--navy)}
[data-theme="dark"] .audit-bg .section-head h2{color:var(--ink)}
[data-theme="dark"] .audit-bg .eyebrow{color:var(--accent)}
.audit-bg .eyebrow::after,.audit-bg .eyebrow::before{background:currentColor}
.audit-bg .section-head p{color:#43505E}
[data-theme="dark"] .audit-bg .section-head p{color:var(--ink-soft)}
.audit-box{max-width:560px;margin:0 auto}
.audit-form{display:flex;flex-direction:column;gap:14px}
.audit-row input{width:100%;padding:15px 16px;border:1px solid rgba(12,31,51,.22);background:rgba(255,255,255,.7);
  font-family:var(--serif);font-size:16.5px;color:var(--navy)}
[data-theme="dark"] .audit-row input{background:rgba(255,255,255,.06);border-color:var(--line-strong);color:var(--ink)}
.audit-row input:focus{outline:none;border-color:var(--blue)}
.audit-row input::placeholder{color:#4D5967}
.audit-hint{font-size:14px;color:#4D5967;margin-top:-6px;unicode-bidi:plaintext}
[data-theme="dark"] .audit-hint{color:var(--ink-faint)}
.audit-form .btn{margin-top:6px}
.audit-result{display:none;margin-top:20px}
.audit-result.active{display:block}
.audit-result p{font-size:16px;color:var(--navy);padding-top:18px;border-top:1px solid rgba(12,31,51,.2)}
[data-theme="dark"] .audit-result p{color:var(--ink);border-color:var(--line-strong)}
.audit-result.error p{color:#8C2F1E}
[data-theme="dark"] .audit-result.error p{color:#F0A08C}
.audit-disclaimer{margin-top:18px;font-size:14px;color:#4D5967}
[data-theme="dark"] .audit-disclaimer{color:var(--ink-faint)}

/* ---- faq ---- */
.faq-list{max-width:860px;margin:0 auto;border-top:1px solid var(--line-strong)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;background:none;border:none;font-family:var(--serif);font-size:19px;
  font-weight:700;color:var(--head);text-align:start;padding:24px 0;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:20px}
.faq-q .plus{font-size:24px;color:var(--accent);font-weight:400;flex-shrink:0;transition:.2s}
.faq-item.open .faq-q .plus{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-item.open .faq-a{max-height:400px}
.faq-a p{font-size:16.5px;padding-bottom:26px;max-width:78ch}

/* ---- partners ---- */
#partners{background:var(--navy);color:#fff}
[data-theme="dark"] #partners{background:#12293E}
#partners h2{color:#fff}
#partners .eyebrow{color:var(--blueLt)}
#partners .eyebrow::after{background:var(--blueLt)}
.partners-inner{display:grid;grid-template-columns:1.6fr .4fr;gap:48px;align-items:center}
.partners-inner p{color:#CFDCE8;font-size:17px;margin-top:14px;max-width:64ch}
.partners-inner h2{font-size:clamp(27px,3vw,38px);margin-top:16px}
.partners-inner .btn{justify-self:end}

/* ---- final CTA ---- */
.final-cta{background:var(--surface-2);text-align:center}
[data-theme="dark"] .final-cta{background:#1B2A33}
.final-cta .eyebrow{justify-content:center;color:var(--navy)}
[data-theme="dark"] .final-cta .eyebrow{color:var(--accent)}
.final-cta .eyebrow::before{content:"";height:1px;width:44px;background:currentColor;opacity:.45}
.final-cta h2{font-size:clamp(28px,3.4vw,42px);margin:18px 0 14px;color:var(--navy)}
[data-theme="dark"] .final-cta h2{color:var(--ink)}
.final-cta p{font-size:18px;margin-bottom:32px;color:#43505E}
[data-theme="dark"] .final-cta p{color:var(--ink-soft)}

/* ---- footer ---- */
footer{background:var(--navy);color:#93A9BC;padding:80px 0 32px;font-size:16px}
[data-theme="dark"] footer{background:#050E17}
.footer-grid{display:grid;grid-template-columns:1.6fr 2fr;gap:56px;padding-bottom:44px;
  border-bottom:1px solid rgba(255,255,255,.12)}
footer .brand{color:#fff;display:inline-block;margin-bottom:14px}
.footer-brand p{max-width:40ch;color:#7E93A6;font-size:15.5px}
.footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.footer-col h4{color:#fff;font-size:12px;letter-spacing:.19em;text-transform:uppercase;margin-bottom:16px}
.footer-col a{display:block;padding:6px 0;color:#93A9BC;font-size:15.5px}
.footer-col a:hover{color:var(--blueLt)}
.footer-bottom{padding-top:24px;display:flex;justify-content:space-between;gap:14px;
  flex-wrap:wrap;font-size:14px;color:#6E8394}

@media(max-width:960px){
  section{padding:70px 0}
  .hero .wrap{padding:74px 32px 82px}

  .nav-toggle{display:inline-flex}

  /* Below this width the links leave the bar and become a panel under it.
     Positioned against <header><meta charset="utf-8">, which is sticky and therefore already a
     containing block, so the panel travels with the bar instead of being left
     behind at the top of the document when the page scrolls.

     inset-inline rather than left/right, so it spans the header the same way
     in Arabic. */
  .nav-links{display:none;position:absolute;inset-inline:0;top:100%;
    flex-direction:column;gap:0;margin-inline-start:0;
    background:var(--surface);border-top:1px solid var(--line-strong);
    border-bottom:1px solid var(--line-strong);padding:4px 32px 12px;
    box-shadow:0 14px 26px rgba(12,31,51,.12)}
  .nav-links.open{display:flex}
  .nav-links a{font-size:17px;padding:14px 0;border-bottom:1px solid var(--line)}
  .nav-links a:last-child{border-bottom:none}
  /* The underline that grows on hover is a pointer affordance. On a panel
     opened by touch it only ever renders as a stray line. */
  .nav-links a::after{display:none}
  .steps,.services-grid,.pricing-grid,.proof-grid,.work-grid,
  .footer-grid,.footer-cols,.addon-card,.partners-inner{grid-template-columns:1fr}
  .step-card,.service-card,.price-card,.chat-card,.work-card{
    border-inline-start:none;padding-inline:0;padding-top:30px;border-top:1px solid var(--line)}
  .step-card:first-child,.service-card:first-child,.price-card:first-child,
  .chat-card:first-child,.work-card:first-child{border-top:none;padding-top:0}
  .addon-price-block{text-align:start}
  .addon-price{justify-content:flex-start}
  .partners-inner .btn{justify-self:start}
}
@media(max-width:560px){
  .wrap,.nav{padding-inline:20px}
  .nav-links{padding-inline:20px}   /* stay lined up with the brand above it */
  .hero .wrap{padding:56px 20px 62px}
  .btn{width:100%}
  .nav-cta .btn{width:auto}
}
/* UAE Dirham mark: inline SVG so it inherits colour and scales with the text, no invert filter */
.aed{display:inline-block;height:.62em;width:.709em;align-self:center;fill:currentColor;flex-shrink:0}
.aed-sm{height:.8em;width:.915em;vertical-align:-.08em}


  /* ---- cookie consent, Deep Harbour ---- */
  #tnCookieBar{position:fixed;inset-inline:0;bottom:0;z-index:1200;background:var(--surface);
    border-top:1px solid var(--line-strong);padding:20px 0;display:none;font-family:var(--serif)}
  #tnCookieBar.open{display:block}
  #tnCookieBar .tn-ck-wrap{max-width:1200px;margin:0 auto;padding:0 32px;display:flex;
    gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap}
  #tnCookieBar p{font-size:16px;color:var(--ink-soft);max-width:70ch;margin:0}
  #tnCookieBar p a{color:var(--accent);font-weight:700;border-bottom:1px solid currentColor}
  .tn-ck-actions{display:flex;gap:10px;flex-wrap:wrap;flex-shrink:0}
  .tn-ck-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 22px;min-height:42px;
    font-size:14.5px;font-weight:700;font-family:var(--serif);cursor:pointer;border-radius:0;
    border:1px solid var(--line-strong);background:transparent;color:var(--ink);transition:.2s;text-align:center}
  .tn-ck-btn:hover{border-color:var(--accent);color:var(--accent)}
  .tn-ck-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
  .tn-ck-btn.primary:hover{background:var(--head);border-color:var(--head);color:#fff}
  [data-theme="dark"] .tn-ck-btn.primary{color:#0A1826}
  [data-theme="dark"] .tn-ck-btn.primary:hover{background:#fff;border-color:#fff;color:#0A1826}
  body.tn-ck-visible #tnChatBubble{bottom:150px}
  body.tn-ck-visible #tnChatPanel{bottom:218px}

  #tnCookieOverlay{position:fixed;inset:0;z-index:1300;background:rgba(12,31,51,.55);
    display:none;align-items:center;justify-content:center;padding:16px}
  #tnCookieOverlay.open{display:flex}
  #tnCookieModal{background:var(--bg);border:1px solid var(--line-strong);border-radius:0;
    width:520px;max-width:100%;max-height:90vh;overflow-y:auto;
    box-shadow:0 18px 56px rgba(12,31,51,.28);font-family:var(--serif)}
  #tnCookieModal .tn-ck-head{background:var(--navy);color:#fff;padding:16px 22px;
    font-size:19px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:12px}
  #tnCookieModal .tn-ck-head button{background:none;border:none;color:#fff;font-size:17px;
    cursor:pointer;line-height:1;opacity:.78;font-family:var(--serif);padding:0}
  #tnCookieModal .tn-ck-head button:hover{opacity:1}
  #tnCookieBody{padding:8px 22px 22px}
  .tn-ck-row{padding:20px 0;border-bottom:1px solid var(--line);display:flex;gap:20px;align-items:flex-start}
  .tn-ck-row:last-of-type{border-bottom:1px solid var(--line-strong)}
  .tn-ck-row .tn-ck-copy{flex:1}
  .tn-ck-row h4{font-size:17px;color:var(--head);font-weight:700;margin-bottom:4px}
  .tn-ck-row p{font-size:15px;color:var(--ink-soft);line-height:1.55;margin:0}
  .tn-ck-always{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
    color:var(--ink-faint);flex-shrink:0;padding-top:4px}
  .tn-ck-switch{position:relative;width:46px;height:26px;flex-shrink:0;margin-top:2px;cursor:pointer;
    background:var(--grey2);border:1px solid var(--line-strong);transition:.2s;padding:0}
  [data-theme="dark"] .tn-ck-switch{background:var(--line-strong)}
  .tn-ck-switch span{position:absolute;top:2px;inset-inline-start:2px;width:18px;height:18px;
    background:var(--bg);transition:.2s;display:block}
  .tn-ck-switch[aria-checked="true"]{background:var(--accent);border-color:var(--accent)}
  .tn-ck-switch[aria-checked="true"] span{inset-inline-start:24px}
  .tn-ck-foot{display:flex;gap:10px;flex-wrap:wrap;padding-top:20px}
  .tn-ck-note{font-size:13.5px;color:var(--ink-faint);margin-top:16px;line-height:1.55}
  .tn-ck-note a{color:var(--accent);font-weight:700;border-bottom:1px solid currentColor}
  @media(max-width:820px){
    #tnCookieBar .tn-ck-wrap{padding:0 20px;gap:16px}
    .tn-ck-actions{width:100%}
    .tn-ck-btn{flex:1}
    body.tn-ck-visible #tnChatBubble{bottom:210px}
  }


  /* ---- live chat widget, Deep Harbour ---- */
  #tnChatBubble {
    position: fixed; bottom: 24px; right: 24px; z-index: 1000;
    width: 56px; height: 56px; border-radius: 0;
    background: var(--navy); color: #fff; border: 1px solid var(--navy); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 22px rgba(12,31,51,0.22);
    transition: background .18s ease;
    font-family: var(--serif);
  }
  #tnChatBubble:hover { background: var(--accent); border-color: var(--accent); }
  [data-theme="dark"] #tnChatBubble { background: var(--accent); border-color: var(--accent); color: #0A1826; }
  [data-theme="dark"] #tnChatBubble:hover { background: #fff; border-color: #fff; }
  #tnChatBubble svg { width: 25px; height: 25px; }

  #tnChatPanel {
    position: fixed; bottom: 92px; right: 24px; z-index: 1000;
    width: 356px; max-width: calc(100vw - 32px); max-height: 570px;
    background: var(--bg); border: 1px solid var(--line-strong); border-radius: 0;
    box-shadow: 0 14px 44px rgba(12,31,51,0.20);
    display: none; flex-direction: column; overflow: hidden;
    font-family: var(--serif);
  }
  body.lang-ar #tnChatPanel, body.lang-ar #tnChatBubble { right: auto; left: 24px; }
  #tnChatPanel.open { display: flex; }
  #tnChatPanel .tn-chat-head {
    background: var(--navy); color: #fff; padding: 15px 18px;
    font-family: var(--serif); font-size: 17px; font-weight: 700;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
  }
  #tnChatPanel .tn-chat-head button {
    background: none; border: none; color: #fff; font-size: 17px; cursor: pointer;
    line-height: 1; opacity: .78; font-family: var(--serif); padding: 0;
  }
  #tnChatPanel .tn-chat-head button:hover { opacity: 1; }
  #tnChatBody { padding: 16px 18px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; }
  #tnChatBody .tn-chat-greeting { font-size: 15px; color: var(--ink-soft); margin-bottom: 14px; line-height: 1.6; }
  #tnFaqThread { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
  #tnFaqThread:empty { display: none; }
  .tn-quick-replies { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
  .tn-quick-replies button {
    text-align: start; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 0;
    padding: 11px 14px; min-height: 42px; font-size: 14.5px; line-height: 1.35;
    color: var(--ink); cursor: pointer; font-family: var(--serif); transition: .18s;
  }
  .tn-quick-replies button:hover { border-color: var(--accent); color: var(--accent); }
  .tn-quick-replies button.tn-talk {
    background: var(--accent); color: #fff; border-color: var(--accent);
    font-weight: 700; text-align: center;
  }
  .tn-quick-replies button.tn-talk:hover { background: var(--head); border-color: var(--head); color: #fff; }
  [data-theme="dark"] .tn-quick-replies button.tn-talk { color: #0A1826; }
  [data-theme="dark"] .tn-quick-replies button.tn-talk:hover { background: #fff; border-color: #fff; color: #0A1826; }
  .tn-faq-cta {
    align-self: flex-start; font-size: 14px; color: var(--accent);
    font-weight: 700; border-bottom: 1px solid currentColor; margin: 0 0 4px;
  }

  #tnChatFallback, #tnChatIntake, #tnChatConvo { display: none; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }
  #tnChatFallback.open, #tnChatIntake.open, #tnChatConvo.open { display: flex; }
  #tnChatFallback p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; margin: 0; }
  #tnChatFallback a { color: var(--accent); font-weight: 700; border-bottom: 1px solid currentColor; }
  #tnOfflineBanner {
    font-size: 14px; line-height: 1.6; color: var(--ink-soft); background: var(--surface);
    border: 1px solid var(--line); border-inline-start: 3px solid var(--accent); border-radius: 0; padding: 10px 12px;
  }
  #tnChatIntake input, #tnChatIntake textarea, #tnChatReplyRow input {
    border: 1px solid var(--line-strong); border-radius: 0; padding: 11px 13px; font-size: 14.5px;
    font-family: var(--serif); background: var(--bg); color: var(--ink);
  }
  #tnChatIntake input:focus, #tnChatIntake textarea:focus, #tnChatReplyRow input:focus {
    outline: none; border-color: var(--accent);
  }
  #tnChatIntake textarea { resize: vertical; min-height: 68px; }
  #tnChatIntake button[type="submit"], #tnChatReplyRow button[type="submit"] {
    background: var(--accent); color: #fff; border: 1px solid var(--accent); border-radius: 0;
    padding: 11px 20px; min-height: 44px; font-size: 14.5px;
    font-weight: 700; cursor: pointer; font-family: var(--serif);
  }
  #tnChatIntake button[type="submit"]:hover, #tnChatReplyRow button[type="submit"]:hover {
    background: var(--head); border-color: var(--head);
  }
  [data-theme="dark"] #tnChatIntake button[type="submit"],
  [data-theme="dark"] #tnChatReplyRow button[type="submit"] { color: #0A1826; }
  #tnChatIntake button[type="submit"]:disabled, #tnChatReplyRow button[type="submit"]:disabled { opacity: 0.55; cursor: default; }
  .tn-chat-back {
    align-self: flex-start; background: none; border: none; color: var(--ink-faint);
    font-size: 13.5px; cursor: pointer; padding: 0 0 2px; font-family: var(--serif);
  }
  .tn-chat-back:hover { color: var(--accent); }
  #tnChatStatus { font-size: 14px; margin-top: 2px; }
  #tnChatStatus.ok { color: var(--green); }
  #tnChatStatus.err { color: var(--terracotta); }
  #tnChatPanel .tn-chat-foot {
    font-size: 13px; color: var(--ink-faint); padding: 10px 18px; border-top: 1px solid var(--line);
  }

  #tnChatTranscript { flex: 1; min-height: 120px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; }
  .tn-msg { max-width: 84%; padding: 9px 12px; border-radius: 0; font-size: 14.5px; line-height: 1.5; word-wrap: break-word; }
  .tn-msg.visitor { align-self: flex-end; background: var(--accent); color: #fff; }
  [data-theme="dark"] .tn-msg.visitor { color: #0A1826; }
  .tn-msg.staff { align-self: flex-start; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); }
  .tn-msg.system { align-self: center; background: none; color: var(--ink-faint); font-size: 13px; text-align: center; border: none; padding: 4px 2px; max-width: 100%; }
  body.lang-ar .tn-msg.visitor { align-self: flex-start; }
  body.lang-ar .tn-msg.staff { align-self: flex-end; }
  .tn-chat-hint { font-size: 13px; color: var(--ink-faint); text-align: center; padding: 2px 0 4px; }
  #tnChatReplyRow { display: flex; gap: 8px; }
  #tnChatReplyRow input { flex: 1; }
  #tnChatReplyRow button[type="submit"] { padding: 10px 16px; }


  /* ---- subscription modal, Deep Harbour ---- */
  #tnSubOverlay {
    position: fixed; inset: 0; z-index: 1100; background: rgba(12,31,51,0.55);
    display: none; align-items: center; justify-content: center; padding: 16px;
  }
  #tnSubOverlay.open { display: flex; }
  #tnSubModal {
    background: var(--bg); border: 1px solid var(--line-strong); border-radius: 0;
    width: 420px; max-width: 100%; max-height: 90vh; overflow-y: auto;
    box-shadow: 0 18px 56px rgba(12,31,51,0.28); font-family: var(--serif);
  }
  #tnSubModal .tn-sub-head {
    background: var(--navy); color: #fff; padding: 16px 22px;
    font-family: var(--serif); font-size: 19px; font-weight: 700;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
  }
  #tnSubModal .tn-sub-head button {
    background: none; border: none; color: #fff; font-size: 17px; cursor: pointer;
    line-height: 1; opacity: .78; font-family: var(--serif); padding: 0;
  }
  #tnSubModal .tn-sub-head button:hover { opacity: 1; }
  #tnSubBody { padding: 22px; }
  #tnSubBody .tn-sub-plan {
    font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700;
    color: var(--ink-faint); padding: 2px 0 10px; border-bottom: 1px solid var(--line-strong);
  }
  #tnSubBody .tn-sub-plan strong { color: var(--accent); }
  #tnSubBody .tn-sub-plan[hidden] { display: none; }
  #tnSubBody .tn-sub-label {
    font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700;
    color: var(--ink-faint);
  }
  #tnSubForm { display: flex; flex-direction: column; gap: 11px; }
  #tnSubForm select {
    border: 1px solid var(--line-strong); border-radius: 0; padding: 12px 14px; font-size: 15.5px;
    font-family: var(--serif); background: var(--bg); color: var(--ink); cursor: pointer;
    min-height: 50px; appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--ink-faint) 50%), linear-gradient(135deg, var(--ink-faint) 50%, transparent 50%);
    background-position: calc(100% - 19px) 22px, calc(100% - 13px) 22px;
    background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
  }
  body.lang-ar #tnSubForm select { background-position: 13px 22px, 19px 22px; }
  #tnSubForm select:focus { outline: none; border-color: var(--accent); }
  #tnSubForm input, #tnSubForm textarea {
    border: 1px solid var(--line-strong); border-radius: 0; padding: 12px 14px; font-size: 15.5px;
    font-family: var(--serif); background: var(--bg); color: var(--ink);
  }
  #tnSubForm input:focus, #tnSubForm textarea:focus { outline: none; border-color: var(--accent); }
  #tnSubForm textarea { resize: vertical; min-height: 74px; }
  #tnSubForm button[type="submit"] {
    background: var(--accent); color: #fff; border: 1px solid var(--accent); border-radius: 0;
    padding: 13px 30px; min-height: 50px; font-size: 15.5px;
    font-weight: 700; cursor: pointer; font-family: var(--serif); margin-top: 4px;
  }
  #tnSubForm button[type="submit"]:hover { background: var(--head); border-color: var(--head); }
  [data-theme="dark"] #tnSubForm button[type="submit"] { color: #0A1826; }
  #tnSubForm button[type="submit"]:disabled { opacity: 0.55; cursor: default; }
  #tnSubStatus { font-size: 14.5px; margin-top: 2px; }
  #tnSubStatus.ok { color: var(--green); }
  #tnSubStatus.err { color: var(--terracotta); }
  #tnSubBody .tn-sub-foot { font-size: 13.5px; color: var(--ink-faint); margin-top: 14px; line-height: 1.55; }

/* ==========================================================================
   WordPress additions
   Everything above this line came from the static site. Everything below
   exists because WordPress emits markup the static site never had: the admin
   bar, alignment classes, comment lists, the block editor's own classes.
   ========================================================================== */

/* -- admin bar ----------------------------------------------------------- */
body.admin-bar header{top:32px}
@media screen and (max-width:782px){body.admin-bar header{top:46px}}

/* -- core block alignment ------------------------------------------------ */
.alignleft{float:left;margin-inline-end:1.5em;margin-bottom:1em}
.alignright{float:right;margin-inline-start:1.5em;margin-bottom:1em}
.aligncenter{display:block;margin-inline:auto;margin-bottom:1em}
.alignwide{max-width:1100px;margin-inline:auto}
.alignfull{max-width:none;margin-inline:calc(50% - 50vw);width:100vw}
.wp-caption{max-width:100%}
.wp-caption-text,figcaption{font-size:14.5px;color:var(--ink-faint);padding-top:8px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link:focus{position:fixed;inset-inline-start:12px;top:12px;z-index:999;width:auto;height:auto;
  clip:auto;background:var(--accent);color:#fff;padding:12px 20px;font-weight:700}

/* -- editorial article body --------------------------------------------- */
.entry{max-width:760px;margin:0 auto}
.entry > * + *{margin-top:1.15em}
.entry h2{font-size:clamp(24px,2.6vw,32px);margin-top:1.8em}
.entry h3{font-size:clamp(20px,2.1vw,25px);margin-top:1.6em}
.entry p{font-size:18px;color:var(--ink-soft)}
.entry ul,.entry ol{padding-inline-start:1.4em}
.entry li{margin-top:.5em}
.entry blockquote{border-inline-start:3px solid var(--accent);padding:4px 0 4px 22px;color:var(--ink)}
html[dir="rtl"] .entry blockquote{padding:4px 22px 4px 0}
.entry a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.entry code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
  background:var(--surface);padding:2px 6px}
.entry pre{background:var(--surface);padding:18px;overflow-x:auto}
.entry img{height:auto}
.entry table{width:100%;border-collapse:collapse}
.entry td,.entry th{border-top:1px solid var(--line);padding:11px 14px;text-align:start}

/* -- post meta and listing ---------------------------------------------- */
.post-meta{font-size:14px;letter-spacing:.02em;color:var(--ink-faint);
  display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.post-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:34px}
.post-card{border-top:1px solid var(--line-strong);padding-top:22px}
.post-card h2{font-size:23px;margin:10px 0 10px;line-height:1.25}
.post-card h2 a:hover{color:var(--accent)}
.post-card .excerpt{font-size:16.5px;color:var(--ink-soft)}
.post-thumb{display:block;margin-bottom:16px;overflow:hidden}
.post-thumb img{width:100%;height:auto;display:block;transition:transform .4s}
.post-card:hover .post-thumb img{transform:scale(1.03)}

/* -- pagination ---------------------------------------------------------- */
.pagination{display:flex;gap:10px;flex-wrap:wrap;margin-top:52px;
  padding-top:26px;border-top:1px solid var(--line)}
.pagination .page-numbers{padding:9px 15px;border:1px solid var(--line-strong);font-size:15.5px}
.pagination .page-numbers.current{background:var(--accent);color:#fff;border-color:var(--accent)}
.pagination a.page-numbers:hover{border-color:var(--accent);color:var(--accent)}

/* -- comments ------------------------------------------------------------ */
.comment-list{list-style:none;margin-top:26px}
.comment-list li{border-top:1px solid var(--line);padding:20px 0}
.comment-list .children{list-style:none;padding-inline-start:28px}
.comment-form input[type=text],.comment-form input[type=email],
.comment-form input[type=url],.comment-form textarea{width:100%;max-width:620px;padding:12px 15px;
  font-family:var(--serif);font-size:16.5px;border:1px solid var(--line-strong);
  background:var(--bg);color:var(--ink)}
.comment-form label{display:block;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:var(--ink-faint);margin-bottom:6px}
.comment-form p{margin-top:16px}

/* -- language switcher --------------------------------------------------- */
.lang-switch{display:flex;gap:2px;align-items:center}
.lang-switch a{font-size:14px;padding:7px 11px;border:1px solid var(--line-strong);color:var(--ink-soft)}
.lang-switch a.active{background:var(--accent);border-color:var(--accent);color:#fff}
.lang-switch a:hover{border-color:var(--accent)}

/* -- editor niceties ----------------------------------------------------- */
.page-hero{background:linear-gradient(148deg,var(--navy) 0%,var(--navy2) 52%,var(--blue) 100%);
  color:#fff;position:relative;overflow:hidden}
.page-hero .wrap{position:relative;padding:80px 32px 84px}
.page-hero h1{color:#fff;font-size:clamp(30px,4vw,46px);margin:16px 0 14px;letter-spacing:-.022em;max-width:24ch}
.page-hero .lede{font-size:18.5px;color:#CFDCE8;max-width:64ch}
.page-hero .eyebrow{color:var(--blueLt)}

/* -- honeypot ------------------------------------------------------------ */
/* Clipped to nothing rather than pushed off-screen. An off-screen offset is
   outside the viewport in a left-to-right page but inside the scrollable area
   in a right-to-left one, which is how a hidden field ends up giving the
   Arabic homepage a horizontal scrollbar. aria-hidden keeps it away from
   screen readers, so no real person can fill it by accident. */
.tn-hp{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px}

/* A price that is words rather than a figure. Matches the inline size the
   static site used on the Scale card. */
.price-num.price-words{font-size:30px;align-items:flex-end}

/* The hero has no eyebrow. Its 22px top margin existed to space the headline
   from the eyebrow above it, so with nothing above it the gap has nothing to
   separate. Scoped to :first-child rather than removed outright, so putting an
   eyebrow back restores the spacing automatically. */
.hero h1:first-child{margin-top:0}

/* The hero ends at the buttons: the trust line that used to follow them, and
   the divider rule that was its border-top, are both gone. The 44px below the
   buttons was spacing them from that line, so it is dropped when nothing
   follows. Scoped to :last-child so restoring a trust line restores the gap. */
.hero .cta-row:last-child{margin-bottom:0}

/* The hero is centred and carries the headline and paragraph only — no
   eyebrow, no second headline line, no buttons, no trust line. The max-widths
   stay so the lines keep their measure; only the block is centred. */
.hero .wrap{text-align:center}
.hero h1,.hero .sub{margin-inline:auto}
/* The 36px under the paragraph spaced it from the buttons, so it goes when
   nothing follows. Scoped to :last-child, so restoring a button row restores
   the gap by itself. */
.hero .sub:last-child{margin-bottom:0}