/* Hypercrive — cream + terracotta editorial style */
*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#f9f7f3;--ink:#1b1b1b;--mut:#6f6d69;--acc:#006aff;--glow:#f2c39c;--line:#e2ded7;--sand:#e8e2db;--dark:#1c1c1c;
--serif:'Playfair Display',Georgia,serif;--sans:'Manrope',system-ui,sans-serif;--mono:'DM Mono',ui-monospace,monospace;
--pad:clamp(20px,9vw,190px);
--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px)}
html{scroll-behavior:smooth;scroll-padding-top:90px;overflow-x:hidden}
body{background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;padding-bottom:var(--sab)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
i{font-style:normal}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.wrap{width:min(1560px,100% - 2*var(--pad));margin-inline:auto;padding-inline:var(--sal) var(--sar)}

/* type */
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.035em;line-height:.98}
h2{font-size:clamp(2.5rem,5.2vw,5.5rem)}
em{font-style:italic;color:var(--acc)}
.mono{font-family:var(--mono);font-size:.78rem;letter-spacing:.05em;color:var(--mut)}
.lab,.meta,label .mono{text-transform:uppercase}
.lab{display:block}
.body{font-size:1.15rem;line-height:1.55;max-width:34rem;margin:2.2rem 0}
.sec{padding-block:clamp(4rem,9vw,9rem)}

/* header */
.nav{position:sticky;top:0;z-index:20;padding-top:var(--sat);background:rgba(249,247,243,.6);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border-bottom:1px solid rgba(27,27,27,.08)}
.nav-in{width:min(1700px,100% - 2*clamp(20px,6vw,130px));display:flex;align-items:center;justify-content:space-between;height:88px}
.brand{display:flex;align-items:center;gap:10px;font-size:1.65rem;letter-spacing:-.05em;line-height:1}
.brand img{width:30px;height:30px;border-radius:7px}
.brand b{font-weight:800}
.brand span{font-weight:400}
.brand sup{font-size:.4em;vertical-align:top;margin-left:2px;letter-spacing:0}
.links{display:flex;align-items:center;gap:2.6rem;font-size:.95rem}
.links a:not(.btn-o):hover{color:var(--acc)}
.btn-o{border:1px solid var(--ink);padding:.95rem 1.3rem;display:flex;gap:1rem;transition:.25s}
.btn-o:hover{background:var(--ink);color:var(--bg)}
.burger{display:none;min-width:44px;min-height:44px;align-items:center;justify-content:center;flex-direction:column;gap:7px}

