/* ============================================================
   NABEELKHAN.COM — "THE DRAWING SET"
   Shared design system. Every page is a numbered sheet.
   Type: Schibsted Grotesk (display) · Instrument Serif (flourish)
         Newsreader (reading) · JetBrains Mono (annotation)
   ============================================================ */

:root{
  /* — carbon (dark, default) — */
  --bg:#0b0b09;
  --bg-2:#111110;
  --bg-3:#171715;
  --ink:#ebe7dd;
  --ink-2:#a8a499;
  --ink-3:#6d6a61;
  --rule:rgba(235,231,221,.12);
  --rule-2:rgba(235,231,221,.26);
  --grid:rgba(235,231,221,.035);
  --acc:var(--acc-user, oklch(71% 0.155 163));
  --acc-ink:#06120c;
  --acc-dim:color-mix(in oklab, var(--acc) 16%, transparent);
  --wash:rgba(235,231,221,.04);

  --f-disp:"Schibsted Grotesk", "Helvetica Neue", sans-serif;
  --f-fancy:"Instrument Serif", "Newsreader", Georgia, serif;
  --f-serif:"Newsreader", Georgia, serif;
  --f-mono:"JetBrains Mono", ui-monospace, monospace;

  --max:1480px;
  --pad:clamp(20px, 4vw, 64px);
  --read:66ch;

  --ease:cubic-bezier(.22,1,.36,1);
}

:root[data-palette="light"]{
  --bg:#f2efe8;
  --bg-2:#eae6dd;
  --bg-3:#e2ddd2;
  --ink:#191915;
  --ink-2:#56544c;
  --ink-3:#8d8a7f;
  --rule:rgba(25,25,21,.14);
  --rule-2:rgba(25,25,21,.32);
  --grid:rgba(25,25,21,.045);
  --acc:var(--acc-user-l, oklch(46% 0.115 163));
  --acc-ink:#f2efe8;
  --acc-dim:color-mix(in oklab, var(--acc) 13%, transparent);
  --wash:rgba(25,25,21,.04);
}

/* ---------------- base ---------------- */
*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-serif);
  font-size:17.5px;
  line-height:1.6;
  font-feature-settings:"liga","kern";
}
::selection{ background:var(--acc); color:var(--acc-ink) }
a{ color:inherit }
:focus-visible{ outline:1.5px solid var(--acc); outline-offset:3px }
img{ max-width:100% }
p{ text-wrap:pretty }

/* fine background grid — drafting paper (off by default; opt-in via Tweaks) */
.gridbg{
  position:fixed; inset:0; z-index:0; pointer-events:none; display:none;
  background:
    repeating-linear-gradient(to right, var(--grid) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(to bottom, var(--grid) 0 1px, transparent 1px 96px);
}
:root[data-grid="on"] .gridbg{ display:block }

/* crop marks — fixed page corners */
.crops{ position:fixed; inset:14px; z-index:40; pointer-events:none }
.crops i{ position:absolute; width:18px; height:18px; opacity:.55 }
.crops i::before, .crops i::after{ content:""; position:absolute; background:var(--rule-2) }
.crops i::before{ width:100%; height:1px } .crops i::after{ width:1px; height:100% }
.crops .tl{ top:0; left:0 } .crops .tl::before{ top:0 } .crops .tl::after{ left:0 }
.crops .tr{ top:0; right:0 } .crops .tr::before{ top:0; right:0 } .crops .tr::after{ right:0 }
.crops .bl{ bottom:0; left:0 } .crops .bl::before{ bottom:0 } .crops .bl::after{ left:0 }
.crops .br{ bottom:0; right:0 } .crops .br::before{ bottom:0; right:0 } .crops .br::after{ right:0 }
@media (max-width:760px){ .crops{ display:none } }

/* scroll ruler — progress as a scale bar */
.ruler{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:60;
  background:
    repeating-linear-gradient(to right, var(--rule-2) 0 1px, transparent 1px 10%);
}
.ruler i{
  display:block; height:100%; width:0%;
  background:var(--acc);
}

/* mono annotation base */
.mn{ font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:500 }

/* ---------------- cursor (pointer:fine only) ---------------- */
.cursor, .cursor-co{ display:none }
@media (pointer:fine){
  .cursor{
    display:block; position:fixed; z-index:200; pointer-events:none;
    width:34px; height:34px; margin:-17px 0 0 -17px;
    border:1px solid color-mix(in oklab, var(--ink) 55%, transparent);
    border-radius:50%;
    transition:transform .25s var(--ease), border-color .25s, background .25s;
    transform:scale(.45);
  }
  .cursor::after{ content:""; position:absolute; left:50%; top:50%; width:3px; height:3px; margin:-1.5px; border-radius:50%; background:var(--ink) }
  .cursor.on{ transform:scale(1); border-color:var(--acc); background:var(--acc-dim) }
  .cursor-co{
    display:block; position:fixed; z-index:200; pointer-events:none;
    font-family:var(--f-mono); font-size:9px; letter-spacing:.08em; color:var(--ink-3);
    transform:translate(22px, 18px); white-space:nowrap;
    transition:opacity .12s linear;
  }
  .cursor.hide, .cursor-co.hide{ opacity:0 }
  /* coordinates read out over empty space only — vanish over text/controls */
  .cursor-co.over-text{ opacity:0 }
}

/* ---------------- shell ---------------- */
.sheet{
  position:relative; z-index:1;
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--pad);
}

