/* ---------- Design tokens (matched from source site) ---------- */
:root{
  --bg:            #151312;
  --text:          #ffffff;
  --text-muted:    #6a6b6e;
  --text-muted-2:  #998f8f;
  --text-faint:    #999999;
  --ghost:         rgba(182,180,189,.2);
  --surface:       rgba(182,180,189,.08);
  --surface-hover: rgba(182,180,189,.14);
  --field-bg:      rgba(182,180,189,.2);
  --accent:        #f46c38;
  --accent-2:      #c5ff41;
  --accent-text:   var(--accent);
  --accent-strong: #b64a1c;
  --border:        rgba(255,255,255,.06);
  /* Accessible-contrast green: white text on the brand green (#1ea36f) only
     hits 3.22:1, short of the 4.5:1 AA text minimum. Used wherever a solid
     green button carries text (profile CTA, cookie banner). */
  --green-btn:       #188259;
  --green-btn-hover: #136b46;
  --radius-sm:     6px;
  --radius:        8px;
  --radius-lg:     10px;
  --font-heading:  "Poppins", "Poppins Placeholder", sans-serif;
  --font-body:     "Inter", "Inter Placeholder", sans-serif;
  --max-width:     1180px;
  --ease:          cubic-bezier(.16,1,.3,1);
}

:root[data-theme="light"]{
  --bg:            #faf7f3;
  --text:          #151312;
  --text-muted:    #6f6a67;
  --text-muted-2:  #736b69;
  --text-faint:    #6f6a67;
  --ghost:         rgba(21,19,18,.1);
  --surface:       rgba(21,19,18,.04);
  --surface-hover: rgba(21,19,18,.07);
  --field-bg:      rgba(21,19,18,.06);
  --border:        rgba(21,19,18,.08);
  --accent-text:   var(--accent-strong);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ color-scheme:dark; scroll-behavior:smooth; }
html[data-theme="light"]{ color-scheme:light; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background-color .35s var(--ease), color .35s var(--ease);
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }

a:focus-visible,
button:focus-visible{
  outline:2px solid var(--accent-text);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}
.dock__link:focus-visible{ outline-offset:-2px; }

/* ---------- Floating dock nav ---------- */
.dock{
  position:fixed;
  top:24px;
  left:50%;
  transform:translateX(-50%);
  z-index:100;
  display:flex;
  gap:6px;
  padding:6px;
  background:rgba(30,27,25,.9);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.06);
  border-radius:999px;
}
:root[data-theme="light"] .dock{
  background:rgba(250,247,243,.92);
  border-color:rgba(21,19,18,.08);
}
.dock__link{
  display:flex;
  align-items:center;
  gap:8px;
  height:40px;
  padding:0 12px 0 12px;
  border-radius:999px;
  color:var(--text-faint);
  transition:background .25s var(--ease), color .25s var(--ease), padding .25s var(--ease);
  overflow:hidden;
}
.dock__link svg{ width:18px; height:18px; flex:none; }
.dock__link span{
  font-family:var(--font-heading);
  font-size:12px;
  font-weight:500;
  max-width:0;
  opacity:0;
  white-space:nowrap;
  transition:max-width .25s var(--ease), opacity .2s var(--ease);
}
.dock__link:hover,
.dock__link.is-active{
  background:rgba(255,255,255,.1);
  color:#fff;
}
:root[data-theme="light"] .dock__link:hover,
:root[data-theme="light"] .dock__link.is-active{
  background:rgba(21,19,18,.08);
  color:var(--text);
}
.dock__link:hover span,
.dock__link.is-active span{
  max-width:120px;
  opacity:1;
}
.dock__divider{
  width:1px;
  margin:6px 2px;
  background:rgba(255,255,255,.1);
}
:root[data-theme="light"] .dock__divider{ background:rgba(21,19,18,.1); }
.dock__theme-toggle{
  border:none;
  background:none;
  cursor:pointer;
  font:inherit;
  padding:0 11px;
  width:40px;
}
.dock__theme-toggle svg{ width:18px; height:18px; }
.dock__theme-toggle .icon-moon{ display:none; }
:root[data-theme="light"] .dock__theme-toggle .icon-sun{ display:none; }
:root[data-theme="light"] .dock__theme-toggle .icon-moon{ display:block; }

