/* Self-contained review build. Replace concept projects and connect the form before launch. */
:root {
--paper:#f6f6f0;
--white:#fff;
--ink:#14231f;
--muted:#56645e;
--green:#355d43;
--lime:#d8ef9a;
--line:#d9dfd6;
--navy:#13242d;
--radius:18px;
--max:1240px
}
* {
box-sizing:border-box
}
html {
scroll-behavior:smooth;
scroll-padding-top:100px
}
body {
margin:0;
background:var(--paper);
color:var(--ink);
font:16px/1.65 Arial,Helvetica,sans-serif
}
button,input,textarea,select {
font:inherit
}
a {
color:inherit
}
button,a,input,select,textarea {
touch-action:manipulation
}
a {
text-decoration:none
}
button {
cursor:pointer
}
img,svg {
max-width:100%;
display:block
}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible {
outline:3px solid #799a30;
outline-offset:5px
}
::selection {
background:var(--lime);
color:var(--ink)
}
.wrap {
width:min(var(--max),calc(100% - 80px));
margin:auto
}
.skip {
position:fixed;
top:-100px;
left:20px;
z-index:99;
background:white;
padding:12px
}
.skip:focus {
top:12px
}
.eyebrow {
font-size:11px;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
margin:0 0 22px;
display:flex;
align-items:center;
gap:10px
}
.dot {
width:7px;
height:7px;
background:var(--green);
border-radius:50%;
display:inline-block
}
.light .dot {
background:var(--lime)
}
h1,h2,h3,p {
margin-top:0
}
h1,h2,h3 {
line-height:1.08;
letter-spacing:-.045em
}
h1 {
font-size:clamp(44px,5.1vw,76px);
font-weight:600;
margin-bottom:26px
}
h2 {
font-size:clamp(34px,3.6vw,51px);
font-weight:500;
margin-bottom:22px
}
h3 {
font-size:25px;
font-weight:500
}
p {
color:var(--muted)
}
.btn {
display:inline-flex;
align-items:center;
justify-content:center;
gap:25px;
padding:14px 22px;
border:1px solid transparent;
border-radius:5px;
background:var(--ink);
color:#fff;
font-size:14px;
font-weight:700;
line-height:1.3;
transition:background .2s,transform .2s
}
.btn:hover {
background:var(--green);
transform:translateY(-2px)
}
.btn.pale {
background:var(--lime);
color:var(--ink)
}
.btn.pale:hover {
background:#e4f8b5
}
.btn.outline {
border-color:#a3afa5;
background:transparent;
color:var(--ink)
}
.btn.outline:hover {
background:#e9ede3
}
.arrow {
font-size:20px;
font-weight:400
}
.section {
padding:100px 0
}
.section-head {
display:flex;
justify-content:space-between;
align-items:end;
gap:35px;
margin-bottom:42px
}
.section-head h2 {
margin-bottom:0;
max-width:650px
}
.section-head>p {
max-width:330px;
margin:0;
font-size:15px
}
.badge {
display:inline-block;
border:1px solid var(--line);
border-radius:30px;
padding:5px 11px;
font-size:11px;
letter-spacing:.4px
}
.text-link {
border-bottom:1px solid #a0aea4;
padding-bottom:5px;
font-size:14px;
font-weight:700;
display:inline-flex;
gap:22px
}
.text-link:hover {
color:var(--green)
}
header {
position:sticky;
top:0;
z-index:20;
background:rgba(246,246,240,.97);
border-bottom:1px solid var(--line)
}
.nav {
min-height:88px;
display:flex;
align-items:center;
justify-content:space-between;
gap:25px
}
.brand {
display:flex;
align-items:center;
gap:10px;
font-size:25px;
font-weight:700;
letter-spacing:-1px;
white-space:nowrap
}
.brand-mark {
width:31px;
height:31px;
display:grid;
grid-template-columns:1fr 1fr;
gap:3px;
transform:rotate(-8deg)
}
.brand-mark i {
background:var(--green);
border-radius:2px
}
.brand-mark i:last-child {
background:#97b46d
}
.brand small {
font-size:11px;
display:block;
letter-spacing:2px;
font-weight:400;
line-height:1
}
.brand-name {
line-height:1.1
}
.nav-links {
display:flex;
align-items:center;
gap:28px;
font-size:13px;
font-weight:600
}
.nav-links>a:not(.btn):hover {
color:var(--green)
}
.menu-btn {
display:none;
background:transparent;
border:1px solid var(--line);
padding:8px 12px;
border-radius:4px
}
.hero {
padding:75px 0 48px;
overflow:hidden
}
.hero-grid {
display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
gap:40px
}
.hero-copy {
position:relative;
z-index:1
}
.hero-copy>p:not(.eyebrow) {
max-width:490px;
font-size:17px
}
.hero h1 span {
color:var(--green)
}
.hero-actions {
display:flex;
gap:14px;
flex-wrap:wrap;
margin:32px 0 30px
}
.hero-note {
font-size:12px!important;
margin:0;
color:var(--muted)
}
.hero-art {
min-height:510px;
position:relative;
background:#e4e9de;
border-radius:200px 15px 15px 15px;
padding:47px 22px 105px 38px;
isolation:isolate
}
.hero-art:before {
content:'';
position:absolute;
width:250px;
height:250px;
background:#ccd9b9;
border-radius:50%;
right:-55px;
top:-30px;
z-index:-1
}
.browser {
background:#fff;
border:1px solid #bac6bb;
border-radius:9px;
overflow:hidden;
box-shadow:0 25px 50px #13231f24
}
.browser-bar {
height:27px;
background:#f3f3ef;
display:flex;
align-items:center;
gap:4px;
padding:0 10px;
border-bottom:1px solid #ddd
}
.browser-bar i {
width:5px;
height:5px;
border-radius:50%;
background:#b9c0b7
}
.browser-bar span {
font-size:8px;
margin:auto;
color:#788078
}
.web-demo {
background:#172c35;
color:#fff;
padding:19px 24px 0
}
.demo-nav {
display:flex;
justify-content:space-between;
font-size:8px;
margin-bottom:23px
}
.web-demo h3 {
font-size:31px;
max-width:260px;
font-weight:500;
color:#f4f3eb;
letter-spacing:-1px;
line-height:1.1;
margin:0 0 15px
}
.web-demo h3 em {
font-style:normal;
color:#d8ef9a
}
.mini-btn {
font-size:8px;
background:var(--lime);
color:var(--ink);
padding:7px 12px;
display:inline-block;
border-radius:2px
}
.dashboard {
display:grid;
grid-template-columns:1.5fr 1fr;
gap:10px;
margin-top:25px;
transform:translateY(15px)
}
.dash-panel {
background:#f5f6ed;
border-radius:5px;
padding:12px;
color:var(--ink);
min-height:85px
}
.dash-panel small {
font-size:8px
}
.chart {
display:flex;
align-items:end;
gap:8px;
height:49px;
padding-top:8px
}
.chart i {
background:#83a575;
flex:1;
border-radius:2px 2px 0 0
}
.chart i:nth-child(2) {
height:40%
}
.chart i:nth-child(3) {
height:70%
}
.chart i:nth-child(4) {
height:55%
}
.chart i:nth-child(5) {
height:90%
}
.chart i:first-child {
height:30%
}
.dash-squares {
display:grid;
grid-template-columns:1fr 1fr;
gap:5px;
margin-top:9px
}
.dash-squares i {
height:18px;
background:#e3e8d6;
border-radius:2px
}
.identity-tile {
position:absolute;
bottom:34px;
left:5px;
width:215px;
background:#d7e8b8;
padding:24px;
color:#193226;
box-shadow:0 15px 35px #0002;
transform:rotate(-7deg);
border-radius:4px
}
.identity-tile small {
font-size:8px;
letter-spacing:2px
}
.identity-tile strong {
font-size:37px;
letter-spacing:-2px;
line-height:1.2;
display:block;
margin:13px 0
}
.swatches {
display:flex;
gap:5px
}
.swatches i {
width:24px;
height:15px;
background:#183b2b
}
.swatches i:nth-child(2) {
background:#95ae75
}
.swatches i:nth-child(3) {
background:#f8f4db
}
.phone {
position:absolute;
right:12px;
bottom:15px;
width:146px;
height:255px;
background:#111c23;
border:6px solid #1b2427;
border-radius:25px;
box-shadow:0 16px 30px #0003;
overflow:hidden;
color:#fff
}
.phone:before {
content:'';
display:block;
width:42px;
height:8px;
background:#182126;
margin:3px auto 11px;
border-radius:10px
}
.phone-body {
padding:13px;
height:100%;
background:linear-gradient(145deg,#6550b4,#25234d)
}
.phone-body small {
font-size:7px;
letter-spacing:1px
}
.phone-body strong {
font-size:24px;
line-height:1.05;
letter-spacing:-1px;
display:block;
margin-top:12px
}
.phone-circle {
width:95px;
height:95px;
border-radius:50%;
background:#e3f1a2;
position:absolute;
bottom:-38px;
right:-24px
}
.phone-circle:before {
content:'↗';
font-size:70px;
color:#25372c;
position:absolute;
left:18px;
top:-10px
}
.art-label {
position:absolute;
right:22px;
top:18px;
font-size:9px;
letter-spacing:1px
}
.capability-strip {
margin-top:55px;
padding-top:22px;
border-top:1px solid var(--line);
display:flex;
justify-content:space-between;
gap:15px;
color:var(--muted);
font-size:11px;
letter-spacing:1px;
text-transform:uppercase
}
.capability-strip span:before {
content:'↗';
color:var(--green);
margin-right:10px
}
.services {
background:var(--white)
}
.service-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:0;
border-top:1px solid var(--line)
}
.service {
padding:30px 27px 28px 0;
border-bottom:1px solid var(--line)
}
.service:not(:nth-child(3n+1)) {
padding-left:27px;
border-left:1px solid var(--line)
}
.service-num {
font-size:12px;
color:var(--green);
margin-bottom:28px;
display:flex;
justify-content:space-between
}
.service h3 {
font-size:24px;
margin-bottom:14px
}
.service p {
font-size:14px;
margin-bottom:20px
}
.service ul {
padding:0;
list-style:none;
font-size:12px;
color:var(--muted);
margin:0
}
.service li {
padding:4px 0
}
.service li:before {
content:'—';
color:#8ba17b;
margin-right:8px
}
.support-line {
margin-top:26px;
font-size:14px;
display:flex;
justify-content:space-between;
gap:25px;
align-items:center
}
.support-line p {
margin:0
}
.work-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px
}
.project-visual {
height:285px;
border-radius:9px;
padding:33px 20px;
overflow:hidden;
position:relative
}
.project-visual.health {
background:#dce5eb
}
.project-visual.commerce {
background:#e9d6c6
}
.project-visual.campaign {
background:#dad4ed
}
.mini-site {
background:#fff;
border-radius:5px;
box-shadow:0 15px 30px #0002;
padding:16px;
min-height:240px;
transform:rotate(-3deg)
}
.mini-site .mini-nav {
font-size:8px;
color:#385675;
display:flex;
justify-content:space-between;
border-bottom:1px solid #dce5eb;
padding-bottom:12px
}
.mini-site h4 {
font:500 30px/1.05 Georgia,serif;
color:#234c70;
margin:25px 0 15px;
max-width:170px
}
.health-blocks {
display:flex;
gap:8px
}
.health-blocks span {
background:#d9e6dd;
flex:1;
height:60px;
border-radius:35px 35px 0 0
}
.health-blocks span:nth-child(2) {
background:#a9c1cf
}
.shop {
background:#faf3e9;
transform:rotate(3deg)
}
.shop .mini-nav {
color:#7d4f31
}
.shop h4 {
color:#7b4e31;
font-size:30px;
margin-top:21px
}
.shop-products {
display:flex;
gap:8px
}
.shop-products i {
display:block;
background:#e4c1a0;
width:33%;
height:80px;
border-radius:4px;
position:relative
}
.shop-products i:before {
content:'';
position:absolute;
left:20%;
top:15%;
width:60%;
height:60%;
background:#a66541;
border-radius:10px 10px 35px 35px
}
.shop-products i:nth-child(2):before {
background:#b69978;
border-radius:40px
}
.shop-products i:nth-child(3):before {
background:#657764;
border-radius:4px
}
.poster {
background:#513a86;
color:#f6eddd;
padding:24px;
min-height:270px;
transform:rotate(-5deg);
position:relative;
overflow:hidden
}
.poster small {
letter-spacing:2px;
font-size:8px
}
.poster strong {
display:block;
font-size:43px;
letter-spacing:-2px;
line-height:.95;
margin-top:23px;
position:relative;
z-index:1
}
.poster:after {
content:'';
position:absolute;
width:160px;
height:160px;
background:#e9b56e;
border-radius:50%;
bottom:-25px;
right:-25px
}
.poster span {
position:relative;
z-index:2;
font-size:10px;
display:block;
margin-top:20px
}
.project-meta {
font-size:10px;
letter-spacing:1px;
text-transform:uppercase;
color:var(--muted);
margin:19px 0 9px
}
.project h3 {
font-size:23px;
margin-bottom:10px
}
.project p {
font-size:13px
}
.project button {
padding:0 0 5px;
background:none;
border:0;
border-bottom:1px solid #9ba99e;
font-size:13px;
font-weight:600;
color:var(--ink)
}
.work-note {
font-size:12px;
margin:26px 0 0
}
.about {
background:var(--navy);
color:#fff
}
.about p {
color:#bac7c6
}
.about .eyebrow {
color:#d8ef9a
}
.about-grid {
display:grid;
grid-template-columns:1.1fr 1fr;
gap:95px
}
.about h2 {
font-size:clamp(36px,3.7vw,53px)
}
.about-copy>p {
font-size:16px
}
.about .badge {
border-color:#50605e;
color:#d8e5da;
margin:5px 3px 0 0
}
.about-side {
border-top:1px solid #4a5b60
}
.principle {
padding:25px 0;
border-bottom:1px solid #4a5b60;
display:grid;
grid-template-columns:40px 1fr;
gap:10px
}
.principle>span {
font-size:12px;
color:var(--lime)
}
.principle h3 {
font-size:23px;
margin:0 0 10px
}
.principle p {
font-size:14px;
margin:0
}
.process-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:36px
}
.step {
border-top:1px solid #9aaa9e;
padding-top:20px
}
.step>span {
display:block;
font-size:12px;
color:var(--green);
margin-bottom:28px
}
.step p {
font-size:14px
}
.faq {
background:#ecefe6;
padding:65px 0
}
.faq-grid {
display:grid;
grid-template-columns:1fr 1.5fr;
gap:80px
}
.faq h2 {
font-size:35px
}
.faq details {
border-bottom:1px solid #cbd3c4;
padding:17px 0
}
.faq summary {
cursor:pointer;
font-weight:600;
font-size:15px
}
.faq details p {
font-size:14px;
margin:14px 0 0
}
.inquiry-grid {
display:grid;
grid-template-columns:.9fr 1.1fr;
gap:85px
}
.inquiry-copy h2 {
font-size:clamp(40px,4.5vw,62px)
}
.inquiry-copy p {
max-width:390px
}
.contact-location {
border-top:1px solid var(--line);
padding-top:22px;
margin-top:35px;
font-size:14px
}
.social-links {
display:flex;
gap:22px;
font-size:13px;
font-weight:600;
margin-top:18px
}
.form-note {
background:#e9eee0;
border-left:3px solid #799c64;
padding:12px 15px;
font-size:12px;
color:#3a503f;
margin:0 0 25px
}
.form-grid {
display:grid;
grid-template-columns:1fr 1fr;
gap:18px
}
.field label {
display:block;
font-size:12px;
font-weight:700;
margin-bottom:7px
}
.field input,.field textarea,.field select {
width:100%;
padding:12px;
border:1px solid #bbc7b9;
background:#fff;
border-radius:4px;
color:var(--ink);
min-width:0
}
.field textarea {
resize:vertical;
min-height:120px
}
.full {
grid-column:1/-1
}
fieldset {
border:0;
padding:0;
margin:0
}
legend {
font-size:12px;
font-weight:700;
margin-bottom:10px
}
.checks {
display:flex;
flex-wrap:wrap;
gap:9px
}
.checks label {
display:flex;
align-items:center;
gap:7px;
font-size:12px;
background:#fff;
border:1px solid var(--line);
border-radius:4px;
padding:8px 10px;
cursor:pointer
}
.checks input {
accent-color:var(--green)
}
.privacy-note {
font-size:11px;
margin:0
}
.form-result {
padding:18px;
background:#e6eedc;
border:1px solid #9eb28b;
border-radius:5px;
margin-top:20px
}
.form-result p {
font-size:13px
}
.form-result button {
margin:4px 6px 0 0
}
.form-result[hidden] {
display:none
}
footer {
background:var(--ink);
color:#fff;
padding:46px 0 22px
}
.footer-top {
display:flex;
justify-content:space-between;
gap:35px;
align-items:start
}
.footer-top p {
color:#b3c2b5;
font-size:13px;
margin:16px 0 0;
max-width:350px
}
.footer-nav {
display:flex;
gap:25px;
font-size:13px
}
.footer-bottom {
border-top:1px solid #425348;
margin-top:35px;
padding-top:18px;
display:flex;
justify-content:space-between;
gap:20px;
font-size:11px;
color:#a8b8ab
}
.footer-bottom button {
border:0;
padding:0;
background:none;
color:inherit;
text-decoration:underline;
font-size:11px
}
dialog {
width:min(660px,calc(100% - 36px));
border:1px solid var(--line);
border-radius:12px;
padding:35px;
color:var(--ink);
background:var(--paper);
max-height:85vh;
overflow:auto
}
dialog::backdrop {
background:#10221ec9
}
.dialog-top {
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px
}
.close {
border:1px solid #bbc7b9;
background:transparent;
border-radius:4px;
padding:5px 10px
}
.dialog-content h2 {
font-size:32px
}
.dialog-content h3 {
font-size:18px;
margin:24px 0 8px
}
.dialog-content p,.dialog-content li {
font-size:14px
}
.concept-label {
color:var(--green);
font-size:11px;
letter-spacing:1px;
text-transform:uppercase
}
@media(min-width:1450px) {
.hero-art {
min-height:540px
}
.web-demo h3 {
font-size:37px
}
}
@media(max-width:1050px) {
.wrap {
width:calc(100% - 48px)
}
.nav-links {
gap:16px
}
.hero-grid {
gap:25px
}
.hero-art {
min-height:465px;
padding-left:20px
}
.web-demo {
padding:16px
}
.web-demo h3 {
font-size:27px
}
.identity-tile {
width:175px;
bottom:37px;
padding:18px
}
.identity-tile strong {
font-size:30px
}
.phone {
width:125px;
height:230px
}
.phone-body strong {
font-size:24px
}
.about-grid,.inquiry-grid {
gap:45px
}
.project-visual {
padding:25px 14px;
height:260px
}
.section {
padding:75px 0
}
.faq-grid {
gap:35px
}
}
@media(max-width:760px) {
.wrap {
width:calc(100% - 36px)
}
.nav {
min-height:73px
}
.brand {
font-size:22px
}
.menu-btn {
display:block
}
.nav-links {
display:none;
position:absolute;
left:0;
right:0;
top:73px;
padding:23px;
background:var(--paper);
border-bottom:1px solid var(--line);
align-items:stretch;
gap:0;
box-shadow:0 12px 20px #0001
}
.nav-links.open {
display:flex;
flex-direction:column
}
.nav-links>a {
padding:12px
}
.nav-links>.btn {
margin-top:10px
}
.hero {
padding:43px 0 30px
}
.hero-grid {
grid-template-columns:1fr;
gap:35px
}
h1 {
font-size:clamp(42px,10.8vw,66px)
}
.hero-copy>p:not(.eyebrow) {
font-size:16px
}
.hero-art {
min-height:455px;
max-width:560px;
width:100%;
margin:auto;
padding:45px 35px 100px
}
.hero-art .browser {
max-width:430px;
margin:auto
}
.web-demo h3 {
font-size:32px
}
.phone {
right:20px
}
.identity-tile {
left:10px;
width:190px
}
.capability-strip {
margin-top:35px;
flex-wrap:wrap;
justify-content:start;
gap:10px 22px;
font-size:9px
}
.section {
padding:62px 0
}
.section-head {
display:block;
margin-bottom:32px
}
.section-head>p {
margin-top:20px;
max-width:100%
}
.service-grid {
grid-template-columns:1fr
}
.service,.service:not(:nth-child(3n+1)) {
padding:25px 0;
border-left:0
}
.service-num {
margin-bottom:18px
}
.service ul {
display:flex;
flex-wrap:wrap;
gap:0 18px
}
.support-line {
display:block
}
.support-line a {
margin-top:15px
}
.work-grid {
grid-template-columns:1fr;
gap:35px
}
.project-visual {
height:330px;
padding:35px 35px 0
}
.mini-site {
max-width:360px;
margin:auto;
min-height:310px
}
.mini-site h4 {
font-size:42px;
max-width:240px
}
.shop-products i {
height:110px
}
.poster {
max-width:330px;
margin:auto;
min-height:340px
}
.poster strong {
font-size:57px
}
.about-grid,.inquiry-grid,.faq-grid {
grid-template-columns:1fr;
gap:35px
}
.process-grid {
grid-template-columns:1fr;
gap:20px
}
.step>span {
margin-bottom:16px
}
.step h3 {
margin-bottom:12px
}
.footer-top {
display:block
}
.footer-nav {
margin-top:28px;
flex-wrap:wrap
}
.footer-bottom {
flex-direction:column;
gap:10px
}
.faq {
padding:50px 0
}
.form-grid {
gap:15px
}
.form-grid>.field {
grid-column:1/-1
}
.section-head h2 {
max-width:100%
}
.hero-actions .btn {
font-size:13px;
padding:13px 17px
}
.inquiry-copy h2 {
font-size:47px
}
}
@media(max-width:380px) {
.hero-art {
padding:45px 15px 100px;
min-height:430px
}
.phone {
right:4px;
width:115px
}
.identity-tile {
left:0;
width:165px
}
.hero-actions {
gap:8px
}
.hero-actions .btn {
gap:12px;
padding:12px
}
.web-demo h3 {
font-size:28px
}
}
@media(prefers-reduced-motion:reduce) {
html {
scroll-behavior:auto
}
*,*:before,*:after {
transition:none!important;
animation:none!important
}
}
@media print {
header {
position:static
}
.menu-btn,.hero-art,.inquiry,dialog,.faq,footer button {
display:none
}
.section {
padding:30px 0
}
.wrap {
width:95%
}
.hero-grid,.about-grid {
display:block
}
.about {
background:white;
color:black
}
.about p {
color:#333
}
.work-grid,.service-grid {
break-inside:avoid
}
a {
color:inherit
}
}
/* Refinement: existing layout retained;
brand, booking and photography additions. */
.real-logo {
/*width:95px;
height:68px;*/
width:200px;
height:40px;
object-fit:contain;
/*background:white;*/
border-radius:3px
}
.brand-descriptor {
font-size:9px;
line-height:1.6;
letter-spacing:1px;
font-weight:500;
color:var(--muted)
}
.nav-links {
gap:22px
}
.booking-btn {
background:var(--green)
}
.photo-nav {
position:relative
}
.photo-nav summary {
cursor:pointer;
list-style:none;
display:flex;
gap:8px;
align-items:center;
padding:12px 0
}
.photo-nav summary::-webkit-details-marker {
display:none
}
.photo-dropdown {
position:absolute;
top:100%;
left:-18px;
width:235px;
background:var(--paper);
padding:10px;
border:1px solid var(--line);
box-shadow:0 16px 28px #14231f1a;
border-radius:5px
}
.photo-dropdown>a,.photo-dropdown>span {
display:block;
padding:10px 12px;
font-size:12px
}
.photo-dropdown>a:hover {
background:#e4eadc
}
.photo-dropdown>span {
color:#64705f;
border-top:1px solid var(--line);
font-weight:400
}
.photo-dropdown small {
display:block;
font-size:10px
}
.booking-notice {
background:#e8eddf;
border-bottom:1px solid var(--line);
font-size:12px
}
.booking-notice .wrap {
display:flex;
justify-content:center;
gap:16px;
align-items:center;
padding:10px 0;
text-align:center
}
.booking-notice a {
font-weight:700;
border-bottom:1px solid #829675
}
.feature-section {
padding:4px 0 65px
}
.feature-shell {
border:1px solid var(--line);
border-radius:10px;
overflow:hidden;
background:#e9eee3
}
.feature-tabs {
display:flex;
border-bottom:1px solid #cbd5c4;
background:#f0f3ea
}
.feature-tabs button {
flex:1;
background:none;
border:0;
border-bottom:3px solid transparent;
padding:16px 12px;
font-size:12px;
font-weight:600;
color:var(--muted)
}
.feature-tabs button[aria-selected=true] {
color:var(--ink);
border-bottom-color:var(--green);
background:#e5ecd9
}
.feature-panel {
display:grid;
grid-template-columns:1.2fr 1fr;
min-height:265px;
gap:25px;
align-items:center;
padding:35px 45px
}
.feature-panel[hidden] {
display:none
}
.feature-panel h2 {
font-size:34px;
margin:0 0 15px
}
.feature-panel .eyebrow {
font-size:10px;
margin-bottom:14px
}
.feature-panel p {
font-size:14px;
max-width:480px;
margin-bottom:17px
}
.feature-graphic {
display:flex;
align-items:center;
justify-content:center;
min-height:180px
}
.feature-words {
font-size:55px;
line-height:.98;
letter-spacing:-3px;
color:#2d503d;
font-weight:700
}
.feature-words span {
display:block;
color:#7f9c6c
}
.feature-photo {
height:225px;
width:100%;
object-fit:cover;
object-position:center 38%;
border-radius:6px
}
.feature-controls {
display:flex;
justify-content:space-between;
padding:12px 24px;
background:#f0f3ea;
font-size:11px;
color:var(--muted);
align-items:center
}
.feature-controls button {
border:1px solid #b5c1ae;
border-radius:4px;
background:none;
padding:4px 12px;
font-size:18px;
color:var(--ink)
}
.feature-controls>div {
display:flex;
gap:8px
}
.photo-section {
background:#e9ede3
}
.photo-head {
max-width:760px
}
.photo-head h2 {
font-size:clamp(38px,4vw,56px)
}
.photo-head>p:not(.eyebrow) {
font-size:17px;
max-width:720px
}
.photo-grid {
display:grid;
grid-template-columns:1.35fr 1fr 1fr;
gap:20px;
margin:35px 0
}
.photo-tile {
margin:0;
background:#fff;
border-radius:8px;
overflow:hidden
}
.photo-tile img {
width:100%;
height:340px;
object-fit:contain;
background:#e1e5dc
}
.photo-tile.wide img {
object-fit:cover;
object-position:center
}
.photo-tile figcaption {
padding:17px 18px;
font-size:12px;
color:var(--muted)
}
.photo-tile strong {
display:block;
font-size:17px;
font-weight:500;
color:var(--ink);
margin-bottom:4px
}
.photo-services {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:35px;
margin:35px 0 25px
}
.photo-services h3 {
font-size:22px
}
.photo-services p {
font-size:14px
}
.photo-actions {
display:flex;
gap:13px;
flex-wrap:wrap;
margin:25px 0
}
.travel-note {
font-size:12px;
padding-top:20px;
border-top:1px solid #c3ceb9;
color:#435340
}
.social-strip {
display:flex;
align-items:center;
justify-content:space-between;
gap:25px;
margin-top:30px;
padding:25px;
background:var(--paper);
border:1px solid #d2dbca;
border-radius:6px
}
.social-strip p {
margin:0;
font-size:13px;
max-width:540px
}
.icon-links {
display:flex;
gap:10px;
flex-wrap:wrap
}
.icon-link {
display:inline-flex;
align-items:center;
gap:7px;
font-size:12px;
border:1px solid #b9c6b1;
border-radius:5px;
padding:9px 12px;
background:#fff
}
.icon-link svg {
width:17px;
height:17px
}
.gallery-pending {
font-size:12px;
color:#5c6d54;
margin-top:15px
}
.proof-strip {
display:grid;
grid-template-columns:1fr 1fr;
gap:25px;
padding-top:32px;
margin-top:35px;
border-top:1px solid var(--line)
}
.proof-strip h3 {
font-size:21px;
margin-bottom:12px
}
.proof-strip p {
font-size:13px
}
.booking-visual {
background:#dce6da;
padding:28px
}
.booking-mini {
padding:19px;
background:white;
min-height:245px;
border-radius:7px;
box-shadow:0 12px 25px #14231f1c
}
.booking-mini>b {
font-size:19px;
letter-spacing:-.5px
}
.booking-mini p {
font-size:9px;
margin:9px 0 14px
}
.mini-fields {
display:grid;
grid-template-columns:1fr 1fr;
gap:8px
}
.mini-fields span {
display:block;
font-size:8px;
border:1px solid #d3dcd0;
padding:7px;
color:#54634d;
border-radius:3px
}
.mini-submit {
background:var(--green);
color:#fff;
font-size:8px;
padding:9px;
margin-top:12px;
text-align:center;
border-radius:3px
}
.project-status {
display:inline-block;
color:var(--green);
font-size:10px;
letter-spacing:1px;
text-transform:uppercase;
margin-bottom:8px
}
.contact-methods {
display:grid;
gap:12px;
margin-top:20px
}
.contact-methods a {
display:flex;
gap:10px;
align-items:center;
font-size:15px;
color:var(--green);
overflow-wrap:anywhere
}
.contact-methods svg {
width:18px;
height:18px;
flex-shrink:0
}
.email-hint {
font-size:12px;
margin-top:12px
}
.commerce-note {
margin:28px 0 0;
padding:22px 25px;
background:#eef2e8;
border-left:3px solid var(--green);
display:flex;
align-items:center;
gap:25px;
justify-content:space-between
}
.commerce-note p {
font-size:13px;
margin:0;
max-width:870px
}
.commerce-note a {
white-space:nowrap;
font-size:13px;
font-weight:600
}
.disclaimer-pending {
opacity:.7
}
.footer-top .real-logo {
width:110px;
height:80px;
padding:4px
}
.direct-actions {
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top:20px
}
.direct-actions .btn {
font-size:12px;
padding:11px 15px
}
.footer-socials {
margin-top:20px
}
.inquiry .footer-socials .icon-link {
color:var(--green);
background:#fff
}
footer .footer-socials .icon-link {
background:transparent;
color:#d7e3da;
border-color:#5b6f60
}
.footer-bottom a {
text-decoration:underline
}
.dialog-action {
margin-top:25px
}
@media(max-width:1100px) {
.brand-descriptor {
display:none
}
.nav-links {
gap:16px
}
.feature-panel {
padding:28px
}
.photo-grid {
grid-template-columns:1.2fr 1fr 1fr
}
.photo-tile img {
height:290px
}
}
@media(max-width:760px) {
.real-logo {
width:79px;
height:57px
}
.brand-descriptor {
display:block;
font-size:8px;
letter-spacing:.5px
}
.nav-links {
gap:0
}
.photo-nav summary {
padding:12px
}
.photo-dropdown {
position:static;
width:100%;
box-shadow:none;
border:0;
border-left:2px solid #b5c5a7;
margin-left:12px;
background:#edf0e6
}
.booking-notice .wrap {
flex-wrap:wrap;
gap:2px 10px;
font-size:11px;
padding:8px 0
}
.feature-section {
padding-bottom:40px
}
.feature-tabs button {
font-size:10px;
padding:13px 5px
}
.feature-panel {
grid-template-columns:1fr;
gap:15px;
padding:25px;
min-height:480px
}
.feature-panel h2 {
font-size:31px
}
.feature-graphic {
min-height:160px;
justify-content:start
}
.feature-words {
font-size:45px
}
.feature-photo {
height:195px
}
.feature-controls {
font-size:10px;
padding:10px 15px
}
.photo-grid {
grid-template-columns:1fr 1fr;
gap:14px
}
.photo-tile.wide {
grid-column:1/-1
}
.photo-tile.wide img {
height:300px
}
.photo-tile img {
height:250px
}
.photo-tile figcaption {
padding:12px;
font-size:11px
}
.photo-tile strong {
font-size:16px
}
.photo-services {
grid-template-columns:1fr;
gap:12px
}
.photo-services h3 {
margin-bottom:10px
}
.social-strip {
display:block;
padding:20px
}
.social-strip .icon-links {
margin-top:18px
}
.proof-strip {
grid-template-columns:1fr;
gap:15px
}
.commerce-note {
display:block;
padding:20px
}
.commerce-note a {
display:inline-block;
margin-top:12px
}
.photo-head>p:not(.eyebrow) {
font-size:16px
}
.footer-nav {
gap:15px
}
.contact-methods a {
font-size:14px
}
}
@media(max-width:380px) {
.brand-descriptor {
display:none
}
.photo-tile img {
height:210px
}
}
/* Focused content refinement;
original visual language retained. */
.real-work-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px 24px
}
.real-project {
background:#fff;
border:1px solid var(--line);
border-radius:9px;
overflow:hidden;
display:flex;
flex-direction:column
}
.project-wordmark {
height:190px;
padding:24px;
display:flex;
flex-direction:column;
justify-content:space-between;
background:#e2e9e0;
color:#264d37
}
.project-wordmark>span {
font-size:10px;
letter-spacing:1px;
text-transform:uppercase
}
.project-wordmark strong {
font-size:32px;
line-height:1;
letter-spacing:-1px;
font-weight:600
}
.project-wordmark small {
font-size:8px;
letter-spacing:2px
}
.tone-01 {
background:#dae5ec;
color:#244a67
}
.tone-02 {
background:#e5dfd5;
color:#664a34
}
.tone-03 {
background:#dce8df;
color:#234c3c
}
.tone-04 {
background:#e0e1eb;
color:#3f456a
}
.tone-05 {
background:#f0e2d0;
color:#6a4329
}
.tone-06 {
background:#dce7cf;
color:#345634
}
.real-project-copy {
padding:24px;
display:flex;
flex-direction:column;
flex:1
}
.real-project h3 {
font-size:22px;
line-height:1.2;
margin-bottom:12px
}
.real-project p {
font-size:14px;
margin-bottom:20px
}
.real-project .project-meta {
margin-top:0
}
.experience-label {
font-size:10px;
color:var(--muted);
margin-top:auto
}
.real-project .text-link {
margin-top:17px;
align-self:start;
font-size:12px
}
.attribution-note {
font-size:11px;
max-width:760px;
margin:24px 0 0
}
.motion-section {
display:grid;
grid-template-columns:1fr 1.5fr;
gap:40px;
border-top:1px solid #c3ceb9;
margin-top:35px;
padding-top:35px
}
.motion-section h3 {
font-size:30px
}
.motion-section p {
font-size:14px
}
.motion-links {
display:grid;
grid-template-columns:1fr 1fr;
gap:15px
}
.motion-card {
display:flex;
flex-direction:column;
justify-content:space-between;
min-height:220px;
padding:22px;
border-radius:7px;
background:var(--navy);
color:#fff;
transition:transform .2s
}
.motion-card:hover {
transform:translateY(-3px)
}
.instagram-card {
background:#443c57
}
.play-circle {
width:43px;
height:43px;
border-radius:50%;
border:1px solid #c1d3b4;
display:flex;
align-items:center;
justify-content:center;
font-size:14px
}
.motion-card small {
display:block;
font-size:8px;
letter-spacing:1px;
margin-bottom:10px
}
.motion-card strong {
font-size:17px;
display:block;
line-height:1.3
}
.motion-card em {
font-size:10px;
font-style:normal;
display:block;
margin-top:10px;
color:#d0d7d3
}
.about.section {
padding:65px 0
}
#process.section {
padding:65px 0
}
.footer-nav {
flex-wrap:wrap
}
.motion-section .eyebrow {
font-size:10px
}
@media(max-width:1000px) {
.real-work-grid {
grid-template-columns:repeat(2,1fr)
}
.motion-section {
grid-template-columns:1fr;
gap:20px
}
}
@media(max-width:600px) {
.real-work-grid {
grid-template-columns:1fr
}
.project-wordmark {
height:170px
}
.motion-links {
grid-template-columns:1fr 1fr
}
.motion-card {
padding:16px;
min-height:220px
}
.motion-card strong {
font-size:15px
}
.motion-section h3 {
font-size:28px
}
.real-project-copy {
padding:22px
}
}
.team-section {
padding:60px 0;
background:#eef0e8
}
.team-grid {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px
}
.team-photo {
height:150px;
background:#e1e7da;
display:grid;
place-items:center;
border-radius:7px;
margin-bottom:20px;
border:1px dashed #aebca4
}
.team-photo span {
font-size:32px;
letter-spacing:1px;
color:#637a58
}
.team-card h3 {
font-size:22px;
margin-bottom:8px
}
.team-card p {
font-size:14px;
margin-bottom:4px
}
.team-card small {
font-size:10px;
color:var(--muted)
}
.short-card {
background:#fff;
border:1px solid var(--line);
border-radius:8px;
overflow:hidden
}
.short-trigger {
width:100%;
height:265px;
border:0;
background:var(--navy);
color:#fff;
position:relative;
display:grid;
place-items:center;
overflow:hidden
}
.short-trigger img {
position:absolute;
width:100%;
height:100%;
object-fit:cover;
opacity:.8
}
.short-trigger .play-circle {
position:relative;
z-index:1;
background:#152923c9;
width:52px;
height:52px
}
.short-title {
padding:15px
}
.short-title h4 {
font-size:16px;
margin:0 0 8px
}
.short-title a {
font-size:11px;
text-decoration:underline
}
.video-dialog {
width:min(430px,calc(100% - 30px));
padding:18px;
background:#14231f;
color:#fff
}
.video-dialog .close {
color:#fff;
border-color:#637363
}
.video-dialog iframe {
width:100%;
aspect-ratio:9/16;
border:0;
display:block;
max-height:73vh
}
.video-dialog p {
font-size:11px;
color:#cbd6cb
}
.video-dialog a {
text-decoration:underline
}
.team-card h3 {
letter-spacing:-.025em
}
@media(max-width:760px) {
.team-grid {
grid-template-columns:repeat(2,1fr);
gap:25px 18px
}
.team-photo {
height:130px
}
.team-card h3 {
font-size:20px
}
.short-trigger {
height:230px
}
}
/* Missing local images show labeled boxes until you upload the files. */
img[hidden], .image-placeholder[hidden]  {
display: none !important;
}
.image-slot  {
display: block;
}
.logo-slot  {
width: 200px;
/*width: 95px;*/
flex-shrink: 0;
}
.image-placeholder  {
display: flex;
min-height: 100px;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 10px;
text-align: center;
padding: 20px;
background: #e2e8dc;
border: 1px dashed #9bad8d;
color: #42563b;
font-size: 13px;
}
.image-placeholder small  {
font-size: 10px;
overflow-wrap: anywhere;
}
.logo-slot .image-placeholder  {
min-height: 68px;
padding: 8px;
font-size: 10px;
}
.photo-slot .image-placeholder  {
height: 340px;
}
@media (max-width: 1100px)  {
.photo-slot .image-placeholder  {
height: 290px;
}
}
@media (max-width: 760px)  {
.logo-slot  {
width: 79px;
}
.photo-slot .image-placeholder  {
height: 250px;
}
.wide .photo-slot .image-placeholder  {
height: 300px;
}
}