/* BizSensei Digital AGENCY stylesheet (bizsensei.agency).
   Editorial agency system: oversized display type, numbered index lists,
   full-bleed black/white bands, hairline rules instead of boxed cards.
   Pure monochrome: black, white, grays. No colour accents, no shadows.
   Deliberately shares no component language with the BizSensei studio site. */

:root{
  --black:#0a0a0a; --ink:#111; --gray-9:#1a1a1a; --gray-8:#262626; --gray-7:#404040;
  --gray-6:#5c5c5c; --gray-5:#737373; --gray-4:#a3a3a3; --gray-3:#d4d4d4;
  --gray-2:#e5e5e5; --gray-1:#f5f5f5; --white:#fff;
  --font:"Helvetica Neue",Helvetica,Arial,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --pad:clamp(64px,9vw,120px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--black);background:var(--white);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--black);color:var(--white)}
img{max-width:100%;height:auto;display:block}
a{color:var(--black)}
:focus-visible{outline:3px solid var(--gray-4);outline-offset:2px}
h1,h2,h3,h4{line-height:1.02;letter-spacing:-.025em;margin:0 0 16px;font-weight:900}
h1{font-size:clamp(40px,6vw,68px)}
h2{font-size:clamp(30px,4vw,46px)}
h3{font-size:22px}
p{margin:0 0 16px}
ul,ol{margin:0 0 16px;padding-left:22px}
table{border-collapse:collapse;width:100%}
.wrap{max-width:1360px;margin:0 auto;padding:0 32px}
.narrow{max-width:740px}
.narrow-wide{max-width:1040px}
.center{text-align:center}
.muted{color:var(--gray-6)}
.lead{font-size:clamp(19px,2vw,23px);line-height:1.5;color:var(--gray-7);max-width:700px}
.intro-text{font-size:clamp(19px,2vw,23px);line-height:1.55;max-width:820px}
main>section{padding-bottom:88px}
main>section.band,main>section.xhero,main>section.phead,main>section.cta-x{padding-bottom:0}

/* ---------- Top bar: minimal wordmark + menu + action ---------- */
.topbar{background:var(--white);border-bottom:1px solid var(--gray-3)}
.topbar-in{display:flex;align-items:center;gap:36px;padding-top:24px;padding-bottom:24px}
.wordmark{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.wordmark .brand-logo{width:36px;height:36px}
.wordmark-text{font-size:21px;font-weight:900;letter-spacing:.01em;text-transform:uppercase;line-height:1}
.wordmark-text small{display:block;font-size:10px;font-weight:700;letter-spacing:.34em;color:var(--gray-5);margin-top:4px}
.topnav{display:flex;gap:30px;flex-wrap:wrap;margin-left:auto}
.topnav a{text-decoration:none;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--gray-6);padding:4px 0;border-bottom:3px solid transparent}
.topnav a:hover{color:var(--black)}
.topnav a.active{color:var(--black);border-bottom-color:var(--black)}
.top-act{flex:none}
.brand-logo{width:38px;height:38px;flex:none;display:block}

/* ---------- Buttons: flat, uppercase, no shadows ---------- */
.btn{display:inline-block;background:var(--white);color:var(--black);border:2px solid var(--black);padding:14px 28px;font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;cursor:pointer;font-family:var(--font);transition:background .15s ease,color .15s ease}
.btn:hover{background:var(--black);color:var(--white)}
.btn-dark{background:var(--black);color:var(--white)}
.btn-dark:hover{background:var(--white);color:var(--black)}
.btn-light{background:var(--white);color:var(--black);border-color:var(--white)}
.btn-light:hover{background:transparent;color:var(--white)}
.btn-outline-light{background:transparent;color:var(--white);border-color:var(--white)}
.btn-outline-light:hover{background:var(--white);color:var(--black)}
.btn-sm{padding:9px 18px;font-size:12px}
.btn-lg{padding:18px 36px;font-size:14px}
.btn-block{display:block;width:100%;text-align:center}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- Flashes ---------- */
.flash{border-left:8px solid var(--black);background:var(--gray-1);padding:14px 18px;margin:20px auto;max-width:1296px;font-weight:700}
.flash-success,.flash-ok{background:var(--black);color:var(--white);border-left-color:var(--gray-7)}
.flash-error,.flash-err{background:var(--white);border:1px solid var(--gray-3);border-left:8px solid var(--black)}
.flash-info{background:var(--gray-1)}

