/**
 * @author Uvin Vindula (IAMUVIN)
 * @website https://iamuvin.com
 *
 * Quartz.lk digital business cards, in the v2 site design.
 * Rock and vein palette, Archivo, chamfered corners. Signal orange marks Save Contact only.
 */

@font-face{font-family:"Archivo";src:url(/assets/fonts/archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}

:root{
  --rock:#0F2238;
  --rock-2:#173150;
  --paper:#F5F7FA;
  --vein:#E8EEF4;
  --ink:#0F2238;
  --ink-2:#46586E;
  --line:rgb(15 34 56 / .16);
  --on-rock:#EEF3F9;
  --on-rock-2:#A7B6C8;
  --signal:#F7931A;
  --signal-2:#FFA940;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --cut:14px;
  --chamfer:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%);
  --panel-cut:polygon(0 0,calc(100% - 32px) 0,100% 32px,100% 100%,0 100%);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-height:100svh;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:1rem;line-height:1.55;font-stretch:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* Header: the site brand on rock */
.site-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;padding-inline:clamp(20px,4vw,48px);background:var(--rock);color:var(--on-rock);border-bottom:1px solid rgb(238 243 249 / .16)}
.brand{display:inline-flex;align-items:center;min-height:44px;font-weight:800;font-stretch:116%;font-size:1.75rem;line-height:1;letter-spacing:-.04em;color:var(--on-rock)}
.brand span{font-weight:350;letter-spacing:-.02em;color:var(--on-rock-2)}
@media (max-width:699px){.brand{font-size:1.5rem}}
.brand:focus-visible{outline-color:var(--signal)}
.site-bar .tagline{font-size:.875rem;font-stretch:88%;color:var(--on-rock-2);text-align:right}

/* Layout */
.page{padding:clamp(24px,5vw,64px) 16px 32px;display:flex;flex-direction:column;align-items:center}
.card,.location-section,.qr-section{width:100%;max-width:560px}
.location-section,.qr-section{margin-top:16px}

/* Panels: vein with a chamfered top-right corner */
.card,.location-card,.qr-card,.director-tile{position:relative;isolation:isolate}
.card::before,.location-card::before,.qr-card::before,.director-tile::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--vein);clip-path:var(--panel-cut)}
.card{padding:28px 24px}
.location-card,.qr-card{padding:24px}

/* Photo: square, chamfered */
.photo-wrap{margin-bottom:20px}
.photo{width:140px;aspect-ratio:1;background:var(--paper);clip-path:var(--chamfer)}
.photo img{width:100%;height:100%;object-fit:cover}

/* Identity */
.identity{margin-bottom:24px}
.identity h1{font-size:clamp(1.75rem,1.4rem + 1.4vw,2.25rem);font-weight:500;font-stretch:110%;line-height:1.05;letter-spacing:-.02em}
.identity .title{margin-top:8px;font-size:1rem;font-weight:600}
.identity .company{margin-top:16px;font-size:.875rem;font-weight:600;font-stretch:88%}
.identity .division{font-size:.875rem;font-stretch:88%;color:var(--ink-2)}
.identity .bio{margin-top:14px;max-width:48ch;font-size:.9375rem;color:var(--ink-2)}

/* Buttons: the site .btn shape. Rock by default, signal for Save Contact */
.btn-save,.contact-btn,.directions-btn,.copy-btn,.view-link{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;font:inherit;font-size:.9375rem;font-weight:600;font-stretch:104%;color:var(--on-rock);border:0;background:none;cursor:pointer;transition:transform .2s cubic-bezier(.16,1,.3,1)}
.btn-save::before,.contact-btn::before,.directions-btn::before,.copy-btn::before,.view-link::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--rock);clip-path:var(--chamfer)}
.contact-btn:hover::before,.directions-btn:hover::before,.copy-btn:hover::before,.director-tile:hover .view-link::before{background:var(--rock-2)}
.btn-save:active,.contact-btn:active,.directions-btn:active,.copy-btn:active{transform:translateY(1px)}
.btn-save{width:100%;color:var(--ink)}
.btn-save::before{background:var(--signal)}
.btn-save:hover::before{background:var(--signal-2)}
.contact-btn svg{width:18px;height:18px;flex:none}
.contacts{margin-top:10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.contacts > :only-of-type{grid-column:1 / -1}

/* Factory location */
.location-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
.location-icon{flex:none;padding-top:2px;color:var(--ink)}
.location-icon svg{width:20px;height:20px}
.location-meta{flex:1;min-width:0}
.location-title{font-size:1rem;font-weight:600;line-height:1.25}
.location-address{margin-top:4px;font-size:.9375rem;color:var(--ink-2)}
.map-frame{height:240px;background:var(--paper);border:1px solid var(--line)}
.map-frame iframe{display:block;width:100%;height:100%;border:0}
.map-frame:has(.map-load){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;text-align:center}
.map-load{min-height:48px;padding:0 24px;font:inherit;font-weight:600;color:var(--ink);background:var(--paper);border:1px solid var(--ink);cursor:pointer}
.map-load:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.map-note{margin:0;font-size:.875rem;color:var(--ink-2)}
.directions-btn{width:100%;margin-top:12px}

/* QR */
.qr-title{font-size:1rem;font-weight:600}
.qr-sub{margin:4px 0 16px;font-size:.9375rem;color:var(--ink-2)}
.qr-box{display:inline-flex;padding:16px;background:var(--paper)}
.qr-box canvas,.qr-box svg,.qr-box img{display:block;width:220px;height:220px}
.qr-url{margin-top:16px;display:flex;gap:10px}
.qr-url input{flex:1;min-width:0;min-height:48px;padding:0 12px;border:1px solid var(--line);background:var(--paper);font:inherit;font-size:1rem;color:var(--ink);cursor:pointer}
.copy-btn{padding:0 18px}
.copy-btn.copied::before{background:var(--rock-2)}

/* Footer */
.footer{margin-top:32px;text-align:center;font-size:.875rem;color:var(--ink-2)}
.footer a{display:inline-flex;align-items:center;min-height:44px}
.footer .accent{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:.3em}

/* Directors landing */
.landing{width:100%;max-width:1100px}
.landing-hero{margin-bottom:32px}
.landing-hero h1{font-size:clamp(2.25rem,1.3rem + 3.8vw,4rem);font-weight:450;font-stretch:114%;line-height:1;letter-spacing:-.025em}
.landing-hero p{margin-top:16px;max-width:54ch;font-size:1.0625rem;color:var(--ink-2)}
.directors-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.director-tile{display:flex;flex-direction:column;align-items:flex-start;padding:16px}
.director-tile::before{clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%)}
.director-tile .mini-photo{width:100%;aspect-ratio:1;margin-bottom:14px;background:var(--paper);clip-path:var(--chamfer)}
.director-tile .mini-photo img{width:100%;height:100%;object-fit:cover}
.director-tile h2{font-size:1.0625rem;font-weight:600;line-height:1.25}
.director-tile .role{margin:4px 0 14px;font-size:.875rem;color:var(--ink-2)}
.director-tile .view-link{margin-top:auto;padding:0 18px}

@media (min-width:768px){
  .card{padding:36px 32px}
  .location-card,.qr-card{padding:32px}
  .photo{width:160px}
  .map-frame{height:300px}
  .qr-box canvas,.qr-box svg,.qr-box img{width:260px;height:260px}
}

@media (min-width:1024px){
  .photo{width:180px}
  .qr-box canvas,.qr-box svg,.qr-box img{width:280px;height:280px}
  .directors-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .director-tile{padding:20px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important}
}