/* ---------- Layout ---------- */
.layout{
  max-width:var(--max-width);
  margin:0 auto;
  padding:88px 24px 80px;
  display:grid;
  grid-template-columns:280px 1fr;
  gap:64px;
  align-items:start;
}

/* ---------- Profile sidebar ---------- */
/* Fixed brand palette from the design request — intentionally not theme-driven */
.profile{
  --pc-bg:      #ffffff;
  --pc-green:   #1ea36f;
  --pc-dark:    #0b3b2c;
  --pc-body:    #2c2b29;
  --pc-ring:    rgba(30,163,111,.3);

  position:sticky;
  top:88px;
  display:flex;
  flex-direction:column;
  background:var(--pc-bg);
  border-radius:20px;
  padding:26px 24px 22px;
  align-items:center;
  box-shadow:0 20px 40px rgba(0,0,0,.35);
}
.profile__photo-wrap{
  position:relative;
  width:100%;
  max-width:190px;
  margin:6px auto 4px;
}
.profile__photo-wrap::before,
.profile__photo-wrap::after{
  content:"";
  position:absolute;
  width:78%;
  aspect-ratio:1;
  border:2px dashed var(--pc-ring);
  border-radius:50%;
  z-index:0;
}
.profile__photo-wrap::before{ top:-14%; left:-14%; }
.profile__photo-wrap::after{ top:-8%; right:-16%; }
.profile__photo{
  position:relative;
  z-index:1;
  width:100%;
  aspect-ratio:1 / 1;
  border-radius:32px 32px 8px 32px;
  overflow:hidden;
  background:var(--pc-green);
}
.profile__tag-bump{
  /* the folded-corner "tag" bump — sits outside .profile__photo so its
     overflow:hidden (needed to round the image) doesn't clip it */
  position:absolute;
  z-index:2;
  right:-10px;
  bottom:-10px;
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--pc-green);
  box-shadow:0 4px 8px rgba(0,0,0,.2);
}
.profile__photo img,
.profile__photo svg{ position:relative; z-index:1; width:100%; height:100%; object-fit:cover; display:block; }
.profile__body{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  text-align:center;
  padding-top:12px;
}
.profile__name{
  margin:0;
  font-family:var(--font-heading);
  font-size:21px;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--pc-dark);
  white-space:nowrap;
}
.profile__tagline{
  margin:0;
  font-family:var(--font-heading);
  font-size:15px;
  font-weight:500;
  line-height:1.5;
  color:var(--pc-body);
}
.profile__social{
  display:flex;
  gap:32px;
  margin-top:4px;
}
.profile__social a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  transition:transform .2s var(--ease);
}
.profile__social a svg{ width:100%; height:100%; }
.profile__call{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  margin-top:4px;
  padding:12px 20px;
  border-radius:999px;
  background:var(--green-btn);
  color:#ffffff;
  font-family:var(--font-heading);
  font-size:14px;
  font-weight:600;
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.profile__call:hover{ background:var(--green-btn-hover); transform:translateY(-2px); }
.profile__call svg{ width:16px; height:16px; flex:none; }
.profile__social a:hover{ transform:translateY(-2px); }

/* Card rises and fades in as it crosses into the viewport; scrubbed by
   scroll position rather than time, so it plays correctly however the
   page is entered (fresh load, anchor jump, or scrolling back up). */
@supports (animation-timeline: view()){
  @keyframes profile-reveal{
    from{ opacity:0; transform:translateY(28px); }
    to{ opacity:1; transform:translateY(0); }
  }
  .profile{
    animation:profile-reveal .6s var(--ease) both;
    animation-timeline:view();
    animation-range:entry 0% entry 60%;
  }
}

/* ---------- Big section headings with ghost second line ---------- */
.page-heading{ margin-bottom:36px; }
.page-heading--section{ margin-top:96px; }
.page-heading--contact{ margin-top:96px; }
.page-heading h1,
.page-heading h2{
  margin:0;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:clamp(40px, 7vw, 86px);
  line-height:1;
  letter-spacing:0;
}
.page-heading .fill{ color:var(--text); }
.page-heading .ghost{ color:var(--ghost); }

/* One authored entrance for the hero heading only (not the section/contact repeats). */
@keyframes rise-in{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:translateY(0); }
}
.page-heading:not(.page-heading--section):not(.page-heading--contact) .fill,
.page-heading:not(.page-heading--section):not(.page-heading--contact) .ghost{
  display:inline-block;
  animation:rise-in .7s var(--ease) both;
}
.page-heading:not(.page-heading--section):not(.page-heading--contact) .ghost{ animation-delay:.08s; }