/* top bar */
.top{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:22px 0 18px;
  border-bottom:1px solid var(--rule);
  position:relative; z-index:50;
}
.top .brand{
  display:flex; align-items:baseline; gap:14px; text-decoration:none;
}
.top .brand .sig{
  font-family:var(--f-disp); font-weight:800; font-size:19px; letter-spacing:-.02em;
  color:var(--ink);
}
.top .brand .sig em{ font-style:normal; color:var(--acc) }
.top .brand .mn{ color:var(--ink-3) }
.top nav{ display:flex; align-items:center; gap:4px; flex-wrap:wrap }
.top nav a{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-2); text-decoration:none; padding:7px 10px; border:1px solid transparent;
}
.top nav a:hover{ color:var(--ink); border-color:var(--rule) }
.top nav a[aria-current]{ color:var(--acc); border-color:var(--rule) }
.theme-toggle{
  width:34px; height:34px; display:grid; place-items:center;
  background:none; border:1px solid var(--rule); color:var(--ink-2); cursor:pointer;
  margin-left:8px;
}
.theme-toggle:hover{ color:var(--ink); border-color:var(--rule-2) }
.theme-toggle svg{ width:15px; height:15px }
:root:not([data-palette="light"]) .i-sun{ display:block } :root:not([data-palette="light"]) .i-moon{ display:none }
:root[data-palette="light"] .i-sun{ display:none } :root[data-palette="light"] .i-moon{ display:block }

/* breadcrumb variant */
.crumb{ font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3) }
.crumb a{ color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--rule) }
.crumb a:hover{ color:var(--acc) }

/* ---------------- type ---------------- */
.giant{
  font-family:var(--f-disp);
  font-weight:760;
  text-transform:uppercase;
  letter-spacing:-.018em;
  line-height:.94;
  margin:0;
}
.giant em{
  font-family:var(--f-fancy); font-style:italic; font-weight:400;
  text-transform:none; letter-spacing:-.005em; font-size:1.06em;
}
.giant .acc{ color:var(--acc) }

/* masked line reveal */
.ln{ display:block; overflow:hidden }
.ln > span{ display:block; transform:translateY(0); }
.js .rv-lines .ln > span{ transform:translateY(115%) }
.js .rv-lines.in .ln > span{
  transform:translateY(0);
  transition:transform 1s var(--ease);
}
.js .rv-lines.in .ln:nth-child(2) > span{ transition-delay:.08s }
.js .rv-lines.in .ln:nth-child(3) > span{ transition-delay:.16s }
.js .rv-lines.in .ln:nth-child(4) > span{ transition-delay:.24s }

/* generic reveal */
.js .rv{ opacity:0; transform:translateY(26px) }
.js .rv.in{ opacity:1; transform:none; transition:opacity .9s var(--ease), transform .9s var(--ease) }
.js .rv[data-d="1"].in{ transition-delay:.08s } .js .rv[data-d="2"].in{ transition-delay:.16s }
.js .rv[data-d="3"].in{ transition-delay:.24s } .js .rv[data-d="4"].in{ transition-delay:.32s }
@media (prefers-reduced-motion: reduce){
  .js .rv, .js .rv-lines .ln > span{ opacity:1 !important; transform:none !important; transition:none !important }
}

