@font-face{font-family:'Alexandria';src:url('../fonts/Alexandria-VF.ttf') format('truetype');font-weight:100 900;font-display:swap;}
/* BRAND_CORE v3 (D1 Atelier). Five colours: Night, Paper, Brass (lines only), Smoke, Stone.
   Alexandria sets Latin (300, kickers 400) and Arabic (400). Western digits. Square corners. */

:root{
  --night:#161210;--paper:#F7F4F0;--brass:#C68A53;--smoke:#A89B8E;--stone:#6B5E54;
  --bg:var(--paper);--fg:var(--night);--fg2:var(--stone);--hair:rgba(22,18,16,.14);--tile:rgba(22,18,16,.04);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:var(--night);--fg:var(--paper);--fg2:var(--smoke);--hair:rgba(247,244,240,.16);--tile:rgba(247,244,240,.05);
}}
:root[data-theme="dark"]{--bg:var(--night);--fg:var(--paper);--fg2:var(--smoke);--hair:rgba(247,244,240,.16);--tile:rgba(247,244,240,.05);}
:root[data-theme="light"]{--bg:var(--paper);--fg:var(--night);--fg2:var(--stone);--hair:rgba(22,18,16,.14);--tile:rgba(22,18,16,.04);}
*{box-sizing:border-box;margin:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--fg);font-family:'Alexandria',system-ui,sans-serif;font-weight:300;line-height:1.65;-webkit-font-smoothing:antialiased;}
.en{font-family:'Alexandria',system-ui,sans-serif;}
/* Arabic type scale (BRAND_CORE 3.2): weight 400, a little larger, headings line 1.5, body line 1.85.
   Connected script closes its counters at Light, so Arabic never uses 300. */
.ar{font-family:'Alexandria',system-ui,sans-serif;font-weight:400;font-size:1.06em;line-height:1.85;}
:root.ar-on h1 .ar,:root.ar-on .lead .ar,:root.ar-on h3 .ar,:root.ar-on .tag .ar{line-height:1.5;}
:root.ar-on .eyebrow .ar,:root.ar-on .k .ar,:root.ar-on .ro .ar,:root.ar-on .sl .ar,:root.ar-on .tg .ar,:root.ar-on .fl .ar{line-height:1.5;}
/* Latin runs inside RTL text - phone numbers, emails, handles, the name 5IN1 - keep their own direction. */
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block;}
:root:not(.ar-on) .ar{display:none;}
:root.ar-on .en{display:none;}
:root.ar-on{direction:rtl;}
.wrap{max-width:1000px;margin:0 auto;padding:0 40px;}
h1,h2,h3{font-weight:300;text-wrap:balance;line-height:1.2;}
h3{font-weight:400;}
/* kicker: 400, capitals, tracking .16em; the five-arc ring is the index mark, 14px before it */
.eyebrow{display:flex;align-items:center;gap:14px;font-size:12px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--fg2);margin-bottom:22px;line-height:1.3;}
.eyebrow::before{content:"";width:22px;height:22px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='15' r='13' fill='none' stroke='%23C68A53' stroke-width='2.6' stroke-dasharray='14.975 1.361' transform='rotate(-87 15 15)'/%3E%3C/svg%3E") center/contain no-repeat;}
:root.ar-on .eyebrow{letter-spacing:0;font-size:13px;}
.controls{position:fixed;top:20px;right:24px;z-index:40;display:flex;gap:8px;}
:root.ar-on .controls{right:auto;left:24px;}
.ctrl{border:1px solid rgba(247,244,240,.28);background:rgba(22,18,16,.72);backdrop-filter:blur(8px);color:var(--paper);padding:9px 14px;font-size:12px;font-weight:400;font-family:'Alexandria',sans-serif;letter-spacing:.12em;cursor:pointer;transition:background .15s;}
.ctrl:hover{background:var(--night);}
.ctrl:focus-visible{outline:2px solid var(--paper);outline-offset:2px;}

/* cover: always Night */
.cover{background:var(--night);color:var(--paper);min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:110px 0 96px;position:relative;overflow:hidden;}
.cover .five{position:absolute;right:-2%;bottom:-6%;height:92%;width:auto;opacity:.1;pointer-events:none;}
:root.ar-on .cover .five{right:auto;left:-2%;}
.cover .wrap{position:relative;width:100%;}
.cover img.lg{width:230px;max-width:62vw;height:auto;margin-bottom:64px;display:block;}
.cover .tag{font-size:clamp(32px,6.4vw,64px);font-weight:300;line-height:1.12;max-width:15ch;text-wrap:balance;}
.cover .crule{width:54px;height:0;border-top:3px solid var(--brass);margin:34px 0;}
.cover .five-l{font-size:12.5px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--smoke);max-width:52ch;line-height:1.7;}
:root.ar-on .cover .five-l{letter-spacing:0;font-size:15px;}
.cover .label{margin-top:22px;font-size:11.5px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--smoke);}
:root.ar-on .cover .label{letter-spacing:0;font-size:13px;}
.cover .cn{margin-top:56px;font-size:11.5px;font-weight:400;color:var(--smoke);letter-spacing:.1em;line-height:1.7;max-width:60ch;}
:root.ar-on .cover .cn{letter-spacing:0;font-size:13px;}
@media(max-width:700px){.cover .five{display:none;}.cover{min-height:92vh;padding:96px 0 72px;}}

