/* Deliberately loaded after public-card.css: device choice changes the card
   composition, it does not navigate away from preview or scale a phone card. */
body[data-preview-device="desktop"]{padding:76px 28px 28px!important;background:radial-gradient(circle at 50% 10%,color-mix(in srgb,var(--qardora-brand,#004c43) 34%,#202522),var(--qardora-page,#252525) 62%)!important}
body[data-preview-device="desktop"] .classic-vcard{width:min(100%,960px)!important;border:0!important;border-radius:0!important;box-shadow:0 32px 92px #0008!important;background:var(--qardora-surface,#f5f5f5)}body[data-preview-device="desktop"] .classic-vcard-canvas{display:none!important}
/* The language selector is anchored to the top-right corner of the card frame,
   never to the browser edge.  All desktop cards share the 960px preview width. */
body[data-preview-device="desktop"] .public-card-language{top:136px!important;right:max(18px,calc(50% - 458px))!important;left:auto!important}
.classic-desktop-card{display:grid;grid-template-rows:minmax(270px,.9fr) minmax(330px,1fr) 92px;min-height:682px;background:var(--qardora-surface,#f5f5f5);color:var(--qardora-ink,#252525);overflow:hidden}.classic-desktop-hero{position:relative;display:flex;align-items:center;padding:58px;background:var(--qardora-brand,#004c43);color:#fff;isolation:isolate;overflow:hidden}.classic-desktop-hero:after{position:absolute;z-index:0;right:-12%;bottom:-238px;left:-12%;height:330px;border-radius:50% 50% 0 0/100% 100% 0 0;background:var(--qardora-surface,#f5f5f5);content:""}.classic-desktop-identity{position:relative;z-index:1;display:grid;grid-template-columns:144px minmax(0,1fr);column-gap:30px;align-items:center;max-width:720px}.classic-desktop-logo{position:absolute;top:30px;left:58px;max-width:128px;max-height:36px;object-fit:contain;filter:brightness(0) invert(1)}.classic-desktop-portrait{display:grid;width:144px;height:144px;place-items:center;border:7px solid var(--qardora-surface,#f5f5f5);border-radius:50%;background:#e9eeea;color:var(--qardora-ink,#252525);object-fit:cover;font-size:3rem;font-weight:800;box-shadow:0 15px 36px #0003}.classic-desktop-identity h1{margin:0;color:#fff;font-size:clamp(2.8rem,6vw,5.4rem);line-height:.88;letter-spacing:-.075em;overflow-wrap:anywhere}.classic-desktop-identity p{margin:14px 0 4px;color:#ffffffd1;font-size:.9rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.classic-desktop-content{display:grid;grid-template-columns:1fr;align-content:center;gap:28px;padding:42px 58px 34px;background:var(--qardora-surface,#f5f5f5)}.classic-desktop-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;max-width:760px;margin:0 auto;width:100%}.classic-desktop-details>.classic-desktop-eyebrow{grid-column:1/-1}.classic-desktop-side{display:flex;justify-content:center;padding:0;border:0}.classic-desktop-eyebrow{margin:0 0 15px;color:var(--qardora-muted,#65716d);font-size:.7rem;font-weight:850;letter-spacing:.15em;text-transform:uppercase}.classic-desktop-contact{display:grid;grid-template-columns:38px minmax(0,1fr);gap:14px;align-items:center;min-height:63px;border-top:1px solid color-mix(in srgb,var(--qardora-border,#d9e1dc) 88%,transparent);color:inherit;text-decoration:none;transition:padding .16s ease,color .16s ease}.classic-desktop-contact:nth-last-child(-n+2){border-bottom:1px solid color-mix(in srgb,var(--qardora-border,#d9e1dc) 88%,transparent)}.classic-desktop-contact:hover{padding-left:5px;color:var(--qardora-brand,#004c43)}.classic-desktop-contact-icon{display:grid;width:32px;height:32px;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--qardora-icon,#004c43) 13%,transparent);color:var(--qardora-icon,#004c43)}.classic-desktop-contact-icon svg,.classic-desktop-social svg,.classic-desktop-action svg{width:18px;height:18px;fill:currentColor}.classic-desktop-contact small{display:block;color:var(--qardora-muted,#65716d);font-size:.62rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.classic-desktop-contact strong{display:block;margin-top:3px;font-size:1rem;overflow-wrap:anywhere}.classic-desktop-social{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}.classic-desktop-social a{display:grid;width:44px;height:44px;place-items:center;border:1px solid color-mix(in srgb,var(--qardora-icon,#004c43) 32%,transparent);border-radius:50%;color:var(--qardora-icon,#004c43);transition:background .16s ease,color .16s ease,transform .16s ease}.classic-desktop-social a:hover{background:var(--qardora-brand,#004c43);color:#fff;transform:translateY(-2px)}.classic-desktop-actions{display:flex;align-items:center;justify-content:center;gap:26px;background:var(--qardora-action,#252525)}.classic-desktop-action{display:grid;width:52px;height:52px;place-items:center;border:1px solid #ffffff8f;border-radius:50%;background:transparent;color:#fff;cursor:pointer;transition:background .16s ease,transform .16s ease}.classic-desktop-action:hover{background:#ffffff22;transform:translateY(-2px)}
body[data-preview-device="desktop"] .karawani-vcard,body[data-preview-device="desktop"] .executive-vcard,body[data-preview-device="desktop"] .hub-vcard,body[data-preview-device="desktop"] .minimal-vcard{width:min(100%,960px)!important;min-height:620px!important;border:0!important;border-radius:0!important;box-shadow:0 32px 92px #0008!important}body[data-preview-device="desktop"] .karawani-vcard{display:grid!important;grid-template-columns:minmax(300px,.92fr) minmax(0,1.35fr);grid-template-rows:1fr auto}body[data-preview-device="desktop"] .karawani-identity{grid-row:1/3;min-height:620px!important;display:flex!important;flex-direction:column;justify-content:center;padding:48px!important}body[data-preview-device="desktop"] .karawani-identity:after{right:-170px;bottom:-10%;left:auto;width:310px;height:120%;border-radius:50% 0 0 50%/50% 0 0 50%}body[data-preview-device="desktop"] .karawani-details{align-content:center;padding:48px 58px 18px!important}body[data-preview-device="desktop"] .karawani-social{padding:16px 58px 28px!important}body[data-preview-device="desktop"] .karawani-actions{grid-column:2}
/* Shared action alignment: a single social icon must look intentionally
   centred, rather than like the first item in a left-aligned list. */
.karawani-social,.hub-social,.classic-desktop-social{justify-content:center!important}
body[data-preview-device="desktop"] .karawani-social{justify-content:center!important}
body[data-preview-device="desktop"] .executive-vcard{display:grid!important;grid-template-columns:minmax(330px,.95fr) minmax(0,1.25fr);grid-template-rows:1fr auto}body[data-preview-device="desktop"] .executive-hero{grid-row:1/3;min-height:620px!important;padding:52px!important}body[data-preview-device="desktop"] .executive-contacts{display:grid!important;grid-template-columns:1fr 1fr;align-content:center;column-gap:30px;padding:52px 58px!important}body[data-preview-device="desktop"] .executive-footer{grid-column:2}
body[data-preview-device="desktop"] .hub-vcard{display:grid!important;grid-template-columns:minmax(290px,.82fr) minmax(0,1.3fr);grid-template-rows:1fr auto;padding:0!important}body[data-preview-device="desktop"] .hub-vcard header{display:flex!important;flex-direction:column;justify-content:center;padding:52px!important;background:var(--card-brand)!important;color:#fff;text-align:left!important}body[data-preview-device="desktop"] .hub-vcard header p{color:#ffffffbf!important}body[data-preview-device="desktop"] .hub-links{align-content:center;padding:52px 58px!important}body[data-preview-device="desktop"] .hub-social{padding:0 58px 32px!important;justify-content:flex-start!important}body[data-preview-device="desktop"] .hub-vcard footer{grid-column:2}
body[data-preview-device="desktop"] .minimal-vcard{display:grid!important;grid-template-columns:minmax(300px,.9fr) minmax(0,1.25fr);grid-template-rows:1fr auto;padding:0!important}body[data-preview-device="desktop"] .minimal-vcard header{display:flex!important;flex-direction:column;justify-content:center;padding:52px!important;border:0!important;background:var(--card-brand)!important;color:#fff}body[data-preview-device="desktop"] .minimal-vcard header p{color:#ffffffbf!important}body[data-preview-device="desktop"] .minimal-vcard header small{color:#fff!important}body[data-preview-device="desktop"] .minimal-vcard section{grid-template-columns:1fr 1fr;gap:0 32px;align-content:center;padding:52px 58px!important}body[data-preview-device="desktop"] .minimal-vcard footer{grid-column:2}
/* One desktop composition contract for every non-Classic template.  The
   content shares the first row; social actions sit within that content area;
   the action footer spans both columns so there can never be exposed gutters. */
body[data-preview-device="desktop"] .karawani-vcard,body[data-preview-device="desktop"] .executive-vcard,body[data-preview-device="desktop"] .hub-vcard,body[data-preview-device="desktop"] .minimal-vcard{grid-template-rows:minmax(0,1fr) 76px!important}
body[data-preview-device="desktop"] .karawani-identity,body[data-preview-device="desktop"] .executive-hero,body[data-preview-device="desktop"] .hub-vcard header,body[data-preview-device="desktop"] .minimal-vcard header{grid-column:1!important;grid-row:1!important;min-height:620px!important}
body[data-preview-device="desktop"] .karawani-details,body[data-preview-device="desktop"] .executive-contacts,body[data-preview-device="desktop"] .hub-links,body[data-preview-device="desktop"] .minimal-vcard section{grid-column:2!important;grid-row:1!important;align-self:start!important;min-width:0!important}
body[data-preview-device="desktop"] .karawani-details{padding:52px 58px 118px!important}
body[data-preview-device="desktop"] .executive-contacts{padding:52px 58px 118px!important}
body[data-preview-device="desktop"] .hub-links{padding:52px 58px 118px!important}
body[data-preview-device="desktop"] .minimal-vcard section{padding:52px 58px 118px!important}
body[data-preview-device="desktop"] .karawani-social,body[data-preview-device="desktop"] .executive-social,body[data-preview-device="desktop"] .hub-social,body[data-preview-device="desktop"] .minimal-social{grid-column:2!important;grid-row:1!important;align-self:end!important;justify-content:center!important;width:100%!important;min-height:82px!important;margin:0!important;padding:18px 58px 28px!important;background:var(--qardora-surface,#fff)!important}
body[data-preview-device="desktop"] .karawani-actions,body[data-preview-device="desktop"] .executive-footer,body[data-preview-device="desktop"] .hub-vcard footer:not(.template-powered-by),body[data-preview-device="desktop"] .minimal-vcard footer:not(.template-powered-by){grid-column:1/-1!important;grid-row:2!important;width:100%!important;margin:0!important}
body[data-preview-device="mobile"] .public-card-language{top:136px!important;right:max(18px,calc(50% - 186px))!important;left:auto!important}
/* The non-Classic phone cards are 500px wide, so retain the same inset on
   those compositions rather than leaving their picker beside the card. */
body[data-preview-device="mobile"]:has(.karawani-vcard, .executive-vcard, .hub-vcard, .minimal-vcard) .public-card-language{right:max(18px,calc(50% - 226px))!important}
@media(max-width:759px){body[data-preview-device="desktop"]{padding:66px 12px 12px!important}body[data-preview-device="desktop"] .classic-vcard{width:100%!important;border:0!important}.classic-desktop-card{grid-template-rows:auto auto 72px;min-height:0}.classic-desktop-hero{padding:72px 26px 34px}.classic-desktop-identity{grid-template-columns:86px minmax(0,1fr);gap:18px}.classic-desktop-portrait{width:86px;height:86px;border-width:4px;font-size:2rem}.classic-desktop-identity h1{font-size:2.7rem}.classic-desktop-content{grid-template-columns:1fr;padding:28px 26px}.classic-desktop-details{padding:0}.classic-desktop-side{padding:26px 0 0;border:0}.classic-desktop-actions{min-height:72px}.classic-desktop-logo{top:24px;left:26px;max-width:100px}}

/* The locale control lives inside the rendered card, never in the page
   chrome.  This intentionally wins over the legacy fixed-position rules
   above, including previews toggled between mobile and desktop. */
[data-template]{position:relative}
body .public-card-language,
body[data-preview-device] .public-card-language,
body[data-preview-device="desktop"] .public-card-language,
body[data-preview-device="mobile"] .public-card-language,
body[data-preview-device="mobile"]:has(.karawani-vcard,.executive-vcard,.hub-vcard,.minimal-vcard) .public-card-language{
  position:absolute!important;
  top:18px!important;
  right:18px!important;
  left:auto!important;
  z-index:40;
}
@media(max-width:759px){
  body .public-card-language,
  body[data-preview-device] .public-card-language{top:14px!important;right:14px!important}
}

/* Profile's desktop curve is decorative only.  Keep identity copy in its own
   stacking layer so the curve can never crop a long name or company line. */
body[data-preview-device="desktop"] .karawani-identity:after{z-index:0!important}
body[data-preview-device="desktop"] .karawani-identity>*{position:relative;z-index:1}
body[data-preview-device="desktop"] .karawani-identity h1{max-width:100%;font-size:clamp(2.35rem,4.4vw,3.8rem)!important;overflow-wrap:anywhere}
/* Keep long email addresses readable in the two-column executive contact grid. */
body[data-preview-device="desktop"] .executive-contacts strong{font-size:.9rem;overflow-wrap:normal;word-break:normal}

/* Shared public-card footer and polished language control.  The language
   picker remains one compact, keyboard-accessible control across templates. */
/* Shared footer and locale control.  The control is a real select for keyboard
   users, with a compact SVG affordance above it. */
.template-powered-by{display:grid;min-height:52px;place-items:center;border-top:1px solid color-mix(in srgb,var(--qardora-border,#d9e1dc) 70%,transparent);background:var(--qardora-surface,#f8f7f2);color:var(--qardora-muted,#65716d);font:800 .68rem/1 Inter,Arial,sans-serif;letter-spacing:.05em;text-align:center}.template-powered-link{color:inherit;text-decoration:none}.template-powered-link:hover,.template-powered-link:focus-visible{text-decoration:underline;text-underline-offset:4px}
.public-card-language{display:grid;width:42px;height:42px;place-items:center;filter:drop-shadow(0 6px 16px rgba(10,28,23,.18));transition:transform .16s ease,filter .16s ease}
.public-card-language span{display:grid;place-items:center;border-color:color-mix(in srgb,var(--qardora-brand,#004c43) 26%,#fff);background:color-mix(in srgb,#fff 94%,var(--qardora-surface,#f8f7f2));color:var(--qardora-brand,#004c43);transition:background .16s ease,color .16s ease,border-color .16s ease}
.public-card-language span svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.public-card-language:hover,.public-card-language:focus-within{transform:translateY(-2px);filter:drop-shadow(0 10px 18px rgba(10,28,23,.25))}
.public-card-language:hover span,.public-card-language:focus-within span{border-color:var(--qardora-brand,#004c43);background:var(--qardora-brand,#004c43);color:#fff}
.public-card-language:focus-within span{outline:3px solid color-mix(in srgb,var(--qardora-brand,#004c43) 38%,transparent);outline-offset:3px}

/* Desktop is a two-column contact composition with a shared action and
   attribution footer.  The profile curve is intentionally mobile-only: on a
   wide card it cut through identity text and made long names unreadable. */
body[data-preview-device="desktop"] .karawani-vcard,
body[data-preview-device="desktop"] .executive-vcard,
body[data-preview-device="desktop"] .hub-vcard,
body[data-preview-device="desktop"] .minimal-vcard{grid-template-rows:minmax(0,1fr) 76px 52px!important}
body[data-preview-device="desktop"] .karawani-identity:after{display:none!important}
body[data-preview-device="desktop"] .karawani-identity{overflow:hidden!important}
body[data-preview-device="desktop"] .karawani-identity h1{max-width:280px!important;font-size:clamp(2.3rem,3.6vw,3.45rem)!important;overflow-wrap:anywhere}
body[data-preview-device="desktop"] .karawani-identity p,
body[data-preview-device="desktop"] .karawani-identity small{max-width:280px;overflow-wrap:anywhere}
body[data-preview-device="desktop"] .karawani-vcard>.template-powered-by,
body[data-preview-device="desktop"] .executive-vcard>.template-powered-by,
body[data-preview-device="desktop"] .hub-vcard>.template-powered-by,
body[data-preview-device="desktop"] .minimal-vcard>.template-powered-by{grid-column:1/-1!important;grid-row:3!important;width:100%!important;margin:0!important}
body[data-preview-device="desktop"] .karawani-actions,
body[data-preview-device="desktop"] .executive-footer,
body[data-preview-device="desktop"] .hub-vcard footer:not(.template-powered-by),
body[data-preview-device="desktop"] .minimal-vcard footer:not(.template-powered-by){grid-row:2!important}
.karawani-vcard .template-powered-by,
.executive-vcard .template-powered-by,
.hub-vcard .template-powered-by,
.minimal-vcard .template-powered-by{width:100%}

/* Mobile Profile cards keep the curved separator below long names and titles.
   Without this protected header height, the decorative surface can cut through
   a legitimate two- or three-line identity. */
@media(max-width:759px){
  .karawani-vcard .karawani-identity{min-height:420px!important;padding-bottom:92px!important}
}

/* The information side of every wide non-Classic card is an intentional
   centre-aligned composition, not a top-aligned column with unused space. */
body[data-preview-device="desktop"] .executive-contacts,
body[data-preview-device="desktop"] .hub-links,
body[data-preview-device="desktop"] .minimal-vcard section{
  align-self:stretch!important;
  align-content:center!important;
}
body[data-preview-device="desktop"] .hub-links{display:grid!important;grid-auto-rows:min-content}

/* A compact, stationary locale button: the interaction is expressed by tone
   and ring, never by a jump or an oversized hover footprint. */
.public-card-language{width:40px!important;height:40px!important;padding:0!important;transform:none!important;filter:drop-shadow(0 4px 12px rgba(10,28,23,.16))!important}
.public-card-language span{width:40px!important;height:40px!important;border-radius:11px!important}
.public-card-language:hover,.public-card-language:focus-within{transform:none!important;filter:drop-shadow(0 7px 15px rgba(10,28,23,.22))!important}
.public-card-language:hover span,.public-card-language:focus-within span{border-color:var(--qardora-brand,#004c43)!important;background:var(--qardora-brand,#004c43)!important;color:#fff!important}

/* Locale is one transparent icon control, never a button nested inside a
   second button. The outer label remains the accessible hit target while the
   inner span is the only visible layer. */
[data-template]>.public-card-language{--locale-ink:var(--qardora-icon,var(--qardora-brand,#004c43));--locale-ring:color-mix(in srgb,var(--locale-ink) 62%,transparent);display:grid!important;width:38px!important;height:38px!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;color:var(--locale-ink)!important;box-shadow:none!important;filter:none!important;transform:none!important}
[data-template]>.public-card-language>span{display:grid!important;width:38px!important;height:38px!important;place-items:center!important;border:1px solid var(--locale-ring)!important;border-radius:50%!important;background:transparent!important;color:var(--locale-ink)!important;box-shadow:none!important}
[data-template]>.public-card-language>span svg{width:20px!important;height:20px!important;stroke:currentColor!important}
[data-template]>.public-card-language:hover,[data-template]>.public-card-language:focus-within{filter:none!important;transform:none!important}
[data-template]>.public-card-language:hover>span,[data-template]>.public-card-language:focus-within>span{border-color:var(--locale-ink)!important;background:color-mix(in srgb,var(--locale-ink) 12%,transparent)!important;color:var(--locale-ink)!important}
[data-template]>.public-card-language:focus-within>span{outline:2px solid color-mix(in srgb,var(--locale-ink) 42%,transparent)!important;outline-offset:3px!important}

/* The directory return action shares the locale control's anchored position
   and material. It stays inside the card frame on every template/device. */
[data-template]>.public-card-home{position:absolute;top:18px;right:66px;z-index:40;display:grid;width:38px;height:38px;place-items:center;border:1px solid color-mix(in srgb,var(--qardora-icon,var(--qardora-brand,#004c43)) 62%,transparent);border-radius:50%;background:transparent;color:var(--qardora-icon,var(--qardora-brand,#004c43));text-decoration:none;transition:background .16s ease,border-color .16s ease}
[data-template]>.public-card-home svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
[data-template]>.public-card-home .sr-only{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;border:0!important;white-space:nowrap!important}
[data-template]>.public-card-home:hover,[data-template]>.public-card-home:focus-visible{border-color:currentColor;background:color-mix(in srgb,currentColor 12%,transparent);outline:none}
@media(max-width:759px){[data-template]>.public-card-home{top:14px;right:62px}}
/* Keep the language control identical across device previews.  The icon uses
   the tenant's icon color on both desktop and mobile; it is never inverted by
   the viewport. */
body[data-preview-device="mobile"] [data-template]>.public-card-language{--locale-ink:var(--qardora-icon,var(--qardora-brand,#004c43));--locale-ring:color-mix(in srgb,var(--locale-ink) 62%,transparent)}
/* Classic always places the control over its dark/branded canvas. */
[data-template="figma-signature"]>.public-card-language{--locale-ink:var(--qardora-surface,#fff);--locale-ring:color-mix(in srgb,var(--qardora-surface,#fff) 72%,transparent)}

/* Legal Signature has a dedicated white information column on wide screens.
   Keep both controls in one horizontal utility row inside that column. */
@media (min-width:760px){
  .legal-signature-vcard>[data-template]{}
  .legal-signature-vcard>.public-card-home{top:28px!important;right:92px!important}
  .legal-signature-vcard>.public-card-language{position:absolute!important;top:28px!important;right:44px!important;left:auto!important;z-index:50!important}
}