/* GERICO V0.18.27 — portfolio page only. Existing site.css stays untouched. */
.ref-hero{position:relative;overflow:hidden;background:#20242a;color:#fff}
.ref-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 0,rgba(214,177,58,.10),transparent 39%);pointer-events:none}
.ref-hero-layout{position:relative;display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(34px,5vw,82px);min-height:565px;align-items:center;padding:62px 0 76px}
.ref-hero-copy{position:relative;z-index:1;padding:28px 0}
.ref-hero .eyebrow{margin-bottom:20px;color:#dec05f;font-size:11px;letter-spacing:.18em}
.ref-hero h1{max-width:560px;margin:0 0 26px;color:#fff;font-size:clamp(46px,4.7vw,69px);font-weight:760;line-height:1.04;letter-spacing:-.055em}
.ref-hero-copy>p{max-width:500px;margin:0 0 30px;color:rgba(255,255,255,.73);font-size:17px;line-height:1.7}
.ref-hero-button,.ref-contact-button{display:inline-flex;align-items:center;justify-content:center;gap:20px;min-height:50px;padding:0 20px;border-radius:10px;background:#d7b43d;color:#20242a;font-size:14px;font-weight:780;transition:transform .22s ease,background .22s ease}
.ref-hero-button:hover,.ref-contact-button:hover{transform:translateY(-2px);background:#e5c653}
.ref-hero-button:focus-visible,.ref-contact-button:focus-visible{outline:3px solid #fff;outline-offset:3px}
.ref-hero-button span,.ref-contact-button span{font-size:18px;line-height:1}
.ref-showcase{position:relative;min-width:0;height:450px}
.ref-showcase-card{position:absolute;display:block;overflow:hidden;border-radius:18px;background:#343b42;box-shadow:0 24px 54px rgba(0,0,0,.20)}
.ref-showcase-main{inset:0 0 0 0}
.ref-showcase-duo .ref-showcase-main{right:54px;bottom:24px}
.ref-showcase-side{right:0;bottom:0;width:36%;height:53%;border:4px solid #20242a;border-radius:20px}
.ref-showcase-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.ref-showcase-main img{object-position:46% 58%}
.ref-showcase-side img{object-position:55% center}
.ref-showcase-card::after{content:"";position:absolute;inset:32% 0 0;background:linear-gradient(180deg,transparent,rgba(9,13,17,.76));pointer-events:none}
.ref-showcase-card:hover img{transform:scale(1.045)}
.ref-showcase-card:focus-visible{outline:3px solid #d7b43d;outline-offset:-7px;z-index:2}
.ref-showcase-caption{position:absolute;z-index:1;left:22px;right:20px;bottom:18px;display:grid;grid-template-columns:1fr auto;gap:3px 8px;color:#fff}
.ref-showcase-caption small{grid-column:1/-1;font-size:10px;font-weight:800;letter-spacing:.11em;color:#efd674}
.ref-showcase-caption strong{font-size:22px;line-height:1.15}
.ref-showcase-caption b{font-size:18px;font-weight:500;line-height:1}
.ref-showcase-side .ref-showcase-caption{left:14px;right:12px;bottom:13px}
.ref-showcase-side .ref-showcase-caption small{font-size:9px}
.ref-showcase-side .ref-showcase-caption strong{font-size:15px}

.ref-collection{scroll-margin-top:92px;padding:76px 0 100px;background:#f7f6f3}
.ref-collection-head{display:flex;align-items:end;justify-content:space-between;gap:24px;padding-bottom:24px;border-bottom:1px solid #dedfdb}
.ref-collection-head .eyebrow{font-size:11px;letter-spacing:.16em}
.ref-collection-head h2{margin:8px 0 0;font-size:clamp(34px,3.6vw,46px);line-height:1.09}
.ref-collection-head>p{margin:0 0 4px;white-space:nowrap;color:#6b7379;font-size:13px}
.ref-collection-head>p strong{margin-left:3px;color:#20242a;font-size:16px}
.ref-filters{display:flex;flex-wrap:wrap;gap:9px;padding:24px 0 32px}
.ref-filters a{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border:1px solid #d6d9d8;border-radius:999px;background:#fff;color:#39434b;font-size:13px;font-weight:680;transition:background .18s ease,border-color .18s ease,color .18s ease}
.ref-filters a:hover{border-color:#9a8030;background:#fffdf5}
.ref-filters a.is-active{border-color:#20242a;background:#20242a;color:#fff}
.ref-filters a:focus-visible{outline:3px solid #b48c22;outline-offset:2px}
.ref-grid{gap:24px}
.ref-grid .reference-card{display:flex;min-width:0;flex-direction:column;overflow:hidden;border:1px solid #e2e4e2;border-radius:17px;background:#fff;box-shadow:0 8px 25px rgba(26,32,37,.035);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.ref-grid .reference-card:hover{transform:translateY(-4px);border-color:#d0c8b2;box-shadow:0 18px 38px rgba(24,31,37,.10)}
.ref-grid .reference-card:focus-within{outline:3px solid #b48c22;outline-offset:3px}
.ref-grid .reference-media{height:270px}
.ref-grid .reference-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.ref-grid .reference-card:hover .reference-media img{transform:scale(1.035)}
.ref-grid .reference-body{display:flex;flex:1;flex-direction:column;padding:21px 22px 23px}
.ref-grid .reference-meta{gap:15px;margin-bottom:12px;color:#737b81;font-size:10px;letter-spacing:.07em}
.ref-grid .reference-meta span:last-child{text-align:right}
.ref-grid .reference-body h3{margin:0 0 12px;font-size:clamp(20px,1.55vw,23px);line-height:1.18;letter-spacing:-.035em}
.ref-grid .reference-body p{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;margin:0 0 17px;color:#606a73;font-size:13px;line-height:1.6}
.ref-grid .reference-body .text-link{margin-top:auto;font-size:13px;color:#55491f}
.ref-grid .card-hit:focus-visible{outline:0}
.ref-idea-panel{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(22px,4vw,68px);align-items:center;min-height:385px;margin:8px 0;padding:28px clamp(26px,4.4vw,64px);border:1px solid #e2dfd5;border-radius:19px;background:linear-gradient(125deg,#eeeae1,#f7f5ef)}
.ref-idea-sketches{position:relative;height:330px;margin:0}
.ref-idea-sketches img{position:absolute;width:61%;height:78%;object-fit:contain;border:1px solid #e2e2e2;border-radius:4px;background:#fff;box-shadow:0 17px 36px rgba(29,31,36,.14)}
.ref-idea-sketch-one{top:12px;left:4%;transform:rotate(-5deg)}
.ref-idea-sketch-two{right:5%;bottom:40px;transform:rotate(6deg)}
.ref-idea-sketches figcaption{position:absolute;right:5%;bottom:3px;color:#616b72;font-size:11px;letter-spacing:.02em}
.ref-idea-copy .eyebrow{font-size:11px;letter-spacing:.14em}
.ref-idea-copy h2{max-width:580px;margin:12px 0 17px;font-size:clamp(32px,3vw,43px);line-height:1.12}
.ref-idea-copy p{max-width:555px;margin:0;color:#505b63;font-size:15px;line-height:1.75}
.ref-empty{padding:45px;border:1px solid #ddd9cd;border-radius:17px;background:#fff}
.ref-empty h3{margin:0 0 8px;font-size:28px}
.ref-empty p{margin:0 0 20px;color:#66717a}

.ref-contact{padding:75px 0 86px;background:#fff}
.ref-contact-inner{display:flex;align-items:center;justify-content:space-between;gap:35px;padding-top:38px;border-top:1px solid #dedfdf}
.ref-contact h2{max-width:740px;margin:9px 0 12px;font-size:clamp(33px,3.4vw,44px);line-height:1.12}
.ref-contact p{margin:0;color:#66717a;font-size:16px;line-height:1.65}
.ref-contact-button{flex-shrink:0;background:#20242a;color:#fff}
.ref-contact-button:hover{background:#30363d}
.ref-contact-button:focus-visible{outline-color:#a47f19}

@media(max-width:1060px){
  .ref-hero-layout{grid-template-columns:1fr;min-height:0;gap:22px;padding:65px 0}
  .ref-hero-copy{padding:0}
  .ref-hero h1{max-width:750px}
  .ref-hero-copy>p{max-width:700px}
  .ref-showcase{height:390px}
  .ref-showcase-duo .ref-showcase-main{right:42px}
}
@media(max-width:760px){
  .ref-collection{padding:60px 0 70px}
  .ref-grid .reference-media{height:235px}
  .ref-idea-panel{grid-template-columns:1fr;padding:26px 28px 35px}
  .ref-idea-sketches{height:285px}
  .ref-idea-sketches img{width:56%;height:80%}
  .ref-contact{padding:58px 0 64px}
  .ref-contact-inner{align-items:flex-start;flex-direction:column;gap:24px}
}
@media(max-width:620px){
  .ref-hero-layout{gap:28px;padding:48px 0 42px}
  .ref-hero h1{margin-bottom:18px;font-size:clamp(42px,10vw,53px)}
  .ref-hero-copy>p{margin-bottom:23px;font-size:15px}
  .ref-showcase{height:278px}
  .ref-showcase-duo .ref-showcase-main{right:0;bottom:0}
  .ref-showcase-side{display:none}
  .ref-showcase-caption{left:17px;bottom:16px}
  .ref-showcase-caption strong{font-size:19px}
  .ref-collection-head{align-items:flex-start;flex-direction:column;gap:8px}
  .ref-collection-head h2{font-size:35px}
  .ref-filters{gap:8px;padding:20px 0 26px}
  .ref-filters a{min-height:40px;padding:0 14px;font-size:12px}
  .ref-grid .reference-media{height:225px}
  .ref-grid .reference-body{padding:19px 18px 21px}
  .ref-grid .reference-body h3{font-size:21px}
  .ref-idea-panel{gap:19px;margin:0;padding:19px 20px 29px}
  .ref-idea-sketches{height:230px}
  .ref-idea-sketches img{height:79%}
  .ref-idea-sketches figcaption{font-size:10px}
  .ref-idea-copy h2{font-size:32px}
  .ref-idea-copy p{font-size:14px}
  .ref-contact h2{font-size:35px}
}
@media(prefers-reduced-motion:reduce){
  .ref-showcase-card img,.ref-grid .reference-media img,.ref-hero-button,.ref-contact-button{transition:none}
}