/* ---------------- sections ---------------- */
section.sx{ padding:clamp(72px, 11vh, 150px) 0 0 }
.sec-meta{
  display:flex; align-items:center; gap:14px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3);
  border-top:1px solid var(--rule-2);
  padding-top:12px;
}
.sec-meta .no{ color:var(--acc) }
.sec-meta .fill{ flex:1; height:1px; background:var(--rule) }
.sec-t{
  font-family:var(--f-disp); font-weight:720;
  letter-spacing:-.018em; line-height:1.0;
  font-size:clamp(38px, 5.6vw, 88px);
  margin:26px 0 10px;
}
.sec-t em{ font-family:var(--f-fancy); font-style:italic; font-weight:400; font-size:1.12em }
.sec-d{
  font-family:var(--f-serif); font-size:clamp(17px,1.5vw,20px); font-weight:300;
  color:var(--ink-2); max-width:54ch; margin:6px 0 0; line-height:1.55;
}
.sec-gap{ height:clamp(34px, 5vh, 64px) }

/* ---------------- ruled table rows ---------------- */
.rows{ border-top:1px solid var(--rule-2) }
.rows .r{
  display:grid; gap:18px;
  grid-template-columns:72px 1.1fr 1.6fr auto;
  align-items:baseline;
  padding:26px 0;
  border-bottom:1px solid var(--rule);
  text-decoration:none; color:inherit;
  position:relative;
  transition:background .35s var(--ease), padding .35s var(--ease);
}
.rows .r:hover{ background:var(--wash); padding-left:14px; padding-right:14px }
.rows .r .n{ font-family:var(--f-mono); font-size:11px; color:var(--ink-3); letter-spacing:.1em }
.rows .r h3{
  font-family:var(--f-disp); font-weight:700; font-stretch:94%;
  font-size:clamp(20px,2vw,28px); letter-spacing:-.01em; margin:0; line-height:1.1;
}
.rows .r p{ margin:0; color:var(--ink-2); font-size:15.5px; font-weight:300; line-height:1.55 }
.rows .r .tag{ font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap }
.rows .r .go{
  position:absolute; right:0; top:50%; transform:translateY(-50%) translateX(8px);
  font-family:var(--f-mono); color:var(--acc); opacity:0; transition:all .35s var(--ease);
}
.rows .r:hover .go{ opacity:1; transform:translateY(-50%) }
@media (max-width:900px){
  .rows .r{ grid-template-columns:48px 1fr; }
  .rows .r p{ grid-column:2 }
  .rows .r .tag{ grid-column:2 }
}

/* ---------------- giant stats ---------------- */
.stats{
  display:grid; grid-template-columns:repeat(4, 1fr);
  border-top:1px solid var(--rule-2); border-left:1px solid var(--rule);
}
.stats .st{
  border-right:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:30px 24px 26px;
}
.stats .st .num{
  font-family:var(--f-disp); font-weight:800; font-stretch:88%;
  font-size:clamp(44px, 5.4vw, 84px); line-height:.9; letter-spacing:-.03em;
}
.stats .st .num small{ font-size:.45em; font-weight:700; letter-spacing:0 }
.stats .st .lab{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); margin-top:14px; line-height:1.7;
}
@media (max-width:900px){ .stats{ grid-template-columns:repeat(2,1fr) } }

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  padding:16px 26px; text-decoration:none; cursor:pointer;
  border:1px solid var(--rule-2); color:var(--ink); background:none;
  transition:all .3s var(--ease);
  position:relative; overflow:hidden;
}
.btn::before{
  content:""; position:absolute; inset:0; background:var(--acc);
  transform:scaleY(0); transform-origin:bottom; transition:transform .35s var(--ease);
  z-index:-1;
}
.btn:hover{ color:var(--acc-ink); border-color:var(--acc) }
.btn:hover::before{ transform:scaleY(1) }
.btn-primary{ background:var(--acc); border-color:var(--acc); color:var(--acc-ink) }
.btn-primary::before{ background:var(--ink) }
.btn-primary:hover{ color:var(--bg); border-color:var(--ink) }
.btn[disabled]{ opacity:.35; pointer-events:none }

/* ---------------- marquee ---------------- */
.marq{
  border-top:1px solid var(--rule-2); border-bottom:1px solid var(--rule-2);
  overflow:hidden; white-space:nowrap; padding:14px 0;
  margin-top:clamp(60px, 9vh, 120px);
}
.marq .track{ display:inline-block; animation:marq 36s linear infinite }
.marq span{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-3); padding:0 28px;
}
.marq span b{ color:var(--acc); font-weight:500 }
@keyframes marq{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion: reduce){ .marq .track{ animation:none } }

