:root { --ink:#172b38; --muted:#596772; --paper:#f8f9f7; --line:#d9dfde; }
.draft { background:#e9edeb; }
.company-intro { display:grid; grid-template-columns:1.55fr 1fr; gap:55px; padding:82px 0 80px; align-items:center; }
.company-intro h1 { font-size:clamp(3rem,5.4vw,4.65rem); line-height:1.07; letter-spacing:-.055em; }
.company-intro h1>span { color:#577064; }
.company-intro .lede { font-size:18px; max-width:545px; margin:25px 0; }
.company-intro .button { margin-bottom:0; }
.company-emblem { position:relative; height:310px; overflow:hidden; background:#e9eee9; border:1px solid #dfe5df; border-radius:12px; }
.emblem-grid { position:absolute; inset:0; background-image:linear-gradient(#ccd7cb55 1px,transparent 1px),linear-gradient(90deg,#ccd7cb55 1px,transparent 1px); background-size:30px 30px; }
.foil { position:absolute; width:80%; height:45%; left:10%; top:16%; clip-path:polygon(0 0,100% 23%,100% 55%,0 32%); background:linear-gradient(105deg,#536b5b,#d5e0c7 47%,#b4c5a8 49%,#5c7867); transform:rotate(-16deg); }
.foil-two { top:35%; background:linear-gradient(105deg,#374f44,#a7bca2 47%,#829d80 49%,#3b5749); }
.foil-three { top:54%; background:linear-gradient(105deg,#182c24,#688e70 47%,#476d54 49%,#254637); }
.emblem-caption { position:absolute; bottom:17px; left:20px; color:#3e594a; font-size:9px; letter-spacing:.16em; font-weight:600; }
.portfolio,.consulting,.contact-section,#support { scroll-margin-top:30px; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:35px; margin-bottom:33px; }
.section-heading .eyebrow { margin-bottom:14px; }
.section-heading h2 { font-size:clamp(1.9rem,3.3vw,2.8rem); }
.section-heading>p { font-size:14px; color:var(--muted); margin:0 0 4px; }
.product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.offering { border:1px solid var(--line); border-radius:11px; background:#fff; overflow:hidden; display:flex; flex-direction:column; }
.offering-visual { height:200px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.offering-copy { padding:25px 25px 28px; display:flex; flex-direction:column; flex:1; }
.offering-copy .eyebrow { font-size:9px; margin-bottom:13px; letter-spacing:.14em; }
.offering-copy h3 { font-size:26px; margin:0 0 17px; letter-spacing:-.035em; }
.offering-copy>p:not(.eyebrow) { color:var(--muted); font-size:14px; line-height:1.75; margin-bottom:26px; }
.offering-copy>a { margin-top:auto; font-size:12px; font-weight:600; display:flex; justify-content:space-between; align-items:center; gap:10px; text-decoration:none; }
.offering-copy>a:hover { text-decoration:underline; }
.offering-copy .colors-name { font-family:var(--serif); font-weight:400; font-size:29px; }
.mail-visual { background:#ecdfce; gap:17px; }
.envelope { display:block; width:100px; height:72px; border:2px solid #886a4e; border-radius:6px; background:#fcf6e9; transform:rotate(-8deg); position:relative; overflow:hidden; box-shadow:0 13px 22px #8d6b4520; }
.envelope::after { content:''; position:absolute; width:77px; height:77px; border:2px solid #886a4e; transform:rotate(45deg); top:-50px; left:9px; border-radius:5px; background:#f6edda; }
.sound-wave { display:flex; align-items:center; gap:5px; height:65px; }
.sound-wave i { height:18px; width:5px; border-radius:5px; background:#8d654a; }
.sound-wave i:nth-child(2),.sound-wave i:nth-child(6) { height:33px; }
.sound-wave i:nth-child(3),.sound-wave i:nth-child(5) { height:51px; }
.sound-wave i:nth-child(4) { height:65px; }
.triage-visual { background:#dfe5f4; }
.browser-symbol { width:184px; height:129px; border:1px solid #8d9dbf; border-radius:8px; background:#f9faff; transform:rotate(-5deg); box-shadow:7px 11px 0 #ccd6ec; overflow:hidden; }
.browser-bar { border-bottom:1px solid #cbd2e2; padding:10px; display:flex; gap:4px; }
.browser-bar i { height:5px; width:5px; border-radius:50%; background:#8d9dbf; }
.tab-stack { display:flex; padding:13px 12px; gap:6px; height:100px; }
.tab-stack span { flex:1; border-radius:4px; background:repeating-linear-gradient(#cfdaee 0 11px,#edf1f9 11px 15px); border-top:9px solid #617cab; }
.tab-stack span:nth-child(2) { border-color:#8c70af; background:repeating-linear-gradient(#e0d5ee 0 11px,#f4edf9 11px 15px); }
.tab-stack span:nth-child(3) { border-color:#698773; background:repeating-linear-gradient(#d3e4d8 0 11px,#ecf4ee 11px 15px); }
.colors-visual { background:#e3edc7; }
.colors-visual img { height:145px; width:145px; position:relative; z-index:1; }
.color-dot { position:absolute; width:21px; height:21px; border-radius:50%; }
.dot-one { background:#e7ba65; left:18%; top:25%; }
.dot-two { background:#9ac6df; right:16%; bottom:25%; width:27px; height:27px; }
.dot-three { background:#d6a8c6; right:21%; top:22%; width:15px; height:15px; }
.consulting { margin-top:80px; display:grid; grid-template-columns:1fr 1.15fr; gap:65px; background:var(--ink); color:#f5f7f3; border-radius:12px; padding:46px; }
.consulting .eyebrow { color:#bccbbe; margin-bottom:20px; }
.consulting h2 { font-size:clamp(2.25rem,3.9vw,3.25rem); }
.consulting-copy>p { font-size:16px; color:#e0e6e4; }
.consulting-copy .consulting-note { font-size:12px; color:#b3c6bd; }
.consulting .button { background:#dce9c3; color:#193328; margin:2px 0 0; }
.consulting .button:hover { background:#eaf3d7; }
.contact-section { padding:72px 0 62px; }
.contact-section h2 { font-size:2.15rem; }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:45px; }
.contact-grid h3 { margin:0 0 10px; font-size:19px; }
.contact-grid p { color:var(--muted); font-size:14px; margin:0 0 14px; }
.contact-grid a { font-size:17px; text-decoration:none; font-weight:600; }
.contact-grid a span { margin-left:16px; }
.contact-grid a:hover { text-decoration:underline; }
@media(max-width:950px) {
  .company-intro { gap:25px; grid-template-columns:1.7fr 1fr; }
  .company-emblem { height:270px; }
  .company-intro h1 { font-size:clamp(2.75rem,5.7vw,4.2rem); }
  .product-grid { gap:14px; }
  .offering-copy { padding:22px 18px; }
  .offering-copy h3 { font-size:22px; }
  .offering-visual { height:175px; }
  .mail-visual { gap:10px; }
  .envelope { width:85px; height:64px; }
  .sound-wave { gap:3px; }
  .browser-symbol { width:155px; }
  .consulting { gap:35px; padding:35px; }
}
@media(max-width:700px) {
  .company-intro { grid-template-columns:1fr; padding:46px 0; gap:30px; }
  .company-intro h1 { font-size:clamp(2.7rem,8.5vw,4rem); }
  .company-intro .lede { font-size:17px; }
  .company-emblem { height:185px; }
  .foil { width:58%; left:21%; top:8%; }
  .foil-two { top:28%; }
  .foil-three { top:48%; }
  .section-heading { display:block; margin-bottom:25px; }
  .section-heading>p { margin-top:19px; }
  .desktop-break { display:none; }
  .product-grid { grid-template-columns:1fr; gap:24px; }
  .offering-visual { height:190px; }
  .offering-copy { padding:25px; }
  .offering-copy h3 { font-size:27px; }
  .offering-copy>p:not(.eyebrow) { font-size:15px; }
  .offering-copy>a { font-size:13px; }
  .mail-visual { gap:20px; }
  .envelope { width:100px; height:72px; }
  .browser-symbol { width:180px; }
  .consulting { grid-template-columns:1fr; gap:25px; margin-top:46px; padding:30px 25px; }
  .consulting h2 { font-size:2.5rem; }
  .contact-section { padding:46px 0 40px; }
  .contact-section h2 { font-size:1.9rem; }
  .contact-grid { grid-template-columns:1fr; gap:30px; }
  .masthead { align-items:center; }
  .masthead nav { gap:18px; }
}