/* ---------- Editorial page head ---------- */
.phead{padding:clamp(56px,8vw,104px) 0 clamp(40px,5vw,64px)}
.phead-label{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.22em;color:var(--gray-5);margin:0 0 22px}
.phead-title{font-size:clamp(52px,8.5vw,118px);text-transform:uppercase;line-height:.94;margin:0 0 24px}
.phead .lead{margin-bottom:0}
.crumbs{color:var(--gray-5);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;margin:0 0 26px}
.crumbs a{color:var(--gray-5);text-decoration:none}
.crumbs a:hover{color:var(--black);text-decoration:underline}
.head-ctas{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}

/* ---------- Hero: oversized display type ---------- */
.xhero{padding:clamp(56px,8vw,110px) 0 clamp(64px,8vw,110px);border-bottom:2px solid var(--black)}
.xhero-kicker{display:flex;align-items:center;gap:16px;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.22em;color:var(--gray-6);margin:0 0 30px}
.xhero-kicker:before{content:"";width:56px;height:2px;background:var(--black);flex:none}
.xhero-title{font-size:clamp(54px,10vw,146px);line-height:.93;text-transform:uppercase;letter-spacing:-.03em;margin:0 0 38px}
.xhero-sub{display:flex;gap:40px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
.xhero-sub .lead{margin:0}
.xhero-ctas{display:flex;gap:14px;flex-wrap:wrap;flex:none}
.xstats{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;border-top:2px solid var(--black);margin-top:clamp(48px,6vw,72px);padding-top:28px}
.xstats div{display:flex;flex-direction:column;gap:6px}
.xstats strong{font-size:clamp(42px,5.5vw,68px);font-weight:900;line-height:1;letter-spacing:-.03em}
.xstats span{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.18em;color:var(--gray-6)}

/* ---------- Full-bleed bands ---------- */
.band{padding:var(--pad) 0}
.band-white{background:var(--white);color:var(--black)}
.band-gray{background:var(--gray-1);color:var(--black)}
.band-black{background:var(--black);color:var(--white)}
.band-black .band-sub,.band-black p{color:var(--gray-3)}
.band-head{margin-bottom:clamp(36px,5vw,60px);max-width:900px}
.band-label{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.22em;color:var(--gray-5);margin:0 0 18px}
.band-label b{color:var(--black);font-weight:900}
.band-black .band-label{color:var(--gray-4)}
.band-black .band-label b{color:var(--white)}
.band-title{font-size:clamp(36px,5vw,64px);line-height:.98;margin:0}
.band-sub{font-size:19px;max-width:720px;margin:20px 0 0}

/* ---------- Numbered services index (editorial list, not cards) ---------- */
.svc-list{border-bottom:2px solid var(--black)}
.svc-row{display:grid;grid-template-columns:110px 1fr auto 48px;gap:28px;align-items:center;padding:30px 10px;border-top:2px solid var(--black);text-decoration:none;color:var(--black);transition:background .15s ease,color .15s ease}
.svc-row:hover{background:var(--black);color:var(--white)}
.svc-no{font-size:clamp(30px,3.6vw,46px);font-weight:900;line-height:1;color:var(--gray-4);letter-spacing:-.02em}
.svc-row:hover .svc-no{color:var(--gray-6)}
.svc-main{display:flex;flex-direction:column;gap:5px;min-width:0}
.svc-title{font-size:clamp(26px,3.4vw,40px);font-weight:900;line-height:1.02;letter-spacing:-.02em}
.svc-line{font-size:16px;color:var(--gray-6);max-width:560px}
.svc-row:hover .svc-line{color:var(--gray-3)}
.svc-meta{display:flex;flex-direction:column;gap:6px;text-align:right;flex:none}
.svc-tag{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.18em;color:var(--gray-5)}
.svc-price{font-size:17px;font-weight:900;white-space:nowrap}
.svc-price small{font-size:13px;font-weight:600;color:var(--gray-5)}
.svc-arrow{font-size:34px;font-weight:300;line-height:1;text-align:right}
.svc-list-mini .svc-row{padding:20px 10px;grid-template-columns:70px 1fr auto 34px}
.svc-list-mini .svc-no{font-size:26px}
.svc-list-mini .svc-title{font-size:23px}
.svc-list-mini .svc-line{display:none}

/* ---------- Funnel list (black band, numbered rows) ---------- */
.funnel-list{list-style:none;padding:0;margin:0 0 40px}
.funnel-list li{display:flex;gap:26px;align-items:baseline;padding:22px 0;border-top:1px solid var(--gray-7);font-size:clamp(18px,2.2vw,24px);font-weight:600;color:var(--white)}
.funnel-list li:last-child{border-bottom:1px solid var(--gray-7)}
.funnel-no{font-size:14px;font-weight:900;letter-spacing:.1em;color:var(--gray-4);flex:none}

/* ---------- Work: large tiles, big category labels ---------- */
.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px) clamp(24px,3vw,44px)}
.work-tile{display:flex;flex-direction:column}
.work-media{background:var(--black);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:22px}
.work-media img{width:100%;height:100%;object-fit:cover}
.work-ph{font-size:clamp(84px,10vw,148px);font-weight:900;line-height:1;color:var(--white);letter-spacing:-.03em}
.work-cat{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.2em;color:var(--gray-5);margin:0 0 8px;display:flex;align-items:center;gap:12px}
.work-cat:before{content:"";width:34px;height:2px;background:var(--black);flex:none}
.work-tile h3{font-size:clamp(24px,2.6vw,32px);margin:0 0 8px}
.work-tile p{color:var(--gray-7);margin:0 0 10px}
.go{display:inline-block;font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.12em;text-decoration:none;margin-top:auto}
.go:after{content:" →"}
.go:hover{text-decoration:underline;text-underline-offset:4px}
.work-more{margin-top:clamp(36px,5vw,56px)}