/* ---------- Hero ---------- */
.hero__tagline{
  margin:-16px 0 0;
  max-width:560px;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  color:var(--text-muted-2);
  animation:rise-in .6s var(--ease) .18s both;
}
/* Grid, not flex-wrap: a fixed column count per item count keeps every row
   full (3-across for a 3-stat row, 2x2 for a 4-stat row) instead of leaving
   a lone item stranded on its own line at in-between widths. */
.stats-row{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:20px 32px;
  margin-top:40px;
}
.stats-row:has(.stat:nth-child(4)){
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
.stat{ display:flex; flex-direction:column; gap:4px; min-width:0; animation:rise-in .5s var(--ease) both; }
.stat:nth-child(1){ animation-delay:.26s; }
.stat:nth-child(2){ animation-delay:.32s; }
.stat:nth-child(3){ animation-delay:.38s; }
.stat:nth-child(4){ animation-delay:.44s; }
.stat__value{
  font-family:var(--font-heading);
  font-size:36px;
  font-weight:700;
  color:var(--accent-text);
}
.stat__label{
  font-family:var(--font-heading);
  font-size:13px;
  font-weight:500;
  color:var(--text-muted-2);
}
.hero-cards{
  display:grid;
  grid-template-columns:repeat(2, minmax(220px, 1fr));
  gap:16px;
  margin-top:32px;
  max-width:640px;
}
.hero-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:20px 22px;
  border-radius:var(--radius-lg);
  animation:rise-in .5s var(--ease) both;
  background:var(--surface);
  border:1px solid var(--border);
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.hero-card:hover{ background:var(--surface-hover); transform:translateY(-2px); }
.hero-cards .hero-card:nth-child(1){ animation-delay:.5s; }
.hero-cards .hero-card:nth-child(2){ animation-delay:.56s; }
.hero-cards .hero-card:nth-child(3){ animation-delay:.62s; }
.hero-cards .hero-card:nth-child(4){ animation-delay:.68s; }
.hero-card__text{ display:flex; flex-direction:column; gap:2px; }
.hero-card__title{
  font-family:var(--font-heading);
  font-size:16px;
  font-weight:600;
  color:var(--text);
}
.hero-card__sub{
  font-family:var(--font-heading);
  font-size:12px;
  font-weight:400;
  color:var(--text-muted-2);
}
.hero-card__arrow{ width:20px; height:20px; flex:none; color:var(--accent-text); }

/* ---------- Recent projects ---------- */
.projects-list{
  display:flex;
  flex-direction:column;
  gap:24px;
}
.project-row{
  display:flex;
  align-items:center;
  gap:32px;
  padding:24px;
  border-radius:var(--radius-lg);
  background:var(--surface);
  border:1px solid var(--border);
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.project-row:hover{ background:var(--surface-hover); transform:translateY(-2px); }
.project-row__thumb{
  width:340px;
  aspect-ratio:16/10;
  flex:none;
  border-radius:var(--radius);
  background:var(--field-bg);
  object-fit:contain;
  display:block;
}
.project-row__text{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.project-row__role{
  font-family:var(--font-heading);
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--accent-text);
}
.project-row__title{
  margin:0;
  font-family:var(--font-heading);
  font-size:24px;
  font-weight:600;
  color:var(--text);
}
.project-row__desc{
  margin:0;
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.6;
  color:var(--text-muted-2);
}
.project-row__links{ display:flex; gap:24px; margin-top:2px; }
.project-row__links a{
  font-family:var(--font-heading);
  font-size:14px;
  font-weight:600;
  color:var(--accent-text);
}
.project-row__links a:hover{ text-decoration:underline; }

/* ---------- Demo sites list ---------- */
.demo-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.demo-row{
  display:flex;
  align-items:center;
  gap:20px;
  padding:14px;
  border-radius:var(--radius-lg);
  background:var(--surface);
  border:1px solid var(--border);
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.demo-row:hover{ background:var(--surface-hover); transform:translateY(-2px); }
.demo-row--static:hover{ background:var(--surface); transform:none; }
.demo-row__thumb{
  width:96px;
  height:64px;
  flex:none;
  border-radius:var(--radius);
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  object-fit:cover;
}
.demo-row__thumb--badge{
  background:var(--field-bg);
  object-fit:contain;
  padding:2px;
}
.demo-row__text{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.demo-row__title{
  font-family:var(--font-heading);
  font-size:15px;
  font-weight:600;
  color:var(--text);
}
.demo-row__desc{
  font-family:var(--font-body);
  font-size:13px;
  line-height:1.5;
  color:var(--text-muted-2);
}

/* ---------- Blog list (thoughts) ---------- */
.blog-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.blog-row{
  display:flex;
  align-items:center;
  gap:24px;
  padding:20px;
  border-radius:var(--radius-lg);
  background:var(--surface);
  border:1px solid var(--border);
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.blog-row:hover{ background:var(--surface-hover); transform:translateY(-2px); }
.blog-row__thumb{
  width:64px;
  height:64px;
  flex:none;
  border-radius:var(--radius);
  object-fit:cover;
  background:var(--field-bg);
}
.blog-row__text{ display:flex; flex-direction:column; gap:6px; min-width:0; flex:1; }
.blog-row__meta{
  font-family:var(--font-heading);
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--accent-text);
}
.blog-row__title{
  margin:0;
  font-family:var(--font-heading);
  font-size:18px;
  font-weight:600;
  color:var(--text);
}
.blog-row__desc{
  margin:0;
  font-family:var(--font-body);
  font-size:14px;
  line-height:1.5;
  color:var(--text-muted-2);
}
.blog-row__arrow{ width:20px; height:20px; flex:none; color:var(--accent-text); }

/* ---------- Blog post article ---------- */
.post-back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:24px;
  font-family:var(--font-heading);
  font-size:13px;
  font-weight:600;
  color:var(--text-muted-2);
  transition:color .2s var(--ease);
}
.post-back:hover{ color:var(--accent-text); }
.post-back svg{ width:16px; height:16px; }
.post-title{
  margin:0 0 10px;
  max-width:760px;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:clamp(28px, 4vw, 42px);
  line-height:1.15;
  color:var(--text);
}
.post-meta{
  margin:0;
  font-family:var(--font-heading);
  font-size:13px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--accent-text);
}
.post-dek{
  margin:14px 0 0;
  max-width:66ch;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  color:var(--text-muted-2);
}
.post-hero{
  width:100%;
  max-width:720px;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:var(--radius-lg);
  margin-top:28px;
  background:var(--field-bg);
}
.post-body{
  max-width:66ch;
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.post-body h2{
  margin:14px 0 0;
  font-family:var(--font-heading);
  font-size:24px;
  font-weight:600;
  color:var(--text);
}
.post-body h3{
  margin:6px 0 0;
  font-family:var(--font-heading);
  font-size:18px;
  font-weight:600;
  color:var(--text);
}
.post-body p{
  margin:0;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.7;
  color:var(--text-muted-2);
}
.post-body a{
  color:var(--accent-text);
  text-decoration:underline;
  text-underline-offset:2px;
}
.post-body a:hover{ text-decoration:none; }
.post-body ul,
.post-body ol{
  margin:0;
  padding-left:22px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.post-body li{
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  color:var(--text-muted-2);
}
.post-body ul{ list-style:disc; }
.post-body ol{ list-style:decimal; }

/* ---------- Info grid (experience & background) ---------- */
.info-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(150px, 1fr));
  gap:20px;
}
.info-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:22px;
  border-radius:var(--radius-lg);
  background:var(--surface);
  border:1px solid var(--border);
}
.info-card__title{
  margin:0;
  font-family:var(--font-heading);
  font-size:16px;
  font-weight:600;
  color:var(--text);
}
.info-card__desc{
  margin:0;
  font-family:var(--font-body);
  font-size:14px;
  line-height:1.5;
  color:var(--text-muted-2);
}
.info-card__link{
  margin-top:2px;
  font-family:var(--font-heading);
  font-size:13px;
  font-weight:600;
  color:var(--accent-text);
}
.info-card__link:hover{ text-decoration:underline; }

/* ---------- What my sites offer ---------- */
.offer-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(160px, 1fr));
  gap:16px;
}
.offer-card{
  padding:20px;
  border-radius:var(--radius-lg);
  background:var(--surface);
  border:1px solid var(--border);
}
.offer-card__title{
  margin:0 0 6px;
  font-family:var(--font-heading);
  font-size:15px;
  font-weight:600;
  color:var(--text);
}
.offer-card__desc{
  margin:0;
  font-family:var(--font-body);
  font-size:13px;
  line-height:1.5;
  color:var(--text-muted-2);
}

