/* ===========================================================================
   AdPix Technologies — adpix.co.in
   Hand-written CSS. No framework, no build step.

   Type      Instrument Serif (display) · Inter (text) · IBM Plex Mono (data)
   Colour    Ink on paper. Brand cyan is reserved for annotation graphics —
             it never carries text, so contrast never depends on it.
   ======================================================================== */

@font-face{font-family:Display;src:url(fonts/instrument-serif-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Text;src:url(fonts/inter-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Text;src:url(fonts/inter-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Text;src:url(fonts/inter-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Mono;src:url(fonts/plex-mono-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Mono;src:url(fonts/plex-mono-500.woff2) format('woff2');font-weight:500;font-display:swap}

/* --- tokens ------------------------------------------------------------ */

:root{
  --paper:#fbfaf8;
  --paper-2:#f4f1ea;
  --paper-3:#edeae1;
  --ink:#14151c;
  --ink-2:#4e5260;
  --ink-3:#83879a;
  --rule:#e3dfd6;
  --rule-2:#efece4;
  --accent:#00aeef;              /* graphic only — boxes, marks, rules      */
  --accent-ink:#0a6d96;          /* text-safe darkened brand blue           */
  --accent-wash:rgba(0,174,239,.1);
  --shadow:0 1px 2px rgba(20,21,28,.04),0 12px 32px -18px rgba(20,21,28,.18);

  --measure:74ch;
  --wrap:1180px;
  --pad:clamp(1.25rem,5vw,3.5rem);
  --step:clamp(4.5rem,11vh,8rem);

  color-scheme:light dark;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0e0f13;
    --paper-2:#16181f;
    --paper-3:#1d2028;
    --ink:#eeeef1;
    --ink-2:#a1a5b1;
    --ink-3:#727682;
    --rule:#262931;
    --rule-2:#1c1f26;
    --accent:#3cc6f6;
    --accent-ink:#6fd3f8;
    --accent-wash:rgba(60,198,246,.13);
    --shadow:0 1px 2px rgba(0,0,0,.3),0 14px 36px -20px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --paper:#0e0f13;
  --paper-2:#16181f;
  --paper-3:#1d2028;
  --ink:#eeeef1;
  --ink-2:#a1a5b1;
  --ink-3:#727682;
  --rule:#262931;
  --rule-2:#1c1f26;
  --accent:#3cc6f6;
  --accent-ink:#6fd3f8;
  --accent-wash:rgba(60,198,246,.13);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 14px 36px -20px rgba(0,0,0,.7);
}

/* --- base -------------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Text,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(1rem,.97rem + .16vw,1.075rem);
  line-height:1.62;
  font-feature-settings:'cv05','ss03';
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}

::selection{background:var(--accent-wash);color:var(--ink)}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px;border-radius:3px}
[id]{scroll-margin-top:6rem}

.wrap{width:min(100% - (var(--pad) * 2),var(--wrap));margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--ink);color:var(--paper);padding:.7rem 1.1rem;border-radius:6px;text-decoration:none}

/* --- type -------------------------------------------------------------- */

.display{
  font-family:Display,Georgia,"Times New Roman",serif;
  font-weight:400;
  letter-spacing:-.018em;
  line-height:1.04;
  text-wrap:balance;
}
h1.display{font-size:clamp(2.7rem,6.4vw,5.1rem)}
h2.display{font-size:clamp(2rem,4.1vw,3.2rem);line-height:1.08}
.display em{font-style:italic;color:var(--accent-ink)}

.mono{
  font-family:Mono,ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.705rem;
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.lede{
  font-size:clamp(1.09rem,1.45vw,1.28rem);
  line-height:1.56;
  color:var(--ink-2);
  max-width:46ch;
  text-wrap:pretty;
}
p{text-wrap:pretty}
.muted{color:var(--ink-3)}

/* --- header ------------------------------------------------------------ */

.masthead{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease,background .25s ease;
}
.masthead.is-stuck{border-bottom-color:var(--rule);background:color-mix(in srgb,var(--paper) 94%,transparent)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:1.05rem}

.wordmark{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;letter-spacing:-.01em}
.wordmark img{width:28px;height:auto}
.wordmark b{font-weight:600;font-size:1.06rem}
.wordmark span{color:var(--ink-3);font-weight:400;font-size:1.06rem}

.masthead nav{display:flex;align-items:center;gap:clamp(1rem,2.6vw,2.1rem)}
.masthead nav a{
  text-decoration:none;color:var(--ink-2);font-size:.935rem;
  padding-block:.2rem;border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease;
}
.masthead nav a:hover{color:var(--ink);border-bottom-color:var(--accent)}
.masthead nav a.is-cta{color:var(--ink);font-weight:500;border-bottom-color:var(--rule)}
.masthead nav a.is-cta:hover{border-bottom-color:var(--accent)}
@media (max-width:719px){ .masthead nav .opt{display:none} }

/* --- section scaffolding ----------------------------------------------- */

.section{padding-block:var(--step);border-top:1px solid var(--rule-2)}
.section:first-of-type{border-top:0}

.sec-head{display:grid;gap:1.15rem;margin-bottom:clamp(2.5rem,5vw,3.75rem)}
.sec-index{display:flex;align-items:center;gap:.8rem;color:var(--ink-3)}
.sec-index::after{content:"";flex:1;height:1px;background:var(--rule);max-width:7rem}
.sec-index b{color:var(--accent-ink);font-weight:500}

/* --- hero -------------------------------------------------------------- */

.hero{padding-block:clamp(4rem,12vh,8.5rem) clamp(3.5rem,9vh,6rem)}
.hero .kicker{color:var(--ink-3);margin-bottom:1.9rem;display:flex;align-items:center;gap:.65rem}
.hero .kicker::before{content:"";width:1.6rem;height:1px;background:var(--accent)}
.hero h1{max-width:19ch;margin-bottom:1.9rem}
.hero .lede{max-width:54ch;font-size:clamp(1.12rem,1.6vw,1.36rem)}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem 2.1rem;margin-top:2.6rem}

.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--ink);color:var(--paper);text-decoration:none;
  font-weight:500;font-size:.97rem;
  padding:.82rem 1.45rem;border-radius:7px;
  transition:transform .18s ease,opacity .18s ease;
}
.btn:hover{transform:translateY(-1px);opacity:.88}
.btn svg{width:1rem;height:1rem}

.textlink{
  display:inline-flex;align-items:center;gap:.5rem;
  text-decoration:none;color:var(--ink-2);font-size:.97rem;
  border-bottom:1px solid var(--rule);padding-bottom:.18rem;
  transition:color .2s ease,border-color .2s ease,gap .2s ease;
}
.textlink:hover{color:var(--ink);border-bottom-color:var(--accent);gap:.72rem}

/* --- premise ("the gap") ----------------------------------------------- */

.premise{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:clamp(1.75rem,3.5vw,3rem)}
.premise > li{display:grid;gap:.55rem;padding-top:1.4rem;border-top:1px solid var(--rule)}
.premise h3{font-size:1.09rem;font-weight:600;letter-spacing:-.008em}
.premise p{color:var(--ink-2);font-size:.97rem}
.premise .mono{color:var(--accent-ink);margin-bottom:.35rem}

/* --- worked example ---------------------------------------------------- */

.disclosure{
  display:flex;gap:.8rem;align-items:flex-start;
  border-left:2px solid var(--accent);
  background:var(--accent-wash);
  padding:.85rem 1.1rem;border-radius:0 7px 7px 0;
  font-size:.925rem;color:var(--ink-2);max-width:62ch;
}
.disclosure b{color:var(--ink);font-weight:600}

.example{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);gap:clamp(1.5rem,3.2vw,2.75rem);margin-top:clamp(2rem,4vw,3rem);align-items:start}
@media (max-width:900px){ .example{grid-template-columns:1fr} }

/* the annotated photograph */
.exhibit{position:relative;border-radius:10px;overflow:hidden;background:var(--paper-2);box-shadow:var(--shadow);isolation:isolate}
.exhibit img{width:100%;height:auto}
.exhibit figcaption{
  position:absolute;inset:auto 0 0 0;
  padding:1.9rem .9rem .7rem;
  background:linear-gradient(to top,rgba(8,9,12,.78),transparent);
  color:#f2f4f7;font-family:Mono,ui-monospace,monospace;font-size:.66rem;
  letter-spacing:.1em;text-transform:uppercase;
}

.boxes{position:absolute;inset:0;pointer-events:none}
.box{
  position:absolute;
  left:var(--l);top:var(--t);width:var(--w);height:var(--h);
  border:1.5px solid var(--accent);
  border-radius:2px;
  box-shadow:0 0 0 1px rgba(8,12,16,.34);
  animation:box-in .5s cubic-bezier(.2,.8,.3,1) both;
  animation-delay:var(--d,0ms);
}
.box::after{
  content:attr(data-label);
  position:absolute;left:-1.5px;bottom:calc(100% + 3px);
  background:var(--accent);color:#04222e;
  font-family:Mono,ui-monospace,monospace;font-size:.605rem;font-weight:500;
  letter-spacing:.055em;text-transform:uppercase;white-space:nowrap;
  padding:.13rem .38rem;border-radius:2px;
  animation:box-in .4s ease both;animation-delay:calc(var(--d,0ms) + 130ms);
}
.box.below::after{bottom:auto;top:calc(100% + 3px)}
/* right-align a label when the default top-left position would collide
   with the box stacked above it */
.box.right::after{left:auto;right:-1.5px}
/* push a label clear of the frame's vertical stack entirely. Needed for small
   boxes sitting directly above a much larger one: label heights are fixed in
   px while the photograph scales, so they collide below ~900px. */
.box.outside-left::after{left:auto;right:calc(100% + 4px);bottom:auto;top:-1.5px}
@keyframes box-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}

/* the structured output beside it */
.readout{display:grid;gap:1.4rem;align-content:start}

.payload{
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-radius:10px;
  overflow:hidden;
}
.payload-bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.68rem .95rem;
  border-bottom:1px solid var(--rule);
  color:var(--ink-3);background:var(--paper-3);
}
.payload pre{
  margin:0;padding:1rem .95rem 1.1rem;overflow-x:auto;
  font-family:Mono,ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.775rem;line-height:1.72;color:var(--ink-2);
  tab-size:2;
}
.payload .k{color:var(--ink)}
.payload .s{color:var(--accent-ink)}
.payload .n{color:var(--ink);font-weight:500}
.payload .c{color:var(--ink-3);font-style:italic}
/* bbox convention, stated outside the JSON so the block stays parseable */
.payload-note{padding:0 .95rem 1rem;margin:-.35rem 0 0;color:var(--ink-3);letter-spacing:.06em;text-transform:none;font-size:.68rem}

