/*
Theme Name: Tohfa
Theme URI: https://tohfa.ae
Author: Tohfa Design LLC
Description: Bilingual EN/AR theme for Tohfa, built to the Tohfa brand guidelines and the approved website direction. Requires the Tohfa Core plugin for content types and fields.
Version: 1.1.6
Requires at least: 6.4
Requires PHP: 8.0
License: Proprietary
Text Domain: tohfa
*/

@font-face{font-family:"Tohfa Pagella";src:url(assets/fonts/pagella-regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
:root{
  --ivory:#FAF5EF; --gold:#AE8F64; --gold-deep:#9E7A45; --espresso:#3B2F2A; --taupe:#7D6A58;
  --stone:#D8C7B2; --linen:#E7D7C2; --clay:#B58E7A; --sage:#8A9181; --charcoal:#2D2926;
  --serif:"Palatino Linotype","Book Antiqua",Palatino,"Tohfa Pagella",Georgia,serif;
  --sans:Tahoma,Verdana,"DejaVu Sans",sans-serif;
  --arabic:"Tajawal","Dubai","Segoe UI",Tahoma,sans-serif;
  --gutter:clamp(20px,5vw,72px); --max:1280px; --read:860px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ivory);color:var(--espresso);font-family:var(--sans);line-height:1.72;font-size:14px;letter-spacing:.01em;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
/* Images cannot be dragged, long-pressed or right-clicked for saving.
   Clicks pass through to the link or control beneath them. */
img,picture,video,svg:not(.icon){pointer-events:none!important;-webkit-user-drag:none!important;user-drag:none!important;user-select:none!important;-webkit-user-select:none!important;-webkit-touch-callout:none!important}
a{color:inherit;text-decoration:none}
h1,h2,h3,.serif{font-family:var(--serif);font-weight:400;line-height:1.15;letter-spacing:-.005em}
h1{font-size:clamp(32px,3.8vw,52px)}
h2{font-size:clamp(24px,2.4vw,34px)}
h3{font-size:clamp(18px,1.4vw,22px)}
p{max-width:60ch}
.label{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe)}
.caption{font-size:12.5px;color:var(--taupe)}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
section{padding:clamp(64px,9vw,128px) 0}
.rule{width:40px;height:1px;background:var(--gold);margin:22px 0}
.btn{display:inline-block;font-family:var(--sans);font-size:12px;letter-spacing:.11em;text-transform:uppercase;padding:16px 28px;border:1px solid var(--espresso);color:var(--espresso);transition:background .25s,color .25s}
.btn:hover{background:var(--espresso);color:var(--ivory)}
.btn.solid{background:var(--espresso);color:var(--ivory)}
.btn.solid:hover{background:var(--charcoal)}
.btn.light{border-color:var(--ivory);color:var(--ivory)}
.btn.light:hover{background:var(--ivory);color:var(--espresso)}
.btn.light.solid{background:var(--ivory);color:var(--espresso)}
.link{font-size:12px;letter-spacing:.11em;text-transform:uppercase;border-bottom:1px solid var(--gold);padding-bottom:4px}

/* header */
#hdr{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s,box-shadow .3s,padding .3s;padding:18px 0}
/* The admin bar only exists for logged-in users, and it pushes the page down. */
body.admin-bar #hdr{top:32px}
@media (max-width:782px){body.admin-bar #hdr{top:46px}}
@media (max-width:600px){body.admin-bar #hdr{top:0}}
#hdr.solid{background:rgba(250,245,239,.96);box-shadow:0 1px 0 var(--stone);padding:12px 0}
#hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}
#hdr .logo img{height:48px;width:auto;transition:height .3s}
#hdr.solid .logo img{height:42px}
@media (max-width:900px){header .logo img{height:42px}header.solid .logo img{height:38px}}
#hdr .logo .l{display:none} header .logo .d{display:block}
#hdr.solid .logo .l{display:block} header.solid .logo .d{display:none}
nav ul{display:flex;gap:34px;list-style:none;align-items:center}
nav a{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ivory);position:relative;transition:color .25s}
nav a:not(.cta)::after{content:"";position:absolute;inset-inline:0;bottom:-7px;height:1px;background:currentColor;transform:scaleX(0);transition:transform .3s ease}
nav a:hover{color:var(--sage)}
nav a:not(.cta):hover::after{transform:scaleX(1)}
nav .cta:hover{border-color:var(--sage)}
#hdr.solid nav a{color:var(--espresso)}
nav .lang{font-family:var(--arabic);font-weight:500;letter-spacing:0;font-size:14px;text-transform:none}
nav .cta{border:1px solid currentColor;padding:10px 18px}
.burger{display:none;background:none;border:0;color:var(--ivory);font-size:12px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
#hdr.solid .burger{color:var(--espresso)}
.menu[hidden]{display:none}
/* Phone menu: a quiet ivory sheet. Serif items on stone hairlines, each a full-width
   tap target; contact and the call to action gathered at the foot. Items drift in
   40ms apart, which reduced-motion turns off. */
footer ul.menu{display:grid;position:static;background:none;padding:0}
.menu{display:none;position:fixed;inset:0;background:rgba(45,41,38,.96);color:var(--ivory);z-index:70;padding:18px var(--gutter) max(28px,env(safe-area-inset-bottom,0px));flex-direction:column;overflow-y:auto}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.menu{background:rgba(45,41,38,.58);-webkit-backdrop-filter:blur(36px) saturate(1.15);backdrop-filter:blur(36px) saturate(1.15)}}
.menu.open{display:flex}
.menu .top{display:flex;justify-content:space-between;align-items:center;min-height:48px;gap:16px}
.menu .top img{height:38px;width:auto}
.menu .close{background:none;border:0;padding:10px 0 10px 16px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(250,245,239,.72);cursor:pointer}
.menu ul{list-style:none;margin-top:clamp(48px,11vh,96px);display:flex;flex-direction:column;counter-reset:m}
.menu li{counter-increment:m}
.menu ul a{display:flex;align-items:baseline;gap:16px;font-family:var(--serif);font-size:clamp(17px,4.6vw,20px);letter-spacing:.04em;line-height:1.2;padding:14px 0;color:var(--ivory)}
.menu ul a::before{content:counter(m,decimal-leading-zero);font-family:var(--sans);font-size:9px;letter-spacing:.18em;color:var(--gold);min-width:24px;flex:none}
.menu ul a:active{color:var(--gold)}
[dir="rtl"] .menu ul a{font-family:var(--arabic);font-weight:500;letter-spacing:0}
.menu .contact{margin-top:auto;padding-top:40px;display:flex;flex-direction:column;gap:2px;font-size:12px;letter-spacing:.04em;line-height:1.9;color:rgba(250,245,239,.62)}
.menu .contact a{color:var(--ivory);align-self:flex-start}
.menu .foot{margin-top:28px;padding-top:28px;border-top:1px solid rgba(250,245,239,.18);display:flex;align-items:center;justify-content:space-between;gap:20px}
.menu .foot .tlink{display:inline-block;font-family:var(--sans);font-size:12px;letter-spacing:.11em;text-transform:uppercase;padding:15px 26px;border:1px solid var(--gold);color:var(--ivory);background:none}
.menu .foot .lang{font-family:var(--arabic);font-weight:500;font-size:16px;color:var(--ivory)}
@media (prefers-reduced-motion:no-preference){
.menu.open{animation:menuFade .35s ease both}
.menu.open li,.menu.open .contact,.menu.open .foot{animation:menuIn .5s cubic-bezier(.2,.7,.2,1) both}
.menu.open li:nth-child(2){animation-delay:.05s}.menu.open li:nth-child(3){animation-delay:.1s}.menu.open li:nth-child(4){animation-delay:.15s}.menu.open li:nth-child(5){animation-delay:.2s}.menu.open li:nth-child(6){animation-delay:.25s}
.menu.open .contact{animation-delay:.28s}.menu.open .foot{animation-delay:.34s}
@keyframes menuIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes menuFade{from{opacity:0}to{opacity:1}}}
.mob{display:none;align-items:center;gap:22px}
.mlang{font-family:var(--arabic);font-weight:500;font-size:15px;color:var(--ivory)}
#hdr.solid .mlang{color:var(--espresso)}
@media (max-width:900px){nav{display:none}.mob{display:flex}.burger{display:block}}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:0;color:var(--ivory);isolation:isolate}
.hero .track{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero .slide{position:absolute;inset:0;overflow:hidden;opacity:0;z-index:0;transition:opacity 1.8s ease}
.hero .slide.live{opacity:1;z-index:2}
.hero .slide.leaving{opacity:1;z-index:1}
.hero .slide.first{transition:none}
.hero .slide picture{display:block;width:100%;height:100%}
.hero .slide img{width:100%;height:100%;object-fit:cover;object-position:center 60%;will-change:transform}
/* The breath of a photograph: a slow, barely visible zoom while a picture holds. */
.hero .slide.live img,.hero .slide.leaving img{animation:heroBreath 9s linear forwards}
@keyframes heroBreath{from{transform:scale(1)}to{transform:scale(1.045)}}
@media (prefers-reduced-motion:reduce){.hero .slide img{animation:none!important}}
.hero:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,rgba(45,41,38,.32) 0%,rgba(45,41,38,0) 13%),linear-gradient(to right,rgba(45,41,38,.62) 0%,rgba(45,41,38,.48) 32%,rgba(45,41,38,.26) 52%,rgba(45,41,38,0) 72%)}
@media (max-width:760px){.hero:after{background:linear-gradient(to right,rgba(45,41,38,.60) 0%,rgba(45,41,38,.42) 55%,rgba(45,41,38,.18) 100%)}}
.hero h1,.hero p{text-shadow:0 1px 6px rgba(45,41,38,.35)}
#hdr:not(.solid) nav a,#hdr:not(.solid) .mlang,#hdr:not(.solid) .burger{text-shadow:0 1px 3px rgba(45,41,38,.5)}
.hero .wrap{position:relative;z-index:1;pointer-events:none}
.hero .wrap a,.hero .wrap button{pointer-events:auto}
.hero .arrows{display:contents}
.hero .arrows button{position:absolute;top:50%;transform:translateY(-50%);z-index:2;pointer-events:auto;width:44px;height:44px;border:1px solid rgba(250,245,239,.6);background:rgba(45,41,38,.35);color:var(--ivory);font-size:18px;cursor:pointer;transition:background .25s,border-color .25s}
.hero .arrows button[data-go="-1"]{inset-inline-start:clamp(16px,2.4vw,36px)}
.hero .arrows button[data-go="1"]{inset-inline-end:clamp(16px,2.4vw,36px)}
.hero .arrows button:hover{border-color:var(--sage);color:var(--sage)}
@media (max-width:760px){.hero .arrows{display:none}}
/* Phones: a slide with its own phone version rests like the others; a landscape
   picture without one drifts slowly sideways instead of zooming. The view opens
   centred on the first third of the picture and arrives on its centre. The
   position is a share of what is hidden, so it is right before the picture
   has even loaded. */