/* section: a short brass cut line on the hairline, like the guidelines page */
section.band{padding:88px 0;border-bottom:1px solid var(--hair);position:relative;}
section.band::before{content:"";position:absolute;inset-inline-start:max(40px,calc(50% - 460px));top:0;width:54px;border-top:3px solid var(--brass);}
section.tint{background:var(--tile);}
.lead{font-size:clamp(23px,3.4vw,34px);font-weight:300;line-height:1.25;max-width:26ch;}
.body{font-size:16px;color:var(--fg2);max-width:64ch;margin-top:20px;}

.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px;}
@media(max-width:720px){.facts{grid-template-columns:1fr 1fr;}}
.fact .k{font-size:11px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--fg2);margin-bottom:7px;}
:root.ar-on .k{letter-spacing:0;font-size:12.5px;}
.fact .v{font-size:16px;color:var(--fg);}
.wmap{width:100%;height:auto;display:block;margin-top:30px;}
.wmap .sea{fill:var(--fg);opacity:.05;}
.wmap .ctx{fill:var(--fg);opacity:.17;}
.wmap .hi{fill:var(--fg);fill-opacity:.4;stroke:var(--brass);stroke-width:1.6;stroke-linejoin:round;}
.wmap .mk{fill:var(--fg);}
.wmap .ld{stroke:var(--brass);stroke-width:1.2;}
.wmap .lb{fill:var(--fg);font-family:'Alexandria',system-ui,sans-serif;font-size:17px;font-weight:400;
  letter-spacing:.05em;paint-order:stroke;stroke:var(--bg);stroke-width:4.5px;stroke-linejoin:round;}
:root.ar-on .wmap .lb{font-size:16px;letter-spacing:0;}
.ctry{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px;}
.ctry>span{font-size:13px;letter-spacing:.04em;color:var(--fg);border:1px solid var(--hair);padding:6px 15px;}
@media(max-width:480px){.wmap .lb{font-size:34px;stroke-width:8px;}:root.ar-on .wmap .lb{font-size:32px;}}
@media print{.wmap{break-inside:avoid;}}
.clients{display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));gap:1px;
  margin-top:34px;background:var(--hair);border:1px solid var(--hair);}
.clients .cl{background:var(--bg);display:grid;place-items:center;padding:28px 20px;min-height:116px;}
.clients .cl img{max-width:100%;max-height:54px;width:auto;height:auto;display:block;}
.clients .cl i{display:block;max-width:100%;background:var(--fg);opacity:.72;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;}
.clients .cl .nm{font-size:13.5px;letter-spacing:.02em;color:var(--fg2);text-align:center;line-height:1.4;}
@media(max-width:480px){.clients{grid-template-columns:repeat(2,1fr);}.clients .cl{padding:22px 14px;min-height:96px;}}
@media print{.clients{break-inside:avoid;}}
/* founders: two, side by side; the brass line is the cut line, the photo is square */
.founders{display:flex;flex-wrap:wrap;gap:20px 26px;margin-top:34px;max-width:620px;}
.founder{flex:1 1 270px;max-width:297px;border-top:3px solid var(--brass);padding-top:16px;display:flex;gap:16px;align-items:flex-start;}
.founder .fpic{width:72px;height:72px;object-fit:cover;object-position:40% 30%;flex:none;}
.founder .nm{font-size:18px;color:var(--fg);line-height:1.35;}
.founder .ro{font-size:11px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--fg2);margin-top:6px;line-height:1.5;}
:root.ar-on .founder .ro{letter-spacing:0;font-size:12.5px;}
.styles{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:34px;}
.styles .sl{font-size:11px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--fg2);width:100%;margin-bottom:4px;}
:root.ar-on .styles .sl{letter-spacing:0;font-size:12.5px;}
.styles .pill{border:1px solid var(--hair);padding:6px 15px;font-size:13px;color:var(--fg);}