/* resolved ad matches */
.matches{display:grid;gap:.5rem}
.matches li{
  display:grid;grid-template-columns:1fr auto;gap:.3rem 1rem;align-items:baseline;
  padding:.8rem .95rem;
  border:1px solid var(--rule);border-radius:8px;background:var(--paper-2);
}
.matches strong{font-weight:600;font-size:.965rem;letter-spacing:-.005em}
.matches .why{grid-column:1/-1;color:var(--ink-3);font-size:.87rem}
.matches .tag{color:var(--accent-ink);white-space:nowrap}

/* breadth strip */
.breadth{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(1.25rem,2.5vw,2rem);margin-top:clamp(2.75rem,5vw,4rem)}
.breadth figure{display:grid;gap:.9rem}
.breadth .frame{border-radius:9px;overflow:hidden;background:var(--paper-2);box-shadow:var(--shadow)}
.breadth img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.breadth figcaption{display:flex;flex-wrap:wrap;gap:.35rem}
.chip{
  font-family:Mono,ui-monospace,monospace;font-size:.68rem;letter-spacing:.05em;
  color:var(--ink-2);background:var(--paper-2);
  border:1px solid var(--rule);border-radius:99px;padding:.2rem .6rem;
}
.breadth .label{color:var(--ink-3);margin-bottom:-.35rem}