/* ---------------- dimension line (hero detail) ---------------- */
.dim{
  display:flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3);
}
.dim .l{ flex:1; height:1px; background:var(--rule-2); position:relative }
.dim .l::before, .dim .l::after{
  content:""; position:absolute; top:-4px; width:1px; height:9px; background:var(--rule-2);
}
.dim .l::before{ left:0 } .dim .l::after{ right:0 }

/* ---------------- prose ---------------- */
.prose{ max-width:var(--read); font-weight:300; font-size:18px; line-height:1.72; color:var(--ink-2) }
.prose p{ margin:0 0 1.4em }
.prose em{ color:var(--ink) }
.prose strong{ color:var(--ink); font-weight:500 }
.prose a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--acc) }
.prose a:hover{ color:var(--acc) }

/* ---------------- pull quote ---------------- */
.pull{
  border:0; margin:clamp(40px,6vh,80px) 0; padding:0 0 0 0;
  font-family:var(--f-serif); font-style:italic; font-weight:300;
  font-size:clamp(24px, 2.6vw, 36px); line-height:1.35; color:var(--ink);
  max-width:30ch;
}
.pull::before{
  content:"“"; display:block; color:var(--acc);
  font-size:1.6em; line-height:.4; margin-bottom:18px;
}
.pull cite{
  display:block; font-family:var(--f-mono); font-style:normal; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-top:22px;
}

/* ---------------- cells (projects / cards as ruled grid) ---------------- */
.cells{
  display:grid; grid-template-columns:repeat(2, 1fr);
  border-top:1px solid var(--rule-2); border-left:1px solid var(--rule);
}
.cells.three{ grid-template-columns:repeat(3,1fr) }
.cells .c{
  border-right:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:30px 28px 28px;
  position:relative; text-decoration:none; color:inherit; display:block;
  transition:background .35s var(--ease);
}
a.c:hover, .cells .c.hov:hover{ background:var(--wash) }
.cells .c .ch{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px }
.cells .c h3{
  font-family:var(--f-disp); font-weight:700; font-stretch:94%;
  font-size:clamp(20px,1.8vw,26px); letter-spacing:-.01em; margin:0;
}
.cells .c .cn{ font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3) }
.cells .c p{ margin:0 0 16px; color:var(--ink-2); font-size:15px; font-weight:300; line-height:1.6 }
.cells .c .stack{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px }
.cells .c .stack span{
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); border:1px solid var(--rule); padding:4px 8px;
}
.cells .c .arrow{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--acc); text-decoration:none;
}
.cells .c .arrow:hover{ border-bottom:1px solid var(--acc) }
.status{
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  padding:5px 9px; border:1px solid var(--rule-2); color:var(--ink-2); white-space:nowrap;
}
.status.live{ color:var(--acc); border-color:var(--acc) }
@media (max-width:900px){ .cells, .cells.three{ grid-template-columns:1fr } }

/* ---------------- forms ---------------- */
.ffield{ display:block; margin-bottom:22px }
.ffield > span, .ffield > label{
  display:block; font-family:var(--f-mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:8px;
}
input:not([type]), input[type="text"], input[type="email"], input[type="tel"], input[type="url"], select, textarea{
  width:100%; background:none; border:0; border-bottom:1px solid var(--rule-2);
  color:var(--ink); font-family:var(--f-serif); font-size:17px; font-weight:300;
  padding:10px 2px; border-radius:0; appearance:none; -webkit-appearance:none;
}
input:focus, select:focus, textarea:focus{ outline:none; border-bottom-color:var(--acc) }
textarea{ min-height:110px; resize:vertical; line-height:1.55 }
input.bad, select.bad{ border-bottom-color:#c0392b }
.frow{ display:grid; grid-template-columns:1fr 1fr; gap:28px }
@media (max-width:700px){ .frow{ grid-template-columns:1fr } }

/* ---------------- title block (footer) ---------------- */
.tblock{
  margin-top:clamp(80px, 12vh, 160px);
  border:1px solid var(--rule-2);
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
}
.tblock > div{ padding:14px 16px; border-right:1px solid var(--rule); min-width:0 }
.tblock > div:last-child{ border-right:0 }
.tblock b{ display:block; color:var(--ink-3); font-weight:500; font-size:9px; letter-spacing:.16em; margin-bottom:6px }
.tblock span{ color:var(--ink); line-height:1.6; display:block }
.tblock a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--rule) }
.tblock a:hover{ color:var(--acc); border-color:var(--acc) }
.tblock .wide{ grid-column:1 / -1; border-top:1px solid var(--rule); border-right:0;
  display:flex; flex-wrap:wrap; gap:8px 22px; align-items:center; justify-content:space-between }
