/* Content pages (about, sizes and made to measure, ordering guide, questions, privacy) in English and Arabic.
   Same fonts, palette and wordmark crops as the homepage (styles.css), without its motion layer. */
@font-face{font-family:Editorial;src:url('fonts/ancizar-serif.woff2') format('woff2');font-weight:300 900;font-display:swap}
@font-face{font-family:Editorial;src:url('fonts/ancizar-serif-italic.woff2') format('woff2');font-style:italic;font-weight:300 900;font-display:swap}
@font-face{font-family:Studio;src:url('fonts/ancizar-sans.woff2') format('woff2');font-weight:100 1000;font-display:swap}
@font-face{font-family:Arabic;src:url('fonts/alyamama.woff2') format('woff2');font-weight:300 900;font-display:swap}

:root{--ivory:#dedacf;--ink:#090a08;--paper:#f8f6ee;--muted:#55554e;--line:#090a0824;--gutter:clamp(22px,4.4vw,84px);--serif:Editorial,Georgia,serif;--sans:Studio,Arial,sans-serif;--ease-out:cubic-bezier(.16,1,.3,1)}
html[lang=ar]{--serif:Arabic,Editorial,serif;--sans:Arabic,Studio,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ivory);color:var(--ink);font:400 17px/1.7 var(--sans);-webkit-font-smoothing:antialiased}
html[lang=ar] body{font-size:18px;line-height:1.9}
a{color:inherit;text-underline-offset:4px;text-decoration-thickness:1px}
img{display:block;max-width:100%;height:auto}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.skip-link{position:fixed;top:8px;inset-inline-start:8px;z-index:100;padding:12px 16px;background:var(--paper);transform:translateY(-160%)}
.skip-link:focus{transform:none}
bdi{white-space:nowrap}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* Header: the supplied wordmark, centred and cropped exactly as on the homepage. */
.page-header{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:112px;padding:0 var(--gutter);border-bottom:1px solid var(--line)}
.page-header .brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:block;width:190px;height:78px;overflow:hidden;mix-blend-mode:darken}
.page-header .brand img{position:absolute;max-width:none;width:265px;left:-42px;top:-91px}
.page-nav{display:flex;gap:32px;font-size:14px}
.page-nav a,.lang-link{text-decoration:none;padding:8px 0;border-bottom:1px solid transparent;transition:border-color .25s var(--ease-out)}
.page-nav a:hover,.lang-link:hover,.page-nav a[aria-current=page]{border-bottom-color:currentColor}
.lang-link{font-size:15px}

/* Article */
.page{max-width:820px;margin:0 auto;padding:44px var(--gutter) 96px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 48px;padding:0;list-style:none;font-size:13px;color:var(--muted)}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs li+li::before{content:"/";margin-inline-end:8px}
.eyebrow{margin:0 0 18px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
html[lang=ar] .eyebrow{font-size:14px;letter-spacing:0}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:300;line-height:1.08;text-wrap:balance}
html[lang=ar] h1,html[lang=ar] h2,html[lang=ar] h3{font-weight:400;line-height:1.4;letter-spacing:0}
h1{font-size:clamp(42px,6.2vw,80px);letter-spacing:-.025em}
h2{margin-bottom:16px;font-size:clamp(28px,3.4vw,40px);letter-spacing:-.015em}
h3{margin-bottom:6px;font-size:23px}
.lede{max-width:60ch;margin:28px 0 0;font-size:20px;line-height:1.6}
html[lang=ar] .lede{font-size:21px;line-height:1.85}
.updated{margin:18px 0 0;font-size:14px;color:var(--muted)}
.page p{max-width:66ch}
.page section{margin-top:56px;padding-top:48px;border-top:1px solid var(--line)}
.page section p{margin:0 0 16px}
.page section ul{margin:0 0 16px;padding-inline-start:22px;max-width:66ch}
.page section li{margin-bottom:10px}
.page section li strong,.page section p strong{font-weight:600}

