/* Content pages: what the section blocks and the policy template output beyond the design CSS (forge.css). */

/* White band with rules (about "How we work", partners "How it works", booking questions) */
.dir-b .sec-paper{background:var(--white);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.dir-b .sec-paper.sec-top{border-bottom:0}
.dir-b .sec-paper+.sec-paper{border-top:0}

/* Home hero: meeting options and slots are links */
.dir-b .panel a.mt{color:inherit}
.dir-b .panel a.mt:not(.on):hover{border-color:var(--ink)}
.dir-b .panel a.sl{display:block}
.dir-b .panel a.sl:not(.on){color:inherit}
.dir-b .panel a.sl:not(.on):hover{border-color:var(--ink)}
.dir-b .btn>span{display:inline}
/* Client comment: the Arabic headline felt too big; a little smaller than the design's 62px. */
.dir-b.rtl .hero h1{font-size:54px;line-height:1.35}
.dir-b.rtl .hero h1 span{display:inline-block}

/* Doors: hover */
.dir-b a.door{color:inherit;transition:box-shadow .15s}
.dir-b a.door:hover{box-shadow:6px 6px 0 var(--ink)}
.dir-b a.door .ph img{transition:transform .4s}
.dir-b a.door:hover .ph img{transform:scale(1.03)}

/* Page head variants */
.dir-b .phead .phead-side{display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.dir-b .phead .phead-side .ctas{display:flex;gap:12px;flex-wrap:wrap}
.dir-b .phead .phead-side .lead{margin-top:0}
.dir-b .phero{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.dir-b .phero .h1{overflow-wrap:normal}
.dir-b .phero .btn svg,.dir-b .phead .btn svg{flex:none}
.dir-b .phero .ph{background:var(--iron)}

/* Maker / process / values / partner cards / steps in Arabic: Kufi headings without capitals */
.dir-b.rtl .quote,.dir-b.rtl .proc h3,.dir-b.rtl .vals h3,.dir-b.rtl .type h3,.dir-b.rtl .how h3,.dir-b.rtl .sig b,.dir-b.rtl .prose h2,.dir-b.rtl .fsec-h h2,.dir-b.rtl .stillq h3,.dir-b.rtl .h3{font-family:'Noto Kufi Arabic',sans-serif;font-weight:700;font-stretch:100%;letter-spacing:0;text-transform:none;line-height:1.5}
.dir-b.rtl .quote{font-size:38px;line-height:1.5}
.dir-b.rtl .stats span,.dir-b.rtl .tag,.dir-b.rtl .type .no,.dir-b.rtl .accl .q,.dir-b.rtl .cinfo small,.dir-b.rtl .clist small,.dir-b.rtl .mcard dt,.dir-b.rtl .sum-h,.dir-b.rtl .crumbs,.dir-b.rtl .draft,.dir-b.rtl .rates small,.dir-b.rtl .prose .is-style-rates th{font-family:'IBM Plex Sans Arabic',sans-serif;font-weight:600;letter-spacing:0;text-transform:none}
.dir-b.rtl .stats b,.dir-b.rtl .how .num{font-family:'Archivo',sans-serif}
.dir-b.rtl .ahero .h1{font-size:64px;line-height:1.35}
.dir-b.rtl .h1{line-height:1.3}
.dir-b.rtl .why b{text-transform:none}

/* Contact cards (as links or plain) */
.dir-b .cinfo a{color:inherit;transition:box-shadow .15s}
.dir-b .cinfo a[href]:hover{box-shadow:4px 4px 0 var(--ink)}
.dir-b.rtl .cinfo-arrow{transform:scaleX(-1)}
.dir-b .cinfo b .ltr,.dir-b .clist b .ltr{unicode-bidi:isolate}
.dir-b .contact-cards{padding:56px 0}
.dir-b .cgrid2.cgrid2-solo{grid-template-columns:minmax(0,1fr);max-width:820px}
.dir-b .clist a{color:inherit}
.dir-b .clist a b{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color .15s}
.dir-b .clist a:hover b{text-decoration-color:currentColor}

/* Contact form box: the note sits beside the submit button on desktop */
.dir-b .cform .fsec-b{position:relative}
.dir-b .cform-note{min-height:56px}
@media (min-width:1024px){
	.dir-b .cform-note{position:absolute;inset-inline-end:28px;bottom:28px;max-width:46%;justify-content:flex-end;text-align:end}
	.dir-b .cform .fsec-b:has(.ff-message-success) .cform-note{position:static;max-width:none;justify-content:flex-start}
}

/* Map: placeholder drawing until consent or "Show map", then the Google map in dark greys */
.dir-b .mapband{overflow:hidden}
.dir-b .mapband .map-frame{position:absolute;inset:-110px 0 0;z-index:0}
.dir-b .mapband .map-frame iframe{display:block;width:100%;height:100%;border:0;filter:grayscale(1) invert(.92) contrast(.85) brightness(.9)}
.dir-b .mapband.map-on .map-ph,.dir-b .mapband.map-on .map-consent{display:none}
.dir-b .mapband .map-consent{position:absolute;z-index:2;bottom:24px;inset-inline-end:max(24px,calc((100vw - 1312px) / 2 + 64px));display:flex;align-items:center;gap:16px;max-width:520px;padding:12px 12px 12px 18px;padding-inline:18px 12px;background:rgba(22,21,20,.88);border:1px solid var(--line-d);color:var(--mute-d);font-size:13px;line-height:1.5}
.dir-b .mapband .map-consent .btn{flex:none;min-height:44px}
.dir-b .mapband .wrap{z-index:1;pointer-events:none}
.dir-b .mapband .mcard{pointer-events:auto}
.dir-b .mcard dd .ltr{unicode-bidi:isolate}

/* Questions block: the bold phone number */
.dir-b .about-t .lead b{color:var(--ink)}
.dir-b .dark .about-t .lead b{color:var(--white)}
.dir-b .accl .a p+p{margin-top:10px}

/* Policy pages */
.dir-b .toc{top:24px}
.admin-bar .dir-b .toc{top:56px}
.dir-b .toc a{color:inherit;transition:box-shadow .15s,padding .15s}
.dir-b .toc a:hover{color:var(--ink);box-shadow:inset 4px 0 0 var(--line);padding-inline-start:16px}
.dir-b .toc a.on:hover{box-shadow:inset 4px 0 0 var(--ember)}
@media (min-width:1024px){.dir-b.rtl .toc a.on,.dir-b.rtl .toc a:hover{box-shadow:inset -4px 0 0 var(--ember)}.dir-b.rtl .toc a:not(.on):hover{box-shadow:inset -4px 0 0 var(--line)}}
.dir-b .prose h2{scroll-margin-top:24px}
.dir-b .prose .stillq{scroll-margin-top:24px}
.dir-b .prose ul,.dir-b .prose ol{margin-top:14px;padding-inline-start:1.2em;list-style:square}
.dir-b .prose ol{list-style:decimal}
.dir-b .prose li{font-size:17px;line-height:1.75;color:#3A3733}
.dir-b .prose li+li{margin-top:6px}
.dir-b .prose li::marker{color:var(--ember)}
.dir-b .prose p a,.dir-b .prose li a{text-decoration:underline;text-underline-offset:3px;font-weight:600}
.dir-b .prose h3:not(.h3){font-family:'Archivo',sans-serif;font-stretch:112%;font-weight:800;text-transform:uppercase;font-size:20px;margin:32px 0 10px}
.dir-b.rtl .prose p,.dir-b.rtl .prose li{line-height:1.95}
.dir-b .prose>.callout,.dir-b .prose>.draft{margin-top:24px}
.dir-b .callout svg{flex:none;margin-top:2px}
/* Table block, style "Rates boxes" = the design's .rates */
.dir-b .prose .wp-block-table{margin:24px 0 0;overflow-x:auto}
.dir-b .prose .wp-block-table table{width:100%;border-collapse:collapse;background:var(--white);border:1px solid var(--ink)}
.dir-b .prose .wp-block-table th,.dir-b .prose .wp-block-table td{border:1px solid var(--ink);padding:12px 16px;text-align:start;font-size:15px}
.dir-b .prose .wp-block-table thead{border:0}
.dir-b .prose .is-style-rates table{table-layout:fixed}
.dir-b .prose .is-style-rates th,.dir-b .prose .is-style-rates td{border:0;border-inline-start:1px solid var(--ink);padding:0 20px;vertical-align:top}
.dir-b .prose .is-style-rates th:first-child,.dir-b .prose .is-style-rates td:first-child{border-inline-start:0}
.dir-b .prose .is-style-rates th{padding-top:18px;font-family:'Archivo Narrow',sans-serif;font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.dir-b .prose .is-style-rates tbody tr:first-child td{font-family:'Archivo',sans-serif;font-stretch:112%;font-weight:800;font-size:26px;line-height:1.3;color:var(--ink)}
.dir-b .prose .is-style-rates tbody tr:last-child td{font-size:13px;color:var(--mute);padding-bottom:18px}
.dir-b .prose .is-style-rates figcaption{font-size:13px;color:var(--mute);margin-top:8px}

@media (max-width:1023px){
	/* Phone: one column (the desktop minmax columns above must not win), headings sized to the screen */
	.dir-b .phero{grid-template-columns:minmax(0,1fr)}
	.dir-b .phero .h1{overflow-wrap:break-word;font-size:clamp(28px,10.4vw,38px)}
	.dir-b .hero .wrap{grid-template-columns:minmax(0,1fr)}
	.dir-b .hero h1{font-size:clamp(30px,11vw,46px)}
	.dir-b .hero .ctas .btn{min-width:0}
	.dir-b.rtl .hero h1{font-size:36px;line-height:1.4}
	.dir-b.rtl .ahero .h1{font-size:36px}
	.dir-b.rtl .quote{font-size:26px}
	.dir-b .phead .phead-side .ctas{flex-direction:column;align-items:stretch;width:100%}
	.dir-b .phead .phead-side{align-items:stretch}
	.dir-b .contact-cards{padding:28px 0}
	.dir-b .cform-note{min-height:0}
	.dir-b .mapband .map-frame{top:-110px;bottom:auto;height:390px}
	.dir-b .mapband.map-on .map-ph{display:block;visibility:hidden}
	.dir-b .mapband .map-consent{top:16px;bottom:auto;inset-inline:16px;max-width:none;flex-wrap:wrap;padding:12px}
	.dir-b .toc{overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
	.dir-b .toc::-webkit-scrollbar{display:none}
	.dir-b .toc a:hover{padding-inline-start:14px;box-shadow:none}
	.dir-b .prose .is-style-rates th,.dir-b .prose .is-style-rates td{padding-inline:14px}
	.dir-b .prose .is-style-rates tbody tr:first-child td{font-size:20px}
}

/* Page head "Compact" (title only, e.g. above the booking calendar): less space so the content below shows sooner */
.dir-b .phead.phead-compact{padding-bottom:28px}
.dir-b .phead.phead-compact .crumbs{padding:20px 0 18px}
.dir-b .phead.phead-compact .h1{margin-top:0!important}

@media (max-width:760px){
	/* Home hero on phones: the "Book a meeting" panel first, then the title, text and buttons over the photo
	   (desktop and tablets unchanged). The wrap steps aside so the photo can sit behind the second row. */
	.dir-b .hero:has(.panel){display:grid;grid-template-columns:minmax(0,1fr)}
	.dir-b .hero:has(.panel) .wrap{display:contents}
	.dir-b .hero:has(.panel) .panel{grid-row:1;grid-column:1;margin:0}
	.dir-b .hero:has(.panel) .hero-bg{position:relative;grid-row:2;grid-column:1;inset:auto;height:auto}
	.dir-b .hero:has(.panel) .wrap>div:first-child{grid-row:2;grid-column:1;position:relative;min-width:0;padding:40px 20px 56px}
	.dir-b .hero:has(.panel) .hero-bg::after{background:linear-gradient(180deg,rgba(22,21,20,.6) 0%,rgba(22,21,20,.85) 55%,#161514 100%)}
	.dir-b .phead.phead-compact{padding-bottom:16px}
	.dir-b .phead.phead-compact .crumbs{padding:12px 0 10px}
	.dir-b .phead.phead-compact .h1{font-size:32px}
}