:root{
  --ink:#111015;
  --graphite:#1d1b22;
  --graphite-2:#2b2831;
  --orange:#f5821f;
  --orange-2:#ff9d36;
  --paper:#f3eadf;
  --paper-2:#fff8ef;
  --line:rgba(18,16,20,.105);
  --muted:#6c625a;
  --white:#fff;
  --shadow:0 22px 60px rgba(17,14,21,.18);
  --max:1280px;
  --radius:24px;
  --display: Impact, "Arial Narrow", "Bebas Neue", sans-serif;
  --block: Arial Black, "LEMON MILK", Arial, Helvetica, sans-serif;
  --script: "Segoe Print", "Segoe Script", "Bradley Hand", "Brush Script MT", cursive;
  --body: Arial, Helvetica, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 12% 7%, rgba(245,130,31,.14), transparent 24%),
    radial-gradient(circle at 88% 14%, rgba(0,0,0,.06), transparent 22%),
    linear-gradient(180deg,#fbf4ea 0%,#efe6da 100%);
  color:var(--ink);
  font-family:var(--body);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.44;
  background:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:28px 28px;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(calc(100% - 28px),var(--max));margin:0 auto}
.browser-shell{
  width:min(100%,1500px);
  margin:0 auto;
  background:var(--paper);
  box-shadow:0 30px 90px rgba(0,0,0,.25);
}
.browser-top{
  height:44px;
  background:linear-gradient(#242329,#18171c);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 16px;
  color:rgba(255,255,255,.65);
}
.dots{display:flex;gap:9px}
.dot{width:12px;height:12px;border-radius:50%}
.red{background:#ff5f57}.yellow{background:#febc2e}.green{background:#28c840}
.address{
  width:420px;max-width:45vw;height:27px;border-radius:7px;background:rgba(255,255,255,.11);
  display:grid;place-items:center;font-size:.82rem;
}
.tools{justify-self:end;letter-spacing:.12em}
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(17,16,21,.96);
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{
  min-height:72px;
  width:min(calc(100% - 42px),var(--max));
  margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:22px;
}
.brand{display:flex;align-items:center;gap:12px;min-width:max-content}
.brand-mark{width:52px;height:52px;object-fit:contain}
.brand-word{height:44px;width:160px;object-fit:contain;filter:brightness(.08) invert(1)}
.nav-links{display:flex;align-items:center;gap:30px;font-family:var(--display);letter-spacing:.08em;text-transform:uppercase;font-size:1.1rem}
.nav-links a{opacity:.88}
.nav-links a:hover{color:var(--orange);opacity:1}
.nav-cta{
  background:var(--orange);
  color:white;
  padding:15px 26px;
  font-family:var(--display);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:1.25rem;
}
.mobile-menu{display:none;border:0;background:var(--orange);color:#fff;font-family:var(--display);font-size:1.4rem;padding:9px 13px}
.paper-hero{
  position:relative;
  overflow:hidden;
  min-height:760px;
  background:
    radial-gradient(circle at 94% 33%, rgba(245,130,31,.11), transparent 20%),
    linear-gradient(rgba(17,16,21,.062) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,16,21,.062) 1px, transparent 1px),
    linear-gradient(180deg,#f8f1e7 0%,#f0e7dc 100%);
  background-size:auto,34px 34px,34px 34px,auto;
}
.paper-hero::before{
  content:"";
  position:absolute;inset:0;opacity:.28;pointer-events:none;
  background-image:
    radial-gradient(circle at 20% 30%,rgba(17,16,21,.16) 0 1px,transparent 2px),
    radial-gradient(circle at 88% 38%,rgba(17,16,21,.13) 0 1px,transparent 2px);
  background-size:23px 23px,29px 29px;
}
.side-tab{
  position:absolute;left:0;top:28px;width:74px;height:355px;
  border-radius:0 18px 18px 0;background:var(--orange);color:var(--ink);
  display:flex;align-items:center;justify-content:center;box-shadow:8px 8px 0 rgba(17,16,21,.08);z-index:3;
}
.side-tab span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--display);font-size:.9rem;letter-spacing:.12em;text-transform:uppercase}
.cross{position:absolute;width:36px;height:36px;opacity:.42;z-index:2}
.cross::before,.cross::after{content:"";position:absolute;background:var(--ink)}
.cross::before{height:1px;width:100%;top:50%}
.cross::after{width:1px;height:100%;left:50%}
.cross.one{left:35px;top:40px}.cross.two{right:42px;top:40px}.cross.three{right:46px;bottom:90px}.cross.four{left:105px;bottom:95px}
.decor-pens{position:absolute;left:80px;bottom:235px;width:128px;opacity:.85;transform:rotate(-9deg)}
.decor-note{position:absolute;right:-18px;bottom:300px;width:130px;transform:rotate(8deg);opacity:.78}
.hero-inner{position:relative;z-index:4;width:min(calc(100% - 170px),1120px);margin:0 auto;padding:45px 0 34px}
.hero-top{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:start}
.hero-title{margin:0;text-transform:uppercase;line-height:.82}
.hero-title .need{display:block;font-family:var(--display);font-size:clamp(4.4rem,8.7vw,8.4rem);letter-spacing:.07em;color:var(--graphite)}
.hero-title .designed{display:block;font-family:var(--display);font-size:clamp(5.4rem,10vw,10.3rem);letter-spacing:.035em;color:var(--orange)}
.script-line{margin-top:10px;font-family:var(--script);font-size:clamp(1.6rem,3vw,2.7rem);line-height:1.08;transform:rotate(-2deg)}
.script-line span{border-bottom:4px solid var(--orange)}
.logo-sketch-box{
  position:relative;
  min-height:330px;
  background:
    linear-gradient(rgba(17,16,21,.085) 1px,transparent 1px),
    linear-gradient(90deg,rgba(17,16,21,.085) 1px,transparent 1px),
    rgba(255,255,255,.20);
  background-size:25px 25px;
  overflow:visible;
}
.logo-sketch-box::before{
  content:"";position:absolute;inset:20px;border:1px dashed rgba(17,16,21,.20);transform:rotate(-1deg);
}
.hero-logo{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%) rotate(2deg);width:min(95%,470px);opacity:.93}
.hero-word{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:min(72%,390px);opacity:.88}
.logo-chip{
  position:absolute;right:18px;top:18px;background:var(--orange);padding:8px 12px;
  font-family:var(--display);letter-spacing:.08em;text-transform:uppercase;font-size:.85rem;
}
.menu-label{display:inline-flex;align-items:center;gap:10px;margin:24px 0 18px;background:var(--graphite);color:#fff;padding:11px 22px;font-family:var(--display);letter-spacing:.10em;font-size:1.25rem;text-transform:uppercase;box-shadow:7px 7px 0 rgba(245,130,31,.2)}
.menu-label b{color:var(--orange);border:1px solid var(--orange);border-radius:999px;padding:0 8px;font-weight:400}
.hand-arrow{display:inline-block;margin-left:18px;font-family:var(--script);font-size:2.5rem;transform:rotate(-10deg)}
.ticket-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.ticket{
  position:relative;
  min-height:178px;
  background:rgba(255,250,243,.84);
  border:1px solid rgba(245,130,31,.56);
  outline:1px dashed rgba(17,16,21,.22);
  outline-offset:5px;
  padding:12px 14px 10px;
  box-shadow:0 8px 18px rgba(17,16,21,.08);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
}
.ticket::before,.ticket::after{
  content:"";position:absolute;top:78px;width:9px;height:45px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px);opacity:.65;
}
.ticket::before{left:10px}.ticket::after{right:10px}
.ticket-num{position:absolute;left:10px;top:8px;font-family:var(--display);font-size:1rem;color:var(--ink)}
.ticket-arrow{position:absolute;right:11px;top:8px;color:var(--orange);font-size:1.25rem}
.ticket h3{margin:20px 0 0;text-align:center;font-family:var(--display);text-transform:uppercase;font-size:1.9rem;line-height:.88;letter-spacing:.04em}
.ticket h3 small{display:block;font-size:.85rem;letter-spacing:.08em}
.ticket img{width:66px;height:66px;object-fit:contain;margin-top:7px}
.ticket-footer{font-family:var(--display);font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;text-align:center}
.dark-band{
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    #111015;
  background-size:28px 28px;
  color:#fff;
  padding:38px 0;
}
.band-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px}
.band-title{margin:0 0 12px;font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;font-size:2.6rem;line-height:.9}
.band-title span{color:var(--orange)}
.band-copy{color:rgba(255,255,255,.72);line-height:1.65;max-width:430px}
.check-list{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:7px;color:rgba(255,255,255,.78)}
.check-list li::before{content:"☑";color:var(--orange);margin-right:9px}
.who-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.who-card{min-height:150px;text-align:center;padding:14px 10px;border-left:1px dashed rgba(255,255,255,.20)}
.who-card:first-child{border-left:0}
.who-card img{height:64px;width:64px;margin:0 auto 10px;object-fit:contain;filter:brightness(1.8) contrast(.95)}
.who-card strong{display:block;font-family:var(--display);letter-spacing:.05em;text-transform:uppercase;font-size:1.2rem}
.section{padding:76px 0;background:
    linear-gradient(rgba(17,16,21,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(17,16,21,.055) 1px,transparent 1px),
    #f3ece1;
  background-size:34px 34px}
.section.alt{background:#f7f0e7}
.section-head{display:grid;grid-template-columns:.8fr 1.2fr;gap:30px;align-items:end;margin-bottom:34px}
.section-title{margin:0;font-family:var(--display);text-transform:uppercase;font-size:clamp(3.4rem,6vw,5.8rem);line-height:.88;letter-spacing:.04em}
.section-title span{display:block;color:var(--orange)}
.section-copy{margin:0;color:var(--muted);line-height:1.75;max-width:700px;font-size:1.05rem}
.label{display:inline-flex;align-items:center;width:max-content;background:var(--graphite);color:#fff;border-right:8px solid var(--orange);padding:12px 18px;font-family:var(--display);font-size:2rem;letter-spacing:.06em;text-transform:uppercase;transform:rotate(-1deg)}
.label em{font-family:var(--script);font-size:1.5rem;margin-right:10px;color:var(--orange);font-style:normal;text-transform:none}
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.service-card{
  background:rgba(255,250,243,.78);border:1px solid rgba(17,16,21,.10);box-shadow:0 10px 22px rgba(17,16,21,.07);
  padding:20px;border-radius:18px;min-height:260px;position:relative;overflow:hidden;
}
.service-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:linear-gradient(90deg,var(--orange),transparent)}
.service-card img{height:92px;margin:0 auto 14px;object-fit:contain}
.service-card small{display:block;font-family:var(--block);font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;color:var(--orange);margin-bottom:8px}
.service-card h3{margin:0 0 8px;font-family:var(--display);text-transform:uppercase;line-height:.9;font-size:2rem;letter-spacing:.04em}
.service-card p{margin:0;color:var(--muted);line-height:1.55;font-size:.95rem}
.work-row{display:grid;grid-template-columns:170px 1fr;gap:24px;align-items:center}
.work-title h2{margin:0;font-family:var(--display);font-size:2.5rem;line-height:.9;text-transform:uppercase;letter-spacing:.04em;color:var(--orange)}
.work-title p{font-family:var(--script);font-size:1.7rem;line-height:1.1;color:#6f6860}
.polaroids{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.polaroid{position:relative;background:#fff;padding:11px 11px 16px;box-shadow:0 12px 24px rgba(17,16,21,.14);transform:rotate(-1deg)}
.polaroid:nth-child(even){transform:rotate(1deg)}
.tape{position:absolute;left:50%;top:-10px;transform:translateX(-50%);width:64px;height:17px;object-fit:cover}
.photo{height:132px;display:grid;place-items:center;background:linear-gradient(135deg,#2a2730,#111015);overflow:hidden}
.photo.orange{background:linear-gradient(135deg,var(--orange),#161319)}
.photo.light{background:linear-gradient(135deg,#fff8ed,#d6ccbf)}
.photo img{max-height:100%;max-width:100%;object-fit:contain;filter:brightness(1.25)}
.polaroid strong{display:block;margin-top:10px;text-align:center;font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;font-size:1.15rem;line-height:.95}
.process-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}
.steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.steps::before{content:"";position:absolute;left:12%;right:12%;top:26px;border-top:2px solid var(--ink)}
.step{text-align:center;position:relative;z-index:1}
.step-num{width:42px;height:42px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;margin:0 auto 14px;font-family:var(--display);font-size:1.8rem}
.step h3{margin:0 0 8px;font-family:var(--display);text-transform:uppercase;font-size:1.8rem;line-height:.9}
.step p{margin:0 auto;color:var(--muted);line-height:1.5;max-width:190px}
.cta-card{background:var(--orange);color:var(--ink);padding:30px;position:relative;overflow:hidden}
.cta-card h2{margin:0;color:#fff;font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-size:2.6rem;line-height:.9}
.cta-card .script{font-family:var(--script);font-size:2.3rem;line-height:1.02;transform:rotate(-2deg);display:block;margin-top:8px}
.cta-card .btn{display:inline-flex;margin-top:18px;background:var(--ink);color:#fff;padding:13px 42px;font-family:var(--display);font-size:1.35rem;text-transform:uppercase;letter-spacing:.08em}
.quote-panel{display:grid;grid-template-columns:.85fr 1.15fr;gap:0;border-radius:24px;overflow:hidden;box-shadow:var(--shadow);background:#fff}
.quote-left{background:var(--graphite);color:#fff;padding:34px;position:relative}
.quote-left img{width:240px;opacity:.18;position:absolute;right:-30px;bottom:-20px}
.quote-left h1{position:relative;margin:0;font-family:var(--display);font-size:4.5rem;line-height:.88;text-transform:uppercase;letter-spacing:.04em}
.quote-left h1 span{display:block;color:var(--orange)}
.quote-left p{position:relative;color:rgba(255,255,255,.72);line-height:1.75;max-width:400px}
.quote-form{padding:30px;background:
  linear-gradient(rgba(17,16,21,.045) 1px,transparent 1px),
  linear-gradient(90deg,rgba(17,16,21,.045) 1px,transparent 1px),
  #fff8ef;background-size:28px 28px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:grid;gap:7px}
.field.full{grid-column:1/-1}
label{font-family:var(--block);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(17,16,21,.74)}
input,select,textarea{width:100%;min-height:54px;padding:14px 15px;border:1px solid rgba(17,16,21,.16);background:#fff;color:var(--ink);font:inherit;border-radius:8px}
textarea{min-height:150px;resize:vertical}
button.submit{border:0;cursor:pointer;background:var(--orange);color:var(--ink);padding:15px 22px;font-family:var(--display);font-size:1.35rem;text-transform:uppercase;letter-spacing:.08em}
.footer{background:#111015;color:#fff;padding:26px 0}
.footer-inner{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center}
.footer-brand img{height:46px;width:auto;filter:brightness(.05) invert(1)}
.footer-tag{font-family:var(--block);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.64)}
.footer-contact{display:flex;flex-wrap:wrap;gap:18px;color:rgba(255,255,255,.78)}
.admin-table{width:100%;border-collapse:collapse;background:#fff;box-shadow:var(--shadow)}
.admin-table th,.admin-table td{padding:12px;border:1px solid rgba(0,0,0,.1);text-align:left;vertical-align:top}
.admin-table th{background:#111015;color:#fff;font-family:var(--display);letter-spacing:.06em;text-transform:uppercase}
.notice{padding:14px 18px;background:rgba(245,130,31,.14);border-left:6px solid var(--orange);margin:0 0 18px}
@media(max-width:1080px){
  .hero-inner{width:min(calc(100% - 36px),1120px)}
  .hero-top,.band-grid,.work-row,.process-layout,.quote-panel,.section-head{grid-template-columns:1fr}
  .ticket-grid,.services-grid{grid-template-columns:repeat(2,1fr)}
  .polaroids{grid-template-columns:repeat(2,1fr)}
  .who-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .browser-top{display:none}
  .side-tab,.decor-pens,.decor-note{display:none}
  .nav{min-height:70px;width:min(calc(100% - 22px),var(--max))}
  .brand-word{display:none}
  .nav-links{display:none;position:absolute;left:11px;right:11px;top:72px;background:#111015;padding:16px;flex-direction:column;align-items:flex-start;gap:16px}
  .nav-links.open{display:flex}
  .mobile-menu{display:block}
  .nav-cta{padding:12px 14px;font-size:1rem}
  .paper-hero{min-height:auto}
  .hero-title .need{font-size:clamp(3.8rem,18vw,5.5rem)}
  .hero-title .designed{font-size:clamp(4.6rem,22vw,6.8rem)}
  .ticket-grid,.services-grid,.polaroids,.who-grid,.steps,.form-grid{grid-template-columns:1fr}
  .steps::before{display:none}
  .ticket{min-height:160px}
  .footer-inner{grid-template-columns:1fr}
  .footer-contact{flex-direction:column;gap:7px}
}


/* === ARGraffix V2 refinements === */
.browser-shell{min-height:100vh}
.paper-hero{min-height:730px}
.hero-inner{padding-top:38px}
.hero-top{align-items:center}
.logo-sketch-box{border-radius:12px;box-shadow:inset 0 0 0 1px rgba(17,16,21,.06)}
.hero-logo{max-height:240px;object-fit:contain}
.hero-word{max-height:86px;object-fit:contain}
.ticket{cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.ticket:hover{transform:translateY(-4px) rotate(-.5deg);box-shadow:0 14px 26px rgba(17,16,21,.13);background:#fffaf3}
.ticket img{height:72px;width:88px}
.service-card img{height:110px}
.who-card img{height:72px;width:72px}
.photo{height:145px;padding:8px}
.photo img{width:100%;height:100%;object-fit:cover;filter:none}
.polaroid{min-height:235px}
.polaroid strong{min-height:42px}
.quote-form .hp-field{position:absolute;left:-9999px;opacity:0;height:0;width:0;overflow:hidden}
.quote-hint{font-size:.9rem;color:var(--muted);line-height:1.45;margin:0}
.form-status{margin:0 0 14px;padding:12px 14px;border-left:6px solid var(--orange);background:rgba(245,130,31,.13)}
.form-row-title{grid-column:1/-1;font-family:var(--display);font-size:1.7rem;text-transform:uppercase;letter-spacing:.04em;margin-top:4px}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(245,130,31,.22);border-color:var(--orange)}
button.submit:hover,.nav-cta:hover,.cta-card .btn:hover{filter:brightness(.96);transform:translateY(-1px)}
@media(max-width:1080px){
  .paper-hero{min-height:auto}
  .hero-logo{max-height:210px}
  .hero-word{max-height:72px}
  .ticket-grid{gap:18px}
  .band-grid{gap:28px}
  .who-grid{gap:18px}
  .work-row{align-items:start}
}
@media(max-width:760px){
  body::before{background-size:24px 24px}
  .browser-shell{box-shadow:none}
  .site-header{position:sticky}
  .nav{min-height:70px;width:min(calc(100% - 22px),var(--max));gap:10px}
  .nav-cta{display:none}
  .brand-mark{width:48px;height:48px}
  .hero-inner{width:min(calc(100% - 24px),1120px);padding:26px 0}
  .hero-top{gap:24px}
  .hero-title .need{font-size:clamp(3.4rem,18vw,5rem);letter-spacing:.045em}
  .hero-title .designed{font-size:clamp(4.2rem,22vw,6.4rem);letter-spacing:.02em}
  .script-line{font-size:clamp(1.25rem,7vw,2rem);line-height:1.15}
  .logo-sketch-box{min-height:240px}
  .hero-logo{width:92%;max-height:170px}
  .hero-word{width:80%;max-height:58px}
  .logo-chip{font-size:.7rem;right:10px;top:10px}
  .menu-label{font-size:1rem;letter-spacing:.07em;display:flex;width:100%;justify-content:center;margin-top:20px}
  .hand-arrow{display:none}
  .ticket{min-height:178px;padding:14px 22px}
  .ticket h3{font-size:2rem}
  .ticket img{width:96px;height:76px}
  .dark-band{padding:48px 0}
  .band-title{font-size:2.3rem}
  .who-card{border-left:none;border-top:1px dashed rgba(255,255,255,.20);padding-top:20px}
  .who-card:first-child{border-top:0}
  .section{padding:54px 0}
  .section-head{gap:18px;margin-bottom:24px}
  .section-title{font-size:clamp(2.7rem,14vw,4.4rem)}
  .label{font-size:1.6rem;max-width:100%}
  .service-card{min-height:auto}
  .work-row{gap:18px}
  .work-title p{margin-bottom:8px}
  .polaroid{min-height:auto}
  .photo{height:175px}
  .quote-panel{border-radius:14px}
  .quote-left{padding:24px}
  .quote-left h1{font-size:clamp(3.1rem,15vw,4.4rem)}
  .quote-form{padding:22px}
  .form-grid{gap:12px}
  .field.full{grid-column:1}
  .process-layout{gap:28px}
  .cta-card h2{font-size:2.2rem}
}
@media(max-width:420px){
  .hero-title .need{font-size:3.1rem}
  .hero-title .designed{font-size:4rem}
  .ticket h3{font-size:1.75rem}
  .footer-contact{font-size:.95rem}
}


/* =========================================================
   ARGraffix V3.1 FIXED OVERRIDES
   These are intentionally at the end so they override V2.
   ========================================================= */

/* Better handwritten accent font stack — removes Comic Sans feel */
:root{
  --script: "Segoe Print", "Segoe Script", "Bradley Hand", "Brush Script MT", cursive;
}

/* Pen artwork: keep visible/top layer, no awkward clipping */
.paper-hero{overflow:hidden;}
.decor-pens{
  display:block !important;
  position:absolute !important;
  left:18px !important;
  top:300px !important;
  bottom:auto !important;
  width:120px !important;
  max-width:120px !important;
  z-index:10 !important;
  opacity:.9 !important;
  transform:rotate(-8deg) !important;
  pointer-events:none !important;
}

/* Ticket menu: clickable cards, no MY, cleaner spacing */
.ticket-grid{
  align-items:stretch;
}
.ticket{
  color:inherit !important;
  text-decoration:none !important;
  cursor:pointer !important;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.ticket:hover{
  transform:translateY(-4px) rotate(-.35deg);
  box-shadow:0 14px 26px rgba(17,16,21,.13);
  background:#fffaf3;
}
.ticket h3 small,
.ticket .my-label{
  display:none !important;
}
.ticket h3{
  margin-top:22px !important;
}
.ticket img{
  width:88px !important;
  height:72px !important;
  object-fit:contain !important;
}

/* Featured work: back to original icon placeholders, NOT nested portfolio thumbnails */
.work-row{
  grid-template-columns:230px 1fr !important;
  gap:28px !important;
  align-items:start !important;
}
.work-title{
  padding-left:8px !important;
  min-width:0 !important;
}
.work-title h2{
  margin:0 !important;
  font-family:var(--display) !important;
  text-transform:uppercase !important;
  line-height:.84 !important;
  font-size:clamp(3rem,5vw,4.6rem) !important;
  color:var(--orange) !important;
  letter-spacing:.02em !important;
  max-width:210px !important;
  overflow:visible !important;
}
.work-title h2 span{
  display:block !important;
}
.work-title p{
  margin:18px 0 0 !important;
  font-family:var(--script) !important;
  font-size:1.65rem !important;
  line-height:1.12 !important;
  color:#6a625b !important;
}
.polaroids{
  align-items:start !important;
}
.polaroid{
  min-height:unset !important;
}
.photo{
  height:132px !important;
  padding:10px !important;
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
}
.photo img{
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  filter:brightness(1.15) contrast(1.05) !important;
}
.polaroid strong{
  min-height:auto !important;
}

/* Quote page: hidden honeypot field */
.quote-form .hp-field{
  position:absolute !important;
  left:-9999px !important;
  opacity:0 !important;
  height:0 !important;
  width:0 !important;
  overflow:hidden !important;
}
.quote-hint{
  grid-column:1/-1;
  font-size:.9rem;
  color:var(--muted);
  line-height:1.45;
  margin:0 0 6px;
}

/* Mobile fixes */
@media(max-width:1080px){
  .work-row{
    grid-template-columns:1fr !important;
  }
  .work-title h2{
    max-width:none !important;
  }
}
@media(max-width:760px){
  .decor-pens{
    left:8px !important;
    top:250px !important;
    width:92px !important;
  }
  .work-row{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }
  .work-title{
    padding-left:0 !important;
  }
  .work-title h2{
    font-size:clamp(2.4rem,12vw,3.5rem) !important;
    max-width:none !important;
  }
  .work-title p{
    font-size:1.45rem !important;
  }
}


/* =========================================================
   ARGraffix V4 — real-site full-width version
   Removes browser/mockup frame behavior and fixes hero text.
   ========================================================= */

body{
  background:
    radial-gradient(circle at 12% 7%, rgba(245,130,31,.14), transparent 24%),
    radial-gradient(circle at 88% 14%, rgba(0,0,0,.06), transparent 22%),
    linear-gradient(180deg,#fbf4ea 0%,#efe6da 100%) !important;
  overflow-x:hidden;
}

/* Remove mock browser presentation shell for real website use */
.browser-shell{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  min-height:100vh;
}

.browser-top{
  display:none !important;
}

.site-header{
  top:0 !important;
  box-shadow:0 10px 30px rgba(17,16,21,.12);
}

.nav{
  width:min(calc(100% - 48px), 1440px) !important;
}

.container{
  width:min(calc(100% - 48px), 1440px) !important;
}

/* Hero full-width real site */
.paper-hero{
  min-height:720px !important;
  width:100% !important;
  border-bottom:1px solid rgba(17,16,21,.10);
}

.hero-inner{
  width:min(calc(100% - 180px), 1280px) !important;
  padding-top:54px !important;
  padding-bottom:38px !important;
}

.hero-top{
  grid-template-columns:1.05fr .95fr !important;
  gap:54px !important;
}

/* New hero headline hierarchy */
.hero-title{
  max-width:820px;
}

.hero-title .need,
.hero-title .designed,
.hero-title .line-extra{
  display:block;
  font-family:var(--display);
  text-transform:uppercase;
  line-height:.84;
  letter-spacing:.035em;
}

.hero-title .need{
  font-size:clamp(4.9rem, 8vw, 8.6rem) !important;
  color:var(--graphite) !important;
}

.hero-title .designed{
  font-size:clamp(4.8rem, 7.7vw, 8.2rem) !important;
  color:var(--graphite) !important;
}

.hero-title .line-extra{
  font-size:clamp(4.6rem, 7.5vw, 8rem) !important;
  color:var(--orange) !important;
}

.script-line{
  max-width:760px;
  margin-top:22px !important;
  font-size:clamp(1.45rem, 2.6vw, 2.55rem) !important;
  line-height:1.18 !important;
}

.logo-sketch-box{
  min-height:380px !important;
}

.hero-logo{
  max-height:265px !important;
}

.hero-word{
  max-height:92px !important;
}

.side-tab span{
  letter-spacing:.10em !important;
}

.decor-pens{
  top:330px !important;
  left:24px !important;
}

@media(max-width:1080px){
  .hero-inner{
    width:min(calc(100% - 44px), 1280px) !important;
  }

  .hero-top{
    grid-template-columns:1fr !important;
    gap:30px !important;
  }

  .logo-sketch-box{
    min-height:310px !important;
  }

  .paper-hero{
    min-height:auto !important;
  }
}

@media(max-width:760px){
  .nav{
    width:min(calc(100% - 24px), 1440px) !important;
  }

  .container{
    width:min(calc(100% - 24px), 1440px) !important;
  }

  .hero-inner{
    width:min(calc(100% - 24px), 1280px) !important;
    padding-top:32px !important;
  }

  .hero-title .need{
    font-size:clamp(3.25rem, 16vw, 4.8rem) !important;
  }

  .hero-title .designed{
    font-size:clamp(3.2rem, 15vw, 4.6rem) !important;
  }

  .hero-title .line-extra{
    font-size:clamp(3.35rem, 16vw, 4.9rem) !important;
  }

  .script-line{
    font-size:clamp(1.15rem, 6vw, 1.75rem) !important;
  }

  .logo-sketch-box{
    min-height:255px !important;
  }

  .hero-logo{
    max-height:175px !important;
  }

  .hero-word{
    max-height:62px !important;
  }

  .decor-pens{
    display:none !important;
  }
}


/* V4.1 clean-up: ensure no mock-browser remnants render */
.browser-top,
.address,
.tools,
.dots{
  display:none !important;
}
.browser-shell{
  padding-top:0 !important;
  margin-top:0 !important;
}
.site-header{
  margin-top:0 !important;
}


/* =========================================================
   ARGraffix V4.2 TYPOGRAPHY PASS
   Uses bundled brand fonts and improves hero readability.
   ========================================================= */
@font-face{
  font-family:"ARG Bebas";
  src:url("../fonts/BebasNeue-Regular.otf") format("opentype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"ARG Lemon";
  src:url("../fonts/LEMONMILK-Bold.otf") format("opentype");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"ARG Fair";
  src:url("../fonts/Fair Prosper.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --display: "ARG Bebas", "Oswald", "Arial Narrow", sans-serif;
  --block: "ARG Lemon", Arial, Helvetica, sans-serif;
  --script: "ARG Fair", "Segoe Print", "Segoe Script", cursive;
}

/* General display rhythm */
.nav-links,
.nav-cta,
.menu-label,
.ticket-num,
.ticket-footer,
.band-title,
.section-title,
.work-title h2,
.step h3,
.cta-card h2,
button.submit,
.footer-tag,
.who-card strong{
  letter-spacing:.045em !important;
}

/* HERO typography fix */
.hero-title{
  max-width:980px !important;
}
.hero-title .need,
.hero-title .designed,
.hero-title .line-extra{
  font-family:var(--display) !important;
  letter-spacing:.018em !important;
  line-height:.88 !important;
  margin:0 !important;
  text-rendering:optimizeLegibility;
}

.hero-title .need{
  font-size:clamp(5.2rem, 8.2vw, 8.8rem) !important;
}
.hero-title .designed{
  font-size:clamp(5rem, 7.9vw, 8.4rem) !important;
}
.hero-title .line-extra{
  font-size:clamp(4.9rem, 7.6vw, 8rem) !important;
}

/* Script tagline — more like your branded font */
.script-line{
  font-family:var(--script) !important;
  font-size:clamp(1.35rem, 2.5vw, 2.3rem) !important;
  line-height:1.26 !important;
  max-width:760px !important;
}
.script-line span{
  border-bottom:4px solid var(--orange);
}

/* Tickets: tighter hierarchy, cleaner fit */
.ticket{
  padding:12px 12px 12px !important;
}
.ticket h3{
  font-family:var(--display) !important;
  font-size:2.35rem !important;
  line-height:.88 !important;
  letter-spacing:.01em !important;
  margin:18px 0 0 !important;
  max-width:92% !important;
}
.ticket-footer{
  font-family:var(--block) !important;
  font-size:.72rem !important;
  letter-spacing:.08em !important;
}

/* Featured work left block — much more readable */
.work-title h2{
  font-family:var(--display) !important;
  font-size:clamp(3.1rem, 5.1vw, 4.7rem) !important;
  line-height:.86 !important;
  letter-spacing:.018em !important;
  max-width:250px !important;
}
.work-title p{
  font-family:var(--script) !important;
  font-size:2rem !important;
  line-height:1.1 !important;
  max-width:230px !important;
  margin-top:20px !important;
}

/* Section and band headings */
.band-title,
.section-title{
  font-family:var(--display) !important;
  letter-spacing:.022em !important;
  line-height:.92 !important;
}
.label{
  font-family:var(--display) !important;
  letter-spacing:.045em !important;
}
.label em{
  font-family:var(--script) !important;
}

/* CTA + nav */
.nav-links a,
.nav-cta,
.menu-label,
button.submit,
.cta-card .btn{
  font-family:var(--display) !important;
}
.brand-word{
  object-fit:contain !important;
}

/* Mobile refinements */
@media(max-width:760px){
  .hero-title .need{
    font-size:clamp(3.45rem, 15.5vw, 4.9rem) !important;
  }
  .hero-title .designed{
    font-size:clamp(3.35rem, 15vw, 4.7rem) !important;
  }
  .hero-title .line-extra{
    font-size:clamp(3.3rem, 15vw, 4.6rem) !important;
  }
  .script-line{
    font-size:clamp(1.15rem, 6vw, 1.7rem) !important;
    line-height:1.28 !important;
  }
  .ticket h3{
    font-size:2.05rem !important;
    line-height:.9 !important;
  }
  .work-title h2{
    font-size:clamp(2.8rem, 12vw, 3.8rem) !important;
    max-width:none !important;
  }
  .work-title p{
    font-size:1.75rem !important;
    max-width:none !important;
  }
}


/* =========================================================
   ARGraffix V4.3 refinement pass
   - return to more organic script look
   - enlarge left bar text
   - fix featured work overlap
   - fix mobile polaroid distortion
   - use uploaded logos
   ========================================================= */

/* Use the earlier more organic handwritten stack instead of Fair Prosper */
:root{
  --script: "Segoe Print", "Segoe Script", "Bradley Hand", "Brush Script MT", cursive !important;
}

/* Logo treatment */
.brand{
  gap:14px !important;
}
.brand-mark{
  width:52px !important;
  height:52px !important;
  object-fit:contain !important;
}
.brand-word{
  width:220px !important;
  height:56px !important;
  object-fit:contain !important;
  filter:none !important;
}
.footer-brand img{
  height:54px !important;
  width:auto !important;
  filter:none !important;
}
.hero-logo{
  width:min(92%, 440px) !important;
  max-height:250px !important;
  object-fit:contain !important;
}
.hero-word{
  width:min(84%, 430px) !important;
  max-height:86px !important;
  object-fit:contain !important;
}

/* Left orange vertical bar text bigger and easier to read */
.side-tab{
  width:86px !important;
}
.side-tab span{
  font-size:1.02rem !important;
  letter-spacing:.14em !important;
  line-height:1 !important;
}

/* Script text back to more natural look */
.script-line,
.work-title p,
.label em{
  font-family:var(--script) !important;
  letter-spacing:0 !important;
}

/* Featured work layout: more room so text does not run into polaroids */
.work-row{
  grid-template-columns:300px 1fr !important;
  gap:34px !important;
  align-items:start !important;
}
.work-title{
  padding-left:6px !important;
  padding-right:10px !important;
}
.work-title h2{
  max-width:290px !important;
  font-size:clamp(3.1rem, 5vw, 4.9rem) !important;
  line-height:.87 !important;
  margin:0 !important;
}
.work-title p{
  max-width:260px !important;
  font-size:1.95rem !important;
  line-height:1.08 !important;
  margin-top:22px !important;
}

/* Polaroid row better sizing */
.polaroids{
  display:grid !important;
  grid-template-columns:repeat(5, minmax(170px, 1fr)) !important;
  gap:18px !important;
  align-items:start !important;
}
.polaroid{
  width:100% !important;
  min-height:238px !important;
  padding:11px 11px 16px !important;
}
.photo{
  height:138px !important;
  padding:8px !important;
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
}
.photo img{
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  display:block !important;
}
.polaroid strong{
  font-size:1.05rem !important;
  line-height:.95 !important;
  min-height:40px !important;
}

/* Mobile fixes: no distortion, stack cleanly */
@media(max-width:1080px){
  .work-row{
    grid-template-columns:1fr !important;
    gap:22px !important;
  }
  .work-title{
    padding-right:0 !important;
  }
  .work-title h2,
  .work-title p{
    max-width:none !important;
  }
  .polaroids{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

@media(max-width:760px){
  .brand-word{
    width:170px !important;
    height:44px !important;
  }
  .side-tab{
    width:72px !important;
  }
  .side-tab span{
    font-size:.86rem !important;
    letter-spacing:.12em !important;
  }
  .polaroids{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }
  .polaroid{
    min-height:auto !important;
    padding:10px 10px 14px !important;
  }
  .photo{
    height:150px !important;
  }
  .photo img{
    width:auto !important;
    height:auto !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
  }
  .work-title p{
    font-size:1.7rem !important;
  }
}

@media(max-width:480px){
  .brand-mark{
    width:44px !important;
    height:44px !important;
  }
  .brand-word{
    width:150px !important;
    height:40px !important;
  }
  .photo{
    height:136px !important;
  }
}


/* =========================================================
   ARGraffix V4.4 Logo Fix
   - nav uses horizontal white logo only
   - hero uses stacked logo only, larger
   - transparent logo assets restored
   ========================================================= */

.brand{
  gap:0 !important;
}

.brand-mark{
  display:none !important;
}

.brand-word-nav{
  width:230px !important;
  height:56px !important;
  object-fit:contain !important;
  display:block !important;
  filter:none !important;
}

.footer-brand img{
  height:56px !important;
  width:auto !important;
  object-fit:contain !important;
  filter:none !important;
}

.hero-logo{
  width:min(96%, 520px) !important;
  max-height:360px !important;
  object-fit:contain !important;
  display:block !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-48%) !important;
}

.hero-word{
  display:none !important;
}

.logo-sketch-box{
  min-height:390px !important;
}

@media(max-width:760px){
  .brand-word-nav{
    width:180px !important;
    height:44px !important;
  }

  .hero-logo{
    width:min(96%, 330px) !important;
    max-height:250px !important;
  }

  .logo-sketch-box{
    min-height:270px !important;
  }

  .footer-brand img{
    height:46px !important;
  }
}


/* =========================================================
   ARGraffix V4.5 Section polish
   ========================================================= */

/* Loosen nav spacing a little */
.nav-links a{
  letter-spacing:.055em !important;
}

/* Dark band headings — looser tracking, slightly larger */
.band-title{
  font-size:clamp(3rem, 4.7vw, 4.8rem) !important;
  letter-spacing:.03em !important;
  line-height:.92 !important;
}
.band-title span{
  letter-spacing:.028em !important;
}
.band-copy{
  max-width:520px !important;
}

/* WHO WE DESIGN FOR section larger/more readable */
.who-grid{
  display:grid !important;
  grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
  gap:0 !important;
  margin-top:26px !important;
}
.who-card{
  padding:18px 18px 16px !important;
  min-height:170px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:16px !important;
  text-align:center !important;
}
.who-card img{
  width:86px !important;
  height:86px !important;
  object-fit:contain !important;
}
.who-card strong{
  font-size:1.48rem !important;
  line-height:.98 !important;
  letter-spacing:.02em !important;
  max-width:140px !important;
}
.who-card + .who-card{
  border-left:1px dashed rgba(255,255,255,.18) !important;
}

/* Featured work section */
.work-row{
  grid-template-columns:290px 1fr !important;
  gap:34px !important;
}
.work-title h2{
  letter-spacing:.028em !important;
}
.work-title p{
  font-family:var(--script) !important;
}

/* Homepage polaroids — less awkward white bottom, bigger captions */
.polaroids{
  grid-template-columns:repeat(5, minmax(160px, 1fr)) !important;
  gap:16px !important;
}
.polaroid{
  padding:8px 8px 12px !important;
  min-height:210px !important;
}
.polaroid .tape{
  top:-9px !important;
}
.photo{
  height:132px !important;
  padding:4px !important;
}
.polaroid strong{
  font-family:var(--script) !important;
  font-size:1.28rem !important;
  line-height:1.03 !important;
  min-height:auto !important;
  display:block !important;
  margin-top:10px !important;
  color:#161419 !important;
}

/* Work page visual board */
.work-board{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:22px;
}
.work-polaroid{
  position:relative;
  background:#f9f7f3;
  border:10px solid #f8f6f1;
  box-shadow:0 10px 18px rgba(17,16,21,.08);
  padding:8px 8px 14px;
}
.work-polaroid .tape{
  position:absolute;
  top:-10px;
  left:50%;
  transform:translateX(-50%);
  width:58px;
}
.work-polaroid .photo{
  height:180px !important;
}
.work-polaroid strong{
  display:block;
  margin-top:12px;
  font-family:var(--script);
  font-size:1.35rem;
  line-height:1.04;
}
.work-polaroid p{
  margin:.45rem 0 0;
  color:var(--muted);
  font-size:.95rem;
  line-height:1.45;
}

/* Slightly reduce mobile nav crowding */
@media(max-width:980px){
  .nav-links{
    gap:18px !important;
  }
  .who-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:18px !important;
  }
  .who-card + .who-card{
    border-left:0 !important;
  }
  .work-board{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media(max-width:760px){
  .band-title{
    font-size:clamp(2.6rem, 12vw, 3.8rem) !important;
    letter-spacing:.026em !important;
  }
  .who-grid{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  .who-card{
    min-height:auto !important;
    padding:18px 10px !important;
    border-top:1px dashed rgba(255,255,255,.16) !important;
  }
  .who-card:first-child{
    border-top:0 !important;
  }
  .who-card img{
    width:94px !important;
    height:94px !important;
  }
  .who-card strong{
    font-size:1.6rem !important;
    max-width:none !important;
  }

  .work-row{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }
  .polaroids{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  .polaroid{
    padding:8px 8px 12px !important;
    min-height:auto !important;
  }
  .photo{
    height:150px !important;
  }
  .polaroid strong{
    font-size:1.38rem !important;
  }

  .work-board{
    grid-template-columns:1fr;
    gap:16px;
  }
  .work-polaroid .photo{
    height:160px !important;
  }
}


/* =========================================================
   ARGraffix V4.6 refinements
   ========================================================= */

/* Hero handwritten line: two lines and a more organic underline */
.script-line{
  margin-top:14px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:2px !important;
  transform:rotate(-1.5deg) !important;
  max-width:780px !important;
}
.script-line .line1,
.script-line .line2{
  display:block !important;
}
.script-line .line2{
  position:relative !important;
  width:max-content !important;
  max-width:100% !important;
}
.script-line .underline::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-8px;
  height:16px;
  background:url("../img/hand-underline.svg") left center / 100% 100% no-repeat;
  pointer-events:none;
}
@media(max-width:760px){
  .script-line{
    gap:6px !important;
    transform:rotate(-1deg) !important;
  }
  .script-line .line2{
    width:auto !important;
  }
}

/* Homepage cards: cleaner pinned cards, not awkward polaroids */
.polaroids{
  grid-template-columns:repeat(5, minmax(150px,1fr)) !important;
  gap:16px !important;
}
.polaroid{
  background:#f8f6f1 !important;
  border:8px solid #f6f3ee !important;
  padding:8px 8px 10px !important;
  min-height:auto !important;
  transform:rotate(0deg) !important;
  box-shadow:0 10px 20px rgba(17,16,21,.10) !important;
}
.polaroid:nth-child(even){
  transform:rotate(0deg) !important;
}
.photo{
  height:142px !important;
  padding:6px !important;
}
.polaroid strong{
  font-family:var(--script) !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  font-size:1.28rem !important;
  line-height:1.03 !important;
  text-align:left !important;
  margin-top:10px !important;
  padding:0 2px !important;
}
@media(max-width:760px){
  .polaroids{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  .photo{
    height:150px !important;
  }
  .polaroid strong{
    font-size:1.35rem !important;
  }
}

/* Cleaner, simpler work page */
.examples-stack{
  display:grid;
  gap:26px;
}
.example-row{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:26px;
  align-items:center;
  background:rgba(255,255,255,.26);
  border:1px solid rgba(17,16,21,.08);
  padding:20px;
}
.example-row.reverse{
  grid-template-columns:1.1fr .9fr;
}
.example-row.reverse .example-visual{
  order:2;
}
.example-row.reverse .example-copy{
  order:1;
}
.example-visual{
  position:relative;
  min-height:240px;
  display:grid;
  place-items:center;
  overflow:hidden;
  box-shadow:0 10px 18px rgba(17,16,21,.06);
}
.example-visual.dark{
  background:linear-gradient(135deg,#23212a,#111015);
}
.example-visual.orange{
  background:linear-gradient(135deg,var(--orange),#4f2c07 92%);
}
.example-visual.light{
  background:linear-gradient(135deg,#fff8ed,#ddd2c3);
}
.example-visual img{
  max-width:82%;
  max-height:82%;
  object-fit:contain;
  filter:brightness(1.15);
}
.example-copy h2{
  font-family:var(--display);
  font-size:clamp(2.6rem,4vw,4.2rem);
  line-height:.92;
  letter-spacing:.02em;
  margin:.15rem 0 .7rem;
}
.example-copy p{
  margin:0;
  font-size:1.08rem;
  line-height:1.7;
  color:var(--muted);
  max-width:620px;
}
.example-kicker{
  font-family:var(--block);
  font-size:.8rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--orange);
}
.cta-card-slim{
  margin-top:26px;
}
@media(max-width:980px){
  .example-row,
  .example-row.reverse{
    grid-template-columns:1fr !important;
  }
  .example-row.reverse .example-visual,
  .example-row.reverse .example-copy{
    order:initial;
  }
}
@media(max-width:760px){
  .example-row{
    gap:18px;
    padding:14px;
  }
  .example-visual{
    min-height:180px;
  }
  .example-copy h2{
    font-size:clamp(2.2rem,10vw,3.2rem);
  }
  .example-copy p{
    font-size:1rem;
    line-height:1.55;
  }
}


/* =========================================================
   ARGraffix V4.7 cleanup pass
   - larger nav links
   - cleaner handwritten hero line
   - no underline treatment
   - improved who-we-design-for readability
   - styled footer with click-to-call phone
   ========================================================= */

.nav-links a{
  font-size:1.08rem !important;
  letter-spacing:.04em !important;
  opacity:.95 !important;
}
.nav-cta{
  font-size:1.2rem !important;
}

.script-line{
  margin-top:12px !important;
  line-height:1.08 !important;
  transform:rotate(-1deg) !important;
  display:flex !important;
  flex-direction:column !important;
  gap:6px !important;
  max-width:780px !important;
}
.script-line span{
  display:block !important;
  border-bottom:0 !important;
  letter-spacing:0 !important;
  word-spacing:.02em !important;
}
.script-line .line1,
.script-line .line2{
  width:max-content !important;
  max-width:100% !important;
}

.who-card{
  padding:16px 12px !important;
}
.who-card img{
  height:70px !important;
  width:70px !important;
}
.who-card strong{
  font-size:1.26rem !important;
  letter-spacing:.035em !important;
  line-height:.98 !important;
}

.footer{
  background:#111015 !important;
  color:#fff !important;
  padding:28px 0 !important;
}
.footer-inner{
  display:grid !important;
  grid-template-columns:auto 1fr auto !important;
  gap:22px !important;
  align-items:center !important;
}
.footer-center{
  display:grid !important;
  gap:10px !important;
  justify-items:center !important;
}
.footer-brand img{
  height:48px !important;
  width:auto !important;
  filter:brightness(.05) invert(1) !important;
}
.footer-tag{
  font-family:var(--block) !important;
  font-size:.78rem !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  color:rgba(255,255,255,.66) !important;
}
.footer-contact-styled{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  justify-content:center !important;
  gap:12px !important;
}
.footer-contact-styled a{
  color:#fff !important;
  text-decoration:none !important;
  font-family:var(--display) !important;
  letter-spacing:.03em !important;
  font-size:1rem !important;
  opacity:.96 !important;
}
.footer-contact-styled a:hover{
  color:var(--orange) !important;
}
.footer-contact-styled a + a::before{
  content:"•";
  color:rgba(255,255,255,.5);
  margin-right:12px;
}
.footer-meta{
  color:rgba(255,255,255,.74) !important;
  font-size:.84rem !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
}

@media(max-width:980px){
  .nav-links a{
    font-size:1rem !important;
  }
}

@media(max-width:760px){
  .nav-cta{
    font-size:1rem !important;
  }
  .script-line{
    gap:8px !important;
    transform:none !important;
  }
  .script-line .line1,
  .script-line .line2{
    width:auto !important;
  }
  .footer-inner{
    grid-template-columns:1fr !important;
    gap:14px !important;
    text-align:center !important;
  }
  .footer-meta{
    white-space:normal !important;
  }
  .footer-contact-styled{
    flex-direction:column !important;
    gap:8px !important;
  }
  .footer-contact-styled a + a::before{
    content:"";
    margin-right:0;
  }
}

.script-line .underline::after{display:none !important;}


/* =========================================================
   ARGraffix V4.8 footer + icon polish
   - remove redundant footer tagline
   - larger service icons
   - larger footer contact text
   - cleaner mobile footer layout
   ========================================================= */

/* Service/ticket icons larger */
.ticket img{
  height:92px !important;
  width:112px !important;
  object-fit:contain !important;
}
.service-card img{
  height:124px !important;
  width:auto !important;
  object-fit:contain !important;
}

@media(max-width:760px){
  .ticket img{
    height:84px !important;
    width:104px !important;
  }
  .service-card img{
    height:110px !important;
  }
}

/* Footer redesign */
.footer{
  background:#111015 !important;
  color:#fff !important;
  padding:30px 0 26px !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
}
.footer-simple{
  display:grid !important;
  grid-template-columns:auto 1fr auto !important;
  gap:22px !important;
  align-items:center !important;
}
.footer-brand img{
  height:54px !important;
  width:auto !important;
  filter:brightness(.05) invert(1) !important;
}
.footer-tag{
  display:none !important;
}
.footer-center{
  display:none !important;
}
.footer-contact-styled{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:wrap !important;
  gap:14px !important;
}
.footer-contact-styled a{
  color:#fff !important;
  text-decoration:none !important;
  font-family:var(--display) !important;
  font-size:1.12rem !important;
  letter-spacing:.045em !important;
  line-height:1.1 !important;
  opacity:.98 !important;
}
.footer-contact-styled a:hover{
  color:var(--orange) !important;
}
.footer-contact-styled a + a::before{
  content:"•";
  color:rgba(255,255,255,.5);
  margin-right:14px;
}
.footer-meta{
  color:rgba(255,255,255,.76) !important;
  font-size:.92rem !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
}

@media(max-width:980px){
  .footer-simple{
    grid-template-columns:1fr !important;
    gap:14px !important;
    justify-items:center !important;
    text-align:center !important;
  }
  .footer-brand img{
    height:50px !important;
  }
  .footer-contact-styled a{
    font-size:1.16rem !important;
  }
  .footer-meta{
    white-space:normal !important;
  }
}

@media(max-width:760px){
  .footer{
    padding:28px 0 24px !important;
  }
  .footer-simple{
    gap:16px !important;
  }
  .footer-brand img{
    height:48px !important;
  }
  .footer-contact-styled{
    flex-direction:column !important;
    gap:10px !important;
  }
  .footer-contact-styled a{
    font-size:1.2rem !important;
    letter-spacing:.035em !important;
  }
  .footer-contact-styled a + a::before{
    content:"" !important;
    margin-right:0 !important;
  }
  .footer-meta{
    font-size:.95rem !important;
    letter-spacing:.07em !important;
  }
}


/* =========================================================
   ARGraffix V4.9 footer tagline return
   - bring back tagline
   - keep footer a bit larger and more readable
   ========================================================= */

.footer{
  padding:36px 0 30px !important;
}

.footer-simple{
  display:grid !important;
  grid-template-columns:auto 1fr auto !important;
  gap:24px !important;
  align-items:center !important;
}

.footer-center-live{
  display:grid !important;
  gap:12px !important;
  justify-items:center !important;
}

.footer-tag{
  display:block !important;
  font-family:var(--block) !important;
  font-size:.9rem !important;
  letter-spacing:.11em !important;
  text-transform:uppercase !important;
  color:rgba(255,255,255,.72) !important;
}

.footer-contact-styled{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:wrap !important;
  gap:14px !important;
}

.footer-contact-styled a{
  font-size:1.18rem !important;
  letter-spacing:.04em !important;
  line-height:1.1 !important;
}

.footer-meta{
  font-size:.96rem !important;
  letter-spacing:.08em !important;
}

.footer-brand img{
  height:58px !important;
}

@media(max-width:980px){
  .footer-simple{
    grid-template-columns:1fr !important;
    gap:16px !important;
    justify-items:center !important;
    text-align:center !important;
  }

  .footer-tag{
    font-size:.92rem !important;
  }

  .footer-contact-styled a{
    font-size:1.2rem !important;
  }

  .footer-meta{
    font-size:.98rem !important;
  }
}

@media(max-width:760px){
  .footer{
    padding:32px 0 28px !important;
  }

  .footer-brand img{
    height:52px !important;
  }

  .footer-center-live{
    gap:14px !important;
  }

  .footer-tag{
    font-size:.9rem !important;
    line-height:1.35 !important;
    max-width:320px !important;
  }

  .footer-contact-styled{
    flex-direction:column !important;
    gap:10px !important;
  }

  .footer-contact-styled a{
    font-size:1.22rem !important;
  }

  .footer-meta{
    font-size:1rem !important;
  }
}


/* =========================================================
   ARGraffix V5.0 footer mobile scale
   - bigger footer logo/contact on mobile
   - two-line mobile tagline
   ========================================================= */

.footer-tag-split{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:wrap !important;
  gap:.5rem !important;
}
.footer-tag-split span{
  display:inline-block !important;
}
.footer-tag-split span + span::before{
  content:"•";
  color:rgba(255,255,255,.55);
  margin-right:.5rem;
}

@media(max-width:760px){
  .footer{
    padding:34px 0 30px !important;
  }

  .footer-brand img{
    height:64px !important;
  }

  .footer-tag-split{
    display:grid !important;
    gap:4px !important;
    justify-items:center !important;
    text-align:center !important;
  }
  .footer-tag-split span{
    display:block !important;
  }
  .footer-tag-split span + span::before{
    content:"" !important;
    margin-right:0 !important;
  }

  .footer-tag{
    font-size:.98rem !important;
    letter-spacing:.1em !important;
    line-height:1.35 !important;
    max-width:340px !important;
  }

  .footer-contact-styled a{
    font-size:1.34rem !important;
    line-height:1.1 !important;
    letter-spacing:.035em !important;
  }

  .footer-meta{
    font-size:1.02rem !important;
  }
}


/* =========================================================
   ARGraffix V5.1 ticket simplification
   - remove redundant top ticket titles
   - enlarge icons to fill space
   - use lower label as the main title
   ========================================================= */

.ticket{
  min-height:205px !important;
  padding:14px 14px 14px !important;
  justify-content:center !important;
  gap:10px !important;
}

.ticket h3{
  display:none !important;
}

.ticket::before,
.ticket::after{
  top:82px !important;
  height:42px !important;
}

.ticket img{
  width:102px !important;
  height:102px !important;
  margin-top:10px !important;
  margin-bottom:8px !important;
  object-fit:contain !important;
}

.ticket-footer{
  font-family:var(--display) !important;
  font-size:1.14rem !important;
  line-height:1.02 !important;
  text-transform:uppercase !important;
  letter-spacing:.055em !important;
  text-align:center !important;
  max-width:85% !important;
  margin:0 auto !important;
}

.ticket-num{
  font-size:1rem !important;
}

.ticket-arrow{
  font-size:1.2rem !important;
}

@media(max-width:980px){
  .ticket{
    min-height:195px !important;
  }
  .ticket img{
    width:94px !important;
    height:94px !important;
  }
  .ticket-footer{
    font-size:1.08rem !important;
  }
}

@media(max-width:760px){
  .ticket{
    min-height:185px !important;
    padding:12px 12px 14px !important;
    gap:8px !important;
  }
  .ticket::before,
  .ticket::after{
    top:74px !important;
    height:36px !important;
  }
  .ticket img{
    width:88px !important;
    height:88px !important;
    margin-top:8px !important;
    margin-bottom:6px !important;
  }
  .ticket-footer{
    font-size:1rem !important;
    max-width:90% !important;
    line-height:1 !important;
  }
}


/* =========================================================
   ARGraffix V5.2 ticket rebalance
   - restore smaller top title
   - keep larger icons
   - force top title onto one line
   - make cards feel fuller, not empty
   ========================================================= */

.ticket{
  min-height:220px !important;
  padding:16px 14px 14px !important;
  justify-content:space-between !important;
  gap:8px !important;
}

.ticket h3{
  display:block !important;
  margin:12px 28px 2px !important;
  text-align:center !important;
  font-family:var(--display) !important;
  text-transform:uppercase !important;
  font-size:1.08rem !important;
  line-height:1 !important;
  letter-spacing:.035em !important;
  white-space:nowrap !important;
  max-width:none !important;
}

.ticket img{
  width:108px !important;
  height:108px !important;
  margin-top:4px !important;
  margin-bottom:8px !important;
  object-fit:contain !important;
}

.ticket-footer{
  font-family:var(--display) !important;
  font-size:1.08rem !important;
  line-height:1.02 !important;
  text-transform:uppercase !important;
  letter-spacing:.05em !important;
  text-align:center !important;
  max-width:88% !important;
  margin:0 auto !important;
}

.ticket::before,
.ticket::after{
  top:92px !important;
  height:44px !important;
}

@media(max-width:1180px){
  .ticket h3{
    font-size:.98rem !important;
  }
  .ticket img{
    width:98px !important;
    height:98px !important;
  }
}

@media(max-width:980px){
  .ticket{
    min-height:205px !important;
  }
  .ticket h3{
    font-size:.93rem !important;
    margin-left:18px !important;
    margin-right:18px !important;
  }
  .ticket img{
    width:88px !important;
    height:88px !important;
  }
  .ticket-footer{
    font-size:1rem !important;
  }
  .ticket::before,
  .ticket::after{
    top:84px !important;
    height:38px !important;
  }
}

@media(max-width:760px){
  .ticket{
    min-height:198px !important;
    padding:14px 12px 14px !important;
  }
  .ticket h3{
    font-size:.98rem !important;
    white-space:normal !important;
    line-height:1.02 !important;
    margin-top:10px !important;
  }
  .ticket img{
    width:92px !important;
    height:92px !important;
  }
  .ticket-footer{
    font-size:1rem !important;
    max-width:92% !important;
  }
  .ticket::before,
  .ticket::after{
    top:86px !important;
    height:36px !important;
  }
}


/* =========================================================
   ARGraffix V5.3 card + mobile header pass
   - larger one-line top service titles
   - compact mobile quote button in header
   ========================================================= */

.nav-cta .mobile-label{
  display:none;
}

.ticket{
  min-height:222px !important;
  padding:16px 12px 14px !important;
  gap:8px !important;
}

.ticket h3{
  display:block !important;
  margin:12px 18px 4px !important;
  text-align:center !important;
  font-family:var(--display) !important;
  text-transform:uppercase !important;
  font-size:1.26rem !important;
  line-height:1 !important;
  letter-spacing:.02em !important;
  white-space:nowrap !important;
  max-width:none !important;
}

.ticket img{
  width:106px !important;
  height:106px !important;
  margin-top:6px !important;
  margin-bottom:8px !important;
  object-fit:contain !important;
}

.ticket-footer{
  font-size:1rem !important;
  line-height:1.02 !important;
  letter-spacing:.055em !important;
  max-width:88% !important;
}

.ticket::before,
.ticket::after{
  top:88px !important;
  height:42px !important;
}

@media(max-width:1280px){
  .ticket h3{
    font-size:1.16rem !important;
    margin-left:14px !important;
    margin-right:14px !important;
  }
}

@media(max-width:980px){
  .ticket{
    min-height:208px !important;
  }
  .ticket h3{
    font-size:1.02rem !important;
    letter-spacing:.015em !important;
  }
  .ticket img{
    width:94px !important;
    height:94px !important;
  }
  .ticket::before,
  .ticket::after{
    top:84px !important;
    height:38px !important;
  }
}

/* Mobile header: show compact quote button next to menu */
@media(max-width:760px){
  .nav{
    gap:8px !important;
    min-height:72px !important;
  }
  .brand{
    margin-right:auto !important;
  }
  .nav-cta{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:10px 12px !important;
    font-size:.92rem !important;
    letter-spacing:.05em !important;
    line-height:1 !important;
    min-height:40px !important;
    white-space:nowrap !important;
  }
  .nav-cta .desktop-label{
    display:none !important;
  }
  .nav-cta .mobile-label{
    display:inline !important;
  }
  .mobile-menu{
    font-size:1.15rem !important;
    padding:10px 12px !important;
    min-height:40px !important;
    line-height:1 !important;
  }

  .ticket{
    min-height:198px !important;
    padding:14px 12px !important;
  }
  .ticket h3{
    font-size:1.08rem !important;
    white-space:nowrap !important;
    margin:10px 14px 2px !important;
  }
  .ticket img{
    width:96px !important;
    height:96px !important;
  }
  .ticket-footer{
    font-size:1rem !important;
    max-width:92% !important;
  }
}


/* =========================================================
   ARGraffix V5.4 card title + icon adjustment
   - larger top card titles
   - slightly larger first/vehicle icon
   ========================================================= */

.ticket h3{
  font-size:1.36rem !important;
  letter-spacing:.015em !important;
  margin:12px 12px 4px !important;
}

.ticket img{
  width:108px !important;
  height:108px !important;
}

/* Vehicle graphics icon was reading smaller than the others */
.ticket-grid .ticket:first-child img{
  width:124px !important;
  height:124px !important;
  transform:translateY(2px) !important;
}

@media(max-width:1280px){
  .ticket h3{
    font-size:1.24rem !important;
  }
}

@media(max-width:980px){
  .ticket h3{
    font-size:1.08rem !important;
    margin-left:12px !important;
    margin-right:12px !important;
  }
  .ticket img{
    width:96px !important;
    height:96px !important;
  }
  .ticket-grid .ticket:first-child img{
    width:108px !important;
    height:108px !important;
  }
}

@media(max-width:760px){
  .ticket h3{
    font-size:1.12rem !important;
  }
  .ticket img{
    width:98px !important;
    height:98px !important;
  }
  .ticket-grid .ticket:first-child img{
    width:110px !important;
    height:110px !important;
  }
}


/* =========================================================
   ARGraffix V5.5 vehicle icon boost
   - enlarge the vehicle graphics icon more
   - tighten its placement so it reads closer in scale
   ========================================================= */

.ticket-grid .ticket:first-child img{
  width:146px !important;
  height:146px !important;
  transform:translateY(6px) !important;
}

@media(max-width:980px){
  .ticket-grid .ticket:first-child img{
    width:126px !important;
    height:126px !important;
    transform:translateY(4px) !important;
  }
}

@media(max-width:760px){
  .ticket-grid .ticket:first-child img{
    width:118px !important;
    height:118px !important;
    transform:translateY(2px) !important;
  }
}