.rows{margin-top:18px;}
.row{display:grid;grid-template-columns:60px 1fr;gap:22px;padding:24px 0;border-top:1px solid var(--hair);align-items:baseline;}
.row:last-child{border-bottom:1px solid var(--hair);}
.row .no{font-size:15px;font-weight:400;color:var(--fg);font-variant-numeric:tabular-nums;}
.row h3{font-size:20px;}
.row p{font-size:14.5px;color:var(--fg2);margin-top:6px;max-width:62ch;}
@media(max-width:600px){.row{grid-template-columns:40px 1fr;gap:14px;}}

.sectors{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px;}
@media(max-width:720px){.sectors{grid-template-columns:1fr;}}
.sector{border-top:3px solid var(--brass);padding-top:16px;}
.sector .fl{font-size:10.5px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--fg2);margin-bottom:8px;min-height:14px;}
:root.ar-on .sector .fl{letter-spacing:0;font-size:12px;}
.sector h3{font-size:19px;}
.sector p{font-size:13.5px;color:var(--fg2);margin-top:8px;}

.proj-tags{display:flex;gap:9px;flex-wrap:wrap;margin:14px 0 22px;}
.proj-tags .tg{font-size:10.5px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--fg2);border:1px solid var(--hair);padding:5px 13px;}
:root.ar-on .proj-tags .tg{letter-spacing:0;font-size:12px;}
img.hero{display:block;margin:0 auto;max-width:100%;max-height:640px;width:auto;height:auto;}
.gallery{columns:3;column-gap:12px;margin-top:14px;}
@media(max-width:720px){.gallery{columns:2;}}
@media(max-width:440px){.gallery{columns:1;}}
.gallery img{width:100%;height:auto;display:block;margin:0 0 12px;break-inside:avoid;}
.carousel{position:relative;margin-top:14px;}
.ctrack{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.ctrack::-webkit-scrollbar{display:none;}
.cslide{flex:0 0 100%;min-width:100%;scroll-snap-align:start;}
.cslide .gallery{margin-top:0;}
.cnav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:16px;}
:root.ar-on .cnav{flex-direction:row-reverse;}
.cbtn{width:38px;height:38px;border:1px solid var(--hair);background:transparent;color:var(--fg);font-size:20px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:.2s;font-family:'Alexandria',sans-serif;}
.cbtn:hover{border-color:var(--fg);}
.cbtn:focus-visible{outline:2px solid var(--fg);outline-offset:2px;}
.cdots{display:flex;gap:7px;align-items:center;}
.cdots i{width:14px;height:0;border-top:3px solid var(--hair);display:block;transition:.25s;}
.cdots i.on{border-top-color:var(--brass);width:26px;}
@media print{.ctrack{display:block;overflow:visible;}.cslide{min-width:0;}.cnav{display:none;}}
.proj-brief{font-size:15px;color:var(--fg2);max-width:64ch;margin-top:24px;}
.proj-2{margin-top:60px;padding-top:52px;border-top:1px solid var(--hair);}

.why{display:grid;grid-template-columns:repeat(2,1fr);gap:2px 40px;margin-top:18px;}
@media(max-width:720px){.why{grid-template-columns:1fr;}}
.why .item{padding:20px 0;border-top:1px solid var(--hair);}
.why .item h3{font-size:16.5px;}
.why .item p{font-size:13.5px;color:var(--fg2);margin-top:4px;}

/* studio at a glance */
.glance{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair);overflow:hidden;margin-top:20px;}
/* The registration rows are optional, so the row count varies. Let the last
   cell span the remainder rather than leaving a bare slot of the hairline. */
.glance .gi:last-child:nth-child(3n+1){grid-column:span 3;}
.glance .gi:last-child:nth-child(3n+2){grid-column:span 2;}
@media(max-width:720px){.glance{grid-template-columns:1fr 1fr;}
  .glance .gi:last-child{grid-column:auto;}
  .glance .gi:last-child:nth-child(odd){grid-column:span 2;}}
.gi{background:var(--bg);padding:20px 22px;}
.gi .k{font-size:10.5px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--fg2);margin-bottom:7px;}
:root.ar-on .gi .k{letter-spacing:0;font-size:12px;}
.gi .v{font-size:15.5px;color:var(--fg);}
.gi .v small{color:var(--fg2);}

