html {
  overflow-y: scroll; /* always reserve scrollbar width */
}

:root{
  --bg: #000000;
  --fg: #ffffff;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  background: var(--bg);
  color: var(--fg);
  font-family: "Archivo Black", "Arial Black", Arial, Helvetica, sans-serif;
}

/* layout */
.hero{
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 6vw;
}

.row{
  display: flex;
  align-items: flex-start;   /* aligns logo top with text top */
  gap: 1.5rem;               /* space between logo and text block */
}

/* logo exact size like screenshot */
.logo{
  width: 182px;   /* adjust if you want it pixel-perfect */
  height: auto;
  object-fit: contain;
  display: block;
  margin-top: 3.7em; /* nudge so top matches “HI, I’M” baseline */
}

/* text block */
.copy{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* “HI, I’M” */
.kicker{
  text-transform: uppercase;
  font-size: 48px; /* fixed to screenshot */
  line-height: 1;
  margin-bottom: -0.3em;
  margin-left: 0.1em;
}

/* “FRAN” */
.name{
  text-transform: uppercase;
  font-size: 160px; /* fixed to screenshot proportions */
  line-height: 1;
  margin-bottom: 0.5em;
  margin-left: -0.02em;
}

/* ENTER button */
.enter{
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  text-decoration: none;
  color: var(--fg);
  border: 4px solid var(--fg);
  padding: 0.1em 0.3em 0.1em 0.1em;
  font-size: 28px;
  text-transform: uppercase;
  line-height: 1;
  margin-top: -2.9em;
  margin-left: 0.3em;
  transition: all 0.2s ease;
}

.enter:hover{
  background: var(--fg);  /* white background */
  color: var(--bg);       /* text goes black */
}

.enter-text{ letter-spacing: 0.02em; }

/* arrow icon */
.enter-arrow{
  width: 20px;
  height: auto;
  display: inline-block;
  transform: translateY(2px);
  transition: filter 0.2s ease;
}

/* invert arrow color on hover */
.enter:hover .enter-arrow{
  filter: invert(1);
}

/* responsive safety for phones */
@media (max-width: 680px){
  .hero{ padding: 18px clamp(14px, 5vw, 24px); }
  .row{ flex-direction: column; align-items: flex-start; gap: .8rem; }
  .logo{ width: clamp(96px, 28vw, 148px); margin-top: .2em; }
  .kicker{
    font-size: clamp(20px, 6vw, 36px);
    margin: 0 0 -.15em .02em;
  }
  .name{
    font-size: clamp(48px, 20vw, 96px);
    margin: 0 0 .4em 0;
  }
  .enter{
    font-size: clamp(14px, 4.2vw, 18px);
    border-width: 3px;
    margin: 0;
    padding: .2em .4em .2em .25em;
  }
  .enter-arrow{ width: 18px; transform: translateY(1px); }
}

@media (max-width: 380px){
  .name{ font-size: clamp(40px, 18vw, 72px); }
}



/* ===== WELCOME PAGE ONLY ===== */
.welcome-page {
  background:#000;
  color:#fff;
  font-family:"acumin-pro-extra-condensed","Acumin Pro Extra Condensed","Arial Narrow",system-ui,sans-serif;
}

/* HERO */
.welcome-page .hero {
  padding: clamp(28px, 6vw, 72px) clamp(16px, 6vw, 60px);
}
.welcome-page .hero-title {
  font-weight:900;
  text-transform:uppercase;
  line-height:.92;                       /* tighter to avoid vertical creep */
  font-size: clamp(32px, 14vw, 96px);    /* phone-safe clamp (fixes cut-off) */
  max-width: 92vw;
  word-break: break-word;
  overflow-wrap: anywhere;
  margin: 0 0 .2em 0;
}

/* SECTION TITLE */
.welcome-page .section-title {
  margin:0 clamp(16px,6vw,60px) 14px;
  text-transform:uppercase;
  font-weight:900;
  letter-spacing:.02em;
  font-size:clamp(20px,3.2vw,44px);
}

/* FEATURED WORK TICKER */
.welcome-page .ticker-shell { overflow:hidden; padding:0 clamp(16px,6vw,60px); }
.welcome-page .ticker { display:flex; }
.welcome-page .ticker-track {
  display:flex;
  animation: scroll-left 22s linear infinite;
}
.welcome-page .ticker:hover .ticker-track { animation-play-state:paused; }
@keyframes scroll-left { from{transform:translateX(0);} to{transform:translateX(-100%);} }

/* Tiles */
.welcome-page .tile { display:block; width:40vw; min-width:240px; aspect-ratio:16/10; }
.welcome-page .tile.grey   { content: url("lbstudios/Cover.png") }
.welcome-page .tile.red    { content: url("heyya/Cover.png") }
.welcome-page .tile.purple { content: url("mom/cover.png") }

/* CTA */
.welcome-page .cta { text-align:right; padding:clamp(30px,0vw,500px) clamp(16px,6vw,60px) 120px; }

/* >>> Only this line uses Acumin Pro (per your request) <<< */
.welcome-page .cta-line{
  font-family: "acumin-pro","Acumin Pro",system-ui,Arial,sans-serif;
  font-weight: 800;
  font-style: normal;
  line-height:.95;
  font-size: clamp(28px, 6.4vw, 96px);
}
.welcome-page .cta-link{
  color:#fff; text-decoration:none; border-bottom:6px solid #fff; padding:0 .08em .02em;
}
.welcome-page .cta-link:hover{ background:#fff; color:#000; }

/* ===== WELCOME PAGE — NAVBAR (glass) ===== */
.welcome-page .site-header{
  position: sticky; top: 0; z-index: 50;
  display:flex; align-items:center; justify-content:space-between;
  padding: 22px clamp(20px,5vw,50px);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(255,255,255,0.04);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}

/* Brand */
.welcome-page .brand{
  --brand-size: clamp(30px, 3vw, 34px);
  --cap: 0.82; --cap-nudge: -0.02em;
  display:inline-flex; align-items:flex-end; gap:.6rem;
  color:#fff; text-decoration:none; text-transform:uppercase;
  font-family:"Archivo Black","Arial Black",Arial,Helvetica,sans-serif;
  font-weight:900; letter-spacing:.05em; font-size: var(--brand-size); line-height:1;
}
.welcome-page .brand-text{ line-height:1; font-family:"Archivo Black",sans-serif; }
.welcome-page .brand-logo{
  display:inline-block; height: calc(var(--brand-size)*var(--cap)); width:auto; align-self:flex-end; transform: translateY(var(--cap-nudge));
  content: url(pfpico.png);
}

/* Nav buttons */
.welcome-page .main-nav{ display:flex; gap:14px; flex-wrap: wrap; }
.welcome-page .nav-btn{
  display:inline-block; padding:.25em .55em; line-height:1.2;
  border:3px solid #fff; color:#fff; text-decoration:none; text-transform:uppercase;
  font-family:"Archivo Black","Arial Black",Arial,Helvetica,sans-serif;
  font-weight:900; font-size: clamp(14px,1.4vw,18px); letter-spacing:.05em;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.welcome-page .nav-btn:hover{ background:#fff; color:#000; transform:translateY(-1px); }

/* ===== WORK / PROJECTS PAGE ===== */
.work-page .work-wrap{ padding: clamp(22px, 4vw, 48px); }
.work-page .work-head{
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(16px, 3vw, 28px); margin-bottom: clamp(18px, 2.6vw, 32px);
}
.work-page .work-title{
  font-family: "Archivo Black","Arial Black",Arial,Helvetica,sans-serif;
  font-weight: 900; text-transform: uppercase; letter-spacing: .02em; line-height: .9;
  font-size: clamp(42px, 6.5vw, 80px); margin-bottom: 1.5rem;
}
.work-page .search{ flex: 0 0 360px; max-width: 40ch; width: 100%; }
.work-page .search-input{
  width: 100%; padding: .6em .8em; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06); color: #fff; font-size: clamp(14px, 1.2vw, 18px);
  font-family: "acumin-pro","Acumin Pro",system-ui,Arial,sans-serif;
  border-radius: 0; outline: none; backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%);
}
.work-page .projects{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.2vw, 28px);
}
@media (max-width: 980px){ .work-page .projects{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){
  .work-page .work-head{ flex-direction: column; align-items: flex-start; }
  .work-page .search{ width: 100%; max-width: none; }
  .work-page .projects{ grid-template-columns: 1fr; gap: 14px; }
}
.work-page .card{ display:block; color:#fff; text-decoration:none; }
.work-page .thumb{
  width:100%; aspect-ratio:16/10; border:2px solid #fff; border-radius:0;
  background:#111 center/cover no-repeat;
}
.work-page .meta{ margin-top:6px; display:flex; justify-content:space-between; align-items:center; }
.work-page .card-title{
  margin:0; font-family:"acumin-pro","Acumin Pro",system-ui,Arial,sans-serif; font-weight:700; text-transform:uppercase;
  font-size:clamp(20px,1.8vw,24px); line-height:1.1;
}
.work-page .tags{ display:flex; gap:6px; margin:0; }
.work-page .tag{
  display:inline-block; padding:.35em .55em; font-family:"acumin-pro","Acumin Pro",system-ui,Arial,sans-serif;
  font-size:13px; font-weight:600; line-height:1; background:#e9e9e9; color:#000; border:1px solid #000; border-radius:0;
}
.work-page .card:hover .thumb{ transform: translateY(-1px); box-shadow: 0 10px 30px rgba(0,0,0,.35); }

/* ===== CONTACT PAGE ===== */
.contact-page main{ padding: clamp(22px, 4vw, 48px); max-width:none; margin:0; }
.contact-page .page-title{
  font-family:"Archivo Black","Arial Black",Arial,Helvetica,sans-serif; font-weight:900; text-transform:uppercase; letter-spacing:.02em; line-height:.9;
  font-size: clamp(42px, 6.5vw, 80px); margin-bottom:18px;
}
.contact-page .intro{
  font-family:"acumin-pro","Acumin Pro",system-ui,Arial,sans-serif; color:#d6d6d6; max-width:70ch; margin-bottom: clamp(16px, 2.2vw, 24px);
}
.contact-page .form-shell{
  width:100%; border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%);
  padding: clamp(20px, 4vw, 40px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(255,255,255,.04);
}
.contact-page .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap: clamp(16px, 2vw, 24px); }
.contact-page .row-span-2{ grid-column: 1 / -1; }
.contact-page label{
  display:block; font-family:"acumin-pro","Acumin Pro",system-ui,Arial,sans-serif; font-size:14px; letter-spacing:.04em; margin-bottom:6px; color:#ffffffcc; text-transform:uppercase;
}
.contact-page input[type="text"],
.contact-page input[type="email"],
.contact-page input[type="file"],
.contact-page textarea{
  width:100%; padding:.85em 1em; border:1px solid rgba(255,255,255,.22); background:rgba(0,0,0,.25); color:#fff;
  font-family:"acumin-pro","Acumin Pro",system-ui,Arial,sans-serif; font-size:16px; border-radius:0; outline:none;
}
.contact-page textarea{ min-height:240px; resize:vertical; }
.contact-page .actions{ margin-top: clamp(18px, 2vw, 26px); display:flex; gap:14px; justify-content:flex-end; }
.contact-page .btn{
  display:inline-block; padding:.75em 1.2em; border:3px solid #fff; background:transparent; color:#fff;
  text-transform:uppercase; font-family:"Archivo Black","Arial Black",Arial,Helvetica,sans-serif; letter-spacing:.05em; font-size:16px; cursor:pointer;
}
.contact-page .btn:hover{ background:#fff; color:#000; }
.contact-page .notice{ margin-bottom:18px; padding:.9em 1.2em; border:1px solid rgba(255,255,255,.3); background:rgba(20,255,20,.08); color:#c9ffcf; font-family:"acumin-pro","Acumin Pro",system-ui,Arial,sans-serif; }
.contact-page .notice.error{ background:rgba(255,40,40,.08); color:#ffd6d6; }
.hp{ position:absolute !important; left:-5000px !important; top:auto !important; width:1px; height:1px; overflow:hidden; }
@media (max-width: 720px){ .contact-page .form-grid{ grid-template-columns:1fr; } }
.contact-page .attach-row .attach-line{ display:flex; align-items:center; gap:14px; }
.contact-page .attach-row input[type="file"]{ flex:1; }

/* ===== ABOUT PAGE ===== */
.about-page .about-wrap{ padding: clamp(22px, 4vw, 48px); }
.about-page .about-title{
  font-family:"Archivo Black","Arial Black",Arial,Helvetica,sans-serif; font-weight:900; text-transform:uppercase; letter-spacing:.02em; line-height:.9;
  font-size:clamp(42px, 6.5vw, 80px); margin-bottom: clamp(16px, 2.2vw, 24px);
}
.about-page .about-grid{
  display:grid; grid-template-columns: 1fr 1.4fr; gap: clamp(18px, 3vw, 36px); align-items:start;
  border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%);
  padding: clamp(20px, 3.4vw, 40px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(255,255,255,.04);
}
.about-page .about-media{ margin:0; width: clamp(220px, 28vw, 420px); }
.about-page .about-media img{
  display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; border:2px solid #fff; border-radius:0; background:#111;
  filter: grayscale(100%) contrast(1.05) brightness(0.98); -webkit-filter: grayscale(100%) contrast(1.05) brightness(0.98);
}
.about-page .about-copy{ font-family:"acumin-pro","Acumin Pro",system-ui,Arial,sans-serif; color:#e6e6e6; display:flex; flex-direction:column; }
.about-page .about-kicker{
  font-family:"acumin-pro","Acumin Pro",system-ui,Arial,sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:.04em; margin:0 0 .4em 0;
  font-size: clamp(22px, 2.6vw, 34px);
}
.about-page .about-blurb{ font-size: clamp(16px, 1.4vw, 18px); line-height:1.6; color:#d6d6d6; margin-bottom:1em; max-width:70ch; }
.about-page .about-facts{ list-style:none; margin:0 0 1.1em 0; padding:0; display:flex; flex-wrap:wrap; gap:.6em .9em; }
.about-page .about-facts li{
  font-family:"acumin-pro","Acumin Pro",system-ui,Arial,sans-serif; font-size:14px; text-transform:uppercase; letter-spacing:.04em;
  color:#000; background:#fff; border:none; padding:.5em .9em; border-radius:0; line-height:1; user-select:none; font-weight:600;
}
.about-page .about-actions{ margin-top:auto; display:flex; gap:12px; }
.about-page .about-btn{
  padding:.6em 1.2em; border:3px solid #fff; text-decoration:none; font-family:"Archivo Black","Arial Black",Arial,Helvetica,sans-serif;
  text-transform:uppercase; letter-spacing:.05em; font-size:16px; color:#fff; background:transparent;
}
.about-page .about-btn:hover{ background:#fff; color:#000; }
@media (max-width:900px){
  .about-page .about-grid{ grid-template-columns:1fr; }
  .about-page .about-media{ width:100%; }
  .about-page .about-media img{ aspect-ratio:16/9; }
}

/* ===== PROJECT PAGE ===== */
.project-page .proj-wrap{ padding: clamp(22px, 4vw, 48px); }
.project-page .proj-title{
  font-family:"Archivo Black","Arial Black",Arial,Helvetica,sans-serif; font-weight:900; text-transform:uppercase; letter-spacing:.02em; line-height:.9;
  font-size: clamp(42px, 6.5vw, 80px); margin-bottom: clamp(16px, 2.2vw, 24px);
}
.project-page .proj-grid{ display:grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .7fr); gap: clamp(18px, 3vw, 36px); }

/* Carousel (dissolve, contain-fit) */
.project-page .carousel{
  position:relative; border:2px solid #fff; background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(255,255,255,.04);
  overflow:hidden;
}
.project-page .carousel-viewport{ position:relative; width:100%; height:auto; min-height: 60vh; overflow:hidden; }
.project-page .carousel .slide{ position:absolute; inset:0; margin:0; opacity:0; pointer-events:none; transition:opacity .35s ease; }
.project-page .carousel .slide.is-active{ opacity:1; pointer-events:auto; }
.project-page .carousel .slide img,
.project-page .carousel .slide video{
  width:100%; height:100%; object-fit:contain; object-position:center; background:#000; display:block; border:0;
}

/* Arrows */
.project-page .car-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border:3px solid #000; background:#fff; color:#000;
  display:grid; place-items:center; cursor:pointer; user-select:none;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.project-page .car-btn.prev{ left:10px; }
.project-page .car-btn.next{ right:10px; }
.project-page .car-btn:hover{ background:#000; color:#fff; border-color:#fff; }
.project-page .car-btn img{ width:22px; height:22px; display:block; pointer-events:none; transition:filter .2s ease; filter:none; }
.project-page .car-btn:hover img{ filter: invert(1) brightness(2); }

/* Dots */
.project-page .car-dots{
  position:absolute; left:0; right:0; bottom:12px; display:flex; gap:8px; justify-content:center; padding:0 12px;
}
.project-page .car-dots .dot{ width:10px; height:10px; background:#bbb; border:1px solid #fff; border-radius:50%; display:inline-block; cursor:pointer; }
.project-page .car-dots .dot.is-active{ background:#fff; }

/* Description & side */
.project-page .proj-desc{ margin-top:12px; font-family:"acumin-pro","Acumin Pro",system-ui,Arial,sans-serif; color:#e6e6e6; line-height:1.6; }
.project-page .proj-side{
  border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%);
  padding: clamp(16px, 2.4vw, 22px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(255,255,255,.04);
}
.project-page .side-title{
  font-family:"Archivo Black","Arial Black",Arial,Helvetica,sans-serif; text-transform:uppercase;
  font-size:clamp(18px, 2vw, 22px); letter-spacing:.04em; margin:0 0 10px 0;
}
.project-page .tag-list{ list-style:none; padding:0; margin:0 0 14px 0; display:flex; flex-wrap:wrap; gap:6px; }
.project-page .tag{
  display:inline-block; padding:.35em .55em; font-family:"acumin-pro","Acumin Pro",system-ui,Arial,sans-serif;
  font-size:13px; font-weight:600; line-height:1; background:#fff; color:#000; border:1px solid #000; border-radius:0;
}
.project-page .meta-table{ display:grid; gap:8px; margin-top:8px; font-family:"acumin-pro","Acumin Pro",system-ui,Arial,sans-serif; color:#d6d6d6; }
.project-page .meta-table > div{ display:grid; grid-template-columns:120px 1fr; gap:10px; }
.project-page .meta-table dt{ text-transform:uppercase; letter-spacing:.04em; color:#ffffffcc; }
.project-page .meta-table dd{ margin:0; }

@media (max-width: 980px){
  .project-page .proj-grid{ grid-template-columns: 1fr; }
  .project-page .carousel-viewport{ min-height:48vh; }
  .project-page .car-btn{ width:40px; height:40px; border-width:2px; }
  .project-page .car-btn img{ width:20px; height:20px; }
  .project-page .car-dots{ gap:10px; bottom:10px; }
  .project-page .car-dots .dot{ width:12px; height:12px; border-width:2px; }
}
@media (prefers-reduced-motion: reduce){
  .project-page .carousel .slide{ transition: none; }
}

/* ===== GLOBAL mobile polish (one pass) ===== */
@media (max-width: 720px){
  .site-header{ padding: 12px clamp(14px, 5vw, 20px); }
  .nav-btn{ padding: .5rem .8rem; border-width: 2px; font-size: 14px; }
  input, textarea, button{ font-size:16px; } /* prevent iOS zoom */
}
@media (max-width: 380px){
  .welcome-page .nav-btn{ font-size:13px; }
}

/* ===== Landing (index.html) hero stack + scalable type ===== */
@media (max-width: 680px){
  .hero{ padding: 18px clamp(14px, 5vw, 24px); }
  .row{ flex-direction: column; align-items: flex-start; gap: .8rem; }
  .logo{ width: clamp(96px, 28vw, 148px); margin-top: .2em; }
  .kicker{ font-size: clamp(20px, 6vw, 36px); margin: 0 0 -.15em .02em; }
  .name{ font-size: clamp(48px, 20vw, 96px); margin: 0 0 .4em 0; }
  .enter{
    font-size: clamp(14px, 4.2vw, 18px);
    border-width: 3px; margin: 0; padding: .2em .4em .2em .25em;
  }
  .enter-arrow{ width: 18px; transform: translateY(1px); }
}
@media (max-width: 620px){
  .work-page .thumb{ border-width:2px; }
}

/* ===== PATCH — navbar weight/smoothing ===== */
.site-header .brand,
.site-header .brand-text,
.site-header .nav-btn{
  font-weight: 400 !important;         /* remove faux-bold */
  font-synthesis-weight: none;         /* prevent browser fake-weighting */
  -webkit-font-smoothing: auto;        /* undo overly thin antialiasing */
  -moz-osx-font-smoothing: auto;
}

/* If you set 900 on the header container anywhere, neutralize it: */
.site-header, .site-header * {
  font-weight: inherit;
}

/* ===== PATCH — contact form spacing/padding ===== */
.contact-page .form-shell{
  padding: clamp(20px, 4vw, 40px) !important;   /* restore interior padding */
}

.contact-page .form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;               /* your 2-col layout */
  column-gap: 16px;
  row-gap: 16px;                                /* vertical spacing between fields */
}

@media (max-width: 720px){
  .contact-page .form-grid{ grid-template-columns: 1fr; }
}

/* Ensure each label/field pair has breathing room */
.contact-page label + input,
.contact-page label + textarea,
.contact-page label + .attach-row{
  margin-top: 6px;                               /* space under each label */
}

/* Safety: make controls block-level and full width */
.contact-page input[type="text"],
.contact-page input[type="email"],
.contact-page input[type="file"],
.contact-page textarea{
  display: block;
  width: 100%;
  margin: 0;                                     /* avoid accidental negative merges */
  box-sizing: border-box;
}

/* Keep the attachment row tidy */
.contact-page .attach-row .attach-line{
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ===== PATCH — slide dots should be perfect circles ===== */
.project-page .car-dots .dot{
  inline-size: 12px;           /* width */
  block-size: 12px;            /* height */
  border-radius: 50%;
  padding: 0;                  /* prevent accidental oval from padding */
  display: inline-block;
}

@media (max-width: 980px){
  .project-page .car-dots .dot{
    inline-size: 12px;
    block-size: 12px;
    border-width: 2px;
  }
}

/* === WELCOME PAGE — unify text to Acumin Pro (except navbar) === */
:root{
  --acumin: "acumin-pro","Acumin Pro",system-ui,Arial,sans-serif;
}

/* Only non-navbar content on welcome page */
.welcome-page :not(.site-header):not(.site-header *){
  font-family: var(--acumin) !important;
  font-kerning: normal;
  font-feature-settings: "liga" 1, "kern" 1;
}

/* === FIX: About page side padding + column gap (hard override) === */
.about-page .about-grid{
  /* tighter inner padding */
  padding-block: clamp(16px, 2.2vw, 24px) !important;
  padding-inline: clamp(8px, 2vw, 16px) !important;

  /* smaller space between image + text */
  column-gap: clamp(10px, 1.6vw, 18px) !important;

  /* make columns hug content and give text max room */
  grid-template-columns: clamp(220px, 28vw, 420px) minmax(0,1fr) !important;
}

/* make sure no extra margins sneak in on either column */
.about-page .about-media{ margin-right: 0 !important; }
.about-page .about-copy { margin-left: 0 !important; }

/* On mobile, keep it tight after stacking */
@media (max-width: 900px){
  .about-page .about-grid{
    padding-inline: clamp(10px, 3vw, 18px) !important;
    row-gap: clamp(10px, 2vw, 16px) !important;
  }
}

/* === WELCOME — stop iOS font-boost & hard-cap big lines (navbar untouched) === */
.welcome-page{
  -webkit-text-size-adjust: 100%;  /* stop Safari from auto-enlarging headings */
}

/* Make sure all hero lines wrap inside the viewport */
.welcome-page :is(.hero-title, .section-title, .cta-line){
  max-width: 92vw;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: .92;
}

/* Phone caps (wins over older large clamps) */
@media (max-width: 820px){
  .welcome-page .hero-title{ font-size: clamp(28px, 12vw, 64px) !important; }
  .welcome-page .cta-line  { font-size: clamp(22px, 9vw, 48px)  !important; }
}
@media (max-width: 430px){
  .welcome-page .hero-title{ font-size: clamp(22px, 10vw, 48px) !important; }
  .welcome-page .cta-line  { font-size: clamp(18px, 8vw, 40px)  !important; }
}

/* === EMERGENCY CAP — Welcome page headings on iOS === */
html body.welcome-page{
  -webkit-text-size-adjust: 100% !important; /* stop any auto-boost */
  text-size-adjust: 100% !important;
}

/* Hard-cap the big lines no matter what came before */
html body.welcome-page .hero-title,
html body.welcome-page .section-title,
html body.welcome-page .cta-line,
html body.welcome-page h1{
  max-width: 92vw !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  line-height: .92 !important;
}

/* Phone + small iPhone caps (wins over old clamps) */
@media (max-width: 820px){
  html body.welcome-page .hero-title,
  html body.welcome-page h1{
    font-size: clamp(22px, 10vw, 52px) !important;
  }
  html body.welcome-page .cta-line,
  html body.welcome-page .section-title{
    font-size: clamp(18px, 8.5vw, 40px) !important;
  }
}
@media (max-width: 430px){
  html body.welcome-page .hero-title,
  html body.welcome-page h1{
    font-size: clamp(20px, 9.5vw, 44px) !important;
  }
  html body.welcome-page .cta-line,
  html body.welcome-page .section-title{
    font-size: clamp(16px, 8vw, 36px) !important;
  }
}