/* --- approach ---------------------------------------------------------- */

.approach{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:clamp(1.75rem,3.5vw,3rem)}
.approach > li{display:grid;gap:.6rem;align-content:start}
.approach .n{
  font-family:Display,Georgia,serif;font-size:2.35rem;line-height:1;
  color:var(--accent-ink);margin-bottom:.35rem;
}
.approach h3{font-size:1.09rem;font-weight:600;letter-spacing:-.008em}
.approach p{color:var(--ink-2);font-size:.97rem}

.delivery{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:10px;overflow:hidden;
  margin-top:clamp(2.5rem,5vw,3.5rem);
}
.delivery > div{background:var(--paper);padding:1.4rem 1.35rem;display:grid;gap:.4rem;align-content:start}
.delivery dt{font-weight:600;font-size:.99rem}
.delivery dd{margin:0;color:var(--ink-2);font-size:.925rem}
.delivery .mono{color:var(--accent-ink);margin-bottom:.45rem}

/* --- contact ----------------------------------------------------------- */

.contact{border-top:1px solid var(--rule-2)}
.contact .inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:clamp(2rem,5vw,4rem);align-items:end}
@media (max-width:820px){ .contact .inner{grid-template-columns:1fr;align-items:start} }
.contact h2{max-width:15ch;margin-bottom:1.2rem}
.contact p{color:var(--ink-2);max-width:44ch}
.contact-card{display:grid;gap:.9rem;justify-items:start}
.contact-card .mono{color:var(--ink-3)}
.mail{
  font-family:Display,Georgia,serif;font-size:clamp(1.5rem,3.2vw,2.15rem);
  letter-spacing:-.015em;text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--rule);padding-bottom:.15rem;
  transition:border-color .2s ease;
}
.mail:hover{border-bottom-color:var(--accent)}