/* contact / footer: always Night */
.foot{background:var(--night);color:var(--paper);padding:84px 0;position:relative;}
.foot::before{content:"";position:absolute;inset-inline-start:max(40px,calc(50% - 460px));top:0;width:54px;border-top:3px solid var(--brass);}
.foot img{width:150px;height:auto;margin-bottom:34px;display:block;}
.foot .fh{font-size:clamp(22px,3.2vw,30px);font-weight:300;color:var(--paper);max-width:22ch;margin-bottom:34px;line-height:1.25;}
.foot .c{display:grid;grid-template-columns:repeat(2,1fr);gap:24px 40px;max-width:680px;}
@media(max-width:600px){.foot .c{grid-template-columns:1fr;}}
.foot .c .k{font-size:11px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--smoke);margin-bottom:6px;}
:root.ar-on .foot .c .k{letter-spacing:0;font-size:12.5px;}
.foot .c .v{font-size:16px;color:var(--paper);}
.foot .c a{color:var(--paper);text-decoration:none;border-bottom:1px solid rgba(247,244,240,.3);}
.foot .c a:hover{border-color:var(--paper);}
.foot .c a.wa{border:1px solid rgba(247,244,240,.3);}
.wa{margin-top:8px;display:inline-block;color:var(--paper);padding:6px 14px;font-size:13px;font-weight:400;text-decoration:none;}
.foot .c a.wa:hover{border-color:var(--paper);}
.foot .cta{display:inline-flex;align-items:center;gap:10px;margin-top:40px;background:var(--paper);color:var(--night);padding:14px 26px;font-size:15px;font-weight:400;text-decoration:none;transition:opacity .15s;}
.foot .cta:hover{opacity:.9;}
.foot .fr{height:1px;background:rgba(247,244,240,.16);margin:40px 0 22px;}
.foot .end{font-size:11px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--smoke);line-height:1.7;}
:root.ar-on .foot .end{letter-spacing:0;font-size:12.5px;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*{transition:none!important;}}
@page{size:A4;margin:0;}
@media print{
  html{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .controls{display:none!important;}
  section{break-before:page;}
  .proj-2{break-before:page;}
  img.hero,.founder,.row,.sector,.gi,.fact,.pill{break-inside:avoid;}
  .eyebrow,.lead,.proj-tags{break-after:avoid;}
}

/* Multi-page website additions */
body{overflow-x:hidden;}
img,picture{max-width:100%;}
.ar-mixed{display:none;}
:root.ar-on .ar-mixed{display:inline;}
.ar-latin{font-family:'Alexandria',system-ui,sans-serif;unicode-bidi:isolate;}

.selected-work .lead{max-width:34ch;}
.project-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:34px;}
.project-card{min-width:0;background:var(--bg);color:var(--fg);border:1px solid var(--hair);border-radius:16px;overflow:hidden;box-shadow:0 14px 38px color-mix(in srgb,var(--night) 7%,transparent);}
.card-media{display:block;color:inherit;text-decoration:none;border-bottom:1px solid var(--hair);}
.card-media-picture,.card-media-picture img{display:block;width:100%;height:auto;}
.card-copy{padding:24px;min-width:0;}
.card-title{font-size:clamp(21px,2.8vw,28px);color:var(--fg);}
.card-copy .proj-tags{margin:14px 0;}
.card-brief{font-size:14px;color:var(--fg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.card-link,.back-link{display:inline-flex;align-items:center;gap:9px;margin-top:20px;color:var(--fg);font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--brass);}
.card-link:hover,.back-link:hover{color:var(--brass);}

.project-top{padding:96px 0 54px;background:var(--tile);border-bottom:1px solid var(--hair);}
.project-top .back-link{margin:0 0 54px;}
.project-title{font-size:clamp(34px,6vw,66px);max-width:17ch;}
.project-top .proj-tags{margin:24px 0 0;}
.project-top .proj-brief{font-size:17px;line-height:1.75;margin-top:26px;}
.project-work{padding:42px 0 86px;}
.wrap-wide{max-width:1440px;}
.project-hero,.project-hero img{display:block;width:100%;height:auto;}
.project-hero{margin:0 auto 24px;border-radius:16px;overflow:hidden;}
.project-gallery{columns:3;column-gap:14px;}
.gallery-item{display:block;width:100%;margin:0 0 14px;break-inside:avoid;border-radius:12px;overflow:hidden;}
.gallery-item img{display:block;width:100%;height:auto;}
.project-end{padding:0 0 88px;text-align:center;}
.project-end .back-link{margin-top:0;}
:root.ar-on .card-link,:root.ar-on .back-link{letter-spacing:0;text-transform:none;}

@media(max-width:900px){
  .project-cards{grid-template-columns:1fr;}
  .project-gallery{columns:2;}
}
@media(max-width:560px){
  .wrap{padding-inline:20px;}
  .controls{top:12px;right:12px;}
  :root.ar-on .controls{left:12px;}
  section.band{padding:64px 0;}
  .project-top{padding:82px 0 42px;}
  .project-top .back-link{margin-bottom:38px;}
  .project-work{padding:20px 0 62px;}
  .project-gallery{columns:1;}
  .gallery-item{margin-bottom:12px;}
  .card-copy{padding:20px;}
}