:root {
  --ink: #414042;
  --paper: #FFF4E0;
  --orange: #F47D20;
  --gold: #FBAA19;
  --white: #FFF4E0;
  --muted: #77736b;
  --line: #d9d2c6;
  --pad: 20px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--ink); font: 16px/1.45 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; }
h1, h2, h3, p, blockquote { margin-top: 0; }
h1, h2, h3, blockquote { font-family: Arial, Helvetica, sans-serif; font-weight: 500; letter-spacing: -.045em; line-height: .98; }
h1 { font-size: clamp(3.35rem, 17vw, 7.4rem); }
h2 { font-size: clamp(2.45rem, 11vw, 5rem); }
.shell { width: min(calc(100% - (var(--pad) * 2)), 1180px); margin-inline: auto; }
.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: 8px; top: 8px; z-index: 99; background: #fff; padding: 10px; }
.eyebrow { font: 800 .7rem/1.2 Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); }

.site-header { position: sticky; top: 0; z-index: 20; background: #414042; color: #fff; }
.nav-bar { min-height: 66px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 800; }
.menu { position: relative; }
.menu summary { width: 44px; height: 44px; display: grid; place-content: center; gap: 7px; list-style: none; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary span { display: block; width: 24px; height: 1px; background: #fff; }
.menu nav { position: fixed; inset: 66px 0 auto 0; padding: 28px var(--pad) 38px; background: var(--ink); display: grid; }
.menu nav a { padding: 13px 0; border-bottom: 1px solid #373633; color: #fff; text-decoration: none; font: 500 1.65rem Arial,Helvetica,sans-serif; }
.desktop-nav { display: none; }

.hero { min-height: calc(100svh - 66px); padding: 70px 0 45px; background: var(--ink); color: #fff; display: flex; align-items: center; overflow: hidden; position: relative; }
.hero::after { content: ""; position: absolute; right: -170px; bottom: -170px; width: 380px; height: 380px; border: 1px solid rgba(244,125,32,.45); transform: rotate(45deg); }
.hero .shell { position: relative; z-index: 1; }
.hero h1 { margin: 24px 0 28px; }
.hero h1 em { color: var(--gold); }
.hero-line { max-width: 510px; color: #bbb7af; font-size: 1.05rem; margin-bottom: 34px; }
.round-link { display: inline-flex; align-items: center; gap: 22px; padding: 14px 18px; border-radius: 99px; background: var(--orange); color: var(--ink); text-decoration: none; font-weight: 800; }
.round-link span { font-size: 1.25rem; }
.round-link.light { background: var(--paper); }

.split { display: grid; }
.split-card { min-height: 86svh; padding: 35px var(--pad); display: flex; flex-direction: column; text-decoration: none; }
.split-card.support { background: var(--paper); }
.split-card.build { background: var(--orange); }
.number { font-size: .72rem; letter-spacing: .15em; }
.split-icon { height: 38vh; position: relative; margin: 8px 0; }
.split-card h2 { margin: auto 0 10px; max-width: 520px; }
.split-card p { margin: 0; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.arrow { align-self: end; font-size: 2rem; margin-top: 20px; }
.nodes i { position: absolute; width: 68px; height: 68px; border-radius: 50%; border: 1px solid var(--ink); }
.nodes i::after { content: ""; position: absolute; width: 120px; height: 1px; background: var(--ink); transform-origin: left; top: 50%; left: 50%; }
.nodes i:nth-child(1) { left: 8%; top: 12%; }
.nodes i:nth-child(1)::after { transform: rotate(26deg); }
.nodes i:nth-child(2) { right: 9%; top: 35%; }
.nodes i:nth-child(2)::after { display:none; }
.nodes i:nth-child(3) { left: 24%; bottom: 6%; }
.nodes i:nth-child(3)::after { transform: rotate(-29deg); width: 150px; }
.blocks i { position: absolute; width: 105px; height: 105px; border: 1px solid var(--ink); transform: rotate(45deg); }
.blocks i:nth-child(1) { left: 12%; top: 16%; }
.blocks i:nth-child(2) { right: 13%; top: 25%; }
.blocks i:nth-child(3) { left: 36%; bottom: 2%; background: rgba(255,255,255,.18); }

.showcase { background: var(--ink); color: #fff; padding: 85px 0 0; overflow: hidden; }
.showcase-copy { margin-bottom: 55px; }
.showcase-copy h2 { margin-bottom: 25px; }
.text-link { display: inline-block; color: inherit; font-weight: 800; text-underline-offset: 5px; text-decoration-color: var(--orange); }
.showcase-visual { height: 72svh; min-height: 520px; display: block; position: relative; color: var(--ink); }
.screen { position: absolute; width: 78%; height: 56%; border-radius: 14px 14px 0 0; padding: 24px; box-shadow: 0 30px 70px rgba(0,0,0,.35); font: 500 1.7rem Arial,Helvetica,sans-serif; }
.screen-one { left: 5%; top: 0; background: var(--orange); transform: rotate(-5deg); }
.screen-two { right: 1%; top: 22%; background: var(--paper); transform: rotate(4deg); }
.screen-three { left: 12%; bottom: 0; background: #3d3b37; color: #fff; transform: rotate(-1deg); }

.human { padding: 110px 0; background: var(--paper); }
.human blockquote { font-size: clamp(2.7rem,12vw,6rem); margin: 28px 0; max-width: 1050px; }
.byline { color: var(--muted); margin-bottom: 30px; }
.final-cta { background: var(--orange); padding: 70px 0; }
.final-cta p { font: 500 clamp(2.4rem,10vw,4.7rem)/1 Arial,Helvetica,sans-serif; letter-spacing: -.04em; margin-bottom: 30px; }
footer { background: var(--ink); color: #aaa69f; padding: 55px 0; }
.footer-row { display: grid; gap: 22px; }
footer p { margin: 0; }
footer a { color: #fff; }
.copyright { font-size: .75rem; }

.page-intro { min-height: 72svh; padding: 80px 0 45px; display: flex; align-items: end; background: var(--paper); }
.page-intro h1 { margin: 20px 0 0; }
.service-block { min-height: 90svh; padding: 55px 0; display: flex; align-items: center; position: relative; }
.service-block.dark { background: var(--ink); color: #fff; }
.service-block.paper { background: var(--paper); }
.service-block h2 { margin: 25px 0 45px; }
.big-number { position: absolute; right: var(--pad); top: 28px; font: 500 5rem/1 Arial,Helvetica,sans-serif; opacity: .12; }
.chip-list { display: flex; flex-wrap: wrap; gap: 9px; }
.chip-list span { border: 1px solid #55524d; border-radius: 99px; padding: 11px 15px; }
.dark-chips span { border-color: var(--line); }
.experience { padding: 90px 0; }
.care { background: var(--ink); color: #fff; }
.care h2 { margin: 25px 0 40px; }
.small-note { color: var(--muted); font-size: .78rem; max-width: 700px; margin-top: 28px; }

.portfolio-head { background: var(--ink); color: #fff; }
.filter-labels { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 32px; }
.filter-labels span { border: 1px solid #55524d; padding: 9px 14px; border-radius: 99px; font-size: .75rem; }
.project-list { padding-block: 60px; display: grid; gap: 80px; }
.project { overflow: hidden; }
.project-art { min-height: 68svh; border-radius: 14px; position: relative; overflow: hidden; }
.project-meta { padding: 22px 2px 0; }
.project-meta h2 { font-size: clamp(2.1rem,9vw,4.3rem); margin: 8px 0; }
.project-meta > p { color: var(--muted); }
.fragrance-art { background: radial-gradient(circle at 70% 20%,#b49458 0,transparent 24%),linear-gradient(145deg,#100e10,#44253e); color:#f1e2c8; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.browser-dots { position:absolute; top:18px; left:20px; letter-spacing:6px; opacity:.6; }
.fragrance-name { font: italic clamp(2.7rem,11vw,6rem) Arial,Helvetica,sans-serif; }
.fragrance-art small { text-transform:uppercase; letter-spacing:.18em; }
.school-art { background:#dbe7e1; display:grid; grid-template-columns:20% 1fr; gap:20px; padding:24px; }
.app-sidebar { background:#284b43; border-radius:10px; }
.app-cards { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.app-cards i { background:#fff; border-radius:10px; box-shadow:0 10px 30px rgba(40,75,67,.08); }
.systems-art { background:var(--orange); display:flex; flex-direction:column; align-items:center; justify-content:center; }
.systems-art strong { font:500 clamp(5rem,25vw,12rem)/.8 Arial,Helvetica,sans-serif; z-index:1; }
.systems-art span { text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; z-index:1; }
.orbit { position:absolute; width:72vw; max-width:420px; aspect-ratio:1; border:1px solid rgba(23,23,22,.5); border-radius:50%; box-shadow:0 0 0 50px rgba(23,23,22,.06),0 0 0 100px rgba(23,23,22,.03); }
.next-art { background:repeating-linear-gradient(135deg,var(--paper),var(--paper) 18px,#ebe4d8 18px,#ebe4d8 36px); display:grid; place-items:center; }
.next-art span { width:90px; height:90px; border:1px solid var(--ink); border-radius:50%; display:grid; place-items:center; font:300 4rem/1 Inter,sans-serif; }

.about-hero { min-height: calc(100svh - 66px); background:var(--ink); color:#fff; padding:80px 0 40px; display:flex; align-items:end; position:relative; overflow:hidden; }
.about-copy { position:relative; z-index:1; }
.about-copy h1 { margin-bottom:0; }
.about-copy em { color:var(--gold); }
.initials { position:absolute; right:-4vw; top:-2vw; font:500 55vw/1 Arial,Helvetica,sans-serif; color:#222220; }
.about-lines { padding:85px 0; }
.about-lines p { font:500 clamp(2.6rem,13vw,6rem)/1 Arial,Helvetica,sans-serif; letter-spacing:-.04em; padding:20px 0; margin:0; border-bottom:1px solid var(--line); }
.about-statement { background:var(--paper); padding:100px 0; }
.about-statement blockquote { font-size:clamp(2.3rem,10vw,5rem); margin:0; }
.experience .chip-list { margin:25px 0 35px; }

.contact-main { min-height:calc(100svh - 66px); background:var(--ink); color:#fff; display:flex; align-items:center; padding:65px 0; }
.contact-main h1 { margin:25px 0 50px; }
.contact-links { display:grid; }
.contact-links a { display:flex; justify-content:space-between; padding:18px 0; border-top:1px solid #45433f; text-decoration:none; font-size:1.1rem; }
.contact-help { padding:85px 0; }
.contact-help > div { display:grid; grid-template-columns:45px 1fr; align-items:center; border-top:1px solid var(--line); padding:20px 0; }
.contact-help > div span { color:var(--orange); font-weight:800; }
.contact-help > div p { margin:0; font:500 1.5rem Arial,Helvetica,sans-serif; }

@media (min-width: 760px) {
  :root { --pad: 34px; }
  .menu { display:none; }
  .desktop-nav { display:flex; align-items:center; gap:28px; }
  .desktop-nav a { color:#ddd9d1; text-decoration:none; font-size:.85rem; }
  .desktop-nav .nav-button { color:#fff; border:1px solid #595752; border-radius:99px; padding:10px 16px; }
  .split { grid-template-columns:1fr 1fr; }
  .split-card { min-height:740px; padding:55px; }
  .project-meta { display:grid; grid-template-columns:1fr .65fr; gap:50px; align-items:end; }
  .project-meta > p { font-size:1.05rem; }
  .project-list { gap:125px; }
  .footer-row { grid-template-columns:1fr 1fr 1fr; }
  .copyright { text-align:right; }
}
@media (min-width: 1050px) {
  .hero { min-height:820px; }
  .split-card { padding:75px; }
  .split-icon { height:330px; }
  .showcase { display:grid; grid-template-columns:.75fr 1.25fr; padding:0; align-items:center; min-height:850px; }
  .showcase-copy { padding-left:max(var(--pad),calc((100vw - 1180px)/2)); width:auto; margin:0; }
  .showcase-visual { height:760px; }
  .service-block { min-height:760px; }
  .service-block .shell { padding-left:16%; }
  .big-number { right:7vw; font-size:12rem; top:60px; }
  .project-list { grid-template-columns:1fr 1fr; column-gap:28px; align-items:start; }
  .project:nth-child(even) { margin-top:180px; }
  .project-art { min-height:620px; }
  .website-project { grid-column:1/-1; }
  .website-project .project-art { min-height:760px; }
  .website-project .project-meta { max-width:950px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior:auto!important; } }

/* Brand artwork extracted from the supplied Option 1 vector concept. */
.brand-logo { display:block; width:auto; height:60px; object-fit:contain; }
.footer-brand { display:inline-flex; margin-bottom:8px; }
h1, h2, h3 { font-weight:700; letter-spacing:-.035em; line-height:1.06; }
.hero h1 em, .about-copy em { font-style:normal; }
.eyebrow { color:var(--ink); }
.hero .eyebrow, .showcase .eyebrow, .service-block.dark .eyebrow,
.care .eyebrow, .about-hero .eyebrow, .contact-main .eyebrow { color:var(--gold); }
.hero::after { display:none; }
a:focus-visible, summary:focus-visible { outline:3px solid var(--gold); outline-offset:4px; }
.footer-brand .brand-logo { height:100px; }
.nav-bar { min-height:76px; }
.menu nav { top:76px; }

footer { background:var(--paper); color:var(--ink); border-top:1px solid var(--line); }
footer a { color:var(--ink); }