/*
Theme Name: Pono Creative
Theme URI: https://ponocreative.com/
Author: Pono Creative
Author URI: https://travisspeegle.com/
Description: A custom, single-page corporate theme for Pono Creative.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: pono-creative
*/

:root{--ivory:#f3f0e9;--paper:#faf9f5;--ink:#171816;--charcoal:#242521;--stone:#a59d90;--moss:#596052;--rule:rgba(23,24,22,.28)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ivory);color:var(--ink);font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}p,h1,h2,h3,blockquote{margin-top:0}.frame{width:min(1360px,calc(100% - 88px));margin-inline:auto}
.brand{display:flex;align-items:center;gap:12px;width:max-content}.brand>img{width:50px;height:34px;object-fit:contain;filter:grayscale(1) contrast(1.35)}.brand>span{display:flex;flex-direction:column;line-height:.8}.brand strong{font-size:21px;letter-spacing:.02em}.brand small{margin-top:8px;font:7px monospace;letter-spacing:.31em}.brand.inverse{color:#fff}.brand.inverse>img{filter:brightness(0) invert(1)}
.hero{min-height:860px;position:relative;color:#fff;background:#252621;overflow:hidden}.hero-image,.hero-shade{position:absolute;inset:0;width:100%;height:100%}.hero-image{object-fit:cover;object-position:center 42%;filter:grayscale(1) contrast(1.06);transform:scale(1.015)}.hero-shade{background:linear-gradient(90deg,rgba(9,10,9,.78),rgba(9,10,9,.48) 52%,rgba(9,10,9,.18)),linear-gradient(0deg,rgba(9,10,9,.42),transparent 45%)}
.site-header{height:102px;position:relative;z-index:2;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid rgba(255,255,255,.35)}.site-header nav{display:flex;gap:38px;font:9px monospace;letter-spacing:.14em;text-transform:uppercase}.header-contact{justify-self:end;padding:12px 0 9px;border-bottom:1px solid #fff;font:9px monospace;letter-spacing:.13em;text-transform:uppercase}
.hero-content{min-height:652px;position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;padding:70px 0 44px}.eyebrow{margin-bottom:34px;font:600 9px monospace;letter-spacing:.16em;text-transform:uppercase}.light{color:rgba(255,255,255,.72)}h1,h2{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.045em}h1{max-width:1100px;margin-bottom:42px;font-size:clamp(68px,8.1vw,126px);line-height:.9}h1 em,h2 em{font-weight:400;color:#c7c0b3}.hero-deck{max-width:620px;margin:0 0 0 4px;font-size:18px;line-height:1.6;color:rgba(255,255,255,.88)}.hero-foot{height:106px;position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(255,255,255,.35);font:9px monospace;letter-spacing:.13em;text-transform:uppercase}
.section-label{height:67px;display:grid;grid-template-columns:80px 1fr;align-items:center;border-top:1px solid;border-bottom:1px solid;font:9px monospace;letter-spacing:.15em;text-transform:uppercase}.section-label span:first-child{height:100%;display:flex;align-items:center;border-right:1px solid}.section-label span:last-child{padding-left:22px}
.meaning,.work{padding:112px 0 150px}.meaning-grid,.work-head{display:grid;grid-template-columns:1.25fr .75fr;gap:10vw;padding-top:100px}.meaning h2,.work h2,.experience h2,.contact h2{margin:0;font-size:clamp(66px,7.5vw,112px);line-height:.92}.meaning h2 em,.work h2 em,.contact h2 em{color:var(--moss)}.meaning-copy{padding-top:10px}.meaning-copy p{font-size:16px;line-height:1.78}.meaning-copy .lead{margin-bottom:34px;font:30px/1.32 Georgia,serif}
.human{min-height:900px;display:grid;grid-template-columns:1.08fr .92fr;background:var(--charcoal);color:#fff}.human-image{position:relative;min-height:900px;overflow:hidden}.human-image img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08)}.human-image:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,15,13,.52),transparent 48%)}.human-image>span{position:absolute;left:48px;bottom:40px;z-index:1;font:9px monospace;letter-spacing:.15em;text-transform:uppercase}.human-copy{padding:72px clamp(44px,6vw,96px) 70px}.human-copy .eyebrow{margin-top:74px;margin-bottom:24px}.human-copy h2{margin:0 0 38px;font-size:clamp(70px,7.5vw,112px);line-height:.86}.human-intro{max-width:650px;margin-bottom:46px;color:#cecbc3;font-size:16px;line-height:1.7}.hierarchy{margin:0;padding:0;list-style:none;border-top:1px solid rgba(255,255,255,.4)}.hierarchy li{min-height:67px;display:grid;grid-template-columns:44px .6fr 1fr;gap:18px;align-items:center;border-bottom:1px solid rgba(255,255,255,.24)}.hierarchy span{font:9px monospace;color:var(--stone)}.hierarchy strong{font:24px Georgia,serif}.hierarchy p{margin:0;color:#aeadab;font-size:12px}.human blockquote{max-width:660px;margin:44px 0 0;font:22px/1.45 Georgia,serif;color:#d3d0c8}
.work-head{align-items:end;padding-bottom:90px}.work-head>p{margin:0 0 8px;font-size:16px;line-height:1.75}.services{border-top:1px solid}.service{min-height:150px;display:grid;grid-template-columns:80px .85fr 1.15fr;gap:30px;align-items:center;border-bottom:1px solid var(--rule)}.service>span{font:9px monospace;color:var(--moss)}.service h3{margin:0;font:400 clamp(27px,2.5vw,39px)/1.08 Georgia,serif;letter-spacing:-.035em}.service p{max-width:590px;margin:0;color:#55564f;font-size:14px;line-height:1.7}.engagements{display:grid;grid-template-columns:repeat(4,1fr);margin-top:60px;border:1px solid var(--rule)}.engagements span{min-height:76px;padding:20px;display:flex;align-items:center;font:9px monospace;letter-spacing:.09em;text-transform:uppercase}.engagements span+span{border-left:1px solid var(--rule)}
.experience{padding:116px 0 130px;background:var(--charcoal);color:#fff}.experience-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:9vw;padding:96px 0 100px}.experience h2 em{color:#a9a194}.experience-copy{align-self:end}.experience-copy p{color:#c8c5bd;font-size:16px;line-height:1.75}.client-label{margin:0;padding:18px 0;border-top:1px solid rgba(255,255,255,.4);font:9px monospace;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.68)}.clients{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid rgba(255,255,255,.3);background:var(--paper)}.clients figure{height:124px;margin:0;padding:22px;display:grid;place-items:center;filter:grayscale(1) contrast(1.1)}.clients figure+figure{border-left:1px solid rgba(23,24,22,.2)}.clients img{max-height:55px;max-width:138px;width:auto}
.contact{display:grid;grid-template-columns:180px .8fr 1.2fr;gap:6vw;align-items:start;padding:120px 0}.contact-mark{width:180px;aspect-ratio:1;display:grid;place-items:center;border:1px solid var(--rule)}.contact-mark img{width:68%;filter:grayscale(1) contrast(1.4)}.contact-main{padding-top:8px}.contact-copy{padding-top:8px}.contact-copy>p{max-width:540px;margin-bottom:40px;font-size:15px;line-height:1.7}.contact-form{border-top:1px solid}.contact-form label{display:block;padding:17px 0 15px;border-bottom:1px solid var(--rule)}.contact-form label>span{display:flex;justify-content:space-between;margin-bottom:9px;font:8px monospace;letter-spacing:.1em;text-transform:uppercase}.contact-form input,.contact-form textarea{width:100%;padding:4px 0;border:0;outline:0;resize:vertical;background:transparent;color:var(--ink);font:500 15px/1.5 Arial,sans-serif}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:30px}.form-trap{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}.form-actions{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:24px}.form-actions button{min-width:140px;display:flex;justify-content:space-between;padding:12px 0 9px;border:0;border-bottom:1px solid;background:transparent;cursor:pointer;font:9px monospace;letter-spacing:.1em;text-transform:uppercase}.form-notice{margin:0 0 28px;padding:18px 20px;border:1px solid var(--rule);font-size:14px;line-height:1.5}.form-notice.success{background:#e6e8df}.form-notice.error{background:#eee1de}.linkedin{display:flex;justify-content:space-between;margin-top:30px;padding:17px 0;border-top:1px solid;border-bottom:1px solid;font:9px monospace;letter-spacing:.08em;text-transform:uppercase}
.site-footer{background:#121311;color:#fff}.footer-grid{min-height:200px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end;gap:40px;padding:46px 0}.footer-grid>p{margin:0;font:8px monospace;letter-spacing:.1em;text-transform:uppercase;color:#8e8e89}.footer-grid>div{display:flex;flex-direction:column;align-items:flex-end;gap:22px;font:8px monospace;letter-spacing:.08em;text-transform:uppercase;color:#8e8e89}
.content-shell{min-height:60vh;padding:120px 0}.content-shell h1{color:var(--ink);font-size:clamp(48px,7vw,90px)}.content-shell article{max-width:800px;font-size:17px;line-height:1.75}
@media(max-width:980px){.frame{width:min(100% - 44px,800px)}.site-header{grid-template-columns:1fr auto}.site-header nav{display:none}.meaning-grid,.work-head,.experience-grid{grid-template-columns:1fr;gap:54px}.human{grid-template-columns:1fr}.human-image{min-height:620px}.service{grid-template-columns:60px .8fr 1.2fr}.clients{grid-template-columns:repeat(3,1fr)}.contact{grid-template-columns:150px 1fr}.contact-mark{width:150px}.contact-copy{grid-column:2}}
@media(max-width:660px){.frame{width:calc(100% - 28px)}.site-header{height:82px}.header-contact{font-size:7px}.hero{min-height:720px}.hero-content{min-height:535px}h1{font-size:54px}.hero-deck{font-size:16px}.section-label{grid-template-columns:54px 1fr}.meaning,.work{padding:82px 0 96px}.meaning-grid,.work-head{padding-top:62px}.meaning h2,.work h2,.experience h2,.contact h2{font-size:52px}.human-image{min-height:470px}.human-copy{padding:60px 24px 70px}.human-copy h2{font-size:62px}.hierarchy li{grid-template-columns:36px 1fr;padding:13px 0}.hierarchy p{grid-column:2}.service{grid-template-columns:40px 1fr;gap:16px;padding:26px 0}.service p{grid-column:2}.engagements{grid-template-columns:1fr 1fr}.clients{grid-template-columns:repeat(2,1fr)}.contact{grid-template-columns:1fr;padding:88px 0}.contact-mark{width:130px}.contact-copy{grid-column:auto}.form-row{grid-template-columns:1fr;gap:0}.footer-grid{grid-template-columns:1fr}.footer-grid>div{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}