/* WebGħalKulħadd - shared rules that must load after the page's own styles */
/* one motion language: everything eases out on the same curve */
:root{--ease-out:cubic-bezier(.16,1,.3,1);--ease-move:cubic-bezier(.65,0,.35,1)}
/* paper grain: a fixed, non-interactive layer so it never repaints on scroll */
body::after{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:220px 220px}
/* page-to-page transitions (Chrome, Edge, Safari 18+; others just load normally) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .2s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vtIn .5s var(--ease-out) both}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0;transform:translateY(12px)}}
.nav{view-transition-name:site-nav}
::view-transition-group(site-nav){animation:none}
::view-transition-old(site-nav){display:none}
::view-transition-new(site-nav){animation:none}
/* headings that lost their label sit flush */
.sec-head > h2:first-child,.cta-inner h2:first-child,section .wrap > h2:first-child{margin-top:0!important}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
@media print{body::after{display:none}}
/* low-commitment call band (like Designjoy's 15-minute intro call) */
.cta-call{margin-top:18px;font-size:.95rem;color:var(--muted)}
main .cta .cta-call a{white-space:normal;display:inline;color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:#D62828;text-decoration-thickness:1.5px;text-underline-offset:4px}
.book-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;padding:22px 28px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface)}
.book-band p{margin:0;font-size:1.02rem;color:var(--ink);max-width:56ch}
.book-band p span{color:var(--muted)}
.book-band .btn{flex:none}
@media(max-width:700px){.book-band{padding:20px}.book-band .btn{width:100%;justify-content:center}}
/* team note: who you're actually dealing with */
.fnote{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:start;max-width:920px}
.fnote .duo-faces > *{width:64px;height:64px;font-size:1.3rem}
.fnote blockquote{background:none;border:0;padding:0;box-shadow:none;margin:0;font-family:"Clash Display","Montserrat",sans-serif;font-weight:500;font-size:clamp(1.35rem,2.6vw,2rem);line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.fnote figcaption{margin-top:18px;color:var(--muted);font-size:.95rem}
.fnote figcaption b{color:var(--ink);font-weight:600}
@media(max-width:600px){.fnote{grid-template-columns:minmax(0,1fr)}}
/* phone menu: call and WhatsApp one tap away */
/* the header blur traps a fixed menu inside it; drop it while the menu is open */
body.menu-open .nav .brand{position:relative;z-index:85}
body.menu-open .nav{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:var(--bg)}
.nav-quick{display:none}
@media(max-width:1180px){
  .nav-links a.nav-cta{font-family:"Montserrat",sans-serif;font-size:1rem;justify-content:center;width:100%;max-width:340px}
  .nav-quick{display:flex;gap:10px;margin-top:10px;width:100%;max-width:340px}
  .nav-quick a{flex:1;display:inline-flex;justify-content:center;align-items:center;min-height:48px;border:1px solid var(--line-strong);border-radius:4px;font-family:"Montserrat",sans-serif;font-size:.95rem;font-weight:700}
}

/* robustness: grid columns may shrink below their content, long words (emails, links) wrap
   instead of pushing the page sideways at 320px or with large text settings */
.cta-inner > *,.hero-grid > *,.sc-wrap > *,.chk-grid > *,.foot-grid > *,.orbit-wrap > *,.sx-card > *{min-width:0}
main p,main li,main dd,footer p,footer li,.foot-bottom{overflow-wrap:break-word}
.contact-list a{overflow-wrap:anywhere}
/* phones: every tap target at least 44px tall, no label below 12px */
@media(max-width:760px){
  footer a:not(.brand),.contact-list a,.txt-link,.nav .brand{min-height:44px;display:inline-flex;align-items:center}
  .orb-node,.flag,.wtag,.q,.cat,.case-tag,.face-ph,.sx-tags span,.wc-cat,main s,.foot-h,.lang button,.hero-proof b,.svc-mt,.shot-note,.sc-first b,.wa-k,.contact-list .k,.portrait .ph{font-size:12px!important}
}

/* no eyebrows, no shouty small caps: labels read as ordinary sentence-case text */
.eyebrow{display:none!important}
.work-card .wc-cat,.wg-tag,.wg-body .cat,.svc-row .svc-mt,.sc-first b,.price-card .pc-tag,.price-card .from,.hero-proof b,.founder-body .role,.foot-col h4,.foot-col .foot-h,.field label,.contact-list .k,.sx-card .cat,.pj-top,.pj-empty .k,.feat-copy .cat,.cs-next .k,.cs-meta dt,.cs-credits dt,.shot-note,.pg-head .meta .k,.case-copy .cat,.way .wtag,.way .flag,.wa-k,.form-k,.strip s,.rc-price span,.pan-lab,.menu-grid .q,.face-ph,.cmp-side-lab,.care-list s,.cb s,.g-k,.cue,.sc-top span,.portrait .ph,.wg-shot .ph,main s{text-transform:none!important;letter-spacing:0!important}
.hero-proof b,.sc-first b,.pj-top,.feat-copy .cat,.cs-meta dt,.cs-credits dt,.foot-col h4,.foot-col .foot-h,.price-card .pc-tag,.way .wtag,.wa-k,.form-k,.pan-lab,.menu-grid .q,.contact-list .k,.pj-empty .k,.cs-next .k,.sx-card .cat,.case-copy .cat,.wg-body .cat,.work-card .wc-cat,.svc-row .svc-mt,.strip s,.care-list s,.cb s{font-size:.9rem!important;font-weight:600}
.field label{font-size:.88rem!important;font-weight:600}
.sx-tags span,.cmp-side small,[role=tab] small{text-transform:none!important;letter-spacing:0!important;font-size:.8rem!important}
.g-k,.way .flag,.rc-price span,.shot-note,.cue{font-size:.8rem!important}
main h1,main h2,main h3{overflow-wrap:normal;hyphens:manual}

/* restraint: the red italic accent lives only in the homepage headline; no drawn underlines; no grain */
main :is(h1,h2,h3) em{font-family:inherit!important;font-style:normal!important;color:inherit!important;font-weight:inherit!important;letter-spacing:inherit!important}
main .hero h1 em{color:var(--accent)!important}
.hl{background-image:none!important;padding:0!important;font-weight:600;color:inherit}
body::after{content:none!important;display:none!important}
.steps-line{font-size:1.05rem;color:var(--muted);max-width:70ch;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.steps-line b{color:var(--ink)}
.steps-line a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px;white-space:nowrap}
.fnote-sm{grid-template-columns:auto minmax(0,1fr);gap:16px;margin-top:30px;max-width:46ch}
.fnote-sm .duo-faces > *{width:44px;height:44px;font-size:1rem}
.fnote-sm blockquote{font-size:1.02rem!important;line-height:1.5!important;font-family:"Montserrat",sans-serif!important;font-weight:500!important;color:var(--ink)}
.fnote-sm figcaption{margin-top:10px;font-size:.88rem}

/* "Next step" box: red text on navy failed contrast (3.3:1). Make the action a solid red button with white text instead. */
a.cs-next > em{justify-self:start;color:#fff;background:#D62828;padding:12px 20px;border-radius:4px}

/* copy buttons beside the phone number and email (contact page) */
.contact-list li:has(.copy-btn) a{margin-left:auto}
@media(max-width:560px){.contact-list li:has(.copy-btn){display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px}.contact-list li:has(.copy-btn) .k{grid-column:1/-1}.contact-list li:has(.copy-btn) a{margin-left:0}}
.copy-btn{flex:none;min-height:36px;padding:0 12px;border:1px solid var(--line-strong);border-radius:4px;background:transparent;color:var(--ink);font:600 .8rem/1 "Montserrat",sans-serif;cursor:pointer;transition:border-color .2s ease,color .2s ease;vertical-align:middle}
.copy-btn:hover{border-color:var(--ink)}
.copy-btn.done{border-color:#D62828}
.save-contact{margin-top:18px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Smooth scrolling into dark sections (2026-10-20).
   Before: the whole page's background and text colour faded over 0.9s while the header blurred what was behind it,
   so the browser redrew everything on every frame and scrolling stuttered.
   Now: the cream stays put and a navy layer fades in on top of it (handled by the graphics chip, no redraw),
   text fades quicker, and the header and phone bar use a solid tint instead of a live blur. Same look. */
html{background-color:#FAF7F1}
body{background-color:transparent;transition:color .5s ease}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:#14202C;opacity:0;transition:opacity .5s ease;pointer-events:none}
body.theme-navy::before,body.theme-ink::before{opacity:1}
.nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:color-mix(in srgb,var(--bg) 95%,transparent)}
.sticky-cta{backdrop-filter:none;-webkit-backdrop-filter:none;background:color-mix(in srgb,var(--bg) 97%,transparent)}
@media(prefers-reduced-motion:reduce){body::before,body{transition:none}}


/* quick enquiry form above the footer (added by site.js on pages without a form) */
.enq{padding-top:clamp(70px,9vw,110px);padding-bottom:clamp(40px,6vw,70px)}
.enq-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,72px);align-items:start}
.enq-copy h2{font-size:clamp(2rem,4vw,3.2rem);line-height:1.02}
.enq-copy p{color:var(--muted);margin-top:16px;max-width:42ch;font-size:1.05rem}
.enq-copy .enq-alt{font-size:.98rem}
.enq-copy .enq-alt a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.enq-row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.enq-form textarea{resize:vertical}
.enq-btn{width:100%;justify-content:center;margin-top:4px}
@media(max-width:860px){.enq-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:520px){.enq-row{grid-template-columns:minmax(0,1fr)}}
.enq .form-note a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}


/* ============================================================
   One phone for the whole site (2026-10-23): the Why us iPhone.
   Flat navy body, rounded corners, a pill notch, the time on the left and signal bars on the right.
   Applies to the drawn examples (.art-phone), the FINEX screenshot phones (.pframe) and the review card demo (.nfc-phone).
   ============================================================ */
/* the shared status bar (also used on Why us) */
.m-st{position:relative;display:flex;justify-content:space-between;align-items:center;padding:8px 16px 6px;font-size:.7rem;color:#14202C}
.m-st::after{content:"";position:absolute;left:50%;top:6px;transform:translateX(-50%);width:56px;height:16px;border-radius:99px;background:#14202C}
.m-st b{font-weight:600}
.m-st u{display:flex;gap:2px;align-items:flex-end;text-decoration:none}
.m-st u i{width:3px;height:5px;border-radius:1px;background:rgba(20,32,44,.4)}
.m-st u i:nth-child(2){height:7px}.m-st u i:nth-child(3){height:9px}

/* drawn examples on the service pages */
html .art-phone{width:min(300px,100%);aspect-ratio:9/19.5;border:10px solid #14202C;border-radius:48px;background:#14202C;box-shadow:0 18px 30px -22px rgba(20,32,44,.55),0 34px 60px -36px rgba(20,32,44,.35)}
html .art-scr{height:100%;min-height:0;border-radius:38px;background:#FAF7F1}
html .art-scr .m-st{padding:12px 22px 8px;font-size:.78rem}
html .art-scr .m-st::after{top:9px;width:84px;height:24px}
html .art-scr .aw-bar{padding-top:12px}

/* FINEX screenshots */
html .pframe{padding:0;border:7px solid #14202C;background:#14202C;border-radius:16%/7.3%;box-shadow:0 18px 30px -22px rgba(20,32,44,.55),0 30px 50px -34px rgba(20,32,44,.35)}
html .pframe::before{content:"9:41";height:11cqw;padding:0 7cqw;border-radius:12.5cqw 12.5cqw 0 0;font:600 4.6cqw/11cqw "Montserrat",system-ui,sans-serif;letter-spacing:0;color:#fff;
  background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 13 9%22 fill=%22rgba%28255%2C255%2C255%2C.75%29%22%3E%3Crect x=%220%22 y=%225%22 width=%223%22 height=%224%22 rx=%221%22/%3E%3Crect x=%225%22 y=%223%22 width=%223%22 height=%226%22 rx=%221%22/%3E%3Crect x=%2210%22 y=%220%22 width=%223%22 height=%229%22 rx=%221%22/%3E%3C/svg%3E") right 7cqw center/6.5cqw auto no-repeat,linear-gradient(90deg,#0c2346,#1d4a86 50%,#0e2649)}
html .pframe.pf-light::before{color:#14202C;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 13 9%22 fill=%22rgba%2820%2C32%2C44%2C.4%29%22%3E%3Crect x=%220%22 y=%225%22 width=%223%22 height=%224%22 rx=%221%22/%3E%3Crect x=%225%22 y=%223%22 width=%223%22 height=%226%22 rx=%221%22/%3E%3Crect x=%2210%22 y=%220%22 width=%223%22 height=%229%22 rx=%221%22/%3E%3C/svg%3E") right 7cqw center/6.5cqw auto no-repeat,#fff}
html .pframe::after{top:calc(7px + 3cqw);width:28cqw;height:8cqw;background:#14202C}
html .pframe img{border-radius:0 0 12.5cqw 12.5cqw}
html .feat-visual .pframe::after{top:calc(7px + 3cqw)}

/* review card tap demo */
html .nfc-phone{border:0;padding:9px;background:#14202C;border-radius:40px;box-shadow:0 18px 30px -22px rgba(20,32,44,.55),0 50px 80px -40px rgba(20,32,44,.45)}
html .nfc-phone .phone-screen{border-radius:31px}
html .nfc-phone .phone-status{position:relative;padding:9px 16px 6px;font-size:.66rem;font-weight:600;letter-spacing:0;color:var(--ink)}
html .nfc-phone .phone-status::after{content:"";position:absolute;left:50%;top:6px;transform:translateX(-50%);width:28%;height:15px;border-radius:99px;background:#14202C}
html .nfc-phone .phone-status u{display:flex;gap:2px;align-items:flex-end;text-decoration:none}
html .nfc-phone .phone-status u i{width:3px;height:5px;border-radius:1px;background:currentColor;opacity:.45}
html .nfc-phone .phone-status u i:nth-child(2){height:7px}html .nfc-phone .phone-status u i:nth-child(3){height:9px}
@media(max-width:820px){html .nfc-phone{border-radius:34px;padding:7px}html .nfc-phone .phone-screen{border-radius:27px}}
@media(max-width:560px){html .nfc-phone{border-radius:28px;padding:6px}html .nfc-phone .phone-screen{border-radius:22px}html .nfc-phone .phone-status{font-size:.55rem;padding:7px 12px 4px}html .nfc-phone .phone-status::after{height:11px;top:5px}}
@media(max-width:560px){html .art-phone{border-width:8px;border-radius:40px}html .art-scr{border-radius:32px}}


/* ============================================================
   One open/close marker for the whole site (2026-10-23).
   A round button with a chevron: points down when closed, flips up when open,
   and the circle fills red when open. Used on every FAQ and on "Add more detail".
   ============================================================ */
html .faq summary{padding-right:58px}
html .faq summary::after{content:"";position:absolute;right:0;top:50%;width:34px;height:34px;margin-top:-17px;border-radius:50%;
  border:1px solid var(--line-strong);background:transparent;transform:none;transition:background-color .25s ease,border-color .25s ease}
html .faq summary::before{content:"";position:absolute;right:9px;top:50%;width:16px;height:16px;margin-top:-8px;z-index:1;
  background:var(--ink);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 9l6 6 6-6%22/%3E%3C/svg%3E") center/16px 16px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 9l6 6 6-6%22/%3E%3C/svg%3E") center/16px 16px no-repeat;
  transform:none;transition:transform .3s cubic-bezier(.16,1,.3,1),background-color .25s ease}
html .faq summary:hover::after{border-color:var(--ink)}
html .faq details[open] summary::after{background:#D62828;border-color:#D62828}
html .faq details[open] summary::before{transform:rotate(180deg);background:#fff}

html .more-fields > summary{position:relative;padding-left:44px}
html .more-fields > summary::after{content:"";position:absolute;left:0;top:50%;width:30px;height:30px;margin-top:-15px;border-radius:50%;
  border:1px solid var(--line-strong);transition:background-color .25s ease,border-color .25s ease}
html .more-fields > summary::before{content:"";position:absolute;left:8px;top:50%;width:14px;height:14px;margin-top:-7px;z-index:1;border:0;border-radius:0;display:block;
  background:var(--ink);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 9l6 6 6-6%22/%3E%3C/svg%3E") center/14px 14px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 9l6 6 6-6%22/%3E%3C/svg%3E") center/14px 14px no-repeat;transform:none;transition:transform .3s cubic-bezier(.16,1,.3,1)}
html .more-fields > summary:hover::after{border-color:var(--ink)}
html .more-fields[open] > summary::after{background:#D62828;border-color:#D62828}
html .more-fields[open] > summary::before{content:"";transform:rotate(180deg);background:#fff}
@media(prefers-reduced-motion:reduce){html .faq summary::before,html .more-fields > summary::before{transition:none}}


/* contact form choices: tappable buttons instead of raw checkboxes and radios (2026-10-23) */
fieldset.pick{border:0;margin:0 0 20px;padding:0;min-width:0}
fieldset.pick legend{display:block;padding:0;margin-bottom:10px;font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex;cursor:pointer}
.chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.chip > span{display:inline-flex;align-items:center;min-height:42px;padding:8px 15px;border:1px solid var(--line-strong);border-radius:999px;
  font-size:.9rem;font-weight:600;line-height:1.25;color:var(--ink);background:transparent;transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.chip:hover > span{border-color:var(--ink)}
.chip input:checked + span{background:#D62828;border-color:#D62828;color:#fff}
.chip input:focus-visible + span{outline:2px solid #D62828;outline-offset:2px}
/* the first question: three big choices */
.pick-intent .chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pick-intent .chip > span{flex-direction:column;align-items:flex-start;justify-content:center;width:100%;min-height:74px;padding:12px 14px;border-radius:10px;font-size:.95rem}
.pick-intent .chip small{display:block;margin-top:4px;font-size:.78rem;font-weight:500;opacity:.8}
.project-only{border-left:0;margin-bottom:6px}
@media(max-width:520px){.pick-intent .chips{grid-template-columns:minmax(0,1fr)}.pick-intent .chip > span{min-height:58px}}
@media(prefers-reduced-motion:reduce){.chip > span{transition:none}}

/* ---- top ribbon: review cards (in the page flow; the fixed nav sits under it until it scrolls away) ---- */
.ribbon{position:relative;z-index:91;display:flex;align-items:center;justify-content:center;gap:12px;min-height:40px;padding:8px 20px;
  background:#14202C;color:#FAF7F1;text-decoration:none;font-size:.84rem;line-height:1.35;text-align:center}
.ribbon i{width:7px;height:7px;border-radius:50%;background:#E5484D;flex:none}
.ribbon b{font-weight:700}
.ribbon em{font-style:normal;font-weight:700;color:#fff;border-bottom:1px solid rgba(250,247,241,.45);white-space:nowrap;transition:border-color .2s}
.ribbon em span{display:inline-block;transition:transform .25s ease}
.ribbon:hover em{border-color:#fff}.ribbon:hover em span{transform:translateX(3px)}
.ribbon:focus-visible{outline:2px solid #E5484D;outline-offset:-4px}
.ribbon + .nav{top:40px}
@media(max-width:640px){.ribbon{font-size:.8rem;gap:10px;padding:8px 14px}.ribbon .rb-long{display:none}}
body.intro-lock .ribbon{opacity:0}
body.intro-out .ribbon{animation:contentIn 1.05s cubic-bezier(.22,.61,.36,1) forwards}
body.menu-open .ribbon{visibility:hidden}
body.menu-open .ribbon + .nav{top:0!important}

/* ---- "What we do" rows: one grid for every row, so numbers, headlines and copy line up ---- */
@media(min-width:821px){
  .svc-row,.svc-row:nth-child(even){grid-template-columns:3.2rem minmax(0,1fr) minmax(0,1.1fr);gap:40px}
}
.svc-copy .tag-links{display:block;width:fit-content;border-bottom:0;padding-bottom:0;line-height:1.7}
.svc-copy .tag-links a{text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}