.arch-figure{max-width:440px;margin:56px auto 0}
.arch-figure img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:999px 999px 0 0;background:#cfcabd}
.arch-figure figcaption{margin-top:12px;font-size:12px;letter-spacing:.04em;color:var(--muted);text-align:center}
html[lang=ar] .arch-figure figcaption{font-size:13px;letter-spacing:0}

.steps{display:grid;gap:30px;margin:8px 0 0;padding:0;list-style:none;counter-reset:step}
.steps li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:8px;counter-increment:step}
.steps li::before{content:counter(step,decimal-leading-zero);font-family:var(--serif);font-size:30px;line-height:1.1;font-variant-numeric:lining-nums}
.steps p{margin:0}

.measures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 36px;margin:8px 0 24px}
.measures div{padding:14px 0;border-bottom:1px solid var(--line)}
.measures dt{font-weight:600}
.measures dd{margin:4px 0 0;font-size:15px;line-height:1.6;color:var(--muted)}
html[lang=ar] .measures dd{font-size:16px;line-height:1.8}

.faq{margin-top:48px}
.faq-item{padding:30px 0;border-top:1px solid var(--line)}
.faq-item h2{margin-bottom:10px;font-size:clamp(23px,2.6vw,29px)}
.faq-item p{margin:0}

.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:20px;min-height:52px;padding:14px 22px;border:1px solid currentColor;font-size:15px;text-decoration:none;transition:background-color .25s var(--ease-out),color .25s var(--ease-out),transform .16s var(--ease-out)}
.button svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.4;flex:none}
[dir=rtl] .button svg{transform:scaleX(-1)}
.button:hover{background:var(--ink);color:var(--ivory)}
.button:active{transform:scale(.98)}
.contact-panel{margin-top:72px;padding:44px clamp(22px,4vw,52px);background:var(--ink);color:var(--ivory)}
.contact-panel p{margin:0}
.contact-panel .button:hover{background:var(--ivory);color:var(--ink)}
.contact-panel ::selection{background:var(--ivory);color:var(--ink)}

/* Footer: dark band with the light wordmark, as on the homepage. */
.page-footer{padding:52px var(--gutter) 36px;background:var(--ink);color:var(--ivory)}
.footer-top{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:32px}
.page-footer .brand{position:relative;display:block;width:170px;height:70px;overflow:hidden;mix-blend-mode:screen}
.page-footer .brand img{position:absolute;max-width:none;width:236px;left:-37px;top:-81px}
.footer-links{display:grid;grid-template-columns:repeat(2,auto);gap:12px 40px;margin:0;padding:8px 0 0;list-style:none;font-size:14px}
.footer-links a{text-decoration:none;transition:opacity .25s var(--ease-out)}
.footer-links a:hover{opacity:.6}
.footer-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 28px;margin-top:40px;padding-top:20px;border-top:1px solid #dedacf33;font-size:12px;letter-spacing:.04em;opacity:.85}
.footer-meta p{margin:0}
html[lang=ar] .footer-meta{font-size:13px;letter-spacing:0}

@media (hover:none){.button:hover{background:transparent;color:inherit}.contact-panel .button:hover{background:transparent;color:var(--ivory)}}
@media (max-width:760px){
  .page-header{flex-wrap:wrap;min-height:0;padding:14px 22px 12px;gap:8px 18px}
  .page-header .brand{position:relative;left:auto;top:auto;transform:none;width:131px;height:54px;order:1}
  .page-header .brand img{width:183px;left:-29px;top:-63px}
  .lang-link{order:2;margin-inline-start:auto}
  .page-nav{order:3;flex-basis:100%;gap:20px;font-size:13px;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
  .page{padding-top:32px}
  .crumbs{margin-bottom:36px}
  .lede{font-size:18px}
  html[lang=ar] .lede{font-size:19px}
  .measures{grid-template-columns:1fr}
  .steps li{grid-template-columns:48px minmax(0,1fr)}
  .steps li::before{font-size:24px}
  .footer-links{grid-template-columns:1fr 1fr;gap:12px 24px}
  .button{flex:1 1 220px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button,.page-nav a,.lang-link,.footer-links a{transition:none}.button:active{transform:none}}