/* Graphite art direction, adapted from Rodrigo's supplied reference. */
:root{color:#f2f2f2;background:#080808;--surface:#141414;--muted:#b8b8b8;--line:#ffffff26}
body{background:#080808}
:focus-visible{outline-color:#dedede}
.site-header{background:#090909;border-color:var(--line)}
.header-inner{height:78px}
.shell{max-width:1480px}
.brand-mark,.brand-dot,.header-contact span{color:#bcbcbc}
.desktop-nav a{color:#e0e0e0}
.header-contact{border-color:#777;border-radius:10px;background:linear-gradient(145deg,#292929,#141414);padding-inline:24px;min-height:48px}
.hero{width:100%;max-width:none;margin:0;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(40px,12vw,240px);padding:64px max(32px,calc((100vw - 1480px)/2)) 54px;min-height:calc(100svh - 78px);background:#080808 url('assets/graphite-waves.svg') center/cover no-repeat;isolation:isolate}
.hero-copy{padding:24px 0 0;max-width:760px}
.eyebrow{color:#ccc;font-weight:500;letter-spacing:.22em}
.eyebrow-line{background:#a8a8a8;width:44px}
.hero-copy h1{font-size:clamp(3.5rem,6.4vw,6.5rem);line-height:1.02;letter-spacing:-.055em;max-width:none;margin:32px 0}
.hero-copy h1 span{display:block}
.hero-copy h1 em{color:#8d8d8d;font-style:normal}
.hero-lead{color:#d1d1d1;font-size:1.08rem;line-height:1.65;max-width:630px;margin-bottom:24px}
.button{border-radius:7px}
.button-primary{background:linear-gradient(120deg,#ccc,#969696);color:#0a0a0a;border:1px solid #bcbcbc}
.button-primary:hover{background:#e0e0e0}
.button-outline{background:#08080855;color:#eee;border-color:#767676}
.button-outline:hover{background:#282828}
.hero-actions{gap:20px}
.hero-caption{margin-top:25px;color:#9a9a9a}
.hero-aside{display:flex;padding:36px 0 0;justify-content:center}
.aside-block{border-color:var(--line);padding-bottom:23px;margin-bottom:20px}
.aside-icon{display:grid;place-items:center;background:linear-gradient(145deg,#303030,#171717);width:50px;height:50px;border-radius:50%;color:#ddd;margin-bottom:12px}
.aside-icon svg{width:27px;height:27px}
.aside-kicker{font-size:.85rem;margin-bottom:10px;color:#f2f2f2}
.aside-block p:not(.aside-kicker){color:#ccc;font-size:.95rem;line-height:1.6}
.aside-block a{color:#e0e0e0;border-color:#bababa;font-size:.78rem}
.trust-strip{background:#101010;border-color:var(--line)}
.trust-inner{color:#bcbcbc}.strip-separator{background:#505050}
.services-section,.process-section,.contact-section{background:#0c0c0c;color:#f2f2f2}
.about-section,.portfolio-section{background:#111}
.section-index,.service-number,.service-foot strong,.process-grid span,.guarantee-number{color:#c7c7c7}
.section-heading>p:last-child,.services-section .section-heading>p:last-child,.service-card p,.service-note,.service-foot span,.process-grid p,.about-text p,.contact-grid p:not(.section-index),.contact-address{color:#b8b8b8}
.service-card{background:linear-gradient(135deg,#1d1d1d,#121212);border-color:#ffffff24;border-radius:16px}
.service-card:hover{border-color:#8a8a8a}
.process-grid>div{border-color:#6d6d6d}
.guarantee-section{background:linear-gradient(120deg,#222,#111);border-block:1px solid var(--line)}
.guarantee-inner p:last-child{color:#c6c6c6}
.contact-actions .button-outline{color:#eee;border-color:#777;background:#151515}
.contact-actions .button-outline:hover{background:#292929}
.site-footer{background:#080808;color:#9c9c9c;border-top:1px solid var(--line)}
.footer-inner a,.text-link{color:#dedede;border-color:#888}
.work-card,.client-site-link{background:linear-gradient(140deg,#212121,#151515);border-color:#ffffff29}
.work-card:hover,.client-site-link:hover{background:#252525;border-color:#888}
.work-card{color:#eee}
.portfolio-heading em,.work-open>span,.portfolio-hint>span,.work-status.personal{color:#c8c8c8}
.work-status,.work-status.personal{background:#bcbcbc}
.work-label,.work-tags>span,.work-description,.portfolio-hint{color:#bbb}
.client-site-link{color:#e0e0e0}
.work-preview,.work-preview-portfolio,.work-preview-tourism{background:radial-gradient(ellipse at 50% 35%,#444,#171717 80%)}
.preview-note{background:#111d;color:#e8e8e8;border-color:#ffffff30}
.preview-note>span{color:#bbb}.browser-bar{background:#292929;color:#ccc}
.viewer-panel,.project-scroll{background:#121212}
.viewer-toolbar,.viewer-navigation{background:#1b1b1b}
.viewer-kicker,.viewer-help,.viewer-counter,.detail-intro>p:not(.work-label),.detail-highlights p,.detail-story p:not(.section-index),.detail-end>span{color:#bcbcbc}
.detail-visual{background:radial-gradient(ellipse at 30% 30%,#333,#171717 75%)}
.detail-highlights>div>span{color:#ddd}
.viewer-dots button[aria-current=true]::after{background:#ccc}
.mobile-nav nav{background:#171717;border-color:#666}
@media(max-width:1120px){.hero{grid-template-columns:minmax(0,1fr) 270px;gap:48px}.hero-copy{padding-top:10px}.hero-aside{display:flex;padding-top:20px}.hero-copy h1{font-size:clamp(3.4rem,6.8vw,5.8rem)}}
@media(max-width:800px){.hero{display:flex;flex-direction:column;gap:40px;padding:45px 24px;min-height:0}.hero-copy{padding:0;max-width:650px}.hero-copy h1{font-size:clamp(3.2rem,11vw,5.5rem)}.hero-aside{padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.aside-block{margin:0;padding-bottom:0;border:0}.aside-kicker{font-size:.7rem}.aside-block p:not(.aside-kicker){font-size:.78rem}.aside-block a{font-size:.65rem}.hero-lead{font-size:1rem}}
@media(max-width:540px){.hero{padding-inline:20px}.hero-aside{grid-template-columns:1fr;gap:24px}.aside-block{border-bottom:1px solid var(--line);padding-bottom:20px}.aside-last{border:0}.hero-actions{gap:12px}.hero-actions .button{width:100%}.hero-copy h1{font-size:clamp(3rem,13vw,4.4rem)}.eyebrow{font-size:.6rem;letter-spacing:.15em}.hero-lead{line-height:1.7}.aside-block p:not(.aside-kicker){font-size:.9rem}.aside-kicker{font-size:.8rem}.aside-block a{font-size:.75rem}}

/* Restore Rodrigo's portrait within the graphite hero. */
.hero{grid-template-columns:minmax(0,1fr) minmax(230px,.68fr) 260px;gap:32px}
.hero-copy h1{font-size:clamp(3.4rem,5.4vw,5.7rem)}
.hero-portrait{display:block;min-height:640px;align-self:stretch;overflow:hidden;position:relative}
.hero-portrait img{transform:none;object-fit:contain;object-position:center 60%;filter:drop-shadow(0 18px 28px #0008);mask-image:linear-gradient(#000 70%,transparent 98%);-webkit-mask-image:linear-gradient(#000 70%,transparent 98%)}
.portrait-label{bottom:45px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#141414df;color:#ddd;border-color:#ffffff26;font-size:.65rem}
.status-dot{background:#ccc}
@media(max-width:1200px) and (min-width:801px){.hero{grid-template-columns:minmax(0,1fr) minmax(240px,.8fr);gap:28px}.hero-aside{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;padding-top:0}.aside-block{border:0;margin:0;padding-bottom:0}.hero-portrait{min-height:580px}.hero-copy h1{font-size:clamp(3.7rem,6.7vw,5.4rem)}}
@media(max-width:800px){.hero{display:flex;gap:30px}.hero-copy h1{font-size:clamp(3.2rem,11vw,5.5rem)}.hero-portrait{width:100%;height:420px;min-height:420px;margin:0;align-self:center}.hero-portrait img{object-position:center center;max-width:380px;left:50%;transform:translateX(-50%)}.portrait-label{bottom:18px}}


/* Keep the enlarged portrait inside its own column: no overlap with copy. */
.hero-copy,.hero-aside{min-width:0}
@media(min-width:1201px){
.hero{grid-template-columns:minmax(0,.95fr) minmax(280px,.82fr) 260px;gap:18px}
.hero-portrait{overflow:hidden;margin:0;min-width:0}
.hero-portrait img{transform:scale(1.05);transform-origin:center 60%;object-position:center 55%}
.hero-aside{position:relative;z-index:2}
}
@media(min-width:801px) and (max-width:1200px){
.hero{gap:18px;grid-template-columns:minmax(0,1fr) minmax(260px,.95fr)}
.hero-portrait{overflow:hidden;margin:0;min-width:0}
.hero-portrait img{transform:scale(1.03);transform-origin:center 60%}
}

/* Blend the cutout's straight shoulder edges into the graphite background. */
.hero-portrait img{
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 9%,#000 91%,transparent 100%),linear-gradient(to bottom,#000 0%,#000 72%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0%,#000 9%,#000 91%,transparent 100%),linear-gradient(to bottom,#000 0%,#000 72%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}


/* The atmosphere belongs to the full hero, avoiding a rectangular photo backdrop. */
.hero{position:relative}
.hero::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 28% 48% at 59% 65%,rgba(58,59,61,.23) 0%,rgba(37,38,40,.14) 38%,rgba(19,20,22,.06) 65%,transparent 100%);
}
.hero-portrait{isolation:isolate;background:transparent;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0%,#000 7%,#000 93%,transparent 100%);
}
.hero-portrait::before{content:none}
.hero-portrait::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(8,8,8,.48) 0%,rgba(16,16,16,.1) 16%,transparent 35%);
}
.hero-portrait img{z-index:0}
.portrait-label{z-index:2}
@media(max-width:800px){.hero::before{background:radial-gradient(ellipse 65% 22% at 50% 57%,rgba(58,59,61,.2),transparent 100%)}}

/* Carry the graphite ribbons through every section, with soft shared edges. */
.services-section,.portfolio-section,.process-section,.about-section,.guarantee-section,.contact-section{
  position:relative;isolation:isolate;background:#080808;color:#f2f2f2;
}
.services-section::before,.portfolio-section::before,.process-section::before,.about-section::before,.guarantee-section::before,.contact-section::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(110deg,rgba(8,8,8,.1),rgba(8,8,8,.2)),url('assets/graphite-waves.svg');
  background-size:cover;background-repeat:no-repeat;background-position:center;
  opacity:.9;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 14%,#000 82%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 14%,#000 82%,transparent 100%);
}
.services-section::before{transform:scaleX(-1);background-position:35% 45%}
.portfolio-section::before{background-position:55% 60%}
.process-section::before{transform:scaleX(-1);background-position:50% 72%}
.about-section::before{background-position:60% 30%}
.guarantee-section::before{transform:scaleX(-1);background-position:30% 58%;opacity:.75}
.contact-section::before{background-position:55% 78%}
.guarantee-section{border-color:#ffffff12}
.service-card,.portfolio-stack .work-card,.portfolio-stack .client-site-link{
  background:linear-gradient(135deg,rgba(35,35,35,.93),rgba(18,18,18,.94));
  box-shadow:0 12px 34px #00000024;
}
.process-grid>div{background:linear-gradient(145deg,rgba(32,32,32,.64),rgba(12,12,12,.3));padding:24px;border-radius:0 0 12px 12px}
@media(max-width:620px){
.services-section::before,.portfolio-section::before,.process-section::before,.about-section::before,.guarantee-section::before,.contact-section::before{background-size:auto 100%;opacity:.75}
.process-grid>div{padding:20px}
}