@media (max-width:900px){
  .tblock{ grid-template-columns:1fr 1fr }
  .tblock > div:nth-child(2){ border-right:0 }
}

.endmark{
  text-align:center; padding:54px 0 60px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-3);
}
.endmark::before{ content:""; display:block; width:1px; height:38px; background:var(--rule-2); margin:0 auto 20px }

/* ---------------- consent ---------------- */
.consent{
  position:fixed; left:18px; right:18px; bottom:18px; z-index:90;
  display:flex; justify-content:center; pointer-events:none;
  opacity:0; transform:translateY(14px); transition:all .5s var(--ease);
}
.consent.show{ opacity:1; transform:none; pointer-events:auto }
.consent-card{
  max-width:680px; background:var(--bg-2); border:1px solid var(--rule-2);
  padding:20px 22px; display:flex; gap:22px; align-items:center;
}
.consent-card .ctext{ font-size:13.5px; font-weight:300; color:var(--ink-2); line-height:1.5 }
.consent-card .ctext b{ display:block; font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); margin-bottom:6px }
.consent-card .ctext a{ color:var(--ink); border-bottom:1px solid var(--rule-2); text-decoration:none }
.consent-actions{ display:flex; gap:8px; flex-shrink:0 }
.consent-actions button{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  padding:10px 16px; cursor:pointer; border:1px solid var(--rule-2); background:none; color:var(--ink-2);
}
.consent-actions .accept{ background:var(--acc); border-color:var(--acc); color:var(--acc-ink) }
@media (max-width:640px){ .consent-card{ flex-direction:column; align-items:flex-start } }

/* ---------------- misc ---------------- */
.hr{ border:0; border-top:1px solid var(--rule); margin:clamp(40px,6vh,72px) 0 }
.note{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.1em; color:var(--ink-3); text-transform:uppercase; line-height:1.8 }
.note a{ color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--rule) }
.note a:hover{ color:var(--acc) }

/* ---------------- mobile pass ---------------- */
@media (max-width:760px){
  body{ font-size:16.5px }
  .top{
    flex-direction:column; align-items:stretch; gap:12px; padding:16px 0 14px;
  }
  .top .brand{ justify-content:space-between }
  .top .brand .mn{ display:none }
  /* primary nav becomes a horizontal, edge-to-edge scroll strip */
  .top nav{
    flex-wrap:nowrap; overflow-x:auto; gap:2px; margin:0 calc(-1 * var(--pad)); padding:2px var(--pad);
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .top nav::-webkit-scrollbar{ display:none }
  .top nav a{ white-space:nowrap; flex:0 0 auto; padding:8px 11px }
  .top nav .crumb{ white-space:nowrap }
  .theme-toggle{ flex:0 0 auto }
  /* breadcrumb rows (interior pages) keep theme toggle on the right */
  .top nav[aria-label="Breadcrumb and theme"]{ overflow:visible; justify-content:space-between; align-items:center }

  section.sx{ padding-top:clamp(54px,9vh,90px) }
  .giant{ font-size:clamp(32px, 11.5vw, 96px) !important }
  .lab-hero .title, .atitle, .bhero .title{ font-size:clamp(30px, 9.4vw, 64px) !important }
  .sec-t{ font-size:clamp(32px,9vw,54px) }
  .sec-d{ font-size:16.5px }
  .sec-meta{ font-size:10px; gap:10px; flex-wrap:wrap }
  .stats, .cells, .cells.three{ grid-template-columns:1fr }
  .marq{ margin-top:clamp(44px,7vh,80px) }
  .tblock{ grid-template-columns:1fr }
  .tblock > div{ border-right:0; border-bottom:1px solid var(--rule) }
  .tblock .wide{ flex-direction:column; align-items:flex-start; gap:10px }
  .btn{ padding:15px 22px; font-size:11px }
}
@media (max-width:420px){
  .sec-t{ font-size:clamp(30px,11vw,46px) }
  .btn{ width:100%; justify-content:center }
}