@media (max-width:760px){
.hero .slide:not(.has-phone) img{object-position:50% 60%;transform:none}
.hero .slide.live:not(.has-phone) img,.hero .slide.leaving:not(.has-phone) img{animation:heroDrift 9s linear forwards}
@keyframes heroDrift{from{object-position:50% 60%}to{object-position:72% 60%}}
}
.hero .wrap{padding-bottom:clamp(56px,8vw,104px);padding-top:140px;width:100%}
/* Display setting: the body line-height of 1.15 is for reading, not for a 65px
   headline, where it leaves the two lines drifting apart. Tracking comes in
   slightly too, as large serif type needs less of it. */
.hero h1{max-width:16ch;line-height:1.04;letter-spacing:-.015em}
.hero p{margin-top:22px;font-size:14px;max-width:46ch;color:rgba(250,245,239,.92)}
.hero p.kicker{margin:0 0 18px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;max-width:none;color:rgba(250,245,239,.85)}
.hero .btns{display:flex;gap:14px 32px;flex-wrap:wrap;align-items:center;margin-top:36px}
/* The calls to action are tracked text links, the device the comparators use,
   with a single filled button kept for the inquiry form only. */
.tlink{font-size:12px;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid var(--ivory);padding-bottom:4px;transition:color .25s,border-color .25s}
.tlink:hover{color:var(--sage);border-color:var(--sage)}
/* WhatsApp's own mark, shown bare beside the text links and never recoloured.
   Hover feedback is a dip in opacity, since a brand asset cannot change colour. */
/* Start a project and the WhatsApp mark travel as one unit, so on a narrow screen
   they wrap together rather than leaving the glyph alone on a line. */
.hero .btns .pair{display:inline-flex;align-items:center;gap:14px}
.hero .btns .wa{display:inline-flex;align-items:center;line-height:0;padding-bottom:5px;transition:opacity .25s}
.hero .btns .wa img{display:block;width:18px;height:18px}
.hero .btns .wa:hover{opacity:.7}
.show-m{display:none}
@media (max-width:760px){.hide-m{display:none}.show-m{display:inline-block}.hero .btn{padding:15px 22px}}

/* Instagram row: a strip above the footer, lighter than a full section. Six
   squares on desktop, three on a phone, hairline-free so they read as a feed. */
.igrow{padding:clamp(48px,6vw,80px) 0 clamp(56px,7vw,96px);border-top:1px solid var(--stone)}
.igrow .head{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.igrow .handle{font-size:12px;letter-spacing:.06em;color:var(--taupe)}
.igrow .handle:hover{color:var(--sage)}
.igrow .grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:24px}
.igrow .grid a{display:block;aspect-ratio:1;overflow:hidden;background:var(--stone)}
.igrow .grid img{width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.igrow .grid a:hover img{opacity:.85}
.igrow .follow{margin-top:28px}
.igrow .follow .tlink{display:inline-flex;align-items:center;gap:10px;color:var(--espresso);border-color:var(--gold)}
.igrow .follow .igi{width:15px;height:15px;flex:0 0 15px;fill:var(--gold-deep)}
@media (max-width:1000px){.igrow .grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.igrow .grid{gap:8px}}

/* brand statement */
/* A full-bleed linen band, so the statement reads as its own moment rather than
   a second column of text on the same ground as the section that follows. */
.statement{background:var(--ivory);padding:clamp(64px,7.5vw,104px) 0}
.statement .wrap{display:grid;grid-template-columns:.9fr 1px 1.1fr;gap:0 clamp(28px,4vw,64px);align-items:baseline;text-align:start}
.statement p{grid-area:1/1;margin:0;font-size:14px;max-width:none}
.statement .rule{grid-area:1/2;width:1px;height:auto;margin:0;background:var(--gold);align-self:stretch;opacity:.7}
.statement h2{grid-area:1/3;margin:0;max-width:none}
@media (max-width:860px){
.statement .wrap{display:flex;flex-direction:column;text-align:center}
.statement h2{order:1;max-width:22ch;margin:0 auto}
.statement .rule{display:none}
.statement p{order:2;max-width:58ch;margin:36px auto 0}}

/* projects */
.projects{background:var(--linen)}
.projects .label{color:var(--espresso)}
.projects .link{border-color:var(--clay)}
.card.big .im{outline:1px solid var(--clay);outline-offset:8px;margin:9px}
.card:not(.big) .im{outline:1px solid var(--clay);outline-offset:8px;margin:9px}
.card .meta{padding:0 9px}
.projects .head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:44px}
.grid{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:auto auto;gap:28px}
.card{position:relative}
.card.big{grid-row:span 2}
.card .im{position:relative;overflow:hidden;background:var(--stone)}
.card img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
.card.big .im{aspect-ratio:4/5}
.card:not(.big) .im{aspect-ratio:4/3}
.card .meta{margin-top:16px}
.card h3{margin-top:6px}
.mrow{display:flex;justify-content:space-between;align-items:baseline;gap:6px 18px;flex-wrap:wrap}
.vis{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe);white-space:nowrap}
[dir="rtl"] .vis{font-family:var(--arabic);letter-spacing:0}
.card .trow{align-items:center}
.card .trow{margin-top:6px}
.card .trow h3{margin-top:0}
.card .stage{text-align:end}
@media (max-width:600px){.story .label .area{display:none}.card .label .area,.card .label .sep{display:none}.card .mrow:has(.stage) .label{display:none}.card .mrow{gap:4px 14px}.card .stage{text-align:start}.card .meta{margin-top:14px}.card h3{margin-top:4px}}
.card p{margin-top:8px;font-size:13px;color:var(--espresso)}
@media (max-width:760px){.grid{grid-template-columns:1fr}.card.big{grid-row:auto}.card.big .im{aspect-ratio:4/5}.projects .head{flex-direction:column;align-items:flex-start}}

/* services */
/* Sized so the heading breaks after "considered", putting the last word on its
   own second line rather than running to a third. */
.services .intro{max-width:720px;margin-bottom:52px}
.services .intro h2{margin-top:12px}
.svc{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(44px,5vw,72px) 24px}
.svc article{flex:0 0 calc((100% - 48px) / 3)}
.svc article .im{aspect-ratio:1/1;overflow:hidden;position:relative;background:var(--stone);outline:1px solid var(--stone);outline-offset:7px;margin:8px}
.svc article img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
.svc h3{font-size:17px;margin-top:18px;transition:color .3s ease}
.svc article:hover h3{color:var(--clay)}
.svc p{font-size:13px;color:var(--taupe);margin-top:8px}
@media (max-width:1000px){.svc article{flex-basis:calc((100% - 24px) / 2)}}
@media (max-width:620px){
.svc{gap:30px}
.svc article{flex-basis:100%;display:grid;grid-template-columns:40% 1fr;column-gap:20px;align-items:start}
/* The image and the title sit inside the card's link, so the link itself dissolves
   into the grid and lets each of them take its own cell. Without this the link is
   the only grid item and the whole card collapses into the second column. */
.svc article>a{display:contents}
.svc article .im{grid-column:1;grid-row:1 / span 2;margin:8px 0 8px 8px}
.svc article h3{grid-column:2;grid-row:1;font-size:18px;margin-top:6px}
.svc article p{grid-column:2;grid-row:2;font-size:13px}}

/* philosophy */
.phil{background:var(--linen);color:var(--espresso)}
.phil .label{color:var(--taupe)}
.phil h2{max-width:18ch;margin-top:12px}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px;border-top:1px solid var(--stone);padding-top:40px}
.three h3{font-size:17px}
.three p{margin-top:8px;color:var(--taupe);font-size:13px}
.three .n{color:var(--gold)}
@media (max-width:760px){.three{grid-template-columns:1fr;gap:34px}}

/* featured story */
.story .top{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,80px);align-items:stretch}
.story .top .im{aspect-ratio:4/3;position:relative;overflow:hidden;background:var(--stone);outline:1px solid var(--sage);outline-offset:8px;margin:9px}
@media (min-width:861px){.story .top .im{aspect-ratio:auto;height:calc(100% - 18px);min-height:320px}}
.story .top img{width:100%;height:100%;object-fit:cover}
.story h2{margin-top:12px}
.story .seq{margin-top:34px;display:grid;gap:28px}
.story .seq h3{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-family:var(--sans);color:var(--espresso);display:flex;align-items:center;gap:12px}

.story .seq p{margin-top:8px}
.story .gal{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin-top:48px}
.story .gal .im{position:relative;overflow:hidden;aspect-ratio:1/1;background:var(--stone)}
.story .gal img{width:100%;height:100%;object-fit:cover}
.story .gal .im:first-child{aspect-ratio:3/4}
/* On the homepage the three frames sit on one even line. */
.home .story .gal .im:first-child{aspect-ratio:1/1}
@media (max-width:860px){.story .top{grid-template-columns:1fr}.story .gal{grid-template-columns:1fr 1fr}.story .gal .im:first-child{grid-column:span 2;aspect-ratio:3/2}}

/* approach */
.approach{background:var(--stone)}
.approach .label{color:var(--espresso)}
.approach h2{margin-top:12px;max-width:20ch}
.approach .sub{margin-top:14px;color:var(--taupe);font-size:14px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:56px}
.steps div{border-top:1px solid var(--espresso);padding-top:22px}
.steps .n{color:var(--gold-deep)}
.steps h3{font-size:20px}
.steps p{font-size:13px;color:var(--espresso);margin-top:10px}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* testimonial */
.voice{text-align:center}
.voice blockquote{font-family:var(--serif);font-size:clamp(22px,2.4vw,32px);line-height:1.3;max-width:26ch;margin:0 auto}
.voice blockquote:before{content:"\201C";color:var(--sage);display:block;font-size:54px;line-height:.5;margin-bottom:26px}
.voice cite{display:block;font-style:normal;margin-top:30px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--taupe)}
.marks{display:flex;justify-content:center;gap:48px;margin-top:56px;flex-wrap:wrap}
.marks div{text-align:center}
.marks .num{font-family:var(--serif);font-size:28px}
.marks .t{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe);margin-top:4px}

/* guides */
.guides{background:var(--ivory);border-top:1px solid var(--stone)}
.guides .head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:40px}
.gl{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.gl article{border:1px solid var(--stone);padding:34px;transition:border-color .3s}
.gl article:hover{border-color:var(--clay)}
.gl h3{margin-top:12px;font-size:21px}
.gl p{margin-top:12px;color:var(--taupe);font-size:13px}
.gl .link{display:inline-block;margin-top:22px}
@media (max-width:760px){.gl{grid-template-columns:1fr}.guides .head{flex-direction:column;align-items:flex-start}}

/* final cta */
.end{position:relative;color:var(--ivory);isolation:isolate;text-align:center;padding:clamp(96px,14vw,180px) 0}
.end img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.end:after{content:"";position:absolute;inset:0;background:rgba(45,41,38,.7);z-index:-1}
.end h2{max-width:18ch;margin:0 auto}
.end p{margin:22px auto 0;max-width:50ch;color:rgba(250,245,239,.9)}
.end .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:36px}
.end .alt{margin-top:26px;font-size:12.5px;color:rgba(250,245,239,.8)}
.end .alt a{border-bottom:1px solid var(--gold);padding-bottom:3px}

/* footer */
footer{background:var(--charcoal);color:var(--ivory);padding:72px 0 110px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
footer img{height:56px;width:auto}
footer h4{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--clay);font-family:var(--sans);font-weight:400;margin-bottom:16px}
footer ul{list-style:none;display:grid;gap:10px;font-size:13px}
footer .lang{font-family:var(--arabic);font-weight:500}
.fbot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:56px;padding-top:24px;border-top:1px solid rgba(250,245,239,.14);font-size:12px;color:var(--stone)}
@media (max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.fgrid{grid-template-columns:1fr}}

/* sticky mobile CTA */
.sbar{display:none}
@media (max-width:760px){
.sbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:55;align-items:center;justify-content:space-between;gap:14px;background:rgba(250,245,239,.97);border-top:1px solid var(--stone);padding:10px var(--gutter);transform:translateY(110%);transition:transform .35s ease}
.sbar.on{transform:none}
.sbar span{font-family:var(--serif);font-size:14px;color:var(--espresso)}
.sbar a{font-size:11px;letter-spacing:.12em;text-transform:uppercase;background:var(--espresso);color:var(--ivory);padding:12px 16px;white-space:nowrap}}
@media (prefers-reduced-motion:reduce){.sbar{transition:none}}


/* ---------- site chrome ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--espresso);color:var(--ivory);padding:12px 20px}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}
.hide{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.prose h2{margin:44px 0 14px}
.prose h3{margin:32px 0 10px}
.prose p+p{margin-top:18px}
.prose ul,.prose ol{margin:18px 0 18px 22px}
.prose li+li{margin-top:8px}
.status{position:absolute;top:14px;left:14px;z-index:2;background:rgba(45,41,38,.78);color:var(--ivory);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px}

/* ---------- project archive ---------- */
.parchive{padding-top:clamp(120px,14vw,180px)}
.parchive .head{max-width:60ch;margin-bottom:40px}
.parchive h1{margin-top:12px}
.parchive .sub{margin-top:16px;color:var(--taupe)}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:44px}
.filters a{font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:10px 18px;border:1px solid var(--stone)}
.filters a{color:var(--taupe);transition:color .25s,border-color .25s}
.filters a.on,.filters a:hover{border-color:var(--espresso);color:var(--espresso)}
nav.filters a:not(.cta)::after{display:none}
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:48px 40px}
@media (max-width:760px){.pgrid{grid-template-columns:1fr;gap:40px}}
.pagination{margin-top:56px;display:flex;gap:12px;justify-content:center}
.pagination .page-numbers{padding:10px 16px;border:1px solid var(--stone)}
.pagination .current{border-color:var(--espresso)}

/* ---------- project case study ---------- */
.phero{padding-top:clamp(70px,8vw,92px)}
.phero .im{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--stone)}
.phero .im img{width:100%;height:100%;object-fit:cover}
.phero .wrap{padding-top:clamp(36px,5vw,64px)}
.phero h1{margin-top:12px;max-width:18ch}
.pcols{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(32px,5vw,72px);align-items:start}
@media (max-width:860px){.pcols{grid-template-columns:1fr;gap:36px}}
.pintro{padding-top:clamp(40px,5vw,64px)}
.facts dl{border-top:1px solid var(--stone)}
.facts dt{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe);padding-top:16px}
.facts dd{padding-bottom:16px;border-bottom:1px solid var(--stone)}
.pbrief{background:var(--linen)}
.pbrief h2{font-size:clamp(18px,1.6vw,23px)}
.mattered{list-style:none;margin-top:16px}
.mattered li{padding:14px 0 14px 26px;border-bottom:1px solid var(--stone);position:relative}
.mattered li:before{content:"";position:absolute;left:0;top:23px;width:12px;height:1px;background:var(--gold-deep)}
.presponse .prose{margin-top:18px;max-width:64ch}
.pgallery .wrap{display:flex;flex-direction:column;gap:24px}
.pgallery .grow{display:flex;gap:24px;align-items:flex-start}
.pgallery figure{min-width:0;margin:0;flex-basis:0}
.pgallery .grow.solo{justify-content:center}
.pgallery .grow.solo figure{flex:0 1 calc(50% - 12px)}
.pgallery img{display:block;width:100%;height:auto}
.pgallery figcaption{font-size:12.5px;color:var(--taupe);margin-top:10px}
@media (max-width:620px){.pgallery .grow{flex-direction:column}.pgallery .grow figure,.pgallery .grow.solo figure{flex:none;width:100%}}
.pdetails{background:var(--linen)}
.dgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:40px}
.dgrid .im{aspect-ratio:1/1;overflow:hidden;background:var(--stone);margin-bottom:16px}
.dgrid img{width:100%;height:100%;object-fit:cover}
.dgrid h3{font-size:18px}
.dgrid p{font-size:13px;color:var(--espresso);margin-top:8px}
@media (max-width:900px){.dgrid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.dgrid{grid-template-columns:1fr}}
.poutcome{text-align:center}
.poutcome .lead{font-size:clamp(16px,1.5vw,20px);max-width:56ch;margin:0 auto}
.poutcome blockquote{font-family:var(--serif);font-size:clamp(20px,2.2vw,28px);line-height:1.3;max-width:28ch;margin:48px auto 0}
.poutcome cite{display:block;font-style:normal;margin-top:22px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--taupe)}
.pnext{border-top:1px solid var(--stone)}
.pnext .rel{margin-bottom:44px}
.pnext .rel h2{margin-top:8px;font-size:clamp(21px,2.2vw,29px)}
.pnext .cta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:36px 0;border-top:1px solid var(--stone);border-bottom:1px solid var(--stone)}
.pnext .cta h2{font-size:clamp(20px,2vw,26px)}
.nextp{display:flex;flex-direction:column;gap:8px;margin-top:36px}
.nextp .serif{font-size:clamp(20px,2vw,26px)}

/* ---------- service ---------- */
.shero .wrap{padding-top:clamp(120px,14vw,180px);padding-bottom:clamp(32px,4vw,56px)}
.shero h1{margin-top:12px;max-width:16ch}
.shero .lead{margin-top:20px;font-size:clamp(16px,1.4vw,19px);font-family:var(--serif);max-width:44ch}
.shero .im{aspect-ratio:21/9;overflow:hidden;background:var(--stone)}
.shero .im img{width:100%;height:100%;object-fit:cover}
/* With no hero photograph the space either side of it would read as a hole. */
.service.noimage .shero .wrap{padding-bottom:0}
.service.noimage .sbody{padding-top:clamp(28px,3vw,44px)}
.sscope{background:var(--linen)}
.sscope h2{font-size:clamp(18px,1.6vw,23px);margin-bottom:12px}
.ticks{list-style:none}
.ticks li{padding:12px 0 12px 26px;position:relative;border-bottom:1px solid var(--stone)}
.ticks li:before{content:"";position:absolute;left:0;top:21px;width:12px;height:1px;background:var(--gold-deep)}
.ticks.out li:before{background:var(--taupe)}
.sfaq details{border-bottom:1px solid var(--stone);padding:22px 0}
.sfaq summary{font-family:var(--serif);font-size:clamp(16px,1.5vw,20px);cursor:pointer;list-style:none}
.sfaq summary::-webkit-details-marker{display:none}
.sfaq summary:after{content:"+";float:right;color:var(--gold-deep)}
.sfaq details[open] summary:after{content:"\2212"}
.sfaq p{margin-top:14px;max-width:64ch}
.srel{padding-block:clamp(56px,7vw,96px)}
.srel ul{list-style:none;margin-top:22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 clamp(24px,3vw,48px)}
.srel li{border-top:1px solid var(--stone)}
.srel a{display:flex;flex-direction:column;gap:6px;padding:20px 0 24px;color:var(--espresso)}
.srel .t{font-family:var(--serif);font-size:clamp(18px,1.6vw,21px);line-height:1.25}
.srel .d{font-size:13px;color:var(--taupe)}
.srel a:hover .t,.srel a:focus-visible .t{color:var(--gold-deep)}
.send{text-align:center;background:var(--stone)}
.send h2{margin-bottom:28px}

/* ---------- start a project ---------- */
.start{padding-top:clamp(120px,14vw,180px)}
.start .shead{max-width:54ch;margin-bottom:48px}
.start h1{font-size:clamp(27px,3.3vw,42px)}
.start .shead p{margin-top:18px}
.scols{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(32px,5vw,72px);align-items:start}
@media (max-width:860px){.scols{grid-template-columns:1fr}}
.inquiry p{max-width:none;margin-bottom:22px}
.inquiry label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe);margin-bottom:8px}
.inquiry label span{color:var(--gold-deep)}
.inquiry .fnote{display:block;margin-top:8px;font-size:12px;color:var(--taupe)}
.inquiry .reply{margin-top:14px;font-size:13px;color:var(--taupe)}
.inquiry input[type=text],.inquiry input[type=email],.inquiry input[type=tel],.inquiry select,.inquiry textarea{width:100%;font-family:var(--sans);font-size:16px;color:var(--espresso);background:transparent;border:1px solid var(--stone);padding:14px 16px;border-radius:0}
.inquiry textarea{resize:vertical}
.inquiry input:focus,.inquiry select:focus,.inquiry textarea:focus{border-color:var(--gold-deep);outline:none}
.inquiry .optional{border:0;border-top:1px solid var(--stone);padding-top:28px;margin:34px 0 28px}
.inquiry legend{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe);padding-right:12px}
.inquiry .check{display:flex;align-items:center;gap:10px}
.inquiry .check input{width:20px;height:20px}
.inquiry .check label{margin:0;text-transform:none;letter-spacing:0;font-size:15px;color:var(--espresso)}
/* Consent sits quietly above the button: smaller, taupe, the box aligned to the first line. */
.inquiry .check.consent{align-items:flex-start;margin-top:28px}
.inquiry .check.consent input{flex:0 0 18px;width:18px;height:18px;margin-top:2px}
.inquiry .check.consent label{font-size:13px;line-height:1.6;color:var(--taupe)}
.inquiry .check.consent a{color:var(--espresso);border-bottom:1px solid var(--gold)}
.inquiry button{border:0;cursor:pointer;font-family:var(--sans)}
.hp{position:absolute;left:-9999px}
/* Stepped form: a quiet card, one question at a time */
.inquiry.stepped{max-width:560px;background:var(--ivory);border:1px solid var(--stone);padding:26px 28px 22px}
.inquiry.stepped .shead2{display:flex;justify-content:space-between;align-items:baseline}
.inquiry.stepped .count{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--taupe)}
.inquiry.stepped .bar{display:block;height:1px;background:var(--stone);margin:14px 0 22px;position:relative}
.inquiry.stepped .bar i{display:block}
.inquiry.stepped .bar i{position:absolute;left:0;top:-1px;height:3px;background:var(--gold);transition:width .3s}
.inquiry.stepped .step{border:0;padding:0;margin:0;min-width:0}
.inquiry.stepped .q{font-family:var(--serif);font-size:24px;line-height:1.2;color:var(--espresso);margin-bottom:14px;padding:0;text-transform:none;letter-spacing:0}
.inquiry.stepped .rows{display:flex;flex-direction:column}
.inquiry.stepped .row{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:52px;padding:0 4px 0 0;border-top:1px solid var(--stone);margin:0;font-family:var(--serif);font-size:17px;letter-spacing:0;text-transform:none;color:var(--espresso);cursor:pointer;transition:background .2s,padding .2s}
.inquiry.stepped .row:last-child{border-bottom:1px solid var(--stone)}
.inquiry.stepped .row input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.inquiry.stepped .row span{color:var(--espresso)}
.inquiry.stepped .row .arr{color:var(--gold);font-size:18px;transition:transform .2s}
.inquiry.stepped .row:hover{background:rgba(231,215,194,.45)}
.inquiry.stepped .row:hover .arr{transform:translateX(4px)}
.inquiry.stepped .row:has(input:checked){background:var(--linen);padding-left:12px}
.inquiry.stepped .row:has(input:checked) .arr{color:var(--espresso)}
.inquiry.stepped .row:has(input:focus-visible){outline:2px solid var(--gold-deep);outline-offset:2px}
.inquiry.stepped .last p{margin-bottom:16px}
.inquiry.stepped .last label{margin-bottom:4px}
.inquiry.stepped .last input[type=text],.inquiry.stepped .last input[type=email],.inquiry.stepped .last input[type=tel],.inquiry.stepped .last textarea{border:0;border-bottom:1px solid var(--taupe);padding:10px 0;font-family:var(--serif);font-size:18px}
.inquiry.stepped .last textarea{font-size:16px;font-family:var(--sans)}
.inquiry.stepped .last input[type=file]{font-size:13px;color:var(--taupe)}
.inquiry.stepped .check.consent{margin-top:16px;margin-bottom:20px}
.inquiry.stepped .btn{width:100%;text-align:center}
.inquiry.stepped .reply{text-align:center}
.inquiry.stepped .sfoot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;min-height:28px}
.inquiry.stepped .back{background:none;border:0;padding:0;min-height:44px;font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);cursor:pointer}
.inquiry.stepped .wal{margin-left:auto;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--espresso);border-bottom:1px solid var(--gold);padding-bottom:3px}
.inquiry.stepped .step[hidden]{display:none}
@media (max-width:600px){.inquiry.stepped{padding:22px 18px 18px}.inquiry.stepped .q{font-size:22px}}

.schannels{background:var(--linen);padding:34px}
.schannels h2{font-size:20px;margin-bottom:12px}
.schannels h2+p{margin-bottom:28px}
.schannels ul{list-style:none;display:grid;gap:12px}
/* Thank-you after an enquiry: a face, a warm line, and what happens next */
.start.sent{padding-bottom:clamp(64px,8vw,120px)}
.thanks{max-width:640px}
.thanks h1{font-size:clamp(28px,3.4vw,44px);margin:12px 0 18px;text-wrap:balance}
.thanks .tt > p{max-width:48ch;color:var(--espresso)}
.thanks ol{list-style:none;margin:28px 0 0;padding:0;max-width:48ch}
.thanks li{display:flex;gap:16px;align-items:baseline;padding:12px 0;border-top:1px solid var(--stone);font-family:var(--serif);font-size:18px}
.thanks li:last-child{border-bottom:1px solid var(--stone)}
.thanks li .no{font-family:var(--serif);font-style:italic;color:var(--gold-deep);font-size:14px;flex:0 0 28px}
.thanks .acts{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;margin-top:32px}
.thanks .acts .tlink{color:var(--espresso);border-color:var(--gold)}

.note{padding:28px 32px;margin-bottom:36px}
.note.ok{background:var(--linen)}
.note.ok h2{margin-bottom:12px}
.note.warn{background:var(--stone)}

/* ---------- page, listing, 404 ---------- */
.phead{padding:clamp(120px,14vw,180px) 0 clamp(24px,3vw,40px)}
.phead h1{max-width:18ch}
.pimage{aspect-ratio:21/9;overflow:hidden;background:var(--stone);margin-bottom:clamp(40px,5vw,72px)}
.pimage img{width:100%;height:100%;object-fit:cover}
/* Running prose sits in one centred reading column, never a narrow strip
   beside empty space. Anywhere a section is mostly words, constrain the
   container rather than capping each paragraph inside a wide one. */
.page .prose,
.shero .wrap,
.sbody .wrap,
.sscope .wrap,
.sfaq .wrap,
.presponse .wrap{max-width:var(--read)}
.page .prose p,.page .prose ul,.page .prose ol,
.sbody p,.sfaq p,.presponse .prose,.presponse p{max-width:none}
.page .prose{padding-bottom:clamp(64px,9vw,128px)}
.page .phead .wrap{max-width:var(--read)}

/* ---------- about: promise, vision and mission, values ---------- */
.about .phead{padding-bottom:clamp(32px,4vw,56px)}
.about .phead .wrap{max-width:var(--max)}
.founders{padding:0 0 clamp(72px,9vw,128px)}
.founders h2{margin-top:12px}
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,300px));justify-content:center;gap:48px clamp(32px,5vw,80px);margin-top:52px;text-align:center}
.person{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:0;align-content:start}
.portrait{width:clamp(160px,16vw,220px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--linen);margin:8px auto 0;outline:1px solid var(--stone);outline-offset:7px}
.portrait img{width:100%;height:100%;object-fit:cover;display:block}
.person h3{font-size:19px;margin-top:30px}
.person .role{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin-top:8px}
.person p{margin:14px auto 0;font-size:13px;color:var(--taupe);max-width:34ch;text-align:start}
.founders .note{max-width:var(--read);margin:24px auto 0;text-align:center}
.story{padding:0 0 clamp(64px,8vw,112px)}
/* On the homepage the story is its own band, with the same spacing as every other section. */
.home section.story{padding:clamp(64px,9vw,128px) 0}
.story .prose{padding-top:clamp(40px,5vw,72px)}

/* ---------- film: still frame, one play mark, sound on tap ---------- */
.film{display:grid;gap:clamp(28px,4vw,56px);align-items:center;margin:clamp(48px,6vw,80px) 0;max-width:none}
.film.tall{grid-template-columns:minmax(0,340px) 1fr}
.film.wide{grid-template-columns:1fr}
.pfilm .film{margin:clamp(24px,4vw,48px) 0 clamp(40px,5vw,64px)}
.film .frame{position:relative;overflow:hidden;background:var(--charcoal);outline:1px solid var(--stone);outline-offset:7px;margin:8px}
.film video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:auto!important}
.film .play{position:absolute;inset:0;width:100%;height:100%;background:linear-gradient(to top,rgba(45,41,38,.28),rgba(45,41,38,0) 45%);border:0;cursor:pointer;display:grid;place-items:center;transition:opacity .4s}
.film .play span{width:64px;height:64px;border:1px solid rgba(250,245,239,.85);border-radius:50%;display:grid;place-items:center;background:rgba(45,41,38,.25);backdrop-filter:blur(2px);transition:background .25s,border-color .25s}
.film .play span::after{content:"";display:block;width:0;height:0;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent var(--ivory);margin-inline-start:4px}
.film .play:hover span{border-color:var(--sage);background:rgba(138,145,129,.35)}
.film.playing .play{opacity:0;pointer-events:none}
.film figcaption{text-align:start}
.film figcaption h2{margin:12px 0 0;max-width:16ch}
.film figcaption p{margin-top:16px;color:var(--taupe);max-width:40ch}
.film.wide figcaption{max-width:var(--read)}
@media (max-width:760px){.film.tall{grid-template-columns:1fr} .film.tall .frame{max-width:320px;margin-inline:auto} .film figcaption{text-align:center} .film figcaption h2,.film figcaption p{margin-inline:auto}}
.story .pimage{margin:0 0 clamp(40px,5vw,72px)}
@media (max-width:620px){.people{grid-template-columns:minmax(0,300px);gap:44px;margin-top:40px}}
.promise{background:var(--linen);padding:clamp(64px,7.5vw,104px) 0;text-align:center}
.promise .line{font-family:var(--serif);font-size:clamp(22px,2.3vw,32px);line-height:1.3;letter-spacing:-.005em;max-width:30ch;margin:18px auto 0}
.vm{padding:clamp(64px,7.5vw,104px) 0}
.vm .wrap{display:grid;grid-template-columns:1fr 1px 1fr;gap:0 clamp(28px,4vw,64px);align-items:start}
.vm .rule{display:block;width:1px;height:auto;margin:0;background:var(--gold);align-self:stretch;opacity:.7}
.vm p{font-family:var(--serif);font-size:clamp(18px,1.5vw,21px);line-height:1.45;margin-top:14px;max-width:none}
.values{padding:0 0 clamp(72px,9vw,128px)}
.values h2{max-width:20ch;margin-top:12px}
.vgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:48px;border-top:1px solid var(--stone);padding-top:40px}
.vgrid h3{font-size:17px}
.vgrid p{margin-top:8px;color:var(--taupe);font-size:13px}
.vgrid .n{color:var(--gold)}
@media (max-width:1000px){.vgrid{grid-template-columns:repeat(2,1fr);gap:36px 28px}}
@media (max-width:760px){
.vm .wrap{display:block}
.vm .rule{width:56px;height:1px;margin:36px 0;opacity:1}
.vgrid{grid-template-columns:1fr;gap:34px}}
.listing{padding-top:clamp(120px,14vw,180px)}
.listing h1{margin-bottom:44px}
.notfound{padding:clamp(140px,18vw,220px) 0;text-align:center}
.notfound p{margin:18px auto 0}
.notfound .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:36px}

/* ---------- menus from WordPress ---------- */
nav ul li.current-menu-item>a{border-bottom:1px solid currentColor;padding-bottom:3px}
footer ul{list-style:none}
.fbot ul{display:flex;gap:18px;list-style:none}
.fbot a{color:var(--stone)}.fbot a:hover{color:var(--ivory)}
.fnote{margin-top:14px;font-size:12px;color:var(--taupe)}.fnote a{color:var(--espresso);border-bottom:1px solid var(--gold)}

/* reveal */
.r{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s ease}
.r.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.r{opacity:1;transform:none;transition:none}.card img{transition:none}html{scroll-behavior:auto}}