/* hero */
.hero-band{position:relative;overflow:hidden;isolation:isolate}
.blob{position:absolute;z-index:0;border-radius:50%;filter:blur(90px);pointer-events:none;animation:drift 18s ease-in-out infinite alternate}
.blob-a{width:36rem;height:36rem;background:var(--acc);opacity:.25;top:-15rem;right:-9rem}
.blob-b{width:28rem;height:28rem;background:var(--glow);opacity:.55;left:-11rem;bottom:-13rem;animation-duration:22s}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(-22px,18px)}}
.hero{position:relative;z-index:1;padding-top:clamp(2.5rem,5vw,4.5rem);padding-bottom:clamp(4rem,8vw,7rem);border-bottom:1px solid var(--line)}
.meta{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.meta span{background:rgba(255,255,255,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.7);border-radius:999px;padding:.5rem 1.1rem;box-shadow:0 10px 24px -18px rgba(27,27,27,.4)}
h1{font-size:clamp(4rem,12.4vw,12.5rem);font-weight:700;line-height:.86;letter-spacing:-.05em;margin-top:clamp(2rem,5vw,4.5rem)}
h1 em{font-weight:500}
.hero-row{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:2rem;margin-top:2rem}
.lead{max-width:19rem;font-size:1.2rem;line-height:1.45}
.talk{position:absolute;left:33%;bottom:0;width:clamp(110px,10.5vw,160px);aspect-ratio:1;border-radius:50%;background:var(--acc);color:#fff;display:grid;place-content:center;justify-items:center;gap:.4rem;border:1px solid rgba(255,255,255,.35);box-shadow:0 22px 40px -14px rgba(200,90,49,.5),inset 0 1px 0 rgba(255,255,255,.4);transition:transform .3s}
.talk:hover{transform:scale(1.07)}
.hero-img-frame{padding:14px;border-radius:28px;background:rgba(255,255,255,.4);backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);border:1px solid rgba(255,255,255,.65);box-shadow:0 30px 70px -30px rgba(27,27,27,.4),inset 0 1px 0 rgba(255,255,255,.5)}
.ph{--g1:#dedad3;--g2:#a8a49c;background:var(--img) center/cover no-repeat,linear-gradient(135deg,var(--g1),var(--g2))}
.hero-img{aspect-ratio:16/9;border-radius:18px}

/* about */
.about{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:2rem}
.ul-link{display:inline-flex;gap:.9rem;font-size:.95rem}
.ul-link i,.svc i,.send i,.btn-o i{transition:transform .3s}
.ul-link:hover i{transform:translateX(5px)}

/* services */
.dark{background:var(--dark);color:#f4f1ec;padding-block:clamp(4rem,8vw,8rem)}
.dark .mono{color:#a6a29b}
.head2{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin:clamp(2rem,6vw,6rem) 0 clamp(2rem,4vw,4rem)}
.side{max-width:27rem;color:#b9b5ad;font-size:1.15rem;line-height:1.5}
.list{border-top:1px solid #3a3836}
.svc{display:grid;grid-template-columns:7rem 1.15fr 1fr 2rem;align-items:center;gap:1.5rem;padding:1.6rem 0;border-bottom:1px solid #3a3836;transition:padding .35s}
.svc h3{font-family:var(--sans);font-weight:500;font-size:clamp(1.4rem,2vw,1.85rem);letter-spacing:-.02em}
.svc p{color:#a6a29b;font-size:.95rem;line-height:1.45;max-width:26rem}
.svc i{justify-self:end}
.svc:hover{padding-left:1rem}
.svc:hover h3,.svc:hover i{color:var(--acc)}
.svc:hover i{transform:translate(4px,-4px)}

/* work */
.head3{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin:2rem 0 3rem}
.head3 .mono{text-transform:none;font-size:.85rem}
.rail{display:flex;align-items:flex-start;gap:1.5rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;user-select:none}
.rail::-webkit-scrollbar{display:none}
.card{position:relative;flex:0 0 clamp(280px,28vw,420px);height:clamp(340px,33vw,487px);scroll-snap-align:start;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:1.9rem;overflow:hidden}
.card.tall{--g1:#c9c6c0;--g2:#55534f;flex-basis:clamp(300px,40vw,588px);height:clamp(400px,46vw,660px)}
.card::before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(0,0,0,.6))}
.card>*{position:relative}
.card h3{font-size:2.1rem;letter-spacing:-.02em}
.card p{color:#fff;margin-top:.5rem;font-size:.78rem}
.card i{position:absolute;right:1.5rem;bottom:1.5rem;opacity:.6}
.soon{background:var(--sand);color:var(--ink);align-items:center;justify-content:center;text-align:center;gap:.4rem}
.soon::before{display:none}
.soon b{font-weight:300;font-size:2.6rem;line-height:1;color:#fff}
.soon p{color:var(--acc)}

/* testimonials */
.t-grid{display:grid;grid-template-columns:1fr 2fr 1fr;gap:2rem;margin-top:3rem}
.t-grid figure{grid-column:2}
.qm{display:block;font:400 5.5rem/.7 var(--serif);height:2.6rem;color:var(--acc)}
blockquote{font-family:var(--serif);font-size:clamp(2rem,3.4vw,4rem);line-height:1.04;letter-spacing:-.03em;margin:1.5rem 0 3rem}
figcaption{display:grid;gap:.3rem}
figcaption b{color:var(--ink);font-weight:500}
.impact{grid-column:3;grid-row:1;border-left:1px solid var(--line);padding-left:2rem}
.impact strong{display:block;font:400 clamp(1.7rem,2.4vw,2.4rem)/1.1 var(--serif);color:var(--acc);letter-spacing:-.02em;margin:.7rem 0 1rem}
.arrows{display:flex;gap:.5rem;margin-top:3.5rem}
.arrows button{width:52px;height:52px;border:1px solid var(--ink);font-size:1.1rem;transition:.2s}
.arrows button:hover{background:var(--ink);color:var(--bg)}
.f{transition:opacity .18s}

/* why */
.why{background:var(--acc);color:#faf7f2;padding-block:clamp(4rem,8vw,8rem)}
.why .lab{color:#f6cdb9}
.why-grid{display:grid;grid-template-columns:4fr 4.6fr 1.6fr;gap:2rem;align-items:end;margin-top:5rem}
.why-grid>div{grid-column:2}
.why h2{font-size:clamp(3rem,7.4vw,7.5rem)}
.why em{color:var(--ink)}
.why .body{color:#fff}
.checks{list-style:none;display:grid;gap:.9rem;color:#fff;font-size:.82rem;margin-bottom:2.4rem}
.checks li{display:flex;align-items:center;gap:.8rem}
.checks li::before{content:"";width:6px;height:11px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(42deg) translateY(-2px)}

/* contact */
.c-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,8vw,10rem);margin-top:3rem}
.c-grid h2{font-size:clamp(4.5rem,9.6vw,11rem);line-height:.9;letter-spacing:-.045em;font-weight:500}
.c-foot{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:1.5rem;margin-top:4rem}
.c-foot .mono{text-transform:none;line-height:1.5;}
.c-foot .mono:hover{
color: #006aff;
}
.mail{display:flex;align-items:center;gap:.7rem;color:var(--ink)}
form{display:grid;gap:1.6rem;align-content:start}
label{display:grid;gap:.4rem}
label .mono{font-size:.72rem}
input,select,textarea{width:100%;background:none;border:0;border-bottom:1px solid #8b8883;border-radius:0;outline:0;padding:.7rem 0 1rem;font-size:1.15rem;transition:border-color .2s}
input::placeholder,textarea::placeholder{color:#a5a29c}
input:focus,select:focus,textarea:focus{border-color:var(--acc)}
input.bad{border-color:#b3261e}
select{appearance:none;cursor:pointer;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%231b1b1b' stroke-width='2'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E") no-repeat right .4rem center}
textarea{resize:vertical;min-height:5rem}
.send{display:flex;justify-content:space-between;background:var(--dark);color:#fff;padding:1.7rem 1.5rem;font-size:1.15rem;margin-top:.8rem;transition:background .25s}
.send:hover{background:var(--acc)}
.send:hover i{transform:translate(4px,-4px)}
#status{text-transform:none;min-height:1.5em;color:var(--ink)}

/* footer */
.foot{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;padding-block:2.5rem;border-top:1px solid var(--line)}
.foot p{text-transform:none;line-height:1.5}

.socials{
  display:flex;
  justify-content:center;
  gap:22px;
  font-size:24px;
  margin-bottom:12px;
}

.socials a{
  color:#000;
  transition:0.3s;
}
.socials a:hover{
  transform:translateY(-4px);
}


/* responsive: laptops → large tablets */
@media(max-width:1180px){
  .hero-img-frame{padding:10px;border-radius:22px}
  .blob-a{width:28rem;height:28rem}
  .blob-b{width:22rem;height:22rem}
}

/* tablets: keep two columns, but re-flow the wide 3-track grids so nothing gets squeezed */
@media(max-width:1100px){
  .why-grid{grid-template-columns:1fr 1fr;row-gap:2.5rem}
  .why-grid>div{grid-column:1;grid-row:1}
  .checks{grid-column:2;grid-row:1;align-self:end}
  .t-grid{grid-template-columns:1fr 1fr;row-gap:2rem}
  .t-grid>span{grid-column:1;grid-row:1}
  .t-grid figure{grid-column:1/-1;grid-row:2}
  .impact{grid-column:1/-1;grid-row:3;border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:1.5rem;margin-top:0}
}

/* phones and small tablets: stacked layout, glass mobile nav */
@media(max-width:900px){
  .burger{display:flex}
  .burger span{display:block;width:22px;height:1.5px;background:var(--ink)}
  .links{position:fixed;top:calc(88px + var(--sat));left:0;right:0;flex-direction:column;align-items:stretch;gap:.25rem;padding:1.5rem var(--pad) calc(2rem + var(--sab));background:rgba(249,247,243,.85);backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);border-bottom:1px solid var(--line);transform:translateY(-130%);visibility:hidden;transition:transform .3s,visibility .3s}
  .links.open{transform:none;visibility:visible}
  .links a{padding:.6rem 0}
  .hero-row,.about,.c-grid,.t-grid,.why-grid{grid-template-columns:1fr}
  .talk{position:relative;left:auto;justify-self:start}
  .why-grid>div,.checks,.t-grid>span,.t-grid figure,.impact{grid-column:auto;grid-row:auto}
  .impact{border:0;padding:0;margin-top:2rem}
  .hero-img-frame{padding:8px;border-radius:18px}
  .blob-a{width:20rem;height:20rem;top:-9rem;right:-8rem}
  .blob-b{width:16rem;height:16rem}
  .svc{grid-template-columns:2.5rem 1fr 1.5rem}
  .svc p{grid-column:2;grid-row:2}
  .svc i{grid-row:1;grid-column:3}
  .head3{align-items:flex-start;flex-direction:column}
}

/* small phones: tighten the display type so headlines never outrun the viewport */
@media(max-width:480px){
  h1{font-size:clamp(2.8rem,16vw,4rem);margin-top:1.75rem}
  .why h2{font-size:clamp(2.4rem,13vw,3rem)}
  .c-grid h2{font-size:clamp(3rem,17vw,4.5rem)}
  blockquote{font-size:clamp(1.5rem,8vw,2rem);margin:1.1rem 0 2rem}
  .qm{font-size:3.6rem;height:1.9rem}
  .card h3{font-size:1.5rem}
  .impact strong{font-size:1.5rem}
  .talk{width:100px;font-size:.9rem}
  .send{font-size:1rem;padding:1.4rem 1.2rem}
  .about,.sec{padding-block:3.5rem}
}

/* short / landscape phones: recover vertical room */
@media(max-width:900px) and (max-height:520px){
  .hero{padding-top:1.75rem;padding-bottom:2rem}
  h1{font-size:clamp(2.4rem,9vw,3.5rem);margin-top:1.25rem}
  .sec,.dark,.why{padding-block:3rem}
}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
  .blob{animation:none}
}