/* --- footer ------------------------------------------------------------ */

.site-foot{border-top:1px solid var(--rule);padding-block:2.75rem 2.25rem;background:var(--paper-2)}
.foot-grid{display:flex;flex-wrap:wrap;gap:2rem 3rem;justify-content:space-between;align-items:flex-start}
.foot-brand{display:grid;gap:.55rem;max-width:26ch}
.foot-brand .wordmark{margin-bottom:.15rem}
.foot-brand p{color:var(--ink-3);font-size:.865rem}
.foot-nav{display:grid;gap:.55rem}
.foot-nav a{color:var(--ink-2);text-decoration:none;font-size:.925rem;justify-self:start;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.foot-nav a:hover{color:var(--ink);border-bottom-color:var(--accent)}
.foot-nav .mono{color:var(--ink-3);margin-bottom:.25rem}
.foot-base{
  display:flex;flex-wrap:wrap;gap:.6rem 1.75rem;justify-content:space-between;
  margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid var(--rule);
  color:var(--ink-3);font-size:.82rem;
}
.foot-base a{color:var(--ink-3)}
.foot-base a:hover{color:var(--ink-2)}

/* --- theme toggle ------------------------------------------------------- */

.theme-btn{
  display:grid;place-items:center;width:34px;height:34px;
  background:none;border:1px solid var(--rule);border-radius:7px;
  color:var(--ink-2);cursor:pointer;padding:0;
  transition:color .2s ease,border-color .2s ease;
}
.theme-btn:hover{color:var(--ink);border-color:var(--ink-3)}
.theme-btn svg{width:16px;height:16px}
.theme-btn .moon{display:none}
:root[data-theme="dark"] .theme-btn .moon,
:root[data-theme="light"] .theme-btn .sun{display:block}
:root[data-theme="dark"] .theme-btn .sun,
:root[data-theme="light"] .theme-btn .moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-btn .sun{display:none}
  :root:not([data-theme="light"]) .theme-btn .moon{display:block}
}

/* --- motion ------------------------------------------------------------- */

.js .rise{opacity:0;transform:translateY(12px);transition:opacity .45s cubic-bezier(.22,.7,.3,1),transform .45s cubic-bezier(.22,.7,.3,1)}
.js .rise.shown{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0ms!important;transition-duration:1ms!important}
  .js .rise{opacity:1;transform:none}
}