/* dt-ux.com — static replica
   Every value here was measured off the live Framer site's computed styles,
   not eyeballed. Breakpoints match the live site: desktop >=1100, tablet
   770-1099, phone <770. */

/* ---------- fonts (self-hosted, latin + latin-ext) ---------- */
@font-face{font-family:'Merriweather';font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/merriweather-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Merriweather';font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/merriweather-500-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
/* Inter is the workhorse: one variable file per subset covers 100-900, which
   is fewer bytes than the four static Work Sans weights it replaces. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/inter-var-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/inter-var-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/fraunces-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/fraunces-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ---------- tokens ---------- */
:root{
  --ink:#000000;          /* rgb(0,0,0)       body copy, headings */
  --ink-2:#473c39;        /* rgb(71,60,57)    case study body copy */
  --muted:#7c6d67;        /* rgb(124,109,103) secondary / captions */
  --accent:#92400e;       /* rgb(146,64,14)   the ✽ and pull-quote emphasis */
  --faint:#969696;        /* rgb(150,150,150) footer */
  --paper:#ffffff;
  --rule:#e3e3e3;

  --display:'Merriweather',Georgia,'Times New Roman',serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --mark:'Fraunces',Georgia,serif;

  --pad:80px;             /* page gutter, desktop */
  --col:1000px;           /* case study content column */
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:18px;line-height:1.4;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
main{display:block;background:#fbfaf9;padding-bottom:186px;}
a{color:inherit;}
:where(a,button):focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* ---------- shell ---------- */
.page{padding:0 var(--pad);}

header.top{
  display:flex;align-items:baseline;justify-content:space-between;
  padding:25px var(--pad) 0;
}
.mark{
  font-family:var(--mark);font-weight:400;font-size:26px;line-height:1.4;
  letter-spacing:-0.52px;color:var(--ink);text-decoration:none;
}
.nav a{
  font-family:var(--body);font-weight:500;font-size:20px;line-height:1.4;
  color:var(--ink);text-decoration:none;
}
@media (hover:hover){.nav a:hover{color:var(--muted);}}

/* ---------- home hero ----------
   Vertical positions are taken from the live page: eyebrow at y=160, avatar at
   y=265, first work entry at y=787. */
.hero{padding:99px 0 0;max-width:1200px;}
.eyebrow{
  font-size:18px;line-height:1.4;color:var(--ink);margin:0;
}
.avatar{
  width:120px;height:100px;border-radius:60px;object-fit:cover;
  margin:80px 0 24px;
}
h1.name{
  font-family:var(--display);font-weight:500;font-size:40px;line-height:56px;
  margin:0;color:var(--ink);letter-spacing:normal;
}
h1.name .star{color:var(--accent);}
h1.name .sub{color:var(--muted);display:block;}

/* ---------- home work list ----------
   The work column is inset a further 150px beyond the page gutter, so entries
   start at 230px on desktop. Top padding and side inset live in one rule; a
   separate .work-col rule silently reset padding-top to 0. */
.work{padding:280px 150px 0;}
.entry{display:block;text-decoration:none;margin:0 0 54px;}
.entry-head{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;
  margin:0 0 30px;
}
.entry h3{
  font-family:var(--display);font-weight:500;font-size:24px;line-height:33.6px;
  margin:0;color:var(--ink);
}
.entry .company{
  font-family:var(--body);font-weight:500;font-size:20px;line-height:28px;
  margin:8px 0 0;color:var(--muted);
}
.entry .desc{
  font-size:18px;line-height:25.2px;margin:0;color:var(--muted);
}
/* The source images are 980x626, but the live site crops them to a shorter band
   per entry rather than showing the full frame. Aspect ratios preserve that crop
   at any width; cover keeps the app centred as the column narrows. */
.entry .shot{width:100%;height:auto;object-fit:cover;object-position:center;}
.entry.e1 .shot{aspect-ratio:980/450;}
.entry.e2 .shot{aspect-ratio:980/425;}
.entry.e3 .shot{aspect-ratio:980/450;}
@media (hover:hover){.entry:hover h3{color:var(--muted);}}

/* ---------- footer ----------
   A black 112px band below the warm page ground: 40px padding, the credit line
   left, the LinkedIn mark right. Measured off the live page. */
footer{
  background:#000000;padding:40px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  font-size:18px;line-height:25.2px;color:var(--faint);
}
footer p{margin:0;}
footer a{color:var(--faint);text-decoration:none;}
@media (hover:hover){footer a:hover{text-decoration:underline;}}
footer .sep{padding:0 10px;}
footer .in{flex:none;width:32px;height:32px;display:block;}
footer .in svg{width:32px;height:32px;fill:var(--faint);display:block;}
@media (hover:hover){footer .in:hover svg{fill:#ffffff;}}

/* ---------- case study ----------
   Measured columns at 1440: the page column runs 220-1220 (1000 wide); inside a
   section the label sits at 220 (200 wide) and the body at 436 (784 wide). */
/* The gap below the standfirst differs per page because each lede runs to a
   different number of lines; measured individually. */
.cs{padding:99px var(--pad) 205px;}
.cs.pad-sbi{padding-bottom:134px;}
.cs.pad-ds{padding-bottom:210px;}
.cs-col{max-width:1000px;margin:0 auto;}
.cs-meta{font-size:18px;line-height:25.2px;color:var(--ink);margin:0;}
h1.cs-title{
  font-family:var(--display);font-weight:500;font-size:64px;line-height:1.2;
  letter-spacing:-0.02em;margin:22px 0 0;color:var(--muted);
}
h1.cs-title .lead{color:var(--ink);}
.cs-lede{
  font-family:var(--body);font-weight:400;font-size:32px;line-height:1.4;
  color:var(--ink);margin:52px 0 0;max-width:800px;
}

.section{
  display:grid;grid-template-columns:200px 784px;gap:16px;
  max-width:1000px;margin:0 auto 160px;align-items:start;
}
.section > h3{
  font-family:var(--display);font-weight:500;font-size:24px;line-height:33.6px;
  margin:0;color:var(--ink);
}
.section .body p{
  font-size:18px;line-height:25.2px;color:var(--ink-2);margin:0;
}
/* Body rhythm, measured off the live pages: 20px between consecutive
   paragraphs, ~80px across a change of block type, 10px down to a caption. */
.section .body > * + *{margin-top:80px;}
.section .body > p + p{margin-top:20px;}
/* a pull quote is still a <p>, so it needs to opt back out of the 20px rule */
.section .body > * + p.pullquote{margin-top:80px;}
.section .body > p.pullquote + *{margin-top:80px;}
.section .body > p + h4.callout{margin-top:40px;}
.section .body > h3 + *{margin-top:16px;}
.section .body h3{
  font-family:var(--display);font-weight:500;font-size:24px;line-height:33.6px;
  margin:0;color:var(--ink);
}
.section .body code{
  font-family:'DM Mono',ui-monospace,'SF Mono',SFMono-Regular,Menlo,monospace;
  font-size:0.9em;background:#f0eeed;padding:1px 5px;border-radius:3px;
}
.section .body .caption{font-size:14px;line-height:19.6px;color:var(--ink-2);}

/* a checklist: 20px medium items indented from the body column */
ul.points{list-style:none;margin:0;padding:0;}
ul.points li{
  font-family:var(--body);font-weight:500;font-size:20px;line-height:28px;
  color:var(--ink-2);padding-left:48px;position:relative;margin:0;
}
ul.points li + li{margin-top:18px;}
ul.points li::before{
  content:"";position:absolute;left:24px;top:12px;
  width:6px;height:6px;border-radius:50%;background:var(--muted);
}

/* three-up definition cards inside the body column */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:80px 32px;}
.cards.two{grid-template-columns:repeat(2,1fr);}
/* Two-up cards sit on a tinted panel; three-up cards run plain on the page. */
.cards.two .card{background:#f3f1f1;padding:24px;border-radius:16px;}
.card h4{
  font-family:var(--body);font-weight:500;font-size:20px;line-height:28px;
  margin:0 0 10px;color:var(--ink);
}
.section .body .card p{font-size:14px;line-height:19.6px;color:var(--ink-2);margin:0;}

/* ---------- case study media ----------
   Three row widths are used on the live pages: the full page gutter (1280),
   a wider centred band (940), and the body column (784). */
figure{margin:0;}
figure img{width:100%;height:auto;border-radius:16px;}
/* Live boxes have their own aspect and object-fit, independent of the source
   image's natural ratio. Reproduced here so the crops match. */
.ar-hero-l img{aspect-ratio:856/400;object-fit:contain;}
.ar-sq-contain img{aspect-ratio:1;object-fit:contain;}
.ar-sq-cover img{aspect-ratio:1;object-fit:cover;}
.ar-before img{aspect-ratio:458/350;object-fit:contain;}
.ar-split-l img{aspect-ratio:597/350;object-fit:contain;}
.ar-split-r img{aspect-ratio:319/170;object-fit:contain;}
figure.square img{border-radius:0;}
figcaption{font-size:14px;line-height:19.6px;color:var(--ink-2);margin-top:10px;}

/* Major media blocks sit 160px from their neighbours; rows stacked inside a
   group sit 24px apart, matching the live page. */
.media{margin:0 auto 160px;display:grid;gap:24px;}
.mediagroup{margin:0 auto 160px;display:grid;gap:24px;}
.mediagroup .media{margin:0;}
.section .body .media{margin:0;}
.media-full{max-width:1280px;}
.media-wide{max-width:940px;}
.media-body{max-width:1000px;grid-template-columns:200px 784px;gap:16px;}
.media-body > .slot{grid-column:2;}

.g-hero{grid-template-columns:856fr 400fr;}
.g-even{grid-template-columns:1fr 1fr;}
.g-split{grid-template-columns:597fr 319fr;align-items:start;}
.g-split .stack{display:grid;gap:10px;}
.g-tight{grid-template-columns:1fr 1fr;gap:20px;}

/* ---------- pull quotes and stats (SBI, design system) ---------- */
/* No margin declared here: the sibling rules above own the spacing, and a
   margin:0 at this specificity would silently cancel them. */
.pullquote,.section .body p.pullquote{
  font-family:var(--display);font-weight:500;font-size:40px;line-height:1.3;
  color:var(--ink);
}
.pullquote em{font-style:normal;color:var(--accent);}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.stats p.stat,.section .body p.stat{
  font-family:var(--display);font-weight:500;font-size:40px;line-height:1.3;
  color:var(--ink);margin:0 0 8px;
}
.stats p{font-size:18px;line-height:25.2px;color:var(--ink-2);margin:0;}

/* ---------- SBI media boxes ---------- */
.g-sbi-hero{grid-template-columns:754fr 502fr;}
.ar-sbi-hero-l img{aspect-ratio:754/400;object-fit:cover;}
.ar-sbi-hero-r img{aspect-ratio:502/400;object-fit:cover;}
.ar-sbi-before img{aspect-ratio:458/350;object-fit:cover;}
.g-audit{grid-template-columns:380fr 404fr;gap:0;align-items:start;}
.ar-audit-l img{aspect-ratio:380/280;object-fit:contain;}
.ar-audit-r img{aspect-ratio:428/321;object-fit:contain;}
.ar-wide-1 img{aspect-ratio:784/447;object-fit:cover;}
.ar-wide-2 img{aspect-ratio:784/482;object-fit:cover;}
.g-charts{grid-template-columns:454px 374px;gap:0;max-width:828px;margin-left:400px;margin-right:auto;}
/* 400px offset + 828px of fixed columns needs 1228px; below that it pushed the
   page wider than the viewport. Go fluid before the numbers stop fitting. */
@media (max-width:1279px){
  .g-charts{grid-template-columns:454fr 374fr;max-width:100%;margin-left:auto;}
}
.ar-chart-l img{aspect-ratio:454/292;object-fit:cover;}
.ar-chart-r img{aspect-ratio:374/292;object-fit:cover;}

/* ---------- design system blocks ---------- */
.ar-628 img{aspect-ratio:628/400;object-fit:cover;}
.ar-628b img{aspect-ratio:628/374;object-fit:cover;border-radius:10px;}
.ar-784-390 img{aspect-ratio:784/390;object-fit:cover;}
.ar-784-380 img{aspect-ratio:784/380;object-fit:cover;}
.ar-784-400 img{aspect-ratio:784/400;object-fit:cover;}
.ar-784-450 img{aspect-ratio:784/450;object-fit:cover;}

.section .body h4.callout{
  font-family:var(--body);font-weight:500;font-size:20px;line-height:28px;
  color:var(--ink-2);margin:0;
}

/* failure mode -> tool -> decision table */
.table{display:grid;gap:0;}
.trow{
  display:grid;grid-template-columns:265px 264px 255px;gap:0;
  padding:14px 0;border-bottom:1px solid var(--rule);align-items:start;
}
.trow p{font-size:14px;line-height:19.6px;color:var(--ink-2);margin:0;padding-right:16px;}
.trow.thead p{
  font-family:var(--body);font-weight:500;font-size:20px;line-height:28px;
  color:var(--ink);
}
.trow code{
  font-family:'DM Mono',ui-monospace,'SF Mono',SFMono-Regular,Menlo,monospace;
  font-size:14px;background:#f0eeed;padding:1px 5px;border-radius:3px;
}

blockquote.quote{margin:0;padding-left:44px;}
blockquote.quote h3{
  font-family:var(--display);font-weight:500;font-size:24px;line-height:33.6px;
  color:var(--ink);margin:0;
}
blockquote.quote p{font-size:18px;line-height:25.2px;color:var(--ink-2);margin:16px 0 0;padding-left:34px;}

.status{padding-left:123px;}
.status h3{
  font-family:var(--display);font-weight:500;font-size:24px;line-height:33.6px;
  color:var(--ink);margin:0;
}
.status h3 + p{margin-top:16px;}
.status p + h3{margin-top:40px;}
.status p{font-size:18px;line-height:25.2px;color:var(--ink-2);margin:0;}

main.short{padding-bottom:120px;}
main.flush{padding-bottom:0;}

/* ---------- contact ----------
   Live positions: label y=160, "Hey!" y=212, the standfirst y=313, the two
   detail rows at y=444 and y=561, LinkedIn right-aligned at x=1060. */
.contact{padding:99px 0 0;position:relative;max-width:1200px;}
.contact .label{
  font-family:var(--body);font-weight:500;font-size:20px;line-height:28px;
  margin:0;color:var(--muted);
}
.contact h1{
  font-family:var(--display);font-weight:500;font-size:64px;line-height:1.2;
  letter-spacing:-0.02em;margin:24px 0 0;color:var(--ink);max-width:440px;
}
.contact h3{
  font-family:var(--display);font-weight:500;font-size:24px;line-height:33.6px;
  margin:24px 0 0;max-width:440px;color:var(--ink);
}
.contact-row{margin-top:48px;max-width:440px;}
.contact h3 + .contact-row{margin-top:64px;}
.contact-row p.label{
  font-family:var(--body);font-weight:400;font-size:18px;line-height:25.2px;
  color:var(--muted);margin:0;
}
.contact-row h4{
  font-family:var(--body);font-weight:500;font-size:20px;line-height:28px;
  margin:16px 0 0;color:var(--ink);
}
.contact-row h4 a{text-decoration:none;}
@media (hover:hover){.contact-row h4 a:hover{color:var(--muted);}}
.contact-row time{
  font-family:'DM Mono',ui-monospace,'SF Mono',SFMono-Regular,Menlo,monospace;
  font-size:16px;font-weight:400;color:var(--accent);margin-left:18px;
}
.contact-linkedin{
  position:absolute;left:980px;top:545px;
  font-family:var(--body);font-weight:500;font-size:20px;line-height:28px;
  color:var(--ink);text-decoration:none;
}
@media (hover:hover){.contact-linkedin:hover{color:var(--muted);}}
.credit{
  margin:0;padding:122px var(--pad) 49px;
  font-size:18px;line-height:25.2px;color:var(--faint);
}

/* ---------- tablet: 770-1099 ---------- */
@media (max-width:1099px){
  :root{--pad:64px;}
  header.top{padding-left:80px;padding-right:80px;}
  h1.name{font-size:32px;line-height:44.8px;}
  .work-col{padding:0;}
  .entry h3{font-size:22px;line-height:30.8px;}
  h1.cs-title{font-size:48px;}
  .cs-lede{font-size:28px;}
  .section{grid-template-columns:1fr;gap:16px;}
  .section .body p,.cs-lede{max-width:none;}
  .media-body{grid-template-columns:1fr;}
  .media-body > .slot{grid-column:1;}
  /* fixed-width blocks that would otherwise push the page wider than the viewport */
  .trow{grid-template-columns:1fr 1fr;}
  .g-charts{grid-template-columns:454fr 374fr;margin-left:auto;max-width:100%;}
  .contact-linkedin{position:static;display:inline-block;margin-top:48px;}
  .status{padding-left:0;}
  blockquote.quote{padding-left:0;}
  blockquote.quote p{padding-left:0;}
  .cards.two,.cards{grid-template-columns:1fr 1fr;}
}

/* ---------- phone: <770 ---------- */
@media (max-width:769px){
  :root{--pad:16px;}
  header.top{padding-left:16px;padding-right:16px;padding-top:24px;}
  .hero{padding-top:80px;}
  h1.name{font-size:26px;line-height:36.4px;}
  .avatar{margin-top:56px;}
  .work{padding-top:90px;}
  .entry-head{grid-template-columns:1fr;gap:16px;margin-bottom:28px;}
  .entry h3{font-size:20px;line-height:28px;}
  .entry .company{margin-top:8px;}
  .entry{margin-bottom:44px;}
  h1.cs-title{font-size:34px;}
  .cs-lede{font-size:22px;}
  .cards.two,.cards.three,.figs.two{grid-template-columns:1fr;}
  footer{padding-top:80px;}
  .contact{padding-top:110px;}
  .cards,.cards.two,.stats{grid-template-columns:1fr;}
  .trow{grid-template-columns:1fr;gap:6px;}
  .g-hero,.g-even,.g-split,.g-tight,.g-sbi-hero,.g-audit,.g-charts{grid-template-columns:1fr;}
  .media,.mediagroup{gap:16px;margin-bottom:80px;}
  .section{margin-bottom:80px;}
  .cs{padding-bottom:80px;}
  .cs.pad-sbi,.cs.pad-ds{padding-bottom:80px;}
  h1.cs-title{font-size:34px;}
  .pullquote{font-size:26px;}
  .stats p.stat{font-size:32px;}
  ul.points li{padding-left:24px;font-size:18px;line-height:25.2px;}
  ul.points li::before{left:6px;top:10px;}
  footer{flex-direction:column;align-items:flex-start;gap:20px;padding:32px 16px;}
}

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

/* ---------- touch targets (redesign folder) ----------
   Text links default to their line box (16-28px). Padding lifts the hit area to
   44px without moving the text off its baseline. Scoped to coarse pointers and
   narrow viewports so desktop spacing is untouched. */
@media (pointer:coarse), (max-width:768px){
  header.top{align-items:center;}
  header.top .mark{display:inline-block;padding:8px 0;}
  .top nav a{display:inline-block;padding:13px 0;}
  footer a:not(.in){display:inline-block;padding:13px 0;}
  footer .in{width:44px;height:44px;display:grid;place-items:center;margin:-8px;}
  .contact-row h4 a,.contact-linkedin{display:inline-block;padding:12px 0;min-height:44px;}
  /* Inline links inside a sentence are exempt from the 44px target minimum
     (WCAG 2.5.8, "in a sentence or block of text"), and padding them would
     break the line rhythm of the paragraph they sit in. */
}
@media (max-width:560px){
  footer .sep{display:none;}
  footer a:not(.in){margin-right:22px;}
  footer p{line-height:1.9;}
}