/* ============================================================
   SHOR AGENCY — Brand & Visual Guidelines v2.0 (Sept 2026)
   Design system: color, type, logo, graphic language
   ============================================================ */

:root{
  --ink:#1E1E1E;          /* SHOR Black */
  --green:#BDFF00;        /* Electric Green */
  --ivory:#FFFEFA;        /* Warm Ivory */
  --mist:#F3F3EF;         /* Soft Mist */
  --gray:#6E6E68;
  --line-soft:#E3E3DC;
  --red:#E2534A;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;}
a,button{touch-action:manipulation;}
body{
  font-family:'Manrope',sans-serif;
  color:var(--ink);
  background:var(--ivory);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;}
img,svg{display:block;max-width:100%;}
button{font:inherit;}

.display{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-weight:800;letter-spacing:0.005em;}
.serif{font-family:'DM Serif Display',serif;font-weight:400;font-style:normal;}
.mono, .label-mono{font-family:'Manrope',sans-serif;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;}

.wrap{max-width:1160px;margin:0 auto;padding:0 24px;}

/* ---------------- GRAPHIC LANGUAGE: the dot + the line ---------------- */
.dot{width:1em;height:1em;border-radius:50%;background:var(--green);display:inline-block;flex:none;}
.hl{color:var(--ink) !important;background-color:var(--green);box-shadow:0.05em 0 0 var(--green), -0.05em 0 0 var(--green);box-decoration-break:clone;-webkit-box-decoration-break:clone;}
.rule{height:2px;background:var(--ink);display:block;}
.rule.green{background:var(--green);}
.diagonals{display:flex;gap:14px;align-items:flex-end;}
.diagonals span{display:block;width:2px;height:56px;background:var(--green);transform:rotate(28deg);}
.diagonals span:last-child{height:40px;opacity:0.55;}

/* ---------------- NAV ---------------- */
header.nav{position:sticky;top:0;z-index:100;background:var(--ivory);border-bottom:1px solid var(--ink);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;}
.logo img{height:34px;width:auto;}
nav.links{display:flex;gap:30px;font-size:13px;font-weight:700;}
nav.links a{text-decoration:none;position:relative;padding-bottom:3px;white-space:nowrap;}
nav.links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--green);transition:width .2s;}
nav.links a:hover::after{width:100%;}
.nav-right{display:flex;align-items:center;gap:18px;}
.nav-cta{
  font-size:13px;font-weight:800;color:var(--ink);background:var(--green);
  padding:11px 20px;border:none;text-decoration:none;white-space:nowrap;
  transition:transform .12s, opacity .12s;
}
.nav-cta:hover{transform:translateY(-2px);}
.navlinks-mobile-hide{display:flex;}
.nav-toggle{
  display:none;background:none;border:1.5px solid var(--ink);width:44px;height:44px;
  cursor:pointer;align-items:center;justify-content:center;color:var(--ink);
  border-radius:50%;transition:background .15s, color .15s;
}
.nav-toggle svg{width:20px;height:20px;display:block;}
.nav-toggle:hover{background:var(--ink);color:var(--ivory);}
.nav-toggle:active{transform:scale(0.94);}
@media(max-width:860px){
  nav.links.navlinks-mobile-hide{display:none;}
  .navlinks-mobile-hide{display:none;}
  .nav-toggle{display:flex;}
}

/* Mobile menu overlay */
.mobile-menu{
  position:fixed;inset:0;background:var(--ink);color:var(--ivory);z-index:300;
  transform:translateX(100%);transition:transform .32s ease;
  padding:calc(26px + env(safe-area-inset-top)) 28px calc(40px + env(safe-area-inset-bottom));overflow-y:auto;
}
.mobile-menu.open{transform:translateX(0);}
.mm-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:50px;}
.mm-close{background:none;border:1.5px solid var(--green);color:var(--green);width:44px;height:44px;border-radius:50%;font-size:18px;cursor:pointer;}
.mobile-menu nav{display:flex;flex-direction:column;}
.mobile-menu nav a{
  font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-weight:800;font-size:30px;
  padding:16px 0;border-bottom:1px solid #3A3A32;color:var(--ivory);text-decoration:none;
}
.mobile-menu .mm-cta{
  margin-top:30px;display:inline-block;background:var(--green);color:var(--ink);
  padding:14px 22px;font-weight:800;text-decoration:none;
}