/* ---------- Tools grid ---------- */
.tools-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(220px, 1fr));
  gap:10px;
}
.tool-card{
  display:flex;
  align-items:center;
  gap:16px;
  width:100%;
  padding:16px;
  border-radius:var(--radius);
  background:transparent;
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.tool-card:hover{
  background:var(--surface-hover);
  transform:translateY(-2px);
}
.tool-card img{
  width:60px;
  height:60px;
  flex:none;
  border-radius:var(--radius);
  object-fit:cover;
  background:#1f1c19;
}
.tool-card__text{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.tool-card__title{
  font-family:var(--font-heading);
  font-size:17px;
  font-weight:600;
  color:var(--text);
}
.tool-card__sub{
  font-family:var(--font-heading);
  font-size:13px;
  font-weight:400;
  color:var(--text-muted-2);
}
.tools-group-title{
  margin:8px 0 0;
  font-family:var(--font-heading);
  font-size:13px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--text-muted-2);
}

/* ---------- Contact form ---------- */
.contact-form{
  display:flex;
  flex-direction:column;
  gap:20px;
  max-width:696px;
}
.row{ display:flex; flex-direction:column; gap:8px; }
.row--split{ flex-direction:row; gap:20px; }
.row--split label{ flex:1; display:flex; flex-direction:column; gap:8px; }
.hp-field{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
}
.field-label{
  font-family:var(--font-heading);
  font-size:12px;
  font-weight:500;
  color:var(--text-muted-2);
}
input,select,textarea{
  width:100%;
  border:none;
  outline:none;
  background:var(--field-bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:14px;
  border-radius:var(--radius);
  padding:14px 16px;
  transition:background .2s var(--ease), box-shadow .2s var(--ease);
}
input::placeholder,
textarea::placeholder{ color:var(--text-faint); }
select{
  border-radius:var(--radius-lg);
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='1.8'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:16px;
  padding-right:40px;
}
select:invalid{ color:var(--text-faint); }
textarea{ resize:vertical; min-height:120px; font-family:var(--font-body); }
input:focus,select:focus,textarea:focus{ box-shadow:0 0 0 2px rgba(244,108,56,.5); }

.submit-btn{
  align-self:flex-start;
  padding:14px 32px;
  border:none;
  border-radius:var(--radius);
  background:var(--accent-strong);
  color:#fff;
  font-family:var(--font-body);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:filter .2s var(--ease), transform .2s var(--ease);
}
.submit-btn:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.submit-btn:active{ transform:translateY(0); }
.submit-btn:disabled{ opacity:.6; cursor:not-allowed; }

.form-status{
  margin:0;
  font-family:var(--font-heading);
  font-size:13px;
  color:var(--text-muted-2);
  min-height:16px;
}
.form-trust{
  margin:-8px 0 0;
  font-family:var(--font-body);
  font-size:13px;
  color:var(--text-muted-2);
}

/* ---------- Footer ---------- */
.site-footer{
  margin-top:80px;
  padding-top:24px;
  border-top:1px solid var(--border);
  text-align:center;
}
.site-footer p{
  margin:0;
  font-size:12px;
  color:var(--text-muted-2);
}
.site-footer p a{
  color:var(--text-muted-2);
  text-decoration:underline;
  text-underline-offset:2px;
}
.site-footer p a:hover{ color:var(--accent-text); }

/* ---------- Cookie consent banner ---------- */
.cookie-banner{
  position:fixed;
  left:50%;
  bottom:20px;
  transform:translate(-50%, 16px);
  z-index:200;
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  width:min(640px, calc(100vw - 32px));
  padding:18px 22px;
  border-radius:16px;
  background:rgba(30,27,25,.95);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 20px 50px rgba(0,0,0,.4);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
:root[data-theme="light"] .cookie-banner{
  background:rgba(250,247,243,.97);
  border-color:rgba(21,19,18,.1);
}
.cookie-banner.is-visible{
  opacity:1;
  transform:translate(-50%, 0);
  pointer-events:auto;
}
.cookie-banner__text{
  margin:0;
  flex:1 1 260px;
  font-family:var(--font-body);
  font-size:13px;
  line-height:1.5;
  color:var(--text);
}
.cookie-banner__text a{
  color:var(--accent-text);
  text-decoration:underline;
  text-underline-offset:2px;
}
.cookie-banner__actions{
  display:flex;
  gap:10px;
  flex:none;
}
.cookie-banner__decline,
.cookie-banner__accept{
  padding:9px 18px;
  border-radius:999px;
  border:none;
  font-family:var(--font-heading);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.cookie-banner__decline{
  background:var(--surface);
  color:var(--text);
}
.cookie-banner__decline:hover{ background:var(--surface-hover); }
.cookie-banner__accept{
  background:var(--green-btn);
  color:#fff;
}
.cookie-banner__accept:hover{ background:var(--green-btn-hover); transform:translateY(-1px); }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .layout{
    grid-template-columns:1fr;
    padding-top:140px;
  }
  .profile{ position:static; }
  .tools-grid{ grid-template-columns:repeat(2, minmax(220px, 1fr)); }
  .row--split{ flex-direction:column; }
  .offer-grid{ grid-template-columns:repeat(2, minmax(160px, 1fr)); }
}

@media (max-width:640px){
  .hero-cards{ grid-template-columns:1fr; }
  .project-row{ flex-direction:column; align-items:stretch; }
  .project-row__thumb{ width:100%; }
  .info-grid{ grid-template-columns:1fr; }
  .offer-grid{ grid-template-columns:1fr; }
  .demo-row__thumb{ width:64px; height:48px; }
}

@media (max-width:600px){
  .dock{ top:16px; padding:4px; gap:2px; }
  .dock__link{ height:36px; padding:0 10px; }
  .layout{ padding:110px 16px 60px; gap:40px; }
  .tools-grid{ grid-template-columns:repeat(1, minmax(0, 1fr)); }
  .page-heading--section{ margin-top:64px; }
  .page-heading--contact{ margin-top:64px; }
}

/* Large monitors: the fixed 1180px canvas leaves a lot of dead margin on
   anything wider than a laptop. Scale the canvas and the sidebar/heading
   elements that don't already flex with it — grids like offer-grid and
   tools-grid already fill the wider .content column on their own. Gated
   behind 1600px so laptop viewports render byte-for-byte as before. */
@media (min-width:1600px){
  :root{ --max-width:1600px; }
  .layout{
    grid-template-columns:340px 1fr;
    gap:96px;
  }
  .profile__photo-wrap{ max-width:230px; }
  .page-heading h1,
  .page-heading h2{ font-size:clamp(86px, 5vw, 116px); }
  .hero__tagline{ max-width:640px; font-size:18px; }
}

@media (prefers-reduced-motion: reduce){
  .page-heading .fill,
  .page-heading .ghost,
  .hero__tagline,
  .stat,
  .hero-card,
  .profile{
    animation:none;
    opacity:1;
    transform:none;
  }
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    transition-duration:.001ms !important;
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
  }
}