/* Portfolio filter: ruled text row, no pills */
.pf-filter{display:flex;gap:12px 30px;flex-wrap:wrap;border-top:2px solid var(--black);padding-top:20px;margin-top:36px}
.pf-filter a{text-decoration:none;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--gray-5);padding-bottom:5px;border-bottom:3px solid transparent}
.pf-filter a sup{font-size:11px;font-weight:800}
.pf-filter a:hover{color:var(--black)}
.pf-filter a.on{color:var(--black);border-bottom-color:var(--black)}

/* ---------- Quotes ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
.quote{margin:0;border-top:3px solid var(--black);padding-top:22px}
.quote .stars{font-size:17px;letter-spacing:3px;margin-bottom:14px}
.quote p{font-size:21px;line-height:1.45;font-weight:600;color:var(--black)}
.quote footer{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--gray-5)}

/* ---------- Process steps with outline numerals ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:36px}
.step{border-top:2px solid var(--black);padding-top:20px}
.step-no{display:block;font-size:clamp(56px,6vw,84px);font-weight:900;line-height:1;letter-spacing:-.03em;color:var(--gray-4);margin-bottom:16px}
@supports ((-webkit-text-stroke:2px black)){
  .step-no{color:transparent;-webkit-text-stroke:2px var(--gray-4)}
}
.step h3{font-size:21px;margin-bottom:8px}
.step p{color:var(--gray-7);font-size:16px}

/* ---------- Pricing ---------- */
.pricing-table th{font-size:12px;text-transform:uppercase;letter-spacing:.16em;color:var(--gray-5);font-weight:800;text-align:left;padding:0 14px 14px;border-bottom:3px solid var(--black)}
.pricing-table td{padding:24px 14px;border-bottom:1px solid var(--gray-3);vertical-align:top}
.pricing-table td:nth-child(2){font-size:clamp(21px,2.4vw,28px);font-weight:900;white-space:nowrap;letter-spacing:-.01em}
.pricing-table td strong{font-size:19px}
.pricing-table tr:hover td{background:var(--gray-1)}
.price-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(44px,6vw,72px)}
.price-col{padding:8px 34px;border-left:1px solid var(--gray-3)}
.price-col:first-child{padding-left:0;border-left:0}
.price-col h3{font-size:14px;text-transform:uppercase;letter-spacing:.16em;margin-bottom:14px}
.price{font-size:clamp(38px,4.4vw,54px);font-weight:900;letter-spacing:-.03em;line-height:1;margin:0 0 14px}
.price small{font-size:15px;font-weight:600;color:var(--gray-6);letter-spacing:0}
.price-col p{color:var(--gray-7);font-size:16px}

/* ---------- Service detail ---------- */
.svc-points{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;margin-top:12px}
.svc-point{border-top:1px solid var(--gray-3);padding:24px 0}
.svc-point h3{font-size:20px;margin-bottom:8px}
.svc-point p{color:var(--gray-7);margin:0}
.deliverables{margin:44px 0 8px;border-top:3px solid var(--black);padding-top:30px}
.deliverables h2{font-size:clamp(28px,3.6vw,40px)}
.tick-list{list-style:none;padding:0;max-width:820px}
.tick-list li{padding:13px 0 13px 34px;position:relative;border-bottom:1px solid var(--gray-2);font-size:17px}
.tick-list li:before{content:"";position:absolute;left:2px;top:20px;width:12px;height:7px;border-left:3px solid var(--black);border-bottom:3px solid var(--black);transform:rotate(-45deg)}

/* FAQ: ruled rows, no boxes */
.faq-list{margin:8px 0 24px;border-bottom:1px solid var(--gray-3)}
.faq-item{border-top:1px solid var(--gray-3)}
.faq-item summary{cursor:pointer;font-weight:800;font-size:19px;padding:22px 0;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:after{content:"+";float:right;font-weight:300;font-size:26px;line-height:1}
.faq-item[open ] summary:after{content:"–"}
.faq-item p{padding:0 0 24px;color:var(--gray-7);max-width:640px;margin:0}

/* ---------- Contact ---------- */
.contact-rows{border-bottom:1px solid var(--gray-3);margin-bottom:8px}
.contact-row{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:24px 0;border-top:1px solid var(--gray-3);text-decoration:none}
.contact-row span{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.18em;color:var(--gray-5);flex:none}
.contact-row strong{font-size:clamp(21px,3vw,32px);font-weight:900;letter-spacing:-.02em;word-break:break-word;text-align:right}
.contact-row:hover strong{text-decoration:underline;text-underline-offset:5px}

/* ---------- Forms: underline fields, flat ---------- */
.form-card{border-top:3px solid var(--black);padding:36px 0 0;margin:44px 0 0}
.form-card h2,.form-card h3{margin-bottom:8px}
label{font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.08em;display:block;margin-bottom:16px}
label input,label select,label textarea{margin-top:6px;text-transform:none;letter-spacing:0}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password],input[type=url],input[type=search],input[type=date],select,textarea{width:100%;border:0;border-bottom:2px solid var(--gray-3);border-radius:0;padding:11px 2px;font:inherit;font-size:16px;background:transparent;color:var(--black)}
input:focus,select:focus,textarea:focus{outline:none;border-bottom-color:var(--black)}
textarea{resize:vertical;border:2px solid var(--gray-3);padding:12px}
textarea:focus{border-color:var(--black)}
.form-error{font-weight:700;border-left:6px solid var(--black);background:var(--gray-1);padding:10px 14px;margin:12px 0}
.ft-field{margin-bottom:20px}
.ft-field label{margin-bottom:0}
.ft-row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.error{font-weight:600}

/* ---------- Article / legal typography ---------- */
.article{padding-bottom:24px}
.article-body{font-size:18px;line-height:1.8;color:var(--gray-9)}
.article-body h2{font-size:clamp(26px,3.4vw,36px);margin:48px 0 16px;padding-top:28px;border-top:2px solid var(--black)}
.article-body h3{margin-top:32px}
.article-body table{margin:20px 0}
.article-body th,.article-body td{border:1px solid var(--gray-3);padding:10px 13px;text-align:left}
.article-body th{background:var(--gray-1)}
.legal-links{display:flex;gap:10px 28px;flex-wrap:wrap;padding:26px 0 6px;border-top:1px solid var(--gray-3)}
.legal-links a{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;text-decoration:none}
.legal-links a:hover{text-decoration:underline;text-underline-offset:4px}

/* ---------- Closing CTA: full-bleed black ---------- */
.cta-x{background:var(--black);color:var(--white);padding:var(--pad) 0;text-align:left}
.cta-x h2{font-size:clamp(42px,6.5vw,88px);line-height:.96;color:var(--white);max-width:900px;margin:0 0 20px}
.cta-x p{color:var(--gray-3);font-size:19px;max-width:580px;margin:0 0 32px}

/* ---------- 404 ---------- */
.nf-code{display:block;font-size:clamp(120px,22vw,300px);font-weight:900;line-height:.85;letter-spacing:-.04em;color:var(--gray-4)}
@supports ((-webkit-text-stroke:3px black)){
  .nf-code{color:transparent;-webkit-text-stroke:3px var(--black)}
}

/* ---------- Footer with oversized wordmark band ---------- */
.foot-x{background:var(--black);color:var(--white);margin-top:0;padding-top:clamp(56px,7vw,88px)}
.foot-cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.5fr;gap:40px;padding-bottom:48px}
.foot-x h4{color:var(--white);font-size:12px;text-transform:uppercase;letter-spacing:.2em;margin-bottom:18px}
.foot-x a{color:var(--gray-3);text-decoration:none}
.foot-cols>div>a:not(.wordmark){display:block;padding:4px 0;font-size:16px}
.consent-card a{display:inline;padding:0}
.foot-x a:hover{color:var(--white);text-decoration:underline;text-underline-offset:3px}
.foot-x p{color:var(--gray-4);font-size:16px}
.wordmark-light .wordmark-text{color:var(--white)}
.wordmark-light .wordmark-text small{color:var(--gray-4)}
.foot-legal{display:flex;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;border-top:1px solid var(--gray-7);padding-top:20px;padding-bottom:26px;color:var(--gray-4);font-size:14px}
.foot-legal a{display:inline;color:var(--gray-3);padding:0}
.news-form{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.news-form input[type=email]{background:transparent;border:0;border-bottom:2px solid var(--gray-7);color:var(--white);padding:11px 2px;font:inherit;font-size:16px;width:100%}
.news-form input[type=email]:focus{border-bottom-color:var(--white);outline:none}
.news-form .btn{align-self:flex-start}
.foot-wordmark{font-size:clamp(86px,16.8vw,272px);font-weight:900;line-height:.78;letter-spacing:-.02em;text-align:center;color:var(--white);padding:26px 8px 0;overflow:hidden;user-select:none;white-space:nowrap}

/* ---------- Consent (functional classes preserved) ---------- */
.consent-block{border-top:1px solid var(--gray-3);border-bottom:1px solid var(--gray-3);padding:16px 0;margin:20px 0;background:transparent}
.consent-block label{text-transform:none;letter-spacing:0;font-size:15px}
.foot-x .consent-block{background:transparent;border-color:var(--gray-7);color:var(--gray-3);font-size:13px;margin:0 0 6px;padding:12px 0}
.consent-open{display:flex;gap:10px;align-items:flex-start;font-weight:600;cursor:pointer;margin:0}
.consent-open input{margin-top:4px;width:18px;height:18px;accent-color:var(--black);flex:none}
.consent-link{background:none;border:0;padding:0;font:inherit;font-weight:800;text-decoration:underline;text-underline-offset:3px;cursor:pointer;color:inherit}
.consent-modal{position:fixed;inset:0;background:rgba(10,10,10,.78);display:flex;align-items:center;justify-content:center;z-index:100;padding:18px;overflow:auto}
.consent-modal[hidden]{display:none}
.consent-card{background:var(--white);color:var(--black);max-width:540px;width:100%;padding:36px;max-height:92vh;overflow:auto}
.consent-card h3{font-size:24px}
.consent-doc{display:flex;gap:10px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--gray-2);cursor:pointer;margin:0;font-weight:600;text-transform:none;letter-spacing:0;font-size:15px}
.consent-doc input{margin-top:3px;width:18px;height:18px;accent-color:var(--black);flex:none}
.consent-doc a{font-weight:800}
.consent-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:24px;flex-wrap:wrap}

/* ---------- Responsive ---------- */
@media (max-width:1020px){
  .work-grid{grid-template-columns:1fr 1fr}
  .quotes{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .foot-cols{grid-template-columns:1fr 1fr}
  .svc-row{grid-template-columns:76px 1fr 40px}
  .svc-meta{grid-column:2;text-align:left;flex-direction:row;gap:16px;align-items:baseline}
  .svc-arrow{grid-column:3;grid-row:1}
}
@media (max-width:680px){
  .wrap{padding:0 20px}
  .work-grid,.svc-points,.price-cols{grid-template-columns:1fr}
  .price-col{padding:22px 0;border-left:0;border-top:1px solid var(--gray-3)}
  .price-col:first-child{border-top:0;padding-top:8px}
  .steps{grid-template-columns:1fr}
  .ft-row{grid-template-columns:1fr}
  .xstats{grid-template-columns:1fr 1fr}
  .topbar-in{flex-wrap:wrap;gap:14px;padding-top:18px;padding-bottom:18px}
  .topnav{order:3;width:100%;margin-left:0;gap:20px}
  .top-act{margin-left:auto}
  .foot-cols{grid-template-columns:1fr}
  .foot-legal{flex-direction:column}
  .xhero-sub{flex-direction:column;align-items:flex-start}
  .contact-row{flex-direction:column;gap:4px}
  .contact-row strong{text-align:left}
  table{display:block;overflow-x:auto}
}