/* Shared design system — Phenomenon-inspired structure, Daniele Manca content. */
@import url('fonts.css');
:root{
color-scheme:dark;
--bg:#0b0f10;
--surface:#1b2022;
--ink:#fafafa;
--muted:#b2b6b7;
--line:#2c3234;
--accent:#f18072;
--button:#b83b2e;
--display:'DM Sans',Arial,sans-serif;
--body:'DM Sans',Arial,sans-serif;
--gutter:clamp(24px,2.2vw,36px);
--width:1440px}
*{
box-sizing:border-box}
html{
scroll-behavior:smooth;
scroll-padding-top:100px}
body{
margin:0;
background:var(--bg);
color:var(--ink);
font-family:var(--body);
font-size:17px;
line-height:1.6;
-webkit-font-smoothing:antialiased}
body.menu-open{
overflow:hidden}
::selection{
background:var(--button);
color:white}
a{
color:inherit;
text-decoration:none}
button,input,textarea,select{
font:inherit}
button,a,input,textarea,select,summary{
-webkit-tap-highlight-color:transparent}
button{
cursor:pointer}
button:disabled{
cursor:default}
img{
display:block;
max-width:100%;
height:auto}
figure,blockquote{
margin:0}
p{
margin:0 0 1.3em}
p:last-child{
margin-bottom:0}
h1,h2,h3,h4{
margin:0;
font-weight:500;
line-height:1.13}
h1,h2,.serif{
font-family:var(--display);
letter-spacing:-.045em}
h1{
font-size:clamp(48px,5.2vw,76px)}
h2{
font-size:clamp(36px,4vw,58px)}
h3{
font-size:26px;
letter-spacing:-.035em}
ul{
padding-left:1.1em}
li{
padding-left:.2em;
margin:.55em 0}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
outline:2px solid var(--accent);
outline-offset:6px}
input:focus-visible,textarea:focus-visible,select:focus-visible{
outline-offset:2px}
.container{
max-width:var(--width);
padding-inline:var(--gutter);
margin-inline:auto}
.section{
padding-block:110px}
.section+.section{
border-top:1px solid var(--line)}
.eyebrow{
color:var(--muted);
font-size:12px;
font-weight:700;
letter-spacing:.13em;
text-transform:uppercase;
margin:0 0 26px}
.muted{
color:var(--muted)}
.lead{
font-size:clamp(20px,2vw,27px);
line-height:1.45;
letter-spacing:-.025em;
color:var(--muted)}
.small{
font-size:14px}
.button{
display:inline-flex;
align-items:center;
justify-content:center;
gap:26px;
background:var(--button);
border:1px solid transparent;
color:#fff;
padding:21px 30px;
line-height:1.4;
font-size:12px;
font-weight:700;
letter-spacing:.09em;
text-transform:uppercase;
border-radius:7px;
min-height:62px;
transition:background .2s,transform .2s}
.button:hover{
background:#c64436;
transform:translateY(-2px)}
.button.secondary{
background:var(--surface);
border-color:transparent;
color:var(--ink)}
.button.secondary:hover{
border-color:var(--accent);
background:#202020}
.text-link{
display:inline-block;
border-bottom:1px solid var(--accent);
padding-block:6px;
line-height:1.4}
.text-link:hover{
color:var(--accent)}
.actions{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:10px;
margin-top:32px}
.note{
color:var(--muted);
font-size:14px;
margin-top:18px}
.skip-link{
position:fixed;
top:-100px;
left:16px;
background:var(--ink);
color:var(--bg);
z-index:100;
padding:12px 20px}
.skip-link:focus{
top:10px}
.site-header{
max-width:var(--width);
margin:auto;
padding:14px var(--gutter);
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
min-height:82px;
position:sticky;
top:0;
z-index:30;
background:var(--bg)}
.wordmark{
font-size:25px;
font-weight:700;
letter-spacing:-.065em;
line-height:1.1;
white-space:nowrap}
.site-nav{
display:flex;
align-items:center;
gap:42px;
font-size:12px;
font-weight:700;
letter-spacing:.12em;
text-transform:uppercase}
.site-nav>a:not(.button){
padding-block:8px}
.site-nav>a[aria-current=page]:not(.button){
color:var(--accent)}
.site-nav>a:hover:not(.button){
color:var(--accent)}
.site-nav .button{
font-size:11px;
padding:18px 26px;
min-height:52px;
background:#fff;
color:#0b0f10;
margin-left:38px}
.site-nav .button:hover{
background:#e6e6e6}
.menu-toggle{
display:none;
border:1px solid var(--line);
color:var(--ink);
background:transparent;
padding:9px 14px}
.home-hero{
display:block;
padding-top:85px;
padding-bottom:46px}
.hero-copy{
padding:0}
.hero-copy h1{
font-size:clamp(52px,5.3vw,76px);
line-height:1.12;
margin-bottom:36px;
max-width:1100px;
letter-spacing:-.055em}
.hero-copy .eyebrow{
margin-bottom:30px}
.hero-copy .actions{
margin-top:0}
.hero-copy .text-link{
border:0;
background:var(--surface);
border-radius:7px;
padding:21px 30px;
font-size:12px;
text-transform:uppercase;
font-weight:700;
letter-spacing:.09em;
min-height:62px;
display:inline-flex;
align-items:center}
.hero-copy .text-link:hover{
background:#303638;
color:white}
.hero-copy .note{
font-size:13px;
margin-top:18px}
.hero-introduction{
display:grid;
grid-template-columns:1fr 1fr;
gap:34px;
padding-bottom:40px;
align-items:start}
.hero-project{
display:block;
border-radius:12px;
overflow:hidden;
align-self:start;
height:clamp(320px,30vw,430px);
min-height:0;
background:#202628}
.hero-project img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .5s}
.hero-project:hover img{
transform:scale(1.025)}
.hero-introduction-copy{
padding-top:20px}
.hero-introduction-copy>.lead{
font-size:clamp(23px,2.25vw,32px);
color:var(--ink);
line-height:1.4;
letter-spacing:-.04em;
margin-bottom:38px}
.trust-strip{
display:grid;
grid-template-columns:1fr 1fr;
padding:0;
gap:0;
border-top:1px solid var(--line)}
.trust-strip>div{
padding:22px 20px 24px 0;
border-bottom:1px solid var(--line)}
.trust-strip>div:nth-child(2){
padding-left:24px;
border-left:1px solid var(--line)}
.trust-strip .serif{
font-family:var(--body);
font-size:17px;
line-height:1.5;
letter-spacing:-.02em}
.trust-strip blockquote{
grid-column:1/-1;
padding-top:27px}
.trust-strip blockquote p{
font-size:17px;
line-height:1.5;
margin-bottom:9px;
color:var(--muted)}
.trust-strip cite{
font-style:normal;
font-size:11px;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--muted)}
.section-heading{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:36px;
margin-bottom:46px}
.section-heading .lead{
max-width:770px;
margin-top:20px}
.price-aside{
border-left:1px solid var(--line);
padding-left:42px;
flex-shrink:0}
.price-aside span{
display:block;
color:var(--muted);
font-size:11px;
letter-spacing:.13em}
.price-aside strong{
font-family:var(--display);
font-weight:400;
color:var(--accent);
font-size:64px;
letter-spacing:-.05em;
line-height:1.1}
.intro-offer{
padding-top:85px;
border-top:1px solid var(--line)}
.columns-three{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px}
.service-block{
border-top:1px solid var(--line);
padding-top:30px}
.index{
color:var(--accent);
font-size:12px;
letter-spacing:.12em;
margin-bottom:22px;
display:block}
.service-block h3{
font-family:var(--display);
font-size:29px;
margin-bottom:20px}
.service-block p{
color:var(--muted)}
.work-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px}
.project-image{
border-radius:12px;
width:100%;
aspect-ratio:1.4;
object-fit:cover;
background:#232323;
transition:filter .3s}
.project-link:hover .project-image{
filter:brightness(1.08)}
.project-meta{
display:flex;
justify-content:space-between;
align-items:start;
gap:20px;
padding-top:22px}
.project-meta h3{
font-family:var(--display);
font-size:29px;
margin-bottom:8px}
.project-meta p{
font-size:14px;
color:var(--muted)}
.project-meta>span{
font-size:12px;
color:var(--accent);
padding-top:10px;
white-space:nowrap}
.split{
display:grid;
grid-template-columns:1fr 1fr;
gap:80px}
.split h2{
max-width:580px}
.split .prose{
max-width:570px}
.prose p{
color:var(--muted)}
.prose h2,.prose h3{
margin-bottom:24px}
.prose p+.text-link{
margin-top:8px}
.quote-wide{
max-width:1000px;
margin:auto;
text-align:left}
.quote-wide p{
font-family:var(--display);
font-size:clamp(30px,3.6vw,49px);
line-height:1.25;
letter-spacing:-.035em}
.quote-wide cite{
font-size:14px;
color:var(--muted);
font-style:normal}
.cta{
border-top:1px solid var(--line);
padding-block:100px;
background:var(--surface);
border-radius:30px 30px 0 0}
.cta-inner{
display:flex;
justify-content:space-between;
align-items:center;
gap:60px}
.cta h2{
max-width:800px;
font-size:clamp(42px,5vw,72px)}
.cta .button{
white-space:nowrap}
.cta .eyebrow{
margin-bottom:20px}
.site-footer{
border-top:1px solid var(--line);
padding-block:42px 25px}
.footer-main{
display:flex;
justify-content:space-between;
gap:50px;
margin-bottom:50px}
.footer-main p{
color:var(--muted);
font-size:14px;
margin-top:14px;
max-width:340px}
.footer-nav{
display:flex;
gap:26px;
flex-wrap:wrap;
align-content:start;
font-size:14px}
.footer-nav a:hover{
color:var(--accent)}
.footer-bottom{
display:flex;
justify-content:space-between;
gap:24px;
color:var(--muted);
font-size:12px}
.page-hero{
padding-top:95px;
padding-bottom:80px;
border-bottom:1px solid var(--line)}
.page-hero h1{
max-width:1060px}
.page-hero .lead{
max-width:770px;
margin-top:36px;
font-size:23px}
.page-hero .eyebrow{
margin-bottom:25px}
.page-hero.compact{
padding-bottom:56px}
.page-hero .breadcrumb{
font-size:13px;
color:var(--muted);
margin-bottom:35px}
.breadcrumb a{
border-bottom:1px solid var(--line)}
.breadcrumb span{
padding-inline:14px}
.offer-intro{
background:var(--surface);
border-radius:24px}
.numbered-row{
display:grid;
grid-template-columns:70px 1fr 1.2fr;
gap:30px;
padding:35px 0;
border-top:1px solid var(--line)}
.numbered-row:last-child{
border-bottom:1px solid var(--line)}
.numbered-row .index{
padding-top:7px}
.numbered-row h3{
font-family:var(--display);
font-size:34px}
.numbered-row p{
color:var(--muted)}
.pricing-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:0;
border-block:1px solid var(--line);
margin-top:40px}
.plan{
padding:36px 30px;
display:flex;
flex-direction:column;
align-items:flex-start;
border-right:1px solid var(--line)}
.plan:first-child{
padding-left:0}
.plan:last-child{
border:0;
padding-right:0}
.plan h3{
font-family:var(--display);
font-size:36px}
.plan .price{
font-family:var(--display);
font-size:52px;
letter-spacing:-.04em;
margin-block:20px;
line-height:1.1}
.plan .price span{
font-family:var(--body);
font-size:12px;
letter-spacing:0;
color:var(--muted);
display:block;
margin-bottom:8px}
.plan p,.plan li{
color:var(--muted);
font-size:15px}
.plan ul{
margin:0 0 28px}
.plan .button{
margin-top:auto}
.plan-label{
color:var(--accent);
font-size:11px;
text-transform:uppercase;
letter-spacing:.13em;
min-height:30px}
.extras{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
margin-top:36px}
.extras h3{
font-size:20px;
margin-bottom:12px}
.extras p{
color:var(--muted);
font-size:15px}
.faq-list{
border-top:1px solid var(--line)}
details{
border-bottom:1px solid var(--line)}
summary{
padding:25px 40px 25px 0;
font-size:21px;
cursor:pointer;
list-style-position:inside}
summary::marker{
color:var(--accent);
font-size:13px}
details[open] summary{
color:var(--accent)}
details>p{
color:var(--muted);
padding:0 20px 26px 20px;
max-width:840px}
.faq-layout{
display:grid;
grid-template-columns:.8fr 1.5fr;
gap:70px}
.faq-layout h2{
font-size:52px}
.fact-row{
display:grid;
grid-template-columns:repeat(3,1fr);
border-block:1px solid var(--line);
margin-top:56px;
padding-block:24px}
.fact-row div{
padding:0 30px;
border-right:1px solid var(--line)}
.fact-row div:first-child{
padding-left:0}
.fact-row div:last-child{
border:0}
.fact-row strong{
font-family:var(--display);
font-size:48px;
font-weight:400;
color:var(--accent);
display:block;
line-height:1.3}
.fact-row span{
font-size:14px;
color:var(--muted)}
.about-statement{
font-size:clamp(30px,4vw,58px);
line-height:1.22;
max-width:1000px;
letter-spacing:-.035em}
.about-statement em{
font-style:normal;
color:var(--accent)}
.about-image{
border-radius:12px;
width:100%;
max-height:570px;
object-fit:cover;
object-position:50% 60%}
.caption{
font-size:12px;
color:var(--muted);
padding-top:12px}
.project-hero-image{
border-radius:12px;
width:100%;
max-height:730px;
object-fit:contain;
background:#222}
.project-facts{
display:grid;
grid-template-columns:repeat(3,1fr);
padding-block:32px;
gap:40px;
border-bottom:1px solid var(--line)}
.project-facts dt{
color:var(--accent);
font-size:11px;
text-transform:uppercase;
letter-spacing:.16em;
margin-bottom:12px}
.project-facts dd{
margin:0}
.contact-layout{
display:grid;
grid-template-columns:1.1fr 1fr;
gap:80px}
.booking-panel{
background:var(--surface);
border:1px solid var(--line);
border-radius:14px;
padding:38px}
.booking-panel h2{
font-size:40px;
margin-bottom:24px}
.booking-panel dl{
margin:24px 0 30px}
.booking-panel dl div{
display:flex;
justify-content:space-between;
border-bottom:1px solid var(--line);
padding:12px 0;
gap:20px}
.booking-panel dt{
color:var(--muted)}
.booking-panel dd{
margin:0}
.booking-panel .button{
width:100%}
.step{
display:grid;
grid-template-columns:36px 1fr;
gap:20px;
margin-bottom:30px}
.step h3{
font-size:22px;
margin-bottom:10px}
.step p{
color:var(--muted);
font-size:16px}
.step .index{
margin-top:4px}
.form-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:24px}
label{
display:block;
font-size:14px;
margin-bottom:9px}
input,select,textarea{
width:100%;
border:1px solid #666;
background:#181817;
color:var(--ink);
padding:13px 15px;
border-radius:6px;
min-height:50px}
textarea{
min-height:150px;
resize:vertical}
input::placeholder,textarea::placeholder{
color:#8d8a84}
.full{
grid-column:1/-1}
.form-note{
font-size:13px;
color:var(--muted);
margin-top:18px}
.form-result{
margin-top:25px;
padding:24px;
border:1px solid var(--accent)}
.form-result h3{
font-size:24px;
margin-bottom:12px}
.form-result pre{
white-space:pre-wrap;
font:inherit;
font-size:15px;
color:var(--muted);
overflow-wrap:anywhere}
.form-result[hidden]{
display:none}
.contact-links{
display:flex;
gap:25px;
flex-wrap:wrap;
margin-top:28px}
.contact-links a{
border-bottom:1px solid var(--accent)}
.notice{
border-left:2px solid var(--accent);
padding:0 0 0 20px;
margin-top:25px;
color:var(--muted);
font-size:14px}
.no-js-note{
padding:12px;
background:var(--surface)}
@media(max-width:1100px){
.site-nav{
gap:24px}
.hero-copy h1{
font-size:6vw}
.hero-introduction{
gap:28px}
.hero-introduction-copy>.lead{
font-size:26px}
.split,.contact-layout{
gap:45px}
.section{
padding-block:75px}
.plan{
padding-inline:22px}
.faq-layout{
gap:40px}
.cta-inner{
gap:30px}
}
@media(max-width:760px){
:root{
--gutter:24px}
.site-header{
min-height:82px;
padding-block:22px}
.wordmark{
font-size:29px}
.menu-toggle{
display:block}
.js .site-nav{
display:none}
.js .site-nav.is-open{
display:flex;
position:fixed;
inset:82px 0 0;
background:var(--bg);
z-index:20;
flex-direction:column;
align-items:stretch;
padding:25px var(--gutter);
gap:10px}
.site-nav.is-open>a:not(.button){
font-family:var(--display);
font-size:30px;
border-bottom:1px solid var(--line);
padding:14px 0}
.site-nav.is-open .button{
margin:20px 0 0}
.site-header:has(.is-open){
position:sticky;
top:0;
z-index:25;
background:var(--bg)}
.home-hero{
padding-top:55px;
padding-bottom:38px}
.hero-copy h1{
font-size:clamp(42px,9vw,66px);
line-height:1.12;
margin-bottom:30px}
.hero-copy h1 br{
display:none}
.eyebrow{
font-size:10px;
letter-spacing:.12em;
margin-bottom:24px}
.hero-copy .actions{
margin-top:0;
gap:10px;
align-items:stretch}
.button{
font-size:11px;
padding:19px 20px;
min-height:56px}
.hero-copy .text-link{
font-size:11px;
padding:19px 20px;
min-height:56px}
.hero-introduction{
grid-template-columns:1fr;
gap:28px;
padding-bottom:60px}
.hero-project{
min-height:0;
height:auto;
aspect-ratio:1.35}
.hero-project img{
height:100%;
object-fit:cover}
.hero-introduction-copy{
padding-top:0}
.hero-introduction-copy>.lead{
font-size:25px;
margin-bottom:26px}
.trust-strip{
grid-template-columns:1fr 1fr}
.trust-strip>div{
padding:20px 15px 20px 0}
.trust-strip>div:nth-child(2){
padding:20px 0 20px 18px}
.trust-strip .serif{
font-size:15px}
.trust-strip blockquote{
padding-top:22px}
.trust-strip blockquote p{
font-size:16px}
.section{
padding-block:60px}
.section-heading{
align-items:start;
flex-direction:column;
gap:24px;
margin-bottom:34px}
.section-heading .lead{
font-size:20px}
.price-aside{
border-left:0;
padding-left:0}
.price-aside strong{
font-size:48px}
.columns-three,.work-grid,.split,.contact-layout,.faq-layout,.extras{
grid-template-columns:1fr;
gap:34px}
.service-block h3{
font-size:31px}
.service-block .index{
margin-bottom:16px}
.project-meta h3{
font-size:28px}
.cta{
padding-block:60px}
.cta-inner{
align-items:start;
flex-direction:column;
gap:28px}
.footer-main{
flex-direction:column;
gap:25px;
margin-bottom:35px}
.footer-nav{
gap:20px}
.footer-bottom{
flex-direction:column;
gap:10px}
.page-hero{
padding-top:45px;
padding-bottom:50px}
.page-hero h1{
font-size:clamp(42px,9vw,66px)}
.page-hero .lead{
font-size:21px}
.numbered-row{
grid-template-columns:36px 1fr;
gap:15px}
.numbered-row p{
grid-column:2}
.numbered-row h3{
font-size:29px}
.numbered-row .index{
margin-bottom:0}
.pricing-grid{
grid-template-columns:1fr}
.plan,.plan:first-child,.plan:last-child{
border-right:0;
border-bottom:1px solid var(--line);
padding:30px 0}
.plan:last-child{
border-bottom:0}
.plan-label{
min-height:0;
margin-bottom:12px}
.plan .price{
font-size:46px}
.plan .button{
width:100%}
.faq-layout h2{
font-size:42px}
summary{
font-size:19px}
.fact-row{
gap:20px;
grid-template-columns:1fr}
.fact-row div,.fact-row div:first-child{
padding:0;
border:0}
.fact-row strong{
font-size:40px}
.about-statement{
font-size:35px}
.project-facts{
grid-template-columns:1fr;
gap:20px}
.project-facts dt{
margin-bottom:5px}
.booking-panel{
padding:25px}
.booking-panel h2{
font-size:34px}
.form-grid{
grid-template-columns:1fr}
.form-grid .full{
grid-column:auto}
.lead{
font-size:21px}
.quote-wide{
text-align:left}
.quote-wide p{
font-size:32px}
}
@media(prefers-reduced-motion:reduce){
html{
scroll-behavior:auto}
*,*::before,*::after{
transition:none!important;
animation:none!important}
}
@media(min-width:761px) and (max-width:980px){
.site-nav{
gap:20px}
.site-nav .button{
margin-left:0}
.hero-introduction-copy>.lead{
font-size:23px}
.trust-strip .serif{
font-size:14px}
.trust-strip blockquote p{
font-size:15px}
.hero-project{
height:420px}
}
@media(max-width:760px){
.site-nav.is-open{
overflow-y:auto}
.footer-nav{
font-size:14px}
.page-hero{
padding-top:50px}
.cta-inner .button{
white-space:normal}
.button.secondary{
border-color:var(--line)}
}
@media(max-width:390px){
.hero-copy .actions{
flex-direction:column}
.hero-copy .text-link{
justify-content:center}
.site-header .wordmark{
font-size:25px}
}
@media(max-width:760px){
html:not(.js) .site-header{
flex-wrap:wrap}
html:not(.js) .menu-toggle{
display:none}
html:not(.js) .site-nav{
display:flex;
flex-wrap:wrap;
gap:20px}
html:not(.js) .site-nav .button{
margin-left:0}
}

/* Expanded site navigation. */
.site-nav { gap: 26px; }
.site-nav .button { margin-left: 12px; }
.footer-nav { max-width: 610px; }
.service-page-links { display: flex; flex-wrap: wrap; gap: 16px 32px; padding-block: 28px; border-bottom: 1px solid var(--line); font-size: 14px; }
.service-page-links a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 6px; }
.service-page-links a:hover { color: var(--accent); }
@media (min-width: 761px) and (max-width: 1100px) {
  .menu-toggle { display: block; }
  .js .site-nav { display: none; }
  .js .site-nav.is-open { display: flex; position: fixed; inset: 82px 0 0; background: var(--bg); z-index: 20; flex-direction: column; align-items: stretch; padding: 25px var(--gutter); gap: 10px; overflow-y: auto; }
  .site-nav.is-open > a:not(.button) { font-size: 30px; border-bottom: 1px solid var(--line); padding: 14px 0; }
  .site-nav.is-open .button { margin: 20px 0 0; }
  html:not(.js) .site-header { flex-wrap: wrap; }
  html:not(.js) .menu-toggle { display: none; }
  html:not(.js) .site-nav { display: flex; flex-wrap: wrap; gap: 20px; }
}
@media (max-width: 1100px) {
  .site-nav.is-open { overflow-y: auto; }
  .site-nav.is-open .button { margin-left: 0; }
}