/* ---------------- SECTION SHARED ---------------- */
section{padding:88px 0;}
.sec-head{max-width:660px;margin-bottom:48px;}
.sec-eyebrow{display:flex;align-items:center;gap:9px;font-size:11.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--gray);margin-bottom:16px;font-weight:800;}
.sec-eyebrow .dot{width:8px;height:8px;}
.sec-title{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-weight:800;font-size:clamp(28px,4.2vw,46px);line-height:1.05;}
.sec-desc{color:var(--gray);font-size:15.5px;margin-top:16px;}

/* ---------------- HERO ---------------- */
.hero{padding:80px 0 70px;background:var(--ivory);position:relative;overflow:hidden;}
.hero-grid{display:grid;grid-template-columns:1.25fr 0.75fr;gap:40px;align-items:center;}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:0.14em;text-transform:uppercase;color:var(--gray);margin-bottom:24px;display:flex;align-items:center;gap:10px;}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--ink);display:inline-block;}
h1.hero-title{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-weight:800;font-size:clamp(36px,6.4vw,72px);line-height:0.98;letter-spacing:0;max-width:760px;margin-bottom:28px;}
.hero-sub{font-size:16.5px;color:var(--gray);max-width:560px;margin-bottom:40px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.btn{display:inline-flex;align-items:center;gap:8px;padding:15px 26px;font-size:13.5px;font-weight:800;text-transform:uppercase;letter-spacing:0.03em;text-decoration:none;cursor:pointer;font-family:'Manrope',sans-serif;border:1.5px solid var(--ink);transition:transform .12s, background .12s, color .12s;}
.btn-fill{background:var(--green);color:var(--ink);border-color:var(--green);}
.btn-fill:hover{transform:translateY(-3px);}
.btn-outline{background:transparent;color:var(--ink);}
.btn-outline:hover{background:var(--ink);color:var(--ivory);}
.btn-dark{background:var(--ink);color:var(--ivory);border-color:var(--ink);}
.btn-dark:hover{transform:translateY(-3px);}
.hero-stats{display:flex;gap:44px;margin-top:64px;padding-top:26px;border-top:1px solid var(--ink);flex-wrap:wrap;}
.stat .num{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:34px;}
.stat .label{font-size:10.5px;color:var(--gray);margin-top:4px;font-weight:800;letter-spacing:0.05em;text-transform:uppercase;}
.hero-graphic{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;}
.hero-graphic .big-dot{width:58%;aspect-ratio:1/1;border-radius:50%;background:var(--ink);}
.hero-graphic .small-dot{position:absolute;width:22%;aspect-ratio:1/1;border-radius:50%;background:var(--green);right:8%;bottom:14%;}
.hero-graphic .lines{position:absolute;left:0;top:6%;display:flex;gap:12px;}
.hero-graphic .lines span{width:3px;height:70px;background:var(--ink);transform:rotate(28deg);opacity:0.14;}
@media(max-width:900px){ .hero-grid{grid-template-columns:1fr;} .hero-graphic{display:none;} }

/* ---------------- SERVICES ---------------- */
.services{background:var(--mist);}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.service-card{background:var(--ivory);border:1.5px solid var(--ink);padding:28px 26px;transition:background .18s, color .18s;}
.service-card:hover{background:var(--ink);color:var(--ivory);}
.service-card:hover .service-tag{background:var(--green);color:var(--ink);}
.service-tag{font-size:10px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;background:var(--ink);color:var(--green);display:inline-block;padding:5px 10px;margin-bottom:16px;}
.service-card h3{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-weight:800;font-size:21px;margin-bottom:10px;letter-spacing:0.005em;}
.service-card p{font-size:13.5px;opacity:0.85;}
@media(max-width:940px){ .services-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:620px){ .services-grid{grid-template-columns:1fr;} }

/* ---------------- VALUES ---------------- */
.values-note{font-size:13.5px;color:var(--gray);font-style:italic;margin-top:16px;margin-bottom:8px;}
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ink);border:1px solid var(--ink);}
.value-card{background:var(--ivory);padding:30px 26px;}
.value-card .vline{width:44px;height:3px;background:var(--green);margin-bottom:16px;}
.value-card h4{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-weight:800;font-size:20px;margin-bottom:10px;}
.value-card p{font-size:13px;color:var(--gray);}
@media(max-width:820px){ .values-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .values-grid{grid-template-columns:1fr;} }

/* ---------------- APPROACH (dark, real sequence) ---------------- */
.approach{background:var(--ink);color:var(--ivory);}
.approach .sec-title{color:var(--ivory);}
.approach .sec-desc{color:#B4B4AC;}
.approach .sec-eyebrow{color:var(--green);}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;}
.steps::before{content:"";position:absolute;top:23px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#3A3A32 6%,#3A3A32 94%,transparent);}
.step{padding:0 20px 0 0;position:relative;}
.step-badge{width:46px;height:46px;border-radius:50%;background:var(--ink);border:1.5px solid var(--green);display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:18px;color:var(--green);margin-bottom:20px;position:relative;z-index:2;}
.step h4{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-weight:800;font-size:20px;margin-bottom:9px;letter-spacing:0.005em;}
.step p{font-size:13.3px;color:#A5A59B;}
@media(max-width:900px){ .steps{grid-template-columns:1fr;gap:32px;} .steps::before{display:none;} }

/* ---------------- ABOUT ---------------- */
.about{display:grid;grid-template-columns:0.9fr 1.1fr;gap:56px;align-items:center;}
.about-visual{aspect-ratio:4/5;position:relative;overflow:hidden;border:1.5px solid var(--ink);background:var(--ink);}
.about-visual .lines-deco{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;gap:24px;padding-bottom:14%;}
.about-visual .lines-deco span{width:7px;background:var(--green);transform:rotate(24deg);}
.about-visual .lines-deco span:nth-child(1){height:30%;}
.about-visual .lines-deco span:nth-child(2){height:46%;}
.about-visual .lines-deco span:nth-child(3){height:20%;opacity:0.6;}
.about-visual .quote-panel{position:absolute;left:14px;right:14px;top:14px;height:52%;background:var(--ivory);border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;padding:26px;}
.about-visual .quote-mark{font-family:'DM Serif Display',serif;font-size:90px;line-height:0.8;color:var(--ink);}
.about-body p{color:var(--gray);font-size:15px;margin-bottom:16px;}
.about-body p strong{color:var(--ink);font-weight:800;}
.credentials{display:flex;gap:0;margin-top:28px;flex-wrap:wrap;border-top:1px solid var(--ink);}
.cred{padding:16px 26px 0 0;}
.cred .num{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:30px;}
.cred .label{font-size:10.5px;color:var(--gray);font-weight:800;letter-spacing:0.04em;text-transform:uppercase;margin-top:2px;}
@media(max-width:820px){ .about{grid-template-columns:1fr;} }

/* ---------------- TOOLS ---------------- */
.tool-list{display:flex;flex-direction:column;gap:14px;}
.tool-row{background:var(--ivory);border:1.5px solid var(--ink);padding:22px 26px;display:flex;align-items:center;gap:20px;text-decoration:none;color:var(--ink);transition:transform .12s;}
.tool-row:hover{transform:translateX(4px);}
.tool-row:hover .tool-arrow{transform:translateX(4px);}
.tool-icon{width:44px;height:44px;flex:none;background:var(--ink);color:var(--green);display:flex;align-items:center;justify-content:center;font-size:18px;font-family:'Barlow Condensed',sans-serif;font-weight:800;border-radius:50%;}
.tool-main{flex:1;min-width:0;}
.tool-main h4{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-weight:800;font-size:19px;letter-spacing:0.005em;}
.tool-main p{font-size:13px;color:var(--gray);margin-top:3px;}
.tool-tag{font-size:10.5px;font-weight:800;letter-spacing:0.05em;text-transform:uppercase;color:var(--ink);background:var(--green);padding:6px 10px;white-space:nowrap;}
.tool-arrow{color:var(--ink);transition:transform .2s;flex:none;font-size:18px;}
.tool-row.placeholder{opacity:0.5;cursor:default;}
.tool-row.placeholder:hover{transform:none;}
.tool-row.placeholder .tool-icon{background:#D8D8CE;color:#8A8A7E;}
.tool-row.placeholder .tool-tag{background:#D8D8CE;color:#6E6E68;}
@media(max-width:560px){ .tool-row{flex-wrap:wrap;} .tool-arrow{display:none;} }

/* ---------------- CONTACT FORM ---------------- */
.contact{background:var(--ink);color:var(--ivory);}
.contact .sec-title{color:var(--ivory);}
.contact .sec-eyebrow{color:var(--green);}
.contact .sec-desc{color:#B4B4AC;}
.contact-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:52px;align-items:start;}
.contact-side p{color:#B4B4AC;font-size:14.5px;margin-bottom:22px;}
.contact-links{display:flex;flex-direction:column;gap:14px;margin-bottom:36px;}
.contact-links a{font-size:14.5px;font-weight:700;text-decoration:none;color:var(--ivory);display:flex;align-items:center;gap:10px;border-bottom:2px solid var(--green);padding-bottom:4px;width:fit-content;transition:color .2s;}
.contact-links a:hover{color:var(--green);}
.form-card{background:var(--ivory);color:var(--ink);border:1.5px solid var(--green);padding:32px;}
.form-row{margin-bottom:18px;}
.form-row label{display:block;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:7px;}
.form-row input[type="text"],
.form-row input[type="email"],
.form-row textarea{
  width:100%;border:1.5px solid var(--ink);padding:11px 13px;font-family:'Manrope',sans-serif;
  font-size:16px;background:var(--mist);color:var(--ink);
}
.form-row input:focus, .form-row textarea:focus{outline:none;border-color:var(--green);background:#fff;}
.form-row textarea{min-height:96px;resize:vertical;}
.check-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.check-item{display:flex;align-items:center;gap:8px;font-size:13px;padding:6px 0;cursor:pointer;}
.check-item input{accent-color:var(--ink);width:17px;height:17px;flex:none;}
@media(max-width:960px){ .contact-grid{grid-template-columns:1fr;} }
@media(max-width:560px){ .check-grid{grid-template-columns:1fr 1fr;} }
.form-submit{
  width:100%;background:var(--green);color:var(--ink);border:1.5px solid var(--green);
  padding:15px;font-weight:800;text-transform:uppercase;letter-spacing:0.04em;font-size:14px;
  cursor:pointer;transition:transform .12s;
  margin-top:6px;
}
.form-submit:hover{transform:translateY(-3px);}
.form-submit:disabled{opacity:0.6;cursor:default;transform:none;}
.form-toast{margin-top:12px;font-size:12.5px;font-weight:700;min-height:16px;}

footer{background:var(--ivory);color:var(--gray);padding:24px 0;border-top:1px solid var(--ink);font-size:11px;font-weight:800;letter-spacing:0.03em;}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}

::selection{background:var(--green);color:var(--ink);}
@media (prefers-reduced-motion: reduce){ .mobile-menu{transition:none;} }

/* Floating contact button (mobile only) */
.floating-contact{
  position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:250;
  display:none;align-items:center;gap:8px;background:var(--green);color:var(--ink);
  border:none;padding:14px 20px;border-radius:999px;font-weight:800;
  font-size:13.5px;text-decoration:none;font-family:'Manrope',sans-serif;
  box-shadow:0 8px 20px rgba(0,0,0,0.28);
}
@media(max-width:900px){ .floating-contact{display:flex;} }
@media (prefers-reduced-motion: no-preference){ .floating-contact{transition:transform .15s;} }
.floating-contact:active{transform:scale(0.96);}

/* ---------------- GENERIC PAGE HERO (inner pages) ---------------- */
.page-hero{padding:64px 0 56px;border-bottom:1px solid var(--ink);}
.page-hero .sec-title{font-size:clamp(32px,6vw,58px);}