/* Whitcombe & Rowe LLP — fictional law firm (showcase) */
:root{--navy:#0d1624;--navy-2:#14202f;--paper:#f4f1ea;--paper-2:#e9e4d9;--ox:#7a2b25;--ox-2:#9b3a31;--ink:#121212;--mid:#5b6270;--ln:rgba(13,22,36,.14);--lnd:rgba(244,241,234,.14);
--disp:'Libre Caslon Display','Libre Caslon Text',Georgia,serif;--text:'Libre Caslon Text',Georgia,serif;--sans:'Manrope',system-ui,sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace;
--pad:clamp(20px,4vw,64px);--e:cubic-bezier(.2,.8,.2,1);--veil:#0d1624;--cursor-bg:#7a2b25;--cursor-fg:#f4f1ea}
body{background:var(--paper);color:var(--navy);font-family:var(--sans);font-size:clamp(15px,1.02vw,17px);line-height:1.65}
::selection{background:var(--ox);color:var(--paper)}
.w{max-width:1520px;margin:0 auto;padding:0 var(--pad)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mid)}
.navy .mono{color:#8d96a6}
.t1{font-family:var(--disp);font-weight:400;font-size:clamp(52px,8.4vw,150px);line-height:.95;letter-spacing:-.025em}
.t2{font-family:var(--disp);font-weight:400;font-size:clamp(38px,5vw,86px);line-height:1;letter-spacing:-.02em}
.t3{font-family:var(--disp);font-weight:400;font-size:clamp(24px,2.2vw,36px);line-height:1.15}
.t1 i,.t2 i,.t3 i{font-family:var(--text);font-style:italic;color:var(--ox)}
.navy .t1 i,.navy .t2 i,.whero .t1 i,.wphead .t1 i{color:#d39b8e}
.sec{padding:clamp(96px,11vw,180px) 0}
.navy{background:var(--navy);color:var(--paper)}
.paper2{background:var(--paper-2)}
/* header */
.wh{position:fixed;inset:0 0 auto;z-index:100;color:var(--paper);transition:transform .6s var(--e),background .4s,color .4s}
.wh.is-hidden{transform:translateY(-100%)}
.wh.is-scrolled{background:rgba(13,22,36,.9);backdrop-filter:blur(12px)}
.wh .w{display:flex;align-items:center;justify-content:space-between;height:88px}
.wmark{display:flex;align-items:center;gap:14px;line-height:1}
.wmark .seal{width:38px;height:38px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;font-family:var(--text);font-style:italic;font-size:15px}
.wmark b{display:block;font-family:var(--disp);font-weight:400;font-size:22px;letter-spacing:.01em}
.wmark small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;opacity:.7;margin-top:4px}
.wh nav{display:flex;gap:36px;font-size:14px;font-weight:500;align-items:center}
.wh nav a{opacity:.82;transition:opacity .3s}.wh nav a:hover,.wh nav a[aria-current=page]{opacity:1}
.wh nav a[aria-current=page]{text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:1px}
.wh .wbtn{opacity:1!important;height:44px;padding:0 20px;border:1px solid var(--lnd);display:inline-flex;align-items:center;gap:10px}
.wh .burger{display:none;background:none;border:1px solid var(--lnd);color:inherit;height:44px;padding:0 18px;font:500 13px var(--sans);cursor:pointer}
.wmenu{position:fixed;inset:0;z-index:90;background:var(--navy);color:var(--paper);padding:120px var(--pad) 40px;display:flex;flex-direction:column;justify-content:flex-end;clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .8s cubic-bezier(.77,0,.18,1),visibility 0s .8s}
.menu-open .wmenu{clip-path:inset(0);visibility:visible;transition-delay:0s}
.wmenu a{font-family:var(--disp);font-size:clamp(44px,12vw,72px);line-height:1.15;border-bottom:1px solid var(--lnd)}
@media (max-width:900px){.wh nav{display:none}.wh .burger{display:block}}
/* hero */
.whero{position:relative;min-height:100svh;display:grid;grid-template-columns:1.15fr 1fr;background:var(--navy);color:var(--paper);overflow:hidden}
.whero__l{display:flex;flex-direction:column;justify-content:flex-end;padding:160px var(--pad) 64px}
.whero__l p.lead{max-width:44ch;color:#c7cbd3;margin:36px 0 44px;font-size:clamp(16px,1.2vw,19px)}
.whero__r{position:relative}
.whero__r .media{position:absolute;inset:0}
.whero__r .media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--navy),rgba(13,22,36,0) 30%),linear-gradient(0deg,rgba(13,22,36,.5),transparent 40%),linear-gradient(180deg,rgba(13,22,36,.7),transparent 22%)}
.whero__r img{filter:grayscale(.35) contrast(1.05)}
.wbtns{display:flex;gap:14px;flex-wrap:wrap}
.wb{display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 28px;font-weight:600;font-size:14.5px;position:relative;overflow:hidden;isolation:isolate;transition:color .5s var(--e)}
.wb::before{content:"";position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:right;transition:transform .6s var(--e)}
.wb:hover::before{transform:scaleX(1);transform-origin:left}
.wb--ox{background:var(--ox);color:var(--paper)}.wb--ox::before{background:var(--paper)}.wb--ox:hover{color:var(--navy)}
.wb--line{border:1px solid var(--lnd);color:var(--paper)}.wb--line::before{background:var(--paper)}.wb--line:hover{color:var(--navy)}
.wb--navy{background:var(--navy);color:var(--paper)}.wb--navy::before{background:var(--ox)}
.wb svg{width:16px;height:16px;transition:transform .5s var(--e)}.wb:hover svg{transform:translateX(4px)}
.offices{display:flex;gap:28px;margin-top:64px;padding-top:24px;border-top:1px solid var(--lnd);flex-wrap:wrap}
.offices span{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:#8d96a6}
.offices span b{color:var(--paper);font-weight:400;margin-right:8px}
@media (max-width:900px){.whero{grid-template-columns:1fr}.whero__r{height:46vh;order:-1}.whero__r .media::after{background:linear-gradient(0deg,var(--navy),rgba(13,22,36,0) 60%),linear-gradient(180deg,rgba(13,22,36,.75),transparent 35%)}.whero__l{padding-top:24px}}
/* statement */
.wstate{display:grid;grid-template-columns:1fr 2.4fr;gap:40px}
.wstate p.big{font-family:var(--disp);font-size:clamp(28px,3.2vw,54px);line-height:1.15;letter-spacing:-.01em}
.figs{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:80px;border-top:1px solid var(--ln)}
.figs div{padding-top:24px}
.figs b{display:block;font-family:var(--disp);font-weight:400;font-size:clamp(44px,4.6vw,78px);line-height:1}
.figs>div>span{font-size:14px;color:var(--mid)}
@media (max-width:900px){.wstate{grid-template-columns:1fr}.figs{grid-template-columns:1fr 1fr}}
/* practice list */
.plist{border-top:1px solid var(--ln);position:relative}
.prow{display:grid;grid-template-columns:90px 1fr 1fr 60px;gap:24px;align-items:center;padding:34px 0;border-bottom:1px solid var(--ln);position:relative;transition:color .4s}
.prow::before{content:"";position:absolute;inset:0;background:var(--navy);transform:scaleY(0);transform-origin:bottom;transition:transform .6s var(--e);z-index:-1}
.plist{isolation:isolate}
.prow:hover{color:var(--paper)}.prow:hover::before{transform:scaleY(1);transform-origin:top}
.prow:hover .mono,.prow:hover p{color:#aab2c0}
.prow h3{font-family:var(--disp);font-weight:400;font-size:clamp(30px,3.4vw,56px);line-height:1;transition:transform .6s var(--e)}
.prow:hover h3{transform:translateX(16px)}
.prow p{color:var(--mid);font-size:15px;max-width:44ch}
.prow .arr{justify-self:end;width:44px;height:44px;border-radius:50%;border:1px solid currentColor;display:grid;place-items:center;opacity:.5;transition:all .5s var(--e)}
.prow:hover .arr{opacity:1;transform:rotate(-45deg);background:var(--ox);border-color:var(--ox)}
.hover-img{position:fixed;left:0;top:0;width:300px;aspect-ratio:4/5;pointer-events:none;z-index:50;overflow:hidden;opacity:0;transform:translate(-50%,-50%) scale(.85);transition:opacity .35s,transform .5s var(--e)}
.hover-img.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.hover-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(.3)}
@media (max-width:900px){.prow{grid-template-columns:44px 1fr;padding:26px 0}.prow p{grid-column:2}.prow .arr{display:none}}
/* split image */
.wsplit{display:grid;grid-template-columns:1fr 1fr;min-height:90vh}
.wsplit .media{min-height:60vh}
.wsplit .txt{padding:clamp(64px,8vw,140px) var(--pad);display:flex;flex-direction:column;justify-content:center}
.wsplit .txt p{color:#c7cbd3;max-width:46ch;margin-top:28px}
.wsplit ul{margin-top:40px;border-top:1px solid var(--lnd)}
.wsplit li{display:flex;gap:20px;padding:18px 0;border-bottom:1px solid var(--lnd)}
.wsplit li span{font-family:var(--mono);font-size:12px;color:#d39b8e;padding-top:4px}
@media (max-width:900px){.wsplit{grid-template-columns:1fr}}
/* people */
.ppl{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,32px)}
.person .media{aspect-ratio:4/5;background:var(--paper-2)}
.person .media img{filter:grayscale(1) contrast(1.05);transition:filter .8s,transform 1.4s var(--e)}
.person:hover .media img{filter:grayscale(0);transform:scale(1.04)}
.person h3{font-family:var(--disp);font-weight:400;font-size:30px;margin-top:20px}
.person p{color:var(--mid);font-size:14px}
@media (max-width:900px){.ppl{grid-template-columns:1fr}.person .media{aspect-ratio:1/1}}
/* testimonial */
.wq{display:grid;grid-template-columns:1fr 2.4fr;gap:40px}
.wq blockquote{font-family:var(--text);font-style:italic;font-size:clamp(28px,3vw,50px);line-height:1.2}
.wq cite{display:block;margin-top:32px;font-style:normal}
@media (max-width:900px){.wq{grid-template-columns:1fr}}
/* insights */
.ins{border-top:1px solid var(--ln)}
.irow{display:grid;grid-template-columns:160px 1fr 200px;gap:24px;padding:30px 0;border-bottom:1px solid var(--ln);align-items:baseline;transition:padding .5s var(--e)}
.irow:hover{padding-left:12px}
.irow h3{font-family:var(--disp);font-weight:400;font-size:clamp(22px,2vw,32px);line-height:1.2}
.irow:hover h3{color:var(--ox)}
.irow .mono:last-child{text-align:right}
@media (max-width:760px){.irow{grid-template-columns:1fr}.irow .mono:last-child{text-align:left}}
/* cta */
.wcta{position:relative;overflow:hidden;text-align:center;padding:clamp(120px,15vw,220px) 0}
.wcta .media{position:absolute;inset:0;opacity:.28}
.wcta .media img{filter:grayscale(1)}
.wcta .c{position:relative}
/* footer */
.wf{background:#09101b;color:#c7cbd3;padding:96px 0 110px;font-size:14px}
.wf__g{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px}
.wf h4{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8d96a6;margin-bottom:16px}
.wf li{margin-bottom:6px}
.wf .legal{margin-top:72px;padding-top:24px;border-top:1px solid var(--lnd);display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:12.5px;color:#8d96a6}
@media (max-width:900px){.wf__g{grid-template-columns:1fr 1fr}.wf__g>div:first-child{grid-column:1/-1}}
/* subpages */
.wphead{background:var(--navy);color:var(--paper);padding:clamp(180px,20vw,260px) 0 clamp(64px,8vw,110px)}
.wphead .row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.wphead p{max-width:42ch;color:#c7cbd3}
.pa{display:grid;grid-template-columns:1fr 1.6fr;gap:clamp(32px,6vw,120px);padding:clamp(56px,6vw,96px) 0;border-bottom:1px solid var(--ln)}
.pa .n{font-family:var(--mono);font-size:12px;color:var(--ox)}
.pa h2{font-family:var(--disp);font-weight:400;font-size:clamp(34px,3.6vw,60px);line-height:1.02;margin-top:14px}
.pa p{color:#3c4350;max-width:62ch}
.pa ul{display:grid;grid-template-columns:1fr 1fr;gap:10px 28px;margin-top:28px}
.pa li{padding:12px 0;border-bottom:1px solid var(--ln);font-size:15px}
.pa .lead{font-family:var(--disp);font-size:clamp(22px,1.8vw,28px);line-height:1.3;color:var(--navy);margin-bottom:18px}
@media (max-width:900px){.pa{grid-template-columns:1fr}.pa ul{grid-template-columns:1fr}}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:48px}
.tabs button{height:42px;padding:0 18px;border:1px solid var(--ln);background:none;cursor:pointer;font:500 14px var(--sans);transition:all .4s var(--e)}
.tabs button[aria-pressed=true]{background:var(--navy);color:var(--paper);border-color:var(--navy)}
.ppl4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.assoc{border-top:1px solid var(--ln);padding:22px 0}
.assoc h3{font-family:var(--disp);font-weight:400;font-size:24px}
.assoc p{color:var(--mid);font-size:14px}
@media (max-width:900px){.ppl4{grid-template-columns:1fr 1fr}}
.wform{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.wform .full{grid-column:1/-1}
.wform label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mid);margin-bottom:8px}
.wform input,.wform select,.wform textarea{width:100%;background:#fff;border:1px solid var(--ln);padding:16px;font-size:16px;border-radius:0}
.wform textarea{min-height:140px}
.wform :is(input,select,textarea):focus{outline:2px solid var(--ox);outline-offset:-1px}
.off3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.off{border-top:2px solid var(--navy);padding-top:22px}
.off h3{font-family:var(--disp);font-weight:400;font-size:36px;margin-bottom:12px}
.off p{color:#3c4350}
@media (max-width:900px){.wform,.off3{grid-template-columns:1fr}}