/* Trogled — follows the look of the live trogled.hr */
:root{
  --deep: #1C5166;
  --sky: #8FC0CF;
  --accent: #0782A2;
  --tab: #F7F7F7;
  --mustard: #DC9D1A;
  --soft: #E3F1F4;
  --gut: clamp(16px, 2.2vw, 30px);
  --gap: clamp(10px, 1.7vw, 24px);
  color-scheme: light;
}
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
html, body{ margin:0; padding:0; }
body{
  background: #fff; color: var(--deep);
  font-family: "Outfit", "Avenir Next", "Avenir", "Segoe UI", sans-serif;
  font-weight: 300; font-size: 17px; line-height: 1.6;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
.wrap{ max-width: 1100px; margin: 0 auto; padding-inline: var(--gut); }

/* header */
.site-header{
  background: #fff; color: var(--deep);
  display:flex; align-items:center; justify-content:space-between;
  padding: 20px var(--gut) 16px; margin: 0 0 0; gap: 16px; flex-wrap: wrap;
  position: relative;
}
.site-header::after{ content:""; position:absolute; left: var(--gut); right: var(--gut); bottom:0; height:1px; background: rgba(28,81,102,.2); }
.site-header.dark{ background: var(--deep); color:#fff; }
.site-header.dark::after{ background: rgba(255,255,255,.35); }
.logo img{ height: 24px; width:auto; }
.nav{ display:flex; gap: 28px; font-size: 14px; letter-spacing: .02em; text-transform: uppercase; font-weight: 400; }
.nav a{ padding-block: 4px; opacity: 1; }
.nav a:hover, .nav a[aria-current="page"]{ opacity: .75; }

/* hero */
.hero{ background: var(--deep); color:#fff; padding: clamp(60px, 14vw, 190px) var(--gut) clamp(70px, 12vw, 170px); }
.hero h1{
  margin:0; font-weight: 200; line-height: .9;
  font-size: clamp(54px, 14.8vw, 200px); letter-spacing: -.04em;
}
.hero h1 .w{ color:#fff; } .hero h1 .b{ color: var(--sky); }
.hero p{ margin: clamp(14px, 2.4vw, 34px) 0 0; font-size: clamp(13px, 3.6vw, 44px); line-height: 1.2; font-weight: 300; letter-spacing: -.005em; }
@media (min-width: 600px){ .hero p{ white-space: nowrap; } }
.proof{ display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px var(--gap); margin: clamp(48px, 7vw, 110px) 0 0; padding: 0; animation: fade 1.2s ease .5s both; }
.proof > div{ border-top: 1px solid rgba(255,255,255,.22); padding-top: 16px; min-width:0; }
.proof dt{ font-weight: 200; font-size: clamp(36px, 4.4vw, 64px); line-height: 1; letter-spacing: -.02em; color:#fff; }
.proof dd{ margin: 10px 0 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--sky); }
.proof a{ color: inherit; transition: color .3s ease; }
.proof a:hover{ color:#fff; }
@media (max-width: 700px){ .proof{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* service strips: flush, full-bleed */
.services{ display:block; line-height:0; }
.services img{ width:100%; height:auto; display:block; }

/* headings */
.big{ margin:0; font-weight: 400; text-transform: uppercase; color: var(--deep); font-size: clamp(44px, 9vw, 112px); line-height: 1; letter-spacing: -.01em; }

/* projects */
.projects{ padding: clamp(50px, 8vw, 100px) var(--gut) 20px; }
.filters{ display:flex; flex-wrap:wrap; align-items:flex-end; gap: 18px clamp(18px, 2.4vw, 36px); margin: clamp(30px, 6vw, 80px) 0 var(--gap); }
.fgroup{ display:flex; flex-direction:column; gap: 8px; min-width:0; }
.flabel{ font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.fpills{ display:flex; flex-wrap:wrap; gap: 8px; }
.pill{
  font: inherit; font-size: 13px; font-weight: 400; letter-spacing: .02em;
  color: var(--deep); background: var(--tab);
  border: 0; border-radius: 0; padding: 8px 14px; cursor: pointer;
}
.pill:hover{ background: #ECECEC; }
.pill[aria-pressed="true"], .pill[aria-pressed="true"]:hover{ background: var(--accent); color:#fff; }
.pill:focus-visible, .btn:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

.grid{ display:flex; flex-direction:column; gap: var(--gap); }
.row{ display:flex; gap: var(--gap); }
.row{ align-items:flex-start; }
.tile{ display:block; flex: var(--ar) 1 0%; min-width:0; }
.tile-media{ display:block; aspect-ratio: var(--ar); overflow:hidden; background:#F1F3F4; }
.tile-media img{ width:100%; height:100%; object-fit: cover; }
.tile-title{ display:block; margin-top: 10px; font-size: 16px; font-weight:400; line-height:1.35; color: var(--deep); }
.tile:hover img{ opacity:.94; }
.row.one .tile{ flex: 0 0 calc(50% - var(--gap) / 2); }
.empty{ color: var(--deep); }
@media (max-width: 640px){
  .row{ flex-direction:column; }
  .tile{ flex: none; width:100%; }
  .row.one .tile{ flex:none; }
}

/* contact */
.contact{ padding: clamp(50px, 8vw, 100px) var(--gut); }
.contact .lead{ margin: 14px 0 28px; font-size: clamp(22px, 3.4vw, 44px); font-weight: 300; }
form.cform{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 760px; background: #E3F1F4; padding: clamp(18px, 3vw, 36px); }
@media (max-width: 640px){ form.cform{ grid-template-columns: 1fr; } }
form.cform .full{ grid-column: 1 / -1; }
form.cform label{ display:grid; gap: 4px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
form.cform input, form.cform textarea{
  font: inherit; font-size: 16px; color: var(--deep); background:#fff; border:0; border-radius:0; padding: 11px 13px; width:100%;
}
form.cform textarea{ min-height: 120px; resize: vertical; }
.btn{
  font: inherit; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; font-weight:400;
  background: var(--accent); color:#fff; border:0; border-radius:0; padding: 12px 30px; cursor:pointer;
}
.btn:hover{ background:#0A7794; }
.form-note{ font-size: 14px; min-height: 1.4em; }

/* footer */
.site-footer{ background: var(--deep); color:#fff; padding: clamp(40px, 4.6vw, 66px) var(--gut) clamp(28px, 3vw, 40px); font-size: clamp(13px, 1.25vw, 18px); font-weight: 300; line-height: 1.4; }
.foot-cols{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
@media (max-width: 700px){ .foot-cols{ grid-template-columns: 1fr; gap: 28px; } }
.foot-col p{ margin: 0; }
.foot-col{ display:flex; flex-direction:column; }
.site-footer a:hover{ opacity:.75; }
.foot-big{ margin-top: clamp(64px, 11vw, 160px); font-weight:300; color: #285D72; font-size: clamp(80px, 16vw, 230px); letter-spacing: -.06em; line-height: .9; margin-left: -.02em; }
.site-footer .copy{ margin: clamp(20px, 2.4vw, 34px) 0 0; }

/* project page */
.proj-head h1{ margin:0; font-weight: 400; font-size: clamp(30px, 5vw, 56px); line-height:1.1; text-transform: uppercase; letter-spacing:-.01em; }
.pnav{ display:flex; justify-content:space-between; gap: 16px; padding-block: 16px 40px; font-size: 14px; }
.pnav a:hover{ opacity:.7; }

/* about */

/* strips: clickable, assemble one by one */
.services .strip{ display:block; line-height:0; transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.services a.strip{ cursor:pointer; }
.services a.strip:hover img{ opacity:.95; }
.services .strip.pre{ opacity:0; }
.services .strip.pre.from-l{ transform: translateX(-60px); }
.services .strip.pre.from-r{ transform: translateX(60px); }
@media (prefers-reduced-motion: reduce){ .services .strip{ transition:none; } }
.status{ margin: 0 0 var(--gap); font-size: 15px; }
.linkbtn{ font: inherit; background:none; border:0; padding:0; color: var(--accent); cursor:pointer; text-decoration: underline; text-underline-offset: 3px; }
.services{ overflow:hidden; }

/* project text */

.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

/* ---- project page ---- */
.proj{ padding: 0 var(--gut); }
.proj-head{ padding-block: clamp(28px,4vw,56px) 0; }
.proj-head .crumb{ font-size: 13px; letter-spacing: .1em; text-transform: uppercase; display:inline-block; margin-bottom: 22px; }
.proj-head .crumb:hover{ opacity:.7; }
.proj-head h1{ margin:0; font-weight: 400; font-size: clamp(34px, 6vw, 84px); line-height:1.04; text-transform: uppercase; letter-spacing:-.01em; color: var(--deep); max-width: 18ch; }
.meta{ display:grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px var(--gap); margin: clamp(26px,3.5vw,48px) 0 0; padding: 20px 0; border-top: 1px solid rgba(28,81,102,.16); border-bottom: 1px solid rgba(28,81,102,.16); font-size: 16px; }
.meta dt{ font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.meta dd{ margin: 4px 0 0; color: var(--deep); }
.proj-text{ display:grid; gap: clamp(24px,4vw,64px); padding-block: clamp(32px,5vw,72px); }
.proj-text.two{ grid-template-columns: 6fr 5fr; align-items:start; }
.quote{ margin: 0; padding: clamp(22px,3vw,36px) clamp(22px,3vw,40px) clamp(22px,3vw,34px); background: #E3F1F4; color: var(--deep); }
.quote::before{ content: "\201C"; display:block; font-size: clamp(64px,8vw,110px); line-height: .6; height: .5em; color: var(--sky); font-weight: 400; margin-bottom: 6px; }
.quote p{ margin: 0 0 18px; font-weight: 300; font-size: clamp(18px, 1.7vw, 23px); line-height: 1.5; }
.quote footer{ font-size: 12px; letter-spacing: .12em; color: var(--accent); text-transform: uppercase; }
.quote footer::before{ content: "\2014\00a0"; }
.desc{ max-width: 68ch; }
.desc p{ margin: 0 0 1.1em; font-size: 17px; line-height: 1.7; }
.gallery{ display:flex; flex-direction:column; gap: var(--gap); padding-bottom: clamp(30px,4vw,60px); }
.grow{ display:flex; gap: var(--gap); align-items:flex-start; }
.shot{ margin:0; flex: var(--ar) 1 0%; min-width:0; aspect-ratio: var(--ar); overflow:hidden; background:#F1F3F4; }
.shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.grow.one .shot{ flex: 0 0 calc(50% - var(--gap)/2); }

.gallery.solo .grow.one .shot{ flex: 0 0 min(100%, 1000px); }
@media (max-width: 800px){
  .proj-text.two{ grid-template-columns: 1fr; }
  .grow{ flex-direction:column; }
  .shot{ flex:none; width:100%; }
  .grow.one .shot{ flex:none; }
}
.meta a.ext{ color: var(--accent); }
.meta a.ext:hover{ opacity:.7; }

/* ---- about ---- */
.about-top{ padding: clamp(28px,4vw,56px) var(--gut) 0; }
.about-top .intro{ max-width: 1100px; margin: clamp(30px,5vw,70px) 0 clamp(30px,5vw,60px); font-size: clamp(18px,1.8vw,24px); line-height: 1.6; font-weight: 300; color: var(--deep); }
.about-top .intro p{ margin: 0 0 .9em; }
.team-photo{ display:block; width:100%; height:auto; }
.member{ padding: clamp(40px,6vw,90px) var(--gut); }
.member.alt{ background: var(--tab); }
.member-in{ display:grid; grid-template-columns: 1fr 2fr; gap: var(--gap) clamp(24px,5vw,80px); }
.member h2{ margin:0; font-weight:400; text-transform:uppercase; font-size: clamp(28px,3.4vw,44px); line-height:1.1; color: var(--deep); }
.member .role{ margin: 12px 0 14px; font-size: clamp(17px,1.5vw,21px); line-height:1.35; color: var(--deep); max-width: 14em; }
.member .mail{ font-size: 15px; text-decoration: underline; color: var(--accent); }
.m-txt{ max-width: 70ch; color: var(--deep); font-size: 16px; line-height: 1.75; }
.m-txt p{ margin: 0 0 1.2em; }
.m-txt a, .about-cta a{ font-weight: 500; }
.m-txt a:hover{ opacity:.7; }
.clients{ background: var(--sky); color:#fff; padding: clamp(40px,6vw,80px) var(--gut); }
.clients-in{ display:grid; grid-template-columns: 1fr 2fr; gap: var(--gap) clamp(24px,5vw,80px); align-items:center; }
.clients p{ margin:0; font-size: clamp(18px,1.8vw,24px); font-weight:300; line-height:1.5; }
.clients img{ width:100%; height:auto; display:block; }
.about-cta{ padding: clamp(50px,8vw,120px) var(--gut); }
.about-cta p{ margin:0; max-width: 1100px; font-size: clamp(18px,1.8vw,24px); line-height:1.6; font-weight:300; color: var(--deep); }
@media (max-width: 800px){ .member-in, .clients-in{ grid-template-columns: 1fr; } }

/* ---- motion (discreet) ---- */
.anim .reveal{ opacity:0; transform: translateY(16px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.anim .reveal.in{ opacity:1; transform:none; }
@keyframes rise{ from{ opacity:0; transform: translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
.hero h1{ animation: rise 1.1s cubic-bezier(.2,.7,.2,1) both; }
.hero p{ animation: rise 1s cubic-bezier(.2,.7,.2,1) .25s both; }
.hero p.sub{ animation-delay: .4s; }
.proj-head .crumb, .about-top h1{ animation: rise .9s cubic-bezier(.2,.7,.2,1) both; }
.tile .tile-media img, .shot img{ transition: transform 1s cubic-bezier(.2,.7,.2,1), opacity .4s ease; }
.tile:hover .tile-media img{ transform: scale(1.035); opacity: 1; }
.tile-title{ transition: color .3s ease; }
.tile:hover .tile-title{ color: var(--accent); }
.tile.pop{ animation: rise .6s cubic-bezier(.2,.7,.2,1) both; }
.pill{ transition: background-color .3s ease, color .3s ease; }
.nav a{ position: relative; }
.nav a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.nav a:hover::after{ transform: scaleX(1); }
.nav a:hover{ opacity: 1; }
.site-footer a, .pnav a, .crumb, .m-txt a, .meta a.ext{ transition: opacity .3s ease; }
.btn{ transition: background-color .3s ease, transform .3s ease; }
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation: none !important; transition: none !important; }
  .anim .reveal{ opacity:1; transform:none; }
}

/* video section */
.video{ background: var(--deep); color:#fff; padding: clamp(50px, 8vw, 110px) var(--gut); }
.video .big{ color:#fff; }
.video-head{ display:grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 16px clamp(24px, 4vw, 60px); margin-bottom: clamp(30px, 5vw, 64px); }
.video-lead{ margin:0; max-width: 40ch; font-size: clamp(16px, 1.5vw, 20px); font-weight: 300; line-height: 1.5; color: rgba(255,255,255,.8); }
.video-more{ font-size: 14px; letter-spacing: .04em; color: var(--sky); white-space: nowrap; transition: color .3s ease; }
.video-more:hover{ color:#fff; }
.vgrid{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) var(--gap); }
.vcard{ display:block; min-width:0; }
.vcard-media{ position:relative; display:block; aspect-ratio: 16 / 9; overflow:hidden; background:#285D72; }
.vcard-media img{ width:100%; height:100%; object-fit: cover; display:block; transition: transform 1s cubic-bezier(.2,.7,.2,1), opacity .4s ease; opacity: .92; }
.vcard:hover .vcard-media img{ transform: scale(1.035); opacity: 1; }
.vcard-title{ display:block; margin-top: 10px; font-size: 15px; color:#fff; }
.vcard-sub{ display:block; margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--sky); }
.play{ position:absolute; left: 14px; bottom: 14px; width: 40px; height: 40px; border-radius: 50%; background: rgba(28,81,102,.75); transition: background-color .3s ease, transform .4s cubic-bezier(.2,.7,.2,1); }
.play::after{ content:""; position:absolute; left: 16px; top: 12px; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #fff; }
.vcard:hover .play{ background: var(--accent); transform: scale(1.08); }
@media (max-width: 1000px){ .vgrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .video-head{ grid-template-columns: 1fr; } }
@media (max-width: 600px){ .vgrid{ grid-template-columns: 1fr; } }
.member .mail{ display:block; }
.member .mail + .mail{ margin-top: 6px; }

/* show more */
.more-wrap{ display:flex; justify-content:center; padding-top: clamp(28px, 4vw, 48px); }
.btn.more{ background: transparent; color: var(--deep); border: 1px solid rgba(28,81,102,.35); padding: 14px 28px; font: inherit; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.btn.more:hover{ background: var(--deep); color:#fff; }
/* video project pages */
.proj-head .orig{ margin: 10px 0 0; font-size: clamp(16px, 1.6vw, 22px); font-weight: 300; color: var(--accent); }
.embed-label{ margin: 0 0 10px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.vembed{ position: relative; aspect-ratio: 16 / 9; max-width: 100%; background: #0f2c38 var(--poster) center / cover no-repeat; margin-bottom: clamp(30px, 4vw, 60px); }
.vembed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.byline{ margin: 0 0 clamp(30px, 4vw, 56px); font-size: 14px; color: var(--accent); }
.byline a{ text-decoration: underline; text-underline-offset: 3px; }

.meta > .wide{ grid-column: span 2; }
.meta dd{ line-height: 1.55; }
@media (max-width: 500px){ .meta > .wide{ grid-column: 1 / -1; } }

/* press list */
.press{ padding-bottom: clamp(36px, 5vw, 72px); }
.press h2{ margin: 0 0 18px; font-size: 12px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.press ul{ list-style:none; margin:0; padding:0; border-top: 1px solid rgba(28,81,102,.16); }
.press li{ display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); column-gap: var(--gap); padding: 16px 0; border-bottom: 1px solid rgba(28,81,102,.16); align-items: baseline; }
.pr-src{ grid-row: span 2; color: var(--deep); font-size: 16px; }
.pr-src span{ display:block; margin-top: 4px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.pr-title{ font-size: clamp(16px, 1.4vw, 19px); color: var(--deep); line-height: 1.4; transition: color .3s ease; }
.pr-title:hover{ color: var(--accent); }
.pr-by{ margin-top: 4px; font-size: 14px; color: var(--accent); }
@media (max-width: 640px){ .press li{ grid-template-columns: 1fr; row-gap: 6px; } .pr-src{ grid-row: auto; } }

/* three per row */
.row.part .tile{ flex: 0 0 calc((100% - 2 * var(--gap)) / 3); }
.tile-title{ font-size: 15px; }
@media (max-width: 700px){ .row.part .tile{ flex: none; width: 100%; } }

.clients-in{ grid-template-columns: 1fr 2.4fr; }
.countries{ list-style:none; margin: 22px 0 0; padding:0; display:flex; flex-wrap:wrap; gap: 6px 14px; font-size: 14px; color: var(--deep); }
.clients-map{ width:100%; height:auto; display:block; }
@media (max-width: 800px){ .clients-in{ grid-template-columns: 1fr; } }

/* project sections */
.psec{ padding-bottom: clamp(30px, 5vw, 70px); }
.psec + .psec{ padding-top: clamp(30px, 5vw, 70px); }
.psec .big{ font-size: clamp(32px, 6vw, 88px); }
.psec .filters{ margin: clamp(24px, 4vw, 48px) 0 var(--gap); }
.psec > .big + .grid{ margin-top: clamp(24px, 4vw, 48px); }

/* video filters on dark */
.video .filters{ margin: 0 0 clamp(24px, 3vw, 40px); }
.video .pill{ background: rgba(255,255,255,.08); color: #fff; }
.video .pill:hover{ background: rgba(255,255,255,.16); }
.video .pill[aria-pressed="true"], .video .pill[aria-pressed="true"]:hover{ background: var(--sky); color: var(--deep); }
.vcard.pop{ animation: rise .6s cubic-bezier(.2,.7,.2,1) both; }
.vcard[hidden]{ display:none; }