/* Goldstone Legal theme. Author: Nisar Ahmed | Creovertex */
:root{
  --gold:#BE9A4B; --gold-2:#D9B86A; --gold-ink:#7A5A14;
  --deep:#1B1F2D; --navy:#252A3C; --soft:#454962; --mist:#C9CBD6;
  --white:#FFFFFF; --stone:#F3F1EB; --stone-2:#E8E4D9;
  --serif:'Marcellus',Georgia,serif; --sans:'Open Sans',Arial,sans-serif; --max:1180px;
  --h1:clamp(34px,4.6vw,62px); --h2:clamp(30px,3.7vw,50px); --h3:24px; --mid:#252A3C; --say:clamp(20px,2vw,28px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip}
body{font-family:var(--sans);color:var(--deep);background:var(--stone);line-height:1.65;font-size:17px;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.1}
h2{font-size:var(--h2)}
h3{font-size:var(--h3)}
.wrap{width:min(var(--max),calc(100% - 48px));margin-inline:auto}
.btn{display:inline-flex;align-items:center;min-height:50px;padding:0 28px;background:var(--gold-2);color:var(--deep);font-weight:700;font-size:16px;transition:background .25s,transform .25s}
.btn:hover{background:#E8CB85}
.btn:active{transform:scale(.97)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.wi{display:inline-block;will-change:transform}

/* bar */
.top{position:fixed;inset:0 0 auto 0;z-index:50;padding:16px 0;color:#fff;transition:background .3s,padding .3s}
.top.scrolled{background:var(--deep);padding:9px 0}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-size:23px;line-height:1}
.logo img{height:60px;width:auto;transition:height .3s}
.top.scrolled .logo img{height:48px}
footer .logo img{height:72px}
@media (max-width:560px){.logo img{height:48px}}
nav ul{display:flex;gap:34px;list-style:none;font-size:16px;font-weight:600}
nav a{padding:6px 0;text-decoration:underline transparent;text-underline-offset:7px;text-decoration-thickness:2px;transition:text-decoration-color .3s}
nav a:hover{text-decoration-color:var(--gold-2)}
.top .btn{min-height:44px;padding:0 20px}
@media (max-width:980px){.top nav{display:none}}
@media (max-width:560px){.top .btn .lg{display:none}}

/* hero: the name as a monument */
.hero{position:relative;min-height:100svh;overflow:hidden;display:flex;flex-direction:column;background:var(--deep);color:#fff}
#c3d{position:absolute;inset:0;width:100%;height:100%;display:none;pointer-events:none}
.hero-in{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;padding:110px 0 70px}
.name{font-size:clamp(84px,13vw,196px);line-height:.86;letter-spacing:-.01em}
.name .ln{display:block;overflow:hidden;padding-bottom:.06em}
.name .ln span{display:inline-block;will-change:transform}
.name .g{color:var(--gold)}
.name .s{color:var(--stone)}
.sub{margin-top:34px;max-width:440px}
.sub p{font-size:var(--say);font-family:var(--serif);line-height:1.3}
.sub .btn{margin-top:26px}
.pillars{position:relative;background:var(--mid);padding:80px 0}
.pillars h2{text-align:left;width:min(var(--max),calc(100% - 48px));margin:0 auto 34px}
.pillars .set{width:min(var(--max),calc(100% - 48px));margin-inline:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.pl p{margin-top:8px;font-size:16px;color:var(--mist)}
@media (max-width:760px){.pillars .set{grid-template-columns:1fr;gap:24px}}
/* 3D mode: one held screen; the captions sit over the canvas */
.hero.is3d{height:100svh}
.hero.is3d #c3d{display:block}
.hero.is3d .hero-in{pointer-events:none}
.hero.is3d .hero-in a{pointer-events:auto}
.hero.is3d .pillars{position:absolute;inset:0;background:none;padding:0;pointer-events:none}
.hero.is3d .pillars h2{position:absolute;left:0;right:0;top:15svh;margin:0 auto;width:auto;text-align:center}
.hero.is3d .pillars .set{display:block;width:auto}
.hero.is3d .pl{position:absolute;top:76svh;left:50%;width:290px;margin-left:-145px;text-align:center}

/* gold band of route names; its speed follows the scroll */
.ribbon{background:var(--gold);color:var(--deep);overflow:hidden;padding:26px 0 30px;position:relative;z-index:2}
.ribbon .row{display:flex;white-space:nowrap;will-change:transform;font-family:var(--serif);font-size:clamp(34px,4.2vw,60px);line-height:1.15}
.ribbon .i{display:inline-flex;align-items:center;gap:.5em;padding-right:.5em}
.ribbon .i::after{content:"";width:.26em;height:.26em;border-radius:50%;background:var(--deep);flex:none}
.ribbon-note{padding:22px 0 0;font-size:17px;color:var(--soft)}

/* curved gold edge between sections */
.sec{position:relative;z-index:2}
.swoosh{position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:clamp(60px,8vw,120px);pointer-events:none}
.swoosh svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.swoosh .fill{fill:var(--bg)}
.swoosh .ln{fill:none;stroke:var(--gold);stroke-width:3;vector-effect:non-scaling-stroke}
.swoosh.flip{transform:scaleX(-1)}

/* what we handle */
.handle{--bg:var(--stone);background:var(--stone);padding:70px 0 130px}
.handle .g{display:grid;grid-template-columns:330px 1fr;gap:0;align-items:center}
.handle h2{padding-right:40px}
.handle .list{border-left:2px solid var(--gold);padding-left:64px;overflow-x:clip}
.hrow{position:relative;display:grid;grid-template-columns:minmax(230px,auto) 1fr 30px;gap:24px;align-items:center;padding:17px 16px;border-bottom:1px solid rgba(27,31,45,.28);overflow:hidden}
.hrow::before{content:"";position:absolute;inset:0;background:rgba(190,154,75,.26);transform:scaleX(0);transform-origin:0 50%;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.hrow:hover::before,.hrow:focus-visible::before{transform:scaleX(1)}
.hrow > *{position:relative}
.hrow .nm{font-family:var(--serif);font-size:22px;line-height:1.2}
.hrow .ds{font-size:16px;color:var(--soft);text-align:right}
.hrow .ar{font-size:22px;color:var(--gold-ink);transition:transform .35s}
.hrow:hover .ar{transform:translateX(8px)}
@media (max-width:980px){.handle{padding:60px 0 90px}.handle .g{grid-template-columns:1fr;gap:26px}.handle .list{border-left:0;padding-left:0}.hrow{grid-template-columns:1fr 30px;padding:15px 6px}.hrow .ds{grid-column:1;grid-row:2;text-align:left}.hrow .ar{grid-row:1;grid-column:2}}

/* two offices */
.offices{background:var(--deep);color:#fff;padding:110px 0 190px}
.offices .g{display:grid;grid-template-columns:1.55fr 1fr;gap:50px;align-items:center}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:38px;perspective:1100px}
.ocard{transform-style:preserve-3d;will-change:transform}
.ocard .ph{aspect-ratio:16/10;overflow:hidden}
.ocard img{width:100%;height:100%;object-fit:cover;will-change:transform;transition:transform .9s ease}
.ocard:hover img{transform:scale(1.06)}
.ocard h3{margin-top:18px}
.ocard address{font-style:normal;font-size:16px;color:var(--mist);margin-top:6px;line-height:1.5}
.ocard .now{margin-top:8px;font-size:16px;color:var(--gold-2);font-weight:600}
.globe{position:relative;aspect-ratio:1/1;width:100%;max-width:470px;margin-left:auto;cursor:grab;touch-action:pan-y}
.globe:active{cursor:grabbing}
.globe canvas{position:absolute;inset:0;width:100%;height:100%}
.globe .tag{position:absolute;left:0;top:0;font-size:14px;font-weight:700;background:var(--gold-2);color:var(--deep);padding:3px 9px;white-space:nowrap;pointer-events:none;opacity:0;will-change:transform}
.globe-hint{text-align:right;font-size:16px;color:var(--mist);margin-top:4px}
.no3d .globe,.no3d .globe-hint{display:none}
.no3d .offices .g{grid-template-columns:1fr}
@media (max-width:980px){.offices{padding:84px 0 130px}.offices .g{grid-template-columns:1fr}.globe{margin-inline:auto}}
@media (max-width:620px){.cards{grid-template-columns:1fr}}

/* how it works: stone steps and a gold handrail */
.steps{--bg:var(--stone);background:var(--stone);padding:40px 0 120px}
.steps .head p{margin-top:12px;color:var(--soft);max-width:30em}
.stairs{position:relative;display:grid;grid-template-columns:repeat(4,1fr);align-items:end;margin-top:110px;padding-right:30px;perspective:1400px}
.stp{position:relative;height:calc(112px + var(--n) * 46px);padding:20px 22px;z-index:var(--n);will-change:transform}
.stp::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:24px;transform-origin:50% 100%;transform:skewX(-50deg);background:var(--topc)}
.stp:last-child::after{content:"";position:absolute;left:100%;top:0;bottom:0;width:28.6px;transform-origin:0 50%;transform:skewY(-40deg);background:var(--sidec)}
.stp.s{background:#E6E1D4;--topc:#F7F4EC;--sidec:#CFC9B9}
.stp.g{background:#D6B66D;--topc:#EBD197;--sidec:#B4924A}
.stp h3{font-family:var(--sans);font-weight:700;font-size:21px}
.stp p{margin-top:6px;font-size:16px;line-height:1.45}
#rail{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:9}
#rail path{fill:none;stroke:var(--gold);stroke-width:4;stroke-linecap:round}
#rail line{stroke:var(--gold);stroke-width:3;stroke-linecap:round}
#railDot{position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible;z-index:10;pointer-events:none;opacity:0;will-change:transform}
.floor{height:26px;background:var(--stone-2);margin-right:0}
@media (max-width:900px){.steps{padding:30px 0 84px}.stairs{grid-template-columns:1fr;margin-top:40px;padding-right:0;gap:30px}.stp{height:auto;z-index:1}.stp:last-child::after{display:none}.stp::before{left:12px;right:-12px;height:14px;transform:skewX(-40deg)}#rail,.floor{display:none}}

/* fees */
.fees{background:var(--white);padding:110px 0 120px}
.fees .g{display:grid;grid-template-columns:1fr 1.1fr;gap:0;align-items:center}
.fees h2{padding-right:50px;line-height:1.16}
.fees .mark{position:relative;display:inline-block;padding:0 .16em;z-index:0}
.fees .mark i{position:absolute;inset:.04em 0 0;background:var(--gold-2);z-index:-1;transform-origin:0 50%;will-change:transform}
.fees ul{list-style:none;border-left:2px solid var(--gold);padding-left:64px}
.fees li{padding:16px 6px;border-bottom:1px solid rgba(27,31,45,.28)}
.fees li b{display:block;font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.25}
.fees li span{display:block;font-size:16px;color:var(--soft);margin-top:4px}
@media (max-width:900px){.fees{padding:80px 0 80px}.fees .g{grid-template-columns:1fr;gap:30px}.fees ul{border-left:0;padding-left:0}}

/* wide photograph */
.band{position:relative;height:74svh;min-height:420px;overflow:hidden;background:var(--deep)}
.band img{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover;will-change:transform}
.band figcaption{position:absolute;left:0;right:0;bottom:0;z-index:1}
.band figcaption span{display:inline-block;background:var(--deep);color:#fff;font-size:16px;padding:8px 14px}

/* close: the top of a column */
.close{--bg:var(--deep);background:var(--deep);color:#fff;min-height:74svh;display:flex;align-items:center;overflow:visible}
.close .in{position:relative;z-index:2;padding:60px 0 110px}
.close h2{max-width:12em}
.close p{margin-top:16px;color:#E6E7EC;max-width:27em}
.close .btn{margin-top:28px}
.close .ph{font-size:16px;color:var(--mist);margin-top:18px}
.close .ph a{text-decoration:underline;text-underline-offset:4px;color:#fff}
.waves{position:absolute;right:0;top:0;width:60%;height:100%;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
.waves path{fill:none;stroke:var(--gold-2);stroke-width:2;vector-effect:non-scaling-stroke}
.waves path:nth-child(2){opacity:.8}.waves path:nth-child(3){opacity:.62}.waves path:nth-child(4){opacity:.46}.waves path:nth-child(5){opacity:.32}.waves path:nth-child(6){opacity:.2}
@media (max-width:900px){.waves{width:100%;height:42%;top:auto;bottom:0;opacity:.7}}
@media (max-width:900px){.close{min-height:0}.close .in{padding:40px 0 90px}}

/* footer */
footer{background:#141722;color:var(--mist);padding:46px 0 34px;font-size:16px;position:relative;z-index:2}
footer .cols{display:grid;grid-template-columns:1.25fr 1fr 1fr .7fr;gap:0}
footer .cols > div{padding:4px 34px;border-left:1px solid rgba(190,154,75,.45)}
footer .cols > div:first-child{border-left:0;padding-left:0}
footer .logo{color:#fff;margin-bottom:12px}
footer b{display:block;color:#fff;margin-bottom:6px}
footer li{list-style:none;padding:2px 0}
footer a:hover{color:#fff}
footer .legal{margin-top:38px;font-size:16px;line-height:1.6}
footer .legal p{max-width:80ch}
footer .legal p + p{margin-top:8px}
@media (max-width:860px){footer .cols{grid-template-columns:1fr 1fr;gap:26px 0}footer .cols > div:nth-child(3){border-left:0;padding-left:0}}
@media (max-width:520px){footer .cols{grid-template-columns:1fr}footer .cols > div{border-left:0;padding-left:0}}


/* starting states, only while the script is running */
.js .rise{opacity:0;transform:translateY(30px)}
.js .name .ln span{transform:translateY(105%)}
.js .sub,.js .top .wrap{opacity:0}
.js .hero.is3d .pillars h2,.js .hero.is3d .pl{opacity:0}

/* ================= site pages (not in the Variation 6 preview) ================= */
.skip{position:absolute;left:-999px;top:0;background:#fff;color:var(--deep);padding:10px 14px;z-index:99;font-weight:700}
.skip:focus{left:10px;top:10px}
.admin-bar .top{top:32px}
@media (max-width:782px){.admin-bar .top{top:46px}}
.top-side{display:flex;align-items:center;gap:10px}
.top nav .current-menu-item > a,.top nav .current-page-ancestor > a{text-decoration-color:var(--gold-2)}

/* phone menu */
.burger{display:none;position:relative;width:46px;height:46px;border:0;background:transparent;color:#fff;cursor:pointer}
.burger span{position:absolute;left:10px;right:10px;height:2px;background:currentColor;transition:transform .3s,opacity .3s}
.burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:22px}.burger span:nth-child(3){top:29px}
.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-open .burger span:nth-child(2){opacity:0}
.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mnav{position:fixed;inset:0;z-index:49;background:var(--deep);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:100px 24px 40px;transform:translateY(-102%);visibility:hidden;transition:transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s .45s}
.menu-open .mnav{transform:none;visibility:visible;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.menu-open{overflow:hidden}
.menu-open .top{background:var(--deep)}
.mnav ul{list-style:none}
.mnav li a{display:block;font-family:var(--serif);font-size:30px;line-height:1.2;padding:13px 0}
.mnav .btn{margin-top:28px;align-self:flex-start}
@media (max-width:980px){.burger{display:block}}
@media (min-width:981px){.mnav{display:none}}

/* title band on inner pages */
.phero{background:var(--deep);color:#fff;padding:190px 0 150px}
.phero h1{font-size:var(--h1);max-width:15em}
.phero .lead{margin-top:22px;font-size:19px;line-height:1.6;max-width:36em;color:#E6E7EC}
.phero + .offices{padding-top:0}
@media (max-width:900px){.phero{padding:140px 0 110px}}

/* plain text sections */
.body{background:var(--white);padding:100px 0 120px}
.sec.body{--bg:var(--stone);background:var(--stone);padding:70px 0 130px}
.prose{max-width:70ch}
.prose > * + *{margin-top:1em}
.prose h2{font-size:clamp(26px,2.8vw,36px);margin-top:1.6em}
.prose h3{margin-top:1.5em}
.prose ul,.prose ol{padding-left:1.3em}
.prose li + li{margin-top:.4em}
.prose a{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:4px}
.prose a:hover{color:var(--gold-ink)}
@media (max-width:900px){.body{padding:70px 0 80px}.sec.body{padding:50px 0 90px}}

/* practice-area page */
.covers .hrow{grid-template-columns:minmax(220px,290px) 1fr;align-items:start}
.covers .hrow .ds{text-align:left}
.fees.help{padding-bottom:120px}
.why{background:var(--deep);color:#fff;padding:120px 0 200px}
.why p{font-family:var(--serif);font-size:var(--say);line-height:1.42;max-width:32em;margin-top:22px}
@media (max-width:980px){.covers .hrow{grid-template-columns:1fr}.why{padding:84px 0 140px}}

/* contact page */
.contact .g{display:grid;grid-template-columns:1fr 1.1fr;gap:70px;align-items:start}
.details .blk{padding:24px 0;border-bottom:1px solid rgba(27,31,45,.28)}
.details .blk:first-child{padding-top:0}
.details b{display:block;font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.25;margin-bottom:6px}
.details address{font-style:normal}
.details .now{color:var(--gold-ink);font-weight:600;margin-top:6px}
.details a{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}
.details .prose{margin-top:26px}
.form{background:var(--white);padding:40px}
.form label{display:block;font-weight:600;font-size:16px;margin-bottom:6px}
.form input,.form textarea,.form select{display:block;width:100%;font:inherit;color:var(--deep);background:var(--white);border:1px solid rgba(27,31,45,.4);border-radius:0;padding:13px 14px;margin-bottom:20px}
.form input:focus,.form textarea:focus,.form select:focus{outline:3px solid var(--gold);outline-offset:1px;border-color:var(--deep)}
.form textarea{resize:vertical;min-height:140px}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .btn{border:0;cursor:pointer;font-family:inherit}
.notice{padding:14px 18px;margin-bottom:22px;font-weight:600}
.notice.ok{background:#DDEBD2}
.notice.err{background:#F4D9D4}
@media (max-width:900px){.contact .g{grid-template-columns:1fr;gap:40px}.form{padding:26px 20px}}

/* footer credit */
footer .made{margin-top:14px}
footer .made a{color:#fff;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}
footer .cols a:hover{color:#fff}

/* 3D hero on phones */
@media (max-width:900px){
  .hero.is3d .hero-in{justify-content:flex-start;padding-top:100px}
  .hero.is3d .pillars h2{top:12svh;padding:0 20px;font-size:28px}
  .hero.is3d .pillars .set{position:absolute;left:20px;right:20px;bottom:4svh;display:grid;gap:12px}
  .hero.is3d .pl{position:static;width:auto;margin:0;text-align:left;left:auto!important}
  .hero.is3d .pl h3{font-size:19px}
  .hero.is3d .pl p{font-size:15px;margin-top:2px}
}

/* wide photo: shorter on phones, so the small phone copy stays sharp enough */
@media (max-width:900px){.band{height:52svh;min-height:300px}}