/* Fikra Digital: centralized design and motion tokens. */
:root {
    --paper:#f7f5ef;
    --white:#fffefa;
    --ink:#22241f;
    --muted:#686a61;
    --gold:#e4a331;
    --gold-light:#f4c669;
    --line:#deded3;
    --olive:#3c4935;
    --peach:#ebd2c1;
    --ease:cubic-bezier(.22,1,.36,1);
    --fast:220ms;
    --reveal:800ms;
    --wrap:1320px
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth;
    scroll-padding-top:110px
}
body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:Manrope,Arial,sans-serif;
    font-size:15px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased
}
body.dialog-open {
    overflow:hidden
}
h1,h2,h3,p {
    margin:0
}
h1,h2,h3 {
    line-height:1.05;
    font-weight:500;
    letter-spacing:-.055em
}
h2 {
    font-size:clamp(40px,4.55vw,66px)
}
em {
    font-family:Georgia,"Times New Roman",serif;
    font-weight:400
}
a {
    color:inherit;
    text-decoration:none
}
button,input,textarea,select {
    font:inherit;
    color:inherit
}
button {
    cursor:pointer;
    border:0
}
button,a {
    touch-action:manipulation
}
img {
    display:block;
    max-width:100%;
    height:auto
}
svg {
    display:block
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
    outline:3px solid #af6b0d;
    outline-offset:5px
}
::selection {
    background:var(--gold-light);
    color:var(--ink)
}
[hidden] {
    display:none!important
}
.wrap {
    width:min(var(--wrap),calc(100% - 112px));
    margin-inline:auto
}
.section-pad {
    padding-block:110px
}
.eyebrow,.section-label,.art-label {
    font-size:10px;
    letter-spacing:.14em;
    font-weight:700;
    line-height:1.5
}
.eyebrow {
    margin-bottom:25px
}
.icon {
    flex-shrink:0
}
.arabic {
    font-family:"Noto Sans Arabic",Tahoma,Arial,sans-serif;
    letter-spacing:0
}
.skip-link {
    position:fixed;
    z-index:100;
    top:10px;
    left:15px;
    padding:10px 20px;
    background:var(--ink);
    color:white;
    transform:translateY(-150%)
}
.skip-link:focus {
    transform:none
}
.reading-progress {
    position:fixed;
    inset:0 0 auto;
    height:2px;
    background:var(--gold);
    transform:scaleX(0);
    transform-origin:left;
    z-index:101;
    pointer-events:none
}
.site-header {
    position:sticky;
    top:0;
    z-index:30;
    background:rgba(247,245,239,.96);
    border-bottom:1px solid var(--line)
}
.nav {
    height:96px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px
}
.brand {
    flex-shrink:0;
    width:124px
}
.nav-logo {
    width:124px;
    height:76px;
    object-fit:contain;
    mix-blend-mode:multiply
}
.nav-menu {
    display:flex;
    align-items:center;
    gap:32px
}
.nav-menu>a {
    font-size:12px;
    font-weight:600;
    white-space:nowrap
}
.nav-menu>a:not(.button) {
    position:relative
}
.nav-menu>a:not(.button):after {
    content:"";
    position:absolute;
    bottom:-8px;
    left:0;
    right:0;
    height:1px;
    background:var(--ink);
    transform:scaleX(0);
    transform-origin:right;
    transition:transform var(--fast) var(--ease)
}
.nav-menu>a:hover:after,.nav-menu>a.is-active:after {
    transform:scaleX(1);
    transform-origin:left
}
.nav-instagram {
    padding:10px
}
.menu-toggle {
    display:none
}
.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:28px;
    min-height:54px;
    padding:15px 23px;
    border-radius:5px;
    font-size:12px;
    font-weight:600;
    line-height:1.4;
    transition:background var(--fast),box-shadow var(--fast),transform var(--fast) var(--ease)
}
.button-dark {
    background:var(--ink);
    color:var(--white)
}
.button-dark:hover {
    background:#414537;
    box-shadow:0 6px 16px #22241f12
}
.button .icon {
    width:17px;
    height:17px;
    transition:transform var(--fast) var(--ease)
}
.button:hover .icon {
    transform:translate(2px,-2px)
}
.nav-cta {
    min-height:44px;
    padding:12px 18px;
    gap:25px
}
.text-link {
    font-size:12px;
    font-weight:600;
    display:inline-flex;
    align-items:center;
    gap:15px;
    line-height:1.5;
    padding-block:8px
}
.text-link span,.text-link .icon {
    transition:transform var(--fast) var(--ease)
}
.text-link:hover span,.text-link:hover .icon {
    transform:translate(3px,-3px)
}
.hero {
    position:relative;
    overflow:clip
}
.hero-grid {
    display:grid;
    grid-template-columns:1.08fr 1fr;
    align-items:center;
    min-height:684px;
    gap:14px
}
.hero-copy {
    position:relative;
    z-index:2;
    padding-block:58px
}
.hero .eyebrow {
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:27px
}
.status-dot {
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--gold);
    box-shadow:0 0 0 4px #e4a33116
}
h1 {
    font-size:clamp(65px,7.65vw,112px);
    letter-spacing:-.071em;
    line-height:1.03
}
.line-mask {
    display:block;
    overflow:clip;
    padding-bottom:.095em;
    margin-bottom:-.095em
}
.line-mask>span {
    display:block
}
.hero h1 em {
    color:#a16b22;
    letter-spacing:-.07em
}
.title-spark {
    width:.6em;
    height:.6em;
    display:inline-block;
    margin-left:.28em;
    color:var(--gold);
    vertical-align:middle;
    transform:rotate(11deg)
}
.hero-lead {
    font-size:14px;
    line-height:1.85;
    color:var(--muted);
    margin-top:27px;
    max-width:445px
}
.hero-actions {
    display:flex;
    align-items:center;
    gap:27px;
    margin-top:28px
}
.hero-note {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:10px;
    color:var(--muted);
    margin-top:40px
}
.hero-note .arabic {
    border-left:1px solid var(--line);
    padding-left:12px;
    font-size:12px
}
.small-spark {
    color:#a16b22;
    font-size:18px
}
.hero-art {
    height:610px;
    position:relative;
    min-width:0;
    isolation:isolate
}
.spark-thread {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:-1
}
.thread-base {
    stroke-dasharray:1600;
    stroke-dashoffset:0
}
.art-label {
    position:absolute;
    color:var(--muted);
    font-size:8px;
    letter-spacing:.12em
}
.label-top {
    top:50px;
    left:37%;
    display:flex;
    gap:20px;
    align-items:center
}
.label-top span:last-child {
    font-size:22px;
    font-weight:400
}
.label-bottom {
    bottom:11px;
    left:12%;
    font-size:7px;
    letter-spacing:.15em
}
.hero-preview {
    position:absolute;
    box-shadow:0 20px 50px #272c2516;
    transform:translateY(var(--parallax,0px)) rotate(var(--rotation,0deg))
}
.hero-website {
    width:82%;
    top:106px;
    left:4%;
    --rotation:-7deg;
    z-index:1;
    border-radius:7px;
    overflow:hidden
}
.hero-invite {
    width:36%;
    top:310px;
    left:1%;
    --rotation:-12deg;
    z-index:3
}
.hero-menu {
    width:37%;
    top:281px;
    right:0;
    --rotation:9deg;
    z-index:2;
    border-radius:13px;
    border:6px solid #30382d;
    overflow:hidden
}
.art-spark {
    position:absolute;
    right:12%;
    top:49px;
    color:var(--gold);
    font-size:105px;
    line-height:1;
    transform:rotate(-13deg);
    z-index:2
}
.hero-bottom {
    border-top:1px solid var(--line);
    padding-block:21px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    font-size:9px;
    letter-spacing:.07em
}
.hero-bottom .concept-note {
    color:var(--muted);
    letter-spacing:0
}
.hero-bottom>a {
    display:flex;
    align-items:center;
    gap:16px;
    letter-spacing:0;
    font-size:10px
}
.hero-bottom .icon {
    height:17px
}
.demo-website {
    background:#f6f1e6;
    color:#34392c;
    container-type:inline-size;
    text-align:left;
    transition:background 500ms,color 500ms
}
.browser-bar {
    height:25px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 12px;
    background:#fffdf6;
    border-bottom:1px solid #d8d7ca;
    color:#6e7064;
    font-size:8px
}
.browser-bar>span:first-child {
    display:flex;
    gap:3px
}
.browser-bar i {
    width:4px;
    height:4px;
    border:1px solid #b8b9ab;
    border-radius:50%
}
.browser-bar small {
    font-size:6px
}
.demo-web-content {
    padding:20px 23px 15px
}
.demo-web-nav {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    font-size:6px
}
.demo-web-nav b {
    font-size:20px;
    letter-spacing:-1px;
    line-height:1
}
.demo-web-nav b span {
    font-size:7px;
    vertical-align:top;
    letter-spacing:0;
    margin-left:3px
}
.demo-web-grid {
    display:grid;
    grid-template-columns:1.05fr 1fr;
    align-items:center;
    margin-top:25px;
    gap:15px
}
.demo-web-grid small {
    font-size:6px;
    letter-spacing:1px
}
.demo-web-grid h3 {
    font-size:clamp(25px,7.7cqi,75px);
    line-height:1.02;
    margin:12px 0 20px;
    letter-spacing:-.05em
}
.demo-web-grid img {
    width:100%;
    height:100%;
    object-fit:cover
}
.demo-pill {
    display:inline-block;
    font-size:6px;
    padding:8px 11px;
    border:1px solid #bec1ae;
    border-radius:30px;
    white-space:nowrap
}
.demo-web-bottom {
    display:flex;
    justify-content:space-between;
    gap:10px;
    font-size:5px;
    border-top:1px solid #d1d3c3;
    padding-top:11px;
    margin-top:20px
}
.demo-invitation {
    background:#f4e5d6;
    color:#6d3a29;
    padding:16px;
    text-align:center;
    container-type:inline-size
}
.invite-border {
    border:1px solid #ad806858;
    padding:20px 10px 17px;
    position:relative
}
.invite-flower {
    font-size:37px;
    line-height:1;
    color:#a77451;
    display:block;
    margin-bottom:17px
}
.invite-border>small {
    display:block;
    font-size:4.8px;
    letter-spacing:1.1px
}
.invite-border h3 {
    font-family:Georgia,serif;
    font-size:clamp(22px,15cqi,54px);
    line-height:1.05;
    letter-spacing:-.05em;
    margin-top:18px
}
.invite-rule {
    width:25px;
    height:1px;
    background:#b18c70;
    margin:16px auto
}
.invite-border p {
    font-size:7px;
    line-height:1.8;
    letter-spacing:.3px
}
.invite-date {
    display:block;
    letter-spacing:1.7px;
    font-size:6px;
    margin-top:16px
}
.invite-bottom {
    display:block;
    font-size:4px;
    letter-spacing:1px;
    margin-top:18px
}
.demo-menu {
    background:#e7e9db;
    color:#33402f;
    text-align:left;
    padding:22px 17px 15px;
    container-type:inline-size
}
.menu-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:4.5px;
    letter-spacing:1px
}
.menu-heading>span:last-child {
    font-size:14px
}
.demo-menu h3 {
    font-family:Georgia,serif;
    font-size:clamp(30px,25cqi,62px);
    line-height:.9;
    letter-spacing:-.06em;
    margin-top:18px
}
.demo-menu h3>span {
    font-style:italic;
    color:#6a775a
}
.demo-menu>p {
    font-size:6px;
    margin-top:10px
}
.menu-categories {
    display:flex;
    align-items:center;
    gap:4px;
    margin-top:20px;
    padding-bottom:12px;
    border-bottom:1px solid #bfc6ae
}
.menu-categories>span,.menu-categories>button {
    font-size:6px;
    padding:5px 8px;
    border-radius:20px;
    background:transparent
}
.menu-categories>.selected,.menu-categories>[aria-pressed=true] {
    background:#36432f;
    color:#f6f6e9
}
.menu-items>div {
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:12px 0;
    border-bottom:1px solid #c8cdbb
}
.menu-items b {
    font-size:7px;
    font-weight:600;
    display:block
}
.menu-items small {
    display:block;
    font-size:5px;
    margin-top:3px;
    color:#59634e
}
.menu-items>div>span:last-child {
    font-size:7px
}
.menu-foot {
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:5px;
    margin-top:14px
}
.menu-foot>span:last-child {
    font-size:15px
}
.studio-section {
    background:#eeeee5;
    border-block:1px solid var(--line)
}
.studio-grid {
    display:grid;
    grid-template-columns:.65fr 2fr;
    gap:45px
}
.section-label {
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:flex-start
}
.studio-star {
    color:#9c792e;
    font-size:100px;
    font-weight:400;
    line-height:1
}
.statement {
    font-size:clamp(40px,5.2vw,73px);
    line-height:1.12
}
.underlined {
    position:relative;
    white-space:nowrap
}
.underlined:after {
    content:"";
    position:absolute;
    bottom:-3px;
    left:-4px;
    width:100%;
    height:8px;
    border-top:2px solid var(--gold);
    border-radius:50%;
    transform:rotate(-3deg)
}
.studio-description {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    max-width:750px;
    margin-top:38px;
    color:var(--muted);
    font-size:14px;
    line-height:1.9
}
.studio-signoff {
    border-top:1px solid #d6d7cb;
    margin-top:34px;
    padding-top:20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px
}
.studio-signoff>span:first-child {
    font-size:8px;
    letter-spacing:.11em
}
.studio-signoff .arabic {
    font-size:16px;
    color:#737561
}
.section-heading {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:40px;
    margin-bottom:55px
}
.section-heading>p,.section-heading>div>p:not(.eyebrow) {
    font-size:13px;
    line-height:1.9;
    max-width:310px;
    color:var(--muted);
    margin-bottom:4px
}
.services-layout {
    display:grid;
    grid-template-columns:1fr 1.07fr;
    gap:75px;
    align-items:start
}
.service-art {
    background:#e8e8df;
    padding:26px;
    position:sticky;
    top:126px;
    min-height:460px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    border-radius:2px
}
.service-art-caption,.service-art-footer {
    display:flex;
    justify-content:space-between;
    font-size:7px;
    letter-spacing:.11em;
    gap:10px
}
.service-art-caption>span:last-child {
    font-size:16px
}
.service-art-footer {
    color:var(--muted);
    margin-top:25px;
    font-size:6px
}
.service-preview {
    margin-top:30px
}
.service-preview .demo-website {
    box-shadow:0 15px 30px #2e372a12;
    transform:rotate(-3deg);
    margin:10px 3px
}
.service-preview .demo-invitation {
    max-width:235px;
    margin:auto;
    transform:rotate(-5deg)
}
.service-preview .demo-menu {
    max-width:225px;
    margin:auto;
    border:5px solid #34412e;
    border-radius:15px
}
.service-row {
    border-bottom:1px solid var(--line)
}
.service-row:first-child {
    border-top:1px solid var(--line)
}
.service-row summary {
    list-style:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:24px;
    min-height:82px;
    padding:19px 0
}
.service-row summary::-webkit-details-marker {
    display:none
}
.service-number {
    font-size:10px;
    color:var(--muted);
    width:18px
}
.service-row h3 {
    font-size:24px;
    letter-spacing:-.045em;
    flex:1
}
.service-plus {
    font-size:22px;
    font-weight:400;
    transition:transform 400ms var(--ease);
    line-height:1
}
.service-row[open] .service-plus {
    transform:rotate(45deg);
    color:#956621
}
.service-row[open] h3 {
    color:#886022
}
.service-body {
    padding:0 35px 22px 42px
}
.service-body p {
    font-size:13px;
    color:var(--muted);
    line-height:1.85;
    margin-bottom:10px
}
.brand-study>span,.code-study>span,.product-study>span {
    font-size:8px;
    letter-spacing:.1em
}
.brand-study strong {
    font-size:75px;
    line-height:.95;
    letter-spacing:-.07em;
    display:block;
    margin-top:26px;
    font-weight:500
}
.brand-study em {
    color:#ae7e2f
}
.swatches {
    display:flex;
    margin-top:25px
}
.swatches i {
    width:25%;
    height:35px;
    background:#3b4633
}
.swatches i:nth-child(2) {
    background:#e5a238
}
.swatches i:nth-child(3) {
    background:#d1b3a1
}
.swatches i:nth-child(4) {
    background:#f7f5ef
}
.code-window {
    background:#252c23;
    color:#d7dda9;
    padding:25px;
    margin-top:20px;
    transform:rotate(-3deg)
}
.code-window i {
    width:5px;
    height:5px;
    display:inline-block;
    background:#e6b85c;
    border-radius:50%;
    margin-right:4px
}
.code-window p {
    font-family:monospace;
    font-size:16px;
    line-height:1.9;
    margin-top:20px
}
.code-study>strong {
    display:block;
    font-size:25px;
    letter-spacing:-.04em;
    line-height:1.2;
    margin-top:25px
}
.product-stack {
    position:relative;
    height:285px;
    margin-top:35px
}
.product-stack>span {
    position:absolute;
    width:65%;
    height:225px;
    background:#536047;
    padding:25px;
    font-family:Georgia,serif;
    font-size:75px;
    line-height:1.3;
    color:#fbf2d5;
    box-shadow:0 10px 25px #21281c12;
    transform:rotate(-12deg)
}
.product-stack>span:nth-child(2) {
    left:16%;
    background:#e6af4a;
    transform:rotate(1deg);
    color:#413d2b
}
.product-stack>span:nth-child(3) {
    left:32%;
    background:#edcfbc;
    transform:rotate(12deg);
    color:#704a39
}
.product-stack small {
    font-family:Manrope,Arial,sans-serif;
    font-size:9px;
    letter-spacing:1px
}
.work-section {
    background:var(--white);
    border-top:1px solid var(--line)
}
.work-section h2 em {
    color:#777d6a
}
.work-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px 30px
}
.project {
    min-width:0
}
.project-wide {
    grid-column:1/-1
}
.project-visual {
    position:relative;
    width:100%;
    height:490px;
    overflow:hidden;
    display:block;
    border-radius:3px;
    text-align:left;
    padding:0;
    isolation:isolate
}
.project-tag {
    position:absolute;
    top:24px;
    left:26px;
    font-size:8px;
    letter-spacing:.12em;
    z-index:2
}
.project-forma {
    background:#dedfd2;
    height:555px
}
.project-forma:before {
    content:"FORMA";
    position:absolute;
    left:4%;
    top:75px;
    letter-spacing:-.08em;
    font-size:clamp(100px,23vw,330px);
    font-weight:600;
    line-height:1;
    color:#c5c9b8;
    z-index:-1
}
.project-browser {
    width:66%;
    max-width:740px;
    margin:70px auto -30px;
    transform:rotate(-3deg);
    box-shadow:0 20px 45px #36452e20;
    transition:transform 900ms var(--ease)
}
.project-browser .demo-web-content {
    padding:24px 35px
}
.project-browser .demo-web-nav b {
    font-size:29px
}
.project-browser .demo-web-nav>span {
    font-size:8px
}
.project-browser .demo-web-grid {
    margin-top:25px;
    gap:24px
}
.project-browser .demo-web-grid img {
    max-height:310px
}
.project-browser .demo-web-grid h3 {
    margin-bottom:25px
}
.project-browser .demo-pill {
    font-size:9px;
    padding:10px 14px
}
.project-browser .demo-web-grid small {
    font-size:8px
}
.project-browser .demo-web-bottom {
    font-size:7px
}
.project-open {
    width:47px;
    height:47px;
    display:grid;
    place-items:center;
    position:absolute;
    bottom:24px;
    right:24px;
    background:var(--white);
    color:var(--ink);
    border-radius:50%;
    font-size:23px;
    transition:background 300ms,transform 400ms var(--ease);
    z-index:3
}
.project-visual:hover .project-open {
    background:var(--gold);
    transform:rotate(45deg)
}
.project-visual:hover .project-browser {
    transform:rotate(-1deg) scale(1.025)
}
.project-meta {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:15px;
    padding-top:23px
}
.project-meta h3 {
    font-size:21px;
    letter-spacing:-.04em;
    margin-bottom:9px
}
.project-meta>div>span {
    font-size:12px;
    color:var(--muted)
}
.project-meta>span {
    font-size:7px;
    letter-spacing:.08em;
    padding-top:5px;
    white-space:nowrap
}
.project-invitation {
    background:#d6b9a7
}
.invitation-orbit {
    position:absolute;
    width:560px;
    height:560px;
    border:1px solid #b58f72;
    border-radius:50%;
    left:-100px;
    top:200px;
    box-shadow:0 0 0 50px #b58f7211,0 0 0 100px #b58f7211
}
.project-invite {
    width:245px;
    position:relative;
    margin:68px auto 0;
    transform:rotate(-9deg);
    box-shadow:15px 23px 25px #77524221;
    transition:transform 900ms var(--ease)
}
.project-invite .invite-border {
    padding-block:24px
}
.project-invite .invite-border>small {
    font-size:6px
}
.project-invite .invite-border p {
    font-size:9px
}
.project-invite .invite-bottom {
    font-size:5px
}
.project-invite .invite-flower {
    font-size:43px
}
.project-visual:hover .project-invite {
    transform:rotate(-4deg) translateY(-5px)
}
.project-olive {
    background:#394a34;
    color:#eeeede
}
.project-phone {
    width:220px;
    position:relative;
    margin:67px 0 0 15%;
    border:7px solid #263322;
    border-radius:23px;
    overflow:hidden;
    transform:rotate(-9deg);
    box-shadow:20px 15px 30px #17221b55;
    transition:transform 900ms var(--ease)
}
.project-phone .demo-menu {
    padding:24px 18px
}
.project-phone .menu-items>div {
    padding-block:16px
}
.project-phone .menu-items b {
    font-size:9px
}
.project-phone .menu-items small {
    font-size:6px
}
.project-phone .menu-categories>span {
    font-size:7px
}
.project-phone .demo-menu>p {
    font-size:8px
}
.project-phone .menu-heading {
    font-size:5px
}
.olive-caption {
    position:absolute;
    right:30px;
    top:155px;
    writing-mode:vertical-rl;
    font-size:28px;
    font-family:Georgia,serif;
    font-style:italic;
    line-height:1.2;
    letter-spacing:-.05em
}
.project-visual:hover .project-phone {
    transform:rotate(-4deg) translateY(-6px)
}
.work-footnote {
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-top:1px solid var(--line);
    padding-top:28px;
    margin-top:55px;
    font-size:13px
}
.process-section {
    background:#242a22;
    color:#f3f2e8;
    position:relative;
    padding-block:95px
}
.process-top {
    display:flex;
    justify-content:space-between;
    align-items:center
}
.process-top .eyebrow {
    color:#c5ccb6
}
.process-top h2 {
    font-size:clamp(38px,4vw,58px)
}
.process-spark {
    font-size:95px;
    line-height:1;
    color:var(--gold);
    transform:rotate(15deg)
}
.process-stage {
    position:relative;
    height:290px;
    margin-block:35px 45px;
    display:flex;
    justify-content:center;
    align-items:center;
    isolation:isolate
}
.process-stage:before {
    content:"";
    position:absolute;
    height:1px;
    background:#667457;
    top:50%;
    left:0;
    right:0;
    opacity:.6
}
.idea-orbit {
    position:absolute;
    left:8%;
    width:140px;
    height:140px;
    display:grid;
    place-items:center
}
.idea-orbit i {
    position:absolute;
    inset:0;
    border:1px solid #9ba78155;
    border-radius:50%
}
.idea-orbit i:last-child {
    inset:-25px;
    border-style:dashed;
    opacity:.4
}
.idea-core {
    font-size:90px;
    line-height:1;
    color:var(--gold);
    background:#242a22;
    position:relative;
    z-index:1;
    padding:10px
}
.build-outline {
    width:250px;
    height:175px;
    border:1px solid #a7b18b;
    border-radius:5px;
    background:#242a22;
    position:absolute;
    left:calc(50% - 125px);
    top:58px;
    padding:15px
}
.build-outline>span {
    display:block;
    height:18px;
    border-bottom:1px solid #a7b18b55
}
.build-outline>div {
    display:flex;
    gap:12px;
    padding-top:15px
}
.build-outline i {
    display:block;
    height:105px;
    border:1px solid #a7b18b88;
    width:33%
}
.build-outline i:first-child {
    border:0;
    background:repeating-linear-gradient(180deg,#a7b18b66 0 1px,transparent 1px 12px)
}
.build-product {
    position:absolute;
    right:0;
    width:310px;
    transform:rotate(4deg)
}
.build-product .demo-web-grid {
    margin-top:12px
}
.build-product .demo-web-content {
    padding:15px
}
.build-product .demo-web-grid h3 {
    font-size:30px
}
.build-product .demo-web-grid img {
    max-height:155px
}
.build-product .demo-web-bottom {
    margin-top:10px
}
.stage-caption {
    position:absolute;
    bottom:-12px;
    left:0;
    font-size:7px;
    letter-spacing:.18em;
    color:#b8c0a9
}
.process-steps {
    list-style:none;
    padding:0;
    margin:0;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:35px
}
.process-steps li {
    border-top:1px solid #667257;
    padding-top:21px;
    position:relative
}
.process-steps li:before {
    content:"";
    position:absolute;
    left:0;
    top:-2px;
    height:3px;
    background:var(--gold);
    width:100%;
    transform:scaleX(0);
    transform-origin:left;
    transition:transform 700ms var(--ease)
}
.process-steps li.is-current:before {
    transform:scaleX(1)
}
.process-steps li>span {
    font-size:10px;
    color:#b0b99e
}
.process-steps h3 {
    font-size:24px;
    margin-top:15px
}
.process-steps p {
    color:#b8c0ae;
    font-size:12px;
    margin-top:15px;
    line-height:1.9;
    max-width:245px
}
.social-section {
    background:var(--paper)
}
.social-section h2 em {
    color:#77735f
}
.social-link {
    margin-top:20px
}
.social-editorial {
    display:grid;
    grid-template-columns:1.4fr 1fr;
    gap:28px;
    align-items:stretch
}
.social-brand-panel {
    background:#eeeee6;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:30px 35px;
    min-height:365px;
    border:1px solid var(--line)
}
.social-brand-panel>span {
    font-size:8px;
    letter-spacing:.1em
}
.social-brand-panel img {
    width:370px;
    max-height:260px;
    object-fit:contain;
    align-self:center;
    mix-blend-mode:multiply
}
.social-note-panel {
    background:#ecc06b;
    position:relative;
    padding:30px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    overflow:hidden;
    min-height:365px
}
.social-note-panel>span:first-child {
    font-size:8px;
    letter-spacing:.13em
}
.social-arabic {
    font-family:"Noto Sans Arabic",Tahoma,sans-serif;
    font-size:200px;
    position:absolute;
    right:-7px;
    top:20px;
    line-height:1;
    color:#d4a64f;
    transform:rotate(-12deg);
    transition:transform 800ms var(--ease)
}
.social-note-panel h3 {
    font-family:Georgia,serif;
    font-size:52px;
    line-height:1.03;
    position:relative;
    margin-top:70px
}
.social-note-bottom {
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-top:1px solid #9a702b66;
    padding-top:18px;
    font-size:11px;
    margin-top:30px
}
.social-note-panel:hover .social-arabic {
    transform:rotate(-5deg) scale(1.04)
}
.social-disclosure {
    font-size:10px;
    color:var(--muted);
    margin-top:17px
}
.social-media {
    overflow:hidden;
    min-height:300px
}
.social-media img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform 700ms var(--ease)
}
.social-media:hover img {
    transform:scale(1.035)
}
.contact-section {
    background:#edb650;
    padding-bottom:100px;
    border-top:1px solid #d9a345
}
.contact-title-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    border-bottom:1px solid #926e344d;
    padding-bottom:50px
}
.contact-title-row h2 {
    font-size:clamp(53px,7.4vw,106px);
    line-height:1.03;
    letter-spacing:-.065em
}
.contact-round {
    width:100px;
    height:100px;
    border:1px solid #493d28;
    border-radius:50%;
    display:grid;
    place-items:center;
    flex-shrink:0;
    transition:background 300ms,transform 300ms var(--ease)
}
.contact-round .icon {
    width:40px;
    height:40px;
    stroke-width:1
}
.contact-round:hover {
    background:var(--ink);
    color:var(--gold-light)
}
.contact-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:100px;
    padding-top:50px
}
.contact-intro {
    font-size:19px;
    line-height:1.7;
    letter-spacing:-.03em
}
.contact-email {
    font-size:clamp(16px,2vw,26px);
    display:inline-block;
    border-bottom:1px solid #78562c;
    margin-top:30px;
    letter-spacing:-.03em;
    overflow-wrap:anywhere
}
.contact-options {
    display:flex;
    flex-wrap:wrap;
    gap:25px;
    margin-top:22px;
    font-size:12px
}
.contact-options a:hover {
    text-decoration:underline
}
.contact-arabic {
    font-size:22px;
    max-width:max-content;
    margin-top:50px;
    line-height:1.8
}
.form-pair {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:25px
}
.field {
    margin-bottom:22px
}
.field label {
    display:block;
    font-size:10px;
    font-weight:700;
    margin-bottom:8px
}
.field input,.field select,.field textarea {
    border:0;
    border-bottom:1px solid #8d6b3b80;
    background:transparent;
    width:100%;
    border-radius:0;
    padding:10px 0;
    font-size:12px;
    outline-offset:3px
}
.field input::placeholder,.field textarea::placeholder {
    color:#695431;
    opacity:1
}
.field textarea {
    resize:vertical;
    min-height:87px;
    max-height:250px
}
.field select {
    min-height:42px
}
.field select option {
    background:var(--paper)
}
.field input:focus,.field textarea:focus,.field select:focus {
    border-bottom-color:#22241f
}
.form-help {
    font-size:10px;
    line-height:1.7;
    color:#55472c;
    margin:-5px 0 19px
}
.brief-form .button {
    width:100%;
    justify-content:space-between
}
.form-result {
    margin-top:20px;
    padding:17px;
    border:1px solid #8f6b3780;
    border-radius:4px;
    font-size:12px
}
.form-result .text-link {
    text-decoration:underline
}
.brief-form noscript p {
    font-size:12px;
    margin-top:12px
}
.site-footer {
    background:var(--paper)
}
.footer-top {
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    align-items:center;
    gap:40px;
    padding-block:38px
}
.footer-logo {
    width:135px;
    mix-blend-mode:multiply
}
.footer-top p {
    font-size:12px;
    line-height:1.8
}
.footer-top .arabic {
    font-size:14px;
    color:var(--muted)
}
.footer-links {
    display:flex;
    flex-direction:column;
    gap:7px;
    align-items:flex-end;
    font-size:12px
}
.footer-links a:hover {
    text-decoration:underline
}
.footer-bottom {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    border-top:1px solid var(--line);
    padding-block:20px;
    font-size:9px;
    color:var(--muted)
}
.footer-bottom a {
    color:var(--ink)
}
.whatsapp-link {
    position:fixed;
    bottom:23px;
    right:24px;
    background:var(--ink);
    color:var(--white);
    border:1px solid #f7f5ef45;
    border-radius:30px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 17px;
    z-index:25;
    font-size:11px;
    box-shadow:0 4px 20px #22241f20;
    transition:transform 250ms var(--ease)
}
.whatsapp-link:hover {
    transform:translateY(-3px)
}
.whatsapp-link .icon {
    width:18px;
    height:18px
}
.demo-dialog {
    border:0;
    border-radius:10px;
    padding:28px;
    width:min(650px,calc(100% - 32px));
    max-height:90dvh;
    overflow:auto;
    background:var(--paper);
    color:var(--ink);
    box-shadow:0 25px 80px #0004
}
.demo-dialog::backdrop {
    background:#172014b8;
    backdrop-filter:blur(5px)
}
.dialog-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:25px
}
.dialog-heading .eyebrow {
    font-size:8px
}
.dialog-heading h2 {
    font-size:27px;
    margin-top:8px
}
.dialog-close {
    width:44px;
    height:44px;
    background:#e8e8df;
    border-radius:50%;
    font-size:28px;
    line-height:1;
    flex-shrink:0
}
.dialog-disclaimer {
    font-size:10px;
    color:var(--muted);
    margin-top:22px
}
.demo-dialog>.text-link {
    font-size:11px
}
.demo-dialog .demo-website {
    border:1px solid var(--line);
    border-radius:7px;
    overflow:hidden
}
.demo-dialog .demo-web-grid small,.demo-dialog .demo-web-nav>span,.demo-dialog .demo-pill {
    font-size:9px
}
.demo-dialog .demo-web-bottom {
    font-size:8px
}
.demo-dialog .demo-invitation {
    max-width:350px;
    margin:auto
}
.demo-dialog .invite-border {
    padding:25px
}
.demo-dialog .invite-border>small {
    font-size:7px
}
.demo-dialog .invite-border p {
    font-size:13px
}
.demo-dialog .invite-date {
    font-size:8px
}
.demo-dialog .demo-menu {
    max-width:370px;
    margin:auto;
    padding:30px
}
.demo-dialog .menu-heading {
    font-size:8px
}
.demo-dialog .demo-menu>p {
    font-size:12px
}
.demo-dialog .menu-categories>button {
    font-size:11px;
    min-height:40px;
    padding:8px 12px
}
.demo-dialog .menu-items b {
    font-size:14px
}
.demo-dialog .menu-items small {
    font-size:10px
}
.demo-dialog .menu-items>div>span:last-child {
    font-size:12px
}
.demo-dialog .menu-foot {
    font-size:8px
}
.demo-action {
    font-size:11px;
    border:1px solid currentColor;
    border-radius:3px;
    padding:12px 15px;
    background:transparent;
    margin-top:25px;
    min-height:44px
}
.demo-action:hover {
    background:#bd9d4b18
}
.demo-website.evening {
    background:#343d30;
    color:#f5ebd4
}
.demo-website.evening .demo-pill {
    border-color:#ced5be
}
.invite-note {
    margin-top:20px
}
.invite-note small {
    font-size:9px
}
.demo-dialog:not([open]) {
    display:none
}
@media(prefers-reduced-motion:no-preference) {
    .motion-ready .line-mask>span {
        animation:line-in 1s var(--ease) both
    }
    .motion-ready .line-mask:nth-child(2)>span {
        animation-delay:120ms
    }
    .motion-ready .line-mask:nth-child(3)>span {
        animation-delay:240ms
    }
    .motion-ready .hero-enter {
        animation:fade-in 900ms var(--ease) 300ms both
    }
    .motion-ready .hero .eyebrow {
        animation-delay:0ms
    }
    .motion-ready .hero-note {
        animation-delay:550ms
    }
    .motion-ready .hero-website {
        animation:card-in 1.3s var(--ease) 150ms backwards
    }
    .motion-ready .hero-invite {
        animation:card-in 1.3s var(--ease) 350ms backwards
    }
    .motion-ready .hero-menu {
        animation:card-in 1.3s var(--ease) 500ms backwards
    }
    .motion-ready .thread-base {
        animation:thread-in 1.8s var(--ease) both
    }
    .motion-ready .art-spark {
        animation:spark-in 1.2s var(--ease) 350ms backwards
    }
    .motion-ready [data-reveal] {
        opacity:0;
        transform:translateY(28px);
        transition:opacity var(--reveal) var(--ease),transform var(--reveal) var(--ease)
    }
    .motion-ready [data-reveal].is-visible {
        opacity:1;
        transform:translateY(0)
    }
    .motion-ready .project[data-reveal] .project-visual {
        clip-path:inset(8% 0 0 0);
        transition:clip-path 1s var(--ease)
    }
    .motion-ready .project.is-visible .project-visual {
        clip-path:inset(0)
    }
    .demo-dialog[open] {
        animation:fade-in 350ms var(--ease)
    }
    @keyframes line-in {
        from {
            transform:translateY(110%)
        }
        to {
            transform:translateY(0)
        }
    }
    @keyframes fade-in {
        from {
            opacity:0;
            transform:translateY(15px)
        }
        to {
            opacity:1;
            transform:translateY(0)
        }
    }
    @keyframes card-in {
        from {
            opacity:0;
            transform:translate(20px,55px) rotate(0)
        }
        to {
            opacity:1;
            transform:translate(0,0) rotate(var(--rotation))
        }
    }
    @keyframes thread-in {
        from {
            stroke-dashoffset:1600
        }
        to {
            stroke-dashoffset:0
        }
    }
    @keyframes spark-in {
        from {
            opacity:0;
            transform:rotate(-70deg) scale(.4)
        }
        to {
            opacity:1;
            transform:rotate(-13deg) scale(1)
        }
    }
}
@media(min-width:1000px) and (min-height:800px) and (prefers-reduced-motion:no-preference) {
    .motion-ready .process-section {
        height:1700px;
        padding-block:0
    }
    .motion-ready .process-sticky {
        position:sticky;
        top:110px;
        padding-block:25px 35px
    }
    .motion-ready .process-stage {
        height:240px;
        margin-block:20px 35px
    }
    .motion-ready .process-top h2 {
        font-size:46px
    }
    .motion-ready .build-outline {
        top:40px
    }
}
@media(min-width:1700px) {
    .hero-grid {
        min-height:750px
    }
    .hero-art {
        height:660px
    }
    .hero-invite {
        top:335px
    }
    .hero-menu {
        top:310px
    }
}
@media(max-width:1199px) {
    .wrap {
        width:calc(100% - 72px)
    }
    .nav-menu {
        gap:23px
    }
    .hero-grid {
        min-height:630px;
        grid-template-columns:1.05fr 1fr
    }
    .hero-art {
        height:560px
    }
    .hero-website {
        top:110px;
        width:86%;
        left:1%
    }
    .hero-invite {
        top:310px
    }
    .hero-menu {
        top:282px
    }
    .hero-actions {
        gap:18px
    }
    .hero-actions .text-link {
        font-size:10px
    }
    .hero-actions .button {
        padding-inline:17px;
        gap:20px
    }
    .hero-lead {
        font-size:13px
    }
    .hero-note {
        gap:8px;
        font-size:9px
    }
    .hero-note .arabic {
        font-size:10px
    }
    .label-bottom {
        bottom:0
    }
    .art-spark {
        font-size:83px;
        right:8%;
        top:65px
    }
    .services-layout {
        gap:45px
    }
    .service-art {
        min-height:415px;
        padding:20px
    }
    .service-row h3 {
        font-size:21px
    }
    .project-meta {
        flex-direction:column;
        gap:4px
    }
    .project-meta>span {
        font-size:7px
    }
    .project-forma {
        height:500px
    }
    .project-browser {
        width:76%
    }
    .project-phone {
        margin-left:12%
    }
    .olive-caption {
        right:22px;
        font-size:25px
    }
    .contact-grid {
        gap:65px
    }
    .build-product {
        width:275px
    }
    .idea-orbit {
        left:6%
    }
}
@media(max-width:999px) {
    .wrap {
        width:calc(100% - 48px)
    }
    .nav {
        height:85px;
        gap:20px
    }
    .brand,.nav-logo {
        width:110px
    }
    .nav-logo {
        height:72px
    }
    .nav-menu {
        gap:17px
    }
    .nav-menu>a {
        font-size:10px
    }
    .nav-instagram {
        display:none
    }
    .nav-cta {
        padding:10px 15px;
        gap:15px
    }
    .hero-grid {
        min-height:570px
    }
    .hero-copy {
        padding-block:40px
    }
    h1 {
        font-size:clamp(60px,8vw,80px)
    }
    .hero-art {
        height:520px
    }
    .hero-website {
        top:100px
    }
    .hero-invite {
        top:277px;
        width:39%
    }
    .hero-menu {
        top:260px;
        width:40%
    }
    .hero-note {
        flex-wrap:wrap;
        max-width:330px
    }
    .hero-note .arabic {
        border:0;
        padding:0
    }
    .hero-actions {
        flex-wrap:wrap;
        gap:12px;
        margin-top:22px
    }
    .hero-actions .text-link {
        font-size:11px
    }
    .hero-lead {
        font-size:12px
    }
    .desktop-break {
        display:none
    }
    .hero-bottom .concept-note {
        display:none
    }
    .art-spark {
        top:49px;
        font-size:78px
    }
    .label-top {
        top:42px
    }
    .label-bottom {
        bottom:5px;
        font-size:6px
    }
    .section-pad {
        padding-block:80px
    }
    .studio-grid {
        grid-template-columns:.5fr 2fr;
        gap:30px
    }
    .studio-star {
        font-size:75px
    }
    .studio-description {
        font-size:12px;
        gap:25px
    }
    .studio-signoff>span:first-child {
        font-size:6px
    }
    .studio-signoff .arabic {
        font-size:13px
    }
    .section-heading {
        gap:25px;
        margin-bottom:40px
    }
    .section-heading>p,.section-heading>div>p:not(.eyebrow) {
        font-size:11px;
        max-width:250px
    }
    .services-layout {
        gap:30px
    }
    .service-art {
        min-height:360px;
        padding:18px
    }
    .service-row summary {
        gap:15px;
        min-height:72px
    }
    .service-row h3 {
        font-size:19px
    }
    .service-body {
        padding-left:33px;
        padding-right:15px
    }
    .service-body p {
        font-size:12px
    }
    .service-art-footer {
        font-size:5px
    }
    .service-art-caption {
        font-size:6px
    }
    .brand-study strong {
        font-size:64px
    }
    .code-window {
        padding:18px
    }
    .code-window p {
        font-size:13px
    }
    .product-stack>span {
        font-size:60px
    }
    .product-stack small {
        font-size:7px
    }
    .project-visual {
        height:430px
    }
    .project-forma {
        height:480px
    }
    .project-browser {
        width:82%
    }
    .project-tag {
        font-size:7px;
        left:20px;
        top:20px
    }
    .project-invite {
        width:210px;
        margin-top:72px
    }
    .project-phone {
        width:200px;
        margin-left:10%;
        margin-top:65px
    }
    .olive-caption {
        right:13px;
        font-size:21px
    }
    .project-meta h3 {
        font-size:19px
    }
    .project-meta>div>span {
        font-size:10px
    }
    .project-open {
        width:40px;
        height:40px;
        bottom:18px;
        right:18px
    }
    .process-section {
        padding-block:75px
    }
    .process-stage {
        height:260px
    }
    .build-outline {
        width:180px;
        height:145px;
        left:calc(50% - 90px);
        top:55px
    }
    .build-outline i {
        height:75px
    }
    .build-product {
        width:230px
    }
    .idea-orbit {
        left:3%;
        width:100px;
        height:100px
    }
    .idea-core {
        font-size:65px
    }
    .process-steps {
        gap:22px
    }
    .process-steps h3 {
        font-size:22px
    }
    .process-steps p {
        font-size:11px
    }
    .social-brand-panel {
        padding:25px;
        min-height:310px
    }
    .social-note-panel {
        min-height:310px;
        padding:25px
    }
    .social-note-panel h3 {
        font-size:43px
    }
    .social-arabic {
        font-size:160px
    }
    .contact-grid {
        gap:45px
    }
    .contact-title-row {
        padding-bottom:40px
    }
    .contact-round {
        width:80px;
        height:80px
    }
    .contact-intro {
        font-size:17px
    }
    .contact-arabic {
        font-size:18px
    }
    .form-pair {
        gap:20px
    }
    .contact-options {
        gap:15px;
        font-size:11px
    }
    .footer-top {
        gap:25px
    }
    .footer-top p,.footer-links {
        font-size:11px
    }
}
@media(max-width:760px) {
    html {
        scroll-padding-top:85px
    }
    .wrap {
        width:calc(100% - 40px)
    }
    .nav {
        height:76px
    }
    .brand,.nav-logo {
        width:102px
    }
    .nav-logo {
        height:65px
    }
    .menu-toggle {
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:6px;
        background:transparent;
        width:44px;
        height:44px;
        padding:10px;
        margin-left:auto
    }
    .menu-toggle span {
        width:23px;
        height:1px;
        background:var(--ink);
        transition:transform 300ms var(--ease)
    }
    .menu-toggle[aria-expanded=true] span:first-child {
        transform:translateY(3.5px) rotate(45deg)
    }
    .menu-toggle[aria-expanded=true] span:last-child {
        transform:translateY(-3.5px) rotate(-45deg)
    }
    .nav-menu {
        position:absolute;
        top:calc(100% - 1px);
        left:0;
        right:0;
        background:var(--paper);
        padding:15px 20px 22px;
        border-bottom:1px solid var(--line);
        box-shadow:0 15px 20px #242a2208;
        display:flex;
        align-items:stretch;
        flex-direction:column;
        gap:0;
        visibility:hidden;
        opacity:0;
        transform:translateY(-8px);
        max-height:calc(100dvh - 76px);
        overflow:auto;
        transition:visibility 250ms,opacity 250ms,transform 350ms var(--ease)
    }
    .nav-menu.is-open {
        visibility:visible;
        opacity:1;
        transform:none
    }
    .nav-menu>a:not(.button) {
        padding:13px 7px;
        font-size:14px
    }
    .nav-menu .nav-instagram {
        display:flex
    }
    .nav-menu>a:after {
        display:none
    }
    .nav-menu .button {
        margin-top:10px;
        justify-content:space-between;
        font-size:12px
    }
    .hero-grid {
        grid-template-columns:1fr;
        gap:0;
        min-height:0
    }
    .hero-copy {
        padding:45px 0 15px
    }
    .hero .eyebrow {
        font-size:9px;
        margin-bottom:26px
    }
    h1 {
        font-size:clamp(60px,12.8vw,92px);
        line-height:1.025;
        letter-spacing:-.07em
    }
    .hero-lead {
        font-size:13px;
        max-width:370px;
        margin-top:24px
    }
    .hero-actions {
        margin-top:25px;
        gap:22px;
        flex-wrap:nowrap
    }
    .hero-actions .button {
        min-height:51px;
        font-size:11px;
        padding-inline:17px;
        gap:20px
    }
    .hero-actions .text-link {
        font-size:10px;
        gap:10px
    }
    .hero-note {
        margin-top:26px;
        font-size:9px;
        max-width:none
    }
    .hero-note .arabic {
        font-size:11px;
        border-left:1px solid var(--line);
        padding-left:10px;
        margin-left:4px
    }
    .hero-art {
        height:540px;
        max-width:480px;
        width:100%;
        margin:0 auto
    }
    .hero-website {
        width:79%;
        left:8%;
        top:73px
    }
    .hero-invite {
        width:36%;
        left:5%;
        top:260px
    }
    .hero-menu {
        width:36%;
        right:3%;
        top:227px
    }
    .art-spark {
        top:14px;
        right:13%;
        font-size:82px
    }
    .label-top {
        top:24px;
        left:31%
    }
    .label-bottom {
        bottom:22px;
        left:21%;
        font-size:7px
    }
    .hero-bottom {
        padding-block:16px;
        font-size:7px;
        gap:15px
    }
    .hero-bottom>a {
        font-size:8px;
        gap:8px
    }
    .hero-bottom .icon {
        width:14px
    }
    .section-pad {
        padding-block:65px
    }
    .studio-grid {
        grid-template-columns:1fr;
        gap:26px
    }
    .section-label {
        flex-direction:row;
        align-items:center;
        font-size:9px
    }
    .studio-star {
        font-size:39px
    }
    .statement {
        font-size:clamp(37px,8vw,56px)
    }
    .studio-description {
        margin-top:28px;
        gap:23px;
        font-size:12px
    }
    .studio-signoff {
        gap:15px;
        align-items:flex-start;
        flex-direction:column;
        margin-top:25px;
        padding-top:20px
    }
    .studio-signoff>span:first-child {
        font-size:7px
    }
    .studio-signoff .arabic {
        font-size:16px
    }
    h2 {
        font-size:clamp(35px,7.5vw,53px)
    }
    .eyebrow {
        font-size:9px;
        margin-bottom:20px
    }
    .section-heading {
        display:block;
        margin-bottom:33px
    }
    .section-heading>p,.section-heading>div>p:not(.eyebrow) {
        font-size:12px;
        max-width:350px;
        margin-top:23px
    }
    .services-layout {
        grid-template-columns:1fr;
        gap:30px
    }
    .service-art {
        position:relative;
        top:auto;
        min-height:350px;
        max-width:100%;
        padding:23px
    }
    .service-preview {
        margin:20px auto 0;
        width:100%;
        max-width:420px
    }
    .service-preview .demo-website {
        margin:10px 16px
    }
    .service-art-caption {
        font-size:7px
    }
    .service-art-footer {
        font-size:6px
    }
    .service-row summary {
        min-height:75px;
        gap:20px
    }
    .service-row h3 {
        font-size:22px
    }
    .service-body {
        padding-left:38px
    }
    .service-body p {
        font-size:13px
    }
    .brand-study strong {
        font-size:78px
    }
    .product-stack {
        max-width:340px;
        margin-inline:auto
    }
    .code-window {
        padding:25px
    }
    .code-window p {
        font-size:16px
    }
    .work-grid {
        grid-template-columns:1fr;
        gap:35px
    }
    .project-wide {
        grid-column:auto
    }
    .project-forma {
        height:370px
    }
    .project-forma:before {
        font-size:30vw;
        top:85px
    }
    .project-browser {
        width:88%;
        margin-top:90px
    }
    .project-browser .demo-web-content {
        padding:18px 22px
    }
    .project-browser .demo-web-nav b {
        font-size:22px
    }
    .project-browser .demo-web-grid {
        gap:15px;
        margin-top:20px
    }
    .project-browser .demo-web-grid h3 {
        font-size:clamp(28px,7.7cqi,50px)
    }
    .project-browser .demo-web-grid small {
        font-size:6px
    }
    .project-browser .demo-web-nav>span {
        font-size:6px
    }
    .project-browser .demo-pill {
        font-size:6px;
        padding:7px 10px
    }
    .project-browser .demo-web-bottom {
        font-size:5px
    }
    .project-invitation,.project-olive {
        height:460px
    }
    .project-invite {
        width:240px;
        margin-top:63px
    }
    .project-phone {
        width:225px;
        margin:65px auto 0;
        left:-16px
    }
    .olive-caption {
        right:25px;
        top:135px;
        font-size:24px
    }
    .project-meta {
        flex-direction:row;
        gap:15px;
        padding-top:18px
    }
    .project-meta h3 {
        font-size:19px
    }
    .project-meta>div>span {
        font-size:11px
    }
    .project-meta>span {
        font-size:6px;
        max-width:80px;
        white-space:normal;
        text-align:right
    }
    .work-footnote {
        margin-top:38px;
        padding-top:20px;
        font-size:11px
    }
    .work-footnote .text-link {
        font-size:11px
    }
    .process-section {
        padding-block:65px
    }
    .process-top {
        gap:20px;
        align-items:flex-start
    }
    .process-top .eyebrow {
        font-size:8px
    }
    .process-top h2 {
        font-size:clamp(32px,7vw,45px)
    }
    .process-spark {
        font-size:48px;
        margin-top:35px
    }
    .process-stage {
        height:340px;
        margin-block:30px
    }
    .idea-orbit {
        left:8%;
        top:10px;
        width:75px;
        height:75px
    }
    .idea-core {
        font-size:55px
    }
    .idea-orbit i:last-child {
        inset:-13px
    }
    .process-stage:before {
        width:1px;
        height:80%;
        top:0;
        left:24%;
        transform:rotate(-30deg);
        transform-origin:top
    }
    .build-outline {
        left:30%;
        top:70px;
        width:150px;
        height:115px;
        padding:12px
    }
    .build-outline>span {
        height:10px
    }
    .build-outline>div {
        padding-top:10px;
        gap:7px
    }
    .build-outline i {
        height:65px
    }
    .build-product {
        width:220px;
        top:146px;
        right:3%
    }
    .build-product .demo-web-grid h3 {
        font-size:23px
    }
    .build-product .demo-web-content {
        padding:12px
    }
    .build-product .demo-web-grid {
        gap:10px
    }
    .build-product .demo-web-grid img {
        max-height:125px
    }
    .build-product .demo-web-grid h3 {
        margin-block:8px 10px
    }
    .build-product .demo-web-grid small {
        font-size:4px
    }
    .build-product .demo-pill {
        font-size:4px;
        padding:6px 8px
    }
    .build-product .demo-web-nav b {
        font-size:17px
    }
    .build-product .demo-web-nav>span {
        font-size:4px
    }
    .build-product .demo-web-bottom {
        font-size:4px
    }
    .stage-caption {
        bottom:3px;
        font-size:6px
    }
    .process-steps {
        grid-template-columns:1fr 1fr;
        gap:30px 23px
    }
    .process-steps li {
        padding-top:17px
    }
    .process-steps h3 {
        font-size:23px;
        margin-top:10px
    }
    .process-steps p {
        font-size:12px;
        margin-top:12px
    }
    .process-steps li:before {
        transform:scaleX(1);
        height:2px;
        background:#87906d
    }
    .social-editorial {
        grid-template-columns:1fr;
        gap:20px
    }
    .social-brand-panel {
        min-height:320px;
        padding:25px
    }
    .social-brand-panel img {
        width:320px
    }
    .social-note-panel {
        min-height:350px;
        padding:25px
    }
    .social-note-panel h3 {
        font-size:53px;
        margin-top:80px
    }
    .social-arabic {
        font-size:230px;
        top:0;
        right:10px
    }
    .social-link {
        margin-top:15px
    }
    .social-disclosure {
        font-size:9px
    }
    .contact-title-row {
        gap:15px;
        align-items:flex-end;
        padding-bottom:30px
    }
    .contact-title-row h2 {
        font-size:clamp(41px,9.6vw,70px);
        letter-spacing:-.06em
    }
    .contact-round {
        width:56px;
        height:56px;
        margin-bottom:6px
    }
    .contact-round .icon {
        width:25px;
        height:25px
    }
    .contact-grid {
        grid-template-columns:1fr;
        gap:42px;
        padding-top:30px
    }
    .contact-intro {
        font-size:17px
    }
    .contact-email {
        font-size:23px;
        margin-top:20px
    }
    .contact-options {
        font-size:12px;
        margin-top:17px;
        gap:25px
    }
    .contact-arabic {
        font-size:19px;
        margin-top:25px
    }
    .form-pair {
        gap:23px
    }
    .field label {
        font-size:11px
    }
    .field input,.field textarea,.field select {
        font-size:16px
    }
    .form-help {
        font-size:11px
    }
    .brief-form .button {
        min-height:54px
    }
    .footer-top {
        grid-template-columns:auto 1fr;
        gap:25px;
        padding-block:30px
    }
    .footer-logo {
        width:115px
    }
    .footer-top p {
        font-size:11px;
        text-align:right
    }
    .footer-top .arabic {
        font-size:12px
    }
    .footer-links {
        grid-column:1/-1;
        flex-direction:row;
        justify-content:space-between;
        gap:10px;
        font-size:11px
    }
    .footer-bottom {
        font-size:8px;
        gap:15px;
        flex-wrap:wrap;
        padding-bottom:78px
    }
    .footer-bottom span:nth-child(2) {
        order:3;
        flex-basis:100%;
        font-size:8px
    }
    .footer-bottom a {
        margin-left:auto
    }
    .whatsapp-link {
        bottom:16px;
        right:16px;
        padding:12px;
        border-radius:50%;
        width:44px;
        height:44px;
        justify-content:center
    }
    .whatsapp-link>span {
        display:none
    }
    .demo-dialog {
        padding:20px
    }
    .dialog-heading h2 {
        font-size:23px
    }
    .demo-dialog .demo-web-grid small,.demo-dialog .demo-web-nav>span,.demo-dialog .demo-pill {
        font-size:6px
    }
    .demo-dialog .demo-web-bottom {
        font-size:5px
    }
}
@media(max-width:380px) {
    .wrap {
        width:calc(100% - 32px)
    }
    .hero-copy {
        padding-top:35px
    }
    h1 {
        font-size:58px
    }
    .hero-actions {
        gap:13px
    }
    .hero-actions .button {
        font-size:10px;
        gap:15px;
        padding-inline:13px
    }
    .hero-actions .text-link {
        font-size:9px;
        gap:6px
    }
    .hero-note {
        gap:6px;
        font-size:8px
    }
    .hero-note .arabic {
        font-size:10px;
        padding-left:7px;
        margin-left:1px
    }
    .hero-art {
        height:480px
    }
    .hero-website {
        top:65px;
        left:5%;
        width:85%
    }
    .hero-invite {
        top:248px;
        width:40%;
        left:0
    }
    .hero-menu {
        top:219px;
        width:40%;
        right:0
    }
    .art-spark {
        font-size:68px;
        top:13px;
        right:9%
    }
    .label-bottom {
        bottom:4px;
        font-size:5px;
        left:24%
    }
    .hero-bottom {
        font-size:6px
    }
    .hero-bottom>a {
        font-size:7px
    }
    .hero-preview .demo-web-content {
        padding:14px 16px
    }
    .hero-preview .demo-web-grid {
        margin-top:16px;
        gap:12px
    }
    .hero-preview .demo-web-grid h3 {
        margin-top:9px;
        margin-bottom:13px
    }
    .hero-preview .demo-pill {
        font-size:5px;
        padding:6px 9px
    }
    .hero-preview .invite-border {
        padding:14px 6px
    }
    .hero-preview .invite-flower {
        font-size:30px;
        margin-bottom:12px
    }
    .hero-preview .invite-border>small {
        font-size:4px
    }
    .hero-preview .invite-border h3 {
        font-size:23px
    }
    .hero-preview .demo-menu {
        padding:17px 12px 12px
    }
    .hero-preview .demo-menu h3 {
        font-size:30px
    }
    .hero-preview .menu-categories>span {
        padding:4px 5px;
        font-size:5px
    }
    .hero-preview .menu-items>div {
        padding-block:9px
    }
    .hero-preview .menu-items b {
        font-size:6px
    }
    .hero-preview .menu-items small {
        font-size:4px
    }
    .studio-description {
        grid-template-columns:1fr;
        gap:18px
    }
    .project-forma {
        height:320px
    }
    .project-browser {
        margin-top:75px
    }
    .project-browser .demo-web-content {
        padding:15px
    }
    .project-browser .demo-web-grid {
        margin-top:15px
    }
    .project-browser .demo-web-grid h3 {
        font-size:28px
    }
    .project-phone {
        width:200px;
        left:-7px
    }
    .olive-caption {
        right:18px;
        font-size:21px
    }
    .project-meta>div>span {
        font-size:10px
    }
    .contact-title-row h2 {
        font-size:39px
    }
    .contact-round {
        width:45px;
        height:45px
    }
    .contact-email {
        font-size:21px
    }
    .contact-options {
        font-size:11px;
        gap:17px
    }
    .social-arabic {
        font-size:200px
    }
}
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
    *,*::before,*::after {
        animation:none!important;
        transition:none!important;
        scroll-behavior:auto!important
    }
    [data-reveal] {
        opacity:1!important;
        transform:none!important
    }
    .hero-preview {
        transform:rotate(var(--rotation,0deg))!important
    }
    .reading-progress {
        display:none
    }
    .process-section {
        height:auto!important
    }
    .process-sticky {
        position:static!important
    }
    .process-steps li:before {
        transform:scaleX(1)
    }
    .project-visual {
        clip-path:none!important
    }
}
@media(hover:none) {
    .magnetic {
        transform:none!important
    }
}
@media print {
    .site-header,.whatsapp-link,.reading-progress,.hero-art,.service-art,.project-visual,.process-stage,.brief-form,.contact-round {
        display:none
    }
    .section-pad,.process-section {
        padding-block:25px;
        height:auto!important
    }
    .process-sticky {
        position:static!important
    }
    .wrap {
        width:100%
    }
    body {
        background:white
    }
    .hero-grid {
        display:block;
        min-height:0
    }
    .hero-copy {
        padding:20px 0
    }
    .hero h1 {
        font-size:55px
    }
    [data-reveal] {
        opacity:1!important;
        transform:none!important
    }
    .site-footer {
        break-inside:avoid
    }
}
/* Compact art-directed hero previews; the full concepts live in accessible dialogs. */
.hero-invite .demo-invitation {
    padding:11px
}
.hero-invite .invite-border {
    padding:14px 8px 12px
}
.hero-invite .invite-flower {
    font-size:27px;
    margin-bottom:12px
}
.hero-invite .invite-border h3 {
    margin-top:12px
}
.hero-invite .invite-rule {
    margin-block:12px
}
.hero-invite .invite-date,.hero-invite .invite-bottom {
    margin-top:12px
}
.hero-menu .demo-menu {
    padding:14px 12px 10px
}
.hero-menu .menu-heading {
    line-height:1
}
.hero-menu .menu-heading>span:last-child {
    font-size:12px
}
.hero-menu .demo-menu h3 {
    font-size:clamp(27px,23cqi,40px);
    margin-top:12px
}
.hero-menu .demo-menu>p {
    font-size:5px;
    line-height:1.4;
    margin-top:7px
}
.hero-menu .menu-categories {
    margin-top:12px;
    padding-bottom:8px;
    gap:2px
}
.hero-menu .menu-categories>span {
    font-size:5px;
    padding:4px 5px
}
.hero-menu .menu-items>div {
    padding:8px 0
}
.hero-menu .menu-items>div:nth-child(3) {
    display:none
}
.hero-menu .menu-items b {
    font-size:6px;
    line-height:1.4
}
.hero-menu .menu-items small {
    font-size:4px;
    line-height:1.4;
    margin-top:2px
}
.hero-menu .menu-foot {
    margin-top:10px;
    font-size:4px;
    line-height:1
}
.hero-menu .menu-foot>span:last-child {
    font-size:12px
}
.project-visual:has(.project-open:hover) .project-browser {
    transform:rotate(-1deg) scale(1.025)
}
.project-open:before {
    content:"";
    position:absolute;
    inset:-600px
}
.project-visual:has(.project-open:focus-visible) {
    outline:3px solid #af6b0d;
    outline-offset:5px
}
.project-open {
    overflow:visible
}
html:not(.interaction-ready) .project-open {
    display:none
}
@media(max-width:760px) {
    .hero-menu {
        top:260px
    }
    .hero-invite {
        top:278px
    }
}
@media(max-width:380px) {
    .hero-invite {
        top:248px
    }
    .hero-menu {
        top:237px
    }
    .hero-art {
        height:515px
    }
}