/* about page styles, shared by about.html (English) and ar/about.html (Arabic) */
/* Palette only (BRAND-RULES.md) */
:root { --white:#ffffff; --cream:#eae6df; --beige:#dcd5c3; --camel:#ba8867; --ink:#000000;
--sage:#949b80; --brick:#9b450b; --brown:#773805; --bg:#dcd5c3;
--serif:"benton-modern-display", Georgia, serif; /* headings */
--sans:"cofo-sans-variable", Arial, sans-serif; /* body + sub-headings */
--arabic:"ibm-plex-arabic", Tahoma, sans-serif; } /* Arabic */
* { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.6; }
:lang(ar) { font-family:var(--arabic); letter-spacing:0 !important; text-transform:none !important; }
.label { font-size:12px; letter-spacing:.25em; text-transform:uppercase; }
h1, h2, h3 { font-family:var(--serif); font-weight:400; line-height:1.1; }
header { position:fixed; inset:0 0 auto 0; z-index:10; height:64px; background:var(--bg);
display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 40px; }
nav { display:flex; gap:48px; font-size:12px; letter-spacing:.25em; text-transform:uppercase; }
nav a { color:var(--ink); text-decoration:none; opacity:.75; }
nav a:hover, nav a.on { opacity:1; color:var(--brown); } /* brown: 6.1:1 on light beige (brick is only 4.4:1) */
nav.right { justify-content:flex-end; }
.logo img { height:40px; display:block; }
/* Opening: construction photo with Amanda's redactive frame (O36 wall, cream) and her line inside it,
as on her "coming soon" post, without the COMING SOON */
.open { position:relative; margin-top:64px; height:calc(100vh - 64px); min-height:520px; overflow:hidden; background:var(--ink); }
.open picture img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.frame { position:absolute; left:50%; top:50%; height:min(82%, 760px); aspect-ratio:1069/1600; transform:translate(-50%, -50%);
background:url(../assets/web/brand/wall-cream.png) center/contain no-repeat; display:grid; place-items:center; text-align:center; }
/* the wall keeps its own proportions (never stretched); the line sits inside it */
.frame h1 { width:64%; font-size:clamp(24px, 3vw, 44px); color:var(--brick); }
.wrap { max-width:1100px; margin:0 auto; padding:0 40px; }
section.block { padding:104px 0; }
/* Name story + the hand-drawn bilingual logo (manual p8: the "craft" variant) */
.story { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.story img { width:100%; max-width:460px; display:block; }
.story p.lead { font-family:var(--serif); font-size:30px; line-height:1.3; margin-bottom:20px; }
.story p.lead em { font-style:italic; }
/* Pillars */
.pillars { display:grid; grid-template-columns:repeat(3, 1fr); gap:32px; }
.pillars div { border-top:1px solid var(--camel); padding-top:18px; }
.pillars h3 { font-size:32px; margin:10px 0 8px; }
/* Scope: building-type icons (black on cream chips) */
.scope h2, .facts-row h2 { font-size:36px; margin-bottom:28px; }
.types { display:flex; gap:20px; flex-wrap:wrap; }
.types a { display:flex; align-items:center; gap:14px; padding:10px 22px 10px 10px; border:1px solid rgba(0,0,0,.25); border-radius:999px;
color:var(--ink); text-decoration:none; font-size:13px; letter-spacing:.18em; text-transform:uppercase; }
.types a:hover { border-color:var(--brown); color:var(--brown); }
/* Fact row */
.facts-row ul { list-style:none; display:grid; grid-template-columns:repeat(3, 1fr); gap:32px; }
.facts-row li { font-family:var(--serif); font-size:24px; line-height:1.25; border-top:1px solid var(--camel); padding-top:18px; }
/* Closing line above the contact block */
.closing { text-align:center; padding:112px 24px 0; }
.closing p { font-family:var(--serif); font-size:clamp(26px, 3vw, 40px); line-height:1.25; max-width:820px; margin:0 auto; }
@media (max-width:760px) {
header { padding:0 16px; grid-template-columns:72px 1fr 72px; } nav { display:none; } .logo { grid-column:2; justify-self:center; }
.open { height:calc(100svh - 84px); margin-top:84px; } .frame { height:74%; }
.wrap { padding:0 16px; } section.block { padding:72px 0; }
.story { grid-template-columns:1fr; gap:40px; } .story p.lead { font-size:24px; } .story img { max-width:300px; }
.pillars, .facts-row ul { grid-template-columns:1fr; gap:24px; }
.closing { padding-top:80px; }
}
/* ---- Services section (merged into About, 2026-09-27; from services.css) ---- */
#services { scroll-margin-top:64px; }
.services-title { font-size:clamp(36px, 4.4vw, 60px); letter-spacing:.02em; text-align:center; margin-bottom:48px; } /* Amanda's "AT IKDU, WE BUILD." */
.cards { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.card { background:var(--cream); padding:32px 28px 30px; display:flex; flex-direction:column; gap:14px; color:var(--ink); text-decoration:none; }
.card .chip { width:56px; height:56px; background:var(--bg); } .card .chip img { width:40px; height:40px; }
.card h2 { font-size:32px; }
.card p { opacity:.85; }
.card .more { margin-top:auto; padding-top:8px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; }
.card:hover .more { color:var(--brick); }
.block h2.title { font-size:36px; margin-bottom:28px; }
.included { display:grid; grid-template-columns:1fr 2fr; gap:48px; border-top:1px solid var(--camel); padding-top:28px; }
.included ul { list-style:none; display:grid; gap:14px; }
.included li { font-size:18px; padding-left:22px; position:relative; }
.included li::before { content:""; position:absolute; left:0; top:.7em; width:10px; height:1px; background:var(--ink); }
.included .note { margin-top:22px; font-family:var(--serif); font-size:22px; color:var(--brown); }
.steps4 { list-style:none; display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; counter-reset:s; }
.steps4 li { border-top:1px solid var(--camel); padding-top:18px; counter-increment:s; }
.steps4 li::before { content:"0" counter(s); display:block; font-size:12px; letter-spacing:.25em; margin-bottom:10px; }
.steps4 h3 { font-size:26px; margin-bottom:6px; }
/* Arabic opener: Amanda's Arabic wordmark inside the wall (instead of repeating the name-story line) */
.frame .wordmark { width:62%; height:auto; display:block; }
@media (max-width:760px) {
.services-title { margin-bottom:28px; }
.cards, .included, .steps4 { grid-template-columns:1fr; gap:16px; }
.included { gap:20px; }
}
/* ---- About option A (Amr, 2026-09-29): service cards with photos, small terracotta photo, "How we work" as one project's journey ---- */
.svc-head { display:flex; justify-content:space-between; align-items:baseline; gap:32px; border-top:1px solid var(--camel); padding-top:28px; margin-bottom:32px; }
.svc-head .title { margin-bottom:0 !important; }
.svc-head p { max-width:420px; opacity:.85; }
.svc { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.svc-card { display:flex; flex-direction:column; background:var(--cream); color:var(--ink); text-decoration:none; }
.svc-img, .inc-img, .step-img { display:block; position:relative; overflow:hidden; background:var(--beige); }
.svc-img { aspect-ratio:4/5; }
.svc-img img, .inc-img img, .step-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s ease; }
.svc-card:hover .svc-img img { transform:scale(1.04); }
.svc-card h3 { font-size:30px; margin:22px 24px 8px; }
.svc-card p { margin:0 24px; opacity:.85; }
.svc-card .more { margin:auto 24px 24px; padding-top:18px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; }
.svc-card:hover .more { color:var(--brick); }
/* photo fills its column beside heading + list, so its top and bottom line up with them (Amr: alignment) */
.included { grid-template-columns:minmax(220px, 1fr) 2fr; align-items:stretch; }
.inc-side { position:relative; min-height:320px; }
.inc-side .inc-img { position:absolute; inset:0; }
.journey { margin:-16px 0 28px; opacity:.75; }
.step-img { aspect-ratio:1/1; margin-bottom:18px; }
.steps4 li { border-top:0; padding-top:0; }
.steps4 li::before { border-top:1px solid var(--camel); padding-top:14px; }
.tag3d { position:absolute; top:10px; left:10px; background:var(--cream); color:var(--ink); font-size:10px; letter-spacing:.15em; text-transform:uppercase; padding:5px 8px; line-height:1; }
[dir="rtl"] .tag3d { left:auto; right:10px; letter-spacing:0; font-size:12px; }
@media (max-width:760px) {
.svc-head { flex-direction:column; gap:10px; }
.svc { grid-template-columns:1fr; gap:20px; } .svc-img { aspect-ratio:4/3; }
.included { grid-template-columns:1fr; } .inc-side { min-height:0; } .inc-side .inc-img { position:relative; aspect-ratio:3/2; }
.steps4 { grid-template-columns:1fr 1fr; gap:24px 16px; } /* phones: 2 x 2, so the journey still reads as a sequence */
}
/* Link to the Concept -> Reality page (2026-09-29) */
.concept-link { text-align:center; padding:72px 24px 0; font-size:12px; letter-spacing:.2em; text-transform:uppercase; }
.concept-link a { color:var(--ink); text-decoration:none; border-bottom:1px solid var(--camel); padding-bottom:3px; }
.concept-link a:hover { color:var(--brown); }
[dir="rtl"] .concept-link { letter-spacing:0; font-size:15px; }
/* Phone turned sideways / short screens (2026-09-29): the opening photo fits the screen below the header */
@media (max-height:500px) and (orientation:landscape) { .open { min-height:0; height:calc(100svh - 64px); margin-top:64px; } .frame { height:86%; } }
/* Two-colour O36 wall element (Amr, 2026-09-30; Amanda's manual p23): brick blocks + cream centre, drawn as SVG over the photo */
.frame.o36 { background:none; aspect-ratio:206/316; }
.frame.o36 svg { position:absolute; inset:0; width:100%; height:100%; }
.o36-b { fill:var(--brick); } .o36-c { fill:var(--cream); }
.frame.o36 h1 { position:relative; width:58%; color:var(--brown); }
.frame.o36 .wordmark